feat: FormField component (#372)

utilitywarehouse · Oct 29, 2024 · 19cb88e · 19cb88e
1 parent 174e854
commit 19cb88e
Show file tree

Hide file tree

Showing 71 changed files with 1,706 additions and 257 deletions.
diff --git a/.changeset/gold-peas-battle.md b/.changeset/gold-peas-battle.md
@@ -0,0 +1,5 @@
+---
+'@utilitywarehouse/native-ui': minor
+---
+
+Adds `Helper` and `Label` components
diff --git a/.changeset/nine-bugs-hide.md b/.changeset/nine-bugs-hide.md
@@ -0,0 +1,5 @@
+---
+'@utilitywarehouse/native-ui': minor
+---
+
+Adds `FormField` component
diff --git a/.changeset/quiet-moose-live.md b/.changeset/quiet-moose-live.md
@@ -0,0 +1,5 @@
+---
+'@utilitywarehouse/native-ui': minor
+---
+
+Adds `Helper` and validation helpers to `Checkbox` and `Radio` components and groups
diff --git a/.changeset/sixty-pens-tan.md b/.changeset/sixty-pens-tan.md
@@ -0,0 +1,5 @@
+---
+'@utilitywarehouse/native-ui': patch
+---
+
+Fixes `Checbox` and `Radio` label font weight
diff --git a/.github/workflows/previews.yml b/.github/workflows/previews.yml
@@ -200,7 +200,7 @@ jobs:
         uses: expo/expo-github-action@v8
         if: steps.check_skip.outputs.skip == 'false'
         with:
-          eas-version: '9.2.0'
+          eas-version: latest
           token: ${{ secrets.EXPO_TOKEN }}
 
       - name: 📦 Install dependencies

diff --git a/apps/native-ui-storybook/.storybook/preview.tsx b/apps/native-ui-storybook/.storybook/preview.tsx
@@ -153,6 +153,7 @@ const preview: Preview = {
               'Button',
               'Center',
               'Checkbox',
+              'Form Field',
               'Heading',
               'HStack',
               'Icons',

diff --git a/apps/native-ui-storybook/components/Checkbox/Checkbox.docs.mdx b/apps/native-ui-storybook/components/Checkbox/Checkbox.docs.mdx
@@ -8,6 +8,7 @@ import {
   Center,
   Box,
   Text,
+  FormField,
   NativeUIProvider,
 } from '@utilitywarehouse/native-ui';
 import { TickSmallIcon } from '@utilitywarehouse/react-native-icons';
@@ -27,11 +28,11 @@ Whether you're building a simple form or a complex data collection system, the C
 - [Usage](#usage)
 - [Props](#props)
 - [Components](#components)
-  - [Checkbox](#checkbox)
-  - [CheckboxIndicator](#checkboxindicator)
-  - [CheckboxIcon](#checkboxicon)
-  - [CheckboxLabel](#checkboxlabel)
-  - [CheckboxGroup](#checkboxgroup)
+  - [`Checkbox`](#checkbox)
+  - [`CheckboxIndicator`](#checkboxindicator)
+  - [`CheckboxIcon`](#checkboxicon)
+  - [`CheckboxLabel`](#checkboxlabel)
+  - [`CheckboxGroup`](#checkboxgroup)
 - [Variants](#variants)
 - [Advanced Usage](#advanced-usage)
 
@@ -74,13 +75,20 @@ const MyComponent = () => {
 
 ## Props
 
-| Property         | Type                       | Default | Description                                                                                                          |
-| ---------------- | -------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------- |
-| `value`          | `string`                   | -       | The value to be used in the checkbox input. This is the value that will be returned on form submission.              |
-| `onChange`       | `(value: boolean) => void` | -       | Function called when the state of the checkbox changes.                                                              |
-| `defaultchecked` | `bool`                     | `false` | If true, the checkbox will be initially checked.                                                                     |
-| `checked`        | `bool`                     | `false` | When true, the checkbox will be checked. You'll need to pass onChange update it's value (since it's now controlled). |
-| `disabled`       | `bool`                     | `false` | To manually set disable to the checkbox.                                                                             |
+| Property             | Type                                | Default | Description                                                                                                          |
+| -------------------- | ----------------------------------- | ------- | -------------------------------------------------------------------------------------------------------------------- |
+| `value`              | `string`                            | -       | The value to be used in the checkbox input. This is the value that will be returned on form submission.              |
+| `onChange`           | `(value: boolean) => void`          | -       | Function called when the state of the checkbox changes.                                                              |
+| `defaultchecked`     | `bool`                              | `false` | If true, the checkbox will be initially checked.                                                                     |
+| `checked`            | `bool`                              | `false` | When true, the checkbox will be checked. You'll need to pass onChange update it's value (since it's now controlled). |
+| `validationStatus`   | `'valid' \| 'invalid' \| 'initial'` | -       | The validation status of the checkbox.                                                                               |
+| `disabled`           | `bool`                              | `false` | To manually set disable to the checkbox.                                                                             |
+| `label`              | `string`                            | -       | The label to be displayed next to the checkbox.                                                                      |
+| `helperText`         | `string`                            | -       | The helper text to be displayed below the checkbox.                                                                  |
+| `helperIcon`         | `React.ComponentType`               | -       | The icon to be displayed next to the helper text.                                                                    |
+| `invalidText`        | `string`                            | -       | The invalid text to be displayed below the checkbox.                                                                 |
+| `validText`          | `string`                            | -       | The valid text to be displayed below the checkbox.                                                                   |
+| `showValidationIcon` | `boolean`                           | `true`  | Whether to show the validation icon.                                                                                 |
 
 ## Components
 
@@ -197,13 +205,12 @@ const MyComponent = () => {
 };
 ```
 
-| Property    | Type                              | Default | Description                                                            |
-| ----------- | --------------------------------- | ------- | ---------------------------------------------------------------------- |
-| `value`     | `string[]`                        | -       | The value of the checkbox group.                                       |
-| `onChange`  | `(values: Array<string>) => void` | -       | The callback fired when any children Checkbox is checked or unchecked. |
-| `disabled`  | `bool`                            | `false` | To manually set disable to the checkbox.                               |
-| `isInvalid` | `bool`                            | `false` | To manually set invalid to the checkbox.                               |
-| `readonly`  | `bool`                            | `false` | To manually set read-only to the checkbox.                             |
+| Property           | Type                                | Default | Description                                                            |
+| ------------------ | ----------------------------------- | ------- | ---------------------------------------------------------------------- |
+| `value`            | `string[]`                          | -       | The value of the checkbox group.                                       |
+| `onChange`         | `(values: Array<string>) => void`   | -       | The callback fired when any children Checkbox is checked or unchecked. |
+| `disabled`         | `bool`                              | `false` | To manually set disable to the checkbox.                               |
+| `validationStatus` | `'valid' \| 'invalid' \| 'initial'` | -       | The validation status of the checkbox group.                           |
 
 ## Variants
 
@@ -216,8 +223,7 @@ You can create a custom checkbox by using the `CheckboxIndicator`, `CheckboxIcon
 <Canvas>
   <NativeUIProvider>
     <Center>
-    <Box gap="$2">
-      <Text>Which fruit do you enjoy?</Text>
+    <FormField label="Which fruit do you enjoy?">
       <CheckboxGroup>
         <Checkbox
           value="Apple"
@@ -252,7 +258,7 @@ You can create a custom checkbox by using the `CheckboxIndicator`, `CheckboxIcon
           label='Grapes'
           />
       </CheckboxGroup>
-      </Box>
+      </FormField>
     </Center>
 
   </NativeUIProvider>
@@ -264,15 +270,14 @@ import {
   Checkbox,
   CheckboxIndicator,
   CheckboxLabel,
+  FormField,
   Text,
 } from '@utilitywarehouse/native-ui';
-import { Box } from '@utilitywarehouse/native-ui/lab';
 
 const MyComponent = () => {
   const [values, setValues] = React.useState([]);
   return (
-    <Box gap="$2">
-      <Text>Which fruit do you enjoy?</Text>
+    <FormField label="Which fruit do you enjoy?">
       <CheckboxGroup
         aria-label="Checkbox Group"
         value={values}
@@ -304,7 +309,7 @@ const MyComponent = () => {
           <CheckboxLabel>Grapes</CheckboxLabel>
         </Checkbox>
       </CheckboxGroup>
-    </Box>
+    </FormField>
   );
 };
 ```
diff --git a/apps/native-ui-storybook/components/Checkbox/Checkbox.tsx b/apps/native-ui-storybook/components/Checkbox/Checkbox.tsx
@@ -7,7 +7,12 @@ const CheckboxBasic: StoryFn<{
   checked: boolean;
   disabled: boolean;
   label: string;
-}> = ({ disabled, label: label }) => {
+  validationStatus: 'initial' | 'valid' | 'invalid';
+  showValidationIcon: boolean;
+  invalidText: string;
+  validText: string;
+  helperText: string;
+}> = ({ disabled, label: label, checked: _checked, ...props }) => {
   const [args, updateArgs] = useArgs();
 
   return (
@@ -21,6 +26,7 @@ const CheckboxBasic: StoryFn<{
       checked={args.checked as boolean}
       disabled={disabled}
       label={label}
+      {...props}
     />
   );
 };
@@ -41,12 +47,39 @@ CheckboxBasic.argTypes = {
     control: 'text',
     description: 'The label component for the checkbox.',
   },
+  helperText: {
+    type: 'string',
+    control: 'text',
+    description: 'The helper text of the checkbox component',
+    defaultValue: 'Helper text',
+  },
+  validationStatus: {
+    control: 'select',
+    options: ['initial', 'valid', 'invalid'],
+    description: 'The validation status of the checkbox component',
+    defaultValue: 'initial',
+  },
+  showValidationIcon: {
+    control: 'boolean',
+    description: 'Show the validation icon.',
+    defaultValue: true,
+  },
+  invalidText: {
+    control: 'text',
+    description: 'The invalid text of the checkbox component',
+    defaultValue: 'Invalid text',
+  },
 };
 
 CheckboxBasic.args = {
   checked: false,
   disabled: false,
   label: '',
+  helperText: '',
+  validationStatus: 'initial',
+  showValidationIcon: true,
+  invalidText: 'Invalid text',
+  validText: 'Valid text',
 };
 
 export default CheckboxBasic;