From 531df1e85eafd4469bf1066205bb97dd3e0b3fec Mon Sep 17 00:00:00 2001 From: Damini Date: Thu, 29 Feb 2024 23:57:36 +0530 Subject: [PATCH 01/45] feat: initial commit --- .../nativewind/Tooltip/index.tsx | 325 ++++++------------ .../src/components/Tooltip/Tooltip.tsx | 54 --- 2 files changed, 101 insertions(+), 278 deletions(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Tooltip/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Tooltip/index.tsx index a03248443f..6076e0a782 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Tooltip/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Tooltip/index.tsx @@ -1,93 +1,39 @@ +import React, { useEffect } from 'react'; import { createTooltip } from '@gluestack-ui/tooltip'; +import { View, Text, Platform } from 'react-native'; import { - AnimatePresence, - AnimatedView, -} from '@gluestack-style/animation-resolver'; -import { View, Text } from 'react-native'; -import { tva, withStyleContext } from '@gluestack-ui/nativewind-utils'; -import React from 'react'; + tva, + withStyleContext, + withStyleContextAndStates, + VariantProps, +} from '@gluestack-ui/nativewind-utils'; +import Animated, { + Easing, + useSharedValue, + withSpring, + withTiming, +} from 'react-native-reanimated'; export const UITooltip = createTooltip({ - Root: withStyleContext(View), - Content: AnimatedView, + Root: + Platform.OS === 'web' + ? withStyleContext(View) + : withStyleContextAndStates(View), + Content: Animated.View, Text: Text, - //@ts-ignore - AnimatePresence: AnimatePresence, + AnimatePresence: React.Fragment, // TODO: Add support for this }); const tooltipStyle = tva({ base: 'w-full h-full web:pointer-events-none', }); -// const StyledRoot = styled( -// View, -// { -// width: '$full', -// height: '$full', -// _web: { -// pointerEvents: 'none', -// }, -// }, -// {} -// ); - const tooltipContentStyle = tva({ - base: 'py-1 px-3 rounded-sm bg-background-900 web:pointer-events-auto shadow', + base: 'py-1 px-3 rounded-sm bg-background-900 web:pointer-events-auto', }); -// const StyledContent = styled( -// AnimatedView, -// { -// ':initial': { -// opacity: 0, -// scale: 0.5, -// }, - -// ':animate': { -// opacity: 1, -// scale: 1, -// }, - -// ':exit': { -// opacity: 0, -// scale: 0.5, -// }, - -// ':transition': { -// type: 'spring', -// damping: 18, -// stiffness: 250, -// opacity: { -// type: 'timing', -// duration: 250, -// }, -// }, - -// 'py': '$1', -// 'px': '$3', -// 'borderRadius': '$sm', -// 'bg': '$background900', - -// '_text': { -// fontSize: '$xs', -// color: '$text50', -// }, - -// '_web': { -// pointerEvents: 'auto', -// }, - -// 'defaultProps': { -// hardShadow: '2', -// }, -// }, -// { -// descendantStyle: ['_text'], -// } -// ); - const tooltipTextStyle = tva({ - base: 'font-normal tracking-normal text-red-400 web:select-none text-xs text-text-50', + base: 'font-normal tracking-normal text-red-400 web:select-none', variants: { isTruncated: { @@ -95,159 +41,79 @@ const tooltipTextStyle = tva({ props: 'line-clamp-1 truncate', }, }, - }, - bold: { - true: 'font-bold', - }, - underline: { - true: 'underline', - }, - strikeThrough: { - true: 'line-through', - }, - size: { - '2xs': 'text-2xs', - 'xs': 'text-xs', - 'sm': 'text-sm', - 'md': 'text-base', - 'lg': 'text-lg', - 'xl': 'text-xl', - '2xl': 'text-2xl', - '3xl': 'text-3xl', - '4xl': 'text-4xl', - '5xl': 'text-5xl', - '6xl': 'text-6xl', - }, - sub: { - true: 'text-xs', - }, - italic: { - true: 'italic', - }, - highlight: { - true: 'bg-yellow-500', + bold: { + true: 'font-bold', + }, + underline: { + true: 'underline', + }, + strikeThrough: { + true: 'line-through', + }, + size: { + '2xs': 'text-2xs', + 'xs': 'text-xs', + 'sm': 'text-sm', + 'md': 'text-base', + 'lg': 'text-lg', + 'xl': 'text-xl', + '2xl': 'text-2xl', + '3xl': 'text-3xl', + '4xl': 'text-4xl', + '5xl': 'text-5xl', + '6xl': 'text-6xl', + }, + sub: { + true: 'text-xs', + }, + italic: { + true: 'italic', + }, + highlight: { + true: 'bg-yellow-500', + }, }, }); -// const StyledText = styled( -// Text, -// { -// fontWeight: '$normal', -// fontStyle: 'normal', -// letterSpacing: '$md', - -// variants: { -// isTruncated: { -// true: { -// props: { -// // @ts-ignore -// numberOfLines: 1, -// ellipsizeMode: 'tail', -// }, -// }, -// }, -// bold: { -// true: { -// fontWeight: '$bold', -// }, -// }, -// underline: { -// true: { -// textDecorationLine: 'underline', -// }, -// }, -// strikeThrough: { -// true: { -// textDecorationLine: 'line-through', -// }, -// }, -// size: { -// '2xs': { -// fontSize: '$2xs', -// }, -// 'xs': { -// fontSize: '$xs', -// }, - -// 'sm': { -// fontSize: '$sm', -// }, - -// 'md': { -// fontSize: '$md', -// }, - -// 'lg': { -// fontSize: '$lg', -// }, - -// 'xl': { -// fontSize: '$xl', -// }, - -// '2xl': { -// fontSize: '$2xl', -// }, - -// '3xl': { -// fontSize: '$3xl', -// }, - -// '4xl': { -// fontSize: '$4xl', -// }, - -// '5xl': { -// fontSize: '$5xl', -// }, +type ITooltipProps = React.ComponentProps & + VariantProps; +type ITooltipContentProps = React.ComponentProps & + VariantProps; +type ITooltipTextProps = React.ComponentProps & + VariantProps; -// '6xl': { -// fontSize: '$6xl', -// }, -// }, -// sub: { -// true: { -// fontSize: '$xs', -// }, -// }, -// italic: { -// true: { -// fontStyle: 'italic', -// }, -// }, -// highlight: { -// true: { -// bg: '$yellow500', -// }, -// }, -// }, - -// defaultProps: { -// size: 'md', -// }, -// color: '$red400', -// fontFamily: '$body', -// _web: { -// userSelect: 'none', -// }, -// }, -// { -// ancestorStyle: ['_text'], -// } -// ); - -export const Tooltip = React.forwardRef(({ className, ...props }: any, ref) => { - return ( - - ); -}); +export const Tooltip = React.forwardRef( + ({ className, ...props }: { className?: string } & ITooltipProps, ref) => { + return ( + + ); + } +); export const TooltipContent = React.forwardRef( - ({ className, ...props }: any, ref) => { + ( + { className, ...props }: { className?: string } & ITooltipContentProps, + ref + ) => { + const opacity = useSharedValue(0); + const scale = useSharedValue(0.5); + useEffect(() => { + opacity.value = withTiming(1, { + easing: Easing.linear, + }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + useEffect(() => { + scale.value = withSpring(1, { + damping: 18, + stiffness: 250, + }); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); return ( ); } ); export const TooltipText = React.forwardRef( - ({ className, size = 'md', ...props }: any, ref) => { + ( + { + className, + size = 'md', + ...props + }: { className?: string } & ITooltipTextProps, + ref + ) => { return ( ); } diff --git a/example/storybook-nativewind/src/components/Tooltip/Tooltip.tsx b/example/storybook-nativewind/src/components/Tooltip/Tooltip.tsx index 7d1b9e6e2d..def29741db 100644 --- a/example/storybook-nativewind/src/components/Tooltip/Tooltip.tsx +++ b/example/storybook-nativewind/src/components/Tooltip/Tooltip.tsx @@ -1,16 +1,4 @@ import React from 'react'; -import { - Center, - Text, - Avatar, - AvatarGroup, - AvatarFallbackText, - Box, - Heading, - VStack, - HStack, - Icon, -} from '@gluestack-ui/themed'; import { Tooltip, TooltipContent, TooltipText } from '@/components/ui/Tooltip'; import { Button, ButtonText } from '@/components/ui/Button'; import { Edit, Command } from 'lucide-react-native'; @@ -42,60 +30,18 @@ const TooltipBasic = ({ ); }; -const FigmaTooltipStory = ({ - showTooltip: _showTooltipProp = true, - _placement = 'bottom', - ...props -}: any) => { - 2; - return ( - { - return ( - - - - ); - }} - > - - Hello world! - - - ); -}; - TooltipBasic.description = 'This is a basic Tooltip component example. A tooltip is a popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.'; export default TooltipBasic; export { - FigmaTooltipStory, TooltipBasic, Tooltip, TooltipContent, TooltipText, - Center, Button, ButtonText, - Text, - Avatar, - AvatarGroup, - AvatarFallbackText, - Box, - Heading, Edit, - VStack, Command, - HStack, - Icon, }; From 9d6fd6b0fca81c7fe9ebef45084b241d82471564 Mon Sep 17 00:00:00 2001 From: Damini Date: Fri, 1 Mar 2024 11:10:13 +0530 Subject: [PATCH 02/45] feat: add tooltip component --- .../src/components-example/nativewind/Tooltip/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Tooltip/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Tooltip/index.tsx index 6076e0a782..4f359f5ca5 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Tooltip/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Tooltip/index.tsx @@ -33,7 +33,7 @@ const tooltipContentStyle = tva({ }); const tooltipTextStyle = tva({ - base: 'font-normal tracking-normal text-red-400 web:select-none', + base: 'font-normal tracking-normal text-red-400 web:select-none text-xs text-text-50', variants: { isTruncated: { From 7ff00fe56dd45e549f058474c6c30a41ea0679f8 Mon Sep 17 00:00:00 2001 From: Damini Date: Fri, 1 Mar 2024 11:14:37 +0530 Subject: [PATCH 03/45] fix: text typography color --- .../src/components-example/nativewind/Tooltip/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Tooltip/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Tooltip/index.tsx index 4f359f5ca5..3739af78bd 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Tooltip/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Tooltip/index.tsx @@ -33,7 +33,7 @@ const tooltipContentStyle = tva({ }); const tooltipTextStyle = tva({ - base: 'font-normal tracking-normal text-red-400 web:select-none text-xs text-text-50', + base: 'font-normal tracking-normal text-red-400 web:select-none text-xs text-typography-50', variants: { isTruncated: { From 953d346e9d02d0f264fd310c66bac6608dc1037d Mon Sep 17 00:00:00 2001 From: Damini Date: Mon, 4 Mar 2024 17:44:13 +0530 Subject: [PATCH 04/45] feat: initial commit --- .../nativewind/Accordion/index.tsx | 4 +- .../components/Accordion/index.nw.stories.mdx | 625 +++++++++++++++++- 2 files changed, 622 insertions(+), 7 deletions(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Accordion/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Accordion/index.tsx index 80ae389e8e..e9dd3d90e0 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Accordion/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Accordion/index.tsx @@ -35,7 +35,7 @@ const accordionTitleTextStyle = tva({ parentVariants: { size: { sm: 'text-sm', - md: 'text-md', + md: 'text-base', lg: 'text-lg', }, }, @@ -48,7 +48,7 @@ const accordionContentTextStyle = tva({ parentVariants: { size: { sm: 'text-sm ', - md: 'text-md', + md: 'text-base', lg: 'text-lg', }, }, diff --git a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx index 15874de849..11a7af8c70 100644 --- a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx @@ -7,15 +7,630 @@ pageTitle: Accordion pageDescription: The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space. -showHeader: false - -tag: coming soon +showHeader: true --- import { Meta } from '@storybook/addon-docs'; +import { + Accordion, + AccordionItem, + AccordionHeader, + AccordionTrigger, + AccordionTitleText, + AccordionIcon, + AccordionContent, + AccordionContentText, + Divider, + ChevronDownIcon, + ChevronUpIcon, + PlusIcon, + MinusIcon, +} from '../../components-example/nativewind'; +import { + AppProvider, + CodePreview, + Table, + TableContainer, + InlineCode, + AddIcon, + InfoIcon, + Alert, +} from '@gluestack/design-system'; +import { transformedCode } from '../../utils'; +import { CollapsibleCode } from '@gluestack/design-system'; +import Wrapper from '../../components-example/nativewind/Wrapper'; -# Accordion +This is an illustration of **Accordion** component. + +<> + + + + + {({ isExpanded }) => { + return ( + <> + + How do I place an order? + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + To place an order, simply select the products you want, proceed to + checkout, provide shipping and payment information, and finalize + your purchase. + + + + + + + {({ isExpanded }) => { + return ( + <> + + What payment methods do you accept? + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + We accept all major credit cards, including Visa, Mastercard, and + American Express. We also support payments through PayPal. + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Accordion, + AccordionItem, + AccordionHeader, + AccordionTrigger, + AccordionTitleText, + AccordionIcon, + AccordionContent, + AccordionContentText, + ChevronDownIcon, + ChevronUpIcon, + Wrapper, + }, + argsType: { + size: { + control: 'select', + options: ['sm', 'md', 'lg'], + default: 'md', + }, + variant: { + control: 'select', + options: ['filled', 'unfilled'], + default: 'filled', + }, + type: { + control: 'select', + options: ['single', 'multiple'], + default: 'single', + }, + isCollapsible: { + control: 'boolean', + default: true, + }, + isDisabled: { + control: 'boolean', + }, + }, + }} + /> + + +
+ +## Installation + +### Step 1: Install the following dependencies: + +```bash + +npm i @gluestack-ui/accordion + +``` + +### Step 2: Copy and paste the following code into your project. + + + ```jsx %%-- File: components-example/nativewind/Accordion/index.tsx --%% ``` + + +### Step 3: Update the import paths to match your project setup. + +## API Reference + +To use this component in your project, include the following import statement in your file. + +```jsx +import { + Accordion, + AccordionItem, + AccordionHeader, + AccordionTrigger, + AccordionTitleText, + AccordionContent, + AccordionContentText, + AccordionIcon, +} from '@/components/ui/Accordion'; +``` + +```jsx +export default () => ( + + + + + + + + + + + + + +); +``` +### Component Props + +This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration. + +#### Accordion + +It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. + +<> + + + + + + Prop + + + Type + + + Default + + + Description + + + + + + + + type + + + + "single" | "multiple" + + + "single" + + + {`Determines whether one or multiple items can be opened at the same time.`} + + + + + + isCollapsible + + + + boolean + + + true + + + {`When type is "single" or "multiple", allows closing content when clicking trigger for an open item.`} + + + + + + defaultValue + + + + string[] + + + [] + + + {`The value of the item to expand when initially rendered when type is "single" or "multiple".`} + + + + + + value + + + + string[] + + + [] + + + {`The controlled value of the item to expand when type is "single" or "multiple".`} + + + + + + onValueChange + + + + function + + + - + + + {`Event handler called when the expanded state of an item changes and type is "single" or "multiple".`} + + + + + + isDisabled + + + + boolean + + + false + + + {`When true, prevents the user from interacting with the accordion and all its items.`} + + + +
+ + + +#### AccordionItem + +Contains all the parts of a collapsible section. + +<> + + + + + + Prop + + + Type + + + Default + + + Description + + + + + + + + value + + + + string + + + - + + + {`The controlled value of the item to expand when type is "single" or "multiple". Must be used in conjunction with onValueChange.This is a mandatory prop.`} + + + + + + isDisabled + + + + boolean + + + false + + + {`When true, prevents the user from interacting with the accordion and all its items.`} + + + +
+ + + +#### AccordionHeader + +Wraps an `Accordion.Trigger`. It inherits all the properties of @expo/html-elements's [H3](https://www.npmjs.com/package/@expo/html-elements#h3) on web and It inherits all the properties of react native's [View](https://reactnative.dev/docs/view) on native. Use the as prop to update it to the appropriate heading level for your page. + + +#### AccordionTrigger + +Toggles the collapsed state of its associated item. It inherits all the properties of react native's [Pressable](https://reactnative.dev/docs/pressable). It should be nested inside of an `Accordion.Header`. + +#### AccordionTitleText + +It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. + +#### AccordionIcon + +Contains all Icon related layout style props and actions.It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. + +#### AccordionContent + +Contains all the collapsible content for an item. It inherits all the properties of React Native [View](https://reactnative.dev/docs/view) component. + +#### AccordionContentText + +It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. + +### Accessibility + +Adheres to the Accordion [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/). + + +We have outlined the various features that ensure the Accordion component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. + +- Header is h3 tag on web. +- aria-expanded is "true" when the Accordion Content is visible, otherwise false. +- role is set to "region" for the currently expanded accordion panel. +- aria-controls points to the id of the Accordion Content. +- aria-labelledby references the accordion header button that expands and collapses the region. + +### Keyboard Interactions + +- `Space` - When focus is on an Accordion.Trigger of a collapsed section, expands the section. +- `Enter` - When focus is on an Accordion.Trigger of a collapsed section, expands the section. +- `Tab` - Moves focus to the next focusable element. +- `Shift + Tab` - Moves focus to the previous focusable element. + +### Screen Reader + +- VoiceOver: When the Accordion Item is focused, the screen reader will announce the Accordion's title text and the state of the Accordion trigger (expanded or collapsed). + + +## Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +### Customized Component + +The following example demonstrates how easily you can customize the Accordion component to suit your needs. + +<> + + + + + {({ isExpanded }) => { + return ( + <> + + What does the "type" prop of the Accordion component do? + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + The type prop determines whether one or multiple items can be + opened at the same time. The default value is "single" which means + only one item can be opened at a time. + + + + + + + {({ isExpanded }) => { + return ( + <> + + Can I disable the whole accordion? + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + Yes, you can disable the whole accordion by setting the isDisabled + prop to true on the Accordion component. + + + + + + + {({ isExpanded }) => { + return ( + <> + + What is a controlled accordion? How can I make it controlled? + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + Controlled components refer to the components where the state and behaviors are controlled by the Parent component. You can make the accordion a controlled component by passing the value prop to the Accordion component and setting the onValueChange prop to update the value prop. Refer to the controlled accordion example in the docs. + + + + +); +} +`, +transformCode: (code) => { +return transformedCode(code, 'function', 'App'); +}, +scope: { +Accordion, +AccordionItem, +AccordionHeader, +AccordionTrigger, +AccordionTitleText, +AccordionIcon, +AccordionContent, +AccordionContentText, +ChevronDownIcon, +ChevronUpIcon, +Wrapper, +}, +}} +/> + + + + + + + + + + + + + + + -Coming Soon! \ No newline at end of file From afe089122aa324e9ad501ca59bd136a713115e9b Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 5 Mar 2024 11:29:59 +0530 Subject: [PATCH 05/45] feat: add accordion rounded corners example --- .../components/Accordion/index.nw.stories.mdx | 146 +++++++++++++----- 1 file changed, 111 insertions(+), 35 deletions(-) diff --git a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx index 11a7af8c70..06fbad38f3 100644 --- a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx @@ -471,19 +471,12 @@ function App(){ {({ isExpanded }) => { @@ -502,12 +495,8 @@ function App(){ }} - + The type prop determines whether one or multiple items can be opened at the same time. The default value is "single" which means @@ -517,9 +506,7 @@ function App(){ - + Yes, you can disable the whole accordion by setting the isDisabled prop to true on the Accordion component. @@ -561,12 +544,7 @@ function App(){ value="c" > {({ isExpanded }) => { @@ -585,12 +563,8 @@ function App(){ }} - + Controlled components refer to the components where the state and behaviors are controlled by the Parent component. You can make the accordion a controlled component by passing the value prop to the Accordion component and setting the onValueChange prop to update the value prop. Refer to the controlled accordion example in the docs. @@ -621,6 +595,108 @@ Wrapper, +### Rounded corners + +The borderRadius prop can be used to create rounded corners for both the Accordion and AccordionItem components. + +<> + + + + + {({ isExpanded }) => { + return ( + <> + {isExpanded ? ( + + ) : ( + + )} + + How do I place an order? + + + ); + }} + + + + + To place an order, simply select the products you want, proceed to + checkout, provide shipping and payment information, and finalize + your purchase. + + + + + + + {({ isExpanded }) => { + return ( + <> + {isExpanded ? ( + + ) : ( + + )} + + What payment methods do you accept? + + + ); + }} + + + + + We accept all major credit cards, including Visa, Mastercard, and + American Express. We also support payments through PayPal. + + + + +); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Accordion, + AccordionItem, + AccordionHeader, + AccordionTrigger, + AccordionTitleText, + AccordionIcon, + AccordionContent, + AccordionContentText, + MinusIcon, + PlusIcon, + Wrapper, + }, + }} + /> + + From c0e965b1640185932053d3a11a868cd295afeeb6 Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 5 Mar 2024 11:42:53 +0530 Subject: [PATCH 06/45] fix: radio focus issue --- .../src/components-example/nativewind/Radio/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Radio/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Radio/index.tsx index 32b86c44db..0a8e0f06c8 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Radio/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Radio/index.tsx @@ -33,7 +33,7 @@ const iconStyle = tva({ }); const indicatorStyle = tva({ - base: 'justify-center items-center bg-transparent border-outline-400 border-2 rounded-full data-[focus-visible=true]:web:outline-2 data-[focus-visible=true]:web:outline-primary-700 data-[focus-visible=true]:web:outline data-[checked=true]:border-primary-600 data-[checked=true]:bg-transparent data-[hover=true]:border-outline-500 data-[hover=true]:bg-transparent data-[hover=true]:data-[checked=true]:bg-transparent data-[hover=true]:data-[checked=true]:border-primary-700 data-[hover=true]:data-[invalid=true]:border-error-700 data-[hover=true]:data-[disabled=true]:opacity-40 data-[hover=true]:data-[disabled=true]:border-outline-400 data-[hover=true]:data-[disabled=true]:data-[invalid=true]:border-error-400 data-[active=true]:bg-transparent data-[active=true]:border-primary-800 data-[invalid=true]:border-error-700 data-[disabled=true]:opacity-40 data-[disabled=true]:data-[checked=true]:border-outline-400 data-[disabled=true]:data-[checked=true]:bg-transparent data-[disabled=true]:data-[invalid=true]:border-error-400', + base: 'justify-center items-center bg-transparent border-outline-400 border-2 rounded-full data-[focus=true]:web:outline-none data-[focus-visible=true]:web:ring-2 data-[focus-visible=true]:web:ring-primary-700 data-[checked=true]:border-primary-600 data-[checked=true]:bg-transparent data-[hover=true]:border-outline-500 data-[hover=true]:bg-transparent data-[hover=true]:data-[checked=true]:bg-transparent data-[hover=true]:data-[checked=true]:border-primary-700 data-[hover=true]:data-[invalid=true]:border-error-700 data-[hover=true]:data-[disabled=true]:opacity-40 data-[hover=true]:data-[disabled=true]:border-outline-400 data-[hover=true]:data-[disabled=true]:data-[invalid=true]:border-error-400 data-[active=true]:bg-transparent data-[active=true]:border-primary-800 data-[invalid=true]:border-error-700 data-[disabled=true]:opacity-40 data-[disabled=true]:data-[checked=true]:border-outline-400 data-[disabled=true]:data-[checked=true]:bg-transparent data-[disabled=true]:data-[invalid=true]:border-error-400', parentVariants: { size: { sm: 'h-4 w-4', From 7ea17b26a024a2764200932d7e6f8567ee19df4b Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 5 Mar 2024 13:11:07 +0530 Subject: [PATCH 07/45] feat: add accordion examples in nativewind --- .../nativewind/Accordion/index.tsx | 4 +- .../components/Accordion/index.nw.stories.mdx | 504 +++++++++++++++++- 2 files changed, 483 insertions(+), 25 deletions(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/Accordion/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/Accordion/index.tsx index e9dd3d90e0..4c06c6f1cb 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/Accordion/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/Accordion/index.tsx @@ -68,8 +68,8 @@ const UIAccordion = createAccordion({ //@ts-ignore Root: Platform.OS === 'web' - ? withStyleContext(Pressable) - : withStyleContextAndStates(Pressable), + ? withStyleContext(View) + : withStyleContextAndStates(View), Item: View, // @ts-ignore Header: Platform.OS === 'web' ? H3 : View, diff --git a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx index 06fbad38f3..09fea9e290 100644 --- a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx @@ -23,9 +23,10 @@ import { Divider, ChevronDownIcon, ChevronUpIcon, - PlusIcon, - MinusIcon, } from '../../components-example/nativewind'; +import { + PlusIcon, MinusIcon +} from 'lucide-react-native' import { AppProvider, CodePreview, @@ -456,7 +457,7 @@ The Examples section provides visual representations of the different variants o The following example demonstrates how easily you can customize the Accordion component to suit your needs. -<> + - + ### Rounded corners The borderRadius prop can be used to create rounded corners for both the Accordion and AccordionItem components. -<> + - + {({ isExpanded }) => { return ( <> {isExpanded ? ( - + ) : ( - + )} How do I place an order? @@ -635,7 +634,7 @@ function App(){ }} - + To place an order, simply select the products you want, proceed to checkout, provide shipping and payment information, and finalize @@ -643,20 +642,16 @@ function App(){ - + - + {({ isExpanded }) => { return ( <> {isExpanded ? ( - + ) : ( - + )} What payment methods do you accept? @@ -666,7 +661,7 @@ function App(){ }} - + We accept all major credit cards, including Visa, Mastercard, and American Express. We also support payments through PayPal. @@ -695,11 +690,474 @@ function App(){ }, }} /> - + +### Disabled item + +You can disable an item by setting the isDisabled prop to true. This will prevent the user from interacting with the item and its content. You can also disable the whole accordion by setting the isDisabled prop to true on the Accordion component. + + + + + + + {({ isExpanded }) => { + return ( + <> + + Disabled Item + + {isExpanded ? ( + + ) : ( + + )} + + + ); + }} + + + + + This is a Disabled Item. + + + + + + + + {({ isExpanded }) => { + return ( + <> + + Is this accordion accessible? + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + Yes, the accordion is accessible. It adheres to the WAI-ARIA design + pattern. You can read more about it in the accessibility section of + the docs. + + + + +); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Accordion, + AccordionItem, + AccordionHeader, + AccordionTrigger, + AccordionTitleText, + AccordionIcon, + AccordionContent, + AccordionContentText, + Divider, + MinusIcon, + PlusIcon, + Wrapper, + }, + }} + /> + +### Default value +Use the defaultValue prop to define the open item by default. + + + + + + {({ isExpanded }) => { + return ( + <> + + What is the defaultValue prop of the Accordion component? + + {isExpanded ? ( + + ) : ( + + )} + + + ); + }} + + + + + The defaultValue prop of the Accordion component is used to define + the open item by default. It is used when the Accordion component is + uncontrolled. + + + + + + + + {({ isExpanded }) => { + return ( + <> + + How many size variants does the Accordion component have? + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + The Accordion component has three size variants - sm, md and lg. + + + + + + + + {({ isExpanded }) => { + return ( + <> + + Can I nest my accordions? + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + Yes, you can nest your accordions. Refer to the nested accordion example in the docs. + + + + +); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Accordion, + AccordionItem, + AccordionHeader, + AccordionTrigger, + AccordionTitleText, + AccordionIcon, + AccordionContent, + AccordionContentText, + Divider, + MinusIcon, + PlusIcon, + Wrapper, + }, + }} + /> + + +### Nested Components + +You can nest Accordion components to create a nested accordion. This is useful when you want to group related content together. In the following example, we have created a nested accordion to group the states of USA by region. + + + + + + + {({isExpanded}) => ( + <> + {isExpanded ? ( + + ) : ( + + )} + USA + + )} + + + + + + + + {({isExpanded}) => ( + <> + {isExpanded ? ( + + ) : ( + + )} + + California + + + )} + + + + + Capital city of California is Sacramento. California has a GDP + of 2.89 trillion dollars and follows Pacific Standard Time + zone. + + + + + + + + + {({isExpanded}) => ( + <> + {isExpanded ? ( + + ) : ( + + )} + Nevada + + )} + + + + + Nevada is located in a mountainous region that includes vast + semiarid grasslands and sandy alkali deserts. It is the most + arid state of the country. + + + + + + + +); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Accordion, + AccordionItem, + AccordionHeader, + AccordionTrigger, + AccordionTitleText, + AccordionIcon, + AccordionContent, + AccordionContentText, + Divider, + MinusIcon, + PlusIcon, + Wrapper, + }, + }} + /> + + +### Controlled Accordion + +A component is controlled when it's managed by its parent using props. +You can make the Accordion component controlled by passing the value prop to the Accordion and setting the onValueChange to update the value prop. In the following example, we have created a controlled accordion to display the expanded state of the accordion. + + + setSelectedValues(item)} className="m-5 w-[95%]"> + + + + {({ isExpanded }) => { + return ( + <> + + Exploring Nature's Wonders + + {isExpanded ? ( + + ) : ( + + )} + + + ); + }} + + + + + Embark on a journey through the breathtaking landscapes and diverse ecosystems of our planet. From majestic mountains to serene oceans, discover the beauty that nature has to offer. + + + + + + + + {({ isExpanded }) => { + return ( + <> + + The Art of Culinary Delights + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + Indulge your senses in a culinary adventure. Uncover the secrets behind delectable dishes, learn about unique flavor profiles, and ignite your passion for cooking. + + + + + + + {({ isExpanded }) => { + return ( + <> + + Mastering the Creative Process + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + Immerse yourself in the world of creativity. Unleash your artistic potential, whether it's through writing, painting, or any other form of expression. + + + + +); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Accordion, + AccordionItem, + AccordionHeader, + AccordionTrigger, + AccordionTitleText, + AccordionIcon, + AccordionContent, + AccordionContentText, + Divider, + MinusIcon, + PlusIcon, + PlusIcon, + Wrapper, + }, + }} + /> + From ac41563149796821a8f11b23ace16f286d5c11c7 Mon Sep 17 00:00:00 2001 From: Damini Date: Wed, 6 Mar 2024 12:35:13 +0530 Subject: [PATCH 08/45] fix: imports --- .../src/components/Accordion/index.nw.stories.mdx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx index 09fea9e290..42564905e5 100644 --- a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx @@ -23,7 +23,7 @@ import { Divider, ChevronDownIcon, ChevronUpIcon, -} from '../../components-example/nativewind'; +} from '../../core-components/nativewind'; import { PlusIcon, MinusIcon } from 'lucide-react-native' @@ -39,7 +39,7 @@ import { } from '@gluestack/design-system'; import { transformedCode } from '../../utils'; import { CollapsibleCode } from '@gluestack/design-system'; -import Wrapper from '../../components-example/nativewind/Wrapper'; +import Wrapper from '../../core-components/nativewind/Wrapper'; @@ -170,7 +170,7 @@ npm i @gluestack-ui/accordion ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: components-example/nativewind/Accordion/index.tsx --%% ``` + ```jsx %%-- File: core-components/nativewind/accordion/index.tsx --%% ``` ### Step 3: Update the import paths to match your project setup. @@ -189,7 +189,7 @@ import { AccordionContent, AccordionContentText, AccordionIcon, -} from '@/components/ui/Accordion'; +} from '@/components/ui/accordion'; ``` ```jsx From 74c9b0b716777c42cb44002aac93427f376888b6 Mon Sep 17 00:00:00 2001 From: Damini Date: Fri, 8 Mar 2024 11:51:31 +0530 Subject: [PATCH 09/45] feat: add tooltip examples --- .../components/Tooltip/index.nw.stories.mdx | 605 +++++++++++++++++- .../Tooltip/index.themed.stories.mdx | 2 +- .../src/core-components/nativewind/index.ts | 1 + 3 files changed, 602 insertions(+), 6 deletions(-) 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 0e225322c9..26b2c35ecb 100644 --- a/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx @@ -7,15 +7,610 @@ pageTitle: Tooltip pageDescription: Whether you need to provide helpful hints to new users or display extra details for power users, the Tooltip component is a simple and effective way. -showHeader: false - -tag: coming soon +showHeader: true --- import { Meta } from '@storybook/addon-docs'; -# Tooltip +import { + Tooltip, + TooltipContent, + TooltipText, + Button, + ButtonText, + Avatar, + AvatarGroup, + AvatarFallbackText, + HStack, + Box, + Heading, + EditIcon, + Center, + VStack, + Icon +} from '../../core-components/nativewind'; +import { transformedCode } from '../../utils'; +import { + AppProvider, + CodePreview, + Table, + TableContainer, + Text, + InlineCode, + CollapsibleCode +} from '@gluestack/design-system'; +import Wrapper from '../../core-components/nativewind/Wrapper'; +; +import {Command} from 'lucide-react-native'; + +This is an illustration of **Tooltip** component. + +<> + { + return ( + + ); + }} + > + + Tooltip + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Tooltip, + TooltipContent, + TooltipText, + Center, + Button, + ButtonText, + }, + argsType: { + placement: { + control: 'select', + options: [ + 'top left', + 'top', + 'top right', + 'left top', + 'left', + 'left bottom', + 'bottom left', + 'bottom', + 'bottom right', + 'right top', + 'right', + 'right bottom', + ], + default: 'top', + }, + }, + }} + /> + + +
+ +## Installation + +### Step 1: Install the following dependencies: + +```bash + +npm i @gluestack-ui/tooltip + +``` + +### Step 2: Copy and paste the following code into your project. + + + +```jsx +%%-- File: core-components/nativewind/tooltip/index.tsx --%% +``` + + + +### Step 3: Update the import paths to match your project setup. + +## API Reference + +To use this component in your project, include the following import statement in your file. + +```jsx +import { Tooltip } from '@/components/ui/tooltip'; +``` + +```jsx +export default () => ( + + + + + +); +``` +### Component Props + +This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration. + +#### Tooltip + +It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. + +<> + + + + + + Prop + + + Type + + + Default + + + Description + + + + + + + + isOpen + + + + boolean + + + false + + + {`Whether the tooltip is opened. Useful for controlling the open state.`} + + + + + + isDisabled + + + + boolean + + + false + + + {`Whether the tooltip is disabled.`} + + + + + + defaultIsOpen + + + + boolean + + + false + + + {`If true, the popover will be opened by default.`} + + + + + + onOpen + + + + {'() => void'} + + + true + + + {`This function will be invoked when the tooltip is opened.`} + + + + + + onClose + + + + {'() => void'} + + + - + + + {`This function will be invoked when tooltip is closed. It will also be called when the user attempts to close the tooltip via Escape key or backdrop press.`} + + + + + + openDelay + + + + {'number'} + + + 0 + + + {`Duration in ms to wait till displaying the tooltip.`} + + + + + + closeDelay + + + + {'number'} + + + 0 + + + {`Duration in ms to wait till hiding the tooltip.`} + + + + + + placement + + + + {`"bottom" | "top" | "right" | "left" | "top left" | "top right" | "bottom left" | "bottom right" | "right top" | "right bottom" | "left top" | "left bottom"`} + + + bottom left + + + {`Tooltip placement`} + + + + + + children + + + + any + + + - + + + + The content to display inside the tooltip. + + + + + + + closeOnClick + + + + boolean + + + true + + + + Whether tooltip should be closed on Trigger click. + + + + + + + trigger + + + + {`() => any`} + + + - + + + {`Function that returns a React Element. This element will be used as a Trigger for the tooltip.`} + + + + + + offset + + + + number + + + 10 + + + + Distance between the trigger and the tooltip. + + + + + + + crossOffset + + + + number + + + - + + + + The additional offset applied along the cross axis between the + element and its trigger element. + + + + + + + shouldOverlapWithTrigger + + + + boolean + + + false + + + + Determines whether tooltip content should overlap with the + trigger. + + + + + + + shouldFlip + + + + boolean + + + true + + + + Whether the element should flip its orientation (e.g. top to + bottom or left to right) when there is insufficient room for it to + render completely. + + + + + + + closeOnOverlayClick + + + + boolean + + + true + + + {`Closes tooltip when clicked outside.`} + + + +
+ + + +#### TooltipText + +Contains all text related layout style props and actions. It inherits all the properties of React Native's Text component. + +#### TooltipContent + +Contains all backdrop related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. + +### Accessibility + +We have outlined the various features that ensure the Tooltip component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. It adheres to the [ WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/). + +### Examples + +#### Tooltip with Heading + +A tooltip component with an avatar is a user interface element that displays a small pop-up box of additional information when the user hovers over or interacts with an avatar or an icon. + + + + + { + return ( + + + 3 + + ) + }} + > + + + View all members of this channel +
+ Includes John, Sarah, Mike, Emily + and David +
+ + + + + Sandeep Srivastva + + + Arjun Kapoor + + + Ritik Sharma + + + + ); + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Avatar, + AvatarGroup, + AvatarFallbackText, + Wrapper, + HStack, + Tooltip, + TooltipContent, + TooltipText, + Text, + Box, + Heading, + VStack, + Center, + }, + argsType: {}, + }} + /> + + +#### Tooltip with Icon + +A tooltip component with an icon is a user interface element that provides contextual information or explanatory text when the user hovers over or interacts with an icon. + + + + { + return ( + + + + ) + }} + > + + + New message + + + + + + N + + + + + + + ); + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Avatar, + AvatarFallbackText, + Wrapper, + HStack, + Tooltip, + TooltipContent, + TooltipText, + Text, + Box, + Heading, + EditIcon, + Command, + Icon, + }, + argsType: {}, + }} + /> + + + + + -Coming Soon! \ No newline at end of file diff --git a/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx index 7c4c831c65..d1bab31bbc 100644 --- a/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx @@ -627,7 +627,7 @@ A tooltip component with an icon is a user interface element that provides conte New message - + diff --git a/example/storybook-nativewind/src/core-components/nativewind/index.ts b/example/storybook-nativewind/src/core-components/nativewind/index.ts index 9d570d6744..d24c280d57 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/index.ts +++ b/example/storybook-nativewind/src/core-components/nativewind/index.ts @@ -7,6 +7,7 @@ export * from './avatar'; export * from './badge'; export * from './box'; export * from './flat-list'; +export * from './card'; export * from './center'; export * from './checkbox'; export * from './hstack'; From d9c5bda9283741f43e1e91819e64b0451eb3959f Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Tue, 12 Mar 2024 18:30:56 +0530 Subject: [PATCH 10/45] v0.0.11-alpha.3 --- packages/nativewind/utils/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nativewind/utils/package.json b/packages/nativewind/utils/package.json index 91f7a65106..95d4526316 100644 --- a/packages/nativewind/utils/package.json +++ b/packages/nativewind/utils/package.json @@ -14,7 +14,7 @@ "ios", "nextjs" ], - "version": "0.0.11-alpha.2", + "version": "0.0.11-alpha.3", "react-native": "src/index", "source": "src/index", "typings": "lib/typescript/types.d.ts", From a762a3e776f3439d4d48f0df1b457cac2619d9d8 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Tue, 12 Mar 2024 18:57:04 +0530 Subject: [PATCH 11/45] v1.0.0 --- packages/nativewind/utils/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nativewind/utils/package.json b/packages/nativewind/utils/package.json index 95d4526316..6e72017c9a 100644 --- a/packages/nativewind/utils/package.json +++ b/packages/nativewind/utils/package.json @@ -14,7 +14,7 @@ "ios", "nextjs" ], - "version": "0.0.11-alpha.3", + "version": "1.0.0", "react-native": "src/index", "source": "src/index", "typings": "lib/typescript/types.d.ts", From 913f1c727a80ae16f9b61a5300e75b77da34a7e2 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Wed, 13 Mar 2024 08:58:17 +0530 Subject: [PATCH 12/45] fix: alert dialog --- .../nativewind/alert-dialog/index.tsx | 122 ++++++++++-------- 1 file changed, 65 insertions(+), 57 deletions(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/alert-dialog/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/alert-dialog/index.tsx index 7b94f1211e..0ef3586863 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/alert-dialog/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/alert-dialog/index.tsx @@ -1,4 +1,4 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { createAlertDialog } from '@gluestack-ui/alert-dialog'; import { tva } from '@gluestack-ui/nativewind-utils/tva'; @@ -10,21 +10,15 @@ import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withSt import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; import type { VariantProps } from '@gluestack-ui/nativewind-utils'; -import Animated, { - Easing, - useSharedValue, - withSpring, - withTiming, -} from 'react-native-reanimated'; import { - View, - StyleSheet, - Pressable, - ScrollView, - Platform, -} from 'react-native'; + Motion, + AnimatePresence, + createMotionAnimatedComponent, +} from '@legendapp/motion'; -const AnimatedPressable = Animated.createAnimatedComponent(Pressable); +import { View, Pressable, ScrollView, Platform } from 'react-native'; + +const AnimatedPressable = createMotionAnimatedComponent(Pressable); const UIAccessibleAlertDialog = createAlertDialog({ // @ts-ignore Root: @@ -32,12 +26,12 @@ const UIAccessibleAlertDialog = createAlertDialog({ ? withStyleContext(View) : withStyleContextAndStates(View), Body: ScrollView, - Content: Animated.View, + Content: Motion.View, CloseButton: Pressable, Header: View, Footer: View, Backdrop: AnimatedPressable, - AnimatePresence: React.Fragment, //TODO: Add support for this + AnimatePresence: AnimatePresence, //TODO: Add support for this }); cssInterop(UIAccessibleAlertDialog, { className: 'style' }); @@ -50,6 +44,15 @@ cssInterop(UIAccessibleAlertDialog.Backdrop, { className: 'style' }); const alertDialogStyle = tva({ base: 'group/modal w-full h-full justify-center items-center web:pointer-events-none', + parentVariants: { + size: { + xs: '', + sm: '', + md: '', + lg: '', + full: '', + }, + }, }); const alertDialogContentStyle = tva({ @@ -120,11 +123,10 @@ const AlertDialog = React.forwardRef( ( { className, - //@ts-ignore size = 'md', ...props }: { className?: string } & IAlertDialogProps, - ref + ref?: any ) => { return ( { const { size: parentSize } = useStyleContext(); - const opacity = useSharedValue(0); - const scale = useSharedValue(0.9); - useEffect(() => { - opacity.value = withTiming(1, { - easing: Easing.linear, - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - useEffect(() => { - scale.value = withSpring(1, { - damping: 18, - stiffness: 250, - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); return ( ); } @@ -191,7 +195,7 @@ const AlertDialogCloseButton = React.forwardRef( className, ...props }: { className?: string } & IAlertDialogCloseButtonProps, - ref + ref?: any ) => { return ( { return ( { return ( { return ( { - const opacity = useSharedValue(0); - - useEffect(() => { - opacity.value = withTiming(0.5, { - easing: Easing.linear, - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); return ( ); } From 9804780b9dbe4bf3257923c2dc681ece87fba4a0 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Wed, 13 Mar 2024 11:10:26 +0530 Subject: [PATCH 13/45] fix: tsconfig storybook nativewind --- example/storybook-nativewind/tsconfig.json | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/example/storybook-nativewind/tsconfig.json b/example/storybook-nativewind/tsconfig.json index e57f3140be..53e2797e03 100644 --- a/example/storybook-nativewind/tsconfig.json +++ b/example/storybook-nativewind/tsconfig.json @@ -6,20 +6,20 @@ "@/components/ui/*": ["src/core-components/nativewind/*"], "@gluestack-style/react": ["../../packages/styled/react/src"], "@gluestack-ui/popover": ["../../packages/unstyled/popover/src"], - "@gluestack-ui/nativewind-utils": [ - "../../packages/nativewind/utils/src/types.ts" - ], "@gluestack-ui/nativewind-utils/tva": [ - "../../packages/nativewind/utils/src/tva.ts" + "../../packages/nativewind/utils/src/tva" ], "@gluestack-ui/nativewind-utils/withStyleContext": [ - "../../packages/nativewind/utils/src/withStyleContext.ts" + "../../packages/nativewind/utils/src/withStyleContext" ], "@gluestack-ui/nativewind-utils/withStyleContextAndStates": [ - "../../packages/nativewind/utils/src/withStyleContextAndStates.ts" + "../../packages/nativewind/utils/src/withStyleContextAndStates" ], "@gluestack-ui/nativewind-utils/withStates": [ - "../../packages/nativewind/utils/src/withStates.ts" + "../../packages/nativewind/utils/src/withStates" + ], + "@gluestack-ui/nativewind-utils/cssInterop": [ + "../../packages/nativewind/utils/src/cssInterop" ] }, "emitDeclarationOnly": true, From bdd055b319df757d8e3cb49737a27d2a835f93af Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Wed, 13 Mar 2024 12:23:25 +0530 Subject: [PATCH 14/45] v1.0.1 --- packages/nativewind/utils/package.json | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/nativewind/utils/package.json b/packages/nativewind/utils/package.json index 6e72017c9a..2be276b0e6 100644 --- a/packages/nativewind/utils/package.json +++ b/packages/nativewind/utils/package.json @@ -14,11 +14,16 @@ "ios", "nextjs" ], - "version": "1.0.0", + "version": "1.0.1", "react-native": "src/index", "source": "src/index", "typings": "lib/typescript/types.d.ts", "exports": { + ".": { + "require": "./lib/commonjs/index.js", + "import": "./lib/module/index.js", + "types": "./lib/typescript/types.d.ts" + }, "./tva": { "require": "./lib/commonjs/tva.js", "import": "./lib/module/tva.js", From b74e28a07130c49fc0470e417a34ecd74be6a536 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Wed, 13 Mar 2024 19:42:06 +0530 Subject: [PATCH 15/45] v1.0.2-alpha.1 --- packages/nativewind/utils/package.json | 26 +++++++++++++++++++------- 1 file changed, 19 insertions(+), 7 deletions(-) diff --git a/packages/nativewind/utils/package.json b/packages/nativewind/utils/package.json index 2be276b0e6..c3a6f68126 100644 --- a/packages/nativewind/utils/package.json +++ b/packages/nativewind/utils/package.json @@ -14,15 +14,17 @@ "ios", "nextjs" ], - "version": "1.0.1", + "main": "lib/commonjs/index", + "module": "lib/module/index", + "types": "lib/typescript/index.d.ts", + "version": "1.0.2-alpha.1", "react-native": "src/index", "source": "src/index", - "typings": "lib/typescript/types.d.ts", + "typings": "lib/typescript/index.d.ts", "exports": { ".": { "require": "./lib/commonjs/index.js", - "import": "./lib/module/index.js", - "types": "./lib/typescript/types.d.ts" + "import": "./lib/module/index.js" }, "./tva": { "require": "./lib/commonjs/tva.js", @@ -30,15 +32,25 @@ "types": "./lib/typescript/tva.d.ts" }, "./cssInterop": { - "require": "./lib/commonjs/cssInterop", - "import": "./lib/module/cssInterop", - "types": "./lib/typescript/cssInterop/index.d.ts" + "require": "./lib/commonjs/cssInterop.js", + "import": "./lib/module/cssInterop.js", + "types": "./lib/typescript/cssInterop.d.ts" }, "./cn": { "require": "./lib/commonjs/cn.js", "import": "./lib/module/cn.js", "types": "./lib/typescript/cn.d.ts" }, + "./context": { + "require": "./lib/commonjs/context.js", + "import": "./lib/module/context.js", + "types": "./lib/typescript/context.d.ts" + }, + "./utils": { + "require": "./lib/commonjs/utils.js", + "import": "./lib/module/utils.js", + "types": "./lib/typescript/utils.d.ts" + }, "./withStates": { "require": "./lib/commonjs/withStates.js", "import": "./lib/module/withStates.js", From 0b423eda9c650d048d72e135e4cbf699ca2810e9 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Wed, 13 Mar 2024 19:49:00 +0530 Subject: [PATCH 16/45] v1.0.2-alpha.2 --- packages/nativewind/utils/package.json | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/nativewind/utils/package.json b/packages/nativewind/utils/package.json index c3a6f68126..a83c09c3dc 100644 --- a/packages/nativewind/utils/package.json +++ b/packages/nativewind/utils/package.json @@ -14,17 +14,17 @@ "ios", "nextjs" ], - "main": "lib/commonjs/index", - "module": "lib/module/index", + "main": "lib/commonjs", + "module": "lib/module", "types": "lib/typescript/index.d.ts", - "version": "1.0.2-alpha.1", + "version": "1.0.2-alpha.2", "react-native": "src/index", "source": "src/index", - "typings": "lib/typescript/index.d.ts", "exports": { ".": { "require": "./lib/commonjs/index.js", - "import": "./lib/module/index.js" + "import": "./lib/module/index.js", + "types": "./lib/typescript/index.d.ts" }, "./tva": { "require": "./lib/commonjs/tva.js", From 37e8e284641d97fba43db07d498df48dddd6d16b Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Wed, 13 Mar 2024 22:00:11 +0530 Subject: [PATCH 17/45] v1.0.2-alpha.3 --- packages/nativewind/utils/package.json | 42 +++++++++++++------------- 1 file changed, 21 insertions(+), 21 deletions(-) diff --git a/packages/nativewind/utils/package.json b/packages/nativewind/utils/package.json index a83c09c3dc..4db483e5aa 100644 --- a/packages/nativewind/utils/package.json +++ b/packages/nativewind/utils/package.json @@ -14,57 +14,57 @@ "ios", "nextjs" ], - "main": "lib/commonjs", - "module": "lib/module", + "main": "lib/commonjs/index.js", + "module": "lib/module/index.js", "types": "lib/typescript/index.d.ts", - "version": "1.0.2-alpha.2", + "version": "1.0.2-alpha.3", "react-native": "src/index", "source": "src/index", "exports": { ".": { + "types": "./lib/typescript/index.d.ts", "require": "./lib/commonjs/index.js", - "import": "./lib/module/index.js", - "types": "./lib/typescript/index.d.ts" + "import": "./lib/module/index.js" }, "./tva": { + "types": "./lib/typescript/tva.d.ts", "require": "./lib/commonjs/tva.js", - "import": "./lib/module/tva.js", - "types": "./lib/typescript/tva.d.ts" + "import": "./lib/module/tva.js" }, "./cssInterop": { + "types": "./lib/typescript/cssInterop.d.ts", "require": "./lib/commonjs/cssInterop.js", - "import": "./lib/module/cssInterop.js", - "types": "./lib/typescript/cssInterop.d.ts" + "import": "./lib/module/cssInterop.js" }, "./cn": { + "types": "./lib/typescript/cn.d.ts", "require": "./lib/commonjs/cn.js", - "import": "./lib/module/cn.js", - "types": "./lib/typescript/cn.d.ts" + "import": "./lib/module/cn.js" }, "./context": { + "types": "./lib/typescript/context.d.ts", "require": "./lib/commonjs/context.js", - "import": "./lib/module/context.js", - "types": "./lib/typescript/context.d.ts" + "import": "./lib/module/context.js" }, "./utils": { + "types": "./lib/typescript/utils.d.ts", "require": "./lib/commonjs/utils.js", - "import": "./lib/module/utils.js", - "types": "./lib/typescript/utils.d.ts" + "import": "./lib/module/utils.js" }, "./withStates": { + "types": "./lib/typescript/withStates.d.ts", "require": "./lib/commonjs/withStates.js", - "import": "./lib/module/withStates.js", - "types": "./lib/typescript/withStates.d.ts" + "import": "./lib/module/withStates.js" }, "./withStyleContext": { + "types": "./lib/typescript/withStyleContext.d.ts", "require": "./lib/commonjs/withStyleContext.js", - "import": "./lib/module/withStyleContext.js", - "types": "./lib/typescript/withStyleContext.d.ts" + "import": "./lib/module/withStyleContext.js" }, "./withStyleContextAndStates": { + "types": "./lib/typescript/withStyleContextAndStates.d.ts", "require": "./lib/commonjs/withStyleContextAndStates.js", - "import": "./lib/module/withStyleContextAndStates.js", - "types": "./lib/typescript/withStyleContextAndStates.d.ts" + "import": "./lib/module/withStyleContextAndStates.js" } }, "scripts": { From 4aa458b4d210c4eea5de2dde50400ef1795258b3 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Thu, 14 Mar 2024 12:38:09 +0530 Subject: [PATCH 18/45] v1.0.2-alpha.4 --- packages/nativewind/utils/package.json | 62 ++++---------------------- 1 file changed, 8 insertions(+), 54 deletions(-) diff --git a/packages/nativewind/utils/package.json b/packages/nativewind/utils/package.json index 4db483e5aa..b695e19f63 100644 --- a/packages/nativewind/utils/package.json +++ b/packages/nativewind/utils/package.json @@ -14,62 +14,15 @@ "ios", "nextjs" ], - "main": "lib/commonjs/index.js", - "module": "lib/module/index.js", - "types": "lib/typescript/index.d.ts", - "version": "1.0.2-alpha.3", + "main": "index.js", + "module": "index.js", + "types": "index.d.ts", + "version": "1.0.2-alpha.4", "react-native": "src/index", "source": "src/index", - "exports": { - ".": { - "types": "./lib/typescript/index.d.ts", - "require": "./lib/commonjs/index.js", - "import": "./lib/module/index.js" - }, - "./tva": { - "types": "./lib/typescript/tva.d.ts", - "require": "./lib/commonjs/tva.js", - "import": "./lib/module/tva.js" - }, - "./cssInterop": { - "types": "./lib/typescript/cssInterop.d.ts", - "require": "./lib/commonjs/cssInterop.js", - "import": "./lib/module/cssInterop.js" - }, - "./cn": { - "types": "./lib/typescript/cn.d.ts", - "require": "./lib/commonjs/cn.js", - "import": "./lib/module/cn.js" - }, - "./context": { - "types": "./lib/typescript/context.d.ts", - "require": "./lib/commonjs/context.js", - "import": "./lib/module/context.js" - }, - "./utils": { - "types": "./lib/typescript/utils.d.ts", - "require": "./lib/commonjs/utils.js", - "import": "./lib/module/utils.js" - }, - "./withStates": { - "types": "./lib/typescript/withStates.d.ts", - "require": "./lib/commonjs/withStates.js", - "import": "./lib/module/withStates.js" - }, - "./withStyleContext": { - "types": "./lib/typescript/withStyleContext.d.ts", - "require": "./lib/commonjs/withStyleContext.js", - "import": "./lib/module/withStyleContext.js" - }, - "./withStyleContextAndStates": { - "types": "./lib/typescript/withStyleContextAndStates.d.ts", - "require": "./lib/commonjs/withStyleContextAndStates.js", - "import": "./lib/module/withStyleContextAndStates.js" - } - }, "scripts": { - "prepare": "bob build", - "build": "bob build", + "prepare": "tsc", + "build": "tsc", "clean": "rm -rf lib", "dev:web": "cd example/native && yarn web --clear", "storybook": "cd example/native/storybook && yarn web" @@ -83,6 +36,7 @@ "typescript": "^4.9.4" }, "dependencies": { + "nativewind": "^4.0.1", "tailwind-variants": "^0.1.20" }, "peerDependencies": { @@ -100,7 +54,7 @@ ] }, "files": [ - "lib/", + "build/", "src/" ], "jest": { From 43e310da9fe59ff12a8fc4dd7421074ca50838b5 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Thu, 14 Mar 2024 12:46:40 +0530 Subject: [PATCH 19/45] v1.0.2-alpha.5 --- packages/nativewind/utils/package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/nativewind/utils/package.json b/packages/nativewind/utils/package.json index b695e19f63..f82e6d5850 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.2-alpha.4", + "version": "1.0.2-alpha.5", "react-native": "src/index", "source": "src/index", "scripts": { @@ -54,7 +54,7 @@ ] }, "files": [ - "build/", + "lib/", "src/" ], "jest": { From 692abeeacf9c8d26cafa18a4d71a8c91e5c69eb8 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Thu, 14 Mar 2024 12:50:49 +0530 Subject: [PATCH 20/45] v1.0.2-alpha.6 --- packages/nativewind/utils/package.json | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/nativewind/utils/package.json b/packages/nativewind/utils/package.json index f82e6d5850..6e7c3ff898 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.2-alpha.5", + "version": "1.0.2-alpha.6", "react-native": "src/index", "source": "src/index", "scripts": { @@ -54,8 +54,19 @@ ] }, "files": [ - "lib/", - "src/" + "cn", + "context", + "utils", + "index.js", + "index.d.ts", + "tva", + "types.js", + "types.d.ts", + "utils", + "withStates", + "withStyleContext", + "withStyleContextAndStates", + "cssInterop" ], "jest": { "preset": "jest-expo", From 7ada18ab9b5c507a970418acca9d37b879f8059a Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Thu, 14 Mar 2024 13:05:52 +0530 Subject: [PATCH 21/45] fix: utils exports --- packages/nativewind/utils/cn/index.d.ts | 2 + packages/nativewind/utils/cn/index.js | 5 + .../utils/{src/cn.ts => cn/index.ts} | 0 packages/nativewind/utils/context/index.d.ts | 3 + packages/nativewind/utils/context/index.js | 6 + .../{src/context.ts => context/index.ts} | 0 .../nativewind/utils/cssInterop/index.d.ts | 2 + packages/nativewind/utils/cssInterop/index.js | 2 + .../utils/{src => }/cssInterop/index.ts | 0 .../utils/cssInterop/index.web.d.ts | 1 + .../nativewind/utils/cssInterop/index.web.js | 3 + .../utils/{src => }/cssInterop/index.web.ts | 1 + packages/nativewind/utils/index.d.ts | 2 + packages/nativewind/utils/index.js | 1 + packages/nativewind/utils/index.ts | 2 + packages/nativewind/utils/tsconfig.json | 23 +++- packages/nativewind/utils/tva/index.d.ts | 2 + packages/nativewind/utils/tva/index.js | 30 +++++ .../utils/{src/tva.ts => tva/index.ts} | 5 +- packages/nativewind/utils/types.d.ts | 122 ++++++++++++++++++ packages/nativewind/utils/types.js | 1 + packages/nativewind/utils/{src => }/types.ts | 0 .../nativewind/utils/utils/deepMerge.d.ts | 1 + packages/nativewind/utils/utils/deepMerge.js | 23 ++++ .../utils/{src => utils}/deepMerge.ts | 0 packages/nativewind/utils/utils/index.d.ts | 16 +++ packages/nativewind/utils/utils/index.js | 57 ++++++++ .../utils/{src/utils.ts => utils/index.ts} | 2 +- .../nativewind/utils/withStates/index.d.ts | 11 ++ packages/nativewind/utils/withStates/index.js | 16 +++ .../withStates.tsx => withStates/index.tsx} | 4 +- .../utils/withStyleContext/index.d.ts | 11 ++ .../utils/withStyleContext/index.js | 13 ++ .../index.tsx} | 4 +- .../withStyleContextAndStates/index.d.ts | 13 ++ .../utils/withStyleContextAndStates/index.js | 22 ++++ .../index.tsx} | 6 +- 37 files changed, 398 insertions(+), 14 deletions(-) create mode 100644 packages/nativewind/utils/cn/index.d.ts create mode 100644 packages/nativewind/utils/cn/index.js rename packages/nativewind/utils/{src/cn.ts => cn/index.ts} (100%) create mode 100644 packages/nativewind/utils/context/index.d.ts create mode 100644 packages/nativewind/utils/context/index.js rename packages/nativewind/utils/{src/context.ts => context/index.ts} (100%) create mode 100644 packages/nativewind/utils/cssInterop/index.d.ts create mode 100644 packages/nativewind/utils/cssInterop/index.js rename packages/nativewind/utils/{src => }/cssInterop/index.ts (100%) create mode 100644 packages/nativewind/utils/cssInterop/index.web.d.ts create mode 100644 packages/nativewind/utils/cssInterop/index.web.js rename packages/nativewind/utils/{src => }/cssInterop/index.web.ts (78%) create mode 100644 packages/nativewind/utils/index.d.ts create mode 100644 packages/nativewind/utils/index.js create mode 100644 packages/nativewind/utils/index.ts create mode 100644 packages/nativewind/utils/tva/index.d.ts create mode 100644 packages/nativewind/utils/tva/index.js rename packages/nativewind/utils/{src/tva.ts => tva/index.ts} (95%) create mode 100644 packages/nativewind/utils/types.d.ts create mode 100644 packages/nativewind/utils/types.js rename packages/nativewind/utils/{src => }/types.ts (100%) create mode 100644 packages/nativewind/utils/utils/deepMerge.d.ts create mode 100644 packages/nativewind/utils/utils/deepMerge.js rename packages/nativewind/utils/{src => utils}/deepMerge.ts (100%) create mode 100644 packages/nativewind/utils/utils/index.d.ts create mode 100644 packages/nativewind/utils/utils/index.js rename packages/nativewind/utils/{src/utils.ts => utils/index.ts} (98%) create mode 100644 packages/nativewind/utils/withStates/index.d.ts create mode 100644 packages/nativewind/utils/withStates/index.js rename packages/nativewind/utils/{src/withStates.tsx => withStates/index.tsx} (85%) create mode 100644 packages/nativewind/utils/withStyleContext/index.d.ts create mode 100644 packages/nativewind/utils/withStyleContext/index.js rename packages/nativewind/utils/{src/withStyleContext.tsx => withStyleContext/index.tsx} (83%) create mode 100644 packages/nativewind/utils/withStyleContextAndStates/index.d.ts create mode 100644 packages/nativewind/utils/withStyleContextAndStates/index.js rename packages/nativewind/utils/{src/withStyleContextAndStates.tsx => withStyleContextAndStates/index.tsx} (85%) diff --git a/packages/nativewind/utils/cn/index.d.ts b/packages/nativewind/utils/cn/index.d.ts new file mode 100644 index 0000000000..b0e87e6f57 --- /dev/null +++ b/packages/nativewind/utils/cn/index.d.ts @@ -0,0 +1,2 @@ +import type { ClassValue } from 'clsx'; +export declare function cn(...inputs: ClassValue[]): string; diff --git a/packages/nativewind/utils/cn/index.js b/packages/nativewind/utils/cn/index.js new file mode 100644 index 0000000000..2861741ab5 --- /dev/null +++ b/packages/nativewind/utils/cn/index.js @@ -0,0 +1,5 @@ +import clsx from 'clsx'; +import { twMerge } from 'tailwind-merge'; +export function cn(...inputs) { + return twMerge(clsx(inputs)); +} diff --git a/packages/nativewind/utils/src/cn.ts b/packages/nativewind/utils/cn/index.ts similarity index 100% rename from packages/nativewind/utils/src/cn.ts rename to packages/nativewind/utils/cn/index.ts diff --git a/packages/nativewind/utils/context/index.d.ts b/packages/nativewind/utils/context/index.d.ts new file mode 100644 index 0000000000..2416ea120c --- /dev/null +++ b/packages/nativewind/utils/context/index.d.ts @@ -0,0 +1,3 @@ +/// +export declare const ParentContext: import('react').Context<{}>; +export declare const useStyleContext: () => any; diff --git a/packages/nativewind/utils/context/index.js b/packages/nativewind/utils/context/index.js new file mode 100644 index 0000000000..65b06ca90e --- /dev/null +++ b/packages/nativewind/utils/context/index.js @@ -0,0 +1,6 @@ +'use client'; +import { createContext, useContext } from 'react'; +export const ParentContext = createContext({}); +export const useStyleContext = () => { + return useContext(ParentContext); +}; diff --git a/packages/nativewind/utils/src/context.ts b/packages/nativewind/utils/context/index.ts similarity index 100% rename from packages/nativewind/utils/src/context.ts rename to packages/nativewind/utils/context/index.ts diff --git a/packages/nativewind/utils/cssInterop/index.d.ts b/packages/nativewind/utils/cssInterop/index.d.ts new file mode 100644 index 0000000000..e85573073a --- /dev/null +++ b/packages/nativewind/utils/cssInterop/index.d.ts @@ -0,0 +1,2 @@ +declare const cssInterop: (_A: any, _B: any) => void; +export { cssInterop }; diff --git a/packages/nativewind/utils/cssInterop/index.js b/packages/nativewind/utils/cssInterop/index.js new file mode 100644 index 0000000000..44b0cd8f3e --- /dev/null +++ b/packages/nativewind/utils/cssInterop/index.js @@ -0,0 +1,2 @@ +const cssInterop = (_A, _B) => {}; +export { cssInterop }; diff --git a/packages/nativewind/utils/src/cssInterop/index.ts b/packages/nativewind/utils/cssInterop/index.ts similarity index 100% rename from packages/nativewind/utils/src/cssInterop/index.ts rename to packages/nativewind/utils/cssInterop/index.ts diff --git a/packages/nativewind/utils/cssInterop/index.web.d.ts b/packages/nativewind/utils/cssInterop/index.web.d.ts new file mode 100644 index 0000000000..77ec595a88 --- /dev/null +++ b/packages/nativewind/utils/cssInterop/index.web.d.ts @@ -0,0 +1 @@ +export { cssInterop } from 'nativewind'; diff --git a/packages/nativewind/utils/cssInterop/index.web.js b/packages/nativewind/utils/cssInterop/index.web.js new file mode 100644 index 0000000000..2b17ae680d --- /dev/null +++ b/packages/nativewind/utils/cssInterop/index.web.js @@ -0,0 +1,3 @@ +// @ts-nocheck +'use client'; +export { cssInterop } from 'nativewind'; diff --git a/packages/nativewind/utils/src/cssInterop/index.web.ts b/packages/nativewind/utils/cssInterop/index.web.ts similarity index 78% rename from packages/nativewind/utils/src/cssInterop/index.web.ts rename to packages/nativewind/utils/cssInterop/index.web.ts index e427c48fb6..2b17ae680d 100644 --- a/packages/nativewind/utils/src/cssInterop/index.web.ts +++ b/packages/nativewind/utils/cssInterop/index.web.ts @@ -1,2 +1,3 @@ +// @ts-nocheck 'use client'; export { cssInterop } from 'nativewind'; diff --git a/packages/nativewind/utils/index.d.ts b/packages/nativewind/utils/index.d.ts new file mode 100644 index 0000000000..13bb6463e1 --- /dev/null +++ b/packages/nativewind/utils/index.d.ts @@ -0,0 +1,2 @@ +export { tva } from './tva'; +export type { VariantProps } from './types'; diff --git a/packages/nativewind/utils/index.js b/packages/nativewind/utils/index.js new file mode 100644 index 0000000000..f760f4dc04 --- /dev/null +++ b/packages/nativewind/utils/index.js @@ -0,0 +1 @@ +export { tva } from './tva'; diff --git a/packages/nativewind/utils/index.ts b/packages/nativewind/utils/index.ts new file mode 100644 index 0000000000..13bb6463e1 --- /dev/null +++ b/packages/nativewind/utils/index.ts @@ -0,0 +1,2 @@ +export { tva } from './tva'; +export type { VariantProps } from './types'; diff --git a/packages/nativewind/utils/tsconfig.json b/packages/nativewind/utils/tsconfig.json index 361839f952..5fa966fcc0 100644 --- a/packages/nativewind/utils/tsconfig.json +++ b/packages/nativewind/utils/tsconfig.json @@ -1,14 +1,28 @@ { - "include": ["src"], + "include": [ + "cn.ts", + "context", + "utils", + "index.ts", + "tva", + "types.ts", + "utils", + "withStates", + "withStyleContext", + "withStyleContextAndStates", + "cssInterop" + ], "exclude": ["node_modules", "example"], + "path": {}, "compilerOptions": { - "emitDeclarationOnly": true, + "ignoreDeprecations": "5.0", "noEmit": false, - "baseUrl": ".", "declaration": true, + "allowJs": true, "allowUnreachableCode": false, "allowUnusedLabels": true, "esModuleInterop": true, + "importsNotUsedAsValues": "error", "forceConsistentCasingInFileNames": true, "jsx": "react", "lib": ["esnext", "dom"], @@ -23,6 +37,7 @@ "resolveJsonModule": true, "skipLibCheck": true, "strict": true, - "target": "esnext" + "target": "esnext", + "outDir": "." } } diff --git a/packages/nativewind/utils/tva/index.d.ts b/packages/nativewind/utils/tva/index.d.ts new file mode 100644 index 0000000000..68e6f32135 --- /dev/null +++ b/packages/nativewind/utils/tva/index.d.ts @@ -0,0 +1,2 @@ +import type { TVA } from '../types'; +export declare const tva: TVA; diff --git a/packages/nativewind/utils/tva/index.js b/packages/nativewind/utils/tva/index.js new file mode 100644 index 0000000000..903fccb530 --- /dev/null +++ b/packages/nativewind/utils/tva/index.js @@ -0,0 +1,30 @@ +// @ts-ignore +import { tv } from 'tailwind-variants'; +import { deepMergeObjects } from '../utils/deepMerge'; +const tvatemp = (options) => { + const parentVariants = options?.parentVariants; + const parentCompoundVariants = options?.parentCompoundVariants; + delete options.parentVariants; + delete options.parentCompoundVariants; + options.variants = deepMergeObjects(parentVariants, options.variants); + if ( + Array.isArray(parentCompoundVariants) && + parentCompoundVariants.length > 0 + ) { + if (!options.compoundVariants) { + options.compoundVariants = []; + } + options.compoundVariants = [ + ...parentCompoundVariants, + ...options.compoundVariants, + ]; + } + const callback = tv(options); + return (inlineProps) => { + const { parentVariants: inlineParentVariants = {}, ...variant } = + inlineProps; + const mergedVariants = deepMergeObjects(inlineParentVariants, variant); + return callback({ ...mergedVariants }); + }; +}; +export const tva = tvatemp; diff --git a/packages/nativewind/utils/src/tva.ts b/packages/nativewind/utils/tva/index.ts similarity index 95% rename from packages/nativewind/utils/src/tva.ts rename to packages/nativewind/utils/tva/index.ts index 821913e0f1..589f23bca9 100644 --- a/packages/nativewind/utils/src/tva.ts +++ b/packages/nativewind/utils/tva/index.ts @@ -1,7 +1,8 @@ +// @ts-ignore import { tv } from 'tailwind-variants'; -import type { TVA } from './types'; +import type { TVA } from '../types'; -import { deepMergeObjects } from './deepMerge'; +import { deepMergeObjects } from '../utils/deepMerge'; const tvatemp = (options: { /** diff --git a/packages/nativewind/utils/types.d.ts b/packages/nativewind/utils/types.d.ts new file mode 100644 index 0000000000..7bad7f51b5 --- /dev/null +++ b/packages/nativewind/utils/types.d.ts @@ -0,0 +1,122 @@ +import type { + TVVariants, + TVDefaultVariants, + ClassValue, + TVCompoundSlots, + TVCompoundVariants, + TVProps, + TVReturnProps, + VariantProps as TVVariantProps, +} from 'tailwind-variants'; +import type { TVConfig } from 'tailwind-variants/dist/config'; +type TVSlots = Record | undefined; +export type TVA = { + < + V extends TVVariants, + CV extends TVCompoundVariants, + DV extends TVDefaultVariants, + C extends TVConfig, + PV extends TVVariants, + PCV extends TVCompoundVariants, + B extends ClassValue = undefined, + S extends TVSlots = undefined, + E extends TVReturnType = TVReturnType< + V, + S, + B, + C, + EV extends undefined ? {} : EV, + ES extends undefined ? {} : ES + >, + EV extends TVVariants = E['variants'], + ES extends TVSlots = E['slots'] extends TVSlots ? E['slots'] : undefined + >( + options: { + /** + * Extend allows for easy composition of components. + * @see https://www.tailwind-variants.org/docs/composing-components + */ + extend?: E; + /** + * Base allows you to set a base class for a component. + */ + base?: B; + /** + * Slots allow you to separate a component into multiple parts. + * @see https://www.tailwind-variants.org/docs/slots + */ + slots?: S; + /** + * Variants allow you to create multiple versions of the same component. + * @see https://www.tailwind-variants.org/docs/variants#adding-variants + */ + variants?: V; + /** + * Compound variants allow you to apply classes to multiple variants at once. + * @see https://www.tailwind-variants.org/docs/variants#compound-variants + */ + compoundVariants?: CV; + /** + * Compound slots allow you to apply classes to multiple slots at once. + */ + compoundSlots?: TVCompoundSlots; + /** + * Default variants allow you to set default variants for a component. + * @see https://www.tailwind-variants.org/docs/variants#default-variants + */ + defaultVariants?: DV; + parentVariants?: PV; + parentCompoundVariants?: PCV; + }, + /** + * The config object allows you to modify the default configuration. + * @see https://www.tailwind-variants.org/docs/api-reference#config-optional + */ + config?: C + ): TVReturnType, S, B, C, EV, ES, E>; +}; +type UNION = A & B; +export type TVReturnType< + V extends TVVariants, + S extends TVSlots, + B extends ClassValue, + C extends TVConfig, + EV extends TVVariants, + ES extends TVSlots, + E extends TVReturnType = undefined +> = { + ( + props?: TVProps & { + parentVariants?: Omit, 'class' | 'className'>; + } + ): HasSlots extends true + ? { + [K in keyof (ES extends undefined ? {} : ES)]: ( + slotProps?: TVProps + ) => string; + } & { + [K in keyof (S extends undefined ? {} : S)]: ( + slotProps?: TVProps + ) => string; + } & { + [K in TVSlotsWithBase<{}, B>]: ( + slotProps?: TVProps + ) => string; + } + : string; +} & TVReturnProps; +type HasSlots = S extends undefined + ? ES extends undefined + ? false + : true + : true; +type TVSlotsWithBase< + S extends TVSlots, + B extends ClassValue +> = B extends undefined ? keyof S : keyof S | TVBaseName; +type TVBaseName = 'base'; +export type VariantProps any> = Omit< + TVVariantProps, + 'parentVariants' +>; +export {}; diff --git a/packages/nativewind/utils/types.js b/packages/nativewind/utils/types.js new file mode 100644 index 0000000000..cb0ff5c3b5 --- /dev/null +++ b/packages/nativewind/utils/types.js @@ -0,0 +1 @@ +export {}; diff --git a/packages/nativewind/utils/src/types.ts b/packages/nativewind/utils/types.ts similarity index 100% rename from packages/nativewind/utils/src/types.ts rename to packages/nativewind/utils/types.ts diff --git a/packages/nativewind/utils/utils/deepMerge.d.ts b/packages/nativewind/utils/utils/deepMerge.d.ts new file mode 100644 index 0000000000..e1dce302e1 --- /dev/null +++ b/packages/nativewind/utils/utils/deepMerge.d.ts @@ -0,0 +1 @@ +export declare function deepMergeObjects(...objects: any): any; diff --git a/packages/nativewind/utils/utils/deepMerge.js b/packages/nativewind/utils/utils/deepMerge.js new file mode 100644 index 0000000000..7978ffc5b3 --- /dev/null +++ b/packages/nativewind/utils/utils/deepMerge.js @@ -0,0 +1,23 @@ +export function deepMergeObjects(...objects) { + const isObject = (obj) => + obj && typeof obj === 'object' && !Array.isArray(obj); + return objects.reduce((prev, obj) => { + if (isObject(prev) && isObject(obj)) { + Object.keys(obj).forEach((key) => { + if (isObject(obj[key])) { + if (!prev[key] || !isObject(prev[key])) { + prev[key] = {}; + } + prev[key] = deepMergeObjects(prev[key], obj[key]); + } else { + if (Array.isArray(obj[key]) && Array.isArray(prev[key])) { + prev[key] = prev[key].concat(obj[key]); // Merge arrays without converting to an object + } else { + if (obj[key] !== undefined) prev[key] = obj[key]; + } + } + }); + } + return prev; + }, {}); +} diff --git a/packages/nativewind/utils/src/deepMerge.ts b/packages/nativewind/utils/utils/deepMerge.ts similarity index 100% rename from packages/nativewind/utils/src/deepMerge.ts rename to packages/nativewind/utils/utils/deepMerge.ts diff --git a/packages/nativewind/utils/utils/index.d.ts b/packages/nativewind/utils/utils/index.d.ts new file mode 100644 index 0000000000..2346a3b8c5 --- /dev/null +++ b/packages/nativewind/utils/utils/index.d.ts @@ -0,0 +1,16 @@ +export declare function parseDataAttribute(inputString: string): + | { + state: string; + value: string; + className: string; + } + | { + state: null; + value: null; + className: null; + }; +export declare function stringToBoolean(str: string): boolean; +export declare function extractDataClassName( + className: string, + states: any +): string | undefined; diff --git a/packages/nativewind/utils/utils/index.js b/packages/nativewind/utils/utils/index.js new file mode 100644 index 0000000000..1445a3abd3 --- /dev/null +++ b/packages/nativewind/utils/utils/index.js @@ -0,0 +1,57 @@ +import { cn } from '../cn'; +export function parseDataAttribute(inputString) { + const regex = /^data-\[(\w+)=(\w+)\]:(.+)$/; + const match = inputString.match(regex); + if (match) { + return { + state: match[1], + value: match[2], + className: match[3], + }; + } else { + return { + state: null, + value: null, + className: null, + }; + } +} +export function stringToBoolean(str) { + if (str === 'true') return true; + else return false; +} +const resolveDataAttribute = (className, states) => { + if (className.includes('data-')) { + // parse data- attribute + const { + state, + value, + className: stateClassName, + } = parseDataAttribute(className); + // check if state is present and value is true + if (state && value && states[state] === stringToBoolean(value)) { + // append state class name + if (stateClassName.includes('data-')) { + return resolveDataAttribute(stateClassName, states); + } + return stateClassName; + } + } +}; +export function extractDataClassName(className, states) { + const classNamesArray = + typeof className === 'string' ? className.split(' ') : className; + if (classNamesArray === undefined) return; + let classNamesFinal = ''; + classNamesArray.forEach((classNameItem) => { + // check for data- attribute + if (classNameItem.includes('data-')) { + // parse data- attribute + const resolvedClassName = resolveDataAttribute(classNameItem, states); + classNamesFinal = cn(classNamesFinal, resolvedClassName); + } else { + classNamesFinal += ` ${classNameItem}`; + } + }); + return classNamesFinal; +} diff --git a/packages/nativewind/utils/src/utils.ts b/packages/nativewind/utils/utils/index.ts similarity index 98% rename from packages/nativewind/utils/src/utils.ts rename to packages/nativewind/utils/utils/index.ts index 27055e6785..721d9581db 100644 --- a/packages/nativewind/utils/src/utils.ts +++ b/packages/nativewind/utils/utils/index.ts @@ -1,4 +1,4 @@ -import { cn } from './cn'; +import { cn } from '../cn'; export function parseDataAttribute(inputString: string) { const regex = /^data-\[(\w+)=(\w+)\]:(.+)$/; const match = inputString.match(regex); diff --git a/packages/nativewind/utils/withStates/index.d.ts b/packages/nativewind/utils/withStates/index.d.ts new file mode 100644 index 0000000000..6f5812c966 --- /dev/null +++ b/packages/nativewind/utils/withStates/index.d.ts @@ -0,0 +1,11 @@ +import React from 'react'; +export { useStyleContext } from '../context'; +type WithStatesProps = { + className?: string; + states?: any; +}; +export declare const withStates: ( + Component: React.ComponentType +) => React.ForwardRefExoticComponent< + React.PropsWithoutRef & React.RefAttributes +>; diff --git a/packages/nativewind/utils/withStates/index.js b/packages/nativewind/utils/withStates/index.js new file mode 100644 index 0000000000..a7970d534f --- /dev/null +++ b/packages/nativewind/utils/withStates/index.js @@ -0,0 +1,16 @@ +'use client'; +import React from 'react'; +import { extractDataClassName } from '../utils'; +export { useStyleContext } from '../context'; +export const withStates = (Component) => + React.forwardRef(({ states, className, ...props }, ref) => { + const classNamesFinal = React.useMemo(() => { + if (!className) return; + extractDataClassName(className, states); + }, [className, states]); + return React.createElement(Component, { + className: classNamesFinal, + ...props, + ref: ref, + }); + }); diff --git a/packages/nativewind/utils/src/withStates.tsx b/packages/nativewind/utils/withStates/index.tsx similarity index 85% rename from packages/nativewind/utils/src/withStates.tsx rename to packages/nativewind/utils/withStates/index.tsx index b06d2e938f..7d3ead0bc2 100644 --- a/packages/nativewind/utils/src/withStates.tsx +++ b/packages/nativewind/utils/withStates/index.tsx @@ -1,7 +1,7 @@ 'use client'; import React from 'react'; -import { extractDataClassName } from './utils'; -export { useStyleContext } from './context'; +import { extractDataClassName } from '../utils'; +export { useStyleContext } from '../context'; type WithStatesProps = { className?: string; states?: any; diff --git a/packages/nativewind/utils/withStyleContext/index.d.ts b/packages/nativewind/utils/withStyleContext/index.d.ts new file mode 100644 index 0000000000..e2ea322ab3 --- /dev/null +++ b/packages/nativewind/utils/withStyleContext/index.d.ts @@ -0,0 +1,11 @@ +import React from 'react'; +export { useStyleContext } from '../context'; +type WithStyleContextProps = { + context?: any; +}; +export declare const withStyleContext: ( + Component: React.ComponentType +) => React.ForwardRefExoticComponent< + React.PropsWithoutRef & + React.RefAttributes +>; diff --git a/packages/nativewind/utils/withStyleContext/index.js b/packages/nativewind/utils/withStyleContext/index.js new file mode 100644 index 0000000000..0b6b9b6b06 --- /dev/null +++ b/packages/nativewind/utils/withStyleContext/index.js @@ -0,0 +1,13 @@ +'use client'; +import React from 'react'; +import { ParentContext } from '../context'; +export { useStyleContext } from '../context'; +export const withStyleContext = (Component) => { + return React.forwardRef(({ context, ...props }, ref) => { + return React.createElement( + ParentContext.Provider, + { value: context }, + React.createElement(Component, { ...props, ref: ref }) + ); + }); +}; diff --git a/packages/nativewind/utils/src/withStyleContext.tsx b/packages/nativewind/utils/withStyleContext/index.tsx similarity index 83% rename from packages/nativewind/utils/src/withStyleContext.tsx rename to packages/nativewind/utils/withStyleContext/index.tsx index 18d5fb76c9..6f99c63466 100644 --- a/packages/nativewind/utils/src/withStyleContext.tsx +++ b/packages/nativewind/utils/withStyleContext/index.tsx @@ -1,7 +1,7 @@ 'use client'; import React from 'react'; -import { ParentContext } from './context'; -export { useStyleContext } from './context'; +import { ParentContext } from '../context'; +export { useStyleContext } from '../context'; type WithStyleContextProps = { context?: any; diff --git a/packages/nativewind/utils/withStyleContextAndStates/index.d.ts b/packages/nativewind/utils/withStyleContextAndStates/index.d.ts new file mode 100644 index 0000000000..57aa5a2a7d --- /dev/null +++ b/packages/nativewind/utils/withStyleContextAndStates/index.d.ts @@ -0,0 +1,13 @@ +import React from 'react'; +export { useStyleContext } from '../context'; +type WithStyleContextProps = { + context?: any; + className?: string; + states?: any; +}; +export declare const withStyleContextAndStates: ( + Component: React.ComponentType +) => React.ForwardRefExoticComponent< + React.PropsWithoutRef & + React.RefAttributes +>; diff --git a/packages/nativewind/utils/withStyleContextAndStates/index.js b/packages/nativewind/utils/withStyleContextAndStates/index.js new file mode 100644 index 0000000000..6acde5282f --- /dev/null +++ b/packages/nativewind/utils/withStyleContextAndStates/index.js @@ -0,0 +1,22 @@ +'use client'; +import React from 'react'; +import { extractDataClassName } from '../utils'; +import { ParentContext } from '../context'; +export { useStyleContext } from '../context'; +export const withStyleContextAndStates = (Component) => { + return React.forwardRef(({ context, className, states, ...props }, ref) => { + const classNamesFinal = React.useMemo(() => { + if (!className) return; + return extractDataClassName(className, states); + }, [className, states]); + return React.createElement( + ParentContext.Provider, + { value: context }, + React.createElement(Component, { + className: classNamesFinal, + ...props, + ref: ref, + }) + ); + }); +}; diff --git a/packages/nativewind/utils/src/withStyleContextAndStates.tsx b/packages/nativewind/utils/withStyleContextAndStates/index.tsx similarity index 85% rename from packages/nativewind/utils/src/withStyleContextAndStates.tsx rename to packages/nativewind/utils/withStyleContextAndStates/index.tsx index cc68cf4662..91838c64d5 100644 --- a/packages/nativewind/utils/src/withStyleContextAndStates.tsx +++ b/packages/nativewind/utils/withStyleContextAndStates/index.tsx @@ -1,8 +1,8 @@ 'use client'; import React from 'react'; -import { extractDataClassName } from './utils'; -import { ParentContext } from './context'; -export { useStyleContext } from './context'; +import { extractDataClassName } from '../utils'; +import { ParentContext } from '../context'; +export { useStyleContext } from '../context'; type WithStyleContextProps = { context?: any; From 77726b4a496c48b2c2e8619deb15fce44141b5c5 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Thu, 14 Mar 2024 13:17:51 +0530 Subject: [PATCH 22/45] v1.0.2 --- packages/nativewind/utils/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nativewind/utils/package.json b/packages/nativewind/utils/package.json index 6e7c3ff898..62288eb823 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.2-alpha.6", + "version": "1.0.2", "react-native": "src/index", "source": "src/index", "scripts": { From 6493f7f6aff1ea19f97e4d10cb1a27fa94b14242 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Thu, 14 Mar 2024 13:24:50 +0530 Subject: [PATCH 23/45] fix: tooltip nativeiwind component --- .../nativewind/tooltip/index.tsx | 74 +++++++++---------- 1 file changed, 34 insertions(+), 40 deletions(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/tooltip/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/tooltip/index.tsx index e90006e472..dba28fb13b 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/tooltip/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/tooltip/index.tsx @@ -1,31 +1,20 @@ -import React, { useEffect } from 'react'; +import React from 'react'; import { createTooltip } from '@gluestack-ui/tooltip'; import { View, Text, Platform } from 'react-native'; -import { - tva, - withStyleContext, - withStyleContextAndStates, - VariantProps, -} from '@gluestack-ui/nativewind-utils'; -import Animated, { - Easing, - useSharedValue, - withSpring, - withTiming, -} from 'react-native-reanimated'; -import { View, Text } from 'react-native'; +import { VariantProps } from '@gluestack-ui/nativewind-utils'; import { tva } from '@gluestack-ui/nativewind-utils/tva'; import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext'; -import React from 'react'; +import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; +import { Motion, AnimatePresence } from '@legendapp/motion'; export const UITooltip = createTooltip({ Root: Platform.OS === 'web' ? withStyleContext(View) : withStyleContextAndStates(View), - Content: Animated.View, + Content: Motion.View, Text: Text, - AnimatePresence: React.Fragment, // TODO: Add support for this + AnimatePresence: AnimatePresence, // TODO: Add support for this }); const tooltipStyle = tva({ @@ -87,12 +76,15 @@ type ITooltipTextProps = React.ComponentProps & VariantProps; export const Tooltip = React.forwardRef( - ({ className, ...props }: { className?: string } & ITooltipProps, ref) => { + ( + { className, ...props }: { className?: string } & ITooltipProps, + ref?: any + ) => { return ( ); } @@ -103,32 +95,34 @@ export const TooltipContent = React.forwardRef( { className, ...props }: { className?: string } & ITooltipContentProps, ref ) => { - const opacity = useSharedValue(0); - const scale = useSharedValue(0.5); - useEffect(() => { - opacity.value = withTiming(1, { - easing: Easing.linear, - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - useEffect(() => { - scale.value = withSpring(1, { - damping: 18, - stiffness: 250, - }); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); return ( ); @@ -142,13 +136,13 @@ export const TooltipText = React.forwardRef( size = 'md', ...props }: { className?: string } & ITooltipTextProps, - ref + ref?: any ) => { return ( ); } From d200e39a96f59fbeb8d3e1ea0b61c768feca2c1f Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Thu, 14 Mar 2024 16:28:54 +0530 Subject: [PATCH 24/45] fix: modal and tooltip --- .../src/components/Modal/index.nw.stories.mdx | 1 - .../src/components/Tooltip/index.nw.stories.mdx | 5 ++++- 2 files changed, 4 insertions(+), 2 deletions(-) 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 a2a7ba991a..39b247c951 100644 --- a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx @@ -41,7 +41,6 @@ import { import { transformedCode } from '../../utils'; import { useState } from 'react'; import { - Wrapper, CodePreview, Table, TableContainer, 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 26b2c35ecb..10f7275782 100644 --- a/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx @@ -31,7 +31,9 @@ import { VStack, Icon } from '../../core-components/nativewind'; + import { transformedCode } from '../../utils'; + import { AppProvider, CodePreview, @@ -41,8 +43,9 @@ import { InlineCode, CollapsibleCode } from '@gluestack/design-system'; + import Wrapper from '../../core-components/nativewind/Wrapper'; -; + import {Command} from 'lucide-react-native'; This is an illustration of **Tooltip** component. From 9396a20d797440014d14cd17e9b2cf5c6c698179 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Thu, 14 Mar 2024 16:51:55 +0530 Subject: [PATCH 25/45] fix: withStates imports --- .../src/components/Badge/index.nw.stories.mdx | 5 +---- .../src/core-components/nativewind/checkbox/index.tsx | 3 ++- .../src/core-components/nativewind/input/index.tsx | 1 + .../src/core-components/nativewind/link/index.tsx | 1 + .../src/core-components/nativewind/radio/index.tsx | 2 ++ .../src/core-components/nativewind/slider/index.tsx | 1 + .../src/core-components/nativewind/textarea/index.tsx | 1 + 7 files changed, 9 insertions(+), 5 deletions(-) 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 961639c4e4..c248d3a7ca 100644 --- a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx @@ -36,11 +36,8 @@ import { Button, ButtonText, GlobeIcon, - Menu, - MenuIcon, - MenuItem, - MenuItemLabel, } from '../../core-components/nativewind'; + import { PaintBucket, PuzzleIcon, diff --git a/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx index a1ac4b4f12..c67a7c28e0 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx @@ -12,7 +12,7 @@ import type { VariantProps } from '@gluestack-ui/nativewind-utils'; import { Platform } from 'react-native'; import { Check } from 'lucide-react-native'; - +import { withStates } from '@gluestack-ui/nativewind-utils/withStates'; const UICheckbox = createCheckbox({ // @ts-ignore Root: @@ -101,6 +101,7 @@ type ICheckboxIndicatorProps = React.ComponentProps< typeof UICheckbox.Indicator > & VariantProps; + const CheckboxIndicator = React.forwardRef( ( { className, ...props }: { className?: string } & ICheckboxIndicatorProps, diff --git a/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx index ffed9b39a8..435e3da5c5 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx @@ -9,6 +9,7 @@ import { import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; import type { VariantProps } from '@gluestack-ui/nativewind-utils'; +import { withStates } from '@gluestack-ui/nativewind-utils/withStates'; const UIInput = createInput({ // @ts-ignore diff --git a/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx index 12153692b8..32a1b7a4ef 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/link/index.tsx @@ -7,6 +7,7 @@ import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContex import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; import type { VariantProps } from '@gluestack-ui/nativewind-utils'; +import { withStates } from '@gluestack-ui/nativewind-utils/withStates'; import React from 'react'; export const UILink = createLink({ diff --git a/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx index 8312be0cff..22008676a7 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx @@ -8,6 +8,8 @@ import { useStyleContext, } from '@gluestack-ui/nativewind-utils/withStyleContext'; import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; +import { withStates } from '@gluestack-ui/nativewind-utils/withStates'; +import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; const radioStyle = tva({ base: 'flex-row justify-start items-center web:cursor-pointer data-[disabled=true]:web:cursor-not-allowed gap-2', diff --git a/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx index 506cbfea2d..37547f4a21 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx @@ -9,6 +9,7 @@ import { } from '@gluestack-ui/nativewind-utils/withStyleContext'; import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; +import { withStates } from '@gluestack-ui/nativewind-utils/withStates'; export const UISlider = createSlider({ // @ts-ignore diff --git a/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx index 77668d7213..f7ef6c71ea 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/textarea/index.tsx @@ -9,6 +9,7 @@ import { import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; import type { VariantProps } from '@gluestack-ui/nativewind-utils'; +import { withStates } from '@gluestack-ui/nativewind-utils/withStates'; const UITextarea = createTextarea({ // @ts-ignore From cab221be493dbb235fbb3fc96a15a61709937470 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Fri, 15 Mar 2024 12:06:28 +0530 Subject: [PATCH 26/45] fix: menu and toast --- example/storybook-nativewind/babel.config.js | 14 +- .../src/components/Menu/Menu.tsx | 12 +- .../gluestack-ui-provider/index.tsx | 3 + .../core-components/nativewind/link/index.tsx | 9 +- .../core-components/nativewind/menu/index.tsx | 359 ++++++++---------- .../core-components/nativewind/text/index.tsx | 2 +- .../nativewind/toast/index.tsx | 175 +++------ 7 files changed, 239 insertions(+), 335 deletions(-) diff --git a/example/storybook-nativewind/babel.config.js b/example/storybook-nativewind/babel.config.js index 1fbd7c269e..8d8fe012b7 100644 --- a/example/storybook-nativewind/babel.config.js +++ b/example/storybook-nativewind/babel.config.js @@ -46,6 +46,10 @@ module.exports = function (api) { __dirname, '../../packages/unstyled/button/src' ), + '@gluestack-ui/menu': path.resolve( + __dirname, + '../../packages/unstyled/menu/src' + ), '@gluestack-ui/link': path.resolve( __dirname, '../../packages/unstyled/link/src' @@ -68,24 +72,24 @@ module.exports = function (api) { ), '@gluestack-ui/nativewind-utils/withStyleContext': path.resolve( __dirname, - '../../packages/nativewind/utils/src/withStyleContext' + '../../packages/nativewind/utils/withStyleContext' ), '@gluestack-ui/nativewind-utils/withStyleContextAndStates': path.resolve( __dirname, - '../../packages/nativewind/utils/src/withStyleContextAndStates' + '../../packages/nativewind/utils/withStyleContextAndStates' ), '@gluestack-ui/nativewind-utils/cssInterop': path.resolve( __dirname, - '../../packages/nativewind/utils/src/cssInterop' + '../../packages/nativewind/utils/cssInterop' ), '@gluestack-ui/nativewind-utils/tva': path.resolve( __dirname, - '../../packages/nativewind/utils/src/tva' + '../../packages/nativewind/utils/tva' ), '@gluestack-ui/nativewind-utils': path.resolve( __dirname, - '../../packages/nativewind/utils/src' + '../../packages/nativewind/utils/' ), }, }, diff --git a/example/storybook-nativewind/src/components/Menu/Menu.tsx b/example/storybook-nativewind/src/components/Menu/Menu.tsx index e044f7cd98..2c1fd74f35 100644 --- a/example/storybook-nativewind/src/components/Menu/Menu.tsx +++ b/example/storybook-nativewind/src/components/Menu/Menu.tsx @@ -6,24 +6,24 @@ import { ButtonText, GlobeIcon, HStack, - // Icon, SettingsIcon, AddIcon, Text, Center, -} from '@gluestack-ui/themed'; -import { Menu, - // MenuIcon, MenuItem, MenuItemLabel, -} from '@/components/ui/menu'; -import { Icon } from '@gluestack-ui/themed'; + Icon, +} from '@/components/ui/'; + import { PaintBucket, PuzzleIcon } from 'lucide-react-native'; const MenuBasic = ({ placement = 'bottom' }: any) => { return (
+ + Hello + & VariantProps; const Link = React.forwardRef( - ({ className, ...props }: { className?: string } & ILinkProps, ref) => { + ({ className, ...props }: { className?: string } & ILinkProps, ref?: any) => { return ( & VariantProps; const LinkText = React.forwardRef( - ({ className, ...props }: { className?: string } & ILinkTextProps, ref) => { + ( + { className, ...props }: { className?: string } & ILinkTextProps, + ref?: any + ) => { return (
+ ); + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'Example'); + }, + scope: { + Wrapper, + AlertDialog, + AlertDialogBackdrop, + AlertDialogContent, + AlertDialogHeader, + AlertDialogCloseButton, + AlertDialogFooter, + AlertDialogBody, + CloseIcon, + Button, + ButtonText, + Center, + Text, + Heading, + Icon, + }, + argsType: {}, + }} + /> + + +
+ +## Installation + +### Step 1: Install the following dependencies: + +```bash + +npm i @gluestack-ui/alert-dialog + +``` + +### Step 2: Copy and paste the following code into your project. + + + +```jsx +%%-- File: core-components/nativewind/alert-dialog/index.tsx --%% +``` + + + +### Step 3: Update the import paths to match your project setup. + +## API Reference + +To use this component in your project, include the following import statement in your file. + +```jsx +import { + AlertDialog, + AlertDialogBackdrop, + AlertDialogContent, + AlertDialogHeader, + AlertDialogCloseButton, + AlertDialogFooter, + AlertDialogBody, +} from '@/components/ui/alert-dialog'; +``` + +```jsx +export default () => ( + + + + + + + + + + +); +``` +### Component Props + +This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration. + +#### AlertDialog + +Contains all View related layout style props and actions. +It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. + +<> + + + + + + Prop + + + Type + + + Default + + + Description + + + + + + + + isOpen + + + + boolean + + + false + + + {`If true, the alert-dialog will open. Useful for controllable state behavior.`} + + + + + + onClose + + + + {`() => any`} + + + - + + + {`Callback invoked when the alert-dialog is closed.`} + + + + + + useRNModal + + + + boolean + + + false + + + {`If true, renders react-native native modal. (Only works in react-native)`} + + + + + + defaultIsOpen + + + + boolean + + + false + + + {`Specifies the default open state of the AlertDialog`} + + + + + + initialFocusRef + + + + {`React.RefObject`} + + + - + + + {`The ref of element to receive focus when the alert-dialog opens.`} + + + + + + finalFocusRef + + + + {`React.RefObject`} + + + - + + + {`The ref of element to receive focus when the alert-dialog closes.`} + + + + + + avoidKeyboard + + + + boolean + + + - + + + {`If true, the AlertDialog will avoid the keyboard.`} + + + + + + closeOnOverlayClick + + + + boolean + + + true + + + {`If true, the AlertDialog will close when the overlay is clicked.`} + + + + + + isKeyboardDismissable + + + + boolean + + + true + + + {`If true, the keyboard can dismiss the AlertDialog`} + + + + + + animationPreset + + + + slide | fade + + + slide + + + {`Specifies the animation preset for the AlertDialog`} + + + +
+ + + +#### AlertDialogBackdrop + +It is React Native's [Pressable](https://reactnative.dev/docs/pressable#props) component, created using [@legendapp/motion's](https://legendapp.com/open-source/motion/) `createMotionAnimatedComponent` function to add animation to the component. You can use any declarative animation library you prefer. + +#### AlertDialogContent + +It is [@legendapp/motion's](https://legendapp.com/open-source/motion/) [Motion.View](https://legendapp.com/open-source/motion/overview/) component. You can use any declarative animation library you prefer. + +#### AlertDialogCloseButton + +It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component. + +#### AlertDialogHeader + +It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. + +#### AlertDialogBody + +It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. + +#### AlertDialogFooter + +It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. + +### Accessibility + +We have outlined the various features that ensure the AlertDialog component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards.It uses React Native ARIA [@react-native-aria/focus](https://react-native-aria.geekyants.com/) which follows the [WAI-ARIA Alert and Message Dialogs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/). + +### Props + +AlertDialog component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), and the props mentioned below. + +#### AlertDialog + +<> + + + + + + Name + + + Value + + + Default + + + + + + + + size + + + + xs | sm | md | lg | full + + + md + + + +
+ + + +### Examples + +The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project. + +#### AlertDialog with semantic icon + +An example of an AlertDialog component incorporating an icon component for visually representing important information or actions. + + + +
+ +
+ { + setShowAlertDialog(false); + }} + > + + + + + + Order placed + + + + + Congratulations, your order has been placed! You will receive a confirmation email shortly. Thank you for shopping with us. + + + + + + + + + ); + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Button, + ButtonText, + Center, + Wrapper, + AlertDialog, + AlertDialogBackdrop, + AlertDialogContent, + AlertDialogHeader, + AlertDialogCloseButton, + AlertDialogFooter, + AlertDialogBody, + Icon, + Text, + HStack, + AlertTriangleIcon, + CheckCircleIcon, + Heading, + }, + argsType: {}, + }} + /> + + + +#### AlertDialog Sizes + +An AlertDialog component with adjustable sizes, providing flexible and visually appealing pop-up notifications and interactive prompts to users. + -Coming Soon! \ No newline at end of file + + +
+ +
+ { + setShowAlertDialog(false); + }} + {...props} + > + + + + + + Order placed + + + + + You have exceeded your monthly upload limit. Please upgrade to a premium account to continue uploading. + + + + + + + + + + ); + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Button, + ButtonText, + Center, + Wrapper, + AlertDialog, + AlertDialogBackdrop, + AlertDialogContent, + AlertDialogHeader, + AlertDialogCloseButton, + AlertDialogFooter, + AlertDialogBody, + Icon, + Text, + HStack, + AlertTriangleIcon, + CheckCircleIcon, + Heading, + }, + argsType: { + size: { + control: 'select', + options: ['xs', 'sm', 'md', 'lg', 'full'], + default: 'md', + }, + }, + }} + /> + 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 39b247c951..89b8353f5b 100644 --- a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx @@ -175,7 +175,7 @@ npm i @gluestack-ui/modal @legendapp/motion To use this component in your project, include the following import statement in your file. ```jsx -import { Modal } from '@/components/ui/Modal'; +import { Modal } from '@/components/ui/modal'; ``` ```jsx From a82734610878e37e427775d9b7003941376f4ba5 Mon Sep 17 00:00:00 2001 From: Damini Date: Fri, 15 Mar 2024 14:27:30 +0530 Subject: [PATCH 30/45] fix: styles --- .../src/components/AlertDialog/index.nw.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx b/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx index 6dd7f96f39..087307391d 100644 --- a/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx @@ -552,7 +552,7 @@ An AlertDialog component with adjustable sizes, providing flexible and visually const [showAlertDialog, setShowAlertDialog] = React.useState(false); return ( <> -
+
From b39027de1dbc1a8d8e28dec2d3bb07799a566d93 Mon Sep 17 00:00:00 2001 From: Damini Date: Fri, 15 Mar 2024 16:31:27 +0530 Subject: [PATCH 31/45] feat: add menu nativewind examples --- .../.storybook/preview.js | 2 +- .../src/components/Menu/Menu.tsx | 89 ++----- ...index.stories.mdx => index.nw.stories.mdx} | 238 +++++++----------- .../core-components/nativewind/menu/index.tsx | 2 +- 4 files changed, 103 insertions(+), 228 deletions(-) rename example/storybook-nativewind/src/components/Menu/{index.stories.mdx => index.nw.stories.mdx} (80%) diff --git a/example/storybook-nativewind/.storybook/preview.js b/example/storybook-nativewind/.storybook/preview.js index 9b4bbf185a..8201d81410 100644 --- a/example/storybook-nativewind/.storybook/preview.js +++ b/example/storybook-nativewind/.storybook/preview.js @@ -60,7 +60,7 @@ export const parameters = { 'Textarea', ], 'Overlay', - ['AlertDialog', 'Modal', 'Popover', 'Tooltip'], + ['AlertDialog', 'Menu', 'Modal', 'Popover', 'Tooltip'], 'Disclosure', ['Actionsheet', 'Accordion'], 'Media And Icons', diff --git a/example/storybook-nativewind/src/components/Menu/Menu.tsx b/example/storybook-nativewind/src/components/Menu/Menu.tsx index 2c1fd74f35..aff1f17e16 100644 --- a/example/storybook-nativewind/src/components/Menu/Menu.tsx +++ b/example/storybook-nativewind/src/components/Menu/Menu.tsx @@ -1,29 +1,17 @@ import React from 'react'; - -import { - Box, - Button, - ButtonText, - GlobeIcon, - HStack, - SettingsIcon, - AddIcon, - Text, - Center, - Menu, - MenuItem, - MenuItemLabel, - Icon, -} from '@/components/ui/'; +import { Button, ButtonText } from '@/components/ui/button'; +import { Box } from '@/components/ui/box'; +import { HStack } from '@/components/ui/hstack'; +import { Text } from '@/components/ui/text'; +import { Icon, AddIcon, GlobeIcon, SettingsIcon } from '@/components/ui/icon'; +import { Center } from '@/components/ui/center'; +import { Menu, MenuItem, MenuItemLabel } from '@/components/ui/menu'; import { PaintBucket, PuzzleIcon } from 'lucide-react-native'; const MenuBasic = ({ placement = 'bottom' }: any) => { return (
- - Hello - { ); }} > - - + + Community - - + + Plugins - - + + Theme - - + + Settings - - + + Add account @@ -62,55 +50,12 @@ const MenuBasic = ({ placement = 'bottom' }: any) => { ); }; -const FigmaMenuStory = ({ _colorMode, ...props }) => { - return ( - { - return ( - - ); - }} - > - - - Community - - - - Plugins - - - - Theme - - - - Settings - - - - Add account - - - ); -}; - MenuBasic.description = 'This is a basic Menu component example.The Menu component creates a user-friendly dropdown interface that can be utilized to present a range of options or actions. This feature ensures accessibility and ease of use for the user.'; export default MenuBasic; export { - FigmaMenuStory, Button, ButtonText, GlobeIcon, diff --git a/example/storybook-nativewind/src/components/Menu/index.stories.mdx b/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx similarity index 80% rename from example/storybook-nativewind/src/components/Menu/index.stories.mdx rename to example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx index 00a03d1897..8dba66e0e7 100644 --- a/example/storybook-nativewind/src/components/Menu/index.stories.mdx +++ b/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx @@ -8,53 +8,56 @@ pageTitle: Menu pageDescription: The Menu component creates a user-friendly dropdown interface that can be utilized to present a range of options or actions. This feature ensures accessibility and ease of use for the user. showHeader: true - -tag: beta --- import { Meta } from '@storybook/addon-docs'; - + -import { Menu, MenuIcon, MenuItem, MenuItemLabel } from '../../core-components/themed'; import { - ThemeIcon, - SettingsIcon, - PlusIcon, - Box, Button, ButtonText, -} from '@gluestack-ui/themed'; -import { Badge, Pressable, Avatar, Divider } from '@gluestack-ui/themed'; -import { - Text as MenuText, - Center, - GlobeIcon, - PuzzleIcon, -} from '@gluestack-ui/themed'; -import { Icon, PaintBucket, AddIcon } from '@gluestack-ui/themed'; + Menu, + MenuIcon, + MenuItem, + MenuItemLabel, + ThemeIcon, + SettingsIcon, + PlusIcon, + Box, + Badge, + Pressable, + Avatar, + Divider, + Text as MenuText, + Center, + GlobeIcon, + Icon, + AddIcon, +} from '../../core-components/nativewind'; +import { PaintBucket, PuzzleIcon } from 'lucide-react-native'; import { transformedCode } from '../../utils'; import { - AppProvider, CodePreview, Table, TableContainer, - Text, InfoIcon, InlineCode, } from '@gluestack/design-system'; -import Wrapper from '../../core-components/themed/Wrapper'; +import Wrapper from '../../core-components/nativewind/Wrapper'; +import { CollapsibleCode } from '@gluestack/design-system'; -This is an illustration of **Menu** component. +This is an illustration of a **Menu** component. -<> + { return ( @@ -65,33 +68,33 @@ This is an illustration of **Menu** component. }} > - + Community {\/* PuzzleIcon is imported from 'lucide-react-native' *\/} - + Plugins {\/* PaintBucket is imported from 'lucide-react-native' *\/} - + Theme - + Settings - + Add account @@ -121,23 +124,43 @@ This is an illustration of **Menu** component. argsType: {}, }} /> - +
-## API Reference +## Installation -### Import +### Step 1: Install the following dependencies: -To use this component in your project, include the following import statement in your file. +```bash -```jsx -import { Menu } from '@gluestack-ui/themed'; +npm i @gluestack-ui/menu + +``` + +### Step 2: Copy and paste the following code into your project. + + + +```jsx +%%-- File: core-components/nativewind/menu/index.tsx --%% ``` -### Anatomy + -The structure provided below can help you identify and understand a Menu component's various parts. +### Step 3: Update the import paths to match your project setup. + +## API Reference + +To use this component in your project, include the following import statement in your file. + +```jsx +import { + Menu, + MenuItem, + MenuItemLabel, +} from '@/components/ui/menu'; +``` ```jsx export default () => ( @@ -158,7 +181,7 @@ This section provides a comprehensive reference list for the component props, de Contains all menu related layout style props and actions. It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. -<> + @@ -403,13 +426,13 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
- + #### MenuItem Contains all button related layout style props and actions. It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component. -<> + @@ -448,39 +471,7 @@ Contains all button related layout style props and actions. It inherits all the
- - -**Descendants Styling Props** -Props to style child components. - -<> - - - - - - Sx Prop - - - Description - - - - - - - - _text - - - - {`Prop to style MenuItemLabel Component`} - - - -
- - + #### MenuItemLabel @@ -495,6 +486,7 @@ Contains all text related layout style props and actions. It inherits all the pr We have outlined the various features that ensure the Menu component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. + Adheres to the [MENU WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/menubar/). ### Examples @@ -505,7 +497,7 @@ The Examples section provides visual representations of the different variants o Menu Component provides different placement options, allowing you to position it dynamically based on user interaction or layout requirements. -<> + - + Community {\/* PuzzleIcon is imported from 'lucide-react-native' *\/} - + Plugins {\/* PaintBucket is imported from 'lucide-react-native' *\/} - + Theme - + Settings - + Add account @@ -597,13 +589,14 @@ Menu Component provides different placement options, allowing you to position it }, }} /> - + + #### Disabled MenuItem Our Menu component supports dynamic disabling of menu items, enabling you to control the availability and interaction of specific menu options based on conditions or user permissions. -<> + - + Community {\/* PuzzleIcon is imported from 'lucide-react-native' *\/} - + Plugins {\/* PaintBucket is imported from 'lucide-react-native' *\/} - + Theme - + Settings - + Add account @@ -675,13 +668,13 @@ Our Menu component supports dynamic disabling of menu items, enabling you to con argsType: {}, }} /> - + #### Selection Our menu component supports selection mode, logging the selected menu item key to the console when a selection change occurs. Based on the selected key, it prints a corresponding message, indicating a route push for the menu items in the example given below. -<> + - + Community {\/* PuzzleIcon is imported from 'lucide-react-native' *\/} - + Plugins {\/* PaintBucket is imported from 'lucide-react-native' *\/} - + Theme - + Settings @@ -767,67 +760,4 @@ Our menu component supports selection mode, logging the selected menu item key t argsType: {}, }} /> - - -## Unstyled - -All the components in `gluestack-ui` are unstyled by default. To customize your UI using the extendedTheme, please refer to this [link](https://gluestack.io/ui/docs/theme-configuration/customizing-theme). The import names of components serve as keys to customize each component. - - - -## Spec Doc - -Explore the comprehensive details of the Menu in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey. - -