Merge pull request #2504 from gluestack/release/alert-dialog-useRNModal

Release/alert dialog useRNModal
gluestack · Oct 4, 2024 · 5a08c01 · 5a08c01
2 parents ee316b8 + fff51d1
commit 5a08c01
Show file tree

Hide file tree

Showing 61 changed files with 553 additions and 885 deletions.
diff --git a/example/storybook-nativewind/package.json b/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.53",
+    "@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",

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
@@ -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,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}
+            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>
   );
 };