From b1c4b7a2931df229c3c25365aff64f483e203bf4 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Wed, 27 Mar 2024 12:15:50 +0530 Subject: [PATCH 01/78] feat: select nativewind --- .../src/components/Select/Select.tsx | 2 +- .../nativewind/select/index.tsx | 880 +++++------------- .../nativewind/select/select-actionsheet.tsx | 515 ++++++++++ 3 files changed, 752 insertions(+), 645 deletions(-) create mode 100644 example/storybook-nativewind/src/core-components/nativewind/select/select-actionsheet.tsx diff --git a/example/storybook-nativewind/src/components/Select/Select.tsx b/example/storybook-nativewind/src/components/Select/Select.tsx index 99dcc38fa5..c1953e7e95 100644 --- a/example/storybook-nativewind/src/components/Select/Select.tsx +++ b/example/storybook-nativewind/src/components/Select/Select.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Center, ChevronDownIcon, Icon } from '@gluestack-ui/themed'; +import { Center, Icon } from '@gluestack-ui/themed'; import { Select, diff --git a/example/storybook-nativewind/src/core-components/nativewind/select/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/select/index.tsx index c24c253a80..24abf3901d 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/select/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/select/index.tsx @@ -1,681 +1,273 @@ -import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements'; +import React from 'react'; +import { tva } from '@gluestack-ui/nativewind-utils/tva'; +import { withStates } from '@gluestack-ui/nativewind-utils/withStates'; import { - AnimatePresence, - AnimatedPressable, - AnimatedView, -} from '@gluestack-style/animation-resolver'; -import { styled, AsForwarder } from '@gluestack-style/react'; -import { createActionsheet } from '@gluestack-ui/actionsheet'; + withStyleContext, + useStyleContext, +} from '@gluestack-ui/nativewind-utils/withStyleContext'; +import type { VariantProps } from '@gluestack-ui/nativewind-utils'; import { createSelect } from '@gluestack-ui/select'; -import { TextInput } from 'react-native'; import { - Pressable, - View, - Text, - ScrollView, - VirtualizedList, - FlatList, - SectionList, -} from 'react-native'; - -const StyledRoot = styled(View, { - width: '$full', - height: '$full', - _web: { - pointerEvents: 'none', + Actionsheet, + ActionsheetContent, + ActionsheetItem, + ActionsheetItemText, + ActionsheetDragIndicator, + ActionsheetDragIndicatorWrapper, + ActionsheetBackdrop, + ActionsheetScrollView, + ActionsheetVirtualizedList, + ActionsheetFlatList, + ActionsheetSectionList, + ActionsheetSectionHeaderText, +} from './select-actionsheet'; + +import { Pressable, View, TextInput, Platform } from 'react-native'; + +/** Select Components */ + +const selectIconStyle = tva({ + base: 'text-background-500', + parentVariants: { + size: { + '2xs': 'h-3 w-3', + 'xs': 'h-3.5 w-3.5', + 'sm': 'h-4 w-4', + 'md': 'h-4.5 w-4.5', + 'lg': 'h-5 w-5', + 'xl': 'h-6 w-6', + }, }, }); -const StyledContent = styled( - AnimatedView, - { - alignItems: 'center', - borderTopLeftRadius: '$3xl', - borderTopRightRadius: '$3xl', - h: '$full', - p: '$2', - bg: '$background0', - - _sectionHeaderBackground: { - bg: '$background0', - }, - - defaultProps: { - hardShadow: '5', +const selectStyle = tva({ + base: '', + variants: { + size: { + xl: '', + lg: '', + md: '', + sm: '', }, - - _web: { - userSelect: 'none', - pointerEvents: 'auto', + variant: { + underlined: '', + outline: '', + rounded: '', }, }, - { - descendantStyle: ['_sectionHeaderBackground'], - } -); - -const StyledItem = styled( - Pressable, - { - 'p': '$3', - 'flexDirection': 'row', - 'alignItems': 'center', - 'rounded': '$sm', - 'w': '$full', - - ':disabled': { - opacity: 0.4, - _web: { - // @ts-ignore - pointerEvents: 'all !important', - cursor: 'not-allowed', - }, - }, - - ':hover': { - bg: '$background50', - }, - - ':active': { - bg: '$background100', - }, - - ':focus': { - bg: '$background100', - }, +}); - '_web': { - ':focusVisible': { - bg: '$background100', - }, +const selectTriggerStyle = tva({ + base: 'border border-background-300 rounded flex-row items-center overflow-hidden data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:data-[hover=true]:border-background-300', + parentVariants: { + size: { + xl: 'h-12', + lg: 'h-11', + md: 'h-10', + sm: 'h-9', }, - }, - { - descendantStyle: ['_text', '_icon'], - } -); - -const StyledItemText = styled( - Text, - { - mx: '$2', - props: { - size: 'md', + variant: { + underlined: + 'border-0 border-b rounded-none data-[hover=true]:border-primary-700 data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_-1px_0_0] data-[focus=true]:web:shadow-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700', + outline: + 'data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_0_0_1px] data-[focus=true]:data-[hover=true]:web:shadow-primary-600 data-[invalid=true]:web:shadow-[inset_0_0_0_1px] data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700 data-[invalid=true]:data-[hover=true]:border-error-700', + rounded: + 'rounded-full data-[focus=true]:border-primary-700 data-[focus=true]:web:shadow-[inset_0_0_0_1px] data-[focus=true]:web:shadow-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:shadow-error-700', }, - color: '$text800', }, - { - ancestorStyle: ['_text'], - } -); - -const StyledDragIndicator = styled(View, { - w: '$16', - h: '$1', - bg: '$background400', - rounded: '$full', -}); - -const StyledDragIndicatorWrapper = styled(View, { - py: '$1', - w: '$full', - alignItems: 'center', }); -const StyledBackdrop = styled(AnimatedPressable, { - ':initial': { - opacity: 0, - }, - - ':animate': { - opacity: 0.5, - }, - - ':exit': { - opacity: 0, - }, - - 'position': 'absolute', - 'left': 0, - 'top': 0, - 'right': 0, - 'bottom': 0, - 'bg': '$background950', - - '_web': { - cursor: 'default', - pointerEvents: 'auto', - }, -}); - -const StyledScrollView = styled(ScrollView, { - w: '$full', - h: 'auto', -}); - -const StyledVirtualizedList = styled(VirtualizedList, { - w: '$full', - h: 'auto', -}); - -const StyledFlatList = styled(FlatList, { - w: '$full', - h: 'auto', -}); - -const StyledSectionList = styled(SectionList, { - w: '$full', - h: 'auto', -}); - -const StyledSectionHeaderText = styled(H4, { - letterSpacing: '$sm', - fontWeight: '$bold', - fontFamily: '$heading', - - // Overrides expo-html default styling - marginVertical: 0, - - variants: { - isTruncated: { - true: { - props: { - // @ts-ignore - numberOfLines: 1, - ellipsizeMode: 'tail', - }, - }, - }, - bold: { - true: { - fontWeight: '$bold', - }, - }, - underline: { - true: { - textDecorationLine: 'underline', - }, - }, - strikeThrough: { - true: { - textDecorationLine: 'line-through', - }, - }, +const selectInputStyle = tva({ + base: 'py-auto px-3 placeholder-text-500 flex-1 web:w-full h-full text-text-900 pointer-events-none web:outline-none', + parentVariants: { size: { - '5xl': { - //@ts-ignore - props: { as: H1 }, - fontSize: '$6xl', - }, - '4xl': { - //@ts-ignore - props: { as: H1 }, - fontSize: '$5xl', - }, - - '3xl': { - //@ts-ignore - props: { as: H1 }, - fontSize: '$4xl', - }, - - '2xl': { - //@ts-ignore - props: { as: H2 }, - fontSize: '$3xl', - }, - - 'xl': { - //@ts-ignore - props: { as: H3 }, - fontSize: '$2xl', - }, - - 'lg': { - //@ts-ignore - props: { as: H4 }, - fontSize: '$xl', - }, - - 'md': { - //@ts-ignore - props: { as: H5 }, - fontSize: '$lg', - }, - - 'sm': { - //@ts-ignore - props: { as: H6 }, - fontSize: '$md', - }, - - 'xs': { - //@ts-ignore - props: { as: H6 }, - fontSize: '$sm', - }, + xl: 'text-xl', + lg: 'text-lg', + md: 'text-md', + sm: 'text-sm', }, - sub: { - true: { - fontSize: '$xs', - }, - }, - italic: { - true: { - fontStyle: 'italic', - }, - }, - highlight: { - true: { - bg: '$yellow500', - }, + variant: { + underlined: 'px-0', + outline: '', + rounded: 'px-4', }, }, - color: '$text500', - props: { size: 'xs' }, - textTransform: 'uppercase', - p: '$3', }); -const StyledIcon = styled( - AsForwarder, +const UISelect = createSelect( { - variants: { - size: { - '2xs': { - h: '$3', - w: '$3', - props: { - // @ts-ignore - size: 12, - }, - }, - 'xs': { - h: '$3.5', - w: '$3.5', - props: { - //@ts-ignore - size: 14, - }, - }, - 'sm': { - h: '$4', - w: '$4', - props: { - //@ts-ignore - size: 16, - }, - }, - 'md': { - h: '$4.5', - w: '$4.5', - props: { - //@ts-ignore - size: 18, - }, - }, - 'lg': { - h: '$5', - w: '$5', - props: { - //@ts-ignore - size: 20, - }, - }, - 'xl': { - h: '$6', - w: '$6', - props: { - //@ts-ignore - size: 24, - }, - }, - }, - }, - props: { - size: 'sm', - fill: 'none', - }, - - color: '$background500', + Root: withStyleContext(View), + // @ts-ignore + Trigger: Platform.OS === 'web' ? Pressable : withStates(Pressable), + Input: TextInput, + Icon: View, }, { - componentName: 'BaseIcon', - resolveProps: ['stroke', 'fill'], - } as const, - { - propertyTokenMap: { - stroke: 'colors', - fill: 'colors', - }, + Portal: Actionsheet, + Backdrop: ActionsheetBackdrop, + Content: ActionsheetContent, + DragIndicator: ActionsheetDragIndicator, + DragIndicatorWrapper: ActionsheetDragIndicatorWrapper, + Item: ActionsheetItem, + ItemText: ActionsheetItemText, + ScrollView: ActionsheetScrollView, + VirtualizedList: ActionsheetVirtualizedList, + FlatList: ActionsheetFlatList, + SectionList: ActionsheetSectionList, + SectionHeaderText: ActionsheetSectionHeaderText, } ); -const StyledSelectRoot = styled(View, {}); - -const StyledSelectTrigger = styled( - Pressable, - { - 'borderWidth': 1, - 'borderColor': '$background300', - 'borderRadius': '$sm', - 'flexDirection': 'row', - 'overflow': 'hidden', - 'alignItems': 'center', - - ':hover': { - borderColor: '$border400', - }, - - ':focus': { - borderColor: '$primary700', - }, - - ':disabled': { - 'opacity': 0.4, - ':hover': { - borderColor: '$background300', - }, - }, - - '_input': { - py: 'auto', - px: '$3', - }, - - '_icon': { - color: '$background500', - }, - - 'variants': { - size: { - xl: { - h: '$12', - _input: { - fontSize: '$xl', - }, - _icon: { - h: '$6', - w: '$6', - }, - }, - lg: { - h: '$11', - _input: { - fontSize: '$lg', - }, - _icon: { - h: '$5', - w: '$5', - }, - }, - md: { - h: '$10', - _input: { - fontSize: '$md', - }, - _icon: { - h: '$4', - w: '$4', - }, - }, - sm: { - h: '$9', - _input: { - fontSize: '$sm', - }, - _icon: { - h: '$3.5', - w: '$3.5', - }, - }, - }, - variant: { - underlined: { - '_input': { - _web: { - outlineWidth: 0, - outline: 'none', - }, - px: '$0', - }, - - 'borderWidth': 0, - 'borderRadius': 0, - 'borderBottomWidth': '$1', - - ':focus': { - 'borderColor': '$primary700', - '_web': { - boxShadow: 'inset 0 -1px 0 0 $primary700', - }, - ':hover': { - borderColor: '$primary700', - _web: { - boxShadow: 'inset 0 -1px 0 0 $primary600', - }, - }, - }, - - ':invalid': { - 'borderBottomWidth': 2, - 'borderBottomColor': '$error700', - '_web': { - boxShadow: 'inset 0 -1px 0 0 $error700', - }, - ':hover': { - borderBottomColor: '$error700', - }, - ':focus': { - 'borderBottomColor': '$error700', - ':hover': { - borderBottomColor: '$error700', - _web: { - boxShadow: 'inset 0 -1px 0 0 $error700', - }, - }, - }, - ':disabled': { - ':hover': { - borderBottomColor: '$error700', - _web: { - boxShadow: 'inset 0 -1px 0 0 $error700', - }, - }, - }, - }, - }, - outline: { - '_input': { - _web: { - outlineWidth: 0, - outline: 'none', - }, - }, - - ':focus': { - 'borderColor': '$primary700', - '_web': { - boxShadow: 'inset 0 0 0 1px $primary700', - }, - ':hover': { - borderColor: '$primary700', - _web: { - boxShadow: 'inset 0 0 0 1px $primary600', - }, - }, - }, - - ':invalid': { - 'borderColor': '$error700', - '_web': { - boxShadow: 'inset 0 0 0 1px $error700', - }, - ':hover': { - borderColor: '$error700', - }, - ':focus': { - 'borderColor': '$error700', - ':hover': { - borderColor: '$error700', - _web: { - boxShadow: 'inset 0 0 0 1px $error700', - }, - }, - }, - ':disabled': { - ':hover': { - borderColor: '$error700', - _web: { - boxShadow: 'inset 0 0 0 1px $error700', - }, - }, - }, - }, - }, - rounded: { - 'borderRadius': 999, - - '_input': { - px: '$4', - _web: { - outlineWidth: 0, - outline: 'none', - }, - }, - - ':focus': { - 'borderColor': '$primary700', - '_web': { - boxShadow: 'inset 0 0 0 1px $primary700', - }, - ':hover': { - borderColor: '$primary700', - _web: { - boxShadow: 'inset 0 0 0 1px $primary600', - }, - }, - }, +type ISelectProps = VariantProps & + React.ComponentProps; + +const Select = React.forwardRef( + ( + { + className, + size = 'md', + variant = 'outline', + ...props + }: ISelectProps & { className?: string }, + ref?: any + ) => { + return ( + + ); + } +); - ':invalid': { - 'borderColor': '$error700', - '_web': { - boxShadow: 'inset 0 0 0 1px $error700', - }, - ':hover': { - borderColor: '$error700', - }, - ':focus': { - 'borderColor': '$error700', - ':hover': { - borderColor: '$error700', - _web: { - boxShadow: 'inset 0 0 0 1px $error700', - }, - }, - }, - ':disabled': { - ':hover': { - borderColor: '$error700', - _web: { - boxShadow: 'inset 0 0 0 1px $error700', - }, - }, - }, +type ISelectTriggerProps = VariantProps & + React.ComponentProps; + +const SelectTrigger = React.forwardRef( + ( + { className, ...props }: ISelectTriggerProps & { className?: string }, + ref?: any + ) => { + const { size: parentSize, variant: parentVariant } = useStyleContext(); + return ( + + ); } ); -const StyledSelectInput = styled( - TextInput, - { - _web: { - w: '$full', - }, - - pointerEvents: 'none', - flex: 1, - h: '$full', - color: '$text900', - - props: { - placeholderTextColor: '$text500', - }, - }, - { - ancestorStyle: ['_input'], - resolveProps: ['placeholderTextColor'], - }, - { - propertyTokenMap: { - placeholderTextColor: 'colors', - }, +type ISelectInputProps = VariantProps & + React.ComponentProps; + +const SelectInput = React.forwardRef( + ( + { className, ...props }: ISelectInputProps & { className?: string }, + ref?: any + ) => { + const { size: parentSize, variant: parentVariant } = useStyleContext(); + return ( + + ); } ); -const Actionsheet = createActionsheet({ - Root: StyledRoot, - Content: StyledContent, - Item: StyledItem, - ItemText: StyledItemText, - DragIndicator: StyledDragIndicator, - IndicatorWrapper: StyledDragIndicatorWrapper, - Backdrop: StyledBackdrop, - ScrollView: StyledScrollView, - VirtualizedList: StyledVirtualizedList, - FlatList: StyledFlatList, - SectionList: StyledSectionList, - SectionHeaderText: StyledSectionHeaderText, - Icon: StyledIcon, - AnimatePresence: AnimatePresence, -}); - -export const Select = createSelect( - { - Root: StyledSelectRoot, - Trigger: StyledSelectTrigger, - Input: StyledSelectInput, - Icon: StyledIcon, - }, - { - Portal: Actionsheet, - Backdrop: Actionsheet.Backdrop, - Content: Actionsheet.Content, - DragIndicator: Actionsheet.DragIndicator, - DragIndicatorWrapper: Actionsheet.DragIndicatorWrapper, - Item: Actionsheet.Item, - ItemText: Actionsheet.ItemText, - ScrollView: Actionsheet.ScrollView, - VirtualizedList: Actionsheet.VirtualizedList, - FlatList: Actionsheet.FlatList, - SectionList: Actionsheet.SectionList, - SectionHeaderText: Actionsheet.SectionHeaderText, +type ISelectIcon = VariantProps & + React.ComponentProps; + +const SelectIcon = React.forwardRef( + ( + { + className, + as: AsComp, + size = 'sm', + ...props + }: ISelectIcon & { as?: any }, + ref?: any + ) => { + if (AsComp) { + return ( + + ); + } + return ( + + ); } ); -export const SelectTrigger = Select.Trigger; -export const SelectInput = Select.Input; -export const SelectIcon = Select.Icon; -export const SelectPortal = Select.Portal; -export const SelectBackdrop = Select.Backdrop; -export const SelectContent = Select.Content; -export const SelectDragIndicator = Select.DragIndicator; -export const SelectDragIndicatorWrapper = Select.DragIndicatorWrapper; -export const SelectItem = Select.Item; -export const SelectItemText = Select.ItemText; -export const SelectScrollView = Select.ScrollView; -export const SelectVirtualizedList = Select.VirtualizedList; -export const SelectFlatList = Select.FlatList; -export const SelectSectionList = Select.SectionList; -export const SelectSectionHeaderText = Select.SectionHeaderText; + +Select.displayName = 'Select'; +SelectTrigger.displayName = 'SelectTrigger'; +SelectInput.displayName = 'SelectInput'; +SelectIcon.displayName = 'SelectIcon'; + +// Actionsheet Components +const SelectPortal = UISelect.Portal; +const SelectBackdrop = UISelect.Backdrop; +const SelectContent = UISelect.Content; +const SelectDragIndicator = UISelect.DragIndicator; +const SelectDragIndicatorWrapper = UISelect.DragIndicatorWrapper; +const SelectItem = UISelect.Item; +const SelectItemText = UISelect.ItemText; +const SelectScrollView = UISelect.ScrollView; +const SelectVirtualizedList = UISelect.VirtualizedList; +const SelectFlatList = UISelect.FlatList; +const SelectSectionList = UISelect.SectionList; +const SelectSectionHeaderText = UISelect.SectionHeaderText; + +export { + Select, + SelectTrigger, + SelectInput, + SelectIcon, + SelectPortal, + SelectBackdrop, + SelectContent, + SelectDragIndicator, + SelectDragIndicatorWrapper, + SelectItem, + SelectItemText, + SelectScrollView, + SelectVirtualizedList, + SelectFlatList, + SelectSectionList, + SelectSectionHeaderText, +}; diff --git a/example/storybook-nativewind/src/core-components/nativewind/select/select-actionsheet.tsx b/example/storybook-nativewind/src/core-components/nativewind/select/select-actionsheet.tsx new file mode 100644 index 0000000000..cacabe803f --- /dev/null +++ b/example/storybook-nativewind/src/core-components/nativewind/select/select-actionsheet.tsx @@ -0,0 +1,515 @@ +import { H4 } from '@expo/html-elements'; +import { createActionsheet } from '@gluestack-ui/actionsheet'; +import { + Pressable, + View, + Text, + ScrollView, + VirtualizedList, + FlatList, + SectionList, + Platform, +} from 'react-native'; + +import { tva } from '@gluestack-ui/nativewind-utils/tva'; +import type { VariantProps } from '@gluestack-ui/nativewind-utils'; +import { withStyleContext } from '@gluestack-ui/nativewind-utils/withStyleContext'; +import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; +import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; +import { + Motion, + AnimatePresence, + createMotionAnimatedComponent, +} from '@legendapp/motion'; + +import React from 'react'; + +const AnimatedPressable = createMotionAnimatedComponent(Pressable); +export const UIActionsheet = createActionsheet({ + Root: View, + Content: withStyleContext(Motion.View), + // @ts-ignore + Item: + Platform.OS === 'web' + ? withStyleContext(Pressable) + : withStyleContextAndStates(Pressable), + ItemText: Text, + DragIndicator: View, + IndicatorWrapper: View, + Backdrop: AnimatedPressable, + ScrollView: ScrollView, + VirtualizedList: VirtualizedList, + FlatList: FlatList, + SectionList: SectionList, + SectionHeaderText: H4, + Icon: View, + AnimatePresence: AnimatePresence, +}); + +cssInterop(UIActionsheet, { className: 'style' }); +cssInterop(UIActionsheet.Content, { className: 'style' }); +cssInterop(UIActionsheet.Item, { className: 'style' }); +cssInterop(UIActionsheet.ItemText, { className: 'style' }); +cssInterop(UIActionsheet.DragIndicator, { className: 'style' }); +cssInterop(UIActionsheet.DragIndicatorWrapper, { className: 'style' }); +cssInterop(UIActionsheet.Backdrop, { className: 'style' }); +cssInterop(UIActionsheet.ScrollView, { className: 'style' }); +cssInterop(UIActionsheet.VirtualizedList, { className: 'style' }); +cssInterop(UIActionsheet.FlatList, { className: 'style' }); +cssInterop(UIActionsheet.SectionList, { className: 'style' }); +cssInterop(UIActionsheet.SectionHeaderText, { className: 'style' }); +cssInterop(UIActionsheet.Icon, { className: 'style' }); + +const actionsheetStyle = tva({ base: 'w-full h-full web:pointer-events-none' }); + +const actionsheetContentStyle = tva({ + base: 'items-center rounded-tl-3xl rounded-tr-3xl p-2 bg-background-0 web:pointer-events-auto web:select-none shadow-lg', +}); + +const actionsheetItemStyle = tva({ + base: 'w-full flex-row items-center p-3 rounded-sm disabled:opacity-40 disabled:web:pointer-events-auto disabled:web:cursor-not-allowed hover:bg-background-50 active:bg-background-100 focus:bg-background-100 web:focus-visible:bg-background-100', +}); + +const actionsheetItemTextStyle = tva({ + base: 'text-typography-700 font-normal font-body tracking-md text-left mx-2', + variants: { + isTruncated: { + true: '', + }, + bold: { + true: 'font-bold', + }, + underline: { + true: 'underline', + }, + strikeThrough: { + true: 'line-through', + }, + size: { + '2xs': 'text-2xs', + 'xs': 'text-xs', + 'sm': 'text-sm', + 'md': 'text-md', + 'lg': 'text-lg', + 'xl': 'text-xl', + '2xl': 'text-2xl', + '3xl': 'text-3xl', + '4xl': 'text-4xl', + '5xl': 'text-5xl', + '6xl': 'text-6xl', + }, + }, + defaultVariants: { + size: 'md', + }, +}); + +const actionsheetDragIndicatorStyle = tva({ + base: 'w-16 h-1 bg-background-400 rounded-full', +}); + +const actionsheetDragIndicatorWrapperStyle = tva({ + base: 'w-full py-1 items-center', +}); + +const actionsheetBackdropStyle = tva({ + base: 'absolute left-0 top-0 right-0 bottom-0 bg-background-dark web:cursor-default web:pointer-events-auto', +}); + +const actionsheetScrollViewStyle = tva({ + base: 'w-full h-auto', +}); + +const actionsheetVirtualizedListStyle = tva({ + base: 'w-full h-auto', +}); + +const actionsheetFlatListStyle = tva({ + base: 'w-full h-auto', +}); + +const actionsheetSectionListStyle = tva({ + base: 'w-full h-auto', +}); + +const actionsheetSectionHeaderTextStyle = tva({ + base: 'leading-5 font-bold font-heading my-0 text-typography-500 p-3 uppercase', + variants: { + isTruncated: { + true: '', + }, + bold: { + true: 'font-bold', + }, + underline: { + true: 'underline', + }, + strikeThrough: { + true: 'line-through', + }, + size: { + '5xl': 'text-5xl', + '4xl': 'text-4xl', + '3xl': 'text-3xl', + '2xl': 'text-2xl', + 'xl': 'text-xl', + 'lg': 'text-lg', + 'md': 'text-md', + 'sm': 'text-sm', + 'xs': 'text-xs', + }, + + sub: { + true: 'text-xs', + }, + italic: { + true: 'italic', + }, + highlight: { + true: 'bg-yellow500', + }, + }, + defaultVariants: { + size: 'xs', + }, +}); + +const actionsheetIconStyle = tva({ + base: 'text-typography-900', + variants: { + size: { + '2xs': 'h-3 w-3', + 'xs': 'h-3.5 w-3.5', + 'sm': 'h-4 w-4', + 'md': 'w-4 h-4', + 'lg': 'h-5 w-5', + 'xl': 'h-6 w-6', + }, + }, +}); + +type IActionsheetProps = VariantProps & + React.ComponentProps; + +type IActionsheetContentProps = VariantProps & + React.ComponentProps; + +type IActionsheetItemProps = VariantProps & + React.ComponentProps; + +type IActionsheetItemTextProps = VariantProps & + React.ComponentProps; + +type IActionsheetDragIndicatorProps = VariantProps< + typeof actionsheetDragIndicatorStyle +> & + React.ComponentProps; + +type IActionsheetDragIndicatorWrapperProps = VariantProps< + typeof actionsheetDragIndicatorWrapperStyle +> & + React.ComponentProps; + +type IActionsheetBackdropProps = VariantProps & + React.ComponentProps; + +type IActionsheetScrollViewProps = VariantProps< + typeof actionsheetScrollViewStyle +> & + React.ComponentProps; + +type IActionsheetVirtualizedListProps = VariantProps< + typeof actionsheetVirtualizedListStyle +> & + React.ComponentProps; + +type IActionsheetFlatListProps = VariantProps & + React.ComponentProps; + +type IActionsheetSectionListProps = VariantProps< + typeof actionsheetSectionListStyle +> & + React.ComponentProps; + +type IActionsheetSectionHeaderTextProps = VariantProps< + typeof actionsheetSectionHeaderTextStyle +> & + React.ComponentProps; + +type IActionsheetIconProps = VariantProps & + React.ComponentProps; + +const Actionsheet = React.forwardRef( + ({ className, ...props }: IActionsheetProps, ref?: any) => { + return ( + + ); + } +); + +const ActionsheetContent = React.forwardRef( + ( + { className, ...props }: IActionsheetContentProps & { className?: string }, + ref?: any + ) => { + return ( + + ); + } +); + +const ActionsheetItem = React.forwardRef( + ({ className, ...props }: IActionsheetItemProps, ref?: any) => { + return ( + + ); + } +); + +const ActionsheetItemText = React.forwardRef( + ( + { + isTruncated, + bold, + underline, + strikeThrough, + size, + className, + ...props + }: IActionsheetItemTextProps, + ref?: any + ) => { + return ( + + ); + } +); + +const ActionsheetDragIndicator = React.forwardRef( + ({ className, ...props }: IActionsheetDragIndicatorProps, ref?: any) => { + return ( + + ); + } +); + +const ActionsheetDragIndicatorWrapper = React.forwardRef( + ( + { className, ...props }: IActionsheetDragIndicatorWrapperProps, + ref?: any + ) => { + return ( + + ); + } +); + +const ActionsheetBackdrop = React.forwardRef( + ( + { className, ...props }: IActionsheetBackdropProps & { className?: string }, + ref?: any + ) => { + return ( + + ); + } +); + +const ActionsheetScrollView = React.forwardRef( + ({ className, ...props }: IActionsheetScrollViewProps, ref?: any) => { + return ( + + ); + } +); + +const ActionsheetVirtualizedList = React.forwardRef( + ({ className, ...props }: IActionsheetVirtualizedListProps, ref?: any) => { + return ( + + ); + } +); + +const ActionsheetFlatList = React.forwardRef( + ({ className, ...props }: IActionsheetFlatListProps, ref?: any) => { + return ( + + ); + } +); + +const ActionsheetSectionList = React.forwardRef( + ({ className, ...props }: IActionsheetSectionListProps, ref?: any) => { + return ( + + ); + } +); + +const ActionsheetSectionHeaderText = React.forwardRef( + ( + { + className, + isTruncated, + bold, + underline, + strikeThrough, + size, + sub, + italic, + highlight, + ...props + }: IActionsheetSectionHeaderTextProps, + ref?: any + ) => { + return ( + + ); + } +); + +const ActionsheetIcon = React.forwardRef( + ( + { + className, + as: AsComp, + size = 'sm', + ...props + }: IActionsheetIconProps & { as?: any }, + ref?: any + ) => { + if (AsComp) { + return ( + + ); + } + return ( + + ); + } +); + +export { + Actionsheet, + ActionsheetContent, + ActionsheetItem, + ActionsheetItemText, + ActionsheetDragIndicator, + ActionsheetDragIndicatorWrapper, + ActionsheetBackdrop, + ActionsheetScrollView, + ActionsheetVirtualizedList, + ActionsheetFlatList, + ActionsheetSectionList, + ActionsheetSectionHeaderText, + ActionsheetIcon, +}; From 16907db003ff5761b7cedef7a709ac65304e2d53 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Wed, 27 Mar 2024 17:37:19 +0530 Subject: [PATCH 02/78] v1.0.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 62288eb823..bf68556936 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", + "version": "1.0.3", "react-native": "src/index", "source": "src/index", "scripts": { From 2c15639d081f7fccdab62de8d727f811354d65ab Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Wed, 27 Mar 2024 17:37:37 +0530 Subject: [PATCH 03/78] fix: withStates return --- packages/nativewind/utils/withStates/index.js | 2 +- .../nativewind/utils/withStates/index.tsx | 2 +- yarn.lock | 304 ++++++++++++++++++ 3 files changed, 306 insertions(+), 2 deletions(-) diff --git a/packages/nativewind/utils/withStates/index.js b/packages/nativewind/utils/withStates/index.js index a7970d534f..bbf4e6cd9c 100644 --- a/packages/nativewind/utils/withStates/index.js +++ b/packages/nativewind/utils/withStates/index.js @@ -6,7 +6,7 @@ export const withStates = (Component) => React.forwardRef(({ states, className, ...props }, ref) => { const classNamesFinal = React.useMemo(() => { if (!className) return; - extractDataClassName(className, states); + return extractDataClassName(className, states); }, [className, states]); return React.createElement(Component, { className: classNamesFinal, diff --git a/packages/nativewind/utils/withStates/index.tsx b/packages/nativewind/utils/withStates/index.tsx index 7d3ead0bc2..d2b7920c53 100644 --- a/packages/nativewind/utils/withStates/index.tsx +++ b/packages/nativewind/utils/withStates/index.tsx @@ -12,7 +12,7 @@ export const withStates = (Component: React.ComponentType) => ({ states, className, ...props }: T & WithStatesProps, ref?: any) => { const classNamesFinal = React.useMemo(() => { if (!className) return; - extractDataClassName(className, states); + return extractDataClassName(className, states); }, [className, states]); return ( diff --git a/yarn.lock b/yarn.lock index ed482d89f1..59d115be23 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3288,6 +3288,50 @@ dependencies: "@legendapp/motion" "^2.2.0" +"@gluestack-ui/accordion@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@gluestack-ui/accordion/-/accordion-1.0.1.tgz#0ea2b85c1e7351b2238581f12ecc9e27f50a285c" + integrity sha512-CLrsR4jbC3nUJifwtpiWnngi1KIeiaXCQ+D9Pm5F0wSyDTQA8e3EFSAdqAEcz/CVE8OItIiFaIDt288Un/ZQJw== + dependencies: + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/accordion" "^0.0.2" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + +"@gluestack-ui/actionsheet@0.2.37": + version "0.2.37" + resolved "https://registry.yarnpkg.com/@gluestack-ui/actionsheet/-/actionsheet-0.2.37.tgz#79243d1c7089e61cbb00bf2254951d6478449e47" + integrity sha512-3X7KaIMyGCImQmz7MNQyOY7Or87NRYDjos7KF76Gla8jqapTfheB+5UNtLm6PbexjV/8B3Y8lFZhyk4+qmxvzA== + dependencies: + "@gluestack-ui/hooks" "0.1.11" + "@gluestack-ui/overlay" "^0.1.12" + "@gluestack-ui/transitions" "^0.1.10" + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/dialog" "^0.0.3" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + +"@gluestack-ui/alert-dialog@0.1.25": + version "0.1.25" + resolved "https://registry.yarnpkg.com/@gluestack-ui/alert-dialog/-/alert-dialog-0.1.25.tgz#6cd3e53accd636cbb1a67a6184727ac3e7d9b1d3" + integrity sha512-q7bQmxCnQK4OvHqrVizNOhWh6Pdw63PVmnZ6DeUA6EQn4Jmzqw3WcWEAOWgKRXjilU2frWZIGPebFx5AeNzOSw== + dependencies: + "@gluestack-ui/hooks" "0.1.11" + "@gluestack-ui/overlay" "^0.1.12" + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/dialog" "^0.0.3" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + +"@gluestack-ui/button@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@gluestack-ui/button/-/button-1.0.1.tgz#8ed481ff292e743ff11a4a512665f08a3c971635" + integrity sha512-49jqhA2GIK55OGQOIFVD4P4cz+UJ/IzeBfQTmYUrbEvgJMoa8UOdWiA7FPSOJVs6b6cF6HqziLsZTycvpnlnNg== + dependencies: + "@gluestack-ui/utils" "0.1.12" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + "@gluestack-ui/button@^0.1.15": version "0.1.34" resolved "https://registry.yarnpkg.com/@gluestack-ui/button/-/button-0.1.34.tgz#f635aba6a9023d153f5dd82cd96a3785b6244951" @@ -3297,6 +3341,186 @@ "@react-native-aria/focus" "^0.2.9" "@react-native-aria/interactions" "^0.2.11" +"@gluestack-ui/checkbox@0.1.24": + version "0.1.24" + resolved "https://registry.yarnpkg.com/@gluestack-ui/checkbox/-/checkbox-0.1.24.tgz#00cee083e0f9c6636a29c125d85a4bbecd56176f" + integrity sha512-r1W3M6IO86YkrwTUv0bWxquM+Rpmjw0BDWehH7YMDPnyuoU5UBjGRAg8VfE3RdjIsPfLVoeUztWCLqqu6TMlmg== + dependencies: + "@gluestack-ui/form-control" "^0.1.16" + "@gluestack-ui/utils" "^0.1.12" + "@react-aria/visually-hidden" "^3.8.6" + "@react-native-aria/checkbox" "^0.2.6" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/utils" "^0.2.10" + "@react-stately/checkbox" "^3.4.2" + +"@gluestack-ui/fab@0.1.18": + version "0.1.18" + resolved "https://registry.yarnpkg.com/@gluestack-ui/fab/-/fab-0.1.18.tgz#12401fa2fe9bb77efc480c46779d3f0036a45c45" + integrity sha512-uOBTRk7C/N27WyprLtmADPL+8XF31TDEF9S/z/HM2OE2SujuoMG477MNrgrm40SAvad7jePDNv4QRcqVuGxnkA== + dependencies: + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + +"@gluestack-ui/image@0.1.7": + version "0.1.7" + resolved "https://registry.yarnpkg.com/@gluestack-ui/image/-/image-0.1.7.tgz#0cb2be72fd16a6a5d10aa850b9506f308330a901" + integrity sha512-ITfDX7gyxab+w0EMmJdITgG7EB2oF/3MfYgsFBV//VmIlu3OJg2xvnwvYzq3kNdGqr5Nt/5ZEG2ime7Kx2Wmxw== + dependencies: + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + +"@gluestack-ui/input@0.1.24": + version "0.1.24" + resolved "https://registry.yarnpkg.com/@gluestack-ui/input/-/input-0.1.24.tgz#5a59d56d74a597c331013047f2b7e814c02307d6" + integrity sha512-5G/XzLzWX7d2XFqLGqN9VHUO/65JoX8kghXBrQA1V0W10NM0abAqiuz4D6mZJjWAJc57me1ob04pG1WsmELbvA== + dependencies: + "@gluestack-ui/form-control" "^0.1.16" + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + +"@gluestack-ui/link@0.1.17": + version "0.1.17" + resolved "https://registry.yarnpkg.com/@gluestack-ui/link/-/link-0.1.17.tgz#64dbd4086ec08702056a73d4485d9ccee5d28056" + integrity sha512-Lzolq6LNz401qOpetMpoK2Rc/enpHucwgZtMRX4SnP9DV6vOsCAAIyBrLsCkCxN5JicdteVpPyZpoljExkACLQ== + dependencies: + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + +"@gluestack-ui/menu@0.2.30": + version "0.2.30" + resolved "https://registry.yarnpkg.com/@gluestack-ui/menu/-/menu-0.2.30.tgz#83b9844ec01e8f23e08b0a4ae1c69d3a21fde59e" + integrity sha512-DxKnVPLinzfCLUftG3ek0yx+8FP5oF1QPDtd62YhmrL/4ybUTMQtDDsg8GIjrjL+kgUHvt0bofsQfwD897lmLg== + dependencies: + "@gluestack-ui/hooks" "0.1.11" + "@gluestack-ui/overlay" "^0.1.12" + "@gluestack-ui/utils" "^0.1.12" + "@react-aria/overlays" "^3.19.0" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/menu" "0.2.10" + "@react-native-aria/overlays" "^0.3.10" + "@react-stately/utils" "^3.6.0" + react-stately "^3.21.0" + +"@gluestack-ui/modal@0.1.29": + version "0.1.29" + resolved "https://registry.yarnpkg.com/@gluestack-ui/modal/-/modal-0.1.29.tgz#5544f82579b34cd98635ba0a54be57f1e1e4c448" + integrity sha512-zPkdvUyuvWmolVtmCpgCCzLOcBuR7Xur6ugQflv4JQVN6l/NSfcBfh9mXBAUAuK2h6leo02abrURFjneXfBP+Q== + dependencies: + "@gluestack-ui/hooks" "0.1.11" + "@gluestack-ui/overlay" "^0.1.12" + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/dialog" "^0.0.3" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/overlays" "^0.3.10" + +"@gluestack-ui/overlay@0.1.12": + version "0.1.12" + resolved "https://registry.yarnpkg.com/@gluestack-ui/overlay/-/overlay-0.1.12.tgz#b8d373875e0cf8e1bbc244dfafdcbb76525fa424" + integrity sha512-rENETe40IRIrFW7rQKBsVotJ0J7DxTmY4xZGyMM/dct6TXnnZa2vIE+mqOK0CQs3cEIWypvDrQrJ0mHWHK1xig== + dependencies: + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/overlays" "^0.3.10" + +"@gluestack-ui/popover@0.1.32": + version "0.1.32" + resolved "https://registry.yarnpkg.com/@gluestack-ui/popover/-/popover-0.1.32.tgz#bfd989fd3957b23b0ff46827b371f28b91c7fe76" + integrity sha512-oXQMQfoARmVRjiqA2wbskfpv8FXRVBWw0MbApXcYHZGQoN1QkxM/ufqqCQdAhAM1xrI4SfrK4p9gr/hWQEVwoA== + dependencies: + "@gluestack-ui/hooks" "0.1.11" + "@gluestack-ui/overlay" "^0.1.12" + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/dialog" "^0.0.3" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/overlays" "^0.3.11" + +"@gluestack-ui/pressable@0.1.14": + version "0.1.14" + resolved "https://registry.yarnpkg.com/@gluestack-ui/pressable/-/pressable-0.1.14.tgz#87979f896a66fd14edb699df2e2b7260f2e463ea" + integrity sha512-SaGpalVO//RLpFFGibYBr+54tzcB8nUby4qBNvL2KGx+9HyMrMJFf75ov2aTqpXDrhEmtc8W4oRHd3fldvJIgw== + dependencies: + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + +"@gluestack-ui/provider@0.1.10": + version "0.1.10" + resolved "https://registry.yarnpkg.com/@gluestack-ui/provider/-/provider-0.1.10.tgz#552c4da52f99cb300ef10cde5f830e27a52189b4" + integrity sha512-zAfwQM3AUETLL8Br1GUAsnOdn1RhF/Acd33DawbfFSH9GS/RXtgAgt/Fkh7ANirIxCAYmg5z8G9EN+egIbyuwA== + dependencies: + "@react-native-aria/interactions" "^0.2.10" + tsconfig "7" + typescript "^4.9.4" + +"@gluestack-ui/radio@0.1.25": + version "0.1.25" + resolved "https://registry.yarnpkg.com/@gluestack-ui/radio/-/radio-0.1.25.tgz#3c4e7277cd9c2a2166ce8f7342f29226408aa443" + integrity sha512-Rl/5SW6bpT0n8P38G9IWp4/T5E1Ss8+Xct9jbXOsQyowJcH5Vh4P5pZ5eLh7qC9oLMJKwQMXKc921jUNCpcPXw== + dependencies: + "@gluestack-ui/form-control" "^0.1.16" + "@gluestack-ui/utils" "^0.1.12" + "@react-aria/visually-hidden" "^3.7.0" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/radio" "^0.2.7" + "@react-stately/radio" "^3.8.1" + +"@gluestack-ui/range-slider@0.1.1": + version "0.1.1" + resolved "https://registry.yarnpkg.com/@gluestack-ui/range-slider/-/range-slider-0.1.1.tgz#8211422f56484020db1f860afe99f5b2420a33b5" + integrity sha512-JJ8EIMW2uczwNpahGhKwZQ0RA+CYVcvBNCgwfNZlHcNAVE0VDqlQe+wcxms4ijoq4c5zDB+YCA1AMquZe4RMOw== + dependencies: + "@gluestack-ui/form-control" "^0.1.14" + "@gluestack-ui/hooks" "0.1.11" + "@gluestack-ui/utils" "^0.1.12" + "@react-aria/visually-hidden" "^3.8.1" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/slider" "^0.2.10" + "@react-stately/slider" "^3.2.4" + +"@gluestack-ui/select@0.1.24": + version "0.1.24" + resolved "https://registry.yarnpkg.com/@gluestack-ui/select/-/select-0.1.24.tgz#5ea4f0929c4d048c5a853b974ba1afa34b46dcbe" + integrity sha512-iCDH0aoGYz2ymVbn0nnjynyQ1L+mV0YFOUc16gS+DTgfjSrXdjTSYwC0vI3fAoG+Sq30il08A+Y2vuYQHTflZg== + dependencies: + "@gluestack-ui/form-control" "^0.1.16" + "@gluestack-ui/hooks" "0.1.11" + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/focus" "^0.2.9" + +"@gluestack-ui/slider@0.1.21": + version "0.1.21" + resolved "https://registry.yarnpkg.com/@gluestack-ui/slider/-/slider-0.1.21.tgz#a7848b1b322a703dbd3eb2f3d2794c24653bf460" + integrity sha512-OZlMgzLnQllXylwpAzz99Bm4XLp9IQH3R+jE3nANIPLNV9DnJUGckCIbXnoarTqUk+F+8Q0xFVb9bSLF9ujAUQ== + dependencies: + "@gluestack-ui/form-control" "^0.1.16" + "@gluestack-ui/hooks" "0.1.11" + "@gluestack-ui/utils" "^0.1.12" + "@react-aria/visually-hidden" "^3.8.1" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/slider" "^0.2.10" + "@react-stately/slider" "^3.2.4" + +"@gluestack-ui/switch@0.1.19": + version "0.1.19" + resolved "https://registry.yarnpkg.com/@gluestack-ui/switch/-/switch-0.1.19.tgz#e8a615fd865082e22e531dc83e9712bc166881c7" + integrity sha512-abfFqpvQOF+ZYS516FGtiabxbxYE8edMRL1uFJ3LTCCU6cQ0xikAxajAZmc9mp8AWHmNHsAmuKPxjNLY3dTSsQ== + dependencies: + "@gluestack-ui/form-control" "^0.1.16" + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + "@react-stately/toggle" "^3.4.4" + "@gluestack-ui/tabs@0.1.14": version "0.1.14" resolved "https://registry.yarnpkg.com/@gluestack-ui/tabs/-/tabs-0.1.14.tgz#5bcb5cc659927cde08f8e32497830257ed5cba4f" @@ -3306,6 +3530,47 @@ "@react-native-aria/focus" "^0.2.9" "@react-native-aria/interactions" "^0.2.11" +"@gluestack-ui/themed@1.1.17": + version "1.1.17" + resolved "https://registry.yarnpkg.com/@gluestack-ui/themed/-/themed-1.1.17.tgz#44aa07a055ccd06adc9a02d1f1ab7a78977a9ef1" + integrity sha512-TIFCxWH4jjo31qWRTmijsG6rBClAZ9r8oolQGKOVfdEC9/SNIbRNFlyqnVWmOpLf4XnhKp1XNkiD6rtf4VEO5Q== + dependencies: + "@expo/html-elements" latest + "@gluestack-style/animation-resolver" "1.0.4" + "@gluestack-style/legend-motion-animation-driver" "1.0.3" + "@gluestack-ui/accordion" "1.0.1" + "@gluestack-ui/actionsheet" "0.2.37" + "@gluestack-ui/alert" "0.1.12" + "@gluestack-ui/alert-dialog" "0.1.25" + "@gluestack-ui/avatar" "0.1.15" + "@gluestack-ui/button" "1.0.1" + "@gluestack-ui/checkbox" "0.1.24" + "@gluestack-ui/divider" "0.1.8" + "@gluestack-ui/fab" "0.1.18" + "@gluestack-ui/form-control" "0.1.16" + "@gluestack-ui/icon" "0.1.20" + "@gluestack-ui/image" "0.1.7" + "@gluestack-ui/input" "0.1.24" + "@gluestack-ui/link" "0.1.17" + "@gluestack-ui/menu" "0.2.30" + "@gluestack-ui/modal" "0.1.29" + "@gluestack-ui/overlay" "0.1.12" + "@gluestack-ui/popover" "0.1.32" + "@gluestack-ui/pressable" "0.1.14" + "@gluestack-ui/progress" "0.1.13" + "@gluestack-ui/provider" "0.1.10" + "@gluestack-ui/radio" "0.1.25" + "@gluestack-ui/range-slider" "0.1.1" + "@gluestack-ui/select" "0.1.24" + "@gluestack-ui/slider" "0.1.21" + "@gluestack-ui/spinner" "0.1.14" + "@gluestack-ui/switch" "0.1.19" + "@gluestack-ui/tabs" "0.1.14" + "@gluestack-ui/textarea" "0.1.20" + "@gluestack-ui/toast" "1.0.4" + "@gluestack-ui/tooltip" "0.1.26" + "@legendapp/motion" latest + "@gluestack-ui/toast@^0.1.7": version "0.1.20" resolved "https://registry.yarnpkg.com/@gluestack-ui/toast/-/toast-0.1.20.tgz#863453f75d2e941000204a9524161bfd2500e320" @@ -3317,6 +3582,18 @@ "@gluestack-ui/utils" "^0.1.12" "@react-native-aria/focus" "^0.2.9" +"@gluestack-ui/tooltip@0.1.26": + version "0.1.26" + resolved "https://registry.yarnpkg.com/@gluestack-ui/tooltip/-/tooltip-0.1.26.tgz#bcd9df436ae00cb335790b0067f506c396cfbbf2" + integrity sha512-3QHLV4T3Thfo7pkjmZzS051jf4pVguiR28kpCoj7/vsBxnFo3jT6VNv7cVUy9rVvB2lh1EKZyb33THB0DmEeeg== + dependencies: + "@gluestack-ui/hooks" "0.1.11" + "@gluestack-ui/overlay" "^0.1.12" + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/overlays" "^0.3.10" + "@gluestack/design-system@0.5.36", "@gluestack/design-system@^0.5.36": version "0.5.36" resolved "https://registry.yarnpkg.com/@gluestack/design-system/-/design-system-0.5.36.tgz#ee9c6a1dc3d0806eda5bd5781b58c3e8b3621dcf" @@ -5304,6 +5581,33 @@ "@react-native-aria/utils" "^0.2.10" "@react-stately/toggle" "^3.2.1" +"@react-native-aria/dialog@^0.0.3": + version "0.0.3" + resolved "https://registry.yarnpkg.com/@react-native-aria/dialog/-/dialog-0.0.3.tgz#62388983268f6a6c3a5cfa06c3eaccb996112009" + integrity sha512-EXDS2IfB6n8LlelfMZjMntuHC7e6iRTWLxrYIyHm5d2gdmRVD37dris03Zsw/iMBhb/Z8ZYKQ/O5APioN6Uovg== + dependencies: + "@react-aria/dialog" "*" + "@react-native-aria/utils" "*" + "@react-types/dialog" "*" + "@react-types/shared" "*" + +"@react-native-aria/menu@0.2.10": + version "0.2.10" + resolved "https://registry.yarnpkg.com/@react-native-aria/menu/-/menu-0.2.10.tgz#3571be206fbebafc422f6438e553fa3dddaf25e4" + integrity sha512-oQeArGeN91zpmA4aXX2eNLQLOJBb1fm5YiFtcmZAVp1rC7yZp1ys/RWX4AHEHhOsd148+sZnQ8B0fxcxV/bOoQ== + dependencies: + "@react-aria/interactions" "^3.3.2" + "@react-aria/menu" "^3.1.3" + "@react-aria/selection" "^3.3.1" + "@react-aria/utils" "^3.6.0" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/overlays" "^0.3.10" + "@react-native-aria/utils" "^0.2.10" + "@react-stately/collections" "^3.3.0" + "@react-stately/menu" "^3.2.1" + "@react-stately/tree" "^3.1.2" + "@react-types/menu" "^3.1.1" + "@react-native-async-storage/async-storage@~1.17.3": version "1.17.12" resolved "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.17.12.tgz" From 2ffdc2869970ec94d7d63e16f09bb3591a7beb83 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Wed, 27 Mar 2024 18:20:05 +0530 Subject: [PATCH 04/78] fix: added scope to context --- packages/nativewind/utils/context/index.ts | 2 +- .../utils/withStyleContext/index.tsx | 21 +- .../utils/withStyleContextAndStates/index.tsx | 22 +- yarn.lock | 304 ++++++++++++++++++ 4 files changed, 341 insertions(+), 8 deletions(-) diff --git a/packages/nativewind/utils/context/index.ts b/packages/nativewind/utils/context/index.ts index e4ff2de092..4151e67131 100644 --- a/packages/nativewind/utils/context/index.ts +++ b/packages/nativewind/utils/context/index.ts @@ -2,6 +2,6 @@ import { createContext, useContext } from 'react'; export const ParentContext = createContext({}); -export const useStyleContext = () => { +export const useParentContext = () => { return useContext(ParentContext) as any; }; diff --git a/packages/nativewind/utils/withStyleContext/index.tsx b/packages/nativewind/utils/withStyleContext/index.tsx index 6f99c63466..c0d5d5f2c0 100644 --- a/packages/nativewind/utils/withStyleContext/index.tsx +++ b/packages/nativewind/utils/withStyleContext/index.tsx @@ -1,21 +1,34 @@ 'use client'; import React from 'react'; import { ParentContext } from '../context'; -export { useStyleContext } from '../context'; - +import { useParentContext } from '../context'; type WithStyleContextProps = { context?: any; }; export const withStyleContext = ( - Component: React.ComponentType + Component: React.ComponentType, + scope: string ) => { return React.forwardRef( ({ context, ...props }: T & WithStyleContextProps, ref?: any) => { + let contextValues = {}; + const parentContextValues = useParentContext(); + if (parentContextValues[scope] !== undefined) { + parentContextValues[scope] = context; + contextValues = parentContextValues; + } else { + contextValues = { ...parentContextValues, [scope]: context }; + } return ( - + ); } ); }; + +export const useStyleContext = (scope: string) => { + const parentContextValues = useParentContext(); + return parentContextValues[scope]; +}; diff --git a/packages/nativewind/utils/withStyleContextAndStates/index.tsx b/packages/nativewind/utils/withStyleContextAndStates/index.tsx index 91838c64d5..ce9625b0df 100644 --- a/packages/nativewind/utils/withStyleContextAndStates/index.tsx +++ b/packages/nativewind/utils/withStyleContextAndStates/index.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { extractDataClassName } from '../utils'; import { ParentContext } from '../context'; -export { useStyleContext } from '../context'; +import { useParentContext } from '../context'; type WithStyleContextProps = { context?: any; @@ -11,19 +11,30 @@ type WithStyleContextProps = { }; export const withStyleContextAndStates = ( - Component: React.ComponentType + Component: React.ComponentType, + scope: string ) => { return React.forwardRef( ( { context, className, states, ...props }: T & WithStyleContextProps, ref?: any ) => { + let contextValues = {}; + const parentContextValues = useParentContext(); + if (parentContextValues[scope] !== undefined) { + parentContextValues[scope] = context; + contextValues = parentContextValues; + } else { + contextValues = { ...parentContextValues, [scope]: context }; + } + const classNamesFinal = React.useMemo(() => { if (!className) return; return extractDataClassName(className, states); }, [className, states]); + return ( - + ( } ); }; + +export const useStyleContext = (scope: string) => { + const parentContextValues = useParentContext(); + return parentContextValues[scope]; +}; diff --git a/yarn.lock b/yarn.lock index ed482d89f1..59d115be23 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3288,6 +3288,50 @@ dependencies: "@legendapp/motion" "^2.2.0" +"@gluestack-ui/accordion@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@gluestack-ui/accordion/-/accordion-1.0.1.tgz#0ea2b85c1e7351b2238581f12ecc9e27f50a285c" + integrity sha512-CLrsR4jbC3nUJifwtpiWnngi1KIeiaXCQ+D9Pm5F0wSyDTQA8e3EFSAdqAEcz/CVE8OItIiFaIDt288Un/ZQJw== + dependencies: + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/accordion" "^0.0.2" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + +"@gluestack-ui/actionsheet@0.2.37": + version "0.2.37" + resolved "https://registry.yarnpkg.com/@gluestack-ui/actionsheet/-/actionsheet-0.2.37.tgz#79243d1c7089e61cbb00bf2254951d6478449e47" + integrity sha512-3X7KaIMyGCImQmz7MNQyOY7Or87NRYDjos7KF76Gla8jqapTfheB+5UNtLm6PbexjV/8B3Y8lFZhyk4+qmxvzA== + dependencies: + "@gluestack-ui/hooks" "0.1.11" + "@gluestack-ui/overlay" "^0.1.12" + "@gluestack-ui/transitions" "^0.1.10" + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/dialog" "^0.0.3" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + +"@gluestack-ui/alert-dialog@0.1.25": + version "0.1.25" + resolved "https://registry.yarnpkg.com/@gluestack-ui/alert-dialog/-/alert-dialog-0.1.25.tgz#6cd3e53accd636cbb1a67a6184727ac3e7d9b1d3" + integrity sha512-q7bQmxCnQK4OvHqrVizNOhWh6Pdw63PVmnZ6DeUA6EQn4Jmzqw3WcWEAOWgKRXjilU2frWZIGPebFx5AeNzOSw== + dependencies: + "@gluestack-ui/hooks" "0.1.11" + "@gluestack-ui/overlay" "^0.1.12" + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/dialog" "^0.0.3" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + +"@gluestack-ui/button@1.0.1": + version "1.0.1" + resolved "https://registry.yarnpkg.com/@gluestack-ui/button/-/button-1.0.1.tgz#8ed481ff292e743ff11a4a512665f08a3c971635" + integrity sha512-49jqhA2GIK55OGQOIFVD4P4cz+UJ/IzeBfQTmYUrbEvgJMoa8UOdWiA7FPSOJVs6b6cF6HqziLsZTycvpnlnNg== + dependencies: + "@gluestack-ui/utils" "0.1.12" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + "@gluestack-ui/button@^0.1.15": version "0.1.34" resolved "https://registry.yarnpkg.com/@gluestack-ui/button/-/button-0.1.34.tgz#f635aba6a9023d153f5dd82cd96a3785b6244951" @@ -3297,6 +3341,186 @@ "@react-native-aria/focus" "^0.2.9" "@react-native-aria/interactions" "^0.2.11" +"@gluestack-ui/checkbox@0.1.24": + version "0.1.24" + resolved "https://registry.yarnpkg.com/@gluestack-ui/checkbox/-/checkbox-0.1.24.tgz#00cee083e0f9c6636a29c125d85a4bbecd56176f" + integrity sha512-r1W3M6IO86YkrwTUv0bWxquM+Rpmjw0BDWehH7YMDPnyuoU5UBjGRAg8VfE3RdjIsPfLVoeUztWCLqqu6TMlmg== + dependencies: + "@gluestack-ui/form-control" "^0.1.16" + "@gluestack-ui/utils" "^0.1.12" + "@react-aria/visually-hidden" "^3.8.6" + "@react-native-aria/checkbox" "^0.2.6" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/utils" "^0.2.10" + "@react-stately/checkbox" "^3.4.2" + +"@gluestack-ui/fab@0.1.18": + version "0.1.18" + resolved "https://registry.yarnpkg.com/@gluestack-ui/fab/-/fab-0.1.18.tgz#12401fa2fe9bb77efc480c46779d3f0036a45c45" + integrity sha512-uOBTRk7C/N27WyprLtmADPL+8XF31TDEF9S/z/HM2OE2SujuoMG477MNrgrm40SAvad7jePDNv4QRcqVuGxnkA== + dependencies: + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + +"@gluestack-ui/image@0.1.7": + version "0.1.7" + resolved "https://registry.yarnpkg.com/@gluestack-ui/image/-/image-0.1.7.tgz#0cb2be72fd16a6a5d10aa850b9506f308330a901" + integrity sha512-ITfDX7gyxab+w0EMmJdITgG7EB2oF/3MfYgsFBV//VmIlu3OJg2xvnwvYzq3kNdGqr5Nt/5ZEG2ime7Kx2Wmxw== + dependencies: + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + +"@gluestack-ui/input@0.1.24": + version "0.1.24" + resolved "https://registry.yarnpkg.com/@gluestack-ui/input/-/input-0.1.24.tgz#5a59d56d74a597c331013047f2b7e814c02307d6" + integrity sha512-5G/XzLzWX7d2XFqLGqN9VHUO/65JoX8kghXBrQA1V0W10NM0abAqiuz4D6mZJjWAJc57me1ob04pG1WsmELbvA== + dependencies: + "@gluestack-ui/form-control" "^0.1.16" + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + +"@gluestack-ui/link@0.1.17": + version "0.1.17" + resolved "https://registry.yarnpkg.com/@gluestack-ui/link/-/link-0.1.17.tgz#64dbd4086ec08702056a73d4485d9ccee5d28056" + integrity sha512-Lzolq6LNz401qOpetMpoK2Rc/enpHucwgZtMRX4SnP9DV6vOsCAAIyBrLsCkCxN5JicdteVpPyZpoljExkACLQ== + dependencies: + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + +"@gluestack-ui/menu@0.2.30": + version "0.2.30" + resolved "https://registry.yarnpkg.com/@gluestack-ui/menu/-/menu-0.2.30.tgz#83b9844ec01e8f23e08b0a4ae1c69d3a21fde59e" + integrity sha512-DxKnVPLinzfCLUftG3ek0yx+8FP5oF1QPDtd62YhmrL/4ybUTMQtDDsg8GIjrjL+kgUHvt0bofsQfwD897lmLg== + dependencies: + "@gluestack-ui/hooks" "0.1.11" + "@gluestack-ui/overlay" "^0.1.12" + "@gluestack-ui/utils" "^0.1.12" + "@react-aria/overlays" "^3.19.0" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/menu" "0.2.10" + "@react-native-aria/overlays" "^0.3.10" + "@react-stately/utils" "^3.6.0" + react-stately "^3.21.0" + +"@gluestack-ui/modal@0.1.29": + version "0.1.29" + resolved "https://registry.yarnpkg.com/@gluestack-ui/modal/-/modal-0.1.29.tgz#5544f82579b34cd98635ba0a54be57f1e1e4c448" + integrity sha512-zPkdvUyuvWmolVtmCpgCCzLOcBuR7Xur6ugQflv4JQVN6l/NSfcBfh9mXBAUAuK2h6leo02abrURFjneXfBP+Q== + dependencies: + "@gluestack-ui/hooks" "0.1.11" + "@gluestack-ui/overlay" "^0.1.12" + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/dialog" "^0.0.3" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/overlays" "^0.3.10" + +"@gluestack-ui/overlay@0.1.12": + version "0.1.12" + resolved "https://registry.yarnpkg.com/@gluestack-ui/overlay/-/overlay-0.1.12.tgz#b8d373875e0cf8e1bbc244dfafdcbb76525fa424" + integrity sha512-rENETe40IRIrFW7rQKBsVotJ0J7DxTmY4xZGyMM/dct6TXnnZa2vIE+mqOK0CQs3cEIWypvDrQrJ0mHWHK1xig== + dependencies: + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/overlays" "^0.3.10" + +"@gluestack-ui/popover@0.1.32": + version "0.1.32" + resolved "https://registry.yarnpkg.com/@gluestack-ui/popover/-/popover-0.1.32.tgz#bfd989fd3957b23b0ff46827b371f28b91c7fe76" + integrity sha512-oXQMQfoARmVRjiqA2wbskfpv8FXRVBWw0MbApXcYHZGQoN1QkxM/ufqqCQdAhAM1xrI4SfrK4p9gr/hWQEVwoA== + dependencies: + "@gluestack-ui/hooks" "0.1.11" + "@gluestack-ui/overlay" "^0.1.12" + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/dialog" "^0.0.3" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/overlays" "^0.3.11" + +"@gluestack-ui/pressable@0.1.14": + version "0.1.14" + resolved "https://registry.yarnpkg.com/@gluestack-ui/pressable/-/pressable-0.1.14.tgz#87979f896a66fd14edb699df2e2b7260f2e463ea" + integrity sha512-SaGpalVO//RLpFFGibYBr+54tzcB8nUby4qBNvL2KGx+9HyMrMJFf75ov2aTqpXDrhEmtc8W4oRHd3fldvJIgw== + dependencies: + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + +"@gluestack-ui/provider@0.1.10": + version "0.1.10" + resolved "https://registry.yarnpkg.com/@gluestack-ui/provider/-/provider-0.1.10.tgz#552c4da52f99cb300ef10cde5f830e27a52189b4" + integrity sha512-zAfwQM3AUETLL8Br1GUAsnOdn1RhF/Acd33DawbfFSH9GS/RXtgAgt/Fkh7ANirIxCAYmg5z8G9EN+egIbyuwA== + dependencies: + "@react-native-aria/interactions" "^0.2.10" + tsconfig "7" + typescript "^4.9.4" + +"@gluestack-ui/radio@0.1.25": + version "0.1.25" + resolved "https://registry.yarnpkg.com/@gluestack-ui/radio/-/radio-0.1.25.tgz#3c4e7277cd9c2a2166ce8f7342f29226408aa443" + integrity sha512-Rl/5SW6bpT0n8P38G9IWp4/T5E1Ss8+Xct9jbXOsQyowJcH5Vh4P5pZ5eLh7qC9oLMJKwQMXKc921jUNCpcPXw== + dependencies: + "@gluestack-ui/form-control" "^0.1.16" + "@gluestack-ui/utils" "^0.1.12" + "@react-aria/visually-hidden" "^3.7.0" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/radio" "^0.2.7" + "@react-stately/radio" "^3.8.1" + +"@gluestack-ui/range-slider@0.1.1": + version "0.1.1" + resolved "https://registry.yarnpkg.com/@gluestack-ui/range-slider/-/range-slider-0.1.1.tgz#8211422f56484020db1f860afe99f5b2420a33b5" + integrity sha512-JJ8EIMW2uczwNpahGhKwZQ0RA+CYVcvBNCgwfNZlHcNAVE0VDqlQe+wcxms4ijoq4c5zDB+YCA1AMquZe4RMOw== + dependencies: + "@gluestack-ui/form-control" "^0.1.14" + "@gluestack-ui/hooks" "0.1.11" + "@gluestack-ui/utils" "^0.1.12" + "@react-aria/visually-hidden" "^3.8.1" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/slider" "^0.2.10" + "@react-stately/slider" "^3.2.4" + +"@gluestack-ui/select@0.1.24": + version "0.1.24" + resolved "https://registry.yarnpkg.com/@gluestack-ui/select/-/select-0.1.24.tgz#5ea4f0929c4d048c5a853b974ba1afa34b46dcbe" + integrity sha512-iCDH0aoGYz2ymVbn0nnjynyQ1L+mV0YFOUc16gS+DTgfjSrXdjTSYwC0vI3fAoG+Sq30il08A+Y2vuYQHTflZg== + dependencies: + "@gluestack-ui/form-control" "^0.1.16" + "@gluestack-ui/hooks" "0.1.11" + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/focus" "^0.2.9" + +"@gluestack-ui/slider@0.1.21": + version "0.1.21" + resolved "https://registry.yarnpkg.com/@gluestack-ui/slider/-/slider-0.1.21.tgz#a7848b1b322a703dbd3eb2f3d2794c24653bf460" + integrity sha512-OZlMgzLnQllXylwpAzz99Bm4XLp9IQH3R+jE3nANIPLNV9DnJUGckCIbXnoarTqUk+F+8Q0xFVb9bSLF9ujAUQ== + dependencies: + "@gluestack-ui/form-control" "^0.1.16" + "@gluestack-ui/hooks" "0.1.11" + "@gluestack-ui/utils" "^0.1.12" + "@react-aria/visually-hidden" "^3.8.1" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/slider" "^0.2.10" + "@react-stately/slider" "^3.2.4" + +"@gluestack-ui/switch@0.1.19": + version "0.1.19" + resolved "https://registry.yarnpkg.com/@gluestack-ui/switch/-/switch-0.1.19.tgz#e8a615fd865082e22e531dc83e9712bc166881c7" + integrity sha512-abfFqpvQOF+ZYS516FGtiabxbxYE8edMRL1uFJ3LTCCU6cQ0xikAxajAZmc9mp8AWHmNHsAmuKPxjNLY3dTSsQ== + dependencies: + "@gluestack-ui/form-control" "^0.1.16" + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + "@react-stately/toggle" "^3.4.4" + "@gluestack-ui/tabs@0.1.14": version "0.1.14" resolved "https://registry.yarnpkg.com/@gluestack-ui/tabs/-/tabs-0.1.14.tgz#5bcb5cc659927cde08f8e32497830257ed5cba4f" @@ -3306,6 +3530,47 @@ "@react-native-aria/focus" "^0.2.9" "@react-native-aria/interactions" "^0.2.11" +"@gluestack-ui/themed@1.1.17": + version "1.1.17" + resolved "https://registry.yarnpkg.com/@gluestack-ui/themed/-/themed-1.1.17.tgz#44aa07a055ccd06adc9a02d1f1ab7a78977a9ef1" + integrity sha512-TIFCxWH4jjo31qWRTmijsG6rBClAZ9r8oolQGKOVfdEC9/SNIbRNFlyqnVWmOpLf4XnhKp1XNkiD6rtf4VEO5Q== + dependencies: + "@expo/html-elements" latest + "@gluestack-style/animation-resolver" "1.0.4" + "@gluestack-style/legend-motion-animation-driver" "1.0.3" + "@gluestack-ui/accordion" "1.0.1" + "@gluestack-ui/actionsheet" "0.2.37" + "@gluestack-ui/alert" "0.1.12" + "@gluestack-ui/alert-dialog" "0.1.25" + "@gluestack-ui/avatar" "0.1.15" + "@gluestack-ui/button" "1.0.1" + "@gluestack-ui/checkbox" "0.1.24" + "@gluestack-ui/divider" "0.1.8" + "@gluestack-ui/fab" "0.1.18" + "@gluestack-ui/form-control" "0.1.16" + "@gluestack-ui/icon" "0.1.20" + "@gluestack-ui/image" "0.1.7" + "@gluestack-ui/input" "0.1.24" + "@gluestack-ui/link" "0.1.17" + "@gluestack-ui/menu" "0.2.30" + "@gluestack-ui/modal" "0.1.29" + "@gluestack-ui/overlay" "0.1.12" + "@gluestack-ui/popover" "0.1.32" + "@gluestack-ui/pressable" "0.1.14" + "@gluestack-ui/progress" "0.1.13" + "@gluestack-ui/provider" "0.1.10" + "@gluestack-ui/radio" "0.1.25" + "@gluestack-ui/range-slider" "0.1.1" + "@gluestack-ui/select" "0.1.24" + "@gluestack-ui/slider" "0.1.21" + "@gluestack-ui/spinner" "0.1.14" + "@gluestack-ui/switch" "0.1.19" + "@gluestack-ui/tabs" "0.1.14" + "@gluestack-ui/textarea" "0.1.20" + "@gluestack-ui/toast" "1.0.4" + "@gluestack-ui/tooltip" "0.1.26" + "@legendapp/motion" latest + "@gluestack-ui/toast@^0.1.7": version "0.1.20" resolved "https://registry.yarnpkg.com/@gluestack-ui/toast/-/toast-0.1.20.tgz#863453f75d2e941000204a9524161bfd2500e320" @@ -3317,6 +3582,18 @@ "@gluestack-ui/utils" "^0.1.12" "@react-native-aria/focus" "^0.2.9" +"@gluestack-ui/tooltip@0.1.26": + version "0.1.26" + resolved "https://registry.yarnpkg.com/@gluestack-ui/tooltip/-/tooltip-0.1.26.tgz#bcd9df436ae00cb335790b0067f506c396cfbbf2" + integrity sha512-3QHLV4T3Thfo7pkjmZzS051jf4pVguiR28kpCoj7/vsBxnFo3jT6VNv7cVUy9rVvB2lh1EKZyb33THB0DmEeeg== + dependencies: + "@gluestack-ui/hooks" "0.1.11" + "@gluestack-ui/overlay" "^0.1.12" + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/overlays" "^0.3.10" + "@gluestack/design-system@0.5.36", "@gluestack/design-system@^0.5.36": version "0.5.36" resolved "https://registry.yarnpkg.com/@gluestack/design-system/-/design-system-0.5.36.tgz#ee9c6a1dc3d0806eda5bd5781b58c3e8b3621dcf" @@ -5304,6 +5581,33 @@ "@react-native-aria/utils" "^0.2.10" "@react-stately/toggle" "^3.2.1" +"@react-native-aria/dialog@^0.0.3": + version "0.0.3" + resolved "https://registry.yarnpkg.com/@react-native-aria/dialog/-/dialog-0.0.3.tgz#62388983268f6a6c3a5cfa06c3eaccb996112009" + integrity sha512-EXDS2IfB6n8LlelfMZjMntuHC7e6iRTWLxrYIyHm5d2gdmRVD37dris03Zsw/iMBhb/Z8ZYKQ/O5APioN6Uovg== + dependencies: + "@react-aria/dialog" "*" + "@react-native-aria/utils" "*" + "@react-types/dialog" "*" + "@react-types/shared" "*" + +"@react-native-aria/menu@0.2.10": + version "0.2.10" + resolved "https://registry.yarnpkg.com/@react-native-aria/menu/-/menu-0.2.10.tgz#3571be206fbebafc422f6438e553fa3dddaf25e4" + integrity sha512-oQeArGeN91zpmA4aXX2eNLQLOJBb1fm5YiFtcmZAVp1rC7yZp1ys/RWX4AHEHhOsd148+sZnQ8B0fxcxV/bOoQ== + dependencies: + "@react-aria/interactions" "^3.3.2" + "@react-aria/menu" "^3.1.3" + "@react-aria/selection" "^3.3.1" + "@react-aria/utils" "^3.6.0" + "@react-native-aria/interactions" "^0.2.11" + "@react-native-aria/overlays" "^0.3.10" + "@react-native-aria/utils" "^0.2.10" + "@react-stately/collections" "^3.3.0" + "@react-stately/menu" "^3.2.1" + "@react-stately/tree" "^3.1.2" + "@react-types/menu" "^3.1.1" + "@react-native-async-storage/async-storage@~1.17.3": version "1.17.12" resolved "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.17.12.tgz" From 9aed7ebd96b35da3c3474db82095d61c3d4b1c9f Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Wed, 27 Mar 2024 18:42:43 +0530 Subject: [PATCH 05/78] fix: added scope to context --- packages/nativewind/utils/context/index.d.ts | 2 +- packages/nativewind/utils/context/index.js | 2 +- .../nativewind/utils/withStates/index.d.ts | 2 +- packages/nativewind/utils/withStates/index.js | 3 +-- packages/nativewind/utils/withStates/index.tsx | 4 ++-- .../utils/withStyleContext/index.d.ts | 6 ++++-- .../nativewind/utils/withStyleContext/index.js | 18 +++++++++++++++--- .../utils/withStyleContextAndStates/index.d.ts | 6 ++++-- .../utils/withStyleContextAndStates/index.js | 18 +++++++++++++++--- 9 files changed, 44 insertions(+), 17 deletions(-) diff --git a/packages/nativewind/utils/context/index.d.ts b/packages/nativewind/utils/context/index.d.ts index 2416ea120c..6a8942739c 100644 --- a/packages/nativewind/utils/context/index.d.ts +++ b/packages/nativewind/utils/context/index.d.ts @@ -1,3 +1,3 @@ /// export declare const ParentContext: import('react').Context<{}>; -export declare const useStyleContext: () => any; +export declare const useParentContext: () => any; diff --git a/packages/nativewind/utils/context/index.js b/packages/nativewind/utils/context/index.js index 65b06ca90e..b0693066f2 100644 --- a/packages/nativewind/utils/context/index.js +++ b/packages/nativewind/utils/context/index.js @@ -1,6 +1,6 @@ 'use client'; import { createContext, useContext } from 'react'; export const ParentContext = createContext({}); -export const useStyleContext = () => { +export const useParentContext = () => { return useContext(ParentContext); }; diff --git a/packages/nativewind/utils/withStates/index.d.ts b/packages/nativewind/utils/withStates/index.d.ts index 6f5812c966..fa6ef0b1f1 100644 --- a/packages/nativewind/utils/withStates/index.d.ts +++ b/packages/nativewind/utils/withStates/index.d.ts @@ -1,5 +1,4 @@ import React from 'react'; -export { useStyleContext } from '../context'; type WithStatesProps = { className?: string; states?: any; @@ -9,3 +8,4 @@ export declare const withStates: ( ) => React.ForwardRefExoticComponent< React.PropsWithoutRef & React.RefAttributes >; +export {}; diff --git a/packages/nativewind/utils/withStates/index.js b/packages/nativewind/utils/withStates/index.js index a7970d534f..3bde0c0e65 100644 --- a/packages/nativewind/utils/withStates/index.js +++ b/packages/nativewind/utils/withStates/index.js @@ -1,12 +1,11 @@ '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); + return extractDataClassName(className, states); }, [className, states]); return React.createElement(Component, { className: classNamesFinal, diff --git a/packages/nativewind/utils/withStates/index.tsx b/packages/nativewind/utils/withStates/index.tsx index 7d3ead0bc2..983336ff12 100644 --- a/packages/nativewind/utils/withStates/index.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'; + type WithStatesProps = { className?: string; states?: any; @@ -12,7 +12,7 @@ export const withStates = (Component: React.ComponentType) => ({ states, className, ...props }: T & WithStatesProps, ref?: any) => { const classNamesFinal = React.useMemo(() => { if (!className) return; - extractDataClassName(className, states); + return extractDataClassName(className, states); }, [className, states]); return ( diff --git a/packages/nativewind/utils/withStyleContext/index.d.ts b/packages/nativewind/utils/withStyleContext/index.d.ts index e2ea322ab3..31d5bfa922 100644 --- a/packages/nativewind/utils/withStyleContext/index.d.ts +++ b/packages/nativewind/utils/withStyleContext/index.d.ts @@ -1,11 +1,13 @@ import React from 'react'; -export { useStyleContext } from '../context'; type WithStyleContextProps = { context?: any; }; export declare const withStyleContext: ( - Component: React.ComponentType + Component: React.ComponentType, + scope: string ) => React.ForwardRefExoticComponent< React.PropsWithoutRef & React.RefAttributes >; +export declare const useStyleContext: (scope: string) => any; +export {}; diff --git a/packages/nativewind/utils/withStyleContext/index.js b/packages/nativewind/utils/withStyleContext/index.js index 0b6b9b6b06..5f5002234f 100644 --- a/packages/nativewind/utils/withStyleContext/index.js +++ b/packages/nativewind/utils/withStyleContext/index.js @@ -1,13 +1,25 @@ 'use client'; import React from 'react'; import { ParentContext } from '../context'; -export { useStyleContext } from '../context'; -export const withStyleContext = (Component) => { +import { useParentContext } from '../context'; +export const withStyleContext = (Component, scope) => { return React.forwardRef(({ context, ...props }, ref) => { + let contextValues = {}; + const parentContextValues = useParentContext(); + if (parentContextValues[scope] !== undefined) { + parentContextValues[scope] = context; + contextValues = parentContextValues; + } else { + contextValues = { ...parentContextValues, [scope]: context }; + } return React.createElement( ParentContext.Provider, - { value: context }, + { value: contextValues }, React.createElement(Component, { ...props, ref: ref }) ); }); }; +export const useStyleContext = (scope) => { + const parentContextValues = useParentContext(); + return parentContextValues[scope]; +}; diff --git a/packages/nativewind/utils/withStyleContextAndStates/index.d.ts b/packages/nativewind/utils/withStyleContextAndStates/index.d.ts index 57aa5a2a7d..63836573db 100644 --- a/packages/nativewind/utils/withStyleContextAndStates/index.d.ts +++ b/packages/nativewind/utils/withStyleContextAndStates/index.d.ts @@ -1,13 +1,15 @@ import React from 'react'; -export { useStyleContext } from '../context'; type WithStyleContextProps = { context?: any; className?: string; states?: any; }; export declare const withStyleContextAndStates: ( - Component: React.ComponentType + Component: React.ComponentType, + scope: string ) => React.ForwardRefExoticComponent< React.PropsWithoutRef & React.RefAttributes >; +export declare const useStyleContext: (scope: string) => any; +export {}; diff --git a/packages/nativewind/utils/withStyleContextAndStates/index.js b/packages/nativewind/utils/withStyleContextAndStates/index.js index 6acde5282f..b2c1418942 100644 --- a/packages/nativewind/utils/withStyleContextAndStates/index.js +++ b/packages/nativewind/utils/withStyleContextAndStates/index.js @@ -2,16 +2,24 @@ import React from 'react'; import { extractDataClassName } from '../utils'; import { ParentContext } from '../context'; -export { useStyleContext } from '../context'; -export const withStyleContextAndStates = (Component) => { +import { useParentContext } from '../context'; +export const withStyleContextAndStates = (Component, scope) => { return React.forwardRef(({ context, className, states, ...props }, ref) => { + let contextValues = {}; + const parentContextValues = useParentContext(); + if (parentContextValues[scope] !== undefined) { + parentContextValues[scope] = context; + contextValues = parentContextValues; + } else { + contextValues = { ...parentContextValues, [scope]: context }; + } const classNamesFinal = React.useMemo(() => { if (!className) return; return extractDataClassName(className, states); }, [className, states]); return React.createElement( ParentContext.Provider, - { value: context }, + { value: contextValues }, React.createElement(Component, { className: classNamesFinal, ...props, @@ -20,3 +28,7 @@ export const withStyleContextAndStates = (Component) => { ); }); }; +export const useStyleContext = (scope) => { + const parentContextValues = useParentContext(); + return parentContextValues[scope]; +}; From afef6b138290327a1c29a7ade412c3d14224eb81 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Wed, 27 Mar 2024 18:56:02 +0530 Subject: [PATCH 06/78] fix: scope in components --- .../core-components/nativewind/accordion/index.tsx | 13 +++++++------ .../nativewind/alert-dialog/index.tsx | 7 ++++--- .../src/core-components/nativewind/alert/index.tsx | 6 +++--- .../src/core-components/nativewind/avatar/index.tsx | 10 +++++----- .../src/core-components/nativewind/badge/index.tsx | 9 +++++---- .../src/core-components/nativewind/button/index.tsx | 13 +++++++------ .../core-components/nativewind/checkbox/index.tsx | 11 ++++++----- .../src/core-components/nativewind/fab/index.tsx | 10 +++++----- .../nativewind/form-control/index.tsx | 13 +++++++------ .../src/core-components/nativewind/input/index.tsx | 10 +++++----- .../src/core-components/nativewind/modal/index.tsx | 7 ++++--- .../core-components/nativewind/popover/index.tsx | 8 ++++---- .../core-components/nativewind/progress/index.tsx | 6 +++--- .../src/core-components/nativewind/radio/index.tsx | 11 ++++++----- .../src/core-components/nativewind/slider/index.tsx | 11 ++++++----- .../core-components/nativewind/textarea/index.tsx | 8 ++++---- 16 files changed, 81 insertions(+), 72 deletions(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx index c949bd7333..cc0b23ffa3 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx @@ -13,6 +13,7 @@ import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withSt import { H3 } from '@expo/html-elements'; import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; +const SCOPE = 'ACCORDION'; /** Styles */ const accordionStyle = tva({ @@ -79,8 +80,8 @@ const UIAccordion = createAccordion({ //@ts-ignore Root: Platform.OS === 'web' - ? withStyleContext(View) - : withStyleContextAndStates(View), + ? withStyleContext(View, SCOPE) + : withStyleContextAndStates(View, SCOPE), Item: View, // @ts-ignore Header: Platform.OS === 'web' ? H3 : View, @@ -160,7 +161,7 @@ const AccordionItem = React.forwardRef( { className, ...props }: { className?: string } & IAccordionItemProps, ref?: any ) => { - const { variant } = useStyleContext(); + const { variant } = useStyleContext(SCOPE); return ( { - const { size } = useStyleContext(); + const { size } = useStyleContext(SCOPE); return ( { - const { size: parentSize } = useStyleContext(); + const { size: parentSize } = useStyleContext(SCOPE); if (AsComp) { return ( @@ -292,7 +293,7 @@ const AccordionTitleText = React.forwardRef( { className, ...props }: { className?: string } & IAccordionTitleTextProps, ref?: any ) => { - const { size } = useStyleContext(); + const { size } = useStyleContext(SCOPE); return ( { - const { size: parentSize } = useStyleContext(); + const { size: parentSize } = useStyleContext(SCOPE); return ( { - const { action } = useStyleContext(); + const { action } = useStyleContext(SCOPE); if (AsComp) { return ( { return ( { - const { size: parentSize, action: parentAction } = useStyleContext(); + const { size: parentSize, action: parentAction } = useStyleContext(SCOPE); return ( { - const { size: parentSize, action: parentAction } = useStyleContext(); + const { size: parentSize, action: parentAction } = useStyleContext(SCOPE); if (AsComp) { return ( { return ( { - const { size: parentSize } = useStyleContext(); + const { size: parentSize } = useStyleContext(SCOPE); return ( { - const { size: parentSize } = useStyleContext(); + const { size: parentSize } = useStyleContext(SCOPE); return ( { - const { size: parentSize } = useStyleContext(); + const { size: parentSize } = useStyleContext(SCOPE); if (AsComp) { return ( diff --git a/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx index 9044e8f60c..b070fd7fa7 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/fab/index.tsx @@ -11,13 +11,13 @@ import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withSt import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; import React from 'react'; - +const SCOPE = 'FAB'; export const UIFab = createFab({ // @ts-ignore Root: Platform.OS === 'web' - ? withStyleContext(Pressable) - : withStyleContextAndStates(Pressable), + ? withStyleContext(Pressable, SCOPE) + : withStyleContextAndStates(Pressable, SCOPE), Label: Text, Icon: View, }); @@ -142,7 +142,7 @@ const FabLabel = React.forwardRef( }: any, ref: any ) => { - const { size: parentSize } = useStyleContext(); + const { size: parentSize } = useStyleContext(SCOPE); return ( { - const { size: parentSize } = useStyleContext(); + const { size: parentSize } = useStyleContext(SCOPE); if (AsComp) { return ( { - const { size: parentSize } = useStyleContext(); + const { size: parentSize } = useStyleContext(SCOPE); return ( { }; export const UIFormControl = createFormControl({ - Root: withStyleContext(View), + Root: withStyleContext(View, SCOPE), Error: View, ErrorText: Text, ErrorIcon: View, @@ -282,7 +283,7 @@ const FormControlErrorText = ({ size, ...props }: { className?: string } & IFormControlErrorTextProps) => { - const { size: parentSize } = useStyleContext(); + const { size: parentSize } = useStyleContext(SCOPE); return ( { - const { size: parentSize } = useStyleContext(); + const { size: parentSize } = useStyleContext(SCOPE); if (AsComp) { return ( { - const { size: parentSize } = useStyleContext(); + const { size: parentSize } = useStyleContext(SCOPE); return ( { - const { size: parentSize } = useStyleContext(); + const { size: parentSize } = useStyleContext(SCOPE); return ( { - const { size: parentSize } = useStyleContext(); + const { size: parentSize } = useStyleContext(SCOPE); if (AsComp) { return ( @@ -187,7 +187,7 @@ type IInputFieldProps = React.ComponentProps & const InputField = React.forwardRef( ({ className, ...props }: { className?: string } & IInputFieldProps, ref) => { - const { variant: parentVariant, size: parentSize } = useStyleContext(); + const { variant: parentVariant, size: parentSize } = useStyleContext(SCOPE); return ( { - const { size: parentSize } = useStyleContext(); + const { size: parentSize } = useStyleContext(SCOPE); return ( { - const { size: parentSize } = useStyleContext(); + const { size: parentSize } = useStyleContext(SCOPE); return ( { - const { size: parentSize } = useStyleContext(); + const { size: parentSize } = useStyleContext(SCOPE); return ( { }; const RadioIndicator = ({ className, ...props }: any) => { - const { size } = useStyleContext(); + const { size } = useStyleContext(SCOPE); return ( { }; const RadioLabel = ({ className, ...props }: any) => { - const { size } = useStyleContext(); + const { size } = useStyleContext(SCOPE); return ( { }; const RadioIcon = ({ className, as: AsComp, size, ...props }: any) => { - const { size: parentSize } = useStyleContext(); + const { size: parentSize } = useStyleContext(SCOPE); if (AsComp) { return ( 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 8bf46c68be..a9e2ad71ae 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/slider/index.tsx @@ -12,12 +12,13 @@ import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withSt import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; import { withStates } from '@gluestack-ui/nativewind-utils/withStates'; +const SCOPE = 'SLIDER'; export const UISlider = createSlider({ // @ts-ignore Root: Platform.OS === 'web' - ? withStyleContext(View) - : withStyleContextAndStates(View), + ? withStyleContext(View, SCOPE) + : withStyleContextAndStates(View, SCOPE), Thumb: Platform.OS === 'web' ? View : withStates(View), Track: Pressable, FilledTrack: Platform.OS === 'web' ? View : withStates(View), @@ -183,7 +184,7 @@ export const Slider = React.forwardRef( export const SliderThumb = React.forwardRef( ({ className, size, ...props }: any, ref) => { - const { size: parentSize } = useStyleContext(); + const { size: parentSize } = useStyleContext(SCOPE); return ( { - const { orientation: parentOrientation } = useStyleContext(); + const { orientation: parentOrientation } = useStyleContext(SCOPE); return ( { - const { size: parentSize } = useStyleContext(); + const { size: parentSize } = useStyleContext(SCOPE); return ( Date: Thu, 28 Mar 2024 14:58:05 +0530 Subject: [PATCH 07/78] fix: added scope making it optional --- .../src/core-components/nativewind/alert/index.tsx | 5 +++-- packages/nativewind/utils/package.json | 1 + packages/nativewind/utils/withStyleContext/index.d.ts | 4 ++-- packages/nativewind/utils/withStyleContext/index.js | 4 ++-- packages/nativewind/utils/withStyleContext/index.tsx | 4 ++-- .../nativewind/utils/withStyleContextAndStates/index.d.ts | 4 ++-- packages/nativewind/utils/withStyleContextAndStates/index.js | 4 ++-- .../nativewind/utils/withStyleContextAndStates/index.tsx | 4 ++-- 8 files changed, 16 insertions(+), 14 deletions(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx index 0be5fed3f1..cbad2eebbd 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/alert/index.tsx @@ -99,7 +99,7 @@ const alertIconStyle = tva({ }); export const UIAlert = createAlert({ - Root: withStyleContext(View, SOCPE), + Root: withStyleContext(View, SCOPE), Text: Text, Icon: View, }); @@ -159,13 +159,14 @@ const AlertIcon = ({ ...props }: any) => { const { action } = useStyleContext(SCOPE); + if (AsComp) { return ( ( Component: React.ComponentType, - scope: string + scope?: string ) => React.ForwardRefExoticComponent< React.PropsWithoutRef & React.RefAttributes >; -export declare const useStyleContext: (scope: string) => any; +export declare const useStyleContext: (scope?: string) => any; export {}; diff --git a/packages/nativewind/utils/withStyleContext/index.js b/packages/nativewind/utils/withStyleContext/index.js index 5f5002234f..986a4e50e6 100644 --- a/packages/nativewind/utils/withStyleContext/index.js +++ b/packages/nativewind/utils/withStyleContext/index.js @@ -2,7 +2,7 @@ import React from 'react'; import { ParentContext } from '../context'; import { useParentContext } from '../context'; -export const withStyleContext = (Component, scope) => { +export const withStyleContext = (Component, scope = 'Global') => { return React.forwardRef(({ context, ...props }, ref) => { let contextValues = {}; const parentContextValues = useParentContext(); @@ -19,7 +19,7 @@ export const withStyleContext = (Component, scope) => { ); }); }; -export const useStyleContext = (scope) => { +export const useStyleContext = (scope = 'Global') => { const parentContextValues = useParentContext(); return parentContextValues[scope]; }; diff --git a/packages/nativewind/utils/withStyleContext/index.tsx b/packages/nativewind/utils/withStyleContext/index.tsx index c0d5d5f2c0..ebce0f7a39 100644 --- a/packages/nativewind/utils/withStyleContext/index.tsx +++ b/packages/nativewind/utils/withStyleContext/index.tsx @@ -7,7 +7,7 @@ type WithStyleContextProps = { }; export const withStyleContext = ( Component: React.ComponentType, - scope: string + scope: string = 'Global' ) => { return React.forwardRef( ({ context, ...props }: T & WithStyleContextProps, ref?: any) => { @@ -28,7 +28,7 @@ export const withStyleContext = ( ); }; -export const useStyleContext = (scope: string) => { +export const useStyleContext = (scope: string = 'Global') => { const parentContextValues = useParentContext(); return parentContextValues[scope]; }; diff --git a/packages/nativewind/utils/withStyleContextAndStates/index.d.ts b/packages/nativewind/utils/withStyleContextAndStates/index.d.ts index 63836573db..fc48d865f3 100644 --- a/packages/nativewind/utils/withStyleContextAndStates/index.d.ts +++ b/packages/nativewind/utils/withStyleContextAndStates/index.d.ts @@ -6,10 +6,10 @@ type WithStyleContextProps = { }; export declare const withStyleContextAndStates: ( Component: React.ComponentType, - scope: string + scope?: string ) => React.ForwardRefExoticComponent< React.PropsWithoutRef & React.RefAttributes >; -export declare const useStyleContext: (scope: string) => any; +export declare const useStyleContext: (scope?: string) => any; export {}; diff --git a/packages/nativewind/utils/withStyleContextAndStates/index.js b/packages/nativewind/utils/withStyleContextAndStates/index.js index b2c1418942..127c0c9536 100644 --- a/packages/nativewind/utils/withStyleContextAndStates/index.js +++ b/packages/nativewind/utils/withStyleContextAndStates/index.js @@ -3,7 +3,7 @@ import React from 'react'; import { extractDataClassName } from '../utils'; import { ParentContext } from '../context'; import { useParentContext } from '../context'; -export const withStyleContextAndStates = (Component, scope) => { +export const withStyleContextAndStates = (Component, scope = 'Global') => { return React.forwardRef(({ context, className, states, ...props }, ref) => { let contextValues = {}; const parentContextValues = useParentContext(); @@ -28,7 +28,7 @@ export const withStyleContextAndStates = (Component, scope) => { ); }); }; -export const useStyleContext = (scope) => { +export const useStyleContext = (scope = 'Global') => { const parentContextValues = useParentContext(); return parentContextValues[scope]; }; diff --git a/packages/nativewind/utils/withStyleContextAndStates/index.tsx b/packages/nativewind/utils/withStyleContextAndStates/index.tsx index ce9625b0df..9e0a136811 100644 --- a/packages/nativewind/utils/withStyleContextAndStates/index.tsx +++ b/packages/nativewind/utils/withStyleContextAndStates/index.tsx @@ -12,7 +12,7 @@ type WithStyleContextProps = { export const withStyleContextAndStates = ( Component: React.ComponentType, - scope: string + scope: string = 'Global' ) => { return React.forwardRef( ( @@ -46,7 +46,7 @@ export const withStyleContextAndStates = ( ); }; -export const useStyleContext = (scope: string) => { +export const useStyleContext = (scope: string = 'Global') => { const parentContextValues = useParentContext(); return parentContextValues[scope]; }; From 09edcab78f711e04cf6b46f28960c50b46ca3e87 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Thu, 28 Mar 2024 14:58:36 +0530 Subject: [PATCH 08/78] v1.0.4 --- 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 38c74250bf..5c775f8c8a 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", + "version": "1.0.4", "react-native": "src/index", "source": "src/index", "scripts": { From 7fda6ae257d6878830285b50bb9a4659b91f14df Mon Sep 17 00:00:00 2001 From: Rohit Singh Date: Thu, 28 Mar 2024 17:54:59 +0530 Subject: [PATCH 09/78] feat: rsc enabled docs --- .../src/components/Box/index.nw.stories.mdx | 12 +- .../src/components/Card/index.nw.stories.mdx | 12 +- .../src/components/Center/Center.tsx | 6 +- .../components/Center/index.nw.stories.mdx | 12 +- .../components/HStack/index.nw.stories.mdx | 12 +- .../components/Heading/index.nw.stories.mdx | 13 +- .../src/components/Text/index.nw.stories.mdx | 12 +- .../components/VStack/index.nw.stories.mdx | 12 +- .../nativewind/box/index.web.tsx | 14 +++ .../nativewind/card/index.web.tsx | 36 ++++++ .../nativewind/center/index.web.tsx | 13 ++ .../nativewind/heading/index.web.tsx | 117 ++++++++++++++++++ .../nativewind/hstack/index.web.tsx | 34 +++++ .../nativewind/text/index.web.tsx | 87 +++++++++++++ .../nativewind/vstack/index.web.tsx | 41 ++++++ 15 files changed, 412 insertions(+), 21 deletions(-) create mode 100644 example/storybook-nativewind/src/core-components/nativewind/box/index.web.tsx create mode 100644 example/storybook-nativewind/src/core-components/nativewind/card/index.web.tsx create mode 100644 example/storybook-nativewind/src/core-components/nativewind/center/index.web.tsx create mode 100644 example/storybook-nativewind/src/core-components/nativewind/heading/index.web.tsx create mode 100644 example/storybook-nativewind/src/core-components/nativewind/hstack/index.web.tsx create mode 100644 example/storybook-nativewind/src/core-components/nativewind/text/index.web.tsx create mode 100644 example/storybook-nativewind/src/core-components/nativewind/vstack/index.web.tsx diff --git a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx index edc75b6fac..17524fadbc 100644 --- a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx @@ -80,7 +80,7 @@ This is an illustration of **Box** component. <> -### Step 1: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into index.tsx in your project. ```jsx @@ -88,7 +88,15 @@ This is an illustration of **Box** component. ``` -### Step 2: Update the import paths to match your project setup. +### Step 2: Copy and paste the following code into index.web.tsx in your project. + + +```jsx +%%-- File: core-components/nativewind/box/index.web.tsx --%% +``` + + +### Step 3: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx index f012b808bd..83fec58d49 100644 --- a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx @@ -112,7 +112,7 @@ This is an illustration of a **Card** component. <> -### Step 1: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into index.tsx in your project. ```jsx @@ -120,7 +120,15 @@ This is an illustration of a **Card** component. ``` -### Step 2: Update the import paths to match your project setup. +### Step 2: Copy and paste the following code into index.web.tsx in your project. + + +```jsx +%%-- File: core-components/nativewind/card/index.web.tsx --%% +``` + + +### Step 3: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/components/Center/Center.tsx b/example/storybook-nativewind/src/components/Center/Center.tsx index 7f9e782225..d61ff5a691 100644 --- a/example/storybook-nativewind/src/components/Center/Center.tsx +++ b/example/storybook-nativewind/src/components/Center/Center.tsx @@ -4,10 +4,8 @@ import React from 'react'; const CenterBasic = () => { return ( -
- - This is the center. - +
+ This is the center.
); }; diff --git a/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx index ba511a920d..0660225805 100644 --- a/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx @@ -78,7 +78,7 @@ This is an illustration of **Center** component. <> -### Step 1: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into index.tsx in your project. ```jsx @@ -86,7 +86,15 @@ This is an illustration of **Center** component. ``` -### Step 2: Update the import paths to match your project setup. +### Step 2: Copy and paste the following code into index.web.tsx in your project. + + +```jsx +%%-- File: core-components/nativewind/center/index.web.tsx --%% +``` + + +### Step 3: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx index 8b33e504c4..6129031c07 100644 --- a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx @@ -89,7 +89,7 @@ This is an illustration of **HStack** component. <> -### Step 1: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into index.tsx in your project. ```jsx @@ -97,7 +97,15 @@ This is an illustration of **HStack** component. ``` -### Step 2: Update the import paths to match your project setup. +### Step 2: Copy and paste the following code into index.web.tsx in your project. + + +```jsx +%%-- File: core-components/nativewind/hstack/index.web.tsx --%% +``` + + +### Step 3: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx index bcc4d18453..cbc5dff9d9 100644 --- a/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx @@ -77,16 +77,19 @@ This is an illustration of **Heading** component. <> -### Step 1: Install the following dependencies: -```bash -npm i @expo/html-elements +### Step 1: Copy and paste the following code into index.tsx in your project. + + +```jsx +%%-- File: core-components/nativewind/heading/index.tsx --%% ``` + -### Step 2: Copy and paste the following code into your project. +### Step 2: Copy and paste the following code into index.web.tsx in your project. ```jsx -%%-- File: core-components/nativewind/heading/index.tsx --%% +%%-- File: core-components/nativewind/heading/index.web.tsx --%% ``` diff --git a/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx index 923780f287..b7e46a6219 100644 --- a/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx @@ -77,7 +77,7 @@ This is an illustration of **Text** component. <> -### Step 1: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into index.tsx in your project. ```jsx @@ -85,7 +85,15 @@ This is an illustration of **Text** component. ``` -### Step 2: Update the import paths to match your project setup. +### Step 2: Copy and paste the following code into index.web.tsx in your project. + + +```jsx +%%-- File: core-components/nativewind/text/index.web.tsx --%% +``` + + +### Step 3: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx b/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx index 02005ec3d9..8fc8b408e1 100644 --- a/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx @@ -95,7 +95,7 @@ This is an illustration of **VStack** component. <> -### Step 1: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into index.tsx in your project. ```jsx @@ -103,7 +103,15 @@ This is an illustration of **VStack** component. ``` -### Step 2: Update the import paths to match your project setup. +### Step 2: Copy and paste the following code into index.web.tsx in your project. + + +```jsx +%%-- File: core-components/nativewind/vstack/index.web.tsx --%% +``` + + +### Step 3: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/core-components/nativewind/box/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/box/index.web.tsx new file mode 100644 index 0000000000..bc866bcf56 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/nativewind/box/index.web.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { tva } from '@gluestack-ui/nativewind-utils/tva'; + +const boxStyle = tva({ + base: '', +}); +const Box = React.forwardRef(({ className, ...props }: any, ref) => { + return ( +
+ ); +}); + +Box.displayName = 'Box'; +export { Box }; diff --git a/example/storybook-nativewind/src/core-components/nativewind/card/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/card/index.web.tsx new file mode 100644 index 0000000000..da3cec2b79 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/nativewind/card/index.web.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import { tva } from '@gluestack-ui/nativewind-utils/tva'; + +const cardStyle = tva({ + variants: { + size: { + sm: 'p-3 rounded', + md: 'p-4 rounded-md', + lg: 'p-6 rounded-xl', + }, + variant: { + elevated: 'bg-background-0', + outline: 'border border-outline-200 ', + ghost: 'rounded-none', + filled: 'bg-background-50', + }, + }, +}); + +const Card = ({ + className, + size = 'md', + variant = 'elevated', + ...props +}: any) => { + return ( +
+ ); +}; + +Card.displayName = 'Card'; + +export { Card }; diff --git a/example/storybook-nativewind/src/core-components/nativewind/center/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/center/index.web.tsx new file mode 100644 index 0000000000..d4f3892286 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/nativewind/center/index.web.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { tva } from '@gluestack-ui/nativewind-utils/tva'; +const centerStyle = tva({ + base: 'flex flex-col justify-center items-center', +}); + +const Center = ({ className, ...props }: any) => { + return
; +}; + +Center.displayName = 'Center'; + +export { Center }; diff --git a/example/storybook-nativewind/src/core-components/nativewind/heading/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/heading/index.web.tsx new file mode 100644 index 0000000000..343b593ee2 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/nativewind/heading/index.web.tsx @@ -0,0 +1,117 @@ +'use client'; + +import React, { useCallback } from 'react'; +import { tva } from '@gluestack-ui/nativewind-utils/tva'; + +const headingStyle = tva({ + base: 'text-typography-900 font-bold font-heading tracking-sm my-0', + variants: { + isTruncated: { + true: 'web:truncate', + }, + bold: { + true: 'font-bold', + }, + underline: { + true: 'underline', + }, + strikeThrough: { + true: 'line-through', + }, + sub: { + true: 'text-xs', + }, + italic: { + true: 'italic', + }, + highlight: { + true: 'bg-yellow-500', + }, + size: { + '5xl': 'text-6xl', + '4xl': 'text-5xl', + '3xl': 'text-4xl', + '2xl': 'text-3xl', + 'xl': 'text-2xl', + 'lg': 'text-xl', + 'md': 'text-lg', + 'sm': 'text-base', + 'xs': 'text-sm', + }, + }, +}); + +const Heading = ({ className, size = 'lg', as: AsComp, ...props }: any) => { + const MappedHeading = useCallback( + () => { + switch (size) { + case '5xl': + case '4xl': + case '3xl': + return ( +

+ ); + case '2xl': + return ( +

+ ); + case 'xl': + return ( +

+ ); + case 'lg': + return ( +

+ ); + case 'md': + return ( +

+ ); + case 'sm': + case 'xs': + return ( +
+ ); + default: + return ( +

+ ); + } + }, + // eslint-disable-next-line react-hooks/exhaustive-deps + [size] + ); + + if (AsComp) { + return ( + + ); + } + + return ; +}; + +Heading.displayName = 'Heading'; + +export { Heading }; diff --git a/example/storybook-nativewind/src/core-components/nativewind/hstack/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/hstack/index.web.tsx new file mode 100644 index 0000000000..f4bc588ad2 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/nativewind/hstack/index.web.tsx @@ -0,0 +1,34 @@ +import React from 'react'; +import { tva } from '@gluestack-ui/nativewind-utils/tva'; + +const hstackStyle = tva({ + base: 'flex flex-row', + variants: { + space: { + 'xs': 'gap-1', + 'sm': 'gap-2', + 'md': 'gap-3', + 'lg': 'gap-4', + 'xl': 'gap-5', + '2xl': 'gap-6', + '3xl': 'gap-7', + '4xl': 'gap-8', + }, + reversed: { + true: 'flex-row-reverse', + }, + }, +}); + +const HStack = ({ className, space, reversed, ...props }: any) => { + return ( +
+ ); +}; + +HStack.displayName = 'HStack'; + +export { HStack }; diff --git a/example/storybook-nativewind/src/core-components/nativewind/text/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/text/index.web.tsx new file mode 100644 index 0000000000..72c00e0aa0 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/nativewind/text/index.web.tsx @@ -0,0 +1,87 @@ +import React from 'react'; +import { tva } from '@gluestack-ui/nativewind-utils/tva'; + +import type { VariantProps } from '@gluestack-ui/nativewind-utils'; + +const textStyle = tva({ + base: 'text-typography-700 font-normal font-body', + + variants: { + isTruncated: { + true: 'web: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', + }, + }, +}); + +type ITextProps = React.ComponentProps<'span'> & VariantProps; + +const Text = React.forwardRef( + ( + { + className, + isTruncated, + bold, + underline, + strikeThrough, + size = 'md', + sub, + italic, + highlight, + ...props + }: { className?: string } & ITextProps, + ref?: any + ) => { + return ( + + ); + } +); + +Text.displayName = 'Text'; + +export { Text }; diff --git a/example/storybook-nativewind/src/core-components/nativewind/vstack/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/vstack/index.web.tsx new file mode 100644 index 0000000000..f5e0636467 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/nativewind/vstack/index.web.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import { tva } from '@gluestack-ui/nativewind-utils/tva'; +import type { VariantProps } from '@gluestack-ui/nativewind-utils'; + +const vstackStyle = tva({ + base: 'flex flex-col', + variants: { + space: { + 'xs': 'gap-1', + 'sm': 'gap-2', + 'md': 'gap-3', + 'lg': 'gap-4', + 'xl': 'gap-5', + '2xl': 'gap-6', + '3xl': 'gap-7', + '4xl': 'gap-8', + }, + reversed: { + true: 'flex-col-reverse', + }, + }, +}); + +type IVStackProps = React.ComponentProps<'div'> & + VariantProps; + +const VStack = React.forwardRef( + ({ className, space, reversed, ...props }: IVStackProps, ref?: any) => { + return ( +
+ ); + } +); + +VStack.displayName = 'VStack'; + +export { VStack }; From de872d26e85a7a8097ca6a77d1ef778598ba3f4d Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Thu, 28 Mar 2024 19:06:40 +0530 Subject: [PATCH 10/78] fix: select component icon issue and minor changes --- example/storybook-nativewind/babel.config.js | 8 +++ .../src/components/Select/Select.tsx | 11 ++-- .../nativewind/button/index.tsx | 2 - .../gluestack-ui-provider/index.tsx | 10 ++-- .../gluestack-ui-provider/index.web.tsx | 12 +++-- .../core-components/nativewind/icon/index.tsx | 23 ++++++--- .../nativewind/select/index.tsx | 51 ++++++++++++++----- .../nativewind/select/select-actionsheet.tsx | 2 +- 8 files changed, 83 insertions(+), 36 deletions(-) diff --git a/example/storybook-nativewind/babel.config.js b/example/storybook-nativewind/babel.config.js index 8f54b5c7e2..f7fcf6b67f 100644 --- a/example/storybook-nativewind/babel.config.js +++ b/example/storybook-nativewind/babel.config.js @@ -95,6 +95,14 @@ module.exports = function (api) { __dirname, '../../packages/nativewind/utils/' ), + '@gluestack-ui/overlay': path.join( + __dirname, + '../../packages/unstyled/overlay/src' + ), + '@gluestack-ui/toast': path.join( + __dirname, + '../../packages/unstyled/toast/src' + ), }, }, ], diff --git a/example/storybook-nativewind/src/components/Select/Select.tsx b/example/storybook-nativewind/src/components/Select/Select.tsx index c1953e7e95..20fba565d9 100644 --- a/example/storybook-nativewind/src/components/Select/Select.tsx +++ b/example/storybook-nativewind/src/components/Select/Select.tsx @@ -1,7 +1,6 @@ import React from 'react'; - -import { Center, Icon } from '@gluestack-ui/themed'; - +import { Center } from '@/components/ui/center'; +import { Icon, ChevronDownIcon } from '@/components/ui/icon'; import { Select, SelectIcon, @@ -20,11 +19,7 @@ const SelectBasic = ({ size = 'md', variant = 'outline', ...props }: any) => { + + + + + + Must be atleast 6 characters. + + + + + + + Atleast 6 characters are required. + + + + ); +}; + +export default FormControlDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/HStackDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/HStackDemo.tsx new file mode 100644 index 0000000000..f60b4e3a83 --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/HStackDemo.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { Box, HStack } from '@/components/ui'; + +const HStackDemo = () => { + return ( + + + + + + ); +}; + +export default HStackDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/HeadingDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/HeadingDemo.tsx new file mode 100644 index 0000000000..986ef5747b --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/HeadingDemo.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { Heading } from '@/components/ui'; +const HeadingDemo = () => { + return I am a Heading; +}; + +export default HeadingDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/IconDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/IconDemo.tsx new file mode 100644 index 0000000000..e07aa7b051 --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/IconDemo.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { EditIcon, Icon } from '@/components/ui'; + +const IconDemo = () => { + return ; +}; +export default IconDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ImageDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ImageDemo.tsx new file mode 100644 index 0000000000..fef1ce92dc --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ImageDemo.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { Image } from '@/components/ui'; + +const ImageDemo = () => { + return ( + + ); +}; + +export default ImageDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/InputDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/InputDemo.tsx new file mode 100644 index 0000000000..3984cc1605 --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/InputDemo.tsx @@ -0,0 +1,21 @@ +import { + Input, + InputField, + InputIcon, + InputSlot, + SearchIcon, +} from '@/components/ui'; +import React from 'react'; + +const InputDemo = () => { + return ( + + + + + + + ); +}; + +export default InputDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/LinkDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/LinkDemo.tsx new file mode 100644 index 0000000000..7647359620 --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/LinkDemo.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Link, LinkText } from '@/components/ui'; + +const LinkDemo = () => { + return ( + + gluestack + + ); +}; + +export default LinkDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/MenuDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/MenuDemo.tsx new file mode 100644 index 0000000000..7bfd812924 --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/MenuDemo.tsx @@ -0,0 +1,43 @@ +import { + Menu, + Button, + MenuItem, + Icon, + MenuItemLabel, + GlobeIcon, + ButtonText, +} from '@/components/ui'; +import { PuzzleIcon, SettingsIcon } from 'lucide-react-native'; +import React from 'react'; + +const MenuDemo = () => { + return ( + { + return ( + + ); + }} + > + + + Community + + + + Settings + + + + Plugins + + + ); +}; + +export default MenuDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ModalDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ModalDemo.tsx new file mode 100644 index 0000000000..978fba6cd6 --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ModalDemo.tsx @@ -0,0 +1,78 @@ +import { + Heading, + ModalBackdrop, + Button, + ButtonText, + Modal, + ModalContent, + ModalHeader, + ModalCloseButton, + Icon, + CloseIcon, + ModalBody, + Text, + ModalFooter, + Center, +} from '@/components/ui'; +import React, { useState } from 'react'; + +const ModalDemo = () => { + const [showModal, setShowModal] = useState(false); + const ref = React.useRef(null); + return ( +
+ + { + setShowModal(false); + }} + finalFocusRef={ref} + > + + + + Engage with Modals + + + + + + + Elevate user interactions with our versatile modals. Seamlessly + integrate notifications, forms, and media displays. Make an impact + effortlessly. + + + + + + + + +
+ ); +}; + +export default ModalDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/PopoverDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/PopoverDemo.tsx new file mode 100644 index 0000000000..4ab767371b --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/PopoverDemo.tsx @@ -0,0 +1,59 @@ +import { + Avatar, + Box, + Popover, + Pressable, + Text, + PopoverContent, + AvatarFallbackText, + PopoverBody, + HStack, + CircleIcon, +} from '@/components/ui'; +import React from 'react'; + +const PopoverDemo = () => { + const [showPopover, setShowPopover] = React.useState(true); + + return ( + + { + return ( + { + setShowPopover(!showPopover); + }} + > + + Kevin James + + + ); + }} + > + + + + Kevin James + + + + + Active + + + + + + + ); +}; + +export default PopoverDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/PressableDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/PressableDemo.tsx new file mode 100644 index 0000000000..dbcfdcb796 --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/PressableDemo.tsx @@ -0,0 +1,12 @@ +import { Pressable, Text } from '@/components/ui'; +import React from 'react'; + +const PressableDemo = () => { + return ( + + Press me + + ); +}; + +export default PressableDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ProgressDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ProgressDemo.tsx new file mode 100644 index 0000000000..837086136a --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ProgressDemo.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { Progress, ProgressFilledTrack } from '@/components/ui'; +const ProgressDemo = () => { + return ( + + + + ); +}; + +export default ProgressDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/RadioDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/RadioDemo.tsx new file mode 100644 index 0000000000..ed2c868063 --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/RadioDemo.tsx @@ -0,0 +1,34 @@ +import React, { useState } from 'react'; +import { + CircleIcon, + Radio, + RadioGroup, + RadioIcon, + RadioIndicator, + RadioLabel, + VStack, +} from '@/components/ui'; + +const RadioDemo = () => { + const [values, setValues] = useState('Monday'); + return ( + + + + Option A + + + + + + Option B + + + + + + + ); +}; + +export default RadioDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SelectDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SelectDemo.tsx new file mode 100644 index 0000000000..e4d3ac7a23 --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SelectDemo.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { + ChevronDownIcon, + Icon, + Select, + SelectTrigger, + SelectInput, + SelectIcon, + SelectPortal, + SelectBackdrop, + SelectContent, + SelectDragIndicatorWrapper, + SelectDragIndicator, + SelectItem, +} from '@/components/ui'; + +const SelectDemo = () => { + return ( + + ); +}; + +export default SelectDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SliderDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SliderDemo.tsx new file mode 100644 index 0000000000..629eb1572c --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SliderDemo.tsx @@ -0,0 +1,24 @@ +import { + Slider, + SliderFilledTrack, + SliderThumb, + SliderTrack, +} from '@/components/ui'; +import React from 'react'; + +export const SliderDemo = () => { + return ( + + + + + + + ); +}; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SpinnerDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SpinnerDemo.tsx new file mode 100644 index 0000000000..26f0139464 --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SpinnerDemo.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { Spinner } from '@/components/ui'; + +const SpinnerDemo = () => { + return ; +}; + +export default SpinnerDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SwitchDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SwitchDemo.tsx new file mode 100644 index 0000000000..ead2df65eb --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SwitchDemo.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { HStack, Switch, Text } from '@/components/ui'; + +const SwitchDemo = () => { + return ( + + + Allow notifications + + ); +}; + +export default SwitchDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/TeaxtAreaDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/TeaxtAreaDemo.tsx new file mode 100644 index 0000000000..188da3877b --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/TeaxtAreaDemo.tsx @@ -0,0 +1,18 @@ +import { Textarea, TextareaInput } from '@/components/ui'; +import React from 'react'; + +const TextAreaDemo = () => { + return ( + + ); +}; + +export default TextAreaDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/TextDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/TextDemo.tsx new file mode 100644 index 0000000000..e756f27385 --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/TextDemo.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { Text } from '@/components/ui'; + +const TextDemo = () => { + return Hello World!; +}; + +export default TextDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ToastDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ToastDemo.tsx new file mode 100644 index 0000000000..ca462e6987 --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ToastDemo.tsx @@ -0,0 +1,15 @@ +import { Toast, ToastDescription, ToastTitle, VStack } from '@/components/ui'; +import React from 'react'; + +const ToastDemo = () => { + return ( + + + Info + Add a note here + + + ); +}; + +export default ToastDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/TooltipDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/TooltipDemo.tsx new file mode 100644 index 0000000000..bfa026c040 --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/TooltipDemo.tsx @@ -0,0 +1,29 @@ +import { + Tooltip, + TooltipContent, + TooltipText, + Button, + ButtonText, +} from '@/components/ui'; +import React from 'react'; + +const TooltipDemo = () => { + return ( + { + return ( + + ); + }} + > + + Tooltip + + + ); +}; + +export default TooltipDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/VStackDemo.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/VStackDemo.tsx new file mode 100644 index 0000000000..07c2c0b4b3 --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/VStackDemo.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { Box, VStack } from '@/components/ui'; + +const VStackDemo = () => { + return ( + + + + + + + ); +}; + +export default VStackDemo; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Grid.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Grid.tsx new file mode 100644 index 0000000000..ea5130412b --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/Grid.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { Box } from '@gluestack-ui/themed'; +import { ComponentCard } from './ComponentCard'; +import { content } from './content'; + +export const Grid = () => { + return ( + <> + + {content.map((item, index) => ( + + ))} + + + ); +}; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/content.tsx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/content.tsx new file mode 100644 index 0000000000..69288b7f84 --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/content.tsx @@ -0,0 +1,229 @@ +import React from 'react'; +import SelectDemo from './Demos/SelectDemo'; +import { CheckboxDemo } from './Demos/CheckboxDemo'; +import { SliderDemo } from './Demos/SliderDemo'; +import FormControlDemo from './Demos/FormControlDemo'; +import BadgeDemo from './Demos/BadgeDemo'; +import ToastDemo from './Demos/ToastDemo'; +import AvatarDemo from './Demos/AvatarDemo'; +import HeadingDemo from './Demos/HeadingDemo'; +import TextDemo from './Demos/TextDemo'; +import BoxDemo from './Demos/BoxDemo'; +import DividerDemo from './Demos/DividerDemo'; +import HStackDemo from './Demos/HStackDemo'; +import VStackDemo from './Demos/VStackDemo'; +import AlertDemo from './Demos/AlertDemo'; +import ProgressDemo from './Demos/ProgressDemo'; +import SpinnerDemo from './Demos/SpinnerDemo'; +import ButtonDemo from './Demos/ButtonDemo'; +import InputDemo from './Demos/InputDemo'; +import LinkDemo from './Demos/LinkDemo'; +import PressableDemo from './Demos/PressableDemo'; +import RadioDemo from './Demos/RadioDemo'; +import SwitchDemo from './Demos/SwitchDemo'; +import TextAreaDemo from './Demos/TeaxtAreaDemo'; +import TooltipDemo from './Demos/TooltipDemo'; +import IconDemo from './Demos/IconDemo'; +import ImageDemo from './Demos/ImageDemo'; +import FabDemo from './Demos/FabDemo'; +import CenterDemo from './Demos/CenterDemo'; +import AlertDialogDemo from './Demos/AlertDialogDemo'; +import ModalDemo from './Demos/ModalDemo'; +import AccordionDemo from './Demos/AccordionDemo'; +// import MenuDemo from './Demos/MenuDemo'; +// import PopoverDemo from './Demos/PopoverDemo'; +import ActionsheetDemo from './Demos/ActionsheetDemo'; + +export const content = [ + { + title: 'Actionsheet', + child: , + padding: '$0', + href: '/ui/docs/components/disclosure/actionsheet', + }, + { + title: 'AlertDialog', + child: , + padding: '$0', + href: '/ui/docs/components/overlay/alert-dialog', + }, + { + title: 'Alert', + child: , + href: '/ui/docs/components/feedback/alert', + }, + { + title: 'Avatar', + child: , + href: '/ui/docs/components/media-and-icons/avatar', + }, + { + title: 'Accordion', + child: , + href: '/ui/docs/components/disclosure/accordion', + }, + + { + title: 'Badge', + child: , + href: '/ui/docs/components/data-display/badge', + }, + { + title: 'Box', + child: , + href: '/ui/docs/components/layout/box', + }, + { + title: 'Button', + child: , + href: '/ui/docs/components/forms/button', + }, + + { + title: 'Center', + child: , + href: '/ui/docs/components/layout/center', + }, + { + title: 'Checkbox', + child: , + href: '/ui/docs/components/forms/checkbox', + }, + + { + title: 'Divider', + child: , + href: '/ui/docs/components/data-display/divider', + }, + + { + title: 'Fab', + child: , + href: '/ui/docs/components/others/fab', + }, + { + title: 'FormControl', + child: , + href: '/ui/docs/components/forms/form-control', + }, + { + title: 'Heading', + child: , + href: '/ui/docs/components/typography/heading', + }, + { + title: 'HStack', + child: , + href: '/ui/docs/components/layout/hstack', + }, + + { + title: 'Icon', + child: , + href: '/ui/docs/components/media-and-icons/icon', + }, + { + title: 'Image', + child: , + href: '/ui/docs/components/media-and-icons/image', + }, + { + title: 'Input', + child: , + href: '/ui/docs/components/forms/input', + }, + + { + title: 'Link', + child: , + href: '/ui/docs/components/forms/link', + }, + + // { + // title: 'Menu', + // child: , + // padding: '$0', + // href: '/ui/docs/components/overlay/menu', + // }, + + { + title: 'Modal', + child: , + padding: '$0', + href: '/ui/docs/components/overlay/modal', + }, + + // { + // title: 'Popover', + // child: , + // padding: '$0', + // href: '/ui/docs/components/overlay/popover', + // }, + + { + title: 'Pressable', + child: , + href: '/ui/docs/components/forms/pressable', + }, + { + title: 'Progress', + child: , + href: '/ui/docs/components/feedback/progress', + }, + + { + title: 'Radio', + child: , + href: '/ui/docs/components/forms/radio', + }, + + { + title: 'Select', + child: , + href: '/ui/docs/components/forms/select', + }, + + { + title: 'Slider', + child: , + href: '/ui/docs/components/forms/slider', + }, + { + title: 'Spinner', + child: , + href: '/ui/docs/components/feedback/spinner', + }, + { + title: 'Switch', + child: , + href: '/ui/docs/components/forms/switch', + }, + + { + title: 'Text', + child: , + href: '/ui/docs/components/typography/text', + }, + { + title: 'TextArea', + child: , + href: '/ui/docs/components/forms/textarea', + }, + { + title: 'Toast', + child: , + href: '/ui/docs/components/feedback/toast', + }, + + { + title: 'Tooltip', + child: , + href: '/ui/docs/components/overlay/tooltip', + }, + + { + title: 'VStack', + child: , + href: '/ui/docs/components/layout/vstack', + }, +]; diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/index.nw.stories.mdx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/index.nw.stories.mdx new file mode 100644 index 0000000000..31b8e58a60 --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/index.nw.stories.mdx @@ -0,0 +1,27 @@ +--- +title: All Components | gluestack-ui + +description: gluestack-ui provides 30+ responsive components for every screen and style + +pageTitle: All Components + +pageDescription: gluestack-ui provides 30+ responsive components for every screen and style + +toc: false +--- + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + + +import { AppProvider } from '@gluestack/design-system'; +import { config } from '@gluestack-ui/config'; +import { Grid } from './Grid'; + +# All Components + +30+ responsive components for every screen and style + + + + diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/index.themed.stories.mdx b/example/storybook-nativewind/src/overview/Introduction/AllComponents/index.themed.stories.mdx new file mode 100644 index 0000000000..ad681ea270 --- /dev/null +++ b/example/storybook-nativewind/src/overview/Introduction/AllComponents/index.themed.stories.mdx @@ -0,0 +1,27 @@ +--- +title: All Components | gluestack-ui + +description: gluestack-ui provides 30+ responsive components for every screen and style + +pageTitle: All Components + +pageDescription: gluestack-ui provides 30+ responsive components for every screen and style + +toc: false +--- + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + + +import { AppProvider } from '@gluestack/design-system'; +import { config } from '@gluestack-ui/config'; +import { Grid } from './Grid'; + +# All Components + +30+ responsive components for every screen and style + + + + From cc9e93f69fff2f963290968550ee74ff7ba12f44 Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Mon, 1 Apr 2024 17:36:24 +0530 Subject: [PATCH 29/78] feat: all components added --- example/storybook-nativewind/.storybook/preview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/.storybook/preview.js b/example/storybook-nativewind/.storybook/preview.js index 8201d81410..d80776cbb9 100644 --- a/example/storybook-nativewind/.storybook/preview.js +++ b/example/storybook-nativewind/.storybook/preview.js @@ -31,7 +31,7 @@ export const parameters = { method: '', order: [ 'Overview', - ['Introduction'], + ['Introduction', 'All Components'], 'Getting Started', ['Installation', 'Tooling Setup'], 'Core Concepts', From 490c25bd756f9622c746d00b466ff9e0b292b284 Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Mon, 1 Apr 2024 17:43:03 +0530 Subject: [PATCH 30/78] feat: all components added --- .../overview/{Introduction => }/AllComponents/ComponentCard.tsx | 0 .../{Introduction => }/AllComponents/Demos/AccordionDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/ActionsheetDemo.tsx | 0 .../overview/{Introduction => }/AllComponents/Demos/AlertDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/AlertDialogDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/AvatarDemo.tsx | 0 .../overview/{Introduction => }/AllComponents/Demos/BadgeDemo.tsx | 0 .../overview/{Introduction => }/AllComponents/Demos/BoxDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/ButtonDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/CenterDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/CheckboxDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/DividerDemo.tsx | 0 .../overview/{Introduction => }/AllComponents/Demos/FabDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/FormControlDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/HStackDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/HeadingDemo.tsx | 0 .../overview/{Introduction => }/AllComponents/Demos/IconDemo.tsx | 0 .../overview/{Introduction => }/AllComponents/Demos/ImageDemo.tsx | 0 .../overview/{Introduction => }/AllComponents/Demos/InputDemo.tsx | 0 .../overview/{Introduction => }/AllComponents/Demos/LinkDemo.tsx | 0 .../overview/{Introduction => }/AllComponents/Demos/MenuDemo.tsx | 0 .../overview/{Introduction => }/AllComponents/Demos/ModalDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/PopoverDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/PressableDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/ProgressDemo.tsx | 0 .../overview/{Introduction => }/AllComponents/Demos/RadioDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/SelectDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/SliderDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/SpinnerDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/SwitchDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/TeaxtAreaDemo.tsx | 0 .../overview/{Introduction => }/AllComponents/Demos/TextDemo.tsx | 0 .../overview/{Introduction => }/AllComponents/Demos/ToastDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/TooltipDemo.tsx | 0 .../{Introduction => }/AllComponents/Demos/VStackDemo.tsx | 0 .../src/overview/{Introduction => }/AllComponents/Grid.tsx | 0 .../src/overview/{Introduction => }/AllComponents/content.tsx | 0 .../{Introduction => }/AllComponents/index.nw.stories.mdx | 0 .../{Introduction => }/AllComponents/index.themed.stories.mdx | 0 39 files changed, 0 insertions(+), 0 deletions(-) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/ComponentCard.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/AccordionDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/ActionsheetDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/AlertDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/AlertDialogDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/AvatarDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/BadgeDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/BoxDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/ButtonDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/CenterDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/CheckboxDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/DividerDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/FabDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/FormControlDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/HStackDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/HeadingDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/IconDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/ImageDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/InputDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/LinkDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/MenuDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/ModalDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/PopoverDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/PressableDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/ProgressDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/RadioDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/SelectDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/SliderDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/SpinnerDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/SwitchDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/TeaxtAreaDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/TextDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/ToastDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/TooltipDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Demos/VStackDemo.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/Grid.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/content.tsx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/index.nw.stories.mdx (100%) rename example/storybook-nativewind/src/overview/{Introduction => }/AllComponents/index.themed.stories.mdx (100%) diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/ComponentCard.tsx b/example/storybook-nativewind/src/overview/AllComponents/ComponentCard.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/ComponentCard.tsx rename to example/storybook-nativewind/src/overview/AllComponents/ComponentCard.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/AccordionDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/AccordionDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/AccordionDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/AccordionDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ActionsheetDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/ActionsheetDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ActionsheetDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/ActionsheetDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/AlertDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/AlertDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/AlertDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/AlertDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/AlertDialogDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/AlertDialogDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/AlertDialogDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/AlertDialogDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/AvatarDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/AvatarDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/AvatarDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/AvatarDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/BadgeDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/BadgeDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/BadgeDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/BadgeDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/BoxDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/BoxDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/BoxDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/BoxDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ButtonDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/ButtonDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ButtonDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/ButtonDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/CenterDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/CenterDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/CenterDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/CenterDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/CheckboxDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/CheckboxDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/CheckboxDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/CheckboxDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/DividerDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/DividerDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/DividerDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/DividerDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/FabDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/FabDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/FabDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/FabDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/FormControlDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/FormControlDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/FormControlDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/FormControlDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/HStackDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/HStackDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/HStackDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/HStackDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/HeadingDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/HeadingDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/HeadingDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/HeadingDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/IconDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/IconDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/IconDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/IconDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ImageDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/ImageDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ImageDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/ImageDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/InputDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/InputDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/InputDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/InputDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/LinkDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/LinkDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/LinkDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/LinkDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/MenuDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/MenuDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/MenuDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/MenuDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ModalDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/ModalDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ModalDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/ModalDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/PopoverDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/PopoverDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/PopoverDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/PopoverDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/PressableDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/PressableDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/PressableDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/PressableDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ProgressDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/ProgressDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ProgressDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/ProgressDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/RadioDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/RadioDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/RadioDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/RadioDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SelectDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/SelectDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SelectDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/SelectDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SliderDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/SliderDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SliderDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/SliderDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SpinnerDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/SpinnerDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SpinnerDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/SpinnerDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SwitchDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/SwitchDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/SwitchDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/SwitchDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/TeaxtAreaDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/TeaxtAreaDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/TeaxtAreaDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/TeaxtAreaDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/TextDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/TextDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/TextDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/TextDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ToastDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/ToastDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/ToastDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/ToastDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/TooltipDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/TooltipDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/TooltipDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/TooltipDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/VStackDemo.tsx b/example/storybook-nativewind/src/overview/AllComponents/Demos/VStackDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Demos/VStackDemo.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Demos/VStackDemo.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/Grid.tsx b/example/storybook-nativewind/src/overview/AllComponents/Grid.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/Grid.tsx rename to example/storybook-nativewind/src/overview/AllComponents/Grid.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/content.tsx b/example/storybook-nativewind/src/overview/AllComponents/content.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/content.tsx rename to example/storybook-nativewind/src/overview/AllComponents/content.tsx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/index.nw.stories.mdx b/example/storybook-nativewind/src/overview/AllComponents/index.nw.stories.mdx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/index.nw.stories.mdx rename to example/storybook-nativewind/src/overview/AllComponents/index.nw.stories.mdx diff --git a/example/storybook-nativewind/src/overview/Introduction/AllComponents/index.themed.stories.mdx b/example/storybook-nativewind/src/overview/AllComponents/index.themed.stories.mdx similarity index 100% rename from example/storybook-nativewind/src/overview/Introduction/AllComponents/index.themed.stories.mdx rename to example/storybook-nativewind/src/overview/AllComponents/index.themed.stories.mdx From 7493659f33b4bfe2d7630a5e43b250b333ff1239 Mon Sep 17 00:00:00 2001 From: Rohit Singh Date: Mon, 1 Apr 2024 17:49:42 +0530 Subject: [PATCH 31/78] feat: heading optimized for perf --- .../nativewind/heading/index.tsx | 1 - .../nativewind/heading/index.web.tsx | 33 +++++++++---------- 2 files changed, 16 insertions(+), 18 deletions(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx index 25e864f4b9..027beba6ce 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/heading/index.tsx @@ -1,4 +1,3 @@ -'use client'; import React, { useCallback } from 'react'; import { H1, H2, H3, H4, H5, H6 } from '@expo/html-elements'; import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; diff --git a/example/storybook-nativewind/src/core-components/nativewind/heading/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/heading/index.web.tsx index 887d711fd7..48ad1a818b 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/heading/index.web.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/heading/index.web.tsx @@ -1,11 +1,9 @@ -'use client'; - -import React, { useCallback } from 'react'; +import React, { memo } from 'react'; import { headingStyle } from './styles'; -const Heading = ({ className, size = 'lg', as: AsComp, ...props }: any) => { - const MappedHeading = useCallback( - () => { +const Heading = memo( + ({ className, size = 'lg', as: AsComp, ...props }: any) => { + const MappedHeading = ({ size }: any) => { switch (size) { case '5xl': case '4xl': @@ -60,19 +58,20 @@ const Heading = ({ className, size = 'lg', as: AsComp, ...props }: any) => { /> ); } - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [size] - ); + }; - if (AsComp) { - return ( - - ); - } + if (AsComp) { + return ( + + ); + } - return ; -}; + return ; + } +); Heading.displayName = 'Heading'; From c54a2068ef7f5d226f9e13b313b94a58be328986 Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Mon, 1 Apr 2024 18:09:37 +0530 Subject: [PATCH 32/78] feat: all components added --- .../nativewind}/ComponentCard.tsx | 0 .../nativewind}/Demos/AccordionDemo.tsx | 0 .../nativewind}/Demos/ActionsheetDemo.tsx | 0 .../nativewind}/Demos/AlertDemo.tsx | 0 .../nativewind}/Demos/AlertDialogDemo.tsx | 0 .../nativewind}/Demos/AvatarDemo.tsx | 0 .../nativewind}/Demos/BadgeDemo.tsx | 0 .../nativewind}/Demos/BoxDemo.tsx | 0 .../nativewind}/Demos/ButtonDemo.tsx | 0 .../nativewind}/Demos/CenterDemo.tsx | 0 .../nativewind}/Demos/CheckboxDemo.tsx | 0 .../nativewind}/Demos/DividerDemo.tsx | 0 .../nativewind}/Demos/FabDemo.tsx | 0 .../nativewind}/Demos/FormControlDemo.tsx | 0 .../nativewind}/Demos/HStackDemo.tsx | 0 .../nativewind}/Demos/HeadingDemo.tsx | 0 .../nativewind}/Demos/IconDemo.tsx | 0 .../nativewind}/Demos/ImageDemo.tsx | 0 .../nativewind}/Demos/InputDemo.tsx | 0 .../nativewind}/Demos/LinkDemo.tsx | 0 .../nativewind}/Demos/MenuDemo.tsx | 0 .../nativewind}/Demos/ModalDemo.tsx | 0 .../nativewind}/Demos/PopoverDemo.tsx | 0 .../nativewind}/Demos/PressableDemo.tsx | 0 .../nativewind}/Demos/ProgressDemo.tsx | 0 .../nativewind}/Demos/RadioDemo.tsx | 0 .../nativewind}/Demos/SelectDemo.tsx | 0 .../nativewind}/Demos/SliderDemo.tsx | 0 .../nativewind}/Demos/SpinnerDemo.tsx | 0 .../nativewind}/Demos/SwitchDemo.tsx | 0 .../nativewind}/Demos/TeaxtAreaDemo.tsx | 0 .../nativewind}/Demos/TextDemo.tsx | 0 .../nativewind}/Demos/ToastDemo.tsx | 0 .../nativewind}/Demos/TooltipDemo.tsx | 0 .../nativewind}/Demos/VStackDemo.tsx | 0 .../nativewind}/Grid.tsx | 0 .../nativewind}/content.tsx | 0 .../src/core-components/nativewind/index.ts | 1 + .../core-components/themed/ComponentCard.tsx | 71 ++++++ .../themed/Demos/AccordionDemo.tsx | 136 +++++++++++ .../themed/Demos/ActionsheetDemo.tsx | 50 ++++ .../themed/Demos/AlertDemo.tsx | 14 ++ .../themed/Demos/AlertDialogDemo.tsx | 58 +++++ .../themed/Demos/AvatarDemo.tsx | 22 ++ .../themed/Demos/BadgeDemo.tsx | 13 + .../core-components/themed/Demos/BoxDemo.tsx | 12 + .../themed/Demos/ButtonDemo.tsx | 12 + .../themed/Demos/CenterDemo.tsx | 15 ++ .../themed/Demos/CheckboxDemo.tsx | 19 ++ .../themed/Demos/DividerDemo.tsx | 21 ++ .../core-components/themed/Demos/FabDemo.tsx | 15 ++ .../themed/Demos/FormControlDemo.tsx | 45 ++++ .../themed/Demos/HStackDemo.tsx | 14 ++ .../themed/Demos/HeadingDemo.tsx | 7 + .../core-components/themed/Demos/IconDemo.tsx | 7 + .../themed/Demos/ImageDemo.tsx | 15 ++ .../themed/Demos/InputDemo.tsx | 21 ++ .../core-components/themed/Demos/LinkDemo.tsx | 12 + .../core-components/themed/Demos/MenuDemo.tsx | 43 ++++ .../themed/Demos/ModalDemo.tsx | 78 ++++++ .../themed/Demos/PopoverDemo.tsx | 59 +++++ .../themed/Demos/PressableDemo.tsx | 12 + .../themed/Demos/ProgressDemo.tsx | 11 + .../themed/Demos/RadioDemo.tsx | 34 +++ .../themed/Demos/SelectDemo.tsx | 49 ++++ .../themed/Demos/SliderDemo.tsx | 24 ++ .../themed/Demos/SpinnerDemo.tsx | 8 + .../themed/Demos/SwitchDemo.tsx | 13 + .../themed/Demos/TeaxtAreaDemo.tsx | 18 ++ .../core-components/themed/Demos/TextDemo.tsx | 8 + .../themed/Demos/ToastDemo.tsx | 15 ++ .../themed/Demos/TooltipDemo.tsx | 29 +++ .../themed/Demos/VStackDemo.tsx | 19 ++ .../src/core-components/themed/Grid.tsx | 48 ++++ .../src/core-components/themed/content.tsx | 229 ++++++++++++++++++ .../src/core-components/themed/index.ts | 1 + .../AllComponents/index.nw.stories.mdx | 3 +- .../AllComponents/index.themed.stories.mdx | 3 +- 78 files changed, 1282 insertions(+), 2 deletions(-) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/ComponentCard.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/AccordionDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/ActionsheetDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/AlertDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/AlertDialogDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/AvatarDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/BadgeDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/BoxDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/ButtonDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/CenterDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/CheckboxDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/DividerDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/FabDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/FormControlDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/HStackDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/HeadingDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/IconDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/ImageDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/InputDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/LinkDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/MenuDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/ModalDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/PopoverDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/PressableDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/ProgressDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/RadioDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/SelectDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/SliderDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/SpinnerDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/SwitchDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/TeaxtAreaDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/TextDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/ToastDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/TooltipDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Demos/VStackDemo.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/Grid.tsx (100%) rename example/storybook-nativewind/src/{overview/AllComponents => core-components/nativewind}/content.tsx (100%) create mode 100644 example/storybook-nativewind/src/core-components/themed/ComponentCard.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/AccordionDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/ActionsheetDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/AlertDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/AlertDialogDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/AvatarDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/BadgeDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/BoxDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/ButtonDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/CenterDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/CheckboxDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/DividerDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/FabDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/FormControlDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/HStackDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/HeadingDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/IconDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/ImageDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/InputDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/LinkDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/MenuDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/PopoverDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/PressableDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/ProgressDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/RadioDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/SelectDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/SliderDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/SpinnerDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/SwitchDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/TeaxtAreaDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/TextDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/ToastDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/TooltipDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/VStackDemo.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/Grid.tsx create mode 100644 example/storybook-nativewind/src/core-components/themed/content.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/ComponentCard.tsx b/example/storybook-nativewind/src/core-components/nativewind/ComponentCard.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/ComponentCard.tsx rename to example/storybook-nativewind/src/core-components/nativewind/ComponentCard.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/AccordionDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/AccordionDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/AccordionDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/AccordionDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/ActionsheetDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ActionsheetDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/ActionsheetDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/ActionsheetDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/AlertDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/AlertDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/AlertDialogDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDialogDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/AlertDialogDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDialogDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/AvatarDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/AvatarDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/AvatarDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/AvatarDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/BadgeDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/BadgeDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/BadgeDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/BadgeDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/BoxDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/BoxDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/BoxDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/BoxDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/ButtonDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ButtonDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/ButtonDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/ButtonDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/CenterDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/CenterDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/CenterDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/CenterDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/CheckboxDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/CheckboxDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/CheckboxDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/CheckboxDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/DividerDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/DividerDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/DividerDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/DividerDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/FabDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/FabDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/FabDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/FabDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/FormControlDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/FormControlDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/FormControlDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/FormControlDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/HStackDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/HStackDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/HStackDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/HStackDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/HeadingDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/HeadingDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/HeadingDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/HeadingDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/IconDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/IconDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/IconDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/IconDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/ImageDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ImageDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/ImageDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/ImageDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/InputDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/InputDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/InputDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/InputDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/LinkDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/LinkDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/LinkDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/LinkDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/MenuDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/MenuDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/MenuDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/MenuDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/ModalDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ModalDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/ModalDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/ModalDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/PopoverDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/PopoverDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/PopoverDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/PopoverDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/PressableDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/PressableDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/PressableDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/PressableDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/ProgressDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ProgressDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/ProgressDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/ProgressDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/RadioDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/RadioDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/RadioDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/RadioDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/SelectDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/SelectDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/SelectDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/SelectDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/SliderDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/SliderDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/SliderDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/SliderDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/SpinnerDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/SpinnerDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/SpinnerDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/SpinnerDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/SwitchDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/SwitchDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/SwitchDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/SwitchDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/TeaxtAreaDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/TeaxtAreaDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/TeaxtAreaDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/TeaxtAreaDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/TextDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/TextDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/TextDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/TextDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/ToastDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ToastDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/ToastDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/ToastDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/TooltipDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/TooltipDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/TooltipDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/TooltipDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Demos/VStackDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/VStackDemo.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Demos/VStackDemo.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Demos/VStackDemo.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/Grid.tsx b/example/storybook-nativewind/src/core-components/nativewind/Grid.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/Grid.tsx rename to example/storybook-nativewind/src/core-components/nativewind/Grid.tsx diff --git a/example/storybook-nativewind/src/overview/AllComponents/content.tsx b/example/storybook-nativewind/src/core-components/nativewind/content.tsx similarity index 100% rename from example/storybook-nativewind/src/overview/AllComponents/content.tsx rename to example/storybook-nativewind/src/core-components/nativewind/content.tsx diff --git a/example/storybook-nativewind/src/core-components/nativewind/index.ts b/example/storybook-nativewind/src/core-components/nativewind/index.ts index d24c280d57..eeb0ae381f 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/index.ts +++ b/example/storybook-nativewind/src/core-components/nativewind/index.ts @@ -46,3 +46,4 @@ export { GluestackUIProvider } from './gluestack-ui-provider'; export * from './virtualized-list'; export * from './refresh-control'; export * from './image-background'; +export { Grid } from './Grid'; diff --git a/example/storybook-nativewind/src/core-components/themed/ComponentCard.tsx b/example/storybook-nativewind/src/core-components/themed/ComponentCard.tsx new file mode 100644 index 0000000000..720d26ea3a --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/ComponentCard.tsx @@ -0,0 +1,71 @@ +import React from 'react'; +import { Box, Text, VStack } from '@gluestack/design-system'; +import NextLink from 'next/link'; + +export const ComponentCard = ({ + title, + child, + padding, + href, +}: { + title: string; + child: React.ReactNode; + padding?: string; + props?: any; + href: string; +}) => { + return ( + + + {child} + + + + + {title} + + + + + ); +}; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/AccordionDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/AccordionDemo.tsx new file mode 100644 index 0000000000..2f623d85c3 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/AccordionDemo.tsx @@ -0,0 +1,136 @@ +import React from 'react'; +import { + Accordion, + AccordionItem, + AccordionHeader, + AccordionTrigger, + AccordionTitleText, + AccordionIcon, + AccordionContent, + AccordionContentText, +} from '@/components/ui'; +import { ChevronDownIcon } from 'lucide-react-native'; +import { ChevronUpIcon } from 'lucide-react-native'; +import { ScrollView } from '@/components/ui'; +const AccordionDemo = () => { + const accRef = React.useRef(null); + return ( + + + + + + {(states: any) => ( + <> + + How do I place an order? + + {states.isExpanded ? ( + + ) : ( + + )} + + )} + + + + + Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id, sed + laudantium eligendi maxime rerum, saepe vitae unde voluptas hic, + culpa ex dolorem omnis incidunt quisquam? Ex fuga debitis + recusandae incidunt. + + + + + + + + {({ isExpanded }: { isExpanded: boolean }) => { + return ( + <> + + What payment methods do you accept? + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. + Perferendis maxime modi quaerat temporibus quos, omnis, vel ullam + debitis labore error fugit, blanditiis dolore illum consequuntur + laboriosam. Voluptates est obcaecati nemo! + + + + + + + + {({ isExpanded }: { isExpanded: boolean }) => { + 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. + + + + + + + + {({ isExpanded }: { isExpanded: boolean }) => { + return ( + <> + + Can I cancel my subscription at any time? + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + Lorem ipsum dolor sit amet consectetur adipisicing elit. Et + dolorem eos ex officia ratione omnis similique delectus aliquam + culpa. Minus quis numquam laboriosam non natus, distinctio facilis + aspernatur beatae earum. + + + + + + ); +}; + +export default AccordionDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ActionsheetDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ActionsheetDemo.tsx new file mode 100644 index 0000000000..cba831b23b --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/ActionsheetDemo.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { Button, ButtonText, Center } from '@/components/ui'; +import { + Actionsheet, + ActionsheetBackdrop, + ActionsheetContent, + ActionsheetDragIndicator, + ActionsheetDragIndicatorWrapper, + ActionsheetItem, + ActionsheetItemText, +} from '@/components/ui/actionsheet'; + +const ActionsheetDemo = () => { + const [showActionsheet, setShowActionsheet] = React.useState(false); + + const handleClose = () => setShowActionsheet(false); + + return ( +
+ + + + + + + + + Delete + + + Share + + + Play + + + Favourite + + + Cancel + + + +
+ ); +}; + +export default ActionsheetDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/AlertDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/AlertDemo.tsx new file mode 100644 index 0000000000..855dc5e827 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/AlertDemo.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { Alert, AlertIcon, AlertText } from '@/components/ui/alert'; +import { InfoIcon } from '@/components/ui'; + +const AlertDemo = () => { + return ( + + + Selection successfully moved! + + ); +}; + +export default AlertDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/AlertDialogDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/AlertDialogDemo.tsx new file mode 100644 index 0000000000..b934731491 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/AlertDialogDemo.tsx @@ -0,0 +1,58 @@ +import React, { useState } from 'react'; +import { + Button, + ButtonText, + AlertDialog, + AlertDialogBackdrop, + AlertDialogContent, + AlertDialogHeader, + AlertDialogBody, + Text, + AlertDialogFooter, + AlertDialogCloseButton, +} from '@/components/ui'; +import { Heading } from '@/components/ui/heading'; +import { X } from 'lucide-react-native'; + +const AlertDialogDemo = () => { + const [showAlertDialog, setShowAlertDialog] = useState(false); + const handleClose = () => setShowAlertDialog(!showAlertDialog); + return ( + <> + + + + + + Return Policy + + + + + + + Whoa, slow down there! This modal is like a red light at an + intersection, reminding you to stop and think before you proceed. + Is deleting this folder the right choice? + + + + + + + + + + ); +}; + +export default AlertDialogDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/AvatarDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/AvatarDemo.tsx new file mode 100644 index 0000000000..5d395dacef --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/AvatarDemo.tsx @@ -0,0 +1,22 @@ +import { + Avatar, + AvatarBadge, + AvatarFallbackText, + AvatarImage, +} from '@/components/ui/avatar'; +import React from 'react'; +const Avatardemo = () => { + return ( + + John Doe + + + + ); +}; + +export default Avatardemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/BadgeDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/BadgeDemo.tsx new file mode 100644 index 0000000000..de72530c01 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/BadgeDemo.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { Badge, BadgeText, BadgeIcon } from '@/components/ui/badge'; +import { GlobeIcon } from '@/components/ui/icon'; +const BadgeDemo = () => { + return ( + + Verified + + + ); +}; + +export default BadgeDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/BoxDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/BoxDemo.tsx new file mode 100644 index 0000000000..9497745a69 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/BoxDemo.tsx @@ -0,0 +1,12 @@ +import { Box, Text } from '@/components/ui'; +import React from 'react'; + +const BoxDemo = () => { + return ( + + This is the Box + + ); +}; + +export default BoxDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ButtonDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ButtonDemo.tsx new file mode 100644 index 0000000000..286f524d44 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/ButtonDemo.tsx @@ -0,0 +1,12 @@ +import { Button, ButtonText } from '@/components/ui/button'; +import React from 'react'; + +const ButtonDemo = () => { + return ( + + ); +}; + +export default ButtonDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/CenterDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/CenterDemo.tsx new file mode 100644 index 0000000000..0f9f6e99ad --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/CenterDemo.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { Center } from '@/components/ui/center'; +import { Text } from '@/components/ui/text'; + +const CenterDemo = () => { + return ( +
+ + This is the center. + +
+ ); +}; + +export default CenterDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/CheckboxDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/CheckboxDemo.tsx new file mode 100644 index 0000000000..620c3d037f --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/CheckboxDemo.tsx @@ -0,0 +1,19 @@ +import { + CheckIcon, + Checkbox, + CheckboxIcon, + CheckboxIndicator, + CheckboxLabel, +} from '@/components/ui'; +import React from 'react'; + +export const CheckboxDemo = () => { + return ( + + + + + Label + + ); +}; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/DividerDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/DividerDemo.tsx new file mode 100644 index 0000000000..5de0103cb5 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/DividerDemo.tsx @@ -0,0 +1,21 @@ +import React from 'react'; +import { HStack, Heading, Divider } from '@/components/ui'; + +const DividerDemo = () => { + return ( + + + Firefox + + + + Chrome + + + ); +}; + +export default DividerDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/FabDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/FabDemo.tsx new file mode 100644 index 0000000000..887f51d051 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/FabDemo.tsx @@ -0,0 +1,15 @@ +import { Fab, FabIcon, Box, MenuIcon, FabLabel } from '@/components/ui'; +import React from 'react'; + +const FabDemo = () => { + return ( + + + + Menu + + + ); +}; + +export default FabDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/FormControlDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/FormControlDemo.tsx new file mode 100644 index 0000000000..e68db12116 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/FormControlDemo.tsx @@ -0,0 +1,45 @@ +import React from 'react'; +import { + AlertCircleIcon, + FormControl, + FormControlHelper, + Input, + FormControlLabel, + FormControlLabelText, + FormControlHelperText, + FormControlError, + FormControlErrorText, + FormControlErrorIcon, + InputField, +} from '@/components/ui'; +const FormControlDemo = () => { + return ( + + + Password + + + + + + + + Must be atleast 6 characters. + + + + + + + Atleast 6 characters are required. + + + + ); +}; + +export default FormControlDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/HStackDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/HStackDemo.tsx new file mode 100644 index 0000000000..f60b4e3a83 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/HStackDemo.tsx @@ -0,0 +1,14 @@ +import React from 'react'; +import { Box, HStack } from '@/components/ui'; + +const HStackDemo = () => { + return ( + + + + + + ); +}; + +export default HStackDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/HeadingDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/HeadingDemo.tsx new file mode 100644 index 0000000000..986ef5747b --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/HeadingDemo.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { Heading } from '@/components/ui'; +const HeadingDemo = () => { + return I am a Heading; +}; + +export default HeadingDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/IconDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/IconDemo.tsx new file mode 100644 index 0000000000..e07aa7b051 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/IconDemo.tsx @@ -0,0 +1,7 @@ +import React from 'react'; +import { EditIcon, Icon } from '@/components/ui'; + +const IconDemo = () => { + return ; +}; +export default IconDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ImageDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ImageDemo.tsx new file mode 100644 index 0000000000..fef1ce92dc --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/ImageDemo.tsx @@ -0,0 +1,15 @@ +import React from 'react'; +import { Image } from '@/components/ui'; + +const ImageDemo = () => { + return ( + + ); +}; + +export default ImageDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/InputDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/InputDemo.tsx new file mode 100644 index 0000000000..3984cc1605 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/InputDemo.tsx @@ -0,0 +1,21 @@ +import { + Input, + InputField, + InputIcon, + InputSlot, + SearchIcon, +} from '@/components/ui'; +import React from 'react'; + +const InputDemo = () => { + return ( + + + + + + + ); +}; + +export default InputDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/LinkDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/LinkDemo.tsx new file mode 100644 index 0000000000..7647359620 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/LinkDemo.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import { Link, LinkText } from '@/components/ui'; + +const LinkDemo = () => { + return ( + + gluestack + + ); +}; + +export default LinkDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/MenuDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/MenuDemo.tsx new file mode 100644 index 0000000000..7bfd812924 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/MenuDemo.tsx @@ -0,0 +1,43 @@ +import { + Menu, + Button, + MenuItem, + Icon, + MenuItemLabel, + GlobeIcon, + ButtonText, +} from '@/components/ui'; +import { PuzzleIcon, SettingsIcon } from 'lucide-react-native'; +import React from 'react'; + +const MenuDemo = () => { + return ( + { + return ( + + ); + }} + > + + + Community + + + + Settings + + + + Plugins + + + ); +}; + +export default MenuDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx new file mode 100644 index 0000000000..978fba6cd6 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx @@ -0,0 +1,78 @@ +import { + Heading, + ModalBackdrop, + Button, + ButtonText, + Modal, + ModalContent, + ModalHeader, + ModalCloseButton, + Icon, + CloseIcon, + ModalBody, + Text, + ModalFooter, + Center, +} from '@/components/ui'; +import React, { useState } from 'react'; + +const ModalDemo = () => { + const [showModal, setShowModal] = useState(false); + const ref = React.useRef(null); + return ( +
+ + { + setShowModal(false); + }} + finalFocusRef={ref} + > + + + + Engage with Modals + + + + + + + Elevate user interactions with our versatile modals. Seamlessly + integrate notifications, forms, and media displays. Make an impact + effortlessly. + + + + + + + + +
+ ); +}; + +export default ModalDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/PopoverDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/PopoverDemo.tsx new file mode 100644 index 0000000000..4ab767371b --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/PopoverDemo.tsx @@ -0,0 +1,59 @@ +import { + Avatar, + Box, + Popover, + Pressable, + Text, + PopoverContent, + AvatarFallbackText, + PopoverBody, + HStack, + CircleIcon, +} from '@/components/ui'; +import React from 'react'; + +const PopoverDemo = () => { + const [showPopover, setShowPopover] = React.useState(true); + + return ( + + { + return ( + { + setShowPopover(!showPopover); + }} + > + + Kevin James + + + ); + }} + > + + + + Kevin James + + + + + Active + + + + + + + ); +}; + +export default PopoverDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/PressableDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/PressableDemo.tsx new file mode 100644 index 0000000000..dbcfdcb796 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/PressableDemo.tsx @@ -0,0 +1,12 @@ +import { Pressable, Text } from '@/components/ui'; +import React from 'react'; + +const PressableDemo = () => { + return ( + + Press me + + ); +}; + +export default PressableDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ProgressDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ProgressDemo.tsx new file mode 100644 index 0000000000..837086136a --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/ProgressDemo.tsx @@ -0,0 +1,11 @@ +import React from 'react'; +import { Progress, ProgressFilledTrack } from '@/components/ui'; +const ProgressDemo = () => { + return ( + + + + ); +}; + +export default ProgressDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/RadioDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/RadioDemo.tsx new file mode 100644 index 0000000000..ed2c868063 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/RadioDemo.tsx @@ -0,0 +1,34 @@ +import React, { useState } from 'react'; +import { + CircleIcon, + Radio, + RadioGroup, + RadioIcon, + RadioIndicator, + RadioLabel, + VStack, +} from '@/components/ui'; + +const RadioDemo = () => { + const [values, setValues] = useState('Monday'); + return ( + + + + Option A + + + + + + Option B + + + + + + + ); +}; + +export default RadioDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/SelectDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/SelectDemo.tsx new file mode 100644 index 0000000000..e4d3ac7a23 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/SelectDemo.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import { + ChevronDownIcon, + Icon, + Select, + SelectTrigger, + SelectInput, + SelectIcon, + SelectPortal, + SelectBackdrop, + SelectContent, + SelectDragIndicatorWrapper, + SelectDragIndicator, + SelectItem, +} from '@/components/ui'; + +const SelectDemo = () => { + return ( + + ); +}; + +export default SelectDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/SliderDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/SliderDemo.tsx new file mode 100644 index 0000000000..629eb1572c --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/SliderDemo.tsx @@ -0,0 +1,24 @@ +import { + Slider, + SliderFilledTrack, + SliderThumb, + SliderTrack, +} from '@/components/ui'; +import React from 'react'; + +export const SliderDemo = () => { + return ( + + + + + + + ); +}; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/SpinnerDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/SpinnerDemo.tsx new file mode 100644 index 0000000000..26f0139464 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/SpinnerDemo.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { Spinner } from '@/components/ui'; + +const SpinnerDemo = () => { + return ; +}; + +export default SpinnerDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/SwitchDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/SwitchDemo.tsx new file mode 100644 index 0000000000..ead2df65eb --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/SwitchDemo.tsx @@ -0,0 +1,13 @@ +import React from 'react'; +import { HStack, Switch, Text } from '@/components/ui'; + +const SwitchDemo = () => { + return ( + + + Allow notifications + + ); +}; + +export default SwitchDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/TeaxtAreaDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/TeaxtAreaDemo.tsx new file mode 100644 index 0000000000..188da3877b --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/TeaxtAreaDemo.tsx @@ -0,0 +1,18 @@ +import { Textarea, TextareaInput } from '@/components/ui'; +import React from 'react'; + +const TextAreaDemo = () => { + return ( + + ); +}; + +export default TextAreaDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/TextDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/TextDemo.tsx new file mode 100644 index 0000000000..e756f27385 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/TextDemo.tsx @@ -0,0 +1,8 @@ +import React from 'react'; +import { Text } from '@/components/ui'; + +const TextDemo = () => { + return Hello World!; +}; + +export default TextDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ToastDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ToastDemo.tsx new file mode 100644 index 0000000000..ca462e6987 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/ToastDemo.tsx @@ -0,0 +1,15 @@ +import { Toast, ToastDescription, ToastTitle, VStack } from '@/components/ui'; +import React from 'react'; + +const ToastDemo = () => { + return ( + + + Info + Add a note here + + + ); +}; + +export default ToastDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/TooltipDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/TooltipDemo.tsx new file mode 100644 index 0000000000..bfa026c040 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/TooltipDemo.tsx @@ -0,0 +1,29 @@ +import { + Tooltip, + TooltipContent, + TooltipText, + Button, + ButtonText, +} from '@/components/ui'; +import React from 'react'; + +const TooltipDemo = () => { + return ( + { + return ( + + ); + }} + > + + Tooltip + + + ); +}; + +export default TooltipDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/VStackDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/VStackDemo.tsx new file mode 100644 index 0000000000..07c2c0b4b3 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Demos/VStackDemo.tsx @@ -0,0 +1,19 @@ +import React from 'react'; +import { Box, VStack } from '@/components/ui'; + +const VStackDemo = () => { + return ( + + + + + + + ); +}; + +export default VStackDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Grid.tsx b/example/storybook-nativewind/src/core-components/themed/Grid.tsx new file mode 100644 index 0000000000..ea5130412b --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/Grid.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import { Box } from '@gluestack-ui/themed'; +import { ComponentCard } from './ComponentCard'; +import { content } from './content'; + +export const Grid = () => { + return ( + <> + + {content.map((item, index) => ( + + ))} + + + ); +}; diff --git a/example/storybook-nativewind/src/core-components/themed/content.tsx b/example/storybook-nativewind/src/core-components/themed/content.tsx new file mode 100644 index 0000000000..69288b7f84 --- /dev/null +++ b/example/storybook-nativewind/src/core-components/themed/content.tsx @@ -0,0 +1,229 @@ +import React from 'react'; +import SelectDemo from './Demos/SelectDemo'; +import { CheckboxDemo } from './Demos/CheckboxDemo'; +import { SliderDemo } from './Demos/SliderDemo'; +import FormControlDemo from './Demos/FormControlDemo'; +import BadgeDemo from './Demos/BadgeDemo'; +import ToastDemo from './Demos/ToastDemo'; +import AvatarDemo from './Demos/AvatarDemo'; +import HeadingDemo from './Demos/HeadingDemo'; +import TextDemo from './Demos/TextDemo'; +import BoxDemo from './Demos/BoxDemo'; +import DividerDemo from './Demos/DividerDemo'; +import HStackDemo from './Demos/HStackDemo'; +import VStackDemo from './Demos/VStackDemo'; +import AlertDemo from './Demos/AlertDemo'; +import ProgressDemo from './Demos/ProgressDemo'; +import SpinnerDemo from './Demos/SpinnerDemo'; +import ButtonDemo from './Demos/ButtonDemo'; +import InputDemo from './Demos/InputDemo'; +import LinkDemo from './Demos/LinkDemo'; +import PressableDemo from './Demos/PressableDemo'; +import RadioDemo from './Demos/RadioDemo'; +import SwitchDemo from './Demos/SwitchDemo'; +import TextAreaDemo from './Demos/TeaxtAreaDemo'; +import TooltipDemo from './Demos/TooltipDemo'; +import IconDemo from './Demos/IconDemo'; +import ImageDemo from './Demos/ImageDemo'; +import FabDemo from './Demos/FabDemo'; +import CenterDemo from './Demos/CenterDemo'; +import AlertDialogDemo from './Demos/AlertDialogDemo'; +import ModalDemo from './Demos/ModalDemo'; +import AccordionDemo from './Demos/AccordionDemo'; +// import MenuDemo from './Demos/MenuDemo'; +// import PopoverDemo from './Demos/PopoverDemo'; +import ActionsheetDemo from './Demos/ActionsheetDemo'; + +export const content = [ + { + title: 'Actionsheet', + child: , + padding: '$0', + href: '/ui/docs/components/disclosure/actionsheet', + }, + { + title: 'AlertDialog', + child: , + padding: '$0', + href: '/ui/docs/components/overlay/alert-dialog', + }, + { + title: 'Alert', + child: , + href: '/ui/docs/components/feedback/alert', + }, + { + title: 'Avatar', + child: , + href: '/ui/docs/components/media-and-icons/avatar', + }, + { + title: 'Accordion', + child: , + href: '/ui/docs/components/disclosure/accordion', + }, + + { + title: 'Badge', + child: , + href: '/ui/docs/components/data-display/badge', + }, + { + title: 'Box', + child: , + href: '/ui/docs/components/layout/box', + }, + { + title: 'Button', + child: , + href: '/ui/docs/components/forms/button', + }, + + { + title: 'Center', + child: , + href: '/ui/docs/components/layout/center', + }, + { + title: 'Checkbox', + child: , + href: '/ui/docs/components/forms/checkbox', + }, + + { + title: 'Divider', + child: , + href: '/ui/docs/components/data-display/divider', + }, + + { + title: 'Fab', + child: , + href: '/ui/docs/components/others/fab', + }, + { + title: 'FormControl', + child: , + href: '/ui/docs/components/forms/form-control', + }, + { + title: 'Heading', + child: , + href: '/ui/docs/components/typography/heading', + }, + { + title: 'HStack', + child: , + href: '/ui/docs/components/layout/hstack', + }, + + { + title: 'Icon', + child: , + href: '/ui/docs/components/media-and-icons/icon', + }, + { + title: 'Image', + child: , + href: '/ui/docs/components/media-and-icons/image', + }, + { + title: 'Input', + child: , + href: '/ui/docs/components/forms/input', + }, + + { + title: 'Link', + child: , + href: '/ui/docs/components/forms/link', + }, + + // { + // title: 'Menu', + // child: , + // padding: '$0', + // href: '/ui/docs/components/overlay/menu', + // }, + + { + title: 'Modal', + child: , + padding: '$0', + href: '/ui/docs/components/overlay/modal', + }, + + // { + // title: 'Popover', + // child: , + // padding: '$0', + // href: '/ui/docs/components/overlay/popover', + // }, + + { + title: 'Pressable', + child: , + href: '/ui/docs/components/forms/pressable', + }, + { + title: 'Progress', + child: , + href: '/ui/docs/components/feedback/progress', + }, + + { + title: 'Radio', + child: , + href: '/ui/docs/components/forms/radio', + }, + + { + title: 'Select', + child: , + href: '/ui/docs/components/forms/select', + }, + + { + title: 'Slider', + child: , + href: '/ui/docs/components/forms/slider', + }, + { + title: 'Spinner', + child: , + href: '/ui/docs/components/feedback/spinner', + }, + { + title: 'Switch', + child: , + href: '/ui/docs/components/forms/switch', + }, + + { + title: 'Text', + child: , + href: '/ui/docs/components/typography/text', + }, + { + title: 'TextArea', + child: , + href: '/ui/docs/components/forms/textarea', + }, + { + title: 'Toast', + child: , + href: '/ui/docs/components/feedback/toast', + }, + + { + title: 'Tooltip', + child: , + href: '/ui/docs/components/overlay/tooltip', + }, + + { + title: 'VStack', + child: , + href: '/ui/docs/components/layout/vstack', + }, +]; diff --git a/example/storybook-nativewind/src/core-components/themed/index.ts b/example/storybook-nativewind/src/core-components/themed/index.ts index 56a869eeac..1ef3bbce97 100644 --- a/example/storybook-nativewind/src/core-components/themed/index.ts +++ b/example/storybook-nativewind/src/core-components/themed/index.ts @@ -46,3 +46,4 @@ export { GluestackUIProvider } from './gluestack-ui-provider'; export * from './virtualized-list'; export * from './refresh-control'; export * from './image-background'; +export { Grid } from './Grid'; diff --git a/example/storybook-nativewind/src/overview/AllComponents/index.nw.stories.mdx b/example/storybook-nativewind/src/overview/AllComponents/index.nw.stories.mdx index 31b8e58a60..a26d1c3d79 100644 --- a/example/storybook-nativewind/src/overview/AllComponents/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/overview/AllComponents/index.nw.stories.mdx @@ -16,7 +16,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; import { AppProvider } from '@gluestack/design-system'; import { config } from '@gluestack-ui/config'; -import { Grid } from './Grid'; +import { Grid } from '../../core-components/nativewind'; # All Components @@ -25,3 +25,4 @@ import { Grid } from './Grid'; +../../core-components/nativewind/Grid../../core-components/nativewind/Grid \ No newline at end of file diff --git a/example/storybook-nativewind/src/overview/AllComponents/index.themed.stories.mdx b/example/storybook-nativewind/src/overview/AllComponents/index.themed.stories.mdx index ad681ea270..0f52e3bf00 100644 --- a/example/storybook-nativewind/src/overview/AllComponents/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/overview/AllComponents/index.themed.stories.mdx @@ -16,7 +16,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; import { AppProvider } from '@gluestack/design-system'; import { config } from '@gluestack-ui/config'; -import { Grid } from './Grid'; +import { Grid } from '../../core-components/themed'; # All Components @@ -25,3 +25,4 @@ import { Grid } from './Grid'; +../../core-components/nativewind/Grid \ No newline at end of file From e25bd1e9e000f85785a7f208948071aa8c7c10bb Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Mon, 1 Apr 2024 18:17:48 +0530 Subject: [PATCH 33/78] feat: all components added --- .../core-components/nativewind/Demos/AccordionDemo.tsx | 4 ++-- .../core-components/nativewind/Demos/ActionsheetDemo.tsx | 4 ++-- .../src/core-components/nativewind/Demos/AlertDemo.tsx | 4 ++-- .../core-components/nativewind/Demos/AlertDialogDemo.tsx | 4 ++-- .../src/core-components/nativewind/Demos/AvatarDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/BadgeDemo.tsx | 4 ++-- .../src/core-components/nativewind/Demos/BoxDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/ButtonDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/CenterDemo.tsx | 4 ++-- .../src/core-components/nativewind/Demos/CheckboxDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/DividerDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/FabDemo.tsx | 2 +- .../core-components/nativewind/Demos/FormControlDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/HStackDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/HeadingDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/IconDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/ImageDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/InputDemo.tsx | 8 +------- .../src/core-components/nativewind/Demos/LinkDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/MenuDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/ModalDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/PopoverDemo.tsx | 2 +- .../core-components/nativewind/Demos/PressableDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/ProgressDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/RadioDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/SelectDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/SliderDemo.tsx | 7 +------ .../src/core-components/nativewind/Demos/SpinnerDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/SwitchDemo.tsx | 2 +- .../core-components/nativewind/Demos/TeaxtAreaDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/TextDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/ToastDemo.tsx | 2 +- .../src/core-components/nativewind/Demos/TooltipDemo.tsx | 8 +------- .../src/core-components/nativewind/Demos/VStackDemo.tsx | 2 +- .../src/core-components/themed/Demos/AccordionDemo.tsx | 4 ++-- .../src/core-components/themed/Demos/ActionsheetDemo.tsx | 4 ++-- .../src/core-components/themed/Demos/AlertDemo.tsx | 4 ++-- .../src/core-components/themed/Demos/AlertDialogDemo.tsx | 4 ++-- .../src/core-components/themed/Demos/AvatarDemo.tsx | 2 +- .../src/core-components/themed/Demos/BadgeDemo.tsx | 4 ++-- .../src/core-components/themed/Demos/BoxDemo.tsx | 2 +- .../src/core-components/themed/Demos/ButtonDemo.tsx | 2 +- .../src/core-components/themed/Demos/CenterDemo.tsx | 4 ++-- .../src/core-components/themed/Demos/CheckboxDemo.tsx | 2 +- .../src/core-components/themed/Demos/DividerDemo.tsx | 2 +- .../src/core-components/themed/Demos/FabDemo.tsx | 2 +- .../src/core-components/themed/Demos/FormControlDemo.tsx | 2 +- .../src/core-components/themed/Demos/HStackDemo.tsx | 2 +- .../src/core-components/themed/Demos/HeadingDemo.tsx | 2 +- .../src/core-components/themed/Demos/IconDemo.tsx | 2 +- .../src/core-components/themed/Demos/ImageDemo.tsx | 2 +- .../src/core-components/themed/Demos/InputDemo.tsx | 8 +------- .../src/core-components/themed/Demos/LinkDemo.tsx | 2 +- .../src/core-components/themed/Demos/MenuDemo.tsx | 2 +- .../src/core-components/themed/Demos/ModalDemo.tsx | 2 +- .../src/core-components/themed/Demos/PopoverDemo.tsx | 2 +- .../src/core-components/themed/Demos/PressableDemo.tsx | 2 +- .../src/core-components/themed/Demos/ProgressDemo.tsx | 2 +- .../src/core-components/themed/Demos/RadioDemo.tsx | 2 +- .../src/core-components/themed/Demos/SelectDemo.tsx | 2 +- .../src/core-components/themed/Demos/SliderDemo.tsx | 7 +------ .../src/core-components/themed/Demos/SpinnerDemo.tsx | 2 +- .../src/core-components/themed/Demos/SwitchDemo.tsx | 2 +- .../src/core-components/themed/Demos/TeaxtAreaDemo.tsx | 2 +- .../src/core-components/themed/Demos/TextDemo.tsx | 2 +- .../src/core-components/themed/Demos/ToastDemo.tsx | 2 +- .../src/core-components/themed/Demos/TooltipDemo.tsx | 8 +------- .../src/core-components/themed/Demos/VStackDemo.tsx | 2 +- 68 files changed, 80 insertions(+), 114 deletions(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/AccordionDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/AccordionDemo.tsx index 2f623d85c3..3cdddcea28 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/AccordionDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/AccordionDemo.tsx @@ -8,10 +8,10 @@ import { AccordionIcon, AccordionContent, AccordionContentText, -} from '@/components/ui'; +} from '../'; import { ChevronDownIcon } from 'lucide-react-native'; import { ChevronUpIcon } from 'lucide-react-native'; -import { ScrollView } from '@/components/ui'; +import { ScrollView } from '../'; const AccordionDemo = () => { const accRef = React.useRef(null); return ( diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/ActionsheetDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ActionsheetDemo.tsx index cba831b23b..0d809ca220 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/ActionsheetDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/ActionsheetDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, ButtonText, Center } from '@/components/ui'; +import { Button, ButtonText, Center } from '../'; import { Actionsheet, ActionsheetBackdrop, @@ -8,7 +8,7 @@ import { ActionsheetDragIndicatorWrapper, ActionsheetItem, ActionsheetItemText, -} from '@/components/ui/actionsheet'; +} from '..//actionsheet'; const ActionsheetDemo = () => { const [showActionsheet, setShowActionsheet] = React.useState(false); diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDemo.tsx index 855dc5e827..e51a70e94b 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDemo.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Alert, AlertIcon, AlertText } from '@/components/ui/alert'; -import { InfoIcon } from '@/components/ui'; +import { Alert, AlertIcon, AlertText } from '..//alert'; +import { InfoIcon } from '../'; const AlertDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDialogDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDialogDemo.tsx index b934731491..e1b49e30f7 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDialogDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDialogDemo.tsx @@ -10,8 +10,8 @@ import { Text, AlertDialogFooter, AlertDialogCloseButton, -} from '@/components/ui'; -import { Heading } from '@/components/ui/heading'; +} from '../'; +import { Heading } from '..//heading'; import { X } from 'lucide-react-native'; const AlertDialogDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/AvatarDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/AvatarDemo.tsx index 5d395dacef..570c456fce 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/AvatarDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/AvatarDemo.tsx @@ -3,7 +3,7 @@ import { AvatarBadge, AvatarFallbackText, AvatarImage, -} from '@/components/ui/avatar'; +} from '..//avatar'; import React from 'react'; const Avatardemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/BadgeDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/BadgeDemo.tsx index de72530c01..970bed8f39 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/BadgeDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/BadgeDemo.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Badge, BadgeText, BadgeIcon } from '@/components/ui/badge'; -import { GlobeIcon } from '@/components/ui/icon'; +import { Badge, BadgeText, BadgeIcon } from '..//badge'; +import { GlobeIcon } from '..//icon'; const BadgeDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/BoxDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/BoxDemo.tsx index 9497745a69..047b6c859b 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/BoxDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/BoxDemo.tsx @@ -1,4 +1,4 @@ -import { Box, Text } from '@/components/ui'; +import { Box, Text } from '../'; import React from 'react'; const BoxDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/ButtonDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ButtonDemo.tsx index 286f524d44..83067af774 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/ButtonDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/ButtonDemo.tsx @@ -1,4 +1,4 @@ -import { Button, ButtonText } from '@/components/ui/button'; +import { Button, ButtonText } from '..//button'; import React from 'react'; const ButtonDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/CenterDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/CenterDemo.tsx index 0f9f6e99ad..54ffdb59f1 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/CenterDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/CenterDemo.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Center } from '@/components/ui/center'; -import { Text } from '@/components/ui/text'; +import { Center } from '..//center'; +import { Text } from '..//text'; const CenterDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/CheckboxDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/CheckboxDemo.tsx index 620c3d037f..4e115a4eba 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/CheckboxDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/CheckboxDemo.tsx @@ -4,7 +4,7 @@ import { CheckboxIcon, CheckboxIndicator, CheckboxLabel, -} from '@/components/ui'; +} from '../'; import React from 'react'; export const CheckboxDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/DividerDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/DividerDemo.tsx index 5de0103cb5..2e14ad3841 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/DividerDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/DividerDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { HStack, Heading, Divider } from '@/components/ui'; +import { HStack, Heading, Divider } from '../'; const DividerDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/FabDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/FabDemo.tsx index 887f51d051..bf35b9148f 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/FabDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/FabDemo.tsx @@ -1,4 +1,4 @@ -import { Fab, FabIcon, Box, MenuIcon, FabLabel } from '@/components/ui'; +import { Fab, FabIcon, Box, MenuIcon, FabLabel } from '../'; import React from 'react'; const FabDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/FormControlDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/FormControlDemo.tsx index e68db12116..e7dc9ee535 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/FormControlDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/FormControlDemo.tsx @@ -11,7 +11,7 @@ import { FormControlErrorText, FormControlErrorIcon, InputField, -} from '@/components/ui'; +} from '../'; const FormControlDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/HStackDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/HStackDemo.tsx index f60b4e3a83..d0c576ded6 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/HStackDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/HStackDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, HStack } from '@/components/ui'; +import { Box, HStack } from '../'; const HStackDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/HeadingDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/HeadingDemo.tsx index 986ef5747b..3b0b7e224e 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/HeadingDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/HeadingDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Heading } from '@/components/ui'; +import { Heading } from '../'; const HeadingDemo = () => { return I am a Heading; }; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/IconDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/IconDemo.tsx index e07aa7b051..d0acb991a0 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/IconDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/IconDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { EditIcon, Icon } from '@/components/ui'; +import { EditIcon, Icon } from '../'; const IconDemo = () => { return ; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/ImageDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ImageDemo.tsx index fef1ce92dc..5f88eaf406 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/ImageDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/ImageDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Image } from '@/components/ui'; +import { Image } from '../'; const ImageDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/InputDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/InputDemo.tsx index 3984cc1605..7863be4060 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/InputDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/InputDemo.tsx @@ -1,10 +1,4 @@ -import { - Input, - InputField, - InputIcon, - InputSlot, - SearchIcon, -} from '@/components/ui'; +import { Input, InputField, InputIcon, InputSlot, SearchIcon } from '../'; import React from 'react'; const InputDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/LinkDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/LinkDemo.tsx index 7647359620..368ce52d87 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/LinkDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/LinkDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Link, LinkText } from '@/components/ui'; +import { Link, LinkText } from '../'; const LinkDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/MenuDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/MenuDemo.tsx index 7bfd812924..4ac04df82c 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/MenuDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/MenuDemo.tsx @@ -6,7 +6,7 @@ import { MenuItemLabel, GlobeIcon, ButtonText, -} from '@/components/ui'; +} from '../'; import { PuzzleIcon, SettingsIcon } from 'lucide-react-native'; import React from 'react'; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/ModalDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ModalDemo.tsx index 978fba6cd6..4da1dfebca 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/ModalDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/ModalDemo.tsx @@ -13,7 +13,7 @@ import { Text, ModalFooter, Center, -} from '@/components/ui'; +} from '../'; import React, { useState } from 'react'; const ModalDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/PopoverDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/PopoverDemo.tsx index 4ab767371b..d67dc5c495 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/PopoverDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/PopoverDemo.tsx @@ -9,7 +9,7 @@ import { PopoverBody, HStack, CircleIcon, -} from '@/components/ui'; +} from '../'; import React from 'react'; const PopoverDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/PressableDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/PressableDemo.tsx index dbcfdcb796..c0ebd1d939 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/PressableDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/PressableDemo.tsx @@ -1,4 +1,4 @@ -import { Pressable, Text } from '@/components/ui'; +import { Pressable, Text } from '../'; import React from 'react'; const PressableDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/ProgressDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ProgressDemo.tsx index 837086136a..9c47eeb8f4 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/ProgressDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/ProgressDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Progress, ProgressFilledTrack } from '@/components/ui'; +import { Progress, ProgressFilledTrack } from '../'; const ProgressDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/RadioDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/RadioDemo.tsx index ed2c868063..0276e86b16 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/RadioDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/RadioDemo.tsx @@ -7,7 +7,7 @@ import { RadioIndicator, RadioLabel, VStack, -} from '@/components/ui'; +} from '../'; const RadioDemo = () => { const [values, setValues] = useState('Monday'); diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/SelectDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/SelectDemo.tsx index e4d3ac7a23..59bd1d7221 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/SelectDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/SelectDemo.tsx @@ -12,7 +12,7 @@ import { SelectDragIndicatorWrapper, SelectDragIndicator, SelectItem, -} from '@/components/ui'; +} from '../'; const SelectDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/SliderDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/SliderDemo.tsx index 629eb1572c..c572521fa3 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/SliderDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/SliderDemo.tsx @@ -1,9 +1,4 @@ -import { - Slider, - SliderFilledTrack, - SliderThumb, - SliderTrack, -} from '@/components/ui'; +import { Slider, SliderFilledTrack, SliderThumb, SliderTrack } from '../'; import React from 'react'; export const SliderDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/SpinnerDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/SpinnerDemo.tsx index 26f0139464..c44bd9f924 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/SpinnerDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/SpinnerDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Spinner } from '@/components/ui'; +import { Spinner } from '../'; const SpinnerDemo = () => { return ; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/SwitchDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/SwitchDemo.tsx index ead2df65eb..7cfa4522e8 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/SwitchDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/SwitchDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { HStack, Switch, Text } from '@/components/ui'; +import { HStack, Switch, Text } from '../'; const SwitchDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/TeaxtAreaDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/TeaxtAreaDemo.tsx index 188da3877b..928d77a246 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/TeaxtAreaDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/TeaxtAreaDemo.tsx @@ -1,4 +1,4 @@ -import { Textarea, TextareaInput } from '@/components/ui'; +import { Textarea, TextareaInput } from '../'; import React from 'react'; const TextAreaDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/TextDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/TextDemo.tsx index e756f27385..ee8d9cc668 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/TextDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/TextDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Text } from '@/components/ui'; +import { Text } from '../'; const TextDemo = () => { return Hello World!; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/ToastDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ToastDemo.tsx index ca462e6987..6fcf35e699 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/ToastDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/ToastDemo.tsx @@ -1,4 +1,4 @@ -import { Toast, ToastDescription, ToastTitle, VStack } from '@/components/ui'; +import { Toast, ToastDescription, ToastTitle, VStack } from '../'; import React from 'react'; const ToastDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/TooltipDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/TooltipDemo.tsx index bfa026c040..808ea0b534 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/TooltipDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/TooltipDemo.tsx @@ -1,10 +1,4 @@ -import { - Tooltip, - TooltipContent, - TooltipText, - Button, - ButtonText, -} from '@/components/ui'; +import { Tooltip, TooltipContent, TooltipText, Button, ButtonText } from '../'; import React from 'react'; const TooltipDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/VStackDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/VStackDemo.tsx index 07c2c0b4b3..b36dd55f88 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/VStackDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/VStackDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, VStack } from '@/components/ui'; +import { Box, VStack } from '../'; const VStackDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/AccordionDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/AccordionDemo.tsx index 2f623d85c3..3cdddcea28 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/AccordionDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/AccordionDemo.tsx @@ -8,10 +8,10 @@ import { AccordionIcon, AccordionContent, AccordionContentText, -} from '@/components/ui'; +} from '../'; import { ChevronDownIcon } from 'lucide-react-native'; import { ChevronUpIcon } from 'lucide-react-native'; -import { ScrollView } from '@/components/ui'; +import { ScrollView } from '../'; const AccordionDemo = () => { const accRef = React.useRef(null); return ( diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ActionsheetDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ActionsheetDemo.tsx index cba831b23b..0d809ca220 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/ActionsheetDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/ActionsheetDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, ButtonText, Center } from '@/components/ui'; +import { Button, ButtonText, Center } from '../'; import { Actionsheet, ActionsheetBackdrop, @@ -8,7 +8,7 @@ import { ActionsheetDragIndicatorWrapper, ActionsheetItem, ActionsheetItemText, -} from '@/components/ui/actionsheet'; +} from '..//actionsheet'; const ActionsheetDemo = () => { const [showActionsheet, setShowActionsheet] = React.useState(false); diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/AlertDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/AlertDemo.tsx index 855dc5e827..e51a70e94b 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/AlertDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/AlertDemo.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Alert, AlertIcon, AlertText } from '@/components/ui/alert'; -import { InfoIcon } from '@/components/ui'; +import { Alert, AlertIcon, AlertText } from '..//alert'; +import { InfoIcon } from '../'; const AlertDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/AlertDialogDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/AlertDialogDemo.tsx index b934731491..e1b49e30f7 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/AlertDialogDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/AlertDialogDemo.tsx @@ -10,8 +10,8 @@ import { Text, AlertDialogFooter, AlertDialogCloseButton, -} from '@/components/ui'; -import { Heading } from '@/components/ui/heading'; +} from '../'; +import { Heading } from '..//heading'; import { X } from 'lucide-react-native'; const AlertDialogDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/AvatarDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/AvatarDemo.tsx index 5d395dacef..570c456fce 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/AvatarDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/AvatarDemo.tsx @@ -3,7 +3,7 @@ import { AvatarBadge, AvatarFallbackText, AvatarImage, -} from '@/components/ui/avatar'; +} from '..//avatar'; import React from 'react'; const Avatardemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/BadgeDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/BadgeDemo.tsx index de72530c01..970bed8f39 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/BadgeDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/BadgeDemo.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Badge, BadgeText, BadgeIcon } from '@/components/ui/badge'; -import { GlobeIcon } from '@/components/ui/icon'; +import { Badge, BadgeText, BadgeIcon } from '..//badge'; +import { GlobeIcon } from '..//icon'; const BadgeDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/BoxDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/BoxDemo.tsx index 9497745a69..047b6c859b 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/BoxDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/BoxDemo.tsx @@ -1,4 +1,4 @@ -import { Box, Text } from '@/components/ui'; +import { Box, Text } from '../'; import React from 'react'; const BoxDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ButtonDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ButtonDemo.tsx index 286f524d44..83067af774 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/ButtonDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/ButtonDemo.tsx @@ -1,4 +1,4 @@ -import { Button, ButtonText } from '@/components/ui/button'; +import { Button, ButtonText } from '..//button'; import React from 'react'; const ButtonDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/CenterDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/CenterDemo.tsx index 0f9f6e99ad..54ffdb59f1 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/CenterDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/CenterDemo.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import { Center } from '@/components/ui/center'; -import { Text } from '@/components/ui/text'; +import { Center } from '..//center'; +import { Text } from '..//text'; const CenterDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/CheckboxDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/CheckboxDemo.tsx index 620c3d037f..4e115a4eba 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/CheckboxDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/CheckboxDemo.tsx @@ -4,7 +4,7 @@ import { CheckboxIcon, CheckboxIndicator, CheckboxLabel, -} from '@/components/ui'; +} from '../'; import React from 'react'; export const CheckboxDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/DividerDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/DividerDemo.tsx index 5de0103cb5..2e14ad3841 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/DividerDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/DividerDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { HStack, Heading, Divider } from '@/components/ui'; +import { HStack, Heading, Divider } from '../'; const DividerDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/FabDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/FabDemo.tsx index 887f51d051..bf35b9148f 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/FabDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/FabDemo.tsx @@ -1,4 +1,4 @@ -import { Fab, FabIcon, Box, MenuIcon, FabLabel } from '@/components/ui'; +import { Fab, FabIcon, Box, MenuIcon, FabLabel } from '../'; import React from 'react'; const FabDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/FormControlDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/FormControlDemo.tsx index e68db12116..e7dc9ee535 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/FormControlDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/FormControlDemo.tsx @@ -11,7 +11,7 @@ import { FormControlErrorText, FormControlErrorIcon, InputField, -} from '@/components/ui'; +} from '../'; const FormControlDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/HStackDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/HStackDemo.tsx index f60b4e3a83..d0c576ded6 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/HStackDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/HStackDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, HStack } from '@/components/ui'; +import { Box, HStack } from '../'; const HStackDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/HeadingDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/HeadingDemo.tsx index 986ef5747b..3b0b7e224e 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/HeadingDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/HeadingDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Heading } from '@/components/ui'; +import { Heading } from '../'; const HeadingDemo = () => { return I am a Heading; }; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/IconDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/IconDemo.tsx index e07aa7b051..d0acb991a0 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/IconDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/IconDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { EditIcon, Icon } from '@/components/ui'; +import { EditIcon, Icon } from '../'; const IconDemo = () => { return ; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ImageDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ImageDemo.tsx index fef1ce92dc..5f88eaf406 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/ImageDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/ImageDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Image } from '@/components/ui'; +import { Image } from '../'; const ImageDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/InputDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/InputDemo.tsx index 3984cc1605..7863be4060 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/InputDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/InputDemo.tsx @@ -1,10 +1,4 @@ -import { - Input, - InputField, - InputIcon, - InputSlot, - SearchIcon, -} from '@/components/ui'; +import { Input, InputField, InputIcon, InputSlot, SearchIcon } from '../'; import React from 'react'; const InputDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/LinkDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/LinkDemo.tsx index 7647359620..368ce52d87 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/LinkDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/LinkDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Link, LinkText } from '@/components/ui'; +import { Link, LinkText } from '../'; const LinkDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/MenuDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/MenuDemo.tsx index 7bfd812924..4ac04df82c 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/MenuDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/MenuDemo.tsx @@ -6,7 +6,7 @@ import { MenuItemLabel, GlobeIcon, ButtonText, -} from '@/components/ui'; +} from '../'; import { PuzzleIcon, SettingsIcon } from 'lucide-react-native'; import React from 'react'; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx index 978fba6cd6..4da1dfebca 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx @@ -13,7 +13,7 @@ import { Text, ModalFooter, Center, -} from '@/components/ui'; +} from '../'; import React, { useState } from 'react'; const ModalDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/PopoverDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/PopoverDemo.tsx index 4ab767371b..d67dc5c495 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/PopoverDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/PopoverDemo.tsx @@ -9,7 +9,7 @@ import { PopoverBody, HStack, CircleIcon, -} from '@/components/ui'; +} from '../'; import React from 'react'; const PopoverDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/PressableDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/PressableDemo.tsx index dbcfdcb796..c0ebd1d939 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/PressableDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/PressableDemo.tsx @@ -1,4 +1,4 @@ -import { Pressable, Text } from '@/components/ui'; +import { Pressable, Text } from '../'; import React from 'react'; const PressableDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ProgressDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ProgressDemo.tsx index 837086136a..9c47eeb8f4 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/ProgressDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/ProgressDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Progress, ProgressFilledTrack } from '@/components/ui'; +import { Progress, ProgressFilledTrack } from '../'; const ProgressDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/RadioDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/RadioDemo.tsx index ed2c868063..0276e86b16 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/RadioDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/RadioDemo.tsx @@ -7,7 +7,7 @@ import { RadioIndicator, RadioLabel, VStack, -} from '@/components/ui'; +} from '../'; const RadioDemo = () => { const [values, setValues] = useState('Monday'); diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/SelectDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/SelectDemo.tsx index e4d3ac7a23..59bd1d7221 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/SelectDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/SelectDemo.tsx @@ -12,7 +12,7 @@ import { SelectDragIndicatorWrapper, SelectDragIndicator, SelectItem, -} from '@/components/ui'; +} from '../'; const SelectDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/SliderDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/SliderDemo.tsx index 629eb1572c..c572521fa3 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/SliderDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/SliderDemo.tsx @@ -1,9 +1,4 @@ -import { - Slider, - SliderFilledTrack, - SliderThumb, - SliderTrack, -} from '@/components/ui'; +import { Slider, SliderFilledTrack, SliderThumb, SliderTrack } from '../'; import React from 'react'; export const SliderDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/SpinnerDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/SpinnerDemo.tsx index 26f0139464..c44bd9f924 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/SpinnerDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/SpinnerDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Spinner } from '@/components/ui'; +import { Spinner } from '../'; const SpinnerDemo = () => { return ; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/SwitchDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/SwitchDemo.tsx index ead2df65eb..7cfa4522e8 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/SwitchDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/SwitchDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { HStack, Switch, Text } from '@/components/ui'; +import { HStack, Switch, Text } from '../'; const SwitchDemo = () => { return ( diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/TeaxtAreaDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/TeaxtAreaDemo.tsx index 188da3877b..928d77a246 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/TeaxtAreaDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/TeaxtAreaDemo.tsx @@ -1,4 +1,4 @@ -import { Textarea, TextareaInput } from '@/components/ui'; +import { Textarea, TextareaInput } from '../'; import React from 'react'; const TextAreaDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/TextDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/TextDemo.tsx index e756f27385..ee8d9cc668 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/TextDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/TextDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Text } from '@/components/ui'; +import { Text } from '../'; const TextDemo = () => { return Hello World!; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ToastDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ToastDemo.tsx index ca462e6987..6fcf35e699 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/ToastDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/ToastDemo.tsx @@ -1,4 +1,4 @@ -import { Toast, ToastDescription, ToastTitle, VStack } from '@/components/ui'; +import { Toast, ToastDescription, ToastTitle, VStack } from '../'; import React from 'react'; const ToastDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/TooltipDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/TooltipDemo.tsx index bfa026c040..808ea0b534 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/TooltipDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/TooltipDemo.tsx @@ -1,10 +1,4 @@ -import { - Tooltip, - TooltipContent, - TooltipText, - Button, - ButtonText, -} from '@/components/ui'; +import { Tooltip, TooltipContent, TooltipText, Button, ButtonText } from '../'; import React from 'react'; const TooltipDemo = () => { diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/VStackDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/VStackDemo.tsx index 07c2c0b4b3..b36dd55f88 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/VStackDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/VStackDemo.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Box, VStack } from '@/components/ui'; +import { Box, VStack } from '../'; const VStackDemo = () => { return ( From 77e3f095433860a1b5ce8fc426acf1e1ae6bd6c8 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Mon, 1 Apr 2024 18:24:31 +0530 Subject: [PATCH 34/78] fix: introduction for nativewind --- .../src/overview/Introduction/index.nw.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/overview/Introduction/index.nw.stories.mdx b/example/storybook-nativewind/src/overview/Introduction/index.nw.stories.mdx index 21e2016833..dea683df2e 100644 --- a/example/storybook-nativewind/src/overview/Introduction/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/overview/Introduction/index.nw.stories.mdx @@ -19,7 +19,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; - Full Customization: Tailor components to fit your project's needs by adjusting styles and behaviors. ->Note: This is not a component library as you cannot import components inside your application, to directly import components inside your application you can directly use [@gluestack-ui/themed](/ui/docs). +>Note: This pattern uses [NativeWind](https://www.nativewind.dev/v4/overview) version 4.0.36. For styling guidelines, please refer to NativeWind [documentation](https://www.nativewind.dev/v4/overview). ## Community From 346ead01c087ff0cfd6a846214ca4a7c1a36d933 Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Mon, 1 Apr 2024 18:24:51 +0530 Subject: [PATCH 35/78] feat: all components added --- .../src/overview/AllComponents/index.nw.stories.mdx | 7 ++++--- .../src/overview/AllComponents/index.themed.stories.mdx | 6 +++--- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/example/storybook-nativewind/src/overview/AllComponents/index.nw.stories.mdx b/example/storybook-nativewind/src/overview/AllComponents/index.nw.stories.mdx index a26d1c3d79..0d21a1caad 100644 --- a/example/storybook-nativewind/src/overview/AllComponents/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/overview/AllComponents/index.nw.stories.mdx @@ -17,12 +17,13 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; import { AppProvider } from '@gluestack/design-system'; import { config } from '@gluestack-ui/config'; import { Grid } from '../../core-components/nativewind'; +import Wrapper from '../../core-components/nativewind/Wrapper'; + # All Components 30+ responsive components for every screen and style - + - -../../core-components/nativewind/Grid../../core-components/nativewind/Grid \ No newline at end of file + \ No newline at end of file diff --git a/example/storybook-nativewind/src/overview/AllComponents/index.themed.stories.mdx b/example/storybook-nativewind/src/overview/AllComponents/index.themed.stories.mdx index 0f52e3bf00..ef64236aeb 100644 --- a/example/storybook-nativewind/src/overview/AllComponents/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/overview/AllComponents/index.themed.stories.mdx @@ -17,12 +17,12 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; import { AppProvider } from '@gluestack/design-system'; import { config } from '@gluestack-ui/config'; import { Grid } from '../../core-components/themed'; +import Wrapper from '../../core-components/themed/Wrapper'; # All Components 30+ responsive components for every screen and style - + - -../../core-components/nativewind/Grid \ No newline at end of file + \ No newline at end of file From 97af8bd1dbab328314c476df8594b33941cca8fd Mon Sep 17 00:00:00 2001 From: Rohit Singh Date: Mon, 1 Apr 2024 18:40:18 +0530 Subject: [PATCH 36/78] feat: rsc optional note in docs --- .../src/components/Box/index.nw.stories.mdx | 2 ++ .../src/components/Card/index.nw.stories.mdx | 2 ++ .../src/components/Center/index.nw.stories.mdx | 2 ++ .../src/components/HStack/index.nw.stories.mdx | 2 ++ .../src/components/Heading/index.nw.stories.mdx | 2 ++ .../src/components/Text/index.nw.stories.mdx | 2 ++ .../src/components/VStack/index.nw.stories.mdx | 2 ++ 7 files changed, 14 insertions(+) diff --git a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx index 4db059d72b..43e0117682 100644 --- a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx @@ -88,6 +88,8 @@ This is an illustration of **Box** component. ``` +> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.** + ### Step 2: Copy and paste the following code into index.web.tsx in your project. diff --git a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx index 25551e3bc3..5d168ed347 100644 --- a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx @@ -120,6 +120,8 @@ This is an illustration of a **Card** component. ``` +> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.** + ### Step 2: Copy and paste the following code into index.web.tsx in your project. diff --git a/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx index 6ac036a32a..dc015ed490 100644 --- a/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx @@ -86,6 +86,8 @@ This is an illustration of **Center** component. ``` +> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.** + ### Step 2: Copy and paste the following code into index.web.tsx in your project. diff --git a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx index 11588ff648..e8cc4f07fc 100644 --- a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx @@ -97,6 +97,8 @@ This is an illustration of **HStack** component. ``` +> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.** + ### Step 2: Copy and paste the following code into index.web.tsx in your project. diff --git a/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx index c545201ede..35aa8d1153 100644 --- a/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx @@ -85,6 +85,8 @@ This is an illustration of **Heading** component. ``` +> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.** + ### Step 2: Copy and paste the following code into index.web.tsx in your project. diff --git a/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx index 90b57a5a92..fb432b0e17 100644 --- a/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx @@ -85,6 +85,8 @@ This is an illustration of **Text** component. ``` +> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.** + ### Step 2: Copy and paste the following code into index.web.tsx in your project. diff --git a/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx b/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx index 949f45caae..5904aede56 100644 --- a/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx @@ -103,6 +103,8 @@ This is an illustration of **VStack** component. ``` +> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.** + ### Step 2: Copy and paste the following code into index.web.tsx in your project. From 20d843afd42559453fc29c78b43a89eca73c2287 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Mon, 1 Apr 2024 19:08:08 +0530 Subject: [PATCH 37/78] fix: added figma kit --- .../figma-ui-kit/index.nw.stories.mdx | 35 +++++++++++++++++++ .../figma-ui-kit/index.themed.stories.mdx | 35 +++++++++++++++++++ 2 files changed, 70 insertions(+) create mode 100644 example/storybook-nativewind/src/getting-started/figma-ui-kit/index.nw.stories.mdx create mode 100644 example/storybook-nativewind/src/getting-started/figma-ui-kit/index.themed.stories.mdx diff --git a/example/storybook-nativewind/src/getting-started/figma-ui-kit/index.nw.stories.mdx b/example/storybook-nativewind/src/getting-started/figma-ui-kit/index.nw.stories.mdx new file mode 100644 index 0000000000..f45c09d866 --- /dev/null +++ b/example/storybook-nativewind/src/getting-started/figma-ui-kit/index.nw.stories.mdx @@ -0,0 +1,35 @@ +--- +title: Figma UI Kit | gluestack-ui +description: The Figma UI Kit provides a collection of ready-to-use UI components from the gluestack-ui library. +--- + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + + +# Figma UI Kit + +The [Figma UI Kit](https://www.figma.com/@gluestack) provides a collection of ready-to-use UI components from the gluestack-ui library. So you can directly use these components in Figma and design your app. The developers won’t have a chance to say this is not possible! + +## Auto-generated + +Yes, our Figma UI Kit is auto-generated from the storybook. This helps us maintain a single source of truth, providing design-development consistency which is very important if you are building at scale. + +## Customize with ease + +- **AutoLayout support** - AutoLayout is a powerful feature in Figma that helps you create responsive and flexible designs by automatically adjusting the layout and spacing of elements within frames. It's particularly useful for designing interfaces that need to adapt to various screen sizes or content changes. + +- **Color Tokens** - Color tokens in Figma refer to a systematic and organized way of managing and using colors within your design projects. They help maintain consistency and make it easier to update colors across your designs by defining a centralized set of color values that can be reused throughout your project. In this Figma UI Kit we have a beautiful palette around 4312 color tokens with alpha support, covering around 48 colors with its 10 hues. + +- **Text Tokens** - Text tokens in Figma, sometimes referred to as text styles or text components, allow you to define and manage a consistent set of text properties such as font, size, line spacing, color, and more. Text tokens help maintain a unified text style across your design project, making it easier to ensure consistency and make global updates when needed. In this Figma UI Kit, we have two major foundation components **Text** and **Heading**, along with its sizes and font weights. + +- **Shadow Tokens** - Shadow tokens in Figma, sometimes referred to as effect styles, allow you to define and manage Effects, like drop shadows, stroke, blur and even images as Styles. In this Figma UI Kit, we majorly have included two shadows, named **Hard** and **Soft** shadows. + +- **Components** - Components in Figma are reusable design elements that allow you to create consistent and efficient designs. Components can represent UI elements, icons, buttons, or any other visual elements that you want to reuse across your design projects. This Figma UI Kit, includes around 23 components along with its instances mapped in compound components. + + + +## Try it now + +Find the Figma UI Kit live [here](https://www.figma.com/community/file/1284424195134275844/gluestack-ui-v0-1-design-kit-auto-generated)! + diff --git a/example/storybook-nativewind/src/getting-started/figma-ui-kit/index.themed.stories.mdx b/example/storybook-nativewind/src/getting-started/figma-ui-kit/index.themed.stories.mdx new file mode 100644 index 0000000000..f45c09d866 --- /dev/null +++ b/example/storybook-nativewind/src/getting-started/figma-ui-kit/index.themed.stories.mdx @@ -0,0 +1,35 @@ +--- +title: Figma UI Kit | gluestack-ui +description: The Figma UI Kit provides a collection of ready-to-use UI components from the gluestack-ui library. +--- + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; + + + +# Figma UI Kit + +The [Figma UI Kit](https://www.figma.com/@gluestack) provides a collection of ready-to-use UI components from the gluestack-ui library. So you can directly use these components in Figma and design your app. The developers won’t have a chance to say this is not possible! + +## Auto-generated + +Yes, our Figma UI Kit is auto-generated from the storybook. This helps us maintain a single source of truth, providing design-development consistency which is very important if you are building at scale. + +## Customize with ease + +- **AutoLayout support** - AutoLayout is a powerful feature in Figma that helps you create responsive and flexible designs by automatically adjusting the layout and spacing of elements within frames. It's particularly useful for designing interfaces that need to adapt to various screen sizes or content changes. + +- **Color Tokens** - Color tokens in Figma refer to a systematic and organized way of managing and using colors within your design projects. They help maintain consistency and make it easier to update colors across your designs by defining a centralized set of color values that can be reused throughout your project. In this Figma UI Kit we have a beautiful palette around 4312 color tokens with alpha support, covering around 48 colors with its 10 hues. + +- **Text Tokens** - Text tokens in Figma, sometimes referred to as text styles or text components, allow you to define and manage a consistent set of text properties such as font, size, line spacing, color, and more. Text tokens help maintain a unified text style across your design project, making it easier to ensure consistency and make global updates when needed. In this Figma UI Kit, we have two major foundation components **Text** and **Heading**, along with its sizes and font weights. + +- **Shadow Tokens** - Shadow tokens in Figma, sometimes referred to as effect styles, allow you to define and manage Effects, like drop shadows, stroke, blur and even images as Styles. In this Figma UI Kit, we majorly have included two shadows, named **Hard** and **Soft** shadows. + +- **Components** - Components in Figma are reusable design elements that allow you to create consistent and efficient designs. Components can represent UI elements, icons, buttons, or any other visual elements that you want to reuse across your design projects. This Figma UI Kit, includes around 23 components along with its instances mapped in compound components. + + + +## Try it now + +Find the Figma UI Kit live [here](https://www.figma.com/community/file/1284424195134275844/gluestack-ui-v0-1-design-kit-auto-generated)! + From 741a23176a6ad58a446ac8ac05b4f303545be9f7 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Mon, 1 Apr 2024 19:09:49 +0530 Subject: [PATCH 38/78] fix: preview js --- example/storybook-nativewind/.storybook/preview.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/.storybook/preview.js b/example/storybook-nativewind/.storybook/preview.js index 0e9f42cf26..bbae3e782d 100644 --- a/example/storybook-nativewind/.storybook/preview.js +++ b/example/storybook-nativewind/.storybook/preview.js @@ -33,7 +33,7 @@ export const parameters = { 'Overview', ['Introduction'], 'Getting Started', - ['Installation', 'Tooling Setup'], + ['Installation', 'Tooling Setup', 'Figma UI Kit'], 'Core Concepts', ['Accessibility', 'Universal'], 'Theme Configuration', From c5cbf3cce047eb6c518ed7740764dd313b8995a2 Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 2 Apr 2024 07:53:23 +0530 Subject: [PATCH 39/78] feat: add cli and manual installation tabs for actionsheet nativewind component --- .../Actionsheet/index.nw.stories.mdx | 29 +++++++++++++++++++ 1 file changed, 29 insertions(+) diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx index f39f378e5e..1d9bdfdbce 100644 --- a/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx @@ -61,6 +61,7 @@ import { AddIcon, InfoIcon, Alert, + Tabs } from '@gluestack/design-system'; import {Platform, KeyboardAvoidingView,} from 'react-native'; import {CreditCardIcon} from 'lucide-react-native'; @@ -134,6 +135,28 @@ function App(){ ## Installation + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add actionsheet + ``` + + + +<> + ### Step 1: Install the following dependencies: ```bash npm i @gluestack-ui/actionsheet @@ -146,6 +169,12 @@ npm i @gluestack-ui/actionsheet ``` +### 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. From 9bea68180f721c101d6da4206bc3935254080386 Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 2 Apr 2024 07:59:13 +0530 Subject: [PATCH 40/78] feat: add cli and manual installation tabs for toast nativewind component --- .../src/components/Toast/index.nw.stories.mdx | 27 +++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx index de187fb01a..4be2cd25e6 100644 --- a/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx @@ -38,6 +38,7 @@ import { Text, InlineCode, CollapsibleCode, + Tabs, } from '@gluestack/design-system'; import { View } from 'react-native'; import Wrapper from '../../core-components/nativewind/Wrapper'; @@ -114,6 +115,28 @@ This is an illustration of **Toast** component. ## Installation + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add toast + ``` + + + +<> + ### Step 1: Install the following dependencies: ```bash @@ -133,6 +156,10 @@ npm i @gluestack-ui/toast ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference From db1057975ea721d6dae8b21698f1778127d6b5e8 Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 2 Apr 2024 08:14:03 +0530 Subject: [PATCH 41/78] fix: default tokens page url in customizing theme page --- .../theme-configuration/customizing-theme/index.nw.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.nw.stories.mdx b/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.nw.stories.mdx index 782ceefe4b..1980e0d586 100644 --- a/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.nw.stories.mdx @@ -511,7 +511,7 @@ export const config = { }, ``` -You can customize all the tokens of the theme in `config`. For a complete list of tokens and default values, please check [default Tokens](https://gluestack.io/ui/with-nativewind/docs/theme-configuration/default-tokens). +You can customize all the tokens of the theme in `config`. For a complete list of tokens and default values, please check [default Tokens](https://gluestack.io/ui/nativewind/docs/theme-configuration/default-tokens). By utilizing this approach, you can seamlessly modify the primary color tokens of the theme while maintaining the overall theme configuration intact. From 220da9ed7d3d0764e2725316145da88ff294f54e Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 2 Apr 2024 08:20:11 +0530 Subject: [PATCH 42/78] fix: spacing in default tokens page --- .../nativewind/docs-components/DefaultComponent.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/docs-components/DefaultComponent.tsx b/example/storybook-nativewind/src/core-components/nativewind/docs-components/DefaultComponent.tsx index b5354b53ab..cee584d321 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/docs-components/DefaultComponent.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/docs-components/DefaultComponent.tsx @@ -74,10 +74,10 @@ const ColorPaletteComponent = () => { {colorPalette[i].variants.map((variant, j) => ( - {variant.variant} + {variant.variant} {variant.color} From 3340eb4b07715f19c300b482f18e916c3313500f Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 2 Apr 2024 11:28:49 +0530 Subject: [PATCH 43/78] fix: folder structure and add default tokens themed page --- .../docs-components/DefaultComponent.tsx | 12 +- .../DefaultComponentThemed.tsx | 451 +++++++++++++++++ .../customizing-theme/index.nw.stories.mdx | 452 +----------------- .../default-tokens/index.nw.stories.mdx | 2 +- .../default-tokens/index.themed.stories.mdx | 91 ++++ 5 files changed, 555 insertions(+), 453 deletions(-) rename example/storybook-nativewind/src/{core-components/nativewind => components}/docs-components/DefaultComponent.tsx (92%) create mode 100644 example/storybook-nativewind/src/components/docs-components/DefaultComponentThemed.tsx create mode 100644 example/storybook-nativewind/src/theme-configuration/default-tokens/index.themed.stories.mdx diff --git a/example/storybook-nativewind/src/core-components/nativewind/docs-components/DefaultComponent.tsx b/example/storybook-nativewind/src/components/docs-components/DefaultComponent.tsx similarity index 92% rename from example/storybook-nativewind/src/core-components/nativewind/docs-components/DefaultComponent.tsx rename to example/storybook-nativewind/src/components/docs-components/DefaultComponent.tsx index b5354b53ab..3d52d19fa5 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/docs-components/DefaultComponent.tsx +++ b/example/storybook-nativewind/src/components/docs-components/DefaultComponent.tsx @@ -1,8 +1,14 @@ import React, { useContext, Fragment, useMemo } from 'react'; import tailwindConfig from 'tailwind.config'; -import { GluestackUIProvider } from '../gluestack-ui-provider'; -import { config } from '../gluestack-ui-provider/config'; -import { VStack, HStack, Box, Text, Heading } from '..'; +import { GluestackUIProvider } from '../../core-components/nativewind/gluestack-ui-provider'; +import { config } from '../../core-components/nativewind/gluestack-ui-provider/config'; +import { + VStack, + HStack, + Box, + Text, + Heading, +} from '../../core-components/nativewind'; import { LayoutContext } from '@gluestack/design-system'; const ColorPaletteComponent = () => { diff --git a/example/storybook-nativewind/src/components/docs-components/DefaultComponentThemed.tsx b/example/storybook-nativewind/src/components/docs-components/DefaultComponentThemed.tsx new file mode 100644 index 0000000000..3341cca373 --- /dev/null +++ b/example/storybook-nativewind/src/components/docs-components/DefaultComponentThemed.tsx @@ -0,0 +1,451 @@ +import React, { Fragment, useContext } from 'react'; +import { + Text, + VStack, + HStack, + Box, + GluestackUIProvider, + Heading, + Divider, + Tooltip, + TooltipContent, + TooltipText, + Pressable, +} from '../../core-components/themed'; +import { config } from '../../core-components/themed/gluestack-ui-provider/config'; +import { LayoutContext } from '@gluestack/design-system'; + +const colors: any = config.tokens.colors; + +const colorPalette: any = { + primary: {}, + secondary: {}, + tertiary: {}, + others: {}, +}; + +for (const colorKey in colors) { + const category = colorKey.replace(/\d+/g, ''); + const shade = colorKey.replace(/\D+/g, ''); + + if (shade === '') { + colorPalette.others[category] = colors[colorKey]; + continue; + } + + if (!colorPalette[category]) { + colorPalette[category] = {}; + } + + colorPalette[category][shade] = colors[colorKey]; +} + +const sortedColorPalette: any = {}; + +for (const category in colorPalette) { + if (category !== 'others') { + sortedColorPalette[category] = Object.fromEntries( + Object.entries(colorPalette[category]).sort() + ); + } +} + +sortedColorPalette.others = { ...colorPalette.others }; + +const ColorPaletteComponent = () => { + const { colorMode } = useContext(LayoutContext); + return ( + + + {Object.keys(sortedColorPalette).map((category: string) => { + return ( + + + {category} + + + {Object.keys(sortedColorPalette[category]).map( + (shade: string) => { + return ( + + + + + {category === 'others' + ? `${shade}` + : `${category}${shade}`} + + {sortedColorPalette[category][shade]} + + + ); + } + )} + + + ); + })} + + + ); +}; + +const spaces: any = config.tokens.space; + +const sortedSpaceObject: any = spaces; + +// Convert the map to an array of key-value pairs for sorting +const mapEntries = Object.entries(sortedSpaceObject); + +// Sort the map entries based on the keys +mapEntries.sort(([keyA, valueA]: any, [keyB, valueB]: any) => { + // Treat 'px' as the smallest and 'full' as the largest + // Place '0' at the top + if (keyA === '0') return -1; + if (keyB === '0') return 1; + + // Treat 'px' as the second smallest + if (keyA === 'px') return -1; + if (keyB === 'px') return 1; + + // Treat 'full' as the largest + if (keyA === 'full') return 1; + if (keyB === 'full') return -1; + + // Values with '%' should be grouped and sorted at the end + const isValueAPercentage = valueA.toString().includes('%'); + const isValueBPercentage = valueB.toString().includes('%'); + if (isValueAPercentage && !isValueBPercentage) return 1; + if (isValueBPercentage && !isValueAPercentage) return -1; + + // Group values with the same denominator and sort them + const [numA, denomA] = keyA.split('/').map(parseFloat); + const [numB, denomB] = keyB.split('/').map(parseFloat); + + if (!isNaN(numA) && !isNaN(denomA) && !isNaN(numB) && !isNaN(denomB)) { + if (denomA === denomB) { + return numA - numB; + } else { + return denomA - denomB; // Sort by denominator if they are different + } + } + + // For numeric keys, compare them as numbers + if (!isNaN(numA) && !isNaN(numB)) { + return numA - numB; + } + + // For other keys, compare them as strings + return keyA.localeCompare(keyB); +}); +// const spaceElementsArray = +// Create a new Map from the sorted map entries + +const SpaceComponent = () => { + return ( + + + + + Tokens + + + Value (Pixels) + + Representation + + {mapEntries.map(([key, value]: any) => { + return ( + + + + + {key} + + + {value} + + + + + + + ); + })} + + + ); +}; + +const opacity: any = config.tokens.opacity; + +const OpacityComponent = () => { + return ( + + + {Object.keys(opacity).map((op: string) => { + return ( + + + + + {op} + + + ({opacity[op]}) + + + + ); + })} + + + ); +}; + +const ShadowsComponent = () => { + const hardShadows: any = config.globalStyle.variants.hardShadow; + const softShadows: any = config.globalStyle.variants.softShadow; + + return ( + + + + Hard Shadows + + + {Object.keys(hardShadows).map((shadow: string) => { + return ( + { + return ( + + + {shadow} + + + ); + }} + > + + + {JSON.stringify(hardShadows[shadow], null, 2)} + + + + ); + })} + + + Soft Shadows + + + {Object.keys(softShadows).map((shadow: string) => { + return ( + { + return ( + + + {shadow} + + + ); + }} + > + + + {JSON.stringify(softShadows[shadow], null, 2)} + + + + ); + })} + + + + ); +}; + +const borderWidths = config.tokens.borderWidths; +const BorderWidthComponent = () => { + return ( + + + {Object.keys(borderWidths).map((borderWidth: any) => { + return ( + + {borderWidth} + + ({borderWidths[borderWidth]}) + + + ); + })} + + + ); +}; + +const radii = config.tokens.radii; +const RadiiComponent = () => { + return ( + + + {Object.keys(radii).map((borderRadiusValue: any) => { + return ( + + {borderRadiusValue} + + ({radii[borderRadiusValue]}) + + + ); + })} + + + ); +}; + +export { + ColorPaletteComponent, + SpaceComponent, + OpacityComponent, + ShadowsComponent, + BorderWidthComponent, + RadiiComponent, +}; + +export { Text, VStack, HStack, Box }; diff --git a/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.nw.stories.mdx b/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.nw.stories.mdx index 782ceefe4b..722321e9b2 100644 --- a/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.nw.stories.mdx @@ -28,304 +28,16 @@ To customize tokens, follow these steps: export const config = { light: vars({ + ...//other tokens //updated '--color-primary-0' value '--color-primary-0': '#C0C0C0', - '--color-primary-50': '#999999', - '--color-primary-100': '#808080', - '--color-primary-200': '#737373', - '--color-primary-300': '#666666', - '--color-primary-400': '#525252', - '--color-primary-500': '#333333', - '--color-primary-600': '#292929', - '--color-primary-700': '#1F1F1F', - '--color-primary-800': '#0D0D0D', - '--color-primary-900': '#0A0A0A', - '--color-primary-950': '#080808', - - /* Secondary */ - '--color-secondary-0': '#FEFFFF', - '--color-secondary-50': '#F1F2F2', - '--color-secondary-100': '#E7E8E8', - '--color-secondary-200': '#DBDBDB', - '--color-secondary-300': '#AFB0B0', - '--color-secondary-400': '#727373', - '--color-secondary-500': '#5E5F5F', - '--color-secondary-600': '#515252', - '--color-secondary-700': '#3F4040', - '--color-secondary-800': '#272626', - '--color-secondary-900': '#181717', - '--color-secondary-950': '#0B0C0C', - - /* Tertiary */ - '--color-tertiary-0': '#FFFAF5', - '--color-tertiary-50': '#FFF2E5', - '--color-tertiary-100': '#FFE9D5', - '--color-tertiary-200': '#FED1AA', - '--color-tertiary-300': '#FDB474', - '--color-tertiary-400': '#FB9D4B', - '--color-tertiary-500': '#E78128', - '--color-tertiary-600': '#D7751F', - '--color-tertiary-700': '#B4621A', - '--color-tertiary-800': '#824917', - '--color-tertiary-900': '#6C3D13', - '--color-tertiary-950': '#543112', - - /* Error */ - '--color-error-0': '#FEE9E9', - '--color-error-50': '#FEE2E2', - '--color-error-100': '#FECACA', - '--color-error-200': '#FCA5A5', - '--color-error-300': '#F87171', - '--color-error-400': '#EF4444', - '--color-error-500': '#E63535', - '--color-error-600': '#DC2626', - '--color-error-700': '#B91C1C', - '--color-error-800': '#991B1B', - '--color-error-900': '#7F1D1D', - '--color-error-950': '#531313', - - /* Success */ - '--color-success-0': '#E4FFF4', - '--color-success-50': '#CAFFE8', - '--color-success-100': '#A2F1C0', - '--color-success-200': '#84D3A2', - '--color-success-300': '#66B584', - '--color-success-400': '#489766', - '--color-success-500': '#348352', - '--color-success-600': '#2A7948', - '--color-success-700': '#206F3E', - '--color-success-800': '#166534', - '--color-success-900': '#14532D', - '--color-success-950': '#1B3224', - - /* Warning */ - '--color-warning-0': '#FFFDFB', - '--color-warning-50': '#FFF9F5', - '--color-warning-100': '#FFE7D5', - '--color-warning-200': '#FECDAA', - '--color-warning-300': '#FDAD74', - '--color-warning-400': '#FB954B', - '--color-warning-500': '#E77828', - '--color-warning-600': '#D76C1F', - '--color-warning-700': '#B45A1A', - '--color-warning-800': '#824417', - '--color-warning-900': '#6C3813', - '--color-warning-950': '#542D12', - - /* Info */ - '--color-info-0': '#ECF8FE', - '--color-info-50': '#C7EBFC', - '--color-info-100': '#A2DDFA', - '--color-info-200': '#7CCFF8', - '--color-info-300': '#57C2F6', - '--color-info-400': '#32B4F4', - '--color-info-500': '#0DA6F2', - '--color-info-600': '#0B8DCD', - '--color-info-700': '#0973A8', - '--color-info-800': '#075A83', - '--color-info-900': '#05405D', - '--color-info-950': '#032638', - - /* Typography */ - '--color-typography-0': '#FEFEFF', - '--color-typography-50': '#F5F5F5', - '--color-typography-100': '#E5E5E5', - '--color-typography-200': '#DBDBDC', - '--color-typography-300': '#D4D4D4', - '--color-typography-400': '#A3A3A3', - '--color-typography-500': '#8C8C8C', - '--color-typography-600': '#737373', - '--color-typography-700': '#525252', - '--color-typography-800': '#404040', - '--color-typography-900': '#262627', - '--color-typography-950': '#171717', - - /* Outline */ - '--color-outline-0': '#FDFEFE', - '--color-outline-50': '#F3F3F3', - '--color-outline-100': '#E6E6E6', - '--color-outline-200': '#DDDCDB', - '--color-outline-300': '#D3D3D3', - '--color-outline-400': '#A5A3A3', - '--color-outline-500': '#8C8D8D', - '--color-outline-600': '#737474', - '--color-outline-700': '#535252', - '--color-outline-800': '#414141', - '--color-outline-900': '#272624', - '--color-outline-950': '#1A1717', - /* Background */ - '--color-background-0': '#FBFBFB', - '--color-background-50': '#F6F6F6', - '--color-background-100': '#F2F1F1', - '--color-background-200': '#DCDBDB', - '--color-background-300': '#D5D4D4', - '--color-background-400': '#A2A3A3', - '--color-background-500': '#8E8E8E', - '--color-background-600': '#747474', - '--color-background-700': '#535252', - '--color-background-800': '#414040', - '--color-background-900': '#272625', - '--color-background-950': '#181718', - - /* Background Special */ - '--color-background-error': '#FEF1F1', - '--color-background-warning': '#FFF4EB', - '--color-background-success': '#EDFCF2', - '--color-background-muted': '#F6F6F7', - '--color-background-info': '#EBF8FE', - /* Added a new background color for light mode */ '--color-background-new': '#BAE7FC', }), dark: vars({ - '--color-primary-0': '#828282', - '--color-primary-50': '#949494', - '--color-primary-100': '#9E9E9E', - '--color-primary-200': '#B3B3B3', - '--color-primary-300': '#C7C7C7', - '--color-primary-400': '#E6E6E6', - '--color-primary-500': '#F0F0F0', - '--color-primary-600': '#FAFAFA', - '--color-primary-700': '#FCFCFC', - '--color-primary-800': '#FDFDFD', - '--color-primary-900': '#FDFCFC', - '--color-primary-950': '#FDFCFC', - - /* Secondary */ - '--color-secondary-0': '#0B0C0C', - '--color-secondary-50': '#181717', - '--color-secondary-100': '#272626', - '--color-secondary-200': '#3F4040', - '--color-secondary-300': '#515252', - '--color-secondary-400': '#5E5F5F', - '--color-secondary-500': '#727373', - '--color-secondary-600': '#AFB0B0', - '--color-secondary-700': '#DBDBDB', - '--color-secondary-800': '#E7E8E8', - '--color-secondary-900': '#F1F2F2', - '--color-secondary-950': '#FEFFFF', - - /* Tertiary */ - '--color-tertiary-0': '#543112', - '--color-tertiary-50': '#6C3D13', - '--color-tertiary-100': '#824917', - '--color-tertiary-200': '#B4621A', - '--color-tertiary-300': '#D7751F', - '--color-tertiary-400': '#E78128', - '--color-tertiary-500': '#FB9D4B', - '--color-tertiary-600': '#FDB474', - '--color-tertiary-700': '#FED1AA', - '--color-tertiary-800': '#FFE9D5', - '--color-tertiary-900': '#FFF2E5', - '--color-tertiary-950': '#FFFAF5', - - /* Error */ - '--color-error-0': '#531313', - '--color-error-50': '#7F1D1D', - '--color-error-100': '#991B1B', - '--color-error-200': '#B91C1C', - '--color-error-300': '#DC2626', - '--color-error-400': '#E63535', - '--color-error-500': '#EF4444', - '--color-error-600': '#F87171', - '--color-error-700': '#E63534', - '--color-error-800': '#FECACA', - '--color-error-900': '#FEE2E2', - '--color-error-950': '#FEE9E9', - - /* Success */ - '--color-success-0': '#1B3224', - '--color-success-50': '#14532D', - '--color-success-100': '#166534', - '--color-success-200': '#206F3E', - '--color-success-300': '#2A7948', - '--color-success-400': '#348352', - '--color-success-500': '#489766', - '--color-success-600': '#66B584', - '--color-success-700': '#84D3A2', - '--color-success-800': '#A2F1C0', - '--color-success-900': '#CAFFE8', - '--color-success-950': '#E4FFF4', - - /* Warning */ - '--color-warning-0': '#542D12', - '--color-warning-50': '#6C3813', - '--color-warning-100': '#824417', - '--color-warning-200': '#B45A1A', - '--color-warning-300': '#D76C1F', - '--color-warning-400': '#E77828', - '--color-warning-500': '#FB954B', - '--color-warning-600': '#FDAD74', - '--color-warning-700': '#FECDAA', - '--color-warning-800': '#FFE7D5', - '--color-warning-900': '#FFF9F5', - '--color-warning-950': '#FFFDFB', - - /* Info */ - '--color-info-0': '#032638', - '--color-info-50': '#05405D', - '--color-info-100': '#075A83', - '--color-info-200': '#0973A8', - '--color-info-300': '#0B8DCD', - '--color-info-400': '#0DA6F2', - '--color-info-500': '#32B4F4', - '--color-info-600': '#57C2F6', - '--color-info-700': '#7CCFF8', - '--color-info-800': '#A2DDFA', - '--color-info-900': '#C7EBFC', - '--color-info-950': '#ECF8FE', - - /* Typography */ - '--color-typography-0': '#171717', - '--color-typography-50': '#262627', - '--color-typography-100': '#404040', - '--color-typography-200': '#525252', - '--color-typography-300': '#737373', - '--color-typography-400': '#8C8C8C', - '--color-typography-500': '#A3A3A3', - '--color-typography-600': '#D4D4D4', - '--color-typography-700': '#DBDBDC', - '--color-typography-800': '#E5E5E5', - '--color-typography-900': '#F5F5F5', - '--color-typography-950': '#FEFEFF', - - /* Outline */ - '--color-outline-0': '#1A1717', - '--color-outline-50': '#272624', - '--color-outline-100': '#414141', - '--color-outline-200': '#535252', - '--color-outline-300': '#737474', - '--color-outline-400': '#8C8D8D', - '--color-outline-500': '#A5A3A3', - '--color-outline-600': '#D3D3D3', - '--color-outline-700': '#DDDCDB', - '--color-outline-800': '#E6E6E6', - '--color-outline-900': '#F3F3F3', - '--color-outline-950': '#FDFEFE', - - /* Background */ - '--color-background-0': '#121212', - '--color-background-50': '#272625', - '--color-background-100': '#414040', - '--color-background-200': '#535252', - '--color-background-300': '#747474', - '--color-background-400': '#8E8E8E', - '--color-background-500': '#A2A3A3', - '--color-background-600': '#D5D4D4', - '--color-background-700': '#DCDBDB', - '--color-background-800': '#F2F1F1', - '--color-background-900': '#F6F6F6', - '--color-background-950': '#FEFEFE', - - /* Background Special */ - '--color-background-error': '#422B2B', - '--color-background-warning': '#412F23', - '--color-background-success': '#1C2B21', - '--color-background-muted': '#252526', - '--color-background-info': '#1A282E', - + ...//other tokens /* Added a new background color for dark mode */ '--color-background-new': '#89D6FA', }), @@ -341,171 +53,13 @@ export const config = { theme: { extend: { colors: { - primary: { - 0: 'var(--color-primary-0)', - 50: 'var(--color-primary-50)', - 100: 'var(--color-primary-100)', - 200: 'var(--color-primary-200)', - 300: 'var(--color-primary-300)', - 400: 'var(--color-primary-400)', - 500: 'var(--color-primary-500)', - 600: 'var(--color-primary-600)', - 700: 'var(--color-primary-700)', - 800: 'var(--color-primary-800)', - 900: 'var(--color-primary-900)', - 950: 'var(--color-primary-950)', - }, - secondary: { - 0: 'var(--color-secondary-0)', - 50: 'var(--color-secondary-50)', - 100: 'var(--color-secondary-100)', - 200: 'var(--color-secondary-200)', - 300: 'var(--color-secondary-300)', - 400: 'var(--color-secondary-400)', - 500: 'var(--color-secondary-500)', - 600: 'var(--color-secondary-600)', - 700: 'var(--color-secondary-700)', - 800: 'var(--color-secondary-800)', - 900: 'var(--color-secondary-900)', - 950: 'var(--color-secondary-950)', - }, - tertiary: { - 50: 'var(--color-tertiary-50)', - 100: 'var(--color-tertiary-100)', - 200: 'var(--color-tertiary-200)', - 300: 'var(--color-tertiary-300)', - 400: 'var(--color-tertiary-400)', - 500: 'var(--color-tertiary-500)', - 600: 'var(--color-tertiary-600)', - 700: 'var(--color-tertiary-700)', - 800: 'var(--color-tertiary-800)', - 900: 'var(--color-tertiary-900)', - 950: 'var(--color-tertiary-950)', - }, - error: { - 0: 'var(--color-error-0)', - 50: 'var(--color-error-50)', - 100: 'var(--color-error-100)', - 200: 'var(--color-error-200)', - 300: 'var(--color-error-300)', - 400: 'var(--color-error-400)', - 500: 'var(--color-error-500)', - 600: 'var(--color-error-600)', - 700: 'var(--color-error-700)', - 800: 'var(--color-error-800)', - 900: 'var(--color-error-900)', - 950: 'var(--color-error-950)', - }, - success: { - 0: 'var(--color-success-0)', - 50: 'var(--color-success-50)', - 100: 'var(--color-success-100)', - 200: 'var(--color-success-200)', - 300: 'var(--color-success-300)', - 400: 'var(--color-success-400)', - 500: 'var(--color-success-500)', - 600: 'var(--color-success-600)', - 700: 'var(--color-success-700)', - 800: 'var(--color-success-800)', - 900: 'var(--color-success-900)', - 950: 'var(--color-success-950)', - }, - warning: { - 0: 'var(--color-warning-0)', - 50: 'var(--color-warning-50)', - 100: 'var(--color-warning-100)', - 200: 'var(--color-warning-200)', - 300: 'var(--color-warning-300)', - 400: 'var(--color-warning-400)', - 500: 'var(--color-warning-500)', - 600: 'var(--color-warning-600)', - 700: 'var(--color-warning-700)', - 800: 'var(--color-warning-800)', - 900: 'var(--color-warning-900)', - 950: 'var(--color-warning-950)', - }, - info: { - 0: 'var(--color-info-0)', - 50: 'var(--color-info-50)', - 100: 'var(--color-info-100)', - 200: 'var(--color-info-200)', - 300: 'var(--color-info-300)', - 400: 'var(--color-info-400)', - 500: 'var(--color-info-500)', - 600: 'var(--color-info-600)', - 700: 'var(--color-info-700)', - 800: 'var(--color-info-800)', - 900: 'var(--color-info-900)', - 950: 'var(--color-info-950)', - }, - typography: { - 0: 'var(--color-typography-0)', - 50: 'var(--color-typography-50)', - 100: 'var(--color-typography-100)', - 200: 'var(--color-typography-200)', - 300: 'var(--color-typography-300)', - 400: 'var(--color-typography-400)', - 500: 'var(--color-typography-500)', - 600: 'var(--color-typography-600)', - 700: 'var(--color-typography-700)', - 800: 'var(--color-typography-800)', - 900: 'var(--color-typography-900)', - 950: 'var(--color-typography-950)', - white: '#FFFFFF', - gray: '#D4D4D4', - black: '#181718', - }, - outline: { - 0: 'var(--color-outline-0)', - 50: 'var(--color-outline-50)', - 100: 'var(--color-outline-100)', - 200: 'var(--color-outline-200)', - 300: 'var(--color-outline-300)', - 400: 'var(--color-outline-400)', - 500: 'var(--color-outline-500)', - 600: 'var(--color-outline-600)', - 700: 'var(--color-outline-700)', - 800: 'var(--color-outline-800)', - 900: 'var(--color-outline-900)', - 950: 'var(--color-outline-950)', - }, background: { - 0: 'var(--color-background-0)', - 50: 'var(--color-background-50)', - 100: 'var(--color-background-100)', - 200: 'var(--color-background-200)', - 300: 'var(--color-background-300)', - 400: 'var(--color-background-400)', - 500: 'var(--color-background-500)', - 600: 'var(--color-background-600)', - 700: 'var(--color-background-700)', - 800: 'var(--color-background-800)', - 900: 'var(--color-background-900)', - 950: 'var(--color-background-950)', - error: 'var(--color-background-error)', - warning: 'var(--color-background-warning)', - muted: 'var(--color-background-muted)', - success: 'var(--color-background-success)', - info: 'var(--color-background-info)', - light: '#FBFBFB', - dark: '#181719', + ...//other color values, /* Added a new background color */ new: 'var(--color-background-new)', }, }, - fontFamily: { - heading: undefined, - body: undefined, - mono: undefined, - }, - fontWeight: { - hairline: '100', - extraBlack: '950', - }, - fontSize: { - '2xs': '10px', - }, }, plugins: [], }, diff --git a/example/storybook-nativewind/src/theme-configuration/default-tokens/index.nw.stories.mdx b/example/storybook-nativewind/src/theme-configuration/default-tokens/index.nw.stories.mdx index dc80fa8084..4b11f04490 100644 --- a/example/storybook-nativewind/src/theme-configuration/default-tokens/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/theme-configuration/default-tokens/index.nw.stories.mdx @@ -11,7 +11,7 @@ showHeader: true --- import { Canvas, Meta, Story } from '@storybook/addon-docs'; -import { ColorPaletteComponent } from "../../core-components/nativewind/docs-components/DefaultComponent.tsx" +import { ColorPaletteComponent } from "../../components/docs-components/DefaultComponent.tsx" diff --git a/example/storybook-nativewind/src/theme-configuration/default-tokens/index.themed.stories.mdx b/example/storybook-nativewind/src/theme-configuration/default-tokens/index.themed.stories.mdx new file mode 100644 index 0000000000..f4ebdd483b --- /dev/null +++ b/example/storybook-nativewind/src/theme-configuration/default-tokens/index.themed.stories.mdx @@ -0,0 +1,91 @@ +--- +title: Default Tokens + +description: gluestack-ui ships with default tokens that provide access to theme values and lets you build and customize your own themed components. It has colors, typography, size, opacity, shadows, breakpoints and more. + +pageTitle: Default Tokens + +pageDescription: gluestack-ui ships with default tokens that provide access to theme values and lets you build and customize your own themed components. It has colors, typography, size, opacity, shadows, breakpoints and more. +showHeader: true +--- + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; +import { + ColorPaletteComponent, + SpaceComponent, + OpacityComponent, + ShadowsComponent, + BorderWidthComponent, + RadiiComponent, +} from '../../components/docs-components/DefaultComponentThemed.tsx'; + + + +Theming in `@gluestack-ui/themed` is based on the [Styled System Theme Specification](https://github.com/system-ui/theme-specification). + +## Colors + +We recommend adding a palette that ranges from 50 to 900. Tools like [JSON Color Palette Generator](https://json-color-palette-generator.vercel.app), [Smart Swatch](https://smart-swatch.netlify.app/) or [Palx](https://palx.jxnblk.com/) are available to generate these palettes. + + + +## Typography + +To manage Typography options, the tokens object supports the following keys: + +- `fonts (font families)` +- `fontSizes` +- `fontWeights` +- `lineHeights` +- `letterSpacings` + +```jsx +import { createConfig } from '../../core-components/themed/gluestack-ui-provider/config'; +import {config as defaultConfig } from '../../core-components/themed/gluestack-ui-provider/config'; + +const config = createConfig({ + ...defaultConfig, + tokens: { + ...defaultConfig.tokens, + fontSizes: { + ...defaultConfig.tokens.fontSizes, + newFontSize: 90, + }, + ...// other tokens + }, +}); +``` + +## Space + +The space key allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the padding, margin, and top, left, right, bottom, props. You can refer to [this](style/docs/configuration/theme-tokens) to see the aliases for the spacing props. + + + +## Opacity + +You can define your opacity tokens or override existing ones using the `createConfig` function under the `tokens` section. + + + +## Shadows + +In `@gluestack-ui/themed` there are two types of shadows provided by default. + +> Note: In the context of dark mode design, it's important to recognize that elevation serves as the primary tool for expressing hierarchy. Unlike in light mode, where shadows are used for this purpose, dark themes prioritize surface illumination. The higher the elevation, the lighter the surfaces become, ultimately improving visibility and clarity. + + + +## Borders + +### border widths + +`borderWidths` tokens are used to define the border radius of an element. You can define your radii tokens or override existing ones using the `createConfig` function under the `tokens` section. + + + +### border radius + +`radii` tokens are used to define the border radius of an element. You can define your radii tokens or override existing ones using the `createConfig` function under the `tokens` section. + + From 8b515b72b10a64d0d969484a6f3d5494c35c81ba Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 2 Apr 2024 12:25:35 +0530 Subject: [PATCH 44/78] fix: colorMode --- .../DefaultComponentThemed.tsx | 138 ++++++++++-------- 1 file changed, 77 insertions(+), 61 deletions(-) diff --git a/example/storybook-nativewind/src/components/docs-components/DefaultComponentThemed.tsx b/example/storybook-nativewind/src/components/docs-components/DefaultComponentThemed.tsx index 3341cca373..736745af0f 100644 --- a/example/storybook-nativewind/src/components/docs-components/DefaultComponentThemed.tsx +++ b/example/storybook-nativewind/src/components/docs-components/DefaultComponentThemed.tsx @@ -1,4 +1,10 @@ -import React, { Fragment, useContext } from 'react'; +import React, { + Fragment, + useContext, + useState, + useEffect, + useMemo, +} from 'react'; import { Text, VStack, @@ -15,49 +21,61 @@ import { import { config } from '../../core-components/themed/gluestack-ui-provider/config'; import { LayoutContext } from '@gluestack/design-system'; -const colors: any = config.tokens.colors; +const ColorPaletteComponent = () => { + const { colorMode } = useContext(LayoutContext); + const [colors, setColors] = useState([]); -const colorPalette: any = { - primary: {}, - secondary: {}, - tertiary: {}, - others: {}, -}; + useEffect(() => { + if (!colorMode) return; + if (colorMode === 'light') { + setColors(config.tokens.colors); + } else { + setColors(config.themes[colorMode].colors); + } + }, [colorMode]); -for (const colorKey in colors) { - const category = colorKey.replace(/\d+/g, ''); - const shade = colorKey.replace(/\D+/g, ''); + const sortedPalette = useMemo(() => { + const colorPalette: any = { + primary: {}, + secondary: {}, + tertiary: {}, + others: {}, + }; - if (shade === '') { - colorPalette.others[category] = colors[colorKey]; - continue; - } + for (const colorKey in colors) { + const category = colorKey.replace(/\d+/g, ''); + const shade = colorKey.replace(/\D+/g, ''); - if (!colorPalette[category]) { - colorPalette[category] = {}; - } + if (shade === '') { + colorPalette.others[category] = colors[colorKey]; + continue; + } - colorPalette[category][shade] = colors[colorKey]; -} + if (!colorPalette[category]) { + colorPalette[category] = {}; + } -const sortedColorPalette: any = {}; + colorPalette[category][shade] = colors[colorKey]; + } -for (const category in colorPalette) { - if (category !== 'others') { - sortedColorPalette[category] = Object.fromEntries( - Object.entries(colorPalette[category]).sort() - ); - } -} + const sortedColorPalette: any = {}; -sortedColorPalette.others = { ...colorPalette.others }; + for (const category in colorPalette) { + if (category !== 'others') { + sortedColorPalette[category] = Object.fromEntries( + Object.entries(colorPalette[category]).sort() + ); + } + } -const ColorPaletteComponent = () => { - const { colorMode } = useContext(LayoutContext); + sortedColorPalette.others = { ...colorPalette.others }; + + return sortedColorPalette; + }, [colors]); return ( - {Object.keys(sortedColorPalette).map((category: string) => { + {Object.keys(sortedPalette).map((category: string) => { return ( @@ -74,30 +92,28 @@ const ColorPaletteComponent = () => { }, }} > - {Object.keys(sortedColorPalette[category]).map( - (shade: string) => { - return ( - - - - - {category === 'others' - ? `${shade}` - : `${category}${shade}`} - - {sortedColorPalette[category][shade]} - - - ); - } - )} + {Object.keys(sortedPalette[category]).map((shade: string) => { + return ( + + + + + {category === 'others' + ? `${shade}` + : `${category}${shade}`} + + {sortedPalette[category][shade]} + + + ); + })} ); @@ -160,7 +176,7 @@ mapEntries.sort(([keyA, valueA]: any, [keyB, valueB]: any) => { const SpaceComponent = () => { return ( - + @@ -198,7 +214,7 @@ const opacity: any = config.tokens.opacity; const OpacityComponent = () => { return ( - + { const softShadows: any = config.globalStyle.variants.softShadow; return ( - + Hard Shadows @@ -367,7 +383,7 @@ const ShadowsComponent = () => { const borderWidths = config.tokens.borderWidths; const BorderWidthComponent = () => { return ( - + { const radii = config.tokens.radii; const RadiiComponent = () => { return ( - + Date: Tue, 2 Apr 2024 12:30:09 +0530 Subject: [PATCH 45/78] fix: colorMode --- .../components/docs-components/DefaultComponentThemed.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/example/storybook-nativewind/src/components/docs-components/DefaultComponentThemed.tsx b/example/storybook-nativewind/src/components/docs-components/DefaultComponentThemed.tsx index 736745af0f..6c7baabc9b 100644 --- a/example/storybook-nativewind/src/components/docs-components/DefaultComponentThemed.tsx +++ b/example/storybook-nativewind/src/components/docs-components/DefaultComponentThemed.tsx @@ -175,6 +175,7 @@ mapEntries.sort(([keyA, valueA]: any, [keyB, valueB]: any) => { // Create a new Map from the sorted map entries const SpaceComponent = () => { + const { colorMode } = useContext(LayoutContext); return ( @@ -213,6 +214,7 @@ const SpaceComponent = () => { const opacity: any = config.tokens.opacity; const OpacityComponent = () => { + const { colorMode } = useContext(LayoutContext); return ( { }; const ShadowsComponent = () => { + const { colorMode } = useContext(LayoutContext); const hardShadows: any = config.globalStyle.variants.hardShadow; const softShadows: any = config.globalStyle.variants.softShadow; @@ -382,6 +385,7 @@ const ShadowsComponent = () => { const borderWidths = config.tokens.borderWidths; const BorderWidthComponent = () => { + const { colorMode } = useContext(LayoutContext); return ( { const radii = config.tokens.radii; const RadiiComponent = () => { + const { colorMode } = useContext(LayoutContext); return ( Date: Tue, 2 Apr 2024 12:37:29 +0530 Subject: [PATCH 46/78] feat: components fixeS --- .../src/core-components/nativewind/Demos/BoxDemo.tsx | 4 ++-- .../core-components/nativewind/Demos/CenterDemo.tsx | 6 ++---- .../core-components/nativewind/Demos/HStackDemo.tsx | 6 +++--- .../nativewind/Demos/PressableDemo.tsx | 7 +++++-- .../nativewind/Demos/ProgressDemo.tsx | 4 ++-- .../core-components/nativewind/Demos/RadioDemo.tsx | 2 +- .../core-components/nativewind/Demos/VStackDemo.tsx | 9 ++++----- .../src/core-components/nativewind/content.tsx | 12 ++++++------ .../src/core-components/themed/ComponentCard.tsx | 5 +++++ .../src/core-components/themed/Demos/BoxDemo.tsx | 11 ++++++++++- .../src/core-components/themed/Demos/CenterDemo.tsx | 12 ++++++++++-- .../src/core-components/themed/Demos/DividerDemo.tsx | 9 +++------ .../src/core-components/themed/Demos/HStackDemo.tsx | 6 +++--- .../src/core-components/themed/Demos/ModalDemo.tsx | 2 +- .../core-components/themed/Demos/PressableDemo.tsx | 11 ++++++++++- .../src/core-components/themed/Demos/SelectDemo.tsx | 7 ++++++- .../src/core-components/themed/Demos/VStackDemo.tsx | 9 ++++----- 17 files changed, 77 insertions(+), 45 deletions(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/BoxDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/BoxDemo.tsx index 047b6c859b..fdf6c115ce 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/BoxDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/BoxDemo.tsx @@ -3,8 +3,8 @@ import React from 'react'; const BoxDemo = () => { return ( - - This is the Box + + This is the Box ); }; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/CenterDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/CenterDemo.tsx index 54ffdb59f1..7a39a66c8f 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/CenterDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/CenterDemo.tsx @@ -4,10 +4,8 @@ import { Text } from '..//text'; const CenterDemo = () => { return ( -
- - This is the center. - +
+ This is the center.
); }; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/HStackDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/HStackDemo.tsx index d0c576ded6..465142895e 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/HStackDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/HStackDemo.tsx @@ -4,9 +4,9 @@ import { Box, HStack } from '../'; const HStackDemo = () => { return ( - - - + + + ); }; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/PressableDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/PressableDemo.tsx index c0ebd1d939..542bc7b19a 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/PressableDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/PressableDemo.tsx @@ -3,8 +3,11 @@ import React from 'react'; const PressableDemo = () => { return ( - - Press me + console.log('Hello')} + className="p-5 bg-primary-500" + > + Press me ); }; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/ProgressDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ProgressDemo.tsx index 9c47eeb8f4..783aa483f9 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/ProgressDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/ProgressDemo.tsx @@ -2,8 +2,8 @@ import React from 'react'; import { Progress, ProgressFilledTrack } from '../'; const ProgressDemo = () => { return ( - - + + ); }; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/RadioDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/RadioDemo.tsx index 0276e86b16..76abcd41af 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/RadioDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/RadioDemo.tsx @@ -13,7 +13,7 @@ const RadioDemo = () => { const [values, setValues] = useState('Monday'); return ( - + Option A diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/VStackDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/VStackDemo.tsx index b36dd55f88..11686ca74e 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/VStackDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/VStackDemo.tsx @@ -4,14 +4,13 @@ import { Box, VStack } from '../'; const VStackDemo = () => { return ( - - - - + + + ); }; diff --git a/example/storybook-nativewind/src/core-components/nativewind/content.tsx b/example/storybook-nativewind/src/core-components/nativewind/content.tsx index 69288b7f84..b1194fa80e 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/content.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/content.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import SelectDemo from './Demos/SelectDemo'; +// import SelectDemo from './Demos/SelectDemo'; import { CheckboxDemo } from './Demos/CheckboxDemo'; import { SliderDemo } from './Demos/SliderDemo'; import FormControlDemo from './Demos/FormControlDemo'; @@ -177,11 +177,11 @@ export const content = [ href: '/ui/docs/components/forms/radio', }, - { - title: 'Select', - child: , - href: '/ui/docs/components/forms/select', - }, + // { + // title: 'Select', + // child: , + // href: '/ui/docs/components/forms/select', + // }, { title: 'Slider', diff --git a/example/storybook-nativewind/src/core-components/themed/ComponentCard.tsx b/example/storybook-nativewind/src/core-components/themed/ComponentCard.tsx index 720d26ea3a..637d284caf 100644 --- a/example/storybook-nativewind/src/core-components/themed/ComponentCard.tsx +++ b/example/storybook-nativewind/src/core-components/themed/ComponentCard.tsx @@ -61,6 +61,11 @@ export const ComponentCard = ({ lineHeight="$xl" px="$6" py="$4" + sx={{ + _dark: { + color: '$textLight0', + }, + }} > {title} diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/BoxDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/BoxDemo.tsx index 047b6c859b..2417961664 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/BoxDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/BoxDemo.tsx @@ -4,7 +4,16 @@ import React from 'react'; const BoxDemo = () => { return ( - This is the Box + + This is the Box + ); }; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/CenterDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/CenterDemo.tsx index 54ffdb59f1..0bcf00e8a9 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/CenterDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/CenterDemo.tsx @@ -4,8 +4,16 @@ import { Text } from '..//text'; const CenterDemo = () => { return ( -
- +
+ This is the center.
diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/DividerDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/DividerDemo.tsx index 2e14ad3841..26763372f5 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/DividerDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/DividerDemo.tsx @@ -1,12 +1,9 @@ import React from 'react'; -import { HStack, Heading, Divider } from '../'; +import { VStack, Heading, Divider } from '../'; const DividerDemo = () => { return ( - + Firefox @@ -14,7 +11,7 @@ const DividerDemo = () => { Chrome - + ); }; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/HStackDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/HStackDemo.tsx index d0c576ded6..8ee0116dde 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/HStackDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/HStackDemo.tsx @@ -4,9 +4,9 @@ import { Box, HStack } from '../'; const HStackDemo = () => { return ( - - - + + + ); }; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx index 4da1dfebca..8d5045e48c 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx @@ -20,7 +20,7 @@ const ModalDemo = () => { const [showModal, setShowModal] = useState(false); const ref = React.useRef(null); return ( -
+
diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/PressableDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/PressableDemo.tsx index c0ebd1d939..fcba73d307 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/PressableDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/PressableDemo.tsx @@ -4,7 +4,16 @@ import React from 'react'; const PressableDemo = () => { return ( - Press me + + Press me + ); }; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/SelectDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/SelectDemo.tsx index 59bd1d7221..3c50799307 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/SelectDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/SelectDemo.tsx @@ -19,7 +19,12 @@ const SelectDemo = () => { - + diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/ProgressDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ProgressDemo.tsx index 783aa483f9..4f615e7142 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/ProgressDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/ProgressDemo.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Progress, ProgressFilledTrack } from '../'; const ProgressDemo = () => { return ( - + ); From c91607b5892b64da4eaa61c79fb045ec9ad5fc8e Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Tue, 2 Apr 2024 12:57:03 +0530 Subject: [PATCH 48/78] fix: image added tint color prop resolution --- .../src/core-components/themed/image/index.tsx | 11 ++++++++++- .../components/Image/styled-components/Root.tsx | 16 +++++++++++++--- 2 files changed, 23 insertions(+), 4 deletions(-) diff --git a/example/storybook-nativewind/src/core-components/themed/image/index.tsx b/example/storybook-nativewind/src/core-components/themed/image/index.tsx index f971e2d95e..d349c61d6c 100644 --- a/example/storybook-nativewind/src/core-components/themed/image/index.tsx +++ b/example/storybook-nativewind/src/core-components/themed/image/index.tsx @@ -53,6 +53,15 @@ const StyledRoot = styled( size: 'md', }, }, - {} + { + componentName: 'Image', + resolveProps: ['tintColor'], + } as const, + { + propertyTokenMap: { + placeholderTextColor: 'colors', + }, + } ); + export const Image = createImage({ Root: StyledRoot }); diff --git a/packages/themed/src/components/Image/styled-components/Root.tsx b/packages/themed/src/components/Image/styled-components/Root.tsx index 0f9aa86bec..3c6463c525 100644 --- a/packages/themed/src/components/Image/styled-components/Root.tsx +++ b/packages/themed/src/components/Image/styled-components/Root.tsx @@ -1,6 +1,16 @@ import { Image } from 'react-native'; import { styled } from '@gluestack-style/react'; -export default styled(Image, {}, { - componentName: 'Image', -} as const); +export default styled( + Image, + {}, + { + componentName: 'Image', + resolveProps: ['tintColor'], + } as const, + { + propertyTokenMap: { + placeholderTextColor: 'colors', + }, + } +); From 95ab957dac2d38ffc21dbc51f8e72048f23e1ac0 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Tue, 2 Apr 2024 12:58:21 +0530 Subject: [PATCH 49/78] fix: tintcolor --- .../src/core-components/themed/image/index.tsx | 2 +- packages/themed/src/components/Image/styled-components/Root.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/example/storybook-nativewind/src/core-components/themed/image/index.tsx b/example/storybook-nativewind/src/core-components/themed/image/index.tsx index d349c61d6c..d808a0d390 100644 --- a/example/storybook-nativewind/src/core-components/themed/image/index.tsx +++ b/example/storybook-nativewind/src/core-components/themed/image/index.tsx @@ -59,7 +59,7 @@ const StyledRoot = styled( } as const, { propertyTokenMap: { - placeholderTextColor: 'colors', + tintColor: 'colors', }, } ); diff --git a/packages/themed/src/components/Image/styled-components/Root.tsx b/packages/themed/src/components/Image/styled-components/Root.tsx index 3c6463c525..faaafa3d57 100644 --- a/packages/themed/src/components/Image/styled-components/Root.tsx +++ b/packages/themed/src/components/Image/styled-components/Root.tsx @@ -10,7 +10,7 @@ export default styled( } as const, { propertyTokenMap: { - placeholderTextColor: 'colors', + tintColor: 'colors', }, } ); From 84139fab3f875a9aedee9090694235a2d587d208 Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 2 Apr 2024 13:19:06 +0530 Subject: [PATCH 50/78] fix: docs --- .../docs-components/DefaultComponentThemed.tsx | 15 +++++++-------- .../default-tokens/index.themed.stories.mdx | 6 +++--- 2 files changed, 10 insertions(+), 11 deletions(-) diff --git a/example/storybook-nativewind/src/components/docs-components/DefaultComponentThemed.tsx b/example/storybook-nativewind/src/components/docs-components/DefaultComponentThemed.tsx index 6c7baabc9b..a58a3c0554 100644 --- a/example/storybook-nativewind/src/components/docs-components/DefaultComponentThemed.tsx +++ b/example/storybook-nativewind/src/components/docs-components/DefaultComponentThemed.tsx @@ -11,13 +11,12 @@ import { HStack, Box, GluestackUIProvider, - Heading, Divider, Tooltip, TooltipContent, TooltipText, Pressable, -} from '../../core-components/themed'; +} from '@gluestack-ui/themed'; import { config } from '../../core-components/themed/gluestack-ui-provider/config'; import { LayoutContext } from '@gluestack/design-system'; @@ -78,9 +77,9 @@ const ColorPaletteComponent = () => { {Object.keys(sortedPalette).map((category: string) => { return ( - + {category} - + { return ( - + Hard Shadows - + { ); })} - + Soft Shadows - + -Theming in `@gluestack-ui/themed` is based on the [Styled System Theme Specification](https://github.com/system-ui/theme-specification). +Theming in `@gluestack-ui with gluestack-style` is based on the [Styled System Theme Specification](https://github.com/system-ui/theme-specification). ## Colors We recommend adding a palette that ranges from 50 to 900. Tools like [JSON Color Palette Generator](https://json-color-palette-generator.vercel.app), [Smart Swatch](https://smart-swatch.netlify.app/) or [Palx](https://palx.jxnblk.com/) are available to generate these palettes. - + ## Typography To manage Typography options, the tokens object supports the following keys: @@ -70,7 +70,7 @@ You can define your opacity tokens or override existing ones using the `createCo ## Shadows -In `@gluestack-ui/themed` there are two types of shadows provided by default. +In `@gluestack-ui with gluestack-style` there are two types of shadows provided by default. > Note: In the context of dark mode design, it's important to recognize that elevation serves as the primary tool for expressing hierarchy. Unlike in light mode, where shadows are used for this purpose, dark themes prioritize surface illumination. The higher the elevation, the lighter the surfaces become, ultimately improving visibility and clarity. From 262f3103f5bdbbfcee2c517dd66b9aeef78e67d4 Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 2 Apr 2024 13:24:57 +0530 Subject: [PATCH 51/78] fix: remove link --- .../theme-configuration/default-tokens/index.themed.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/theme-configuration/default-tokens/index.themed.stories.mdx b/example/storybook-nativewind/src/theme-configuration/default-tokens/index.themed.stories.mdx index 32137b5c04..48fa2af7ed 100644 --- a/example/storybook-nativewind/src/theme-configuration/default-tokens/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/theme-configuration/default-tokens/index.themed.stories.mdx @@ -58,7 +58,7 @@ const config = createConfig({ ## Space -The space key allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the padding, margin, and top, left, right, bottom, props. You can refer to [this](style/docs/configuration/theme-tokens) to see the aliases for the spacing props. +The space key allows you to customize the global spacing and sizing scale for your project. By default these spacing value can be referenced by the padding, margin, and top, left, right, bottom, props. From bf9c0808eafa97c6706fe4d4deea7b23b03d2bc4 Mon Sep 17 00:00:00 2001 From: Suraj Date: Tue, 2 Apr 2024 16:10:13 +0530 Subject: [PATCH 52/78] fix: docs updated: --- .../customizing-theme/index.nw.stories.mdx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.nw.stories.mdx b/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.nw.stories.mdx index d2b65a83ee..55d397682d 100644 --- a/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.nw.stories.mdx @@ -1,5 +1,5 @@ --- -title: Customizingt Theme +title: Customizing Theme description: Customizing the theme in gluestack-ui with nativewind involves defining a theme configuration and applying it using GluestackUIProvider, enabling you to style your application's visual elements according to your design preferences. @@ -28,7 +28,7 @@ To customize tokens, follow these steps: export const config = { light: vars({ - ...//other tokens + ... // other tokens //updated '--color-primary-0' value '--color-primary-0': '#C0C0C0', @@ -37,7 +37,7 @@ export const config = { }), dark: vars({ - ...//other tokens + ... // other tokens /* Added a new background color for dark mode */ '--color-background-new': '#89D6FA', }), @@ -54,8 +54,7 @@ export const config = { extend: { colors: { background: { - - ...//other color values, + ... // other color values, /* Added a new background color */ new: 'var(--color-background-new)', }, From 45cf9c99a06156ae8db4979efd0e816de05cf522 Mon Sep 17 00:00:00 2001 From: Suraj Date: Tue, 2 Apr 2024 16:16:35 +0530 Subject: [PATCH 53/78] fix: docs updated --- .../customizing-theme/index.themed.stories.mdx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) create mode 100644 example/storybook-nativewind/src/theme-configuration/customizing-theme/index.themed.stories.mdx diff --git a/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.themed.stories.mdx b/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.themed.stories.mdx new file mode 100644 index 0000000000..cca6cea13c --- /dev/null +++ b/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.themed.stories.mdx @@ -0,0 +1,18 @@ +--- +title: Customizing Theme + +description: Customizing the theme in gluestack-ui with nativewind involves defining a theme configuration and applying it using GluestackUIProvider, enabling you to style your application's visual elements according to your design preferences. + +showHeader: true +--- + +import { Canvas, Meta, Story } from '@storybook/addon-docs'; +import { CollapsibleCode } from '@gluestack/design-system'; + + + + +## Customizing Tokens + +Coming Soon! + From 11351e8d6fc14e18dc1730ede9018f52610d8008 Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 2 Apr 2024 17:00:52 +0530 Subject: [PATCH 54/78] feat: add customizing theme page --- .../customizing-theme/index.nw.stories.mdx | 2 +- .../index.themed.stories.mdx | 49 ++++++++++++++++++- 2 files changed, 48 insertions(+), 3 deletions(-) diff --git a/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.nw.stories.mdx b/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.nw.stories.mdx index 55d397682d..7aa3bfca96 100644 --- a/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.nw.stories.mdx @@ -64,7 +64,7 @@ export const config = { }, ``` -You can customize all the tokens of the theme in `config`. For a complete list of tokens and default values, please check [default Tokens](https://gluestack.io/ui/nativewind/docs/theme-configuration/default-tokens). +You can customize all the tokens in `config`. For a complete list of tokens and default values, please check [default Tokens](https://gluestack.io/ui/nativewind/docs/theme-configuration/default-tokens). By utilizing this approach, you can seamlessly modify the primary color tokens of the theme while maintaining the overall theme configuration intact. diff --git a/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.themed.stories.mdx b/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.themed.stories.mdx index cca6cea13c..f88f830148 100644 --- a/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/theme-configuration/customizing-theme/index.themed.stories.mdx @@ -1,7 +1,7 @@ --- title: Customizing Theme -description: Customizing the theme in gluestack-ui with nativewind involves defining a theme configuration and applying it using GluestackUIProvider, enabling you to style your application's visual elements according to your design preferences. +description: Customizing the theme in gluestack-ui with gluestack-style involves defining a theme configuration and applying it using GluestackUIProvider, enabling you to style your application's visual elements according to your design preferences. showHeader: true --- @@ -14,5 +14,50 @@ import { CollapsibleCode } from '@gluestack/design-system'; ## Customizing Tokens -Coming Soon! +gluestack-ui with gluestack style ships with a default `config` which contains a set of already defined tokens which are mapped seperately with each mode. +Customizing these tokens allows you to tailor the core design elements of the library to match your project's unique visual identity. + +To customize tokens, follow these steps: + +1. Go to `gluestack-ui-provider/config.ts` file. Update or add new tokens as per your requirements. + + + +```jsx + + +export const config = createConfig({ + // ... config + tokens: { + colors: { + // replacing primary color + primary0: '#ffffff', + primary50: '#a3fff4', + primary100: '#82fff0', + primary200: '#61ffed', + primary300: '#45fae5', + primary400: '#24f9e1', + primary500: '#17f3d9', + primary600: '#12e4cb', + primary700: '#17ccb7', + primary800: '#1ab5a3', + primary900: '#1c9f90', + primary950: '#000000', + ... // Other tokens + }, + }, +}); + +type Config = typeof config; + +declare module '@gluestack-style/react' { + interface ICustomConfig extends Config {} +} + +``` + + +You can customize all the tokens in the `config`. For a complete list of tokens and default values, please check [default Tokens](https://gluestack.io/ui/gluestack-style/docs/theme-configuration/default-tokens). + +By utilizing this approach, you can seamlessly modify the primary color tokens of the theme while maintaining the overall theme configuration intact. \ No newline at end of file From 1445da32025247901874f43ba506ca4800653cd8 Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 2 Apr 2024 17:24:55 +0530 Subject: [PATCH 55/78] fix: revert provider change --- .../nativewind/gluestack-ui-provider/index.web.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx index 583a1a4a53..71d6147949 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/gluestack-ui-provider/index.web.tsx @@ -1,5 +1,8 @@ 'use client'; +import React from 'react'; import { config } from './config'; +import { OverlayProvider } from '@gluestack-ui/overlay'; +import { ToastProvider } from '@gluestack-ui/toast'; export function GluestackUIProvider({ mode = 'light', @@ -21,5 +24,9 @@ export function GluestackUIProvider({ if (head) head.appendChild(style); } } - return props.children; + return ( + + {props.children} + + ); } From e104c3afa47ef2861d9f4252ae8c1889a74819c4 Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 2 Apr 2024 17:26:12 +0530 Subject: [PATCH 56/78] fix: remove animationPreset prop from alert dialog --- .../components/AlertDialog/index.nw.stories.mdx | 16 ---------------- .../AlertDialog/index.themed.stories.mdx | 16 ---------------- 2 files changed, 32 deletions(-) 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 1944349bce..22357afaa2 100644 --- a/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx @@ -385,22 +385,6 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/ {`If true, the keyboard can dismiss the AlertDialog`} - - - - animationPreset - - - - slide | fade - - - slide - - - {`Specifies the animation preset for the AlertDialog`} - - diff --git a/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx b/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx index 6b748bcf6b..1c6863e222 100644 --- a/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx @@ -391,22 +391,6 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/ {`If true, the keyboard can dismiss the AlertDialog`} - - - - animationPreset - - - - slide | fade - - - slide - - - {`Specifies the animation preset for the AlertDialog`} - - From 220c28841b25437a017b141c1b6e0f6ebddd4267 Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Tue, 2 Apr 2024 17:29:04 +0530 Subject: [PATCH 57/78] feat: components fixeS --- .../nativewind/Demos/AlertDialogDemo.tsx | 24 +++++++------- .../nativewind/Demos/ModalDemo.tsx | 15 +++------ .../themed/Demos/AlertDialogDemo.tsx | 32 +++++++++---------- .../themed/Demos/ModalDemo.tsx | 17 ++++------ .../src/core-components/themed/Wrapper.tsx | 8 ++++- 5 files changed, 48 insertions(+), 48 deletions(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDialogDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDialogDemo.tsx index e1b49e30f7..23deb97439 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDialogDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDialogDemo.tsx @@ -11,18 +11,19 @@ import { AlertDialogFooter, AlertDialogCloseButton, } from '../'; -import { Heading } from '..//heading'; +import { Heading } from '../heading'; import { X } from 'lucide-react-native'; +import { OverlayProvider } from '@gluestack-ui/overlay'; const AlertDialogDemo = () => { const [showAlertDialog, setShowAlertDialog] = useState(false); const handleClose = () => setShowAlertDialog(!showAlertDialog); return ( - <> + - + @@ -35,23 +36,24 @@ const AlertDialogDemo = () => { - - Whoa, slow down there! This modal is like a red light at an - intersection, reminding you to stop and think before you proceed. - Is deleting this folder the right choice? - + Whoa, slow down there! - - - + ); }; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/ModalDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ModalDemo.tsx index 4da1dfebca..aca634301d 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/ModalDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/ModalDemo.tsx @@ -12,15 +12,15 @@ import { ModalBody, Text, ModalFooter, - Center, } from '../'; import React, { useState } from 'react'; +import { OverlayProvider } from '@gluestack-ui/overlay'; const ModalDemo = () => { const [showModal, setShowModal] = useState(false); const ref = React.useRef(null); return ( -
+ @@ -29,6 +29,7 @@ const ModalDemo = () => { onClose={() => { setShowModal(false); }} + size="full" finalFocusRef={ref} > @@ -40,18 +41,13 @@ const ModalDemo = () => { - - Elevate user interactions with our versatile modals. Seamlessly - integrate notifications, forms, and media displays. Make an impact - effortlessly. - + Elevate user interactions
+ ); }; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/AlertDialogDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/AlertDialogDemo.tsx index e1b49e30f7..89e46b57b9 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/AlertDialogDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/AlertDialogDemo.tsx @@ -11,47 +11,47 @@ import { AlertDialogFooter, AlertDialogCloseButton, } from '../'; -import { Heading } from '..//heading'; +import { Heading } from '../heading'; +import { OverlayProvider } from '@gluestack-ui/overlay'; + import { X } from 'lucide-react-native'; const AlertDialogDemo = () => { const [showAlertDialog, setShowAlertDialog] = useState(false); const handleClose = () => setShowAlertDialog(!showAlertDialog); return ( - <> + - + Return Policy - + - - Whoa, slow down there! This modal is like a red light at an - intersection, reminding you to stop and think before you proceed. - Is deleting this folder the right choice? - + Whoa, slow down there! - - - - + ); }; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx index 8d5045e48c..90b92460ef 100644 --- a/example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx @@ -12,15 +12,15 @@ import { ModalBody, Text, ModalFooter, - Center, } from '../'; import React, { useState } from 'react'; +import { OverlayProvider } from '@gluestack-ui/overlay'; const ModalDemo = () => { const [showModal, setShowModal] = useState(false); const ref = React.useRef(null); return ( -
+ @@ -30,6 +30,7 @@ const ModalDemo = () => { setShowModal(false); }} finalFocusRef={ref} + size="lg" > @@ -40,16 +41,12 @@ const ModalDemo = () => { - - Elevate user interactions with our versatile modals. Seamlessly - integrate notifications, forms, and media displays. Make an impact - effortlessly. - + Elevate user interactions.
+ ); }; diff --git a/example/storybook-nativewind/src/core-components/themed/Wrapper.tsx b/example/storybook-nativewind/src/core-components/themed/Wrapper.tsx index 05ad7427e5..22159937de 100644 --- a/example/storybook-nativewind/src/core-components/themed/Wrapper.tsx +++ b/example/storybook-nativewind/src/core-components/themed/Wrapper.tsx @@ -3,6 +3,8 @@ import React from 'react'; import { Box, Center } from '@gluestack-ui/themed'; import { StyledProvider, useColorMode } from '@gluestack-style/react'; import { createProvider } from '@gluestack-ui/provider'; +import { OverlayProvider } from '@gluestack-ui/overlay'; +import { ToastProvider } from '@gluestack-ui/toast'; const Provider = createProvider({ StyledProvider }) as any; Provider.displayName = 'Provider'; @@ -20,7 +22,11 @@ const Wrapper = ({ children, ...props }: any) => { }} {...props} > -
{children}
+
+ + {children} + +
); From 44e274ee30d752cf941fab00a4f83aa0d04eebdc Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Tue, 2 Apr 2024 17:38:36 +0530 Subject: [PATCH 58/78] feat: components fixeS --- .../src/core-components/nativewind/Demos/IconDemo.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/IconDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/IconDemo.tsx index d0acb991a0..7768cc4796 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/IconDemo.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/Demos/IconDemo.tsx @@ -2,6 +2,6 @@ import React from 'react'; import { EditIcon, Icon } from '../'; const IconDemo = () => { - return ; + return ; }; export default IconDemo; From 1912be1828018fe381eb67a606764376b642c824 Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Wed, 3 Apr 2024 11:43:06 +0530 Subject: [PATCH 59/78] feat: all components removed --- .../nativewind/ComponentCard.tsx | 71 ------ .../nativewind/Demos/AccordionDemo.tsx | 136 ----------- .../nativewind/Demos/ActionsheetDemo.tsx | 50 ---- .../nativewind/Demos/AlertDemo.tsx | 14 -- .../nativewind/Demos/AlertDialogDemo.tsx | 60 ----- .../nativewind/Demos/AvatarDemo.tsx | 22 -- .../nativewind/Demos/BadgeDemo.tsx | 13 - .../nativewind/Demos/BoxDemo.tsx | 12 - .../nativewind/Demos/ButtonDemo.tsx | 12 - .../nativewind/Demos/CenterDemo.tsx | 13 - .../nativewind/Demos/CheckboxDemo.tsx | 19 -- .../nativewind/Demos/DividerDemo.tsx | 21 -- .../nativewind/Demos/FabDemo.tsx | 15 -- .../nativewind/Demos/FormControlDemo.tsx | 45 ---- .../nativewind/Demos/HStackDemo.tsx | 14 -- .../nativewind/Demos/HeadingDemo.tsx | 7 - .../nativewind/Demos/IconDemo.tsx | 7 - .../nativewind/Demos/ImageDemo.tsx | 15 -- .../nativewind/Demos/InputDemo.tsx | 15 -- .../nativewind/Demos/LinkDemo.tsx | 12 - .../nativewind/Demos/MenuDemo.tsx | 43 ---- .../nativewind/Demos/ModalDemo.tsx | 73 ------ .../nativewind/Demos/PopoverDemo.tsx | 59 ----- .../nativewind/Demos/PressableDemo.tsx | 15 -- .../nativewind/Demos/ProgressDemo.tsx | 11 - .../nativewind/Demos/RadioDemo.tsx | 34 --- .../nativewind/Demos/SelectDemo.tsx | 49 ---- .../nativewind/Demos/SliderDemo.tsx | 19 -- .../nativewind/Demos/SpinnerDemo.tsx | 8 - .../nativewind/Demos/SwitchDemo.tsx | 13 - .../nativewind/Demos/TeaxtAreaDemo.tsx | 18 -- .../nativewind/Demos/TextDemo.tsx | 8 - .../nativewind/Demos/ToastDemo.tsx | 15 -- .../nativewind/Demos/TooltipDemo.tsx | 23 -- .../nativewind/Demos/VStackDemo.tsx | 18 -- .../src/core-components/nativewind/Grid.tsx | 48 ---- .../core-components/nativewind/content.tsx | 229 ------------------ .../core-components/themed/ComponentCard.tsx | 76 ------ .../themed/Demos/AccordionDemo.tsx | 136 ----------- .../themed/Demos/ActionsheetDemo.tsx | 50 ---- .../themed/Demos/AlertDemo.tsx | 14 -- .../themed/Demos/AlertDialogDemo.tsx | 58 ----- .../themed/Demos/AvatarDemo.tsx | 22 -- .../themed/Demos/BadgeDemo.tsx | 13 - .../core-components/themed/Demos/BoxDemo.tsx | 21 -- .../themed/Demos/ButtonDemo.tsx | 12 - .../themed/Demos/CenterDemo.tsx | 23 -- .../themed/Demos/CheckboxDemo.tsx | 19 -- .../themed/Demos/DividerDemo.tsx | 18 -- .../core-components/themed/Demos/FabDemo.tsx | 15 -- .../themed/Demos/FormControlDemo.tsx | 45 ---- .../themed/Demos/HStackDemo.tsx | 14 -- .../themed/Demos/HeadingDemo.tsx | 7 - .../core-components/themed/Demos/IconDemo.tsx | 7 - .../themed/Demos/ImageDemo.tsx | 15 -- .../themed/Demos/InputDemo.tsx | 15 -- .../core-components/themed/Demos/LinkDemo.tsx | 12 - .../core-components/themed/Demos/MenuDemo.tsx | 43 ---- .../themed/Demos/ModalDemo.tsx | 75 ------ .../themed/Demos/PopoverDemo.tsx | 59 ----- .../themed/Demos/PressableDemo.tsx | 21 -- .../themed/Demos/ProgressDemo.tsx | 11 - .../themed/Demos/RadioDemo.tsx | 34 --- .../themed/Demos/SelectDemo.tsx | 54 ----- .../themed/Demos/SliderDemo.tsx | 19 -- .../themed/Demos/SpinnerDemo.tsx | 8 - .../themed/Demos/SwitchDemo.tsx | 13 - .../themed/Demos/TeaxtAreaDemo.tsx | 18 -- .../core-components/themed/Demos/TextDemo.tsx | 8 - .../themed/Demos/ToastDemo.tsx | 15 -- .../themed/Demos/TooltipDemo.tsx | 23 -- .../themed/Demos/VStackDemo.tsx | 18 -- .../src/core-components/themed/Grid.tsx | 48 ---- .../src/core-components/themed/content.tsx | 229 ------------------ .../src/core-components/themed/index.ts | 1 - 75 files changed, 2545 deletions(-) delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/ComponentCard.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/AccordionDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/ActionsheetDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDialogDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/AvatarDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/BadgeDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/BoxDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/ButtonDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/CenterDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/CheckboxDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/DividerDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/FabDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/FormControlDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/HStackDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/HeadingDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/IconDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/ImageDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/InputDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/LinkDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/MenuDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/ModalDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/PopoverDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/PressableDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/ProgressDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/RadioDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/SelectDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/SliderDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/SpinnerDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/SwitchDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/TeaxtAreaDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/TextDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/ToastDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/TooltipDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Demos/VStackDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/Grid.tsx delete mode 100644 example/storybook-nativewind/src/core-components/nativewind/content.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/ComponentCard.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/AccordionDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/ActionsheetDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/AlertDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/AlertDialogDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/AvatarDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/BadgeDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/BoxDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/ButtonDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/CenterDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/CheckboxDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/DividerDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/FabDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/FormControlDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/HStackDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/HeadingDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/IconDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/ImageDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/InputDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/LinkDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/MenuDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/PopoverDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/PressableDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/ProgressDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/RadioDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/SelectDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/SliderDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/SpinnerDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/SwitchDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/TeaxtAreaDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/TextDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/ToastDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/TooltipDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Demos/VStackDemo.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/Grid.tsx delete mode 100644 example/storybook-nativewind/src/core-components/themed/content.tsx diff --git a/example/storybook-nativewind/src/core-components/nativewind/ComponentCard.tsx b/example/storybook-nativewind/src/core-components/nativewind/ComponentCard.tsx deleted file mode 100644 index 720d26ea3a..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/ComponentCard.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import React from 'react'; -import { Box, Text, VStack } from '@gluestack/design-system'; -import NextLink from 'next/link'; - -export const ComponentCard = ({ - title, - child, - padding, - href, -}: { - title: string; - child: React.ReactNode; - padding?: string; - props?: any; - href: string; -}) => { - return ( - - - {child} - - - - - {title} - - - - - ); -}; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/AccordionDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/AccordionDemo.tsx deleted file mode 100644 index 3cdddcea28..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/AccordionDemo.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import React from 'react'; -import { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, -} from '../'; -import { ChevronDownIcon } from 'lucide-react-native'; -import { ChevronUpIcon } from 'lucide-react-native'; -import { ScrollView } from '../'; -const AccordionDemo = () => { - const accRef = React.useRef(null); - return ( - - - - - - {(states: any) => ( - <> - - How do I place an order? - - {states.isExpanded ? ( - - ) : ( - - )} - - )} - - - - - Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id, sed - laudantium eligendi maxime rerum, saepe vitae unde voluptas hic, - culpa ex dolorem omnis incidunt quisquam? Ex fuga debitis - recusandae incidunt. - - - - - - - - {({ isExpanded }: { isExpanded: boolean }) => { - return ( - <> - - What payment methods do you accept? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Lorem ipsum dolor sit amet consectetur adipisicing elit. - Perferendis maxime modi quaerat temporibus quos, omnis, vel ullam - debitis labore error fugit, blanditiis dolore illum consequuntur - laboriosam. Voluptates est obcaecati nemo! - - - - - - - - {({ isExpanded }: { isExpanded: boolean }) => { - 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. - - - - - - - - {({ isExpanded }: { isExpanded: boolean }) => { - return ( - <> - - Can I cancel my subscription at any time? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Et - dolorem eos ex officia ratione omnis similique delectus aliquam - culpa. Minus quis numquam laboriosam non natus, distinctio facilis - aspernatur beatae earum. - - - - - - ); -}; - -export default AccordionDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/ActionsheetDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ActionsheetDemo.tsx deleted file mode 100644 index 0d809ca220..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/ActionsheetDemo.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React from 'react'; -import { Button, ButtonText, Center } from '../'; -import { - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, -} from '..//actionsheet'; - -const ActionsheetDemo = () => { - const [showActionsheet, setShowActionsheet] = React.useState(false); - - const handleClose = () => setShowActionsheet(false); - - return ( -
- - - - - - - - - Delete - - - Share - - - Play - - - Favourite - - - Cancel - - - -
- ); -}; - -export default ActionsheetDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDemo.tsx deleted file mode 100644 index e51a70e94b..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDemo.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Alert, AlertIcon, AlertText } from '..//alert'; -import { InfoIcon } from '../'; - -const AlertDemo = () => { - return ( - - - Selection successfully moved! - - ); -}; - -export default AlertDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDialogDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDialogDemo.tsx deleted file mode 100644 index 23deb97439..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/AlertDialogDemo.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import React, { useState } from 'react'; -import { - Button, - ButtonText, - AlertDialog, - AlertDialogBackdrop, - AlertDialogContent, - AlertDialogHeader, - AlertDialogBody, - Text, - AlertDialogFooter, - AlertDialogCloseButton, -} from '../'; -import { Heading } from '../heading'; -import { X } from 'lucide-react-native'; -import { OverlayProvider } from '@gluestack-ui/overlay'; - -const AlertDialogDemo = () => { - const [showAlertDialog, setShowAlertDialog] = useState(false); - const handleClose = () => setShowAlertDialog(!showAlertDialog); - return ( - - - - - - - Return Policy - - - - - - Whoa, slow down there! - - - - - - - - - ); -}; - -export default AlertDialogDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/AvatarDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/AvatarDemo.tsx deleted file mode 100644 index 570c456fce..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/AvatarDemo.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { - Avatar, - AvatarBadge, - AvatarFallbackText, - AvatarImage, -} from '..//avatar'; -import React from 'react'; -const Avatardemo = () => { - return ( - - John Doe - - - - ); -}; - -export default Avatardemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/BadgeDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/BadgeDemo.tsx deleted file mode 100644 index 970bed8f39..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/BadgeDemo.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { Badge, BadgeText, BadgeIcon } from '..//badge'; -import { GlobeIcon } from '..//icon'; -const BadgeDemo = () => { - return ( - - Verified - - - ); -}; - -export default BadgeDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/BoxDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/BoxDemo.tsx deleted file mode 100644 index fdf6c115ce..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/BoxDemo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { Box, Text } from '../'; -import React from 'react'; - -const BoxDemo = () => { - return ( - - This is the Box - - ); -}; - -export default BoxDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/ButtonDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ButtonDemo.tsx deleted file mode 100644 index 83067af774..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/ButtonDemo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { Button, ButtonText } from '..//button'; -import React from 'react'; - -const ButtonDemo = () => { - return ( - - ); -}; - -export default ButtonDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/CenterDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/CenterDemo.tsx deleted file mode 100644 index 7a39a66c8f..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/CenterDemo.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { Center } from '..//center'; -import { Text } from '..//text'; - -const CenterDemo = () => { - return ( -
- This is the center. -
- ); -}; - -export default CenterDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/CheckboxDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/CheckboxDemo.tsx deleted file mode 100644 index 4e115a4eba..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/CheckboxDemo.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { - CheckIcon, - Checkbox, - CheckboxIcon, - CheckboxIndicator, - CheckboxLabel, -} from '../'; -import React from 'react'; - -export const CheckboxDemo = () => { - return ( - - - - - Label - - ); -}; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/DividerDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/DividerDemo.tsx deleted file mode 100644 index 2e14ad3841..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/DividerDemo.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import React from 'react'; -import { HStack, Heading, Divider } from '../'; - -const DividerDemo = () => { - return ( - - - Firefox - - - - Chrome - - - ); -}; - -export default DividerDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/FabDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/FabDemo.tsx deleted file mode 100644 index bf35b9148f..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/FabDemo.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Fab, FabIcon, Box, MenuIcon, FabLabel } from '../'; -import React from 'react'; - -const FabDemo = () => { - return ( - - - - Menu - - - ); -}; - -export default FabDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/FormControlDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/FormControlDemo.tsx deleted file mode 100644 index e7dc9ee535..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/FormControlDemo.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import { - AlertCircleIcon, - FormControl, - FormControlHelper, - Input, - FormControlLabel, - FormControlLabelText, - FormControlHelperText, - FormControlError, - FormControlErrorText, - FormControlErrorIcon, - InputField, -} from '../'; -const FormControlDemo = () => { - return ( - - - Password - - - - - - - - Must be atleast 6 characters. - - - - - - - Atleast 6 characters are required. - - - - ); -}; - -export default FormControlDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/HStackDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/HStackDemo.tsx deleted file mode 100644 index 465142895e..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/HStackDemo.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Box, HStack } from '../'; - -const HStackDemo = () => { - return ( - - - - - - ); -}; - -export default HStackDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/HeadingDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/HeadingDemo.tsx deleted file mode 100644 index 3b0b7e224e..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/HeadingDemo.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { Heading } from '../'; -const HeadingDemo = () => { - return I am a Heading; -}; - -export default HeadingDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/IconDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/IconDemo.tsx deleted file mode 100644 index 7768cc4796..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/IconDemo.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { EditIcon, Icon } from '../'; - -const IconDemo = () => { - return ; -}; -export default IconDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/ImageDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ImageDemo.tsx deleted file mode 100644 index 5f88eaf406..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/ImageDemo.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { Image } from '../'; - -const ImageDemo = () => { - return ( - - ); -}; - -export default ImageDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/InputDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/InputDemo.tsx deleted file mode 100644 index 906e56488c..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/InputDemo.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Input, InputField, InputIcon, InputSlot, SearchIcon } from '../'; -import React from 'react'; - -const InputDemo = () => { - return ( - - - - - - - ); -}; - -export default InputDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/LinkDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/LinkDemo.tsx deleted file mode 100644 index 368ce52d87..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/LinkDemo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import { Link, LinkText } from '../'; - -const LinkDemo = () => { - return ( - - gluestack - - ); -}; - -export default LinkDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/MenuDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/MenuDemo.tsx deleted file mode 100644 index 4ac04df82c..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/MenuDemo.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { - Menu, - Button, - MenuItem, - Icon, - MenuItemLabel, - GlobeIcon, - ButtonText, -} from '../'; -import { PuzzleIcon, SettingsIcon } from 'lucide-react-native'; -import React from 'react'; - -const MenuDemo = () => { - return ( - { - return ( - - ); - }} - > - - - Community - - - - Settings - - - - Plugins - - - ); -}; - -export default MenuDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/ModalDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ModalDemo.tsx deleted file mode 100644 index aca634301d..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/ModalDemo.tsx +++ /dev/null @@ -1,73 +0,0 @@ -import { - Heading, - ModalBackdrop, - Button, - ButtonText, - Modal, - ModalContent, - ModalHeader, - ModalCloseButton, - Icon, - CloseIcon, - ModalBody, - Text, - ModalFooter, -} from '../'; -import React, { useState } from 'react'; -import { OverlayProvider } from '@gluestack-ui/overlay'; - -const ModalDemo = () => { - const [showModal, setShowModal] = useState(false); - const ref = React.useRef(null); - return ( - - - { - setShowModal(false); - }} - size="full" - finalFocusRef={ref} - > - - - - Engage with Modals - - - - - - Elevate user interactions - - - - - - - - - ); -}; - -export default ModalDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/PopoverDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/PopoverDemo.tsx deleted file mode 100644 index d67dc5c495..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/PopoverDemo.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { - Avatar, - Box, - Popover, - Pressable, - Text, - PopoverContent, - AvatarFallbackText, - PopoverBody, - HStack, - CircleIcon, -} from '../'; -import React from 'react'; - -const PopoverDemo = () => { - const [showPopover, setShowPopover] = React.useState(true); - - return ( - - { - return ( - { - setShowPopover(!showPopover); - }} - > - - Kevin James - - - ); - }} - > - - - - Kevin James - - - - - Active - - - - - - - ); -}; - -export default PopoverDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/PressableDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/PressableDemo.tsx deleted file mode 100644 index 542bc7b19a..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/PressableDemo.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Pressable, Text } from '../'; -import React from 'react'; - -const PressableDemo = () => { - return ( - console.log('Hello')} - className="p-5 bg-primary-500" - > - Press me - - ); -}; - -export default PressableDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/ProgressDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ProgressDemo.tsx deleted file mode 100644 index 4f615e7142..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/ProgressDemo.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { Progress, ProgressFilledTrack } from '../'; -const ProgressDemo = () => { - return ( - - - - ); -}; - -export default ProgressDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/RadioDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/RadioDemo.tsx deleted file mode 100644 index 76abcd41af..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/RadioDemo.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { useState } from 'react'; -import { - CircleIcon, - Radio, - RadioGroup, - RadioIcon, - RadioIndicator, - RadioLabel, - VStack, -} from '../'; - -const RadioDemo = () => { - const [values, setValues] = useState('Monday'); - return ( - - - - Option A - - - - - - Option B - - - - - - - ); -}; - -export default RadioDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/SelectDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/SelectDemo.tsx deleted file mode 100644 index 59bd1d7221..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/SelectDemo.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import React from 'react'; -import { - ChevronDownIcon, - Icon, - Select, - SelectTrigger, - SelectInput, - SelectIcon, - SelectPortal, - SelectBackdrop, - SelectContent, - SelectDragIndicatorWrapper, - SelectDragIndicator, - SelectItem, -} from '../'; - -const SelectDemo = () => { - return ( - - ); -}; - -export default SelectDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/SliderDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/SliderDemo.tsx deleted file mode 100644 index c572521fa3..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/SliderDemo.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Slider, SliderFilledTrack, SliderThumb, SliderTrack } from '../'; -import React from 'react'; - -export const SliderDemo = () => { - return ( - - - - - - - ); -}; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/SpinnerDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/SpinnerDemo.tsx deleted file mode 100644 index c44bd9f924..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/SpinnerDemo.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { Spinner } from '../'; - -const SpinnerDemo = () => { - return ; -}; - -export default SpinnerDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/SwitchDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/SwitchDemo.tsx deleted file mode 100644 index 7cfa4522e8..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/SwitchDemo.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { HStack, Switch, Text } from '../'; - -const SwitchDemo = () => { - return ( - - - Allow notifications - - ); -}; - -export default SwitchDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/TeaxtAreaDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/TeaxtAreaDemo.tsx deleted file mode 100644 index 928d77a246..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/TeaxtAreaDemo.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Textarea, TextareaInput } from '../'; -import React from 'react'; - -const TextAreaDemo = () => { - return ( - - ); -}; - -export default TextAreaDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/TextDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/TextDemo.tsx deleted file mode 100644 index ee8d9cc668..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/TextDemo.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { Text } from '../'; - -const TextDemo = () => { - return Hello World!; -}; - -export default TextDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/ToastDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/ToastDemo.tsx deleted file mode 100644 index 6fcf35e699..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/ToastDemo.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Toast, ToastDescription, ToastTitle, VStack } from '../'; -import React from 'react'; - -const ToastDemo = () => { - return ( - - - Info - Add a note here - - - ); -}; - -export default ToastDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/TooltipDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/TooltipDemo.tsx deleted file mode 100644 index 808ea0b534..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/TooltipDemo.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Tooltip, TooltipContent, TooltipText, Button, ButtonText } from '../'; -import React from 'react'; - -const TooltipDemo = () => { - return ( - { - return ( - - ); - }} - > - - Tooltip - - - ); -}; - -export default TooltipDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Demos/VStackDemo.tsx b/example/storybook-nativewind/src/core-components/nativewind/Demos/VStackDemo.tsx deleted file mode 100644 index 11686ca74e..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Demos/VStackDemo.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { Box, VStack } from '../'; - -const VStackDemo = () => { - return ( - - - - - - ); -}; - -export default VStackDemo; diff --git a/example/storybook-nativewind/src/core-components/nativewind/Grid.tsx b/example/storybook-nativewind/src/core-components/nativewind/Grid.tsx deleted file mode 100644 index ea5130412b..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/Grid.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import { Box } from '@gluestack-ui/themed'; -import { ComponentCard } from './ComponentCard'; -import { content } from './content'; - -export const Grid = () => { - return ( - <> - - {content.map((item, index) => ( - - ))} - - - ); -}; diff --git a/example/storybook-nativewind/src/core-components/nativewind/content.tsx b/example/storybook-nativewind/src/core-components/nativewind/content.tsx deleted file mode 100644 index b1194fa80e..0000000000 --- a/example/storybook-nativewind/src/core-components/nativewind/content.tsx +++ /dev/null @@ -1,229 +0,0 @@ -import React from 'react'; -// import SelectDemo from './Demos/SelectDemo'; -import { CheckboxDemo } from './Demos/CheckboxDemo'; -import { SliderDemo } from './Demos/SliderDemo'; -import FormControlDemo from './Demos/FormControlDemo'; -import BadgeDemo from './Demos/BadgeDemo'; -import ToastDemo from './Demos/ToastDemo'; -import AvatarDemo from './Demos/AvatarDemo'; -import HeadingDemo from './Demos/HeadingDemo'; -import TextDemo from './Demos/TextDemo'; -import BoxDemo from './Demos/BoxDemo'; -import DividerDemo from './Demos/DividerDemo'; -import HStackDemo from './Demos/HStackDemo'; -import VStackDemo from './Demos/VStackDemo'; -import AlertDemo from './Demos/AlertDemo'; -import ProgressDemo from './Demos/ProgressDemo'; -import SpinnerDemo from './Demos/SpinnerDemo'; -import ButtonDemo from './Demos/ButtonDemo'; -import InputDemo from './Demos/InputDemo'; -import LinkDemo from './Demos/LinkDemo'; -import PressableDemo from './Demos/PressableDemo'; -import RadioDemo from './Demos/RadioDemo'; -import SwitchDemo from './Demos/SwitchDemo'; -import TextAreaDemo from './Demos/TeaxtAreaDemo'; -import TooltipDemo from './Demos/TooltipDemo'; -import IconDemo from './Demos/IconDemo'; -import ImageDemo from './Demos/ImageDemo'; -import FabDemo from './Demos/FabDemo'; -import CenterDemo from './Demos/CenterDemo'; -import AlertDialogDemo from './Demos/AlertDialogDemo'; -import ModalDemo from './Demos/ModalDemo'; -import AccordionDemo from './Demos/AccordionDemo'; -// import MenuDemo from './Demos/MenuDemo'; -// import PopoverDemo from './Demos/PopoverDemo'; -import ActionsheetDemo from './Demos/ActionsheetDemo'; - -export const content = [ - { - title: 'Actionsheet', - child: , - padding: '$0', - href: '/ui/docs/components/disclosure/actionsheet', - }, - { - title: 'AlertDialog', - child: , - padding: '$0', - href: '/ui/docs/components/overlay/alert-dialog', - }, - { - title: 'Alert', - child: , - href: '/ui/docs/components/feedback/alert', - }, - { - title: 'Avatar', - child: , - href: '/ui/docs/components/media-and-icons/avatar', - }, - { - title: 'Accordion', - child: , - href: '/ui/docs/components/disclosure/accordion', - }, - - { - title: 'Badge', - child: , - href: '/ui/docs/components/data-display/badge', - }, - { - title: 'Box', - child: , - href: '/ui/docs/components/layout/box', - }, - { - title: 'Button', - child: , - href: '/ui/docs/components/forms/button', - }, - - { - title: 'Center', - child: , - href: '/ui/docs/components/layout/center', - }, - { - title: 'Checkbox', - child: , - href: '/ui/docs/components/forms/checkbox', - }, - - { - title: 'Divider', - child: , - href: '/ui/docs/components/data-display/divider', - }, - - { - title: 'Fab', - child: , - href: '/ui/docs/components/others/fab', - }, - { - title: 'FormControl', - child: , - href: '/ui/docs/components/forms/form-control', - }, - { - title: 'Heading', - child: , - href: '/ui/docs/components/typography/heading', - }, - { - title: 'HStack', - child: , - href: '/ui/docs/components/layout/hstack', - }, - - { - title: 'Icon', - child: , - href: '/ui/docs/components/media-and-icons/icon', - }, - { - title: 'Image', - child: , - href: '/ui/docs/components/media-and-icons/image', - }, - { - title: 'Input', - child: , - href: '/ui/docs/components/forms/input', - }, - - { - title: 'Link', - child: , - href: '/ui/docs/components/forms/link', - }, - - // { - // title: 'Menu', - // child: , - // padding: '$0', - // href: '/ui/docs/components/overlay/menu', - // }, - - { - title: 'Modal', - child: , - padding: '$0', - href: '/ui/docs/components/overlay/modal', - }, - - // { - // title: 'Popover', - // child: , - // padding: '$0', - // href: '/ui/docs/components/overlay/popover', - // }, - - { - title: 'Pressable', - child: , - href: '/ui/docs/components/forms/pressable', - }, - { - title: 'Progress', - child: , - href: '/ui/docs/components/feedback/progress', - }, - - { - title: 'Radio', - child: , - href: '/ui/docs/components/forms/radio', - }, - - // { - // title: 'Select', - // child: , - // href: '/ui/docs/components/forms/select', - // }, - - { - title: 'Slider', - child: , - href: '/ui/docs/components/forms/slider', - }, - { - title: 'Spinner', - child: , - href: '/ui/docs/components/feedback/spinner', - }, - { - title: 'Switch', - child: , - href: '/ui/docs/components/forms/switch', - }, - - { - title: 'Text', - child: , - href: '/ui/docs/components/typography/text', - }, - { - title: 'TextArea', - child: , - href: '/ui/docs/components/forms/textarea', - }, - { - title: 'Toast', - child: , - href: '/ui/docs/components/feedback/toast', - }, - - { - title: 'Tooltip', - child: , - href: '/ui/docs/components/overlay/tooltip', - }, - - { - title: 'VStack', - child: , - href: '/ui/docs/components/layout/vstack', - }, -]; diff --git a/example/storybook-nativewind/src/core-components/themed/ComponentCard.tsx b/example/storybook-nativewind/src/core-components/themed/ComponentCard.tsx deleted file mode 100644 index 637d284caf..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/ComponentCard.tsx +++ /dev/null @@ -1,76 +0,0 @@ -import React from 'react'; -import { Box, Text, VStack } from '@gluestack/design-system'; -import NextLink from 'next/link'; - -export const ComponentCard = ({ - title, - child, - padding, - href, -}: { - title: string; - child: React.ReactNode; - padding?: string; - props?: any; - href: string; -}) => { - return ( - - - {child} - - - - - {title} - - - - - ); -}; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/AccordionDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/AccordionDemo.tsx deleted file mode 100644 index 3cdddcea28..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/AccordionDemo.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import React from 'react'; -import { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, -} from '../'; -import { ChevronDownIcon } from 'lucide-react-native'; -import { ChevronUpIcon } from 'lucide-react-native'; -import { ScrollView } from '../'; -const AccordionDemo = () => { - const accRef = React.useRef(null); - return ( - - - - - - {(states: any) => ( - <> - - How do I place an order? - - {states.isExpanded ? ( - - ) : ( - - )} - - )} - - - - - Lorem ipsum dolor sit amet consectetur, adipisicing elit. Id, sed - laudantium eligendi maxime rerum, saepe vitae unde voluptas hic, - culpa ex dolorem omnis incidunt quisquam? Ex fuga debitis - recusandae incidunt. - - - - - - - - {({ isExpanded }: { isExpanded: boolean }) => { - return ( - <> - - What payment methods do you accept? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Lorem ipsum dolor sit amet consectetur adipisicing elit. - Perferendis maxime modi quaerat temporibus quos, omnis, vel ullam - debitis labore error fugit, blanditiis dolore illum consequuntur - laboriosam. Voluptates est obcaecati nemo! - - - - - - - - {({ isExpanded }: { isExpanded: boolean }) => { - 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. - - - - - - - - {({ isExpanded }: { isExpanded: boolean }) => { - return ( - <> - - Can I cancel my subscription at any time? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - Lorem ipsum dolor sit amet consectetur adipisicing elit. Et - dolorem eos ex officia ratione omnis similique delectus aliquam - culpa. Minus quis numquam laboriosam non natus, distinctio facilis - aspernatur beatae earum. - - - - - - ); -}; - -export default AccordionDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ActionsheetDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ActionsheetDemo.tsx deleted file mode 100644 index 0d809ca220..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/ActionsheetDemo.tsx +++ /dev/null @@ -1,50 +0,0 @@ -import React from 'react'; -import { Button, ButtonText, Center } from '../'; -import { - Actionsheet, - ActionsheetBackdrop, - ActionsheetContent, - ActionsheetDragIndicator, - ActionsheetDragIndicatorWrapper, - ActionsheetItem, - ActionsheetItemText, -} from '..//actionsheet'; - -const ActionsheetDemo = () => { - const [showActionsheet, setShowActionsheet] = React.useState(false); - - const handleClose = () => setShowActionsheet(false); - - return ( -
- - - - - - - - - Delete - - - Share - - - Play - - - Favourite - - - Cancel - - - -
- ); -}; - -export default ActionsheetDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/AlertDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/AlertDemo.tsx deleted file mode 100644 index e51a70e94b..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/AlertDemo.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Alert, AlertIcon, AlertText } from '..//alert'; -import { InfoIcon } from '../'; - -const AlertDemo = () => { - return ( - - - Selection successfully moved! - - ); -}; - -export default AlertDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/AlertDialogDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/AlertDialogDemo.tsx deleted file mode 100644 index 89e46b57b9..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/AlertDialogDemo.tsx +++ /dev/null @@ -1,58 +0,0 @@ -import React, { useState } from 'react'; -import { - Button, - ButtonText, - AlertDialog, - AlertDialogBackdrop, - AlertDialogContent, - AlertDialogHeader, - AlertDialogBody, - Text, - AlertDialogFooter, - AlertDialogCloseButton, -} from '../'; -import { Heading } from '../heading'; -import { OverlayProvider } from '@gluestack-ui/overlay'; - -import { X } from 'lucide-react-native'; - -const AlertDialogDemo = () => { - const [showAlertDialog, setShowAlertDialog] = useState(false); - const handleClose = () => setShowAlertDialog(!showAlertDialog); - return ( - - - - - - - Return Policy - - - - - - Whoa, slow down there! - - - - - - - - - ); -}; - -export default AlertDialogDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/AvatarDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/AvatarDemo.tsx deleted file mode 100644 index 570c456fce..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/AvatarDemo.tsx +++ /dev/null @@ -1,22 +0,0 @@ -import { - Avatar, - AvatarBadge, - AvatarFallbackText, - AvatarImage, -} from '..//avatar'; -import React from 'react'; -const Avatardemo = () => { - return ( - - John Doe - - - - ); -}; - -export default Avatardemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/BadgeDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/BadgeDemo.tsx deleted file mode 100644 index 970bed8f39..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/BadgeDemo.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { Badge, BadgeText, BadgeIcon } from '..//badge'; -import { GlobeIcon } from '..//icon'; -const BadgeDemo = () => { - return ( - - Verified - - - ); -}; - -export default BadgeDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/BoxDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/BoxDemo.tsx deleted file mode 100644 index 2417961664..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/BoxDemo.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Box, Text } from '../'; -import React from 'react'; - -const BoxDemo = () => { - return ( - - - This is the Box - - - ); -}; - -export default BoxDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ButtonDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ButtonDemo.tsx deleted file mode 100644 index 83067af774..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/ButtonDemo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { Button, ButtonText } from '..//button'; -import React from 'react'; - -const ButtonDemo = () => { - return ( - - ); -}; - -export default ButtonDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/CenterDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/CenterDemo.tsx deleted file mode 100644 index 0bcf00e8a9..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/CenterDemo.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from 'react'; -import { Center } from '..//center'; -import { Text } from '..//text'; - -const CenterDemo = () => { - return ( -
- - This is the center. - -
- ); -}; - -export default CenterDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/CheckboxDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/CheckboxDemo.tsx deleted file mode 100644 index 4e115a4eba..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/CheckboxDemo.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { - CheckIcon, - Checkbox, - CheckboxIcon, - CheckboxIndicator, - CheckboxLabel, -} from '../'; -import React from 'react'; - -export const CheckboxDemo = () => { - return ( - - - - - Label - - ); -}; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/DividerDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/DividerDemo.tsx deleted file mode 100644 index 26763372f5..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/DividerDemo.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { VStack, Heading, Divider } from '../'; - -const DividerDemo = () => { - return ( - - - Firefox - - - - Chrome - - - ); -}; - -export default DividerDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/FabDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/FabDemo.tsx deleted file mode 100644 index bf35b9148f..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/FabDemo.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Fab, FabIcon, Box, MenuIcon, FabLabel } from '../'; -import React from 'react'; - -const FabDemo = () => { - return ( - - - - Menu - - - ); -}; - -export default FabDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/FormControlDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/FormControlDemo.tsx deleted file mode 100644 index e7dc9ee535..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/FormControlDemo.tsx +++ /dev/null @@ -1,45 +0,0 @@ -import React from 'react'; -import { - AlertCircleIcon, - FormControl, - FormControlHelper, - Input, - FormControlLabel, - FormControlLabelText, - FormControlHelperText, - FormControlError, - FormControlErrorText, - FormControlErrorIcon, - InputField, -} from '../'; -const FormControlDemo = () => { - return ( - - - Password - - - - - - - - Must be atleast 6 characters. - - - - - - - Atleast 6 characters are required. - - - - ); -}; - -export default FormControlDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/HStackDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/HStackDemo.tsx deleted file mode 100644 index 8ee0116dde..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/HStackDemo.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import React from 'react'; -import { Box, HStack } from '../'; - -const HStackDemo = () => { - return ( - - - - - - ); -}; - -export default HStackDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/HeadingDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/HeadingDemo.tsx deleted file mode 100644 index 3b0b7e224e..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/HeadingDemo.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { Heading } from '../'; -const HeadingDemo = () => { - return I am a Heading; -}; - -export default HeadingDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/IconDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/IconDemo.tsx deleted file mode 100644 index d0acb991a0..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/IconDemo.tsx +++ /dev/null @@ -1,7 +0,0 @@ -import React from 'react'; -import { EditIcon, Icon } from '../'; - -const IconDemo = () => { - return ; -}; -export default IconDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ImageDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ImageDemo.tsx deleted file mode 100644 index 5f88eaf406..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/ImageDemo.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import React from 'react'; -import { Image } from '../'; - -const ImageDemo = () => { - return ( - - ); -}; - -export default ImageDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/InputDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/InputDemo.tsx deleted file mode 100644 index 7863be4060..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/InputDemo.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Input, InputField, InputIcon, InputSlot, SearchIcon } from '../'; -import React from 'react'; - -const InputDemo = () => { - return ( - - - - - - - ); -}; - -export default InputDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/LinkDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/LinkDemo.tsx deleted file mode 100644 index 368ce52d87..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/LinkDemo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import React from 'react'; -import { Link, LinkText } from '../'; - -const LinkDemo = () => { - return ( - - gluestack - - ); -}; - -export default LinkDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/MenuDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/MenuDemo.tsx deleted file mode 100644 index 4ac04df82c..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/MenuDemo.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import { - Menu, - Button, - MenuItem, - Icon, - MenuItemLabel, - GlobeIcon, - ButtonText, -} from '../'; -import { PuzzleIcon, SettingsIcon } from 'lucide-react-native'; -import React from 'react'; - -const MenuDemo = () => { - return ( - { - return ( - - ); - }} - > - - - Community - - - - Settings - - - - Plugins - - - ); -}; - -export default MenuDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx deleted file mode 100644 index 90b92460ef..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/ModalDemo.tsx +++ /dev/null @@ -1,75 +0,0 @@ -import { - Heading, - ModalBackdrop, - Button, - ButtonText, - Modal, - ModalContent, - ModalHeader, - ModalCloseButton, - Icon, - CloseIcon, - ModalBody, - Text, - ModalFooter, -} from '../'; -import React, { useState } from 'react'; -import { OverlayProvider } from '@gluestack-ui/overlay'; - -const ModalDemo = () => { - const [showModal, setShowModal] = useState(false); - const ref = React.useRef(null); - return ( - - - { - setShowModal(false); - }} - finalFocusRef={ref} - size="lg" - > - - - - Engage with Modals - - - - - - Elevate user interactions. - - - - - - - - - ); -}; - -export default ModalDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/PopoverDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/PopoverDemo.tsx deleted file mode 100644 index d67dc5c495..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/PopoverDemo.tsx +++ /dev/null @@ -1,59 +0,0 @@ -import { - Avatar, - Box, - Popover, - Pressable, - Text, - PopoverContent, - AvatarFallbackText, - PopoverBody, - HStack, - CircleIcon, -} from '../'; -import React from 'react'; - -const PopoverDemo = () => { - const [showPopover, setShowPopover] = React.useState(true); - - return ( - - { - return ( - { - setShowPopover(!showPopover); - }} - > - - Kevin James - - - ); - }} - > - - - - Kevin James - - - - - Active - - - - - - - ); -}; - -export default PopoverDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/PressableDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/PressableDemo.tsx deleted file mode 100644 index fcba73d307..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/PressableDemo.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { Pressable, Text } from '../'; -import React from 'react'; - -const PressableDemo = () => { - return ( - - - Press me - - - ); -}; - -export default PressableDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ProgressDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ProgressDemo.tsx deleted file mode 100644 index 9c47eeb8f4..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/ProgressDemo.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import React from 'react'; -import { Progress, ProgressFilledTrack } from '../'; -const ProgressDemo = () => { - return ( - - - - ); -}; - -export default ProgressDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/RadioDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/RadioDemo.tsx deleted file mode 100644 index 0276e86b16..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/RadioDemo.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import React, { useState } from 'react'; -import { - CircleIcon, - Radio, - RadioGroup, - RadioIcon, - RadioIndicator, - RadioLabel, - VStack, -} from '../'; - -const RadioDemo = () => { - const [values, setValues] = useState('Monday'); - return ( - - - - Option A - - - - - - Option B - - - - - - - ); -}; - -export default RadioDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/SelectDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/SelectDemo.tsx deleted file mode 100644 index 3c50799307..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/SelectDemo.tsx +++ /dev/null @@ -1,54 +0,0 @@ -import React from 'react'; -import { - ChevronDownIcon, - Icon, - Select, - SelectTrigger, - SelectInput, - SelectIcon, - SelectPortal, - SelectBackdrop, - SelectContent, - SelectDragIndicatorWrapper, - SelectDragIndicator, - SelectItem, -} from '../'; - -const SelectDemo = () => { - return ( - - ); -}; - -export default SelectDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/SliderDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/SliderDemo.tsx deleted file mode 100644 index c572521fa3..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/SliderDemo.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { Slider, SliderFilledTrack, SliderThumb, SliderTrack } from '../'; -import React from 'react'; - -export const SliderDemo = () => { - return ( - - - - - - - ); -}; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/SpinnerDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/SpinnerDemo.tsx deleted file mode 100644 index c44bd9f924..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/SpinnerDemo.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { Spinner } from '../'; - -const SpinnerDemo = () => { - return ; -}; - -export default SpinnerDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/SwitchDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/SwitchDemo.tsx deleted file mode 100644 index 7cfa4522e8..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/SwitchDemo.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import React from 'react'; -import { HStack, Switch, Text } from '../'; - -const SwitchDemo = () => { - return ( - - - Allow notifications - - ); -}; - -export default SwitchDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/TeaxtAreaDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/TeaxtAreaDemo.tsx deleted file mode 100644 index 928d77a246..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/TeaxtAreaDemo.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Textarea, TextareaInput } from '../'; -import React from 'react'; - -const TextAreaDemo = () => { - return ( - - ); -}; - -export default TextAreaDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/TextDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/TextDemo.tsx deleted file mode 100644 index ee8d9cc668..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/TextDemo.tsx +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { Text } from '../'; - -const TextDemo = () => { - return Hello World!; -}; - -export default TextDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/ToastDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/ToastDemo.tsx deleted file mode 100644 index 6fcf35e699..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/ToastDemo.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Toast, ToastDescription, ToastTitle, VStack } from '../'; -import React from 'react'; - -const ToastDemo = () => { - return ( - - - Info - Add a note here - - - ); -}; - -export default ToastDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/TooltipDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/TooltipDemo.tsx deleted file mode 100644 index 808ea0b534..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/TooltipDemo.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { Tooltip, TooltipContent, TooltipText, Button, ButtonText } from '../'; -import React from 'react'; - -const TooltipDemo = () => { - return ( - { - return ( - - ); - }} - > - - Tooltip - - - ); -}; - -export default TooltipDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Demos/VStackDemo.tsx b/example/storybook-nativewind/src/core-components/themed/Demos/VStackDemo.tsx deleted file mode 100644 index bc8ecc1e5e..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Demos/VStackDemo.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import React from 'react'; -import { Box, VStack } from '../'; - -const VStackDemo = () => { - return ( - - - - - - ); -}; - -export default VStackDemo; diff --git a/example/storybook-nativewind/src/core-components/themed/Grid.tsx b/example/storybook-nativewind/src/core-components/themed/Grid.tsx deleted file mode 100644 index ea5130412b..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/Grid.tsx +++ /dev/null @@ -1,48 +0,0 @@ -import React from 'react'; -import { Box } from '@gluestack-ui/themed'; -import { ComponentCard } from './ComponentCard'; -import { content } from './content'; - -export const Grid = () => { - return ( - <> - - {content.map((item, index) => ( - - ))} - - - ); -}; diff --git a/example/storybook-nativewind/src/core-components/themed/content.tsx b/example/storybook-nativewind/src/core-components/themed/content.tsx deleted file mode 100644 index 69288b7f84..0000000000 --- a/example/storybook-nativewind/src/core-components/themed/content.tsx +++ /dev/null @@ -1,229 +0,0 @@ -import React from 'react'; -import SelectDemo from './Demos/SelectDemo'; -import { CheckboxDemo } from './Demos/CheckboxDemo'; -import { SliderDemo } from './Demos/SliderDemo'; -import FormControlDemo from './Demos/FormControlDemo'; -import BadgeDemo from './Demos/BadgeDemo'; -import ToastDemo from './Demos/ToastDemo'; -import AvatarDemo from './Demos/AvatarDemo'; -import HeadingDemo from './Demos/HeadingDemo'; -import TextDemo from './Demos/TextDemo'; -import BoxDemo from './Demos/BoxDemo'; -import DividerDemo from './Demos/DividerDemo'; -import HStackDemo from './Demos/HStackDemo'; -import VStackDemo from './Demos/VStackDemo'; -import AlertDemo from './Demos/AlertDemo'; -import ProgressDemo from './Demos/ProgressDemo'; -import SpinnerDemo from './Demos/SpinnerDemo'; -import ButtonDemo from './Demos/ButtonDemo'; -import InputDemo from './Demos/InputDemo'; -import LinkDemo from './Demos/LinkDemo'; -import PressableDemo from './Demos/PressableDemo'; -import RadioDemo from './Demos/RadioDemo'; -import SwitchDemo from './Demos/SwitchDemo'; -import TextAreaDemo from './Demos/TeaxtAreaDemo'; -import TooltipDemo from './Demos/TooltipDemo'; -import IconDemo from './Demos/IconDemo'; -import ImageDemo from './Demos/ImageDemo'; -import FabDemo from './Demos/FabDemo'; -import CenterDemo from './Demos/CenterDemo'; -import AlertDialogDemo from './Demos/AlertDialogDemo'; -import ModalDemo from './Demos/ModalDemo'; -import AccordionDemo from './Demos/AccordionDemo'; -// import MenuDemo from './Demos/MenuDemo'; -// import PopoverDemo from './Demos/PopoverDemo'; -import ActionsheetDemo from './Demos/ActionsheetDemo'; - -export const content = [ - { - title: 'Actionsheet', - child: , - padding: '$0', - href: '/ui/docs/components/disclosure/actionsheet', - }, - { - title: 'AlertDialog', - child: , - padding: '$0', - href: '/ui/docs/components/overlay/alert-dialog', - }, - { - title: 'Alert', - child: , - href: '/ui/docs/components/feedback/alert', - }, - { - title: 'Avatar', - child: , - href: '/ui/docs/components/media-and-icons/avatar', - }, - { - title: 'Accordion', - child: , - href: '/ui/docs/components/disclosure/accordion', - }, - - { - title: 'Badge', - child: , - href: '/ui/docs/components/data-display/badge', - }, - { - title: 'Box', - child: , - href: '/ui/docs/components/layout/box', - }, - { - title: 'Button', - child: , - href: '/ui/docs/components/forms/button', - }, - - { - title: 'Center', - child: , - href: '/ui/docs/components/layout/center', - }, - { - title: 'Checkbox', - child: , - href: '/ui/docs/components/forms/checkbox', - }, - - { - title: 'Divider', - child: , - href: '/ui/docs/components/data-display/divider', - }, - - { - title: 'Fab', - child: , - href: '/ui/docs/components/others/fab', - }, - { - title: 'FormControl', - child: , - href: '/ui/docs/components/forms/form-control', - }, - { - title: 'Heading', - child: , - href: '/ui/docs/components/typography/heading', - }, - { - title: 'HStack', - child: , - href: '/ui/docs/components/layout/hstack', - }, - - { - title: 'Icon', - child: , - href: '/ui/docs/components/media-and-icons/icon', - }, - { - title: 'Image', - child: , - href: '/ui/docs/components/media-and-icons/image', - }, - { - title: 'Input', - child: , - href: '/ui/docs/components/forms/input', - }, - - { - title: 'Link', - child: , - href: '/ui/docs/components/forms/link', - }, - - // { - // title: 'Menu', - // child: , - // padding: '$0', - // href: '/ui/docs/components/overlay/menu', - // }, - - { - title: 'Modal', - child: , - padding: '$0', - href: '/ui/docs/components/overlay/modal', - }, - - // { - // title: 'Popover', - // child: , - // padding: '$0', - // href: '/ui/docs/components/overlay/popover', - // }, - - { - title: 'Pressable', - child: , - href: '/ui/docs/components/forms/pressable', - }, - { - title: 'Progress', - child: , - href: '/ui/docs/components/feedback/progress', - }, - - { - title: 'Radio', - child: , - href: '/ui/docs/components/forms/radio', - }, - - { - title: 'Select', - child: , - href: '/ui/docs/components/forms/select', - }, - - { - title: 'Slider', - child: , - href: '/ui/docs/components/forms/slider', - }, - { - title: 'Spinner', - child: , - href: '/ui/docs/components/feedback/spinner', - }, - { - title: 'Switch', - child: , - href: '/ui/docs/components/forms/switch', - }, - - { - title: 'Text', - child: , - href: '/ui/docs/components/typography/text', - }, - { - title: 'TextArea', - child: , - href: '/ui/docs/components/forms/textarea', - }, - { - title: 'Toast', - child: , - href: '/ui/docs/components/feedback/toast', - }, - - { - title: 'Tooltip', - child: , - href: '/ui/docs/components/overlay/tooltip', - }, - - { - title: 'VStack', - child: , - href: '/ui/docs/components/layout/vstack', - }, -]; diff --git a/example/storybook-nativewind/src/core-components/themed/index.ts b/example/storybook-nativewind/src/core-components/themed/index.ts index 1ef3bbce97..56a869eeac 100644 --- a/example/storybook-nativewind/src/core-components/themed/index.ts +++ b/example/storybook-nativewind/src/core-components/themed/index.ts @@ -46,4 +46,3 @@ export { GluestackUIProvider } from './gluestack-ui-provider'; export * from './virtualized-list'; export * from './refresh-control'; export * from './image-background'; -export { Grid } from './Grid'; From 8023f83873f13f70ffb2efd856ae48f6d67d94e1 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Wed, 3 Apr 2024 12:21:49 +0530 Subject: [PATCH 60/78] fix: typing issue accordion --- .../nativewind/accordion/index.tsx | 15 ++++++++------- example/storybook-nativewind/tsconfig.json | 1 + 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx index cc0b23ffa3..dd86bd9b78 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx @@ -75,17 +75,18 @@ const accordionTriggerStyle = tva({ base: 'w-full py-5 px-5 flex-row justify-between items-center web:outline-none focus:outline-none data-[disabled=true]:opacity-40 data-[disabled=true]:cursor-not-allowed data-[focus-visible=true]:bg-background-50', }); +const Root = + Platform.OS === 'web' + ? withStyleContext(View, SCOPE) + : withStyleContextAndStates(View, SCOPE); + +const Header = Platform.OS === 'web' ? H3 : View; /** Creator */ const UIAccordion = createAccordion({ - //@ts-ignore - Root: - Platform.OS === 'web' - ? withStyleContext(View, SCOPE) - : withStyleContextAndStates(View, SCOPE), + Root: Root, Item: View, - // @ts-ignore - Header: Platform.OS === 'web' ? H3 : View, //@ts-ignore + Header: Header, Trigger: Pressable, Icon: View, TitleText: Text, diff --git a/example/storybook-nativewind/tsconfig.json b/example/storybook-nativewind/tsconfig.json index 33f31b1dad..849b5f484d 100644 --- a/example/storybook-nativewind/tsconfig.json +++ b/example/storybook-nativewind/tsconfig.json @@ -6,6 +6,7 @@ "@/components/ui/*": ["src/core-components/nativewind/*"], "@gluestack-style/react": ["../../packages/styled/react/src"], "@gluestack-ui/popover": ["../../packages/unstyled/popover/src"], + "@gluestack-ui/accordion": ["../../packages/unstyled/accordion/src"], "@gluestack-ui/nativewind-utils/tva": [ "../../packages/nativewind/utils/src/tva" ], From d9b4686357b0a168b4b8d466d41dcd0c24d420a5 Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Wed, 3 Apr 2024 12:27:55 +0530 Subject: [PATCH 61/78] feat: all components removed --- .../storybook-nativewind/src/core-components/nativewind/index.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/index.ts b/example/storybook-nativewind/src/core-components/nativewind/index.ts index eeb0ae381f..d24c280d57 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/index.ts +++ b/example/storybook-nativewind/src/core-components/nativewind/index.ts @@ -46,4 +46,3 @@ export { GluestackUIProvider } from './gluestack-ui-provider'; export * from './virtualized-list'; export * from './refresh-control'; export * from './image-background'; -export { Grid } from './Grid'; From ff7564e5b1cf64a5d229b522db43adcdf6afc888 Mon Sep 17 00:00:00 2001 From: Damini Date: Wed, 3 Apr 2024 12:29:38 +0530 Subject: [PATCH 62/78] feat: wrap hstack in forwardref and add types --- .../nativewind/accordion/index.tsx | 7 +++++- .../nativewind/hstack/index.tsx | 23 ++++++++++++------- .../nativewind/hstack/index.web.tsx | 23 ++++++++++++------- example/storybook-nativewind/tsconfig.json | 1 + packages/unstyled/accordion/src/types.ts | 12 ++++++---- 5 files changed, 45 insertions(+), 21 deletions(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx index cc0b23ffa3..057d56dc5b 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/accordion/index.tsx @@ -22,6 +22,11 @@ const accordionStyle = tva({ variant: { filled: 'bg-white', }, + size: { + sm: '', + md: '', + lg: '', + }, }, }); const accordionItemStyle = tva({ @@ -139,7 +144,6 @@ const Accordion = React.forwardRef( { className, variant = 'filled', - //@ts-ignore size = 'md', ...props }: { className?: string } & IAccordionProps, @@ -166,6 +170,7 @@ const AccordionItem = React.forwardRef( { - return ( - - ); -}; +type IHStackProps = React.ComponentProps & + VariantProps; + +const HStack = React.forwardRef( + ({ className, space, reversed, ...props }: IHStackProps, ref?: any) => { + return ( + + ); + } +); HStack.displayName = 'HStack'; diff --git a/example/storybook-nativewind/src/core-components/nativewind/hstack/index.web.tsx b/example/storybook-nativewind/src/core-components/nativewind/hstack/index.web.tsx index 8b8f62c509..df827dcf5b 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/hstack/index.web.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/hstack/index.web.tsx @@ -1,14 +1,21 @@ import React from 'react'; +import type { VariantProps } from '@gluestack-ui/nativewind-utils'; import { hstackStyle } from './styles'; -const HStack = ({ className, space, reversed, ...props }: any) => { - return ( -
- ); -}; +type IHStackProps = React.ComponentProps<'div'> & + VariantProps; + +const HStack = React.forwardRef( + ({ className, space, reversed, ...props }: IHStackProps, ref?: any) => { + return ( +
+ ); + } +); HStack.displayName = 'HStack'; diff --git a/example/storybook-nativewind/tsconfig.json b/example/storybook-nativewind/tsconfig.json index 33f31b1dad..849b5f484d 100644 --- a/example/storybook-nativewind/tsconfig.json +++ b/example/storybook-nativewind/tsconfig.json @@ -6,6 +6,7 @@ "@/components/ui/*": ["src/core-components/nativewind/*"], "@gluestack-style/react": ["../../packages/styled/react/src"], "@gluestack-ui/popover": ["../../packages/unstyled/popover/src"], + "@gluestack-ui/accordion": ["../../packages/unstyled/accordion/src"], "@gluestack-ui/nativewind-utils/tva": [ "../../packages/nativewind/utils/src/tva" ], diff --git a/packages/unstyled/accordion/src/types.ts b/packages/unstyled/accordion/src/types.ts index 6956bd9223..1f9b66eda6 100644 --- a/packages/unstyled/accordion/src/types.ts +++ b/packages/unstyled/accordion/src/types.ts @@ -90,13 +90,17 @@ export type IAccordionComponentType< IconProps, TitleTextProps, ContentTextProps -> = React.ForwardRefExoticComponent & { - Item: React.ForwardRefExoticComponent; - Header: React.ForwardRefExoticComponent; +> = React.ForwardRefExoticComponent< + React.RefAttributes & IAccordionProps +> & { + Item: React.ForwardRefExoticComponent< + React.RefAttributes & IAccordionItemProps + >; + Header: React.ForwardRefExoticComponent>; Trigger: React.ForwardRefExoticComponent< Omit & IAccordionTriggerProps >; - Content: React.ForwardRefExoticComponent; + Content: React.ForwardRefExoticComponent>; TitleText: React.ForwardRefExoticComponent; ContentText: React.ForwardRefExoticComponent; Icon: React.ForwardRefExoticComponent; From 66f11c2f1600eeeff8069d91b00e2e7e3ced5c37 Mon Sep 17 00:00:00 2001 From: Vidhi Kataria Date: Wed, 3 Apr 2024 12:40:35 +0530 Subject: [PATCH 63/78] feat: patch fixes --- .../AllComponents/index.nw.stories.mdx | 29 ------------------- .../AllComponents/index.themed.stories.mdx | 28 ------------------ 2 files changed, 57 deletions(-) delete mode 100644 example/storybook-nativewind/src/overview/AllComponents/index.nw.stories.mdx delete mode 100644 example/storybook-nativewind/src/overview/AllComponents/index.themed.stories.mdx diff --git a/example/storybook-nativewind/src/overview/AllComponents/index.nw.stories.mdx b/example/storybook-nativewind/src/overview/AllComponents/index.nw.stories.mdx deleted file mode 100644 index 0d21a1caad..0000000000 --- a/example/storybook-nativewind/src/overview/AllComponents/index.nw.stories.mdx +++ /dev/null @@ -1,29 +0,0 @@ ---- -title: All Components | gluestack-ui - -description: gluestack-ui provides 30+ responsive components for every screen and style - -pageTitle: All Components - -pageDescription: gluestack-ui provides 30+ responsive components for every screen and style - -toc: false ---- - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; - - - -import { AppProvider } from '@gluestack/design-system'; -import { config } from '@gluestack-ui/config'; -import { Grid } from '../../core-components/nativewind'; -import Wrapper from '../../core-components/nativewind/Wrapper'; - - -# All Components - -30+ responsive components for every screen and style - - - - \ No newline at end of file diff --git a/example/storybook-nativewind/src/overview/AllComponents/index.themed.stories.mdx b/example/storybook-nativewind/src/overview/AllComponents/index.themed.stories.mdx deleted file mode 100644 index ef64236aeb..0000000000 --- a/example/storybook-nativewind/src/overview/AllComponents/index.themed.stories.mdx +++ /dev/null @@ -1,28 +0,0 @@ ---- -title: All Components | gluestack-ui - -description: gluestack-ui provides 30+ responsive components for every screen and style - -pageTitle: All Components - -pageDescription: gluestack-ui provides 30+ responsive components for every screen and style - -toc: false ---- - -import { Canvas, Meta, Story } from '@storybook/addon-docs'; - - - -import { AppProvider } from '@gluestack/design-system'; -import { config } from '@gluestack-ui/config'; -import { Grid } from '../../core-components/themed'; -import Wrapper from '../../core-components/themed/Wrapper'; - -# All Components - -30+ responsive components for every screen and style - - - - \ No newline at end of file From e292d534836bd35bbf79414c7bd9224d8ab97ae4 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Wed, 3 Apr 2024 12:47:13 +0530 Subject: [PATCH 64/78] fix: actionsheet component --- example/storybook-nativewind/tsconfig.json | 1 + packages/unstyled/actionsheet/src/types.ts | 50 ++++++++++++++++------ 2 files changed, 38 insertions(+), 13 deletions(-) diff --git a/example/storybook-nativewind/tsconfig.json b/example/storybook-nativewind/tsconfig.json index 849b5f484d..a0fbbc97e0 100644 --- a/example/storybook-nativewind/tsconfig.json +++ b/example/storybook-nativewind/tsconfig.json @@ -7,6 +7,7 @@ "@gluestack-style/react": ["../../packages/styled/react/src"], "@gluestack-ui/popover": ["../../packages/unstyled/popover/src"], "@gluestack-ui/accordion": ["../../packages/unstyled/accordion/src"], + "@gluestack-ui/actionsheet": ["../../packages/unstyled/actionsheet/src"], "@gluestack-ui/nativewind-utils/tva": [ "../../packages/nativewind/utils/src/tva" ], diff --git a/packages/unstyled/actionsheet/src/types.ts b/packages/unstyled/actionsheet/src/types.ts index 09f3e0c36b..06f7dd1378 100644 --- a/packages/unstyled/actionsheet/src/types.ts +++ b/packages/unstyled/actionsheet/src/types.ts @@ -60,23 +60,47 @@ export type IActionsheetComponentType< SectionListProps, SectionHeaderTextProps, IconProps -> = React.ForwardRefExoticComponent & { +> = React.ForwardRefExoticComponent< + ActionsheetProps & React.RefAttributes & IActionsheetProps +> & { Content: React.ForwardRefExoticComponent< - ContentProps & InterfaceActionsheetContentProps + ContentProps & + React.RefAttributes & + InterfaceActionsheetContentProps >; Item: React.ForwardRefExoticComponent< - ItemProps & InterfaceActionsheetItemProps + ItemProps & InterfaceActionsheetItemProps & React.RefAttributes + >; + ItemText: React.ForwardRefExoticComponent< + React.RefAttributes & ItemTextProps + >; + DragIndicator: React.ForwardRefExoticComponent< + React.RefAttributes & DragIndicatorProps + >; + Backdrop: React.ForwardRefExoticComponent< + React.RefAttributes & BackdropProps + >; + DragIndicatorWrapper: React.ForwardRefExoticComponent< + React.RefAttributes & IndicatorWrapperProps + >; + ScrollView: React.ForwardRefExoticComponent< + React.RefAttributes & ScrollViewProps + >; + VirtualizedList: React.ForwardRefExoticComponent< + React.RefAttributes & VirtualizedListProps + >; + FlatList: React.ForwardRefExoticComponent< + React.RefAttributes & FlatListProps + >; + SectionList: React.ForwardRefExoticComponent< + React.RefAttributes & SectionListProps + >; + SectionHeaderText: React.ForwardRefExoticComponent< + React.RefAttributes & SectionHeaderTextProps + >; + Icon: React.ForwardRefExoticComponent< + React.RefAttributes & IconProps >; - ItemText: React.ForwardRefExoticComponent; - DragIndicator: React.ForwardRefExoticComponent; - Backdrop: React.ForwardRefExoticComponent; - DragIndicatorWrapper: React.ForwardRefExoticComponent; - ScrollView: React.ForwardRefExoticComponent; - VirtualizedList: React.ForwardRefExoticComponent; - FlatList: React.ForwardRefExoticComponent; - SectionList: React.ForwardRefExoticComponent; - SectionHeaderText: React.ForwardRefExoticComponent; - Icon: React.ForwardRefExoticComponent; }; export type IActionsheetProps = InterfaceActionsheetProps; From 0df2588669d588e5083dedd388826c55e4bd56d6 Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Wed, 3 Apr 2024 12:50:13 +0530 Subject: [PATCH 65/78] fix: alert dialog --- example/storybook-nativewind/tsconfig.json | 3 +++ packages/unstyled/alert-dialog/src/types.ts | 29 ++++++++++++++++----- 2 files changed, 25 insertions(+), 7 deletions(-) diff --git a/example/storybook-nativewind/tsconfig.json b/example/storybook-nativewind/tsconfig.json index a0fbbc97e0..2d8f67fe0d 100644 --- a/example/storybook-nativewind/tsconfig.json +++ b/example/storybook-nativewind/tsconfig.json @@ -8,6 +8,9 @@ "@gluestack-ui/popover": ["../../packages/unstyled/popover/src"], "@gluestack-ui/accordion": ["../../packages/unstyled/accordion/src"], "@gluestack-ui/actionsheet": ["../../packages/unstyled/actionsheet/src"], + "@gluestack-ui/alert-dialog": [ + "../../packages/unstyled/alert-dialog/src" + ], "@gluestack-ui/nativewind-utils/tva": [ "../../packages/nativewind/utils/src/tva" ], diff --git a/packages/unstyled/alert-dialog/src/types.ts b/packages/unstyled/alert-dialog/src/types.ts index 2211df5065..4eb676508d 100644 --- a/packages/unstyled/alert-dialog/src/types.ts +++ b/packages/unstyled/alert-dialog/src/types.ts @@ -58,13 +58,28 @@ export type IAlertDialogComponentType< StyledAlertDialogFooter, StyledAlertDialogBody, StyledAlertDialogBackdrop -> = React.ForwardRefExoticComponent & { - Content: React.ForwardRefExoticComponent; - CloseButton: React.ForwardRefExoticComponent; - Header: React.ForwardRefExoticComponent; - Footer: React.ForwardRefExoticComponent; - Body: React.ForwardRefExoticComponent; - Backdrop: React.ForwardRefExoticComponent; +> = React.ForwardRefExoticComponent< + React.RefAttributes & StyledAlertDialog & IAlertDialogProps +> & { + Content: React.ForwardRefExoticComponent< + React.RefAttributes & StyledAlertDialogContent + >; + CloseButton: React.ForwardRefExoticComponent< + React.RefAttributes & + StyledAlertDialogCloseButton + >; + Header: React.ForwardRefExoticComponent< + React.RefAttributes & StyledAlertDialogHeader + >; + Footer: React.ForwardRefExoticComponent< + React.RefAttributes & StyledAlertDialogFooter + >; + Body: React.ForwardRefExoticComponent< + React.RefAttributes & StyledAlertDialogBody + >; + Backdrop: React.ForwardRefExoticComponent< + React.RefAttributes & StyledAlertDialogBackdrop + >; }; export type IAlertDialogProps = InterfaceAlertDialogProps; From 2a5fe261080e2adfb38a2ecc9e1257e1c0ad7e09 Mon Sep 17 00:00:00 2001 From: Damini Date: Wed, 3 Apr 2024 13:04:12 +0530 Subject: [PATCH 66/78] fix: ts warnings in toast --- .../src/core-components/nativewind/progress/index.tsx | 1 - example/storybook-nativewind/tsconfig.json | 2 ++ packages/unstyled/progress/src/types.ts | 8 ++++++-- 3 files changed, 8 insertions(+), 3 deletions(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/progress/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/progress/index.tsx index c18c6f7d65..0f28d3017d 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/progress/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/progress/index.tsx @@ -69,7 +69,6 @@ export const ProgressFilledTrack = React.forwardRef( return ( = - React.ForwardRefExoticComponent & { - FilledTrack: React.ForwardRefExoticComponent; + React.ForwardRefExoticComponent< + ProgressProps & React.RefAttributes & InterfaceProgressProps + > & { + FilledTrack: React.ForwardRefExoticComponent< + ProgressFilledTrackProps & React.RefAttributes + >; }; export type IProgressProps = InterfaceProgressProps; From e0cc763a6f5b2c3ed7fce158428263c17b050207 Mon Sep 17 00:00:00 2001 From: Damini Date: Wed, 3 Apr 2024 13:11:14 +0530 Subject: [PATCH 67/78] feat: add typings for card component --- .../core-components/nativewind/card/index.tsx | 31 +++++++++++-------- 1 file changed, 18 insertions(+), 13 deletions(-) diff --git a/example/storybook-nativewind/src/core-components/nativewind/card/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/card/index.tsx index cf1e892d57..6b137f4114 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/card/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/card/index.tsx @@ -1,20 +1,25 @@ import React from 'react'; +import type { VariantProps } from '@gluestack-ui/nativewind-utils'; import { View } from 'react-native'; import { cardStyle } from './styles'; -const Card = ({ - className, - size = 'md', - variant = 'elevated', - ...props -}: any) => { - return ( - - ); -}; +type ICardProps = React.ComponentProps & + VariantProps; + +const Card = React.forwardRef( + ( + { className, size = 'md', variant = 'elevated', ...props }: ICardProps, + ref?: any + ) => { + return ( + + ); + } +); Card.displayName = 'Card'; From 2e6b8eb0f91f9d8411a4ebc672810318de53b3eb Mon Sep 17 00:00:00 2001 From: Viraj Ajay Joshi Date: Wed, 3 Apr 2024 13:16:56 +0530 Subject: [PATCH 68/78] fix: menu ref issue --- example/storybook-nativewind/tsconfig.json | 1 + packages/unstyled/menu/src/types.ts | 12 +++++++++--- 2 files changed, 10 insertions(+), 3 deletions(-) diff --git a/example/storybook-nativewind/tsconfig.json b/example/storybook-nativewind/tsconfig.json index 2d8f67fe0d..333e4acd86 100644 --- a/example/storybook-nativewind/tsconfig.json +++ b/example/storybook-nativewind/tsconfig.json @@ -11,6 +11,7 @@ "@gluestack-ui/alert-dialog": [ "../../packages/unstyled/alert-dialog/src" ], + "@gluestack-ui/menu": ["../../packages/unstyled/menu/src"], "@gluestack-ui/nativewind-utils/tva": [ "../../packages/nativewind/utils/src/tva" ], diff --git a/packages/unstyled/menu/src/types.ts b/packages/unstyled/menu/src/types.ts index 36a8915f8d..5c200f070f 100644 --- a/packages/unstyled/menu/src/types.ts +++ b/packages/unstyled/menu/src/types.ts @@ -99,7 +99,13 @@ export interface IItemProp { export type IMenuProps = InterfaceMenuProps; export type IMenuComponentType = - React.ForwardRefExoticComponent & { - Item: React.ForwardRefExoticComponent & IItemProp>; - ItemLabel: React.ForwardRefExoticComponent ); } return ( ); diff --git a/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx index b684b8f889..2bc792f6dd 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/badge/index.tsx @@ -1,17 +1,16 @@ 'use client'; import React from 'react'; -import { Text, View, Platform } from 'react-native'; +import { Text, View } from 'react-native'; import { tva } from '@gluestack-ui/nativewind-utils/tva'; import { withStyleContext, useStyleContext, } from '@gluestack-ui/nativewind-utils/withStyleContext'; -import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; import type { VariantProps } from '@gluestack-ui/nativewind-utils'; - const SCOPE = 'BADGE'; + const badgeStyle = tva({ base: 'flex-row items-center rounded-sm data-[disabled=true]:opacity-50 px-2', @@ -27,6 +26,11 @@ const badgeStyle = tva({ solid: '', outline: 'border', }, + size: { + sm: '', + md: '', + lg: '', + }, }, }); @@ -73,15 +77,7 @@ const badgeTextStyle = tva({ }); const badgeIconStyle = tva({ - base: 'text-background-500 fill-none', parentVariants: { - action: { - error: 'text-error-600', - warning: 'text-warning-600', - success: 'text-success-600', - info: 'text-info-600', - muted: 'text-secondary-600', - }, size: { sm: 'h-3 w-3', md: 'h-3.5 w-3.5', @@ -90,10 +86,7 @@ const badgeIconStyle = tva({ }, }); -const ContextView = - Platform.OS === 'web' - ? withStyleContext(View, SCOPE) - : withStyleContextAndStates(View, SCOPE); +const ContextView = withStyleContext(View, SCOPE); cssInterop(ContextView, { className: 'style' }); @@ -148,29 +141,55 @@ const BadgeText = ({ ); }; -type IBadgeIconProps = React.ComponentProps & { - as?: any; +interface DefaultColors { + info: string; + success: string; + error: string; + warning: string; + muted: string; +} +const defaultColors: DefaultColors = { + info: '#0B8DCD', + success: '#2A7948', + error: '#DC2626', + warning: '#D76C1F', + muted: '#515252', }; +type IBadgeIconProps = React.ComponentProps & + VariantProps; const BadgeIcon = ({ className, size, as: AsComp, + fill = 'none', ...props -}: IBadgeIconProps & { className?: any }) => { +}: IBadgeIconProps & { className?: any } & { + color?: any; + fill?: string; + as?: any; +}) => { const { size: parentSize, action: parentAction } = useStyleContext(SCOPE); + const { color = defaultColors[parentAction as keyof DefaultColors] } = props; + if (AsComp) { return ( - + > + + ); } return ( @@ -178,12 +197,14 @@ const BadgeIcon = ({ className={badgeIconStyle({ parentVariants: { size: parentSize, - action: parentAction, }, size, class: className, })} {...props} + //@ts-ignore + fill={fill} + color={color} /> ); }; diff --git a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx index 00f6a34263..aaa356b91a 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/button/index.tsx @@ -20,13 +20,13 @@ import { } from 'react-native'; const SCOPE = 'BUTTON'; +const Root = + Platform.OS === 'web' + ? withStyleContext(Pressable, SCOPE) + : withStyleContextAndStates(Pressable, SCOPE); const UIButton = createButton({ - // @ts-ignore - Root: - Platform.OS === 'web' - ? withStyleContext(Pressable, SCOPE) - : withStyleContextAndStates(Pressable, SCOPE), + Root: Root, Text, Group: View, Spinner: ActivityIndicator, @@ -221,10 +221,6 @@ const buttonIconStyle = tva({ type IButtonProps = Omit, 'context'> & VariantProps; - -type IButtonTextProps = React.ComponentProps & - VariantProps; - const Button = React.forwardRef( ( { @@ -247,9 +243,8 @@ const Button = React.forwardRef( } ); -type IButtonIcon = React.ComponentProps & { - as?: any; -}; +type IButtonTextProps = React.ComponentProps & + VariantProps; const ButtonText = React.forwardRef( ( { @@ -269,9 +264,9 @@ const ButtonText = React.forwardRef( return ( & + VariantProps; const ButtonIcon = ({ className, as: AsComp, + fill = 'none', size, ...props -}: IButtonIcon & { className?: any }) => { +}: IButtonIcon & { + className?: any; + fill?: string; + color?: string; + as?: any; +}) => { const { variant: parentVariant, size: parentSize, action: parentAction, } = useStyleContext(SCOPE); + let localColor; + if (parentVariant !== 'solid') { + localColor = defaultColors[parentAction as keyof DefaultColors]; + } else { + localColor = '#FEFEFF'; + } + const { color = localColor } = props; + if (AsComp) { return ( - + > + + ); } return ( ); }; + Button.displayName = 'Button'; ButtonText.displayName = 'ButtonText'; ButtonSpinner.displayName = 'ButtonSpinner'; 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 28099b9ee9..60a7815e13 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/checkbox/index.tsx @@ -11,9 +11,7 @@ import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withSt import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; import { withStates } from '@gluestack-ui/nativewind-utils/withStates'; import type { VariantProps } from '@gluestack-ui/nativewind-utils'; - import { Platform } from 'react-native'; -import { Check } from 'lucide-react-native'; const SCOPE = 'CHECKBOX'; const UICheckbox = createCheckbox({ @@ -23,7 +21,7 @@ const UICheckbox = createCheckbox({ ? withStyleContext(View, SCOPE) : withStyleContextAndStates(Pressable, SCOPE), Group: withStates(View), - Icon: withStates(Check), + Icon: withStates(View), Label: withStates(Text), Indicator: withStates(View), }); @@ -61,7 +59,7 @@ const checkboxLabelStyle = tva({ }); const checkboxIconStyle = tva({ - base: 'text-typography-0 data-[disabled=true]:opacity-40 fill-none', + base: 'text-typography-0 data-[disabled=true]:opacity-40', parentVariants: { size: { @@ -82,8 +80,8 @@ const Checkbox = React.forwardRef( className, size = 'md', ...props - }: { className?: string } & ICheckboxProps, - ref + }: { className?: string; size?: string } & ICheckboxProps, + ref?: any ) => { return ( { const { size: parentSize } = useStyleContext(SCOPE); @@ -132,7 +130,7 @@ type ICheckboxLabelProps = React.ComponentProps & const CheckboxLabel = React.forwardRef( ( { className, ...props }: { className?: string } & ICheckboxLabelProps, - ref + ref?: any ) => { const { size: parentSize } = useStyleContext(SCOPE); return ( @@ -150,30 +148,41 @@ const CheckboxLabel = React.forwardRef( } ); -type ICheckboxIconProps = React.ComponentProps & { - as?: any; -}; +type ICheckboxIconProps = React.ComponentProps & + VariantProps; const CheckboxIcon = React.forwardRef( - ( - { - className, - as: AsComp, - ...props - }: ICheckboxIconProps & { className?: any }, - ref - ) => { + ({ + className, + as: AsComp, + fill = 'none', + size, + ...props + }: ICheckboxIconProps & { + className?: any; + fill?: string; + color?: string; + as?: any; + }) => { const { size: parentSize } = useStyleContext(SCOPE); + const { color = 'gray' } = props; + if (AsComp) { return ( - + ); @@ -186,15 +195,17 @@ const CheckboxIcon = React.forwardRef( size: parentSize, }, class: className, + size, })} {...props} - ref={ref} + //@ts-ignore + fill={fill} + color={color} /> ); } ); -// Assign display names Checkbox.displayName = 'Checkbox'; CheckboxIndicator.displayName = 'CheckboxIndicator'; CheckboxLabel.displayName = 'CheckboxLabel'; 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 4acdfccac6..6ce64aae15 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/input/index.tsx @@ -12,6 +12,7 @@ import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; import { withStates } from '@gluestack-ui/nativewind-utils/withStates'; import type { VariantProps } from '@gluestack-ui/nativewind-utils'; const SCOPE = 'INPUT'; + const UIInput = createInput({ // @ts-ignore Root: @@ -24,7 +25,7 @@ const UIInput = createInput({ }); const inputStyle = tva({ - base: 'border-background-300 flex-row overflow-hidden content-center data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:hover:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:hover:border-background-300', + base: 'border-background-300 flex-row overflow-hidden content-center data-[hover=true]:border-outline-400 data-[focus=true]:border-primary-700 data-[focus=true]:hover:border-primary-700 data-[disabled=true]:opacity-40 data-[disabled=true]:hover:border-background-300 items-center', variants: { size: { @@ -36,7 +37,7 @@ const inputStyle = tva({ variant: { underlined: - 'rounded-none border-b data-[invalid=true]:border-b-2 data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700', + 'rounded-none border-b data-[invalid=true]:border-b-2 data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700', outline: 'rounded border data-[invalid=true]:border-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-error-700 data-[invalid=true]:data-[disabled=true]:hover:border-error-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:data-[focus=true]:hover:web:ring-1 data-[invalid=true]:data-[focus=true]:hover:web:ring-inset data-[invalid=true]:data-[focus=true]:hover:web:ring-error-700 data-[invalid=true]:data-[disabled=true]:hover:web:ring-1 data-[invalid=true]:data-[disabled=true]:hover:web:ring-inset data-[invalid=true]:data-[disabled=true]:hover:web:ring-error-700', @@ -48,7 +49,7 @@ const inputStyle = tva({ }); const inputIconStyle = tva({ - base: 'text-typography-400', + // base: 'text-typography-400', parentVariants: { size: { '2xs': 'h-3 w-3', @@ -76,17 +77,17 @@ const inputFieldStyle = tva({ }, 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', + '2xs': 'text-2xs leading-[0px]', + 'xs': 'text-xs leading-[0px]', + 'sm': 'text-sm leading-[0px]', + 'md': 'text-base leading-none', + 'lg': 'text-lg leading-[0px]', + 'xl': 'text-xl leading-[0px]', + '2xl': 'text-2xl leading-[0px]', + '3xl': 'text-3xl leading-[0px]', + '4xl': 'text-4xl leading-[0px]', + '5xl': 'text-5xl leading-[0px]', + '6xl': 'text-6xl leading-[0px]', }, }, }); @@ -98,7 +99,6 @@ cssInterop(UIInput.Input, { className: 'style' }); type IInputProps = React.ComponentProps & VariantProps; -//@ts-ignore const Input = React.forwardRef( ( { @@ -107,7 +107,7 @@ const Input = React.forwardRef( size = 'md', ...props }: { className?: string } & IInputProps, - ref + ref?: any ) => { return ( & { as: any }; - const InputIcon = React.forwardRef( ( { @@ -129,30 +128,37 @@ const InputIcon = React.forwardRef( fill = 'none', as: AsComp, ...props - }: { className?: any } & IInputIconProps, - ref + }: { className?: any; fill?: string; color?: string } & IInputIconProps, + ref?: any ) => { const { size: parentSize } = useStyleContext(SCOPE); + const { color = '#8C8C8C' } = props; if (AsComp) { return ( - + > + + ); } return ( & VariantProps; - const InputSlot = React.forwardRef( - ({ className, ...props }: { className?: string } & IInputSlotProps, ref) => { + ( + { className, ...props }: { className?: string } & IInputSlotProps, + ref?: any + ) => { return ( & VariantProps; - const InputField = React.forwardRef( - ({ className, ...props }: { className?: string } & IInputFieldProps, ref) => { + ( + { className, ...props }: { className?: string } & IInputFieldProps, + ref?: any + ) => { const { variant: parentVariant, size: parentSize } = useStyleContext(SCOPE); return ( 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 1351f0537b..6e39f44aa1 100644 --- a/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx +++ b/example/storybook-nativewind/src/core-components/nativewind/radio/index.tsx @@ -10,47 +10,63 @@ import { import { cssInterop } from '@gluestack-ui/nativewind-utils/cssInterop'; import { withStates } from '@gluestack-ui/nativewind-utils/withStates'; import { withStyleContextAndStates } from '@gluestack-ui/nativewind-utils/withStyleContextAndStates'; +import type { VariantProps } from '@gluestack-ui/nativewind-utils'; const radioStyle = tva({ - base: 'flex-row justify-start items-center web:cursor-pointer data-[disabled=true]:web:cursor-not-allowed gap-2', + base: 'group/radio flex-row justify-start items-center web:cursor-pointer data-[disabled=true]:web:cursor-not-allowed', variants: { size: { - sm: '', - md: '', - lg: '', + sm: 'gap-1.5', + md: 'gap-2', + lg: 'gap-2', }, }, }); -const groupStyle = tva({ +const radioGroupStyle = tva({ base: 'gap-2', }); -const iconStyle = tva({ - base: 'rounded-full group-data-[checked=true]/radioInd:text-primary-600 group-data-[checked=true]/radioInd:group-data-[hover=true]/radioInd:text-primary-700 data-[checked=true]:data-[hover=true]:data-[disabled=true]:text-primary-600', +const radioIconStyle = tva({ + base: 'rounded-full group-data-[checked=true]/radio:text-primary-600 group-data-[checked=true]/radio:group-data-[hover=true]/radio:text-primary-700 data-[checked=true]:data-[hover=true]:data-[disabled=true]:text-primary-600', parentVariants: { size: { - sm: 'h-3 w-3', - md: 'h-4 w-4', + sm: 'h-[10px] w-[10px]', + md: 'h-[14px] w-[14px]', lg: 'h-[18px] w-[18px]', }, }, }); -const indicatorStyle = tva({ - base: 'group/radioInd 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', +const radioIndicatorStyle = 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', parentVariants: { size: { - sm: 'h-4 w-4', - md: 'h-5 w-5', - lg: 'h-6 w-6', + sm: 'h-[16px] w-[16px]', + md: 'h-[20px] w-[20px]', + lg: 'h-[24px] w-[24px]', }, }, }); -const labelStyle = tva({ +const radioLabelStyle = tva({ base: 'text-typography-600 data-[checked=true]:text-typography-900 data-[hover=true]:text-typography-900 data-[hover=true]:data-[disabled=true]:text-typography-600 data-[hover=true]:data-[disabled=true]:data-[checked=true]:text-typography-900 data-[active=true]:text-typography-900 data-[active=true]:data-[checked=true]:text-typography-900 data-[disabled=true]:opacity-40 web:select-none', + parentVariants: { + 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', + }, + }, }); const SCOPE = 'Radio'; @@ -72,56 +88,117 @@ cssInterop(UIRadio.Icon, { className: 'style' }); cssInterop(UIRadio.Indicator, { className: 'style' }); cssInterop(UIRadio.Label, { className: 'style' }); -const Radio = ({ className, size = 'md', ...props }: any) => { - return ( - - ); -}; +type IRadioProps = Omit, 'context'> & + VariantProps; +const Radio = React.forwardRef( + ( + { className, size = 'md', ...props }: { className?: string } & IRadioProps, + ref?: any + ) => { + return ( + + ); + } +); -const RadioGroup = ({ className, ...props }: any) => { - return ( - - ); -}; +type IRadioGroupProps = React.ComponentProps & + VariantProps; +const RadioGroup = React.forwardRef( + ( + { className, ...props }: { className?: string } & IRadioGroupProps, + ref?: any + ) => { + return ( + + ); + } +); -const RadioIndicator = ({ className, ...props }: any) => { - const { size } = useStyleContext(SCOPE); - return ( - - ); -}; +type IRadioIndicatorProps = React.ComponentProps & + VariantProps; +const RadioIndicator = React.forwardRef( + ( + { className, ...props }: { className?: string } & IRadioIndicatorProps, + ref?: any + ) => { + const { size } = useStyleContext(SCOPE); + return ( + + ); + } +); -const RadioLabel = ({ className, ...props }: any) => { - const { size } = useStyleContext(SCOPE); - return ( - - ); -}; +type IRadioLabelProps = React.ComponentProps & + VariantProps; +const RadioLabel = React.forwardRef( + ( + { className, ...props }: { className?: string } & IRadioLabelProps, + ref?: any + ) => { + const { size } = useStyleContext(SCOPE); + return ( + + ); + } +); -const RadioIcon = ({ className, as: AsComp, size, ...props }: any) => { +type IRadioIconProps = React.ComponentProps & + VariantProps; +const RadioIcon = ({ + className, + as: AsComp, + size, + fill = 'none', + ...props +}: IRadioIconProps & { + className?: string; + fill?: string; + color?: string; + as?: any; +}) => { const { size: parentSize } = useStyleContext(SCOPE); + const { color = 'gray' } = props; + if (AsComp) { return ( - + ); @@ -129,13 +206,16 @@ const RadioIcon = ({ className, as: AsComp, size, ...props }: any) => { return ( ); }; diff --git a/example/storybook-nativewind/tsconfig.json b/example/storybook-nativewind/tsconfig.json index 53e2797e03..331fbf1f86 100644 --- a/example/storybook-nativewind/tsconfig.json +++ b/example/storybook-nativewind/tsconfig.json @@ -6,6 +6,11 @@ "@/components/ui/*": ["src/core-components/nativewind/*"], "@gluestack-style/react": ["../../packages/styled/react/src"], "@gluestack-ui/popover": ["../../packages/unstyled/popover/src"], + "@gluestack-ui/button": ["../../packages/unstyled/button/src"], + "@gluestack-ui/alert": ["../../packages/unstyled/alert/src"], + "@gluestack-ui/input": ["../../packages/unstyled/input/src"], + "@gluestack-ui/checkbox": ["../../packages/unstyled/checkbox/src"], + "@gluestack-ui/radio": ["../../packages/unstyled/radio/src"], "@gluestack-ui/nativewind-utils/tva": [ "../../packages/nativewind/utils/src/tva" ], diff --git a/packages/unstyled/alert/src/types.ts b/packages/unstyled/alert/src/types.ts index 724b10b652..3dda080817 100644 --- a/packages/unstyled/alert/src/types.ts +++ b/packages/unstyled/alert/src/types.ts @@ -5,9 +5,15 @@ export interface InterfaceAlertProps extends ViewProps { } export type IAlertComponentType = - React.ForwardRefExoticComponent & { - Text: React.ForwardRefExoticComponent; - Icon: React.ForwardRefExoticComponent; + React.ForwardRefExoticComponent< + React.RefAttributes & StyledAlert & InterfaceAlertProps + > & { + Text: React.ForwardRefExoticComponent< + React.RefAttributes + >; + Icon: React.ForwardRefExoticComponent< + React.RefAttributes & StyledAlertIcon + >; }; export type IAlertProps = InterfaceAlertProps; diff --git a/packages/unstyled/button/src/types.ts b/packages/unstyled/button/src/types.ts index bce3a5b035..13f07dfe3d 100644 --- a/packages/unstyled/button/src/types.ts +++ b/packages/unstyled/button/src/types.ts @@ -52,11 +52,21 @@ export type IButtonComponentType< SpinnerProps, TextProps, IconProps -> = React.ForwardRefExoticComponent & { - Group: React.ForwardRefExoticComponent; - Spinner: React.ForwardRefExoticComponent; - Text: React.ForwardRefExoticComponent; - Icon: React.ForwardRefExoticComponent; +> = React.ForwardRefExoticComponent< + React.RefAttributes & ButtonProps & IButtonProps +> & { + Group: React.ForwardRefExoticComponent< + React.RefAttributes & GroupProps & IButtonGroupProps + >; + Spinner: React.ForwardRefExoticComponent< + SpinnerProps & React.RefAttributes + >; + Text: React.ForwardRefExoticComponent< + React.RefAttributes & TextProps + >; + Icon: React.ForwardRefExoticComponent< + React.RefAttributes & IconProps + >; }; export type IButtonProps = InterfaceButtonProps; diff --git a/packages/unstyled/checkbox/src/types.ts b/packages/unstyled/checkbox/src/types.ts index 98cd63b7f6..c97e4eec82 100644 --- a/packages/unstyled/checkbox/src/types.ts +++ b/packages/unstyled/checkbox/src/types.ts @@ -24,11 +24,17 @@ export interface ICheckboxGroup { } export type ICheckboxComponentType = - React.ForwardRefExoticComponent & { - Indicator: React.ForwardRefExoticComponent; - Icon: React.ForwardRefExoticComponent; - Label: React.ForwardRefExoticComponent