-
Notifications
You must be signed in to change notification settings - Fork 129
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'patch' of github.com:gluestack/gluestack-ui into patch
- @react-native-aria/tooltip@0.2.7
- @react-native-aria/toggle@0.2.9
- @react-native-aria/tabs@0.2.11
- @react-native-aria/radio@0.2.11
- @react-native-aria/menu@0.2.13
- @react-native-aria/listbox@0.2.7
- @react-native-aria/interactions@0.2.14
- @react-native-aria/button@0.2.8
- @gluestack-ui/vstack@0.1.16
- @gluestack-ui/utils@0.1.14
- @gluestack-ui/transitions@0.1.11
- @gluestack-ui/tooltip@0.1.42
- @gluestack-ui/tooltip@0.1.41
- @gluestack-ui/tooltip@0.1.38
- @gluestack-ui/tooltip@0.1.35
- @gluestack-ui/tooltip@0.1.34
- @gluestack-ui/tooltip@0.1.33
- @gluestack-ui/tooltip@0.1.32
- @gluestack-ui/tooltip@0.1.27
- @gluestack-ui/toast@1.0.9
- @gluestack-ui/toast@1.0.8
- @gluestack-ui/toast@1.0.7
- @gluestack-ui/toast@1.0.6
- @gluestack-ui/themed@1.1.69
- @gluestack-ui/themed@1.1.68
- @gluestack-ui/themed@1.1.65
- @gluestack-ui/themed@1.1.62
- @gluestack-ui/themed@1.1.61
- @gluestack-ui/themed@1.1.60
- @gluestack-ui/themed@1.1.59
- @gluestack-ui/themed@1.1.58
- @gluestack-ui/themed@1.1.57
- @gluestack-ui/themed@1.1.56
- @gluestack-ui/themed@1.1.55
- @gluestack-ui/themed@1.1.54
- @gluestack-ui/themed@1.1.53
- @gluestack-ui/themed@1.1.52
- @gluestack-ui/themed@1.1.51
- @gluestack-ui/themed@1.1.50
- @gluestack-ui/themed@1.1.49
- @gluestack-ui/themed@1.1.48
- @gluestack-ui/themed@1.1.47
- @gluestack-ui/themed@1.1.46
- @gluestack-ui/themed@1.1.45
- @gluestack-ui/themed@1.1.42
- @gluestack-ui/themed@1.1.41
- @gluestack-ui/themed@1.1.40
- @gluestack-ui/themed@1.1.39
- @gluestack-ui/themed@1.1.37
- @gluestack-ui/themed@1.1.36
- @gluestack-ui/themed@1.1.35
- @gluestack-ui/themed@1.1.34
- @gluestack-ui/themed@1.1.32
- @gluestack-ui/themed@1.1.31
- @gluestack-ui/themed@1.1.30
- @gluestack-ui/themed@1.1.29
- @gluestack-ui/themed@1.1.28
- @gluestack-ui/themed@1.1.27
- @gluestack-ui/themed@1.1.26
- @gluestack-ui/themed@1.1.25
- @gluestack-ui/themed@1.1.24
- @gluestack-ui/themed@1.1.23
- @gluestack-ui/themed@1.1.22
- @gluestack-ui/themed@1.1.21
- @gluestack-ui/themed@1.1.18
- @gluestack-ui/themed@1.1.12
- @gluestack-ui/themed@1.1.11
- @gluestack-ui/themed@1.1.10
- @gluestack-ui/textarea@0.1.24
- @gluestack-ui/textarea@0.1.22
- @gluestack-ui/tabs@0.1.22
- @gluestack-ui/tabs@0.1.21
- @gluestack-ui/tabs@0.1.18
- @gluestack-ui/switch@0.1.27
- @gluestack-ui/switch@0.1.26
- @gluestack-ui/switch@0.1.23
- @gluestack-ui/storybook@0.1.0
- @gluestack-ui/stack@0.1.5
- @gluestack-ui/spinner@0.1.15
- @gluestack-ui/slider@0.1.30
- @gluestack-ui/slider@0.1.29
- @gluestack-ui/slider@0.1.26
- @gluestack-ui/slider@0.1.24
- @gluestack-ui/select@0.1.31
- @gluestack-ui/select@0.1.30
- @gluestack-ui/select@0.1.29
- @gluestack-ui/select@0.1.28
- @gluestack-ui/select@0.1.26
- @gluestack-ui/react-native-aria@0.1.7
- @gluestack-ui/react-native-aria@0.1.6
- @gluestack-ui/radio@0.1.38
- @gluestack-ui/radio@0.1.37
- @gluestack-ui/radio@0.1.34
- @gluestack-ui/radio@0.1.33
- @gluestack-ui/radio@0.1.32
- @gluestack-ui/radio@0.1.30
- @gluestack-ui/radio@0.1.29
- @gluestack-ui/provider@0.1.17
- @gluestack-ui/provider@0.1.16
- @gluestack-ui/provider@0.1.13
- @gluestack-ui/progress@0.1.18
- @gluestack-ui/progress@0.1.17
- @gluestack-ui/progress@0.1.16
- @gluestack-ui/pressable@0.1.21
- @gluestack-ui/pressable@0.1.20
- @gluestack-ui/pressable@0.1.17
- @gluestack-ui/popover@0.1.47
- @gluestack-ui/popover@0.1.46
- @gluestack-ui/popover@0.1.43
- @gluestack-ui/popover@0.1.42
- @gluestack-ui/popover@0.1.41
- @gluestack-ui/popover@0.1.40
- @gluestack-ui/popover@0.1.39
- @gluestack-ui/popover@0.1.38
- @gluestack-ui/popover@0.1.37
- @gluestack-ui/popover@0.1.36
- @gluestack-ui/popover@0.1.34
- @gluestack-ui/popover@0.1.33
- @gluestack-ui/popover@0.1.32
- @gluestack-ui/pin-input@0.0.12
- @gluestack-ui/pin-input@0.0.11
- @gluestack-ui/pin-input@0.0.8
- @gluestack-ui/overlay@0.1.20
- @gluestack-ui/overlay@0.1.19
- @gluestack-ui/overlay@0.1.16
- @gluestack-ui/modal@0.1.39
- @gluestack-ui/modal@0.1.38
- @gluestack-ui/modal@0.1.35
- @gluestack-ui/modal@0.1.33
- @gluestack-ui/modal@0.1.32
- @gluestack-ui/modal@0.1.31
- @gluestack-ui/modal@0.1.30
- @gluestack-ui/menu@0.2.41
- @gluestack-ui/menu@0.2.40
- @gluestack-ui/menu@0.2.37
- @gluestack-ui/menu@0.2.32
- @gluestack-ui/link@0.1.27
- @gluestack-ui/link@0.1.26
- @gluestack-ui/link@0.1.23
- @gluestack-ui/link@0.1.22
- @gluestack-ui/linear-gradient@0.1.3
- @gluestack-ui/input@0.1.36
- @gluestack-ui/input@0.1.35
- @gluestack-ui/input@0.1.32
- @gluestack-ui/input@0.1.31
- @gluestack-ui/input@0.1.30
- @gluestack-ui/input@0.1.28
- @gluestack-ui/input@0.1.27
- @gluestack-ui/image-viewer@0.0.15
- @gluestack-ui/image-viewer@0.0.14
- @gluestack-ui/image-viewer@0.0.11
- @gluestack-ui/image-viewer@0.0.10
- @gluestack-ui/image-viewer@0.0.9
- @gluestack-ui/image-viewer@0.0.8
- @gluestack-ui/image-viewer@0.0.7
- @gluestack-ui/image-viewer@0.0.6
- @gluestack-ui/image-viewer@0.0.5
- @gluestack-ui/image-viewer@0.0.4
- @gluestack-ui/image-viewer@0.0.3
- @gluestack-ui/image@0.1.15
- @gluestack-ui/image@0.1.14
- @gluestack-ui/image@0.1.11
- @gluestack-ui/icon@0.1.23
- @gluestack-ui/icon@0.1.22
- @gluestack-ui/icon@0.1.21
- @gluestack-ui/hstack@0.1.17
- @gluestack-ui/hooks@0.1.13
- @gluestack-ui/hooks@0.1.12
- @gluestack-ui/form-control@0.1.19
- @gluestack-ui/fab@0.1.26
- @gluestack-ui/fab@0.1.25
- @gluestack-ui/fab@0.1.22
- @gluestack-ui/divider@0.1.10
- @gluestack-ui/config-v2@1.1.1
- @gluestack-ui/config@1.1.17
- @gluestack-ui/checkbox@0.1.37
- @gluestack-ui/checkbox@0.1.36
- @gluestack-ui/checkbox@0.1.33
- @gluestack-ui/checkbox@0.1.32
- @gluestack-ui/checkbox@0.1.31
- @gluestack-ui/checkbox@0.1.29
- @gluestack-ui/checkbox@0.1.28
- @gluestack-ui/checkbox@0.1.27
- @gluestack-ui/button@1.0.12
- @gluestack-ui/button@1.0.11
- @gluestack-ui/button@1.0.8
- @gluestack-ui/button@1.0.7
- @gluestack-ui/button@1.0.5
- @gluestack-ui/avatar@0.1.18
- @gluestack-ui/alert-dialog@0.1.36
- @gluestack-ui/alert-dialog@0.1.35
- @gluestack-ui/alert-dialog@0.1.32
- @gluestack-ui/alert-dialog@0.1.31
- @gluestack-ui/alert-dialog@0.1.29
- @gluestack-ui/alert@0.1.16
- @gluestack-ui/alert@0.1.14
- @gluestack-ui/actionsheet@0.2.50
- @gluestack-ui/actionsheet@0.2.49
- @gluestack-ui/actionsheet@0.2.46
- @gluestack-ui/actionsheet@0.2.45
- @gluestack-ui/actionsheet@0.2.44
- @gluestack-ui/actionsheet@0.2.42
- @gluestack-ui/actionsheet@0.2.40
- @gluestack-ui/accordion@1.0.12
- @gluestack-ui/accordion@1.0.11
- @gluestack-ui/accordion@1.0.8
- @gluestack-ui/accordion@1.0.7
- @gluestack-ui/accordion@1.0.6
- @gluestack-ui/accordion@1.0.2
- @gluestack-style/react@1.0.57
- @gluestack-style/react@1.0.56
- @gluestack-style/react@1.0.55
- @gluestack-style/react@1.0.54
- @gluestack-style/react@1.0.53
- @gluestack-style/react@1.0.52
- @gluestack-style/react@1.0.50
- @gluestack-style/react@1.0.49
- @gluestack-style/babel-plugin-styled-resolver@1.0.7
- @gluestack-style/babel-plugin-styled-resolver@1.0.6
Showing
62 changed files
with
6,546 additions
and
2,632 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
457 changes: 173 additions & 284 deletions
457
example/storybook-nativewind/src/components-example/nativewind/AlertDialog/index.tsx
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
37 changes: 37 additions & 0 deletions
37
example/storybook-nativewind/src/components-example/nativewind/Card/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
import React from 'react'; | ||
import { tva } from '@gluestack-ui/nativewind-utils'; | ||
import { View } from 'react-native'; | ||
|
||
const cardStyle = tva({ | ||
variants: { | ||
size: { | ||
sm: 'p-3 rounded-sm', | ||
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 ( | ||
<View | ||
className={cardStyle({ size, variant, class: className })} | ||
{...props} | ||
/> | ||
); | ||
}; | ||
|
||
Card.displayName = 'Card'; | ||
|
||
export { Card }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
571 changes: 175 additions & 396 deletions
571
example/storybook-nativewind/src/components-example/nativewind/Input/index.tsx
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
308 changes: 50 additions & 258 deletions
308
example/storybook-nativewind/src/components-example/nativewind/Textarea/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,309 +1,101 @@ | ||
import React from 'react'; | ||
import { createTextarea } from '@gluestack-ui/textarea'; | ||
import { View, TextInput } from 'react-native'; | ||
import { View, TextInput, Platform } from 'react-native'; | ||
import { | ||
tva, | ||
withStyleContextAndStates, | ||
useStyleContext, | ||
withStyleContext, | ||
withStates, | ||
cssInterop, | ||
VariantProps, | ||
} from '@gluestack-ui/nativewind-utils'; | ||
import { cssInterop } from 'nativewind'; | ||
|
||
const UITextarea = createTextarea({ | ||
// @ts-ignore | ||
Root: withStyleContextAndStates(View), | ||
Input: TextInput, | ||
Root: | ||
Platform.OS === 'web' | ||
? withStyleContext(View) | ||
: withStyleContextAndStates(View), | ||
Input: Platform.OS === 'web' ? TextInput : withStates(TextInput), | ||
}); | ||
|
||
// @ts-ignore | ||
cssInterop(UITextarea, { className: 'style' }); | ||
cssInterop(UITextarea.Input, { className: 'style' }); | ||
|
||
const textareaStyle = tva({ | ||
base: 'w-full h-[100px] border border-background-300 rounded-sm hover:border-outline-400 hover:border-primary-700 focus:border-primary-700 disabled:opacity-40 disable:border-background-300', | ||
base: 'w-full h-[100px] border border-background-300 rounded hover: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', | ||
|
||
variants: { | ||
size: { | ||
sm: '', | ||
md: '', | ||
lg: '', | ||
// _input: { | ||
// fontSize: '$lg', | ||
// }, | ||
// { | ||
// _input: { | ||
// fontSize: '$md', | ||
// }, | ||
// }, | ||
// { | ||
// _input: { | ||
// fontSize: '$sm', | ||
// }, | ||
// }, | ||
xl: '', | ||
// { | ||
// _input: { | ||
// fontSize: '$xl', | ||
// }, | ||
// }, | ||
}, | ||
variant: { | ||
default: | ||
'focus:border-primary-700 focus:border-primary-700 focus:web:shadows-sm invalid:border-error-700 invalid:web:shadows-sm', | ||
// { | ||
// '_input': { | ||
// _web: { | ||
// outlineWidth: '0', | ||
// outline: 'none', | ||
// }, | ||
// }, | ||
|
||
// ':focus': { | ||
// borderColor: '$primary700', | ||
// _web: { | ||
// boxShadow: 'inset 0 0 0 1px $primary700', | ||
// }, | ||
// }, | ||
|
||
// ':invalid': { | ||
// 'borderColor': '$error700', | ||
// '_web': { | ||
// boxShadow: 'inset 0 0 0 1px $error700', | ||
// }, | ||
// ':hover': { | ||
// borderColor: '$error700', | ||
// }, | ||
// ':focus': { | ||
// ':hover': { | ||
// borderColor: '$primary700', | ||
// _web: { | ||
// boxShadow: 'inset 0 0 0 1px $primary700', | ||
// }, | ||
// }, | ||
// }, | ||
// ':disabled': { | ||
// ':hover': { | ||
// borderColor: '$error700', | ||
// _web: { | ||
// boxShadow: 'inset 0 0 0 1px $error700', | ||
// }, | ||
// }, | ||
// }, | ||
// }, | ||
// }, | ||
}, | ||
|
||
defaultVariants: { | ||
variant: 'default', | ||
size: 'md', | ||
'data-[focus=true]:border-primary-700 data-[focus=true]:web:ring-1 data-[focus=true]:web:ring-inset data-[focus=true]:web:ring-primary-700 data-[invalid=true]:border-error-700 data-[invalid=true]:web:ring-1 data-[invalid=true]:web:ring-inset data-[invalid=true]:web:ring-error-700 data-[invalid=true]:hover:border-error-700 data-[invalid=true]:data-[focus=true]:hover:border-primary-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-primary-700 data-[invalid=true]:data-[disabled=true]:hover:border-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 ', | ||
}, | ||
}, | ||
}); | ||
|
||
const textareaInputStyle = tva({ | ||
base: 'p-2 flex-1 color-typography-900 align-text-top', | ||
|
||
// / p: '$2', | ||
// color: '$text900', | ||
// textAlignVertical: 'top', | ||
// flex: 1, | ||
|
||
// props: { | ||
// // @ts-ignore | ||
// multiline: true, | ||
// placeholderTextColor: '$text500', | ||
// }, | ||
|
||
// _web: { | ||
// 'cursor': 'text', | ||
// ':disabled': { | ||
// cursor: 'not-allowed', | ||
// }, | ||
// }, | ||
// }, | ||
// { | ||
// ancestorStyle: ['_input'], | ||
// resolveProps: ['placeholderTextColor'], | ||
// }, | ||
// { | ||
// propertyTokenMap: { | ||
// placeholderTextColor: 'colors', | ||
// }, | ||
// } | ||
base: 'p-3 web:outline-0 web:outline-none flex-1 color-typography-900 align-text-top placeholder:text-typography-500 web:cursor-text web:data-[disabled=true]:cursor-not-allowed', | ||
parentVariants: { | ||
size: { | ||
sm: 'text-sm', | ||
md: 'text-base', | ||
lg: 'text-lg', | ||
xl: 'text-xl', | ||
}, | ||
}, | ||
}); | ||
|
||
// const StyledRoot = | ||
// { | ||
|
||
// '_input': { | ||
// p: '$3', | ||
// _web: { | ||
// outlineWidth: 0, | ||
// outline: 'none', | ||
// }, | ||
// }, | ||
|
||
// ':hover': { | ||
// borderColor: '$border400', | ||
// }, | ||
|
||
// ':focus': { | ||
// 'borderColor': '$primary700', | ||
// ':hover': { | ||
// borderColor: '$primary700', | ||
// }, | ||
// }, | ||
|
||
// ':disabled': { | ||
// 'opacity': 0.4, | ||
// ':hover': { | ||
// borderColor: '$background300', | ||
// }, | ||
// }, | ||
|
||
// 'variants': { | ||
// size: { | ||
// xl: { | ||
// _input: { | ||
// fontSize: '$xl', | ||
// }, | ||
// }, | ||
|
||
// lg: { | ||
// _input: { | ||
// fontSize: '$lg', | ||
// }, | ||
// }, | ||
// md: { | ||
// _input: { | ||
// fontSize: '$md', | ||
// }, | ||
// }, | ||
// sm: { | ||
// _input: { | ||
// fontSize: '$sm', | ||
// }, | ||
// }, | ||
// }, | ||
// variant: { | ||
// default: { | ||
// '_input': { | ||
// _web: { | ||
// outlineWidth: '0', | ||
// outline: 'none', | ||
// }, | ||
// }, | ||
|
||
// ':focus': { | ||
// borderColor: '$primary700', | ||
// _web: { | ||
// boxShadow: 'inset 0 0 0 1px $primary700', | ||
// }, | ||
// }, | ||
|
||
// ':invalid': { | ||
// 'borderColor': '$error700', | ||
// '_web': { | ||
// boxShadow: 'inset 0 0 0 1px $error700', | ||
// }, | ||
// ':hover': { | ||
// borderColor: '$error700', | ||
// }, | ||
// ':focus': { | ||
// ':hover': { | ||
// borderColor: '$primary700', | ||
// _web: { | ||
// boxShadow: 'inset 0 0 0 1px $primary700', | ||
// }, | ||
// }, | ||
// }, | ||
// ':disabled': { | ||
// ':hover': { | ||
// borderColor: '$error700', | ||
// _web: { | ||
// boxShadow: 'inset 0 0 0 1px $error700', | ||
// }, | ||
// }, | ||
// }, | ||
// }, | ||
// }, | ||
// }, | ||
// }, | ||
|
||
// 'defaultProps': { | ||
// variant: 'default', | ||
// size: 'md', | ||
// }, | ||
// }, | ||
|
||
// const StyledInput = styled( | ||
// TextInput, | ||
// { | ||
// p: '$2', | ||
// color: '$text900', | ||
// textAlignVertical: 'top', | ||
// flex: 1, | ||
|
||
// props: { | ||
// // @ts-ignore | ||
// multiline: true, | ||
// placeholderTextColor: '$text500', | ||
// }, | ||
|
||
// _web: { | ||
// 'cursor': 'text', | ||
// ':disabled': { | ||
// cursor: 'not-allowed', | ||
// }, | ||
// }, | ||
// }, | ||
// { | ||
// ancestorStyle: ['_input'], | ||
// resolveProps: ['placeholderTextColor'], | ||
// }, | ||
// { | ||
// propertyTokenMap: { | ||
// placeholderTextColor: 'colors', | ||
// }, | ||
// } | ||
// ); | ||
|
||
export const Textarea = React.forwardRef( | ||
({ className, variant = 'solid', size = 'md', ...props }: any, ref) => { | ||
type ITextareaProps = React.ComponentProps<typeof UITextarea> & | ||
VariantProps<typeof textareaStyle>; | ||
|
||
const Textarea = React.forwardRef( | ||
( | ||
{ | ||
className, | ||
variant = 'default', | ||
size = 'md', | ||
...props | ||
}: { className?: string } & ITextareaProps, | ||
ref | ||
) => { | ||
return ( | ||
<UITextarea | ||
ref={ref} | ||
{...props} | ||
className={textareaStyle({ variant, size, class: className })} | ||
context={{ variant, size }} | ||
className={textareaStyle({ variant, class: className })} | ||
context={{ size }} | ||
/> | ||
); | ||
} | ||
); | ||
|
||
export const TextareaInput = React.forwardRef( | ||
({ className, variant, size, action, ...props }: any, ref) => { | ||
const { | ||
variant: parentVariant, | ||
size: parentSize, | ||
action: parentAction, | ||
} = useStyleContext(); | ||
type ITextareaInputProps = React.ComponentProps<typeof UITextarea.Input> & | ||
VariantProps<typeof textareaInputStyle>; | ||
|
||
const TextareaInput = React.forwardRef( | ||
( | ||
{ className, ...props }: { className?: string } & ITextareaInputProps, | ||
ref | ||
) => { | ||
const { size: parentSize } = useStyleContext(); | ||
|
||
return ( | ||
<UITextarea.Input | ||
ref={ref} | ||
{...props} | ||
className={textareaInputStyle({ | ||
parentVariants: { | ||
variant: parentVariant, | ||
size: parentSize, | ||
action: parentAction, | ||
}, | ||
variant, | ||
size, | ||
action, | ||
class: className, | ||
})} | ||
/> | ||
); | ||
} | ||
); | ||
|
||
Textarea.displayName = 'Textarea'; | ||
TextareaInput.displayName = 'TextareaInput'; | ||
|
||
export { Textarea, TextareaInput }; |
60 changes: 60 additions & 0 deletions
60
example/storybook-nativewind/src/components-example/themed/Card/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
import { View } from 'react-native'; | ||
import { styled } from '@gluestack-style/react'; | ||
|
||
const StyledRoot = styled(View, { | ||
variants: { | ||
size: { | ||
sm: { | ||
p: '$3', | ||
borderRadius: '$sm', | ||
}, | ||
md: { | ||
p: '$4', | ||
borderRadius: '$md', | ||
}, | ||
lg: { | ||
p: '$6', | ||
borderRadius: '$xl', | ||
}, | ||
}, | ||
variant: { | ||
elevated: { | ||
bg: '$backgroundLight0', | ||
shadowColor: '$backgroundLight800', | ||
shadowOffset: { | ||
width: 0, | ||
height: 1, | ||
}, | ||
shadowOpacity: 0.22, | ||
shadowRadius: 2.22, | ||
elevation: 3, | ||
_dark: { | ||
bg: '$backgroundDark900', | ||
}, | ||
}, | ||
outline: { | ||
borderWidth: 1, | ||
borderColor: '$borderLight200', | ||
_dark: { | ||
borderColor: '$borderDark800', | ||
}, | ||
}, | ||
ghost: { | ||
borderRadius: '$none', | ||
}, | ||
filled: { | ||
bg: '$backgroundLight50', | ||
_dark: { | ||
bg: '$backgroundDark900', | ||
}, | ||
}, | ||
}, | ||
}, | ||
defaultProps: { | ||
theme: 'light', | ||
size: 'md', | ||
variant: 'elevated', | ||
}, | ||
}); | ||
|
||
export const Card = StyledRoot; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
298 changes: 134 additions & 164 deletions
298
example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
Large diffs are not rendered by default.
Oops, something went wrong.
65 changes: 65 additions & 0 deletions
65
example/storybook-nativewind/src/components/Card/BlogCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,65 @@ | ||
// import React from 'react'; | ||
// import { | ||
// Card, | ||
// Text, | ||
// Box, | ||
// VStack, | ||
// Heading, | ||
// Avatar, | ||
// AvatarFallbackText, | ||
// AvatarImage, | ||
// } from '@gluestack-ui/themed'; | ||
|
||
// const BlogCard = () => { | ||
// return ( | ||
// <Card p="$5" borderRadius="$lg" maxWidth={360}> | ||
// <Text | ||
// fontSize="$sm" | ||
// fontStyle="normal" | ||
// fontFamily="$heading" | ||
// fontWeight="$normal" | ||
// lineHeight="$sm" | ||
// mb="$2" | ||
// sx={{ | ||
// color: '$textLight700', | ||
// _dark: { | ||
// color: '$textDark200', | ||
// }, | ||
// }} | ||
// > | ||
// May 15, 2023 | ||
// </Text> | ||
// <VStack mb="$6"> | ||
// <Heading size="md" fontFamily="$heading" mb="$4"> | ||
// The Power of Positive Thinking | ||
// </Heading> | ||
// <Text size="sm" fontFamily="$heading"> | ||
// Discover how the power of positive thinking can transform your life, | ||
// boost your confidence, and help you overcome challenges. Explore | ||
// practical tips and techniques to cultivate a positive mindset for | ||
// greater happiness and success. | ||
// </Text> | ||
// </VStack> | ||
// <Box flexDirection="row"> | ||
// <Avatar mr="$3"> | ||
// <AvatarFallbackText fontFamily="$heading">RR</AvatarFallbackText> | ||
// <AvatarImage | ||
// source={{ | ||
// uri: 'https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxzZWFyY2h8Mnx8dXNlcnxlbnwwfHwwfHw%3D&auto=format&fit=crop&w=800&q=60', | ||
// }} | ||
// /> | ||
// </Avatar> | ||
// <VStack> | ||
// <Heading size="sm" fontFamily="$heading" mb="$1"> | ||
// John Smith | ||
// </Heading> | ||
// <Text size="sm" fontFamily="$heading"> | ||
// Motivational Speaker | ||
// </Text> | ||
// </VStack> | ||
// </Box> | ||
// </Card> | ||
// ); | ||
// }; | ||
|
||
// export default BlogCard; |
38 changes: 38 additions & 0 deletions
38
example/storybook-nativewind/src/components/Card/Card.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import type { ComponentMeta } from '@storybook/react-native'; | ||
import Card from './Card'; | ||
// import BlogCard from './BlogCard'; | ||
// import ProductCard from './ProductCard'; | ||
// import ImageCard from './ImageCard'; | ||
// import ProfileCard from './ProfileCard'; | ||
|
||
const CardMeta: ComponentMeta<typeof Card> = { | ||
title: 'stories/Card', | ||
component: Card, | ||
// metaInfo is required for figma generation | ||
// @ts-ignore | ||
metaInfo: { | ||
componentDescription: `A Card component serves as a visual container that groups related content and actions.`, | ||
}, | ||
argTypes: { | ||
size: { | ||
control: 'select', | ||
options: ['sm', 'md', 'lg'], | ||
defaultValue: 'md', | ||
}, | ||
variant: { | ||
control: 'select', | ||
options: ['elevated', 'outline', 'ghost', 'filled'], | ||
defaultValue: 'elevated', | ||
}, | ||
}, | ||
}; | ||
|
||
export default CardMeta; | ||
|
||
export { | ||
Card, | ||
// BlogCard, | ||
// ProductCard, | ||
// ImageCard, | ||
// ProfileCard | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
import React from 'react'; | ||
import { Card } from '@/components/ui/Card'; | ||
import { Text } from '@/components/ui/Text'; | ||
import { Heading } from '@/components/ui/Heading'; | ||
|
||
const CardBasic = ({ ...props }: any) => { | ||
return ( | ||
<Card {...props}> | ||
<Heading size="md" className={'mb-1'}> | ||
Quick Start | ||
</Heading> | ||
<Text size="sm">Start building your next project in minutes</Text> | ||
</Card> | ||
); | ||
}; | ||
|
||
CardBasic.description = | ||
'This is a basic Card component example. A Card component serves as a visual container that groups related content and actions.'; | ||
|
||
export default CardBasic; | ||
export { Card, Heading, Text }; |
72 changes: 72 additions & 0 deletions
72
example/storybook-nativewind/src/components/Card/ImageCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,72 @@ | ||
// import React from 'react'; | ||
// import { | ||
// Card, | ||
// Text, | ||
// Heading, | ||
// Image, | ||
// Link, | ||
// HStack, | ||
// LinkText, | ||
// Icon, | ||
// ArrowRightIcon, | ||
// } from '@gluestack-ui/themed'; | ||
|
||
// const ImageCard = () => { | ||
// return ( | ||
// <Card p="$5" borderRadius="$lg" maxWidth={360}> | ||
// <Image | ||
// mb="$6" | ||
// h={240} | ||
// width="$full" | ||
// borderRadius="$md" | ||
// source={{ | ||
// uri: 'https://images.unsplash.com/photo-1529693662653-9d480530a697?q=80&w=2831&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', | ||
// }} | ||
// /> | ||
|
||
// <Text | ||
// fontSize="$sm" | ||
// fontStyle="normal" | ||
// fontFamily="$heading" | ||
// fontWeight="$normal" | ||
// lineHeight="$sm" | ||
// mb="$2" | ||
// sx={{ | ||
// color: '$textLight700', | ||
// _dark: { | ||
// color: '$textDark200', | ||
// }, | ||
// }} | ||
// > | ||
// May 15, 2023 | ||
// </Text> | ||
// <Heading size="md" fontFamily="$heading" mb="$4"> | ||
// The Power of Positive Thinking | ||
// </Heading> | ||
// <Link href="https://gluestack.io/" isExternal> | ||
// <HStack alignItems="center"> | ||
// <LinkText | ||
// size="sm" | ||
// fontFamily="$heading" | ||
// fontWeight="$semibold" | ||
// color="$primary600" | ||
// $dark-color="$primary300" | ||
// textDecorationLine="none" | ||
// > | ||
// Read Blog | ||
// </LinkText> | ||
// <Icon | ||
// as={ArrowRightIcon} | ||
// size="sm" | ||
// color="$primary600" | ||
// mt="$0.5" | ||
// ml="$0.5" | ||
// $dark-color="$primary300" | ||
// /> | ||
// </HStack> | ||
// </Link> | ||
// </Card> | ||
// ); | ||
// }; | ||
|
||
// export default ImageCard; |
101 changes: 101 additions & 0 deletions
101
example/storybook-nativewind/src/components/Card/ProductCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
// import React from 'react'; | ||
// import { | ||
// Card, | ||
// Text, | ||
// VStack, | ||
// Heading, | ||
// Button, | ||
// ButtonText, | ||
// Box, | ||
// Image, | ||
// } from '@gluestack-ui/themed'; | ||
|
||
// const ProductCard = () => { | ||
// return ( | ||
// <Card p="$5" borderRadius="$lg" maxWidth={360}> | ||
// <Image | ||
// mb="$6" | ||
// h={240} | ||
// width="$full" | ||
// borderRadius="$md" | ||
// source={{ | ||
// uri: 'https://images.unsplash.com/photo-1595231712325-9fedecef7575?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1yZWxhdGVkfDJ8fHxlbnwwfHx8fHw%3D', | ||
// }} | ||
// /> | ||
|
||
// <Text | ||
// fontSize="$sm" | ||
// fontStyle="normal" | ||
// fontFamily="$heading" | ||
// fontWeight="$normal" | ||
// lineHeight="$sm" | ||
// mb="$2" | ||
// sx={{ | ||
// color: '$textLight700', | ||
// _dark: { | ||
// color: '$textDark200', | ||
// }, | ||
// }} | ||
// > | ||
// Fashion Clothing | ||
// </Text> | ||
// <VStack mb="$6"> | ||
// <Heading size="md" fontFamily="$heading" mb="$4"> | ||
// Cotton Kurta | ||
// </Heading> | ||
// <Text size="sm" fontFamily="$heading"> | ||
// Floral embroidered notch neck thread work cotton kurta in white and | ||
// black. | ||
// </Text> | ||
// </VStack> | ||
// <Box | ||
// flexDirection="column" | ||
// sx={{ | ||
// '@sm': { | ||
// flexDirection: 'row', | ||
// }, | ||
// }} | ||
// > | ||
// <Button | ||
// px="$4" | ||
// py="$2" | ||
// fontFamily="$heading" | ||
// mr="$0" | ||
// mb="$3" | ||
// sx={{ | ||
// '@sm': { | ||
// mr: '$3', | ||
// mb: '$0', | ||
// flex: 1, | ||
// }, | ||
// }} | ||
// > | ||
// <ButtonText size="sm">Add to cart</ButtonText> | ||
// </Button> | ||
// <Button | ||
// px="$4" | ||
// py="$2" | ||
// variant="outline" | ||
// fontFamily="$heading" | ||
// borderColor="$borderLight300" | ||
// $dark-borderColor="$backgroundDark600" | ||
// sx={{ | ||
// '@sm': { | ||
// flex: 1, | ||
// }, | ||
// }} | ||
// > | ||
// <ButtonText | ||
// size="sm" | ||
// color="$textLight600" | ||
// $dark-color="$textDark400" | ||
// > | ||
// Wishlist | ||
// </ButtonText> | ||
// </Button> | ||
// </Box> | ||
// </Card> | ||
// ); | ||
// }; | ||
|
||
// export default ProductCard; |
183 changes: 183 additions & 0 deletions
183
example/storybook-nativewind/src/components/Card/ProfileCard.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,183 @@ | ||
// import React from 'react'; | ||
// import { | ||
// Card, | ||
// Text, | ||
// Box, | ||
// VStack, | ||
// Heading, | ||
// Avatar, | ||
// AvatarFallbackText, | ||
// AvatarImage, | ||
// Image, | ||
// Button, | ||
// ButtonText, | ||
// Divider, | ||
// } from '@gluestack-ui/themed'; | ||
|
||
// const ProfileCard = () => { | ||
// return ( | ||
// <Card p="$6" borderRadius="$lg" maxWidth={360}> | ||
// <Box flexDirection="row"> | ||
// <Avatar mr="$4"> | ||
// <AvatarFallbackText fontFamily="$heading">JD</AvatarFallbackText> | ||
// <AvatarImage | ||
// source={{ | ||
// uri: 'https://images.unsplash.com/photo-1620403724159-40363e84a155?q=80&w=2646&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', | ||
// }} | ||
// /> | ||
// </Avatar> | ||
// <VStack> | ||
// <Heading size="md" fontFamily="$heading" mb="$1"> | ||
// Jane Doe | ||
// </Heading> | ||
// <Text size="sm" fontFamily="$heading"> | ||
// janedoe@sample.com | ||
// </Text> | ||
// </VStack> | ||
// </Box> | ||
// <Box | ||
// my="$5" | ||
// sx={{ | ||
// 'flexDirection': 'column', | ||
// '@sm': { | ||
// my: '$6', | ||
// flexDirection: 'row', | ||
// }, | ||
// }} | ||
// > | ||
// <VStack | ||
// alignItems="center" | ||
// sx={{ | ||
// 'pb': '$2', | ||
// '@sm': { | ||
// flex: 1, | ||
// pb: '$0', | ||
// borderRightWidth: 1, | ||
// borderColor: '$backgroundLight300', | ||
// _dark: { | ||
// borderRightColor: '$backgroundDark800', | ||
// }, | ||
// }, | ||
// }} | ||
// > | ||
// <Heading size="xs" fontFamily="$heading"> | ||
// 81 | ||
// </Heading> | ||
// <Text size="xs">posts</Text> | ||
// </VStack> | ||
// <Divider | ||
// orientation="horizontal" | ||
// width="40%" | ||
// alignSelf="center" | ||
// sx={{ | ||
// 'bg': '$backgroundLight300', | ||
// 'display': 'flex', | ||
// '_dark': { | ||
// bg: '$backgroundDark800', | ||
// }, | ||
// '@sm': { | ||
// display: 'none', | ||
// }, | ||
// }} | ||
// /> | ||
// <VStack | ||
// alignItems="center" | ||
// sx={{ | ||
// 'py': '$2', | ||
// '@sm': { | ||
// flex: 1, | ||
// py: '$0', | ||
// borderRightWidth: 1, | ||
// borderColor: '$backgroundLight300', | ||
// _dark: { | ||
// borderRightColor: '$backgroundDark800', | ||
// }, | ||
// }, | ||
// }} | ||
// > | ||
// <Heading size="xs" fontFamily="$heading"> | ||
// 5,281 | ||
// </Heading> | ||
// <Text size="xs">followers</Text> | ||
// </VStack> | ||
// <Divider | ||
// orientation="horizontal" | ||
// width="40%" | ||
// alignSelf="center" | ||
// sx={{ | ||
// 'bg': '$backgroundLight300', | ||
// 'display': 'flex', | ||
// '_dark': { | ||
// bg: '$backgroundDark800', | ||
// }, | ||
// '@sm': { | ||
// display: 'none', | ||
// }, | ||
// }} | ||
// /> | ||
// <VStack | ||
// alignItems="center" | ||
// sx={{ | ||
// 'pt': '$2', | ||
// '@sm': { | ||
// flex: 1, | ||
// pt: '$0', | ||
// }, | ||
// }} | ||
// > | ||
// <Heading size="xs" fontFamily="$heading"> | ||
// 281 | ||
// </Heading> | ||
// <Text size="xs">following</Text> | ||
// </VStack> | ||
// </Box> | ||
// <Box | ||
// mb="$5" | ||
// sx={{ | ||
// 'flexDirection': 'column', | ||
// '@sm': { | ||
// mb: '$6', | ||
// flexDirection: 'row', | ||
// }, | ||
// }} | ||
// > | ||
// <Image | ||
// mb="$3" | ||
// borderRadius="$md" | ||
// sx={{ | ||
// 'width': '$full', | ||
// 'height': 140, | ||
// '@sm': { | ||
// mb: '$0', | ||
// mr: '$3', | ||
// width: 150, | ||
// height: 154, | ||
// }, | ||
// }} | ||
// source={{ | ||
// uri: 'https://images.unsplash.com/photo-1592089416462-2b0cb7da8379?q=80&w=2865&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', | ||
// }} | ||
// /> | ||
// <Image | ||
// borderRadius="$md" | ||
// sx={{ | ||
// 'width': '$full', | ||
// 'height': 140, | ||
// '@sm': { | ||
// width: 150, | ||
// height: 154, | ||
// }, | ||
// }} | ||
// source={{ | ||
// uri: 'https://images.unsplash.com/photo-1484406566174-9da000fda645?q=80&w=2425&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D', | ||
// }} | ||
// /> | ||
// </Box> | ||
// <Button py="$2" px="$4"> | ||
// <ButtonText size="sm">Follow</ButtonText> | ||
// </Button> | ||
// </Card> | ||
// ); | ||
// }; | ||
|
||
// export default ProfileCard; |
667 changes: 667 additions & 0 deletions
667
example/storybook-nativewind/src/components/Card/index.nw.stories.mdx
Large diffs are not rendered by default.
Oops, something went wrong.
700 changes: 700 additions & 0 deletions
700
example/storybook-nativewind/src/components/Card/index.stories.mdx
Large diffs are not rendered by default.
Oops, something went wrong.
667 changes: 667 additions & 0 deletions
667
example/storybook-nativewind/src/components/Card/index.themed.stories.mdx
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
381 changes: 375 additions & 6 deletions
381
example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,21 +1,390 @@ | ||
--- | ||
title: FormControl | gluestack-ui | Installation, Usage, and API | ||
title: gluestack-ui FormControl Component | Installation, Usage, and API | ||
|
||
description: By using FormControl, developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required. | ||
|
||
pageTitle: FormControl | ||
|
||
pageDescription: By using FormControl, developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required. | ||
|
||
showHeader: false | ||
|
||
tag: coming soon | ||
showHeader: true | ||
--- | ||
|
||
import { Meta } from '@storybook/addon-docs'; | ||
|
||
<Meta title="with-nativewind/components/Forms/FormControl" /> | ||
|
||
# FormControl | ||
import { | ||
Icon, | ||
CircleIcon, | ||
CheckIcon, | ||
} from '@gluestack-ui/themed'; | ||
import { | ||
FormControl, | ||
FormControlLabel, | ||
FormControlLabelText, | ||
FormControlHelper, | ||
FormControlHelperText, | ||
FormControlError, | ||
FormControlErrorIcon, | ||
FormControlErrorText, | ||
Input, | ||
InputField, | ||
AlertCircleIcon, | ||
} from './FormControl'; | ||
import { Center, Text as FormControlText, Heading } from '@gluestack-ui/themed'; | ||
import { | ||
ChevronDownIcon, | ||
Button, | ||
ButtonText, | ||
Radio, | ||
RadioGroup, | ||
RadioIcon, | ||
RadioIndicator, | ||
RadioLabel, | ||
Checkbox, | ||
CheckboxGroup, | ||
CheckboxIndicator, | ||
CheckboxIcon, | ||
CheckboxLabel, | ||
} from '@gluestack-ui/themed'; | ||
import { | ||
Textarea, | ||
TextareaInput, | ||
Select, | ||
SelectTrigger, | ||
SelectInput, | ||
SelectIcon, | ||
SelectPortal, | ||
SelectBackdrop, | ||
SelectContent, | ||
SelectDragIndicatorWrapper, | ||
SelectDragIndicator, | ||
SelectItem, | ||
Switch, | ||
} from '@gluestack-ui/themed'; | ||
import { | ||
Slider, | ||
SliderTrack, | ||
SliderFilledTrack, | ||
SliderThumb, | ||
Modal, | ||
ModalBackdrop, | ||
ModalContent, | ||
ModalHeader, | ||
ModalCloseButton, | ||
ModalBody, | ||
ModalFooter, | ||
HStack, | ||
VStack, | ||
} from '@gluestack-ui/themed'; | ||
import { transformedCode } from '../../utils'; | ||
import { | ||
AppProvider, | ||
CodePreview, | ||
Table, | ||
TableContainer, | ||
Text, | ||
InlineCode, | ||
} from '@gluestack/design-system'; | ||
|
||
import { useState } from 'react'; | ||
|
||
import Wrapper from '../../components-example/nativewind/Wrapper'; | ||
import { Box } from '../../components-example/nativewind/Box'; | ||
import { CollapsibleCode } from '@gluestack/design-system'; | ||
|
||
This is an illustration of **FormControl** component. | ||
|
||
<Wrapper> | ||
<CodePreview | ||
showComponentRenderer={true} | ||
showArgsController={true} | ||
metaData={{ | ||
code: ` | ||
<Box className="h-32 w-72"> | ||
<FormControl {...props}> | ||
<FormControlLabel className="mb-1"> | ||
<FormControlLabelText>Password</FormControlLabelText> | ||
</FormControlLabel> | ||
<Input> | ||
<InputField | ||
type="password" | ||
defaultValue="12345" | ||
placeholder="password" | ||
/> | ||
</Input> | ||
<FormControlHelper> | ||
<FormControlHelperText> | ||
Must be at least 6 characters. | ||
</FormControlHelperText> | ||
</FormControlHelper> | ||
<FormControlError> | ||
<FormControlErrorIcon | ||
as={AlertCircleIcon} | ||
/> | ||
<FormControlErrorText> | ||
At least 6 characters are required. | ||
</FormControlErrorText> | ||
</FormControlError> | ||
</FormControl> | ||
</Box> | ||
`, | ||
transformCode: (code) => { | ||
return transformedCode(code); | ||
}, | ||
scope: { | ||
Wrapper, | ||
FormControl, | ||
FormControlLabel, | ||
FormControlLabelText, | ||
FormControlHelper, | ||
FormControlHelperText, | ||
FormControlError, | ||
FormControlErrorIcon, | ||
FormControlErrorText, | ||
Icon, | ||
Input, | ||
InputField, | ||
AlertCircleIcon, | ||
Box, | ||
}, | ||
argsType: { | ||
size: { | ||
control: 'select', | ||
options: ['sm', 'md', 'lg'], | ||
default: 'md', | ||
}, | ||
isDisabled: { | ||
control: 'boolean', | ||
default: false, | ||
}, | ||
isInvalid: { | ||
control: 'boolean', | ||
default: false, | ||
}, | ||
isReadOnly: { | ||
control: 'boolean', | ||
default: false, | ||
}, | ||
isRequired: { | ||
control: 'boolean', | ||
default: false, | ||
}, | ||
}, | ||
}} | ||
/> | ||
</Wrapper> | ||
|
||
<br /> | ||
|
||
## Installation | ||
|
||
### Step 1: Install the following dependencies: | ||
|
||
```bash | ||
|
||
npm i @gluestack-ui/form-control | ||
|
||
``` | ||
|
||
### Step 2: Copy and paste the following code into your project. | ||
|
||
<CollapsibleCode> | ||
```jsx | ||
%%-- File: components-example/nativewind/FormControl/index.tsx --%% | ||
``` | ||
</CollapsibleCode> | ||
|
||
### Step 3: Update the import paths to match your project setup. | ||
|
||
## API Reference | ||
|
||
To use this component in your project, include the following import statement in your file. | ||
|
||
```jsx | ||
import { FormControl } from '@/components/ui/FormControl'; | ||
``` | ||
|
||
```jsx | ||
export default () => ( | ||
<FormControl> | ||
<FormControlLabel> | ||
<FormControlLabelText /> | ||
</FormControlLabel> | ||
<FormControlHelper> | ||
<FormControlHelperText /> | ||
</FormControlHelper> | ||
<FormControlError> | ||
<FormControlErrorIcon /> | ||
<FormControlErrorText /> | ||
</FormControlError> | ||
</FormControl> | ||
); | ||
``` | ||
|
||
### Component Props | ||
|
||
This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration. | ||
|
||
#### FormControl | ||
|
||
It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. | ||
|
||
<Wrapper> | ||
<TableContainer> | ||
<Table> | ||
<Table.THead> | ||
<Table.TR> | ||
<Table.TH> | ||
<Table.TText>Prop</Table.TText> | ||
</Table.TH> | ||
<Table.TH> | ||
<Table.TText>Type</Table.TText> | ||
</Table.TH> | ||
<Table.TH> | ||
<Table.TText>Default</Table.TText> | ||
</Table.TH> | ||
<Table.TH> | ||
<Table.TText>Description</Table.TText> | ||
</Table.TH> | ||
</Table.TR> | ||
</Table.THead> | ||
<Table.TBody> | ||
<Table.TR> | ||
<Table.TD> | ||
<Table.TText> | ||
<InlineCode>isInvalid</InlineCode> | ||
</Table.TText> | ||
</Table.TD> | ||
<Table.TD> | ||
<Table.TText>bool</Table.TText> | ||
</Table.TD> | ||
<Table.TD> | ||
<Table.TText>false</Table.TText> | ||
</Table.TD> | ||
<Table.TD> | ||
<Table.TText>{`When true, invalid state.`}</Table.TText> | ||
</Table.TD> | ||
</Table.TR> | ||
<Table.TR> | ||
<Table.TD> | ||
<Table.TText> | ||
<InlineCode>isRequired</InlineCode> | ||
</Table.TText> | ||
</Table.TD> | ||
<Table.TD> | ||
<Table.TText>bool</Table.TText> | ||
</Table.TD> | ||
<Table.TD> | ||
<Table.TText>false</Table.TText> | ||
</Table.TD> | ||
<Table.TD> | ||
<Table.TText>{`If true, astrick gets activated.`}</Table.TText> | ||
</Table.TD> | ||
</Table.TR> | ||
<Table.TR> | ||
<Table.TD> | ||
<Table.TText> | ||
<InlineCode>isDisabled</InlineCode> | ||
</Table.TText> | ||
</Table.TD> | ||
<Table.TD> | ||
<Table.TText>bool</Table.TText> | ||
</Table.TD> | ||
<Table.TD> | ||
<Table.TText>false</Table.TText> | ||
</Table.TD> | ||
<Table.TD> | ||
<Table.TText>{`Disabled state true.`}</Table.TText> | ||
</Table.TD> | ||
</Table.TR> | ||
<Table.TR> | ||
<Table.TD> | ||
<Table.TText> | ||
<InlineCode>isReadOnly</InlineCode> | ||
</Table.TText> | ||
</Table.TD> | ||
<Table.TD> | ||
<Table.TText>bool</Table.TText> | ||
</Table.TD> | ||
<Table.TD> | ||
<Table.TText>false</Table.TText> | ||
</Table.TD> | ||
<Table.TD> | ||
<Table.TText>{`To manually set read-only state.`}</Table.TText> | ||
</Table.TD> | ||
</Table.TR> | ||
<Table.TR> | ||
<Table.TD> | ||
<Table.TText> | ||
<InlineCode>isDisabled</InlineCode> | ||
</Table.TText> | ||
</Table.TD> | ||
<Table.TD> | ||
<Table.TText>bool</Table.TText> | ||
</Table.TD> | ||
<Table.TD> | ||
<Table.TText>false</Table.TText> | ||
</Table.TD> | ||
<Table.TD> | ||
<Table.TText>{`To manually set disable to the FormControl.`}</Table.TText> | ||
</Table.TD> | ||
</Table.TR> | ||
</Table.TBody> | ||
</Table> | ||
</TableContainer> | ||
</Wrapper> | ||
|
||
#### FormControlLabel | ||
|
||
It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. | ||
|
||
#### FormControlLabelText | ||
|
||
It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. | ||
|
||
#### FormControlHelper | ||
|
||
It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. | ||
|
||
#### FormControlHelperText | ||
|
||
It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. | ||
|
||
#### FormControlError | ||
|
||
It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. | ||
|
||
#### FormControlErrorIcon | ||
|
||
It inherits all the properties of gluestack Style's [AsForwarder](/style/docs/api/as-forwarder) component. | ||
|
||
#### FormControlErrorText | ||
|
||
It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. | ||
|
||
### Features | ||
|
||
- Keyboard support for actions. | ||
- Support for hover, focus and active states. | ||
- Option to add your styles or use the default styles. | ||
|
||
### Props | ||
|
||
FormControl component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props). | ||
|
||
<!-- | ||
## Spec Doc | ||
|
||
Explore the comprehensive details of the Input in this document, including its implementation details, checklist, and potential future additions. Dive into the thought process behind the component and gain insights into its development journey. | ||
|
||
Coming Soon! | ||
<iframe | ||
style={{ | ||
borderRadius: '8px', | ||
border: ' 1px solid rgba(0, 0, 0, 0.1)', | ||
aspectRatio: 736 / 585, | ||
}} | ||
src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Ftype%3Ddesign%26node-id%3D5030-22048%26t%3DIS25mxEIlIP9OacJ-1%26scaling%3Dscale-down%26page-id%3D5030%253A19919%26starting-point-node-id%3D5030%253A22048%26mode%3Ddesign" | ||
allowfullscreen | ||
></iframe> --> |
390 changes: 0 additions & 390 deletions
390
example/storybook-nativewind/src/components/FormControl/index.nw.storiesold.mdx
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.