Skip to content

Commit

Permalink
Merge pull request #1860 from gluestack/feat/new-examples-with-gluestack
Browse files Browse the repository at this point in the history 
feat: added examples for themed components
  • Loading branch information
@Viraj-10
Viraj-10 authored Feb 29, 2024
2 parents a65c6b8 + b361824 commit 35a5238
Show file tree
Hide file tree
Showing 3 changed files with 264 additions and 14 deletions.
152 changes: 145 additions & 7 deletions example/storybook-nativewind/src/components/Input/index.themed.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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.
Expand Down Expand Up @@ -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>
72 changes: 67 additions & 5 deletions example/storybook-nativewind/src/components/Link/index.themed.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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>
54 changes: 52 additions & 2 deletions example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>

0 comments on commit 35a5238

Please sign in to comment.