feat: doc updates

README.md

@@ -64,4 +64,4 @@ We welcome contributions to the `gluestack-ui`. If you have an idea for a new co
 
 ## License
 
-Licensed under the MIT License, Copyright © 2023 GeekyAnts. See [LICENSE](https://github.com/gluestack/gluestack-ui/blob/main/LICENSE) for more information.
+Licensed under the MIT License, Copyright © 2024 GeekyAnts. See [LICENSE](https://github.com/gluestack/gluestack-ui/blob/main/LICENSE) for more information.

example/storybook-nativewind/package.json

@@ -32,7 +32,7 @@
     "@gluestack-style/animation-resolver": "^1.0.4",
     "@gluestack-style/react": "^1.0.57",
     "@gluestack-ui/config": "^1.1.19",
-    "@gluestack-ui/themed": "^1.1.51",
+    "@gluestack-ui/themed": "^1.1.54",
     "@gluestack/design-system": "^0.5.36",
     "@gorhom/bottom-sheet": "^5.0.0-alpha.10",
     "@legendapp/motion": "^2.2.0",

example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx

@@ -435,6 +435,24 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
             </Table.TText>
           </Table.TD>
         </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>preventScroll</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>boolean</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>true</Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>
+              {`If true, scroll will be prevented when the Actionsheet is open.`}
+            </Table.TText>
+          </Table.TD>
+        </Table.TR>
       </Table.TBody>
     </Table>
   </TableContainer>

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',
         },
       },
     }}

example/storybook-nativewind/src/components/FormControl/FormControl.stories.tsx

@@ -28,8 +28,8 @@ const FormControlMeta: ComponentMeta<typeof FormControl> = {
     },
   },
   args: {
-    isInvalid: true,
-    isRequired: true,
+    isInvalid: false,
+    isRequired: false,
     isDisabled: false,
     size: 'md',
   },

example/storybook-nativewind/src/components/FormControl/FormControl.tsx

@@ -9,36 +9,60 @@ 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 = ({ isInvalid: propsIsInvalid, ...props }: any) => {
+  const [isInvalid, setIsInvalid] = React.useState(propsIsInvalid);
+  const [inputValue, setInputValue] = React.useState('12345');
+
+  const handleSubmit = () => {
+    if (inputValue.length < 6) {
+      setIsInvalid(true);
+    } else {
+      setIsInvalid(false);
+    }
+  };
+
+  React.useEffect(() => {
+    setIsInvalid(propsIsInvalid);
+  }, [propsIsInvalid]);
 
-const FormControlBasic = ({ ...props }: any) => {
   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}
+            onChangeText={(text) => setInputValue(text)}
+          />
+        </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>
   );
 };