Merge pull request #1860 from gluestack/feat/new-examples-with-gluestack

Viraj-10 · web-flow · commit 35a5238de4b0 · 2024-02-29T22:03:28.000+05:30
feat: added examples for themed components
diff --git a/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx
@@ -14,18 +14,24 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Forms/Input" />
 
-import { Input, InputField, InputIcon, InputSlot } from './Input';
 import {
+  Input,
+  InputField,
+  InputIcon,
+  InputSlot,
   Button,
   ButtonText,
   VStack,
   Text as GSText,
   Center,
   Box,
   FormControl,
-} from '@gluestack-ui/themed';
-import { Heading, useState } from '@gluestack-ui/themed';
-import { Icon, SearchIcon, EyeIcon, EyeOffIcon } from '@gluestack-ui/themed';
+  Heading,
+  Icon,
+  SearchIcon,
+  EyeIcon,
+  EyeOffIcon,
+} from '../../components-example/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -104,9 +110,7 @@ npm i @gluestack-ui/input
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
-  %%-- File: components-example/themed/Input/index.tsx --%% 
-  ```
+  ```jsx %%-- File: components-example/themed/Input/index.tsx --%% ```
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -484,3 +488,137 @@ Explore the comprehensive details of the Input in this document, including its i
   src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D213%253A12091%26type%3Ddesign%26node-id%3D213-12092%26viewport%3D256%252C289%252C0.03%26t%3DYlY4Jjtl91JuXCZS-1%26scaling%3Dscale-down%26starting-point-node-id%3D213%253A12092%26mode%3Ddesign"
   allowFullScreen
 ></iframe>
+
+### Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
+#### Input type password with FormControl
+
+The Input component integrates with an icon and a button, providing users with a comprehensive login window inside a FormControl component.
+
+<AppProvider>
+  <CodePreview
+    _rendererWrapper={{ py: '$8' }}
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        function App() {
+          const [showPassword, setShowPassword] = React.useState(false);
+          const handleState = () => {
+            setShowPassword((showState) => {
+              return !showState;
+            });
+          };
+          return (
+            <FormControl
+              p='$4'
+              borderWidth='$1'
+              borderRadius='$lg'
+              borderColor='$borderLight300'
+              $dark-borderWidth='$1' $dark-borderRadius='$lg' $dark-borderColor='$borderDark800'
+            >
+              <VStack space='xl'>
+                <Heading color='$text900' lineHeight='$md'>
+                  Login
+                </Heading>
+                <VStack space='xs'>
+                  <Text color='$text500' lineHeight='$xs'>
+                    Email
+                  </Text>
+                  <Input>
+                    <InputField
+                      type="text"
+                    />
+                  </Input>
+                </VStack>
+                <VStack space='xs'>
+                  <Text color='$text500' lineHeight='$xs'>
+                    Password
+                  </Text>
+                  <Input textAlign='center'>
+                    <InputField
+                      type={showPassword ? 'text' : 'password'}
+                    />
+                    <InputSlot pr='$3' onPress={handleState}>
+                      {/* EyeIcon, EyeOffIcon are both imported from 'lucide-react-native' */}
+                      <InputIcon as={showPassword ? EyeIcon : EyeOffIcon}  color='$darkBlue500'/>
+                    </InputSlot>
+                  </Input>
+                </VStack>
+                <Button
+                  ml='auto'
+                  onPress={()=>{
+                    setShowModal(false);
+                  }}
+                >
+                  <ButtonText color='$white'>
+                    Save
+                  </ButtonText>
+                </Button>
+              </VStack>
+            </FormControl>
+          );
+        }
+      `,
+      transformCode: (code) => {
+        return transformedCode(code, 'function', 'App');
+      },
+      scope: {
+        Wrapper,
+        Input,
+        InputField,
+        InputIcon,
+        Button,
+        ButtonText,
+        VStack,
+        Text: GSText,
+        Heading,
+        Icon,
+        EyeIcon,
+        EyeOffIcon,
+        FormControl,
+        InputSlot,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+### Input with Icons
+
+The Input with Icons is a variation of the Input component that displays icons next to input field. It's commonly used in apps for a more visual representation of options and easier navigation.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <Input>
+          <InputSlot pl='$3'>
+            <InputIcon as={SearchIcon}/>
+          </InputSlot>
+          <InputField
+            placeholder="Search..."
+          />
+        </Input>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Input,
+        InputField,
+        InputIcon,
+        SearchIcon,
+        Icon,
+        InputSlot,
+      },
+      argsType: {},
+    }}
+/>
+
+</AppProvider>
diff --git a/example/storybook-nativewind/src/components/Link/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Link/index.themed.stories.mdx
@@ -14,18 +14,22 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Forms/Link" />
 
-import { Link } from './Link';
-import { LinkText } from '../../components-example/themed/Link';
-import { ArrowUpRightIcon, Icon, HStack, Text } from '@gluestack-ui/themed';
-import { transformedCode } from '../../utils';
+import {
+  Link,
+  LinkText,
+  ArrowUpRightIcon,
+  Icon,
+  HStack,
+  Text,
+} from '../../components-example/themed';
 import {
   AppProvider,
   CodePreview,
   Table,
   TableContainer,
   InlineCode,
 } from '@gluestack/design-system';
-
+import { transformedCode } from '../../utils';
 import Wrapper from '../../components-example/themed/Wrapper';
 import { CollapsibleCode } from '@gluestack/design-system';
 
@@ -368,3 +372,61 @@ props: {
 
 export default () => <StyledLink />;
 ``` -->
+
+### Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
+#### Default
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+          <HStack>
+            <Text
+              size="lg"
+            >Design inspiration from </Text>
+              <Link href="https://gluestack.io/" isExternal>
+                <LinkText size="lg">pinterest.com</LinkText>
+              </Link>
+          </HStack>
+`,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: { Link, LinkText, Wrapper, ArrowUpRightIcon, Icon, HStack, Text },
+      argsType: {},
+    }}
+  />
+</AppProvider>
+
+#### Link with icon
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <HStack>
+              <Text
+               size="lg">Go to </Text>
+              <Link href="https://gluestack.io/" isExternal>
+                <HStack alignItems="center">
+                <LinkText size="lg">Pinterest</LinkText>
+                <Icon as={ArrowUpRightIcon} size="lg" color="$info600" mt="$0.5" $dark-color="$info300"/>
+                </HStack>
+              </Link>
+         </HStack>
+`,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: { Link, LinkText, Wrapper, ArrowUpRightIcon, Icon, HStack, Text },
+      argsType: {},
+    }}
+  />
+</AppProvider>
diff --git a/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx
@@ -14,15 +14,16 @@ import { Meta } from '@storybook/addon-docs';
 
 <Meta title="with-gluestack-style/components/Forms/Textarea" />
 
-import { Textarea, TextareaInput } from './Textarea';
 import {
   FormControl,
   FormControlError,
   FormControlLabel,
   FormControlLabelText,
   FormControlHelper,
   FormControlHelperText,
-} from '@gluestack-ui/themed';
+  Textarea,
+  TextareaInput,
+} from '../../components-example/themed';
 import { transformedCode } from '../../utils';
 import {
   AppProvider,
@@ -367,3 +368,52 @@ Explore the comprehensive details of the Input in this document, including its i
   src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Fproto%2FNcXOxqKbdnGsLQNex3H76u%2F%25C2%25A0%25F0%259F%2593%259Agluestack-UI-handbook%3Fpage-id%3D5262%253A23948%26type%3Ddesign%26node-id%3D5262-25827%26viewport%3D713%252C121%252C0.03%26t%3DKYZLJTBIKhIjLoLC-1%26scaling%3Dscale-down%26starting-point-node-id%3D5262%253A25827%26mode%3Ddesign"
   allowfullscreen
 ></iframe>
+
+### Examples
+
+The Examples section provides visual representations of the different variants of the component, allowing you to quickly and easily determine which one best fits your needs. Simply copy the code and integrate it into your project.
+
+#### FormControl
+
+The Textarea Component can be incorporated within the FormControl.
+
+<AppProvider>
+  <CodePreview
+    showComponentRenderer={true}
+    showArgsController={false}
+    metaData={{
+      code: `
+        <FormControl>
+          <FormControlLabel>
+            <FormControlLabelText>
+              Write with me
+            </FormControlLabelText>
+          </FormControlLabel>
+          <Textarea>
+            <TextareaInput placeholder='Once upon a time...'/>
+          </Textarea>
+          <FormControlHelper>
+            <FormControlHelperText>
+              Start your story
+            </FormControlHelperText>
+          </FormControlHelper>
+        </FormControl>
+      `,
+      transformCode: (code) => {
+        return transformedCode(code);
+      },
+      scope: {
+        Wrapper,
+        Textarea,
+        TextareaInput,
+        FormControl,
+        FormControlError,
+        FormControlLabel,
+        FormControlLabelText,
+        FormControlHelper,
+        FormControlHelperText,
+      },
+      argsType: {},
+    }}
+  />
+</AppProvider>
