From 6bc68ae50a8a3b4d9f64624032ef37f8d88e4376 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Fri, 23 Feb 2024 12:42:30 +0530 Subject: [PATCH 1/2] feat: added form-control --- .../nativewind/FormControl/index.tsx | 97 ++++- .../components/FormControl/FormControl.tsx | 2 +- .../FormControl/index.nw.stories.mdx | 381 ++++++++++++++++- .../FormControl/index.nw.storiesold.mdx | 390 ------------------ .../FormControl/index.themed.stories.mdx | 6 +- 5 files changed, 465 insertions(+), 411 deletions(-) delete mode 100644 example/storybook-nativewind/src/components/FormControl/index.nw.storiesold.mdx diff --git a/example/storybook-nativewind/src/components-example/nativewind/FormControl/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/FormControl/index.tsx index 6324cc353e..d26e9c39ac 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/FormControl/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/FormControl/index.tsx @@ -1,11 +1,12 @@ import { Text, View } from 'react-native'; import React from 'react'; import { createFormControl } from '@gluestack-ui/form-control'; -import { cssInterop } from 'nativewind'; import { tva, withStyleContext, useStyleContext, + cssInterop, + VariantProps, } from '@gluestack-ui/nativewind-utils'; const formControlStyle = tva({ @@ -220,7 +221,13 @@ cssInterop(UIFormControl.Label.Astrick, { className: 'style' }); cssInterop(UIFormControl.Helper, { className: 'style' }); cssInterop(UIFormControl.Helper.Text, { className: 'style' }); -const FormControl = ({ className, size = 'md', ...props }: any) => { +type IFormControlProps = React.ComponentProps & + VariantProps; +const FormControl = ({ + className, + size = 'md', + ...props +}: { className?: string } & IFormControlProps) => { return ( { /> ); }; -const FormControlError = ({ className, ...props }: any) => { + +type IFormControlErrorProps = React.ComponentProps & + VariantProps; +const FormControlError = ({ + className, + ...props +}: { className?: string } & IFormControlErrorProps) => { return ( { /> ); }; -const FormControlErrorText = ({ className, size, ...props }: any) => { + +type IFormControlErrorTextProps = React.ComponentProps< + typeof UIFormControl.Error.Text +> & + VariantProps; +const FormControlErrorText = ({ + className, + size, + ...props +}: { className?: string } & IFormControlErrorTextProps) => { const { size: parentSize } = useStyleContext(); return ( { /> ); }; -const FormControlErrorIcon = ({ className, size, ...props }: any) => { - const { size: parentSize } = useStyleContext(); +type IFormControlErrorIconProps = React.ComponentProps< + typeof UIFormControl.Error.Icon +> & + VariantProps; +const FormControlErrorIcon = ({ + className, + size, + as: AsComp, + ...props +}: { className?: string } & IFormControlErrorIconProps) => { + const { size: parentSize } = useStyleContext(); + if (AsComp) { + return ; + } return ( { /> ); }; -const FormControlLabel = ({ className, ...props }: any) => { + +type IFormControlLabelProps = React.ComponentProps & + VariantProps; +const FormControlLabel = ({ + className, + ...props +}: { className?: string } & IFormControlLabelProps) => { return ( { /> ); }; -const FormControlLabelText = ({ className, size, ...props }: any) => { + +type IFormControlLabelTextProps = React.ComponentProps< + typeof UIFormControl.Label.Text +> & + VariantProps; +const FormControlLabelText = ({ + className, + size, + ...props +}: { className?: string } & IFormControlLabelTextProps) => { const { size: parentSize } = useStyleContext(); return ( @@ -286,7 +335,16 @@ const FormControlLabelText = ({ className, size, ...props }: any) => { /> ); }; -const FormControlLabelAstrick = ({ className, size, ...props }: any) => { + +type IFormControlLabelAstrickProps = React.ComponentProps< + typeof UIFormControl.Label.Astrick +> & + VariantProps; +const FormControlLabelAstrick = ({ + className, + size, + ...props +}: { className?: string } & IFormControlLabelAstrickProps) => { const { size: parentSize } = useStyleContext(); return ( @@ -300,7 +358,15 @@ const FormControlLabelAstrick = ({ className, size, ...props }: any) => { /> ); }; -const FormControlHelper = ({ className, ...props }: any) => { + +type IFormControlHelperProps = React.ComponentProps< + typeof UIFormControl.Helper +> & + VariantProps; +const FormControlHelper = ({ + className, + ...props +}: { className?: string } & IFormControlHelperProps) => { return ( { /> ); }; -const FormControlHelperText = ({ className, size, ...props }: any) => { + +type IFormControlHelperTextProps = React.ComponentProps< + typeof UIFormControl.Helper.Text +> & + VariantProps; +const FormControlHelperText = ({ + className, + size, + ...props +}: { className?: string } & IFormControlHelperTextProps) => { const { size: parentSize } = useStyleContext(); return ( diff --git a/example/storybook-nativewind/src/components/FormControl/FormControl.tsx b/example/storybook-nativewind/src/components/FormControl/FormControl.tsx index 37f9c7f976..cfb5001776 100644 --- a/example/storybook-nativewind/src/components/FormControl/FormControl.tsx +++ b/example/storybook-nativewind/src/components/FormControl/FormControl.tsx @@ -45,7 +45,6 @@ import { Icon, CircleIcon, CheckIcon, - AlertCircleIcon, ChevronDownIcon, } from '@gluestack-ui/themed'; import { @@ -58,6 +57,7 @@ import { FormControlErrorIcon, FormControlErrorText, } from '@/components/ui/FormControl'; +import { AlertCircleIcon } from 'lucide-react-native'; import { Input, InputField } from '@/components/ui/Input'; const FormControlBasic = ({ ...props }: any) => { diff --git a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx index 20d96bae28..4b755853b7 100644 --- a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx @@ -1,5 +1,5 @@ --- -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. @@ -7,15 +7,384 @@ 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'; -# 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. + + + + + + Password + + + + + + + Must be at least 6 characters. + + + + + + At least 6 characters are required. + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + FormControl, + FormControlLabel, + FormControlLabelText, + FormControlHelper, + FormControlHelperText, + FormControlError, + FormControlErrorIcon, + FormControlErrorText, + Icon, + Input, + InputField, + AlertCircleIcon, + Box, + }, + argsType: { + size: { + control: 'select', + options: ['sm', 'md', 'lg'], + default: 'md', + }, + isDisabled: { + control: 'boolean', + default: false, + }, + isInvalid: { + control: 'boolean', + default: false, + }, + isReadOnly: { + control: 'boolean', + default: false, + }, + isRequired: { + control: 'boolean', + default: false, + }, + }, + }} + /> + + +
+ +## 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. + + + ```jsx + %%-- File: components-example/nativewind/FormControl/index.tsx --%% + ``` + + +### Step 3: Update the import paths to match your project setup. + +## API Reference + +To use this component in your project, include the following import statement in your file. + +```jsx +import { FormControl } from '@/components/ui/FormControl'; +``` + +```jsx +export default () => ( + + + + + + + + + + + + +); +``` + +### Component Props + +This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration. + +#### FormControl + +It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. + + + + + + + + Prop + + + Type + + + Default + + + Description + + + + + + + + isInvalid + + + + bool + + + false + + + {`When true, invalid state.`} + + + + + + isRequired + + + + bool + + + false + + + {`If true, astrick gets activated.`} + + + + + + isDisabled + + + + bool + + + false + + + {`Disabled state true.`} + + + + + + isReadOnly + + + + bool + + + false + + + {`To manually set read-only state.`} + + + + + + isDisabled + + + + bool + + + false + + + {`To manually set disable to the FormControl.`} + + + +
+ + + +#### 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). + + diff --git a/example/storybook-nativewind/src/components/FormControl/index.nw.storiesold.mdx b/example/storybook-nativewind/src/components/FormControl/index.nw.storiesold.mdx deleted file mode 100644 index 4f3dddb8ff..0000000000 --- a/example/storybook-nativewind/src/components/FormControl/index.nw.storiesold.mdx +++ /dev/null @@ -1,390 +0,0 @@ ---- -title: FormControl | gluestack-ui | 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: true ---- - -import { Meta } from '@storybook/addon-docs'; - - - -import { - Icon, - AlertCircleIcon, - CircleIcon, - CheckIcon, -} from '@gluestack-ui/themed'; -import { - FormControl, - FormControlLabel, - FormControlLabelText, - FormControlHelper, - FormControlHelperText, - FormControlError, - FormControlErrorIcon, - FormControlErrorText, - Input, - InputField, -} 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. - - - - - - Password - - - - - - - Must be at least 6 characters. - - - - - - At least 6 characters are required. - - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Wrapper, - FormControl, - FormControlLabel, - FormControlLabelText, - FormControlHelper, - FormControlHelperText, - FormControlError, - FormControlErrorIcon, - FormControlErrorText, - Icon, - Input, - InputField, - AlertCircleIcon, - Box, - }, - argsType: { - size: { - control: 'select', - options: ['sm', 'md', 'lg'], - default: 'md', - }, - isDisabled: { - control: 'boolean', - default: false, - }, - isInvalid: { - control: 'boolean', - default: false, - }, - isReadOnly: { - control: 'boolean', - default: false, - }, - isRequired: { - control: 'boolean', - default: false, - }, - }, - }} - /> - - -
- -## 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. - - - ```jsx - %%-- File: components-example/nativewind/FormControl/index.tsx --%% - ``` - - -### Step 3: Update the import paths to match your project setup. - -## API Reference - -To use this component in your project, include the following import statement in your file. - -```bash -import { FormControl } from '@/components/ui/FormControl'; -``` - -```jsx -export default () => ( - - - - - - - - - - - - -); -``` - -### Component Props - -This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration. - -#### FormControl - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - - - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - isInvalid - - - - bool - - - false - - - {`When true, invalid state.`} - - - - - - isRequired - - - - bool - - - false - - - {`If true, astrick gets activated.`} - - - - - - isDisabled - - - - bool - - - false - - - {`Disabled state true.`} - - - - - - isReadOnly - - - - bool - - - false - - - {`To manually set read-only state.`} - - - - - - isDisabled - - - - bool - - - false - - - {`To manually set disable to the FormControl.`} - - - -
- - - -#### 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). - - diff --git a/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx b/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx index 1f9e447922..343460624f 100644 --- a/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx @@ -1,5 +1,5 @@ --- -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. @@ -72,7 +72,7 @@ import { Icon, Button, ButtonText, -} from '../../components-example/themed'; +} from './FormControl'; import { AppProvider, CodePreview, @@ -192,7 +192,7 @@ npm i @gluestack-ui/form-control To use this component in your project, include the following import statement in your file. -```bash +```jsx import { FormControl } from '@/components/ui/FormControl'; ``` From 422a8d4a5fad00af7c6b055f737e78dc04da9e7a Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Fri, 23 Feb 2024 13:27:16 +0530 Subject: [PATCH 2/2] fix: icon color --- .../nativewind/FormControl/index.tsx | 11 ++++++++++- 1 file changed, 10 insertions(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/components-example/nativewind/FormControl/index.tsx b/example/storybook-nativewind/src/components-example/nativewind/FormControl/index.tsx index d26e9c39ac..6004fb7a0a 100644 --- a/example/storybook-nativewind/src/components-example/nativewind/FormControl/index.tsx +++ b/example/storybook-nativewind/src/components-example/nativewind/FormControl/index.tsx @@ -285,7 +285,16 @@ const FormControlErrorIcon = ({ }: { className?: string } & IFormControlErrorIconProps) => { const { size: parentSize } = useStyleContext(); if (AsComp) { - return ; + return ( + + ); } return (