diff --git a/README.md b/README.md index 07842695e3..a8aa9aff31 100644 --- a/README.md +++ b/README.md @@ -64,4 +64,4 @@ We welcome contributions to the `gluestack-ui`. If you have an idea for a new co ## License -Licensed under the MIT License, Copyright © 2023 GeekyAnts. See [LICENSE](https://github.com/gluestack/gluestack-ui/blob/main/LICENSE) for more information. +Licensed under the MIT License, Copyright © 2024 GeekyAnts. See [LICENSE](https://github.com/gluestack/gluestack-ui/blob/main/LICENSE) for more information. diff --git a/example/storybook-nativewind/package.json b/example/storybook-nativewind/package.json index 372f2b6132..38d8d7cbab 100644 --- a/example/storybook-nativewind/package.json +++ b/example/storybook-nativewind/package.json @@ -32,7 +32,7 @@ "@gluestack-style/animation-resolver": "^1.0.4", "@gluestack-style/react": "^1.0.57", "@gluestack-ui/config": "^1.1.19", - "@gluestack-ui/themed": "^1.1.51", + "@gluestack-ui/themed": "^1.1.54", "@gluestack/design-system": "^0.5.36", "@gorhom/bottom-sheet": "^5.0.0-alpha.10", "@legendapp/motion": "^2.2.0", diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx index e3677ac1e5..1c8d737ebe 100644 --- a/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx @@ -435,6 +435,24 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/ + + + + preventScroll + + + + boolean + + + true + + + + {`If true, scroll will be prevented when the Actionsheet is open.`} + + + diff --git a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx index 28f8a07abd..2e07217207 100644 --- a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx @@ -92,7 +92,7 @@ This is an illustration of **Badge** component. action: { control: 'select', options: ['error', 'warning', 'success', 'info', 'muted'], - default: 'success', + default: 'muted', }, }, }} diff --git a/example/storybook-nativewind/src/components/FormControl/FormControl.stories.tsx b/example/storybook-nativewind/src/components/FormControl/FormControl.stories.tsx index 77a1bf5a88..7dd82cee61 100644 --- a/example/storybook-nativewind/src/components/FormControl/FormControl.stories.tsx +++ b/example/storybook-nativewind/src/components/FormControl/FormControl.stories.tsx @@ -28,8 +28,8 @@ const FormControlMeta: ComponentMeta = { }, }, args: { - isInvalid: true, - isRequired: true, + isInvalid: false, + isRequired: false, isDisabled: false, size: 'md', }, diff --git a/example/storybook-nativewind/src/components/FormControl/FormControl.tsx b/example/storybook-nativewind/src/components/FormControl/FormControl.tsx index 9a2616c0e2..3f49d37c10 100644 --- a/example/storybook-nativewind/src/components/FormControl/FormControl.tsx +++ b/example/storybook-nativewind/src/components/FormControl/FormControl.tsx @@ -9,36 +9,60 @@ import { FormControlErrorIcon, FormControlErrorText, } from '@/components/ui/form-control'; -import { AlertCircleIcon } from 'lucide-react-native'; +import { AlertCircleIcon } from '@/components/ui/icon'; import { Input, InputField } from '@/components/ui/input'; +import { Button, ButtonText } from '@/components/ui/button'; +import { VStack } from '@/components/ui/vstack'; + +const FormControlBasic = ({ isInvalid: propsIsInvalid, ...props }: any) => { + const [isInvalid, setIsInvalid] = React.useState(propsIsInvalid); + const [inputValue, setInputValue] = React.useState('12345'); + + const handleSubmit = () => { + if (inputValue.length < 6) { + setIsInvalid(true); + } else { + setIsInvalid(false); + } + }; + + React.useEffect(() => { + setIsInvalid(propsIsInvalid); + }, [propsIsInvalid]); -const FormControlBasic = ({ ...props }: any) => { return ( - - - Password - - - - - - - - Must be atleast 6 characters. - - - - - - - Atleast 6 characters are required. - - - + + + + Password + + + setInputValue(text)} + /> + + + + + Must be atleast 6 characters. + + + + + + + Atleast 6 characters are required. + + + + + + ); }; diff --git a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx index 436da8366b..f3b3e4c2d1 100644 --- a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx @@ -93,40 +93,57 @@ This is an illustration of **FormControl** component. - - - Password - - - - - - - Must be at least 6 characters. - - - - - - At least 6 characters are required. - - - - + function App () { + const [isInvalid, setIsInvalid] = React.useState(false); + const [inputValue, setInputValue] = React.useState('12345'); + const handleSubmit = () => { + if (inputValue.length < 6) { + setIsInvalid(true); + } else { + setIsInvalid(false); + } + }; + return ( + + + + Password + + + setInputValue(text)} + /> + + + + Must be atleast 6 characters. + + + + + + Atleast 6 characters are required. + + + + + + ); + }; `, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'App'); }, scope: { Wrapper, @@ -138,13 +155,33 @@ This is an illustration of **FormControl** component. FormControlError, FormControlErrorIcon, FormControlErrorText, - Icon, + useState, Input, InputField, AlertCircleIcon, - Box, + Button, + ButtonText, + VStack, + }, + argsType: { + size: { + control: 'select', + options: ['sm', 'md', 'lg'], + default: 'md', + }, + isDisabled: { + control: 'boolean', + default: false, + }, + isReadOnly: { + control: 'boolean', + default: false, + }, + isRequired: { + control: 'boolean', + default: false, + }, }, - argsType: {}, }} /> @@ -460,150 +497,62 @@ The Radio Component can be incorporated within the FormControl. /> -#### Form Control with Input +#### Form Control with Checkbox -The Input Component can be incorporated within the FormControl. +The Checkbox Component can be incorporated within the FormControl. - - - Password + function App() { + const [values, setValues] = React.useState(['bits']); + return ( + + + Sign up for newsletters - - - + { + setValues(keys); + }} + > + + + + + + Daily Bits + + + + + + Event Updates + + + + + + Sponsorship + + + - Must be at least 6 characters. + Subscribe to newsletters for updates - - - - At least 6 characters are required. - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - FormControl, - FormControlLabel, - FormControlLabelText, - FormControlHelper, - FormControlHelperText, - FormControlError, - FormControlErrorIcon, - FormControlErrorText, - Icon, - Input, - InputField, - AlertCircleIcon, - Box, - }, - argsType: { - size: { - control: 'select', - options: ['sm', 'md', 'lg'], - default: 'md', - }, - isDisabled: { - control: 'boolean', - default: false, - }, - isInvalid: { - control: 'boolean', - default: false, - }, - isReadOnly: { - control: 'boolean', - default: false, - }, - isRequired: { - control: 'boolean', - default: false, - }, - }, - }} - /> - - -#### Form Control with Checkbox - -The Checkbox Component can be incorporated within the FormControl. - - - - - - Sign up for newsletters - - - - - - - - - - - - Daily Bits - - - - - - - - - - Event Updates - - - - - - - - - - Sponsorship - - - - - - - Subscribe to newsletters for updates - - - + ); + } `, transformCode: (code) => { - return transformedCode(code); + return transformedCode(code, 'function', 'App'); }, scope: { Wrapper, @@ -615,6 +564,7 @@ The Checkbox Component can be incorporated within the FormControl. FormControlError, FormControlErrorIcon, FormControlErrorText, + useState, Icon, Checkbox, CheckboxGroup, diff --git a/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx index 6530e15837..5f210df1da 100644 --- a/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx @@ -171,6 +171,7 @@ export default () => ( > Note: Our responsive grid component is based on a 12-column grid layout. It follows the CSS **grid system** on the web and **flexbox layout** on native devices. Since the grid layout is only supported on the web, passing the grid-cols and col-span classNames inside _extra is **recommended** for the grid component to work effortlessly on both web and native. Our grid component currently does not support rowSpan. +> Note: The immediate parent of **GridItem** must be **Grid**. There should be no higher-order component (HOC) between them. ### Component Props diff --git a/example/storybook-nativewind/src/components/Input/Input.tsx b/example/storybook-nativewind/src/components/Input/Input.tsx index af86797b8c..3be83cf870 100644 --- a/example/storybook-nativewind/src/components/Input/Input.tsx +++ b/example/storybook-nativewind/src/components/Input/Input.tsx @@ -8,8 +8,8 @@ const InputBasic = ({ ...props }: any) => { return ( { - setValue(e.nativeEvent.text); + onChangeText={(text) => { + setValue(text); }} value={value} placeholder="Enter Text here" diff --git a/example/storybook-nativewind/src/components/Input/InputIcon.tsx b/example/storybook-nativewind/src/components/Input/InputIcon.tsx index 37ed7ab660..a097674ac2 100644 --- a/example/storybook-nativewind/src/components/Input/InputIcon.tsx +++ b/example/storybook-nativewind/src/components/Input/InputIcon.tsx @@ -18,8 +18,8 @@ const InputWithIcon = ({ ...props }: any) => { { - setValue(e.nativeEvent.text); + onChangeText={(text) => { + setValue(text); }} value={value} placeholder="Enter Text here" @@ -31,8 +31,8 @@ const InputWithIcon = ({ ...props }: any) => { { - setValue(e.nativeEvent.text); + onChangeText={(text) => { + setValue(text); }} value={value} placeholder="Enter Text here" @@ -44,8 +44,8 @@ const InputWithIcon = ({ ...props }: any) => { { - setValue(e.nativeEvent.text); + onChangeText={(text) => { + setValue(text); }} value={value} placeholder="Enter Text here" @@ -57,8 +57,8 @@ const InputWithIcon = ({ ...props }: any) => { { - setValue(e.nativeEvent.text); + onChangeText={(text) => { + setValue(text); }} value={value} placeholder="Enter Text here" diff --git a/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx index 29251dfcb1..59c290efa5 100644 --- a/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx @@ -209,6 +209,8 @@ export default () => ( ); ``` +> Note: The immediate parent of **MenuItem** must be **Menu**. There should be no higher-order component (HOC) between them. + ### Component Props This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration. diff --git a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx index 303efbeff7..1612355c78 100644 --- a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx @@ -73,10 +73,9 @@ This is an illustration of **Modal** component. code: ` function App(){ const [showModal, setShowModal] = React.useState(false); - const ref = React.useRef(null); return (
- { setShowModal(false); }} - finalFocusRef={ref} {...props} > diff --git a/example/storybook-nativewind/src/components/Tabs/index.stories.mdx b/example/storybook-nativewind/src/components/Tabs/index.stories.mdx index a4f0c18f85..3f486732cd 100644 --- a/example/storybook-nativewind/src/components/Tabs/index.stories.mdx +++ b/example/storybook-nativewind/src/components/Tabs/index.stories.mdx @@ -18,371 +18,6 @@ import Wrapper from '../../core-components/themed/Wrapper'; -## Anatomy +## WIP -The structure provided below can help you identify and understand a Tabs component's various parts. - -```jsx -export default () => ( - - - - - - - - - - -); -``` - -## API Reference - -The following section contains a comprehensive list of the component's references, including descriptions, properties, types, and default behavior. This information is readily available for you to access, helping you effectively utilize the component library in your projects. - -#### Tabs - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - defaultValue - - - - string - - - - - - - {`The value of the tab that should be active when initially rendered. Use when you do not need to control the state of the tabs.`} - - - - - - value - - - - string - - - - - - - {`The controlled value of the tab to activate. Should be used in conjunction with onValueChange.`} - - - - - - onValueChange - - - - function - - - - - - - {`Event handler called when the value changes`} - - - - - - orientation - - - - "horizontal" | "vertical" - - - "horizontal" - - - {`The orientation of the tabs.`} - - - -
- - - -#### TabsList - -Contains the triggers that are aligned along the edge of the active content. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - loop - - - - boolean - - - true - - - {`When true, keyboard navigation will loop from last tab to first, and vice versa.`} - - - -
- - - -#### TabsTrigger - -The button that activates its associated content. Must be wrapped with `TabsList`. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - value - - - - string - - - - - - - {`A unique value that associates the trigger with a content.`} - - - - - - isDisabled - - - - boolean - - - false - - - {`When true, prevents the user from interacting with the tab.`} - - - -
- - - -#### TabsText - -Must be wrapped with `TabsTrigger`. It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. - -#### TabsContents - -Wraps all the `TabsContent` components. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -#### TabsContent - -Contains the content associated with each trigger. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - value - - - - string - - - - - - - {`A unique value that associates the content with a trigger.`} - - - -
- - - -## Accessibility - -Adheres to the [Tabs WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/). - -We have outlined the various features that ensure the Tabs component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. - -- The element that serves as the container for the set of tabs has role `tablist`. -- Each element that serves as a tab has role `tab` and is contained within the element with role `tablist`. -- Each element that contains the content panel for a tab has role `tabpanel`. -- If the tab list has a visible label, the element with role `tablist` has `aria-labelledby` set to a value that refers to the labelling element. Otherwise, the `tablist` element has a label provided by `aria-label`. -- Each element with role `tab` has the property `aria-controls` referring to its associated `tabpanel` element. -- The active tab element has the state `aria-selected` set to true and all other tab elements have it set to `false`. -- Each element with role `tabpanel` has the property `aria-labelledby` referring to its associated `tab` element. -- If the `tablist` element is vertically oriented, it has the property `aria-orientation` set to `vertical`. The default value of aria-orientation for a tablist element is horizontal. - -### Keyboard Interactions - -- `Space or Enter` - Activates the tab if it was not activated automatically on focus. -- `Tab` - When focus moves onto the tabs, focuses the active trigger. When a trigger is focused, moves focus to the active content. -- `ArrowDown` - Moves focus to the next trigger depending on `orientation` and activates its associated content. -- `ArrowUp` - Moves focus to the previous trigger depending on `orientation` and activates its associated content. -- `ArrowRight` - Moves focus to the next trigger depending on `orientation` and activates its associated content. -- `ArrowLeft` - Moves focus to the previous trigger depending on `orientation` and activates its associated content. -- `Home` - Moves focus to the first trigger and activates its associated content. -- `End` - Moves focus to the last trigger and activates its associated content. - -## Unstyled - -We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements. - -### Customizing the Tabs - -We have a function called createTabs which can be used to create a custom tabs component. This function takes in a configuration object which contains the styled components that you want to use for the Tabs You can refer [gluestack.io/style](/style/docs/getting-started/styled) on how to use styled components. - -You can read more on how to animate components [here](/ui/docs/advanced/animations). - -### Usage - -Default styling of all these components can be found in the `components/core/tabs` file. For reference, you can view the [source code](https://github.com/gluestack/gluestack-ui/blob/main/packages/themed/src/components/Tabs) of the styled `Tabs` components. - -```jsx -// import the styled components - -import { - Root, - List, - Trigger, - Content, - Contents, - Text, -} from 'components/core/tabs/styled-components'; - -// import the createTabs function -import { createTabs } from '@gluestack-ui/tabs'; - -// Understanding the API -export const Tabs = createTabs({ - Root, - List, - Trigger, - Content, - Contents, - Text, -}); - -// Using the tabs component -export default () => ( - - - - Tab 1 - - - Tab 2 - - - Tab 2 - - - - - Content 1 - - - Content 2 - - - Content 3 - - - -); -``` +> Note: This component is still in development and not yet ready for use. \ No newline at end of file diff --git a/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx index a4ff928a21..fbf81f108b 100644 --- a/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx @@ -60,7 +60,7 @@ This is an illustration of **Tooltip** component. {...props} trigger={(triggerProps) => { return ( - ); diff --git a/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx index a9403a8453..81bc995b05 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx @@ -31,6 +31,7 @@ const accordionStyle = tva({ }); const accordionItemStyle = tva({ + base: 'py-3 px-4', parentVariants: { variant: { filled: 'bg-background-0', @@ -65,7 +66,7 @@ const accordionContentTextStyle = tva({ base: 'text-typography-700 font-normal', parentVariants: { size: { - sm: 'text-sm ', + sm: 'text-sm', md: 'text-base', lg: 'text-lg', }, @@ -75,10 +76,10 @@ const accordionHeaderStyle = tva({ base: 'mx-0 my-0', }); const accordionContentStyle = tva({ - base: 'px-5 mt-2 pb-5', + base: 'mt-4', }); const accordionTriggerStyle = tva({ - base: 'w-full py-5 px-5 flex-row justify-between items-center web:outline-none focus:outline-none data-[disabled=true]:opacity-40 data-[disabled=true]:cursor-not-allowed data-[focus-visible=true]:bg-background-50', + base: 'w-full flex-row justify-between items-center web:outline-none focus:outline-none data-[disabled=true]:opacity-40 data-[disabled=true]:cursor-not-allowed data-[focus-visible=true]:bg-background-50', }); type IPrimitiveIcon = { diff --git a/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx index 5da70727b7..9faf615fcc 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx @@ -181,7 +181,7 @@ type IBadgeProps = React.ComponentPropsWithoutRef & VariantProps; const Badge = ({ children, - action = 'info', + action = 'muted', variant = 'solid', size = 'md', className, diff --git a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx index 51caee1eab..51e843b338 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx @@ -112,7 +112,7 @@ cssInterop(PrimitiveIcon, { }); const buttonStyle = tva({ - base: 'group/button rounded bg-primary-500 flex-row items-center justify-center data-[focus-visible=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40', + base: 'group/button rounded bg-primary-500 flex-row items-center justify-center data-[focus-visible=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[disabled=true]:opacity-40 gap-2', variants: { action: { primary: diff --git a/example/storybook-nativewind/src/core-components/nativewind/dependencies.json b/example/storybook-nativewind/src/core-components/nativewind/dependencies.json index 2fa52abd3b..9ccb87432b 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/dependencies.json +++ b/example/storybook-nativewind/src/core-components/nativewind/dependencies.json @@ -1,4 +1,229 @@ { + "components": { + "gluestack-ui-provider": { + "dependencies": { + "tailwindcss": "", + "@gluestack-ui/overlay": "latest", + "@gluestack-ui/toast": "latest", + "@gluestack-ui/nativewind-utils": "latest", + "react-native-svg": "latest", + "nativewind": "4.1.10", + "react-native-safe-area-context": "latest" + }, + "devDependencies": { + "jscodeshift": "0.15.2" + } + }, + "accordion": { + "dependencies": { + "@gluestack-ui/accordion": "latest", + "@expo/html-elements": "0.4.2" + } + }, + "actionsheet": { + "dependencies": { + "@legendapp/motion": "latest", + "@gluestack-ui/actionsheet": "latest", + "@expo/html-elements": "0.4.2" + } + }, + "alert": { + "dependencies": { + "@gluestack-ui/alert": "latest" + } + }, + "alert-dialog": { + "dependencies": { + "@gluestack-ui/alert-dialog": "latest", + "@legendapp/motion": "latest" + } + }, + "avatar": { + "dependencies": { + "@gluestack-ui/avatar": "latest" + } + }, + "badge": { + "dependencies": {} + }, + "box": { + "dependencies": {} + }, + "button": { + "dependencies": { + "@gluestack-ui/button": "latest" + } + }, + "card": { + "dependencies": {} + }, + "center": { + "dependencies": {} + }, + "checkbox": { + "dependencies": { + "@gluestack-ui/checkbox": "latest" + } + }, + "divider": { + "dependencies": { + "@gluestack-ui/divider": "latest" + } + }, + "fab": { + "dependencies": { + "@gluestack-ui/fab": "latest" + } + }, + "flat-list": { + "dependencies": {} + }, + "form-control": { + "dependencies": { + "@gluestack-ui/form-control": "latest" + } + }, + "heading": { + "dependencies": { + "@expo/html-elements": "0.4.2" + } + }, + "hstack": { + "dependencies": {} + }, + "icon": { + "dependencies": { + "@gluestack-ui/icon": "latest" + } + }, + "image": { + "dependencies": { + "@gluestack-ui/image": "latest" + } + }, + "image-background": { + "dependencies": {} + }, + "input": { + "dependencies": { + "@gluestack-ui/input": "latest" + } + }, + "input-accessory-view": { + "dependencies": {} + }, + "keyboard-avoiding-view": { + "dependencies": {} + }, + "link": { + "dependencies": { + "@gluestack-ui/link": "latest" + } + }, + "menu": { + "dependencies": { + "@gluestack-ui/menu": "latest", + "@legendapp/motion": "latest" + } + }, + "modal": { + "dependencies": { + "@gluestack-ui/modal": "latest", + "@legendapp/motion": "latest" + } + }, + "popover": { + "dependencies": { + "@gluestack-ui/popover": "latest", + "@legendapp/motion": "latest" + } + }, + "pressable": { + "dependencies": { + "@gluestack-ui/pressable": "latest" + } + }, + "progress": { + "dependencies": { + "@gluestack-ui/progress": "latest" + } + }, + "radio": { + "dependencies": { + "@gluestack-ui/radio": "latest" + } + }, + "refresh-control": { + "dependencies": {} + }, + "safe-area-view": { + "dependencies": {} + }, + "scroll-view": { + "dependencies": {} + }, + "section-list": { + "dependencies": {} + }, + "select": { + "dependencies": { + "@gluestack-ui/select": "latest", + "@gluestack-ui/actionsheet": "latest", + "@legendapp/motion": "latest", + "@expo/html-elements": "0.4.2" + } + }, + "slider": { + "dependencies": { + "@gluestack-ui/slider": "latest" + } + }, + "spinner": { + "dependencies": { + "@gluestack-ui/spinner": "latest" + } + }, + "status-bar": { + "dependencies": {} + }, + "switch": { + "dependencies": { + "@gluestack-ui/switch": "latest" + } + }, + "text": { + "dependencies": {} + }, + "textarea": { + "dependencies": { + "@gluestack-ui/textarea": "latest" + } + }, + "toast": { + "dependencies": { + "@gluestack-ui/toast": "latest", + "@legendapp/motion": "latest" + } + }, + "tooltip": { + "dependencies": { + "@gluestack-ui/tooltip": "latest", + "@legendapp/motion": "latest" + } + }, + "view": { + "dependencies": {} + }, + "virtualized-list": { + "dependencies": {} + }, + "vstack": { + "dependencies": {} + }, + "grid": { + "dependencies": {}, + "hooks": ["useBreakpointValue"] +======= "gluestack-ui-provider": { "dependencies": { "tailwindcss": "", @@ -185,7 +410,5 @@ "@legendapp/motion": "latest" } }, - "view": { "dependencies": {} }, - "virtualized-list": { "dependencies": {} }, - "vstack": { "dependencies": {} } + "IgnoredComponents": ["bottomsheet"] } diff --git a/example/storybook-nativewind/src/core-components/nativewind/grid/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/grid/index.tsx index ff8f9ee899..7e0d36b987 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/grid/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/grid/index.tsx @@ -14,6 +14,7 @@ import { useBreakpointValue, getBreakPointValue, } from '@/components/ui/utils/use-break-point-value'; + const { width: DEVICE_WIDTH } = Dimensions.get('window'); const GridContext = createContext({}); @@ -117,6 +118,9 @@ type IGridProps = ViewProps & paddingRight?: number; paddingStart?: number; paddingEnd?: number; + borderWidth?: number; + borderLeftWidth?: number; + borderRightWidth?: number; _extra: { className: string; }; @@ -182,6 +186,10 @@ const Grid = forwardRef, IGridProps>( }; }, [calculatedWidth, itemsPerRow, responsiveNumColumns, props]); + const borderLeftWidth = props?.borderLeftWidth || props?.borderWidth || 0; + const borderRightWidth = props?.borderRightWidth || props?.borderWidth || 0; + const borderWidthToSubtract = borderLeftWidth + borderRightWidth; + return ( , IGridProps>( const paddingRightToSubtract = props?.paddingEnd || props?.paddingRight || props?.padding || 0; - const width = + const gridWidth = event.nativeEvent.layout.width - paddingLeftToSubtract - - paddingRightToSubtract; + paddingRightToSubtract - + borderWidthToSubtract; - setCalculatedWidth(width); + setCalculatedWidth(gridWidth); }} {...props} > @@ -225,6 +234,9 @@ cssInterop(Grid, { paddingRight: 'paddingRight', paddingStart: 'paddingStart', paddingEnd: 'paddingEnd', + borderWidth: 'borderWidth', + borderLeftWidth: 'borderLeftWidth', + borderRightWidth: 'borderRightWidth', }, }, }); @@ -270,7 +282,7 @@ const GridItem = forwardRef, IGridItemProps>( return itemsPerRow[key].includes(props?.index); }); - const rowColsCount = itemsPerRow[row as string].length; + const rowColsCount = itemsPerRow[row as string]?.length; const space = columnGap || gap || 0; diff --git a/example/storybook-nativewind/src/core-components/nativewind/image/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/image/index.tsx index c497fc06a2..1afc87a2d7 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/image/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/image/index.tsx @@ -17,6 +17,7 @@ const imageStyle = tva({ 'xl': 'h-32 w-32', '2xl': 'h-64 w-64', 'full': 'h-full w-full', + 'none': '', }, }, }); diff --git a/example/storybook-nativewind/src/core-components/nativewind/modal/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/modal/index.tsx index 157d0c2c9a..8e330c920c 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/modal/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/modal/index.tsx @@ -72,7 +72,7 @@ const modalContentStyle = tva({ }); const modalBodyStyle = tva({ - base: 'mt-4 mb-6', + base: 'mt-2 mb-6', }); const modalCloseButtonStyle = tva({ diff --git a/example/storybook-nativewind/src/extra-components/nativewind/Demos/AccordionDemo.tsx b/example/storybook-nativewind/src/extra-components/nativewind/Demos/AccordionDemo.tsx index 41ef0e4280..3db60e275e 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/Demos/AccordionDemo.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/Demos/AccordionDemo.tsx @@ -9,10 +9,10 @@ import { AccordionContent, AccordionContentText, Divider, + ScrollView, } from '../../../core-components/nativewind'; -import { ChevronDownIcon } from 'lucide-react-native'; -import { ChevronUpIcon } from 'lucide-react-native'; -import { ScrollView } from '../../../core-components/nativewind'; +import { ChevronUpIcon, ChevronDownIcon } from 'lucide-react-native'; + const AccordionDemo = () => { const accRef = React.useRef(null); return ( diff --git a/example/storybook-nativewind/src/extra-components/nativewind/Demos/ActionsheetDemo.tsx b/example/storybook-nativewind/src/extra-components/nativewind/Demos/ActionsheetDemo.tsx index 671605f90f..d54ad319bc 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/Demos/ActionsheetDemo.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/Demos/ActionsheetDemo.tsx @@ -1,9 +1,4 @@ import React from 'react'; -import { - Button, - ButtonText, - Center, -} from '../../../core-components/nativewind'; import { Actionsheet, ActionsheetBackdrop, @@ -12,17 +7,19 @@ import { ActionsheetDragIndicatorWrapper, ActionsheetItem, ActionsheetItemText, -} from '../../../core-components/nativewind/actionsheet'; + Button, + ButtonText, + Center, +} from '../../../core-components/nativewind'; const ActionsheetDemo = () => { const [showActionsheet, setShowActionsheet] = React.useState(false); - const handleClose = () => setShowActionsheet(false); return (
diff --git a/example/storybook-nativewind/src/extra-components/nativewind/Demos/AlertDemo.tsx b/example/storybook-nativewind/src/extra-components/nativewind/Demos/AlertDemo.tsx index 93ebe43b39..c889575bc0 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/Demos/AlertDemo.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/Demos/AlertDemo.tsx @@ -3,12 +3,12 @@ import { Alert, AlertIcon, AlertText, + InfoIcon, } from '../../../core-components/nativewind'; -import { InfoIcon } from '../../../core-components/nativewind'; const AlertDemo = () => { return ( - + Description of alert! diff --git a/example/storybook-nativewind/src/extra-components/nativewind/Demos/AlertDialogDemo.tsx b/example/storybook-nativewind/src/extra-components/nativewind/Demos/AlertDialogDemo.tsx index 0c398fbf2f..71697215d1 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/Demos/AlertDialogDemo.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/Demos/AlertDialogDemo.tsx @@ -19,7 +19,7 @@ const AlertDialogDemo = () => { return ( diff --git a/example/storybook-nativewind/src/extra-components/nativewind/Demos/AvatarDemo.tsx b/example/storybook-nativewind/src/extra-components/nativewind/Demos/AvatarDemo.tsx index b79d5e5e00..d4a481aa16 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/Demos/AvatarDemo.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/Demos/AvatarDemo.tsx @@ -1,11 +1,12 @@ +import React from 'react'; import { Avatar, AvatarBadge, AvatarFallbackText, AvatarImage, } from '../../../core-components/nativewind/avatar'; -import React from 'react'; -const Avatardemo = () => { + +const AvatarDemo = () => { return ( John Doe @@ -19,4 +20,4 @@ const Avatardemo = () => { ); }; -export default Avatardemo; +export default AvatarDemo; diff --git a/example/storybook-nativewind/src/extra-components/nativewind/Demos/BadgeDemo.tsx b/example/storybook-nativewind/src/extra-components/nativewind/Demos/BadgeDemo.tsx index f16e38f591..80391c292b 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/Demos/BadgeDemo.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/Demos/BadgeDemo.tsx @@ -3,11 +3,12 @@ import { Badge, BadgeText, BadgeIcon, -} from '../../../core-components/nativewind/badge'; -import { GlobeIcon } from '../../../core-components/nativewind/icon'; + GlobeIcon, +} from '../../../core-components/nativewind'; + const BadgeDemo = () => { return ( - + Verified diff --git a/example/storybook-nativewind/src/extra-components/nativewind/Demos/BoxDemo.tsx b/example/storybook-nativewind/src/extra-components/nativewind/Demos/BoxDemo.tsx index 43ce4baa79..8d4112c745 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/Demos/BoxDemo.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/Demos/BoxDemo.tsx @@ -1,10 +1,10 @@ -import { Box, Text } from '../../../core-components/nativewind'; import React from 'react'; +import { Box, Text } from '../../../core-components/nativewind'; const BoxDemo = () => { return ( - - This is the Box + + This is a Box. ); }; diff --git a/example/storybook-nativewind/src/extra-components/nativewind/Demos/ButtonDemo.tsx b/example/storybook-nativewind/src/extra-components/nativewind/Demos/ButtonDemo.tsx index 0b5141430a..feb4519f9f 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/Demos/ButtonDemo.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/Demos/ButtonDemo.tsx @@ -1,5 +1,5 @@ -import { Button, ButtonText } from '../../../core-components/nativewind/button'; import React from 'react'; +import { Button, ButtonText } from '../../../core-components/nativewind/button'; const ButtonDemo = () => { return ( diff --git a/example/storybook-nativewind/src/extra-components/nativewind/Demos/CenterDemo.tsx b/example/storybook-nativewind/src/extra-components/nativewind/Demos/CenterDemo.tsx index d90b542812..233fcf5167 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/Demos/CenterDemo.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/Demos/CenterDemo.tsx @@ -1,11 +1,10 @@ import React from 'react'; -import { Center } from '../../../core-components/nativewind/center'; -import { Text } from '../../../core-components/nativewind/text'; +import { Center, Text } from '../../../core-components/nativewind'; const CenterDemo = () => { return (
- This is the center. + This is a center.
); }; diff --git a/example/storybook-nativewind/src/extra-components/nativewind/Demos/CheckboxDemo.tsx b/example/storybook-nativewind/src/extra-components/nativewind/Demos/CheckboxDemo.tsx index f4bb03aef1..11485d32f5 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/Demos/CheckboxDemo.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/Demos/CheckboxDemo.tsx @@ -1,3 +1,4 @@ +import React from 'react'; import { CheckIcon, Checkbox, @@ -5,11 +6,10 @@ import { CheckboxIndicator, CheckboxLabel, } from '../../../core-components/nativewind'; -import React from 'react'; export const CheckboxDemo = () => { return ( - + diff --git a/example/storybook-nativewind/src/extra-components/nativewind/Demos/FabDemo.tsx b/example/storybook-nativewind/src/extra-components/nativewind/Demos/FabDemo.tsx index 33959b7418..b7638fcd8b 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/Demos/FabDemo.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/Demos/FabDemo.tsx @@ -1,10 +1,10 @@ +import React from 'react'; import { Fab, FabIcon, Box, MenuIcon, } from '../../../core-components/nativewind'; -import React from 'react'; const FabDemo = () => { return ( diff --git a/example/storybook-nativewind/src/extra-components/nativewind/Demos/FormControlDemo.tsx b/example/storybook-nativewind/src/extra-components/nativewind/Demos/FormControlDemo.tsx index d142213a43..6c8ded22bf 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/Demos/FormControlDemo.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/Demos/FormControlDemo.tsx @@ -1,44 +1,67 @@ import React from 'react'; import { - AlertCircleIcon, FormControl, FormControlHelper, - Input, FormControlLabel, FormControlLabelText, FormControlHelperText, FormControlError, FormControlErrorText, FormControlErrorIcon, + Input, InputField, + AlertCircleIcon, + Button, + ButtonText, + VStack, } from '../../../core-components/nativewind'; + const FormControlDemo = () => { + const [isInvalid, setIsInvalid] = React.useState(false); + const [inputValue, setInputValue] = React.useState('12345'); + + const handleSubmit = () => { + if (inputValue.length < 6) { + setIsInvalid(true); + } else { + setIsInvalid(false); + } + }; return ( - - - Password - - - - + + + + Password + + + { + setInputValue(text); + }} + /> + + + + + Must be atleast 6 characters. + + - - - Must be atleast 6 characters. - - + + + + Atleast 6 characters are required. + + + - - - - Atleast 6 characters are required. - - - + + ); }; diff --git a/example/storybook-nativewind/src/extra-components/nativewind/Demos/HStackDemo.tsx b/example/storybook-nativewind/src/extra-components/nativewind/Demos/HStackDemo.tsx index 8d7c70939c..a2935570f8 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/Demos/HStackDemo.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/Demos/HStackDemo.tsx @@ -3,7 +3,7 @@ import { Box, HStack } from '../../../core-components/nativewind'; const HStackDemo = () => { return ( - + diff --git a/example/storybook-nativewind/src/extra-components/nativewind/Demos/HeadingDemo.tsx b/example/storybook-nativewind/src/extra-components/nativewind/Demos/HeadingDemo.tsx index 7bc66824f7..1bbda1762f 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/Demos/HeadingDemo.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/Demos/HeadingDemo.tsx @@ -1,7 +1,8 @@ import React from 'react'; import { Heading } from '../../../core-components/nativewind'; + const HeadingDemo = () => { - return I am a Heading; + return I am a Heading.; }; export default HeadingDemo; diff --git a/example/storybook-nativewind/src/extra-components/nativewind/Demos/InputDemo.tsx b/example/storybook-nativewind/src/extra-components/nativewind/Demos/InputDemo.tsx index d803bb3cd1..1975cbab78 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/Demos/InputDemo.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/Demos/InputDemo.tsx @@ -1,5 +1,5 @@ -import { Input, InputField } from '../../../core-components/nativewind'; import React from 'react'; +import { Input, InputField } from '../../../core-components/nativewind'; const InputDemo = () => { return ( diff --git a/example/storybook-nativewind/src/extra-components/nativewind/Demos/ModalDemo.tsx b/example/storybook-nativewind/src/extra-components/nativewind/Demos/ModalDemo.tsx index 97cbf428e5..dda0efb133 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/Demos/ModalDemo.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/Demos/ModalDemo.tsx @@ -1,3 +1,5 @@ +import React from 'react'; +import { OverlayProvider } from '@gluestack-ui/overlay'; import { Heading, ModalBackdrop, @@ -13,12 +15,11 @@ import { Text, ModalFooter, } from '../../../core-components/nativewind'; -import React, { useState } from 'react'; -import { OverlayProvider } from '@gluestack-ui/overlay'; const ModalDemo = () => { - const [showModal, setShowModal] = useState(false); + const [showModal, setShowModal] = React.useState(false); const ref = React.useRef(null); + return ( ); }} diff --git a/example/storybook-nativewind/src/extra-components/nativewind/Demos/VStackDemo.tsx b/example/storybook-nativewind/src/extra-components/nativewind/Demos/VStackDemo.tsx index a94eec0c13..393a8dd17c 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/Demos/VStackDemo.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/Demos/VStackDemo.tsx @@ -3,11 +3,7 @@ import { Box, VStack } from '../../../core-components/nativewind'; const VStackDemo = () => { return ( - + diff --git a/example/storybook-nativewind/src/extra-components/nativewind/content.tsx b/example/storybook-nativewind/src/extra-components/nativewind/content.tsx index 4abc9f80b2..af0f6db490 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/content.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/content.tsx @@ -21,7 +21,7 @@ import LinkDemo from './Demos/LinkDemo'; import PressableDemo from './Demos/PressableDemo'; import RadioDemo from './Demos/RadioDemo'; import SwitchDemo from './Demos/SwitchDemo'; -import TextAreaDemo from './Demos/TeaxtAreaDemo'; +import TextAreaDemo from './Demos/TextAreaDemo'; import TooltipDemo from './Demos/TooltipDemo'; import IconDemo from './Demos/IconDemo'; import ImageDemo from './Demos/ImageDemo'; diff --git a/example/storybook-nativewind/src/home/getting-started/Installation/index.nw.stories.mdx b/example/storybook-nativewind/src/home/getting-started/Installation/index.nw.stories.mdx index 88cfbbcc4f..2d638fb88b 100644 --- a/example/storybook-nativewind/src/home/getting-started/Installation/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/home/getting-started/Installation/index.nw.stories.mdx @@ -45,6 +45,7 @@ Ensure you have the following prerequisites installed on your project to use glu - Node.js: Version 16 or higher. - React: Version 18 or higher. +- Operating System: macOS. We are currently working on support for Windows OS. For now, we recommend using the manual installation guide to avoid any issues. ### Step 2: Initialize @@ -92,7 +93,7 @@ npm i @gluestack-ui/nativewind-utils ### Step 2.1: Update Tailwind configuration -Update `tailwind.config.js` file with the following code +Update the `tailwind.config.js` file with the following code and also the the `content` property with paths to the files where components are used. ```js %%-- File: tailwind.config.js --%% @@ -108,7 +109,7 @@ Create a `components/ui` folder inside `src` folder and add path in `tsconfig.js // ... "paths": { // ... - "@/*": ["./src/*"] // Add relative path + "@/*": ["./*"] // Add relative path }, } ``` @@ -147,6 +148,16 @@ To add `GluestackUIProvider`, create a `gluestack-ui-provider/index.web.tsx` fil +Also, create a `gluestack-ui-provider/script.ts` file inside `components/ui` folder and paste the following code. + + + +```jsx +%%-- File: core-components/nativewind/gluestack-ui-provider/script.ts --%% +``` + + + ### Step 3: Configure GluestackUIProvider in project Wrap your app with `GluestackUIProvider` in `App.tsx`. diff --git a/example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx b/example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx index 2105b93a17..efbf3bdf8a 100644 --- a/example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx @@ -13,7 +13,8 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; The gluestack-ui CLI is a tool that simplifies integrating the gluestack-ui into your project. It provides commands for initialising and adding components to your project. -> Installation using gluestack-ui CLI in Expo projects supports for Expo SDK 50 and above. For Expo SDK < 49, please refer to the manual installation guide [here](https://gluestack.io/ui/docs/home/getting-started/installation). +> - Installation using gluestack-ui CLI in Expo projects supports for Expo SDK 50 and above. For Expo SDK < 49, please refer to the manual installation guide [here](https://gluestack.io/ui/docs/home/getting-started/installation). +- Currently we are working on support for Windows OS. For now, we recommend using the manual installation guide to avoid any issues. ## Init @@ -25,6 +26,7 @@ The init command adds the necessary `gluestack-ui.config.json` file, includes th - `next.config.js` ( for Next.js) - `tailwind.config.js` - `global.css` (for Tailwind CSS) +- `ts.config.json` - entry file (for your project) @@ -38,6 +40,8 @@ npx gluestack-ui init - `--path `: Specifies the directory path where you want to add the GluestackUIProvider component. By default, it creates the component in the `components/ui` directory within your project's root. +- `--use-`: This flag specifies the package manager to use when initializing gluestack-ui. Supported options are npm (default), yarn, bun, and pnpm. Replace `` with your preferred package manager. + ```bash Usage: npx gluestack-ui init [options] @@ -68,6 +72,10 @@ add component to your project Options: --all Adds all existing components from gluestack-ui --path Path to add components, defaults to the directory where GluestackUIProvider is located. + --use-npm Set npm as the project's package manager, default + --use-yarn Set yarn as the project's package manager + --use-bun Set bun as the project's package manager + --use-pnpm Set pnpm as the project's package manager, currently not supported in react-native-cli projects ``` ## gluestack-ui.config.json diff --git a/example/storybook-nativewind/tsconfig.json b/example/storybook-nativewind/tsconfig.json index 3ea4936d93..798a40bd4f 100644 --- a/example/storybook-nativewind/tsconfig.json +++ b/example/storybook-nativewind/tsconfig.json @@ -5,6 +5,7 @@ "paths": { "@/components/ui/*": ["src/core-components/nativewind/*"], "@/components/hooks/*": ["src/core-components/hooks/*"], + "@/components/ui/utils/*": ["src/core-components/hooks/*"], "@gluestack-style/react": ["../../packages/styled/react/src"], "@gluestack-ui/popover": ["../../packages/unstyled/popover/src"], "@gluestack-ui/overlay": ["../../packages/unstyled/overlay/src"], diff --git a/packages/config/package.json b/packages/config/package.json index bf0962ad6c..cff517caee 100644 --- a/packages/config/package.json +++ b/packages/config/package.json @@ -39,9 +39,9 @@ "@gluestack-style/legend-motion-animation-driver": "1.0.3", "@gluestack-style/react": "1.0.57", "@gluestack-ui/accordion": "1.0.7", - "@gluestack-ui/actionsheet": "0.2.44", + "@gluestack-ui/actionsheet": "0.2.45", "@gluestack-ui/alert": "0.1.15", - "@gluestack-ui/alert-dialog": "0.1.30", + "@gluestack-ui/alert-dialog": "0.1.31", "@gluestack-ui/avatar": "0.1.17", "@gluestack-ui/button": "1.0.7", "@gluestack-ui/checkbox": "0.1.32", @@ -66,14 +66,14 @@ "@gluestack-ui/switch": "0.1.22", "@gluestack-ui/tabs": "0.1.17", "@gluestack-ui/textarea": "0.1.23", - "@gluestack-ui/themed": "1.1.51", + "@gluestack-ui/themed": "1.1.54", "@gluestack-ui/toast": "1.0.7", - "@gluestack-ui/tooltip": "0.1.32", + "@gluestack-ui/tooltip": "0.1.33", "@legendapp/motion": "latest" }, "peerDependencies": { "@gluestack-style/react": ">=1.0.57", - "@gluestack-ui/themed": ">=1.1.51" + "@gluestack-ui/themed": ">=1.1.54" }, "release-it": { "git": { diff --git a/packages/nativewind/utils/README.md b/packages/nativewind/utils/README.md index 688aa5a5c3..a42abcbe9f 100644 --- a/packages/nativewind/utils/README.md +++ b/packages/nativewind/utils/README.md @@ -1,8 +1,6 @@ # `@gluestack-ui/nativewind-utils` -```json A utility function package for @gluestack-ui/nativewind -``` ## Installation @@ -16,7 +14,7 @@ npx install @gluestack-ui/nativewind-utils ```jsx // import the tva -import { tva } from '@gluestack-ui/nativewind-utils'; +import { tva } from '@gluestack-ui/nativewind-utils/tva'; // Understanding the API const buttonStyle = tva({ diff --git a/packages/nativewind/utils/package.json b/packages/nativewind/utils/package.json index e76ba94c56..da9136b573 100644 --- a/packages/nativewind/utils/package.json +++ b/packages/nativewind/utils/package.json @@ -17,7 +17,7 @@ "main": "index.js", "module": "index.js", "types": "index.d.ts", - "version": "1.0.24", + "version": "1.0.25", "react-native": "src/index", "source": "src/index", "scripts": { diff --git a/packages/nativewind/utils/tailwind-plugin/index.js b/packages/nativewind/utils/tailwind-plugin/index.js index f47495dfcf..4849589f8c 100644 --- a/packages/nativewind/utils/tailwind-plugin/index.js +++ b/packages/nativewind/utils/tailwind-plugin/index.js @@ -1,4 +1,5 @@ -const plugin = require('tailwindcss/plugin'); +import plugin from 'tailwindcss/plugin'; + const stateObj = { 'indeterminate=true': 1, 'indeterminate=false': 1, diff --git a/packages/nativewind/utils/tailwind-plugin/index.ts b/packages/nativewind/utils/tailwind-plugin/index.ts index 97375d4d14..0f458b564e 100644 --- a/packages/nativewind/utils/tailwind-plugin/index.ts +++ b/packages/nativewind/utils/tailwind-plugin/index.ts @@ -1,4 +1,4 @@ -const plugin = require('tailwindcss/plugin'); +import plugin from 'tailwindcss/plugin'; const stateObj = { 'indeterminate=true': 1, diff --git a/packages/themed/CHANGELOG.md b/packages/themed/CHANGELOG.md index 5ed0ffe3ed..e32dd611af 100644 --- a/packages/themed/CHANGELOG.md +++ b/packages/themed/CHANGELOG.md @@ -1,5 +1,26 @@ # @gluestack-ui/themed +## 1.1.54 + +### Patch Changes + +- Updated dependencies + - @gluestack-ui/alert-dialog@0.1.31 + +## 1.1.53 + +### Patch Changes + +- Updated dependencies + - @gluestack-ui/tooltip@0.1.33 + +## 1.1.52 + +### Patch Changes + +- Updated dependencies + - @gluestack-ui/actionsheet@0.2.45 + ## 1.1.51 ### Patch Changes diff --git a/packages/themed/package.json b/packages/themed/package.json index e5a7f6902e..99fba5c5d0 100644 --- a/packages/themed/package.json +++ b/packages/themed/package.json @@ -1,6 +1,6 @@ { "name": "@gluestack-ui/themed", - "version": "1.1.51", + "version": "1.1.54", "main": "build/index.js", "types": "build/index.d.ts", "module": "build/index", @@ -38,9 +38,9 @@ "@gluestack-style/animation-resolver": "1.0.4", "@gluestack-style/legend-motion-animation-driver": "1.0.3", "@gluestack-ui/accordion": "1.0.7", - "@gluestack-ui/actionsheet": "0.2.44", + "@gluestack-ui/actionsheet": "0.2.45", "@gluestack-ui/alert": "0.1.15", - "@gluestack-ui/alert-dialog": "0.1.30", + "@gluestack-ui/alert-dialog": "0.1.31", "@gluestack-ui/avatar": "0.1.17", "@gluestack-ui/button": "1.0.7", "@gluestack-ui/checkbox": "0.1.32", @@ -66,7 +66,7 @@ "@gluestack-ui/tabs": "0.1.17", "@gluestack-ui/textarea": "0.1.23", "@gluestack-ui/toast": "1.0.7", - "@gluestack-ui/tooltip": "0.1.32", + "@gluestack-ui/tooltip": "0.1.33", "@legendapp/motion": "latest" }, "devDependencies": { diff --git a/packages/unstyled/actionsheet/CHANGELOG.md b/packages/unstyled/actionsheet/CHANGELOG.md index f4cc3a066c..73b60e970f 100644 --- a/packages/unstyled/actionsheet/CHANGELOG.md +++ b/packages/unstyled/actionsheet/CHANGELOG.md @@ -1,5 +1,11 @@ # @gluestack-ui/actionsheet +## 0.2.45 + +### Patch Changes + +- feat: added `preventScroll` prop to `Actionsheet`. + ## 0.2.44 ### Patch Changes diff --git a/packages/unstyled/actionsheet/package.json b/packages/unstyled/actionsheet/package.json index 14b2d63706..fcf95b457e 100644 --- a/packages/unstyled/actionsheet/package.json +++ b/packages/unstyled/actionsheet/package.json @@ -15,7 +15,7 @@ "ios", "nextjs" ], - "version": "0.2.44", + "version": "0.2.45", "main": "lib/commonjs/index", "module": "lib/module/index", "types": "lib/typescript/index.d.ts", diff --git a/packages/unstyled/actionsheet/src/Actionsheet.tsx b/packages/unstyled/actionsheet/src/Actionsheet.tsx index ea32b013a2..dd4acf3fb7 100644 --- a/packages/unstyled/actionsheet/src/Actionsheet.tsx +++ b/packages/unstyled/actionsheet/src/Actionsheet.tsx @@ -24,6 +24,7 @@ export function Actionsheet(StyledActionsheet: React.ComponentType) { snapPoints, // @ts-ignore _experimentalOverlay = false, + preventScroll = false, ...props }: T & IActionsheetProps, ref?: any @@ -64,6 +65,7 @@ export function Actionsheet(StyledActionsheet: React.ComponentType) { initialFocusRef, finalFocusRef, snapPoints, + preventScroll, }; }, [ handleClose, @@ -75,6 +77,7 @@ export function Actionsheet(StyledActionsheet: React.ComponentType) { initialFocusRef, finalFocusRef, snapPoints, + preventScroll, ]); return ( diff --git a/packages/unstyled/actionsheet/src/ActionsheetContent.tsx b/packages/unstyled/actionsheet/src/ActionsheetContent.tsx index fcce0860c5..36f6ab62e6 100644 --- a/packages/unstyled/actionsheet/src/ActionsheetContent.tsx +++ b/packages/unstyled/actionsheet/src/ActionsheetContent.tsx @@ -39,9 +39,10 @@ function ActionsheetContent( handleCloseBackdrop, finalFocusRef, snapPoints, + preventScroll, } = React.useContext(ActionsheetContext); - usePreventScroll(); + usePreventScroll({ isDisabled: preventScroll }); const pan = React.useRef(new Animated.ValueXY()).current; const contentSheetHeight = React.useRef(0); diff --git a/packages/unstyled/actionsheet/src/context.ts b/packages/unstyled/actionsheet/src/context.ts index 8532f03bbf..5332a02c03 100644 --- a/packages/unstyled/actionsheet/src/context.ts +++ b/packages/unstyled/actionsheet/src/context.ts @@ -13,4 +13,5 @@ export const ActionsheetContext = React.createContext({ bottomInset: 0 as number, trapFocus: true as boolean, snapPoints: [] as Array, + preventScroll: true as boolean, }); diff --git a/packages/unstyled/actionsheet/src/types.ts b/packages/unstyled/actionsheet/src/types.ts index c2be0848eb..bf18e0ec96 100644 --- a/packages/unstyled/actionsheet/src/types.ts +++ b/packages/unstyled/actionsheet/src/types.ts @@ -32,6 +32,11 @@ export interface InterfaceActionsheetProps { children?: any; animationPreset?: 'fade' | 'slide' | 'none'; snapPoints?: Array; + /** + * if true, prevent scroll when Actionsheet is open + * @default true + */ + preventScroll?: boolean; } export interface InterfaceActionsheetItemProps extends PressableProps { diff --git a/packages/unstyled/alert-dialog/CHANGELOG.md b/packages/unstyled/alert-dialog/CHANGELOG.md index 3d91c12eb0..7ca6567b95 100644 --- a/packages/unstyled/alert-dialog/CHANGELOG.md +++ b/packages/unstyled/alert-dialog/CHANGELOG.md @@ -1,5 +1,11 @@ # @gluestack-ui/alert-dialog +## 0.1.31 + +### Patch Changes + +- fix: added useRNModal support + ## 0.1.30 ### Patch Changes diff --git a/packages/unstyled/alert-dialog/package.json b/packages/unstyled/alert-dialog/package.json index 07f9e268b6..aaf51c7e17 100644 --- a/packages/unstyled/alert-dialog/package.json +++ b/packages/unstyled/alert-dialog/package.json @@ -15,7 +15,7 @@ "ios", "nextjs" ], - "version": "0.1.30", + "version": "0.1.31", "main": "lib/commonjs/index", "module": "lib/module/index", "types": "lib/typescript/index.d.ts", diff --git a/packages/unstyled/alert-dialog/src/AlertDialog.tsx b/packages/unstyled/alert-dialog/src/AlertDialog.tsx index f8f545494e..e2df9a6ae9 100644 --- a/packages/unstyled/alert-dialog/src/AlertDialog.tsx +++ b/packages/unstyled/alert-dialog/src/AlertDialog.tsx @@ -19,6 +19,7 @@ export const AlertDialog = (StyledAlertDialog: React.ComponentType) => defaultIsOpen = false, initialFocusRef, finalFocusRef, + useRNModal, avoidKeyboard = false, closeOnOverlayClick = true, isKeyboardDismissable = true, @@ -91,6 +92,7 @@ export const AlertDialog = (StyledAlertDialog: React.ComponentType) => onRequestClose={handleClose} isKeyboardDismissable={isKeyboardDismissable} animationPreset={animationPreset} + useRNModal={useRNModal} > diff --git a/packages/unstyled/tooltip/CHANGELOG.md b/packages/unstyled/tooltip/CHANGELOG.md index f3d949d937..48c7a3e9b6 100644 --- a/packages/unstyled/tooltip/CHANGELOG.md +++ b/packages/unstyled/tooltip/CHANGELOG.md @@ -1,5 +1,11 @@ # @gluestack-ui/tooltip +## 0.1.33 + +### Patch Changes + +- fix: tooltip content was rendering 2 times + ## 0.1.32 ### Patch Changes diff --git a/packages/unstyled/tooltip/package.json b/packages/unstyled/tooltip/package.json index 3b4b46d774..e183d3b470 100644 --- a/packages/unstyled/tooltip/package.json +++ b/packages/unstyled/tooltip/package.json @@ -1,7 +1,7 @@ { "name": "@gluestack-ui/tooltip", "description": "A universal headless tooltip component for React Native, Next.js & React", - "version": "0.1.32", + "version": "0.1.33", "main": "lib/commonjs/index", "module": "lib/module/index", "types": "lib/typescript/index.d.ts", diff --git a/packages/unstyled/tooltip/src/TooltipContent.tsx b/packages/unstyled/tooltip/src/TooltipContent.tsx index 7b0841a633..1fd5343399 100644 --- a/packages/unstyled/tooltip/src/TooltipContent.tsx +++ b/packages/unstyled/tooltip/src/TooltipContent.tsx @@ -3,7 +3,7 @@ import { useTooltipContext } from './context'; import { mergeRefs } from '@gluestack-ui/utils'; import { useOverlayPosition } from '@react-native-aria/overlays'; import { OverlayAnimatePresence } from './OverlayAnimatePresence'; -import { Platform } from 'react-native'; +import { Platform, View } from 'react-native'; export function TooltipContent( StyledTooltipContent: React.ComponentType, @@ -60,9 +60,9 @@ export function TooltipContent( const animatedStyles = { opacity: 1, + x: 0, y: 0, scale: 1, - x: 0, }; const exitAnimatedStyles = { @@ -76,22 +76,27 @@ export function TooltipContent( visible={isOpen} AnimatePresence={AnimatePresence} > - - {children} - + + {children} + + ); });