From 0d4003bddfcad51db0bd069e952f7b4e5062dbc9 Mon Sep 17 00:00:00 2001 From: sra1kumar-NULL Date: Wed, 21 Feb 2024 19:03:19 +0530 Subject: [PATCH] feat: added examples for components --- .../Accordion/index.themed.stories.mdx | 816 +++++++++++++++++- .../components/Badge/index.themed.stories.mdx | 227 ++++- .../Divider/index.themed.stories.mdx | 304 ++++++- .../FormControl/index.themed.stories.mdx | 721 +++++++++++++++- .../Heading/index.themed.stories.mdx | 181 +++- .../Popover/index.themed.stories.mdx | 173 +++- .../components/Radio/index.themed.stories.mdx | 485 ++++++++++- .../Switch/index.themed.stories.mdx | 135 ++- .../components/Text/index.themed.stories.mdx | 178 +++- .../VStack/index.themed.stories.mdx | 36 +- 10 files changed, 3189 insertions(+), 67 deletions(-) diff --git a/example/storybook-nativewind/src/components/Accordion/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Accordion/index.themed.stories.mdx index 50f385b7ad..3ee4f657f9 100644 --- a/example/storybook-nativewind/src/components/Accordion/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Accordion/index.themed.stories.mdx @@ -1,4 +1,5 @@ --- + title: Accordion | gluestack-ui | Installation, Usage, and API description: The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space. @@ -9,13 +10,820 @@ pageDescription: The Accordion component is a versatile and interactive user int showHeader: false -tag: coming soon ---- - import { Meta } from '@storybook/addon-docs'; +import { + Divider, + Accordion, + AccordionItem, + AccordionHeader, + AccordionTrigger, + AccordionTitleText, + AccordionIcon, + AccordionContent, + AccordionContentText, + ChevronDownIcon, + ChevronUpIcon, + PlusIcon, + MinusIcon, +} from '../../components-example/themed'; +import { + AppProvider, + CodePreview, + Table, + TableContainer, + InlineCode, + AddIcon, + InfoIcon, + Alert, +} from '@gluestack/design-system'; +import { transformedCode } from '../../utils'; +import { config } from '../../components-example/themed/GluestackUIProvider/config'; +import Wrapper from '../../components-example/themed/Wrapper'; + # Accordion -Coming Soon! \ No newline at end of file +## 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. + +### Customized Component + +The following example demonstrates how easily you can customize the Accordion component to suit your needs. + + + + + + + {({ isExpanded }) => { + return ( + <> + + What does the "type" prop of the Accordion component do? + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + The type prop determines whether one or multiple items can be + opened at the same time. The default value is "single" which means + only one item can be opened at a time. + + + + + + + {({ isExpanded }) => { + return ( + <> + + Can I disable the whole accordion? + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + Yes, you can disable the whole accordion by setting the isDisabled + prop to true on the Accordion component. + + + + + + + {({ isExpanded }) => { + return ( + <> + + What is a controlled accordion? How can I make it controlled? + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + Controlled components refer to the components where the state and behaviors are controlled by the Parent component. You can make the accordion a controlled component by passing the value prop to the Accordion component and setting the onValueChange prop to update the value prop. Refer to the controlled accordion example in the docs. + + + + +); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Accordion, + AccordionItem, + AccordionHeader, + AccordionTrigger, + AccordionTitleText, + AccordionIcon, + AccordionContent, + AccordionContentText, + ChevronDownIcon, + ChevronUpIcon, + Wrapper, + }, + }} + /> + + +### Rounded corners + +The borderRadius prop can be used to create rounded corners for both the Accordion and AccordionItem components. + + + + + + + {({ isExpanded }) => { + return ( + <> + {isExpanded ? ( + + ) : ( + + )} + + How do I place an order? + + + ); + }} + + + + + To place an order, simply select the products you want, proceed to + checkout, provide shipping and payment information, and finalize + your purchase. + + + + + + + {({ isExpanded }) => { + return ( + <> + {isExpanded ? ( + + ) : ( + + )} + + What payment methods do you accept? + + + ); + }} + + + + + We accept all major credit cards, including Visa, Mastercard, and + American Express. We also support payments through PayPal. + + + + +); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Accordion, + AccordionItem, + AccordionHeader, + AccordionTrigger, + AccordionTitleText, + AccordionIcon, + AccordionContent, + AccordionContentText, + MinusIcon, + PlusIcon, + Wrapper, + }, + }} + /> + + +### Disabled item + +You can disable an item by setting the isDisabled prop to true. This will prevent the user from interacting with the item and its content. You can also disable the whole accordion by setting the isDisabled prop to true on the Accordion component. + + + + + + + {({ isExpanded }) => { + return ( + <> + + Disabled Item + + {isExpanded ? ( + + ) : ( + + )} + + + ); + }} + + + + + This is a Disabled Item. + + + + + + + + {({ isExpanded }) => { + return ( + <> + + Is this accordion accessible? + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + Yes, the accordion is accessible. It adheres to the WAI-ARIA design + pattern. You can read more about it in the accessibility section of + the docs. + + + + +); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Accordion, + AccordionItem, + AccordionHeader, + AccordionTrigger, + AccordionTitleText, + AccordionIcon, + AccordionContent, + AccordionContentText, + Divider, + MinusIcon, + PlusIcon, + Wrapper, + }, + }} + /> + + +### Default value + +Use the defaultValue prop to define the open item by default. + + + + + + + {({ isExpanded }) => { + return ( + <> + + What is the defaultValue prop of the Accordion component? + + {isExpanded ? ( + + ) : ( + + )} + + + ); + }} + + + + + The defaultValue prop of the Accordion component is used to define + the open item by default. It is used when the Accordion component is + uncontrolled. + + + + + + + + {({ isExpanded }) => { + return ( + <> + + How many size variants does the Accordion component have? + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + The Accordion component has three size variants - sm, md and lg. + + + + + + + + {({ isExpanded }) => { + return ( + <> + + Can I nest my accordions? + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + Yes, you can nest your accordions. Refer to the nested accordion example in the docs. + + + + +); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Accordion, + AccordionItem, + AccordionHeader, + AccordionTrigger, + AccordionTitleText, + AccordionIcon, + AccordionContent, + AccordionContentText, + Divider, + MinusIcon, + PlusIcon, + Wrapper, + }, + }} + /> + + +### Nested Components + +You can nest Accordion components to create a nested accordion. This is useful when you want to group related content together. In the following example, we have created a nested accordion to group the states of USA by region. + + + + + + + {({isExpanded}) => ( + <> + {isExpanded ? ( + + ) : ( + + )} + USA + + )} + + + + + + + + {({isExpanded}) => ( + <> + {isExpanded ? ( + + ) : ( + + )} + + California + + + )} + + + + + Capital city of California is Sacramento. California has a GDP + of 2.89 trillion dollars and follows Pacific Standard Time + zone. + + + + + + + + + {({isExpanded}) => ( + <> + {isExpanded ? ( + + ) : ( + + )} + Nevada + + )} + + + + + Nevada is located in a mountainous region that includes vast + semiarid grasslands and sandy alkali deserts. It is the most + arid state of the country. + + + + + + + +); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Accordion, + AccordionItem, + AccordionHeader, + AccordionTrigger, + AccordionTitleText, + AccordionIcon, + AccordionContent, + AccordionContentText, + Divider, + MinusIcon, + PlusIcon, + Wrapper, + }, + }} + /> + + +### Controlled Accordion + +A component is controlled when it's managed by its parent using props. +You can make the Accordion component controlled by passing the value prop to the Accordion and setting the onValueChange to update the value prop. In the following example, we have created a controlled accordion to display the expanded state of the accordion. + + + setSelectedValues(item)}> + + + + {({ isExpanded }) => { + return ( + <> + + Exploring Nature's Wonders + + {isExpanded ? ( + + ) : ( + + )} + + + ); + }} + + + + + Embark on a journey through the breathtaking landscapes and diverse ecosystems of our planet. From majestic mountains to serene oceans, discover the beauty that nature has to offer. + + + + + + + + {({ isExpanded }) => { + return ( + <> + + The Art of Culinary Delights + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + Indulge your senses in a culinary adventure. Uncover the secrets behind delectable dishes, learn about unique flavor profiles, and ignite your passion for cooking. + + + + + + + {({ isExpanded }) => { + return ( + <> + + Mastering the Creative Process + + {isExpanded ? ( + + ) : ( + + )} + + ); + }} + + + + + Immerse yourself in the world of creativity. Unleash your artistic potential, whether it's through writing, painting, or any other form of expression. + + + + +); +} +`, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Accordion, + AccordionItem, + AccordionHeader, + AccordionTrigger, + AccordionTitleText, + AccordionIcon, + AccordionContent, + AccordionContentText, + Divider, + MinusIcon, + PlusIcon, + PlusIcon, + Wrapper, + }, + }} + /> + diff --git a/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx index f964a81ccf..a159d1ed80 100644 --- a/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx @@ -15,34 +15,34 @@ import { Meta } from '@storybook/addon-docs'; import { - Badge, + Divider, + Image, + CheckIcon, + Heading, BadgeText, BadgeIcon, -} from '../../components-example/nativewind/Badge'; - -import { + GlobeIcon, Icon, Box, - BadgePlusIcon, PuzzleIcon, + Menu, + MenuIcon, + MenuItem, + MenuItemLabel, + BadgePlusIcon, SettingsIcon, AddIcon, PaintBucket, Avatar, AvatarImage, AvatarFallbackText, - GlobeIcon, -} from '@gluestack-ui/themed'; -import { Divider, Image, CheckIcon, Heading } from '@gluestack-ui/themed'; -import { VStack, HStack, Button, ButtonText, BadgeCheckIcon, -} from '@gluestack-ui/themed'; -import { Menu, MenuIcon, MenuItem, MenuItemLabel } from '@gluestack-ui/themed'; -import { transformedCode } from '../../utils'; + Badge, +} from '../../components-example/themed'; import { AppProvider, CodePreview, @@ -50,9 +50,10 @@ import { Table, TableContainer, InlineCode, + CollapsibleCode, } from '@gluestack/design-system'; +import { transformedCode } from '../../utils'; import Wrapper from '../../components-example/themed/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; This is an illustration of **Badge** component. @@ -305,3 +306,203 @@ export default () => ( ); ``` --> + +### 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. + +#### Badge with Avatar + +An example of the Badge component being used with the Avatar component to display badges alongside user avatars for enhanced visual representation or identification. + + + + + + SS + + + + + Ronald Richards + + Verified + + + + Nursing Assistant + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Avatar, + AvatarFallbackText, + AvatarImage, + Heading, + Text, + HStack, + VStack, + Badge, + BadgeText, + BadgeIcon, + GlobeIcon, + BadgeCheckIcon, + }, + argsType: {}, + }} + /> + + +#### Badge in Menu + +A Badge component used with a menu adds a visual indicator, such as a badge, to highlight specific items or provide additional information within the menu, enhancing user interaction and improving the visibility of important elements. + + + { + return ( + + ); + }} + bg='$white' + > + + + + + Community + + + + + + + + Plugins + + + + + + + + Theme + + + New + + + + + + + + Settings + + + + + + + + Add account + + + + +`, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Button, + ButtonText, + Menu, + MenuIcon, + MenuItem, + MenuItemLabel, + Text, + Box, + HStack, + Icon, + GlobeIcon, + PuzzleIcon, + PaintBucket, + SettingsIcon, + AddIcon, + Badge, + BadgeText, + BadgeIcon, + BadgePlusIcon, + }, + argsType: {}, + }} + /> + + +### Badge Composition + +An example of the Badge component being used with the Composition component, allowing for the display of badges within a composition of other UI elements. + + + + + + 2 + + + + +`, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Badge, + BadgeText, + BadgeIcon, + GlobeIcon, + Box, + Text, + HStack, + VStack, + Heading, + Button, + ButtonText, + }, + argsType: {}, + }} + /> + diff --git a/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx index 431310e679..39c91fe999 100644 --- a/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx @@ -14,26 +14,27 @@ import { Meta } from '@storybook/addon-docs'; -import { Divider } from './Divider'; import { Center, + Heading, + Box, + Divider, + VStack, + HStack, Text, Button, ButtonText, - VStack, - HStack, -} from '@gluestack-ui/themed'; -import { Box, Heading } from '@gluestack-ui/themed'; -import { transformedCode } from '../../utils'; +} from '../../components-example/themed'; import { AppProvider, CodePreview, Table, TableContainer, InlineCode, + CollapsibleCode, } from '@gluestack/design-system'; -import Wrapper from '../../components-example/nativewind/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; +import { transformedCode } from '../../utils'; +import Wrapper from '../../components-example/themed/Wrapper'; This is an illustration of **Divider** component. @@ -82,7 +83,7 @@ npm i @gluestack-ui/divider ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: components-example/themed/Divider/index.tsx --%% ``` + ```jsx %%-- File: ../../components-example/themed/Divider/index.tsx --%% ```` ### Step 3: Update the import paths to match your project setup. @@ -192,3 +193,288 @@ const Divider = createDivider({ export default () => ; ``` --> + +### 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. + +#### Variants + +A Divider component with different layouts offers versatile options for visually dividing content in various arrangements, such as horizontal or vertical orientations, enabling flexible and visually appealing designs for organizing and structuring elements within a user interface. + + + + + Simple + + Easy + + Beautiful + + + Firefox + + Chrome + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Divider, + VStack, + HStack, + Text, + }, + argsType: {}, + }} + /> + + +#### Orientation + +A Divider component with a specified divider orientation allows for clear visual separation of content, either horizontally or vertically, providing a structured and organized layout within a user interface. + + + + + + HEALTH + + + Benefits of Oranges + + + Oranges are a great source of vitamin C, which is essential for a healthy immune system. + + + + Wade Warrem + + + + 6th Oct, 2019 + + + + 5 mins read + + + + + + + TECHNOLOGY + + + How AI can benefit your business + + + AI can automate tasks and processes, allowing for increasing efficiency and productivity. + + + + Wade Warrem + + + + 6th Oct, 2019 + + + + 5 mins read + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Divider, + Box, + Text, + VStack, + Heading, + HStack, + }, + argsType: {}, + }} + /> + + +#### With & Without Inset + +A Divider component used with or without inset adds visual hierarchy and distinction by creating a dividing line either with or without indentation, providing options for organizing and structuring content within a user interface. + + + + + + + + + + + + + + + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + HStack, + Divider, + Button, + ButtonText, + VStack, + }, + argsType: {}, + }} + /> + + +#### Adding content within a Divider + +A Divider component with added content allows for the inclusion of additional text or elements alongside the dividing line, enhancing the visual and informational aspects of the divider while providing a seamless integration of content within a user interface. + + + + + Search Results + + + + + TECHNOLOGY + + + How AI can benefit your business + + + AI can automate tasks and processes, allowing for increasing efficiency and productivity. + + + + + 5 mins read + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + HStack, + Divider, + Box, + Heading, + Text, + }, + argsType: {}, + }} + /> + diff --git a/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx b/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx index c888d4a2c6..b3fa07620a 100644 --- a/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx @@ -1,4 +1,5 @@ --- + title: FormControl | gluestack-ui | Installation, Usage, and API description: By using FormControl, developers can provide important context to form elements. This context can include whether the element is invalid, disabled, or required. @@ -9,13 +10,725 @@ pageDescription: By using FormControl, developers can provide important context showHeader: false -tag: coming soon ---- - import { Meta } from '@storybook/addon-docs'; +import { + Icon, + FormControl, + FormControlLabel, + FormControlHelper, + FormControlError, + Input, + Box, + Center, + AlertCircleIcon, + CircleIcon, + CheckIcon, + ChevronDownIcon, + FormControlLabelText, + FormControlHelperText, + FormControlErrorIcon, + FormControlErrorText, + InputField, + Text as FormControlText, + Heading, + Button, + ButtonText, + Radio, + RadioGroup, + RadioIcon, + RadioIndicator, + RadioLabel, + Checkbox, + CheckboxGroup, + CheckboxIndicator, + CheckboxIcon, + CheckboxLabel, + Textarea, + TextareaInput, + Select, + SelectTrigger, + SelectInput, + SelectIcon, + SelectPortal, + SelectBackdrop, + SelectContent, + SelectDragIndicatorWrapper, + SelectDragIndicator, + SelectItem, + Switch, + Slider, + SliderTrack, + SliderFilledTrack, + SliderThumb, + Modal, + ModalBackdrop, + ModalContent, + ModalHeader, + ModalCloseButton, + ModalBody, + ModalFooter, + HStack, + VStack, +} from '../../components-example/themed'; +import { + AppProvider, + CodePreview, + Table, + TableContainer, + Text, + InlineCode, +} from '@gluestack/design-system'; +import { transformedCode } from '../../utils'; +import { useState } from 'react'; +import Wrapper from '../../components-example/themed/Wrapper'; + # FormControl -Coming Soon! \ No newline at end of file +### 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. + +#### Form Control with Input + +The Input Component can be incorporated within the FormControl. + + + + + + Name + + + + + + + + What would you like people to call you? + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + FormControl, + FormControlLabel, + FormControlLabelText, + FormControlHelper, + FormControlHelperText, + FormControlError, + FormControlErrorIcon, + FormControlErrorText, + Icon, + Input, + InputField, + AlertCircleIcon, + }, + argsType: {}, + }} + /> + + +#### Form Control with Radio + +The Radio Component can be incorporated within the FormControl. + + + + + + Favourite fruit + + + + + + + + + + + + Mango + + + + + + + + + + Apple + + + + + + + + + + Orange + + + + + + + Choose the fruit you like the most + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + FormControl, + FormControlLabel, + FormControlLabelText, + FormControlHelper, + FormControlHelperText, + FormControlError, + FormControlErrorIcon, + FormControlErrorText, + Icon, + Radio, + RadioGroup, + RadioIcon, + RadioIndicator, + RadioLabel, + AlertCircleIcon, + VStack, + CircleIcon, + Heading, + }, + argsType: {}, + }} + /> + + +#### Form Control with Checkbox + +The Checkbox Component can be incorporated within the FormControl. + + + + + + Sign up for newsletters + + + + + + + + + + + + Daily Bits + + + + + + + + + + Event Updates + + + + + + + + + + Sponsorship + + + + + + + Subscribe to newsletters for updates + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + FormControl, + FormControlLabel, + FormControlLabelText, + FormControlHelper, + FormControlHelperText, + FormControlError, + FormControlErrorIcon, + FormControlErrorText, + Icon, + Checkbox, + CheckboxGroup, + CheckboxIndicator, + CheckboxIcon, + CheckboxLabel, + AlertCircleIcon, + VStack, + CheckIcon, + Heading, + }, + argsType: {}, + }} + /> + + +#### Form Control with Textarea + +The Textarea Component can be incorporated within the FormControl. + + + + + + Comment + + + + + + Type your comment above + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + FormControl, + FormControlLabel, + FormControlLabelText, + FormControlHelper, + FormControlHelperText, + FormControlError, + FormControlErrorIcon, + FormControlErrorText, + Icon, + Textarea, + TextareaInput, + AlertCircleIcon, + }, + argsType: {}, + }} + /> + + +#### Form Control with Inline Form + +Inline forms can utilize FormControl for seamless integration and enhanced functionality. + + + + + + + + + + + + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + FormControl, + FormControlLabel, + FormControlLabelText, + FormControlHelper, + FormControlHelperText, + FormControlError, + FormControlErrorIcon, + FormControlErrorText, + Icon, + HStack, + ChevronDownIcon, + Input, + InputField, + Select, + SelectTrigger, + SelectInput, + SelectIcon, + SelectPortal, + SelectBackdrop, + SelectContent, + SelectDragIndicatorWrapper, + SelectDragIndicator, + SelectItem, + Button, + ButtonText, + }, + argsType: {}, + }} + /> + + +#### Form Control with Form in Modal + +Modal or other Overlay components can utilize FormControl for state management and error control. + + + + + { + setShowModal(false) + }} + bg='$white' + > + + + + + + Change Settings + + + Make modifications to the settings with ease. + + + + + + + Name + + + + + + + + + + Email + + + + + + + + + + Volume + + + + + + + + + + + + + + Dark Mode + + + + + + + + + + ); + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + useState, + Box, + Center, + FormControl, + FormControlLabel, + FormControlLabelText, + FormControlHelper, + FormControlHelperText, + FormControlError, + FormControlErrorIcon, + FormControlErrorText, + Input, + InputField, + Button, + ButtonText, + Slider, + SliderTrack, + SliderFilledTrack, + SliderThumb, + Switch, + Modal, + ModalBackdrop, + ModalContent, + ModalHeader, + ModalCloseButton, + ModalBody, + ModalFooter, + Text: FormControlText, + Heading, + VStack, + HStack, + }, + argsType: {}, + }} + /> + + +#### Form Control with Error + +Error messages can be displayed using FormControl. + + + + + + Which time slot works best for you? + + + + + + + + + + + + Monday + + + + + + + + + + Tuesday + + + + + + + + + + Wednesday + + + + + + + + Choose one time slot for the meeting + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + FormControl, + FormControlLabel, + FormControlLabelText, + FormControlHelper, + FormControlHelperText, + FormControlError, + FormControlErrorIcon, + FormControlErrorText, + Icon, + Radio, + RadioGroup, + RadioIcon, + RadioIndicator, + RadioLabel, + AlertCircleIcon, + VStack, + CircleIcon, + Heading, + }, + argsType: {}, + }} + /> + + +#### Form Control with Form Actions + +Form Action Buttons can also be utilized in conjunction with FormControl. + + + + + + + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + FormControl, + FormControlLabel, + FormControlLabelText, + FormControlHelper, + FormControlHelperText, + FormControlError, + FormControlErrorIcon, + FormControlErrorText, + HStack, + Button, + ButtonText, + }, + argsType: {}, + }} + /> + diff --git a/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx index 0fe4ea72e5..513d3f1f6d 100644 --- a/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx @@ -14,8 +14,7 @@ import { Meta } from '@storybook/addon-docs'; -import { Heading } from './Heading'; -import { Center } from '@gluestack-ui/themed'; +import { Heading, Center } from '../../components-example/themed'; import { transformedCode } from '../../utils'; import { AppProvider, @@ -24,10 +23,9 @@ import { TableContainer, Text, InlineCode, + CollapsibleCode, } from '@gluestack/design-system'; - import Wrapper from '../../components-example/themed/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; This is an illustration of **Heading** component. @@ -224,3 +222,178 @@ Heading component is created using H1 component from @expo/html-elements. It ext + +### 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. + +#### Heading Sizes + +Heading component offers a range of sizes, including `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, and `5xl`, allowing users to customize the size of the heading according to their design requirements. The size attribute determines which HTML tag (`h1` to `h6`) will be rendered. + +- For `5xl`, `4xl`, and `3xl`, it renders `h1`. +- For `2xl`, it renders `h2`. +- For `xl`, it renders `h3`. +- For `lg`, it renders `h4`. +- For `md`, it renders `h5`. +- Finally, for `sm` and `xs`, it renders `h6`. + + + + {sizes.map((size) => ( + {size} + ))} + + ); + }; + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { Wrapper, Center, Heading }, + argsType: {}, + }} + /> + + +The Heading component also accepts some shorthands for basic quick styling. + + + + + + + + Prop + + + Type + + + Default + + + Description + + + + + + + + bold + + + + boolean + + + false + + + {`Used to make the text bold.`} + + + + + + isTruncated + + + + boolean + + + false + + + {`If true, it will render an ellipsis when the text exceeds the width of the viewport or maxWidth set.`} + + + + + + italic + + + + boolean + + + false + + + {`Used to make the text italic.`} + + + + + + underline + + + + boolean + + + false + + + {`Used underline the text.`} + + + + + + strikeThrough + + + + boolean + + + false + + + {`A horizontal line through the center of the text.`} + + + + + + highlight + + + + boolean + + + false + + + {`Used to highlight the text with a yellow background.`} + + + +
+ + diff --git a/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx index fcb5a1fb7f..4b4b162684 100644 --- a/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx @@ -1,4 +1,5 @@ --- + title: Popover | gluestack-ui | Installation, Usage, and API description: Popovers often provide contextual information or quick access to related actions without requiring the user to navigate to a different page or view. @@ -9,13 +10,177 @@ pageDescription: Popovers often provide contextual information or quick access t showHeader: false -tag: coming soon ---- - import { Meta } from '@storybook/addon-docs'; +import { + Popover, + PopoverBackdrop, + PopoverContent, + PopoverHeader, + PopoverBody, + PopoverFooter, + PopoverCloseButton, + PopoverArrow, + Pressable, + Text as PopoverText, + Heading, + Icon, + HStack, + VStack, + Avatar, + AvatarFallbackText, + Button, + ButtonGroup, + ButtonText, + Box, + CloseIcon, + CircleIcon, + PhoneIcon, + Clock3Icon, + MailIcon, + Center, +} from '../../components-example/themed'; +import { + AppProvider, + CodePreview, + Table, + TableContainer, + Text, + InlineCode, +} from '@gluestack/design-system'; +import { transformedCode } from '../../utils'; +import Wrapper from '../../components-example/themed/Wrapper'; + # Popover -Coming Soon! +### 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. + +#### Popover on Avatar + +A popover component can enhance the avatar by providing additional information and context in a concise and visually appealing manner. + + + + {\/* PhoneIcon, Clock3Icon, MailIcon are imported from 'lucide-react-native' *\/} + { + return ( + + + + + Kevin James + + + + + + Kevin James + + + Hi Rachel, What’s up? + + + + ); + }} + > + + + + + + + Kevin James + + + + + Kevin James + + + + + Active + + + + + + + + + + + + (603) 555-0123 + + + + + + 5:21 PM local time + + + + + + kevinjames@sample.com + + + + + + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Box, + Heading, + Text: PopoverText, + Popover, + PopoverBackdrop, + PopoverContent, + PopoverHeader, + PopoverBody, + PopoverFooter, + PopoverCloseButton, + Pressable, + Button, + ButtonText, + HStack, + VStack, + CircleIcon, + PhoneIcon, + Clock3Icon, + MailIcon, + Avatar, + AvatarFallbackText, + Icon, + }, + argsType: {}, + }} + /> + diff --git a/example/storybook-nativewind/src/components/Radio/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Radio/index.themed.stories.mdx index f85bc8c8b6..099ec353f2 100644 --- a/example/storybook-nativewind/src/components/Radio/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Radio/index.themed.stories.mdx @@ -14,15 +14,6 @@ import { Meta } from '@storybook/addon-docs'; -import { - Radio, - RadioGroup, - RadioIcon, - RadioIndicator, - RadioLabel, -} from './Radio'; -import { HStack, Box, Heading, CircleIcon, Center } from '@gluestack-ui/themed'; -import { VStack, Text, FormControl } from '@gluestack-ui/themed'; import { useState, useRef } from 'react'; import { transformedCode } from '../../utils'; import { @@ -31,10 +22,24 @@ import { Table, TableContainer, InlineCode, + CollapsibleCode, } from '@gluestack/design-system'; - import Wrapper from '../../components-example/themed/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; +import { + Radio, + RadioGroup, + RadioIndicator, + RadioLabel, + RadioIcon, + HStack, + Box, + Heading, + CircleIcon, + Center, + VStack, + Text, + FormControl, +} from '../../components-example/themed'; This is an illustration of **Radio** component. @@ -97,9 +102,7 @@ npm i @gluestack-ui/radio ### Step 2: Copy and paste the following code into your project. - ```jsx -%%-- File: components-example/themed/Radio/index.tsx --%% -``` + ```jsx %%-- File: components-example/themed/Radio/index.tsx --%% ``` ### Step 3: Update the import paths to match your project setup. @@ -577,3 +580,457 @@ export default () => ( ); ``` --> + +### 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. + +#### Multiple Radio + +Radio buttons provide a mutually exclusive selection mechanism, allowing users to choose a single option from a set of related choices. + + + + + + + + + English + + + + + + French + + + + + + German + + + + ) + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + Center, + VStack, + Radio, + RadioGroup, + RadioIcon, + RadioIndicator, + RadioLabel, + CircleIcon, + }, + argsType: {}, + }} + /> + + +#### Horizontal + +Radio buttons can be used horizontally. + + + + + + + + + Credit Card + + + + + + Cash On Delivery + + + + ) + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + Center, + HStack, + Radio, + RadioGroup, + RadioIcon, + RadioIndicator, + RadioLabel, + CircleIcon, + }, + argsType: {}, + }} + /> + + +#### With help text + +Radio buttons can be used with helper text. + + + + + + + + + + Extended coverage + + Extra services included + + + + + + + Basic coverage + + Nothing extra included + + + + ) + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + Center, + VStack, + Radio, + RadioGroup, + RadioIcon, + RadioIndicator, + RadioLabel, + CircleIcon, + Box, + Text, + }, + argsType: {}, + }} + /> + + +#### Form Control + +Radio buttons can be used inside FormControl for better control of states and functionality. + + + + + + Which time slot works best for you? + + + + + + + + Monday + + + + + + Tuesday + + + + + + Wednesday + + + + + Choose a time slot for the meeting + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Center, + Text, + CircleIcon, + VStack, + Heading, + Radio, + RadioGroup, + RadioIcon, + RadioIndicator, + RadioLabel, + FormControl, + }, + argsType: {}, + }} + /> + + +#### Label left + +Radio buttons can be used horizontally + + + + + + Jane Cooper + + + + + + Wade Warren + + + + + + + ) + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + Center, + VStack, + Radio, + RadioGroup, + RadioIcon, + RadioIndicator, + RadioLabel, + CircleIcon, + useState, + }, + argsType: {}, + }} + /> + + +#### Controlled + +The Radio components can be used with a controlled state, enabling precise management of the selected option through external state management. + + + + + + + + + Apartments + + + + + + Houses + + + + ) + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + Center, + VStack, + Radio, + RadioGroup, + RadioIcon, + RadioIndicator, + RadioLabel, + CircleIcon, + useState, + }, + argsType: {}, + }} + /> + + +#### Uncontrolled + +The Radio components can be used with either a ref or no state, providing an uncontrolled state where the selected option is managed internally. + + + { + e.preventDefault(); + const checkboxValue = radioRef.current.checked; + }; + return ( + + + + + + + Hotels + + + + + + Living quarters + + + + ); + } + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { + Wrapper, + Center, + VStack, + Radio, + RadioGroup, + RadioIcon, + RadioIndicator, + RadioLabel, + CircleIcon, + useRef, + }, + argsType: {}, + }} + /> + + +#### Radio group + +The Radio group component allows users to group radio and display them in a horizontal or vertical row for better visual representation and functionality. + + + + + + + + + Label 1 + + + + + + Label 2 + + + + + + Label 3 + + + + ); + }; + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'RadioGroupExample'); + }, + scope: { + Radio, + RadioGroup, + RadioIcon, + RadioIndicator, + RadioLabel, + VStack, + Wrapper, + Center, + CircleIcon, + useState, + }, + argsType: {}, + }} + /> + diff --git a/example/storybook-nativewind/src/components/Switch/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Switch/index.themed.stories.mdx index e534983a45..367bcd69f8 100644 --- a/example/storybook-nativewind/src/components/Switch/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Switch/index.themed.stories.mdx @@ -16,20 +16,17 @@ import { Meta } from '@storybook/addon-docs'; -import { Switch } from './Switch'; -import { VStack, Text } from '@gluestack-ui/themed'; -import { HStack } from '@gluestack-ui/themed'; -import { transformedCode } from '../../utils'; import { AppProvider, CodePreview, Table, TableContainer, InlineCode, + CollapsibleCode, } from '@gluestack/design-system'; - +import { transformedCode } from '../../utils'; +import { Switch, VStack, Text, HStack } from '../../components-example/themed'; import Wrapper from '../../components-example/themed/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; This is an illustration of **Switch** component. @@ -330,3 +327,129 @@ const Switch = createSwitch({ export default () => ; ``` --> + +### 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. + +#### Switch With Label + +An example of a switch component with a label, which includes another switch component for toggling additional options. + + + + + Allow notifications + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Switch, + Text, + HStack, + }, + argsType: {}, + }} + /> + + +#### Checked State + +An example of a switch component used within a checked state component to represent a pre-selected or activated option. + + + + + Public profile + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Switch, + Text, + HStack, + }, + argsType: {}, + }} + /> + + +#### Color scheme + +An example of a switch component being used with a different color scheme. + + + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { + Wrapper, + Switch, + Text, + VStack, + }, + argsType: {}, + }} + /> + diff --git a/example/storybook-nativewind/src/components/Text/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Text/index.themed.stories.mdx index 75d65bb4a6..dc6d19ac32 100644 --- a/example/storybook-nativewind/src/components/Text/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Text/index.themed.stories.mdx @@ -14,18 +14,17 @@ import { Meta } from '@storybook/addon-docs'; -import { Text } from './Text'; -import { transformedCode } from '../../utils'; -import Wrapper from '../../components-example/themed/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; - import { AppProvider, CodePreview, Table, TableContainer, InlineCode, + CollapsibleCode, } from '@gluestack/design-system'; +import { transformedCode } from '../../utils'; +import { Text, Center } from '../../components-example/themed'; +import Wrapper from '../../components-example/themed/Wrapper'; This is an illustration of **Text** component. @@ -216,3 +215,172 @@ Text component is created using Text component from react-native. It extends all + +### 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. + +#### Text Sizes + +Text component comes in different sizes, such as `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl`, `4xl`, `5xl`, and `6xl` allowing users to adjust the button size based on their design needs. + + + + {sizes.map((size) => ( + {size} + ))} + + ); + }; + `, + transformCode: (code) => { + return transformedCode(code, 'function', 'App'); + }, + scope: { Wrapper, Center, Text }, + argsType: {}, + }} + /> + + +Text component also accepts some shorthands for basic quick styling. + + + + + + + + Prop + + + Type + + + Default + + + Description + + + + + + + + bold + + + + boolean + + + false + + + {`Used to make the text bold.`} + + + + + + isTruncated + + + + boolean + + + false + + + {`If true, it will render an ellipsis when the text exceeds the width of the viewport or maxWidth set.`} + + + + + + italic + + + + boolean + + + false + + + {`Used to make the text italic.`} + + + + + + underline + + + + boolean + + + false + + + {`Used underline the text.`} + + + + + + strikeThrough + + + + boolean + + + false + + + {`A horizontal line through the center of the text.`} + + + + + + highlight + + + + boolean + + + false + + + {`Used to highlight the text with a yellow background.`} + + + +
+ + diff --git a/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx b/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx index e6994f229e..dfc4bb80a6 100644 --- a/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx @@ -14,8 +14,7 @@ import { Meta } from '@storybook/addon-docs'; -import { VStack } from './VStack'; -import { Box } from '@gluestack-ui/themed'; +import { Box, VStack } from '../../components-example/themed'; import { transformedCode } from '../../utils'; import { AppProvider, @@ -24,10 +23,9 @@ import { TableContainer, Text, InlineCode, + CollapsibleCode, } from '@gluestack/design-system'; - import Wrapper from '../../components-example/themed/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; This is an illustration of **VStack** component. @@ -169,3 +167,33 @@ VStack component is created using View component from react-native. It extends a + +### 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. + +#### VStack Reversed + +A VStack component with the reversed prop reverses the order of vertically stacked elements, enabling customized vertical layouts and visual arrangements of content within a user interface. + + + + + + + + `, + transformCode: (code) => { + return transformedCode(code); + }, + scope: { Box, Wrapper, VStack }, + argsType: {}, + }} + /> +