fix: demos for all components page

gluestack · Sep 24, 2024 · da7e444 · da7e444
1 parent c19efce
commit da7e444
Show file tree

Hide file tree

Showing 32 changed files with 270 additions and 294 deletions.
diff --git a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx
@@ -92,7 +92,7 @@ This is an illustration of **Badge** component.
         action: {
           control: 'select',
           options: ['error', 'warning', 'success', 'info', 'muted'],
-          default: 'success',
+          default: 'muted',
         },
       },
     }}

diff --git a/example/storybook-nativewind/src/components/FormControl/FormControl.stories.tsx b/example/storybook-nativewind/src/components/FormControl/FormControl.stories.tsx
@@ -10,10 +10,10 @@ const FormControlMeta: ComponentMeta<typeof FormControl> = {
     componentDescription: `By using FormControl, developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required.`,
   },
   argTypes: {
-    isInvalid: {
-      control: 'boolean',
-      options: [true, false],
-    },
+    // isInvalid: {
+    //   control: 'boolean',
+    //   options: [true, false],
+    // },
     size: {
       control: 'select',
       options: ['sm', 'md', 'lg', 'xl'],
@@ -28,8 +28,8 @@ const FormControlMeta: ComponentMeta<typeof FormControl> = {
     },
   },
   args: {
-    isInvalid: true,
-    isRequired: true,
+    // isInvalid: false,
+    isRequired: false,
     isDisabled: false,
     size: 'md',
   },

diff --git a/example/storybook-nativewind/src/components/FormControl/FormControl.tsx b/example/storybook-nativewind/src/components/FormControl/FormControl.tsx
@@ -9,36 +9,56 @@ import {
   FormControlErrorIcon,
   FormControlErrorText,
 } from '@/components/ui/form-control';
-import { AlertCircleIcon } from 'lucide-react-native';
+import { AlertCircleIcon } from '@/components/ui/icon';
 import { Input, InputField } from '@/components/ui/input';
+import { Button, ButtonText } from '@/components/ui/button';
+import { VStack } from '@/components/ui/vstack';
 
 const FormControlBasic = ({ ...props }: any) => {
+  const [isInvalid, setIsInvalid] = React.useState(false);
+  const [inputValue, setInputValue] = React.useState('12345');
+
+  const handleSubmit = () => {
+    if (inputValue.length < 6) {
+      setIsInvalid(true);
+    } else {
+      setIsInvalid(false);
+    }
+  };
+
   return (
-    <FormControl {...props}>
-      <FormControlLabel>
-        <FormControlLabelText>Password</FormControlLabelText>
-      </FormControlLabel>
-      <Input>
-        <InputField
-          type="password"
-          defaultValue="12345"
-          placeholder="password"
-        />
-      </Input>
-
-      <FormControlHelper>
-        <FormControlHelperText>
-          Must be atleast 6 characters.
-        </FormControlHelperText>
-      </FormControlHelper>
-
-      <FormControlError>
-        <FormControlErrorIcon as={AlertCircleIcon} />
-        <FormControlErrorText>
-          Atleast 6 characters are required.
-        </FormControlErrorText>
-      </FormControlError>
-    </FormControl>
+    <VStack className="w-full max-w-[300px] rounded-md border border-background-200 p-4">
+      <FormControl isInvalid={isInvalid} {...props}>
+        <FormControlLabel>
+          <FormControlLabelText>Password</FormControlLabelText>
+        </FormControlLabel>
+        <Input className="my-1" size={props.size}>
+          <InputField
+            type="password"
+            placeholder="password"
+            value={inputValue}
+            onChange={(e) => setInputValue(e.target.value)}
+          />
+        </Input>
+
+        <FormControlHelper>
+          <FormControlHelperText>
+            Must be atleast 6 characters.
+          </FormControlHelperText>
+        </FormControlHelper>
+
+        <FormControlError>
+          <FormControlErrorIcon as={AlertCircleIcon} />
+          <FormControlErrorText>
+            Atleast 6 characters are required.
+          </FormControlErrorText>
+        </FormControlError>
+      </FormControl>
+
+      <Button className="w-fit self-end mt-4" size="sm" onPress={handleSubmit}>
+        <ButtonText>Submit</ButtonText>
+      </Button>
+    </VStack>
   );
 };