diff --git a/example/storybook-nativewind/package.json b/example/storybook-nativewind/package.json index e8196683d..bc3db8c5f 100644 --- 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.37", + "@gluestack-ui/themed": "^1.1.38", "@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/Accordion/Accordion.tsx b/example/storybook-nativewind/src/components/Accordion/Accordion.tsx index a22452fb6..c4b628553 100644 --- a/example/storybook-nativewind/src/components/Accordion/Accordion.tsx +++ b/example/storybook-nativewind/src/components/Accordion/Accordion.tsx @@ -9,6 +9,7 @@ import { AccordionContent, AccordionContentText, } from '@/components/ui/accordion'; +import { Divider } from '@/components/ui/divider'; import { ChevronDownIcon, ChevronUpIcon, @@ -48,6 +49,7 @@ const AccordionBasic = ({ ...props }: any) => { + @@ -77,6 +79,7 @@ const AccordionBasic = ({ ...props }: any) => { + @@ -104,6 +107,7 @@ const AccordionBasic = ({ ...props }: any) => { + diff --git a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx index bd81d088a..0a0e3d059 100644 --- a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx @@ -84,6 +84,7 @@ This is an illustration of **Accordion** component. + @@ -127,6 +128,7 @@ This is an illustration of **Accordion** component. ChevronDownIcon, ChevronUpIcon, Wrapper, + Divider, }, argsType: { size: { diff --git a/example/storybook-nativewind/src/components/Accordion/index.nw.storiesold.mdx b/example/storybook-nativewind/src/components/Accordion/index.nw.storiesold.mdx deleted file mode 100644 index b7813fa17..000000000 --- a/example/storybook-nativewind/src/components/Accordion/index.nw.storiesold.mdx +++ /dev/null @@ -1,35 +0,0 @@ ---- -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. - -pageTitle: Accordion - -pageDescription: The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - InlineCode, - AddIcon, - InfoIcon, - Alert, -} from '@gluestack/design-system'; -import { - Divider, - ChevronDownIcon, - ChevronUpIcon, - PlusIcon, - MinusIcon, -} from '@gluestack-ui/themed'; -import { transformedCode } from '../../utils'; - - - -## hello from nativewind diff --git a/example/storybook-nativewind/src/components/Accordion/index.stories.mdx b/example/storybook-nativewind/src/components/Accordion/index.stories.mdx deleted file mode 100644 index e52f1eb2d..000000000 --- a/example/storybook-nativewind/src/components/Accordion/index.stories.mdx +++ /dev/null @@ -1,1293 +0,0 @@ ---- -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. - -pageTitle: Accordion - -pageDescription: The Accordion component is a versatile and interactive user interface element, designed to efficiently organize and present content in a compact space. - -showHeader: true ---- - -import { Meta } from '@storybook/addon-docs'; -import { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, -} from './Accordion'; -import { - AppProvider, - CodePreview, - Table, - TableContainer, - InlineCode, - AddIcon, - InfoIcon, - Alert, -} from '@gluestack/design-system'; -import { - Divider, - ChevronDownIcon, - ChevronUpIcon, - PlusIcon, - MinusIcon, -} from '@gluestack-ui/themed'; -import { transformedCode } from '../../utils'; - - - -import Wrapper from '../../core-components/themed/Wrapper'; - -This is an illustration of **Accordion** component. - -<> - - - - - {({ isExpanded }) => { - return ( - <> - - How do I place an order? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - To place an order, simply select the products you want, proceed to - checkout, provide shipping and payment information, and finalize - your purchase. - - - - - - - {({ isExpanded }) => { - return ( - <> - - What payment methods do you accept? - - {isExpanded ? ( - - ) : ( - - )} - - ); - }} - - - - - We accept all major credit cards, including Visa, Mastercard, and - American Express. We also support payments through PayPal. - - - - - `, - transformCode: (code) => { - return transformedCode(code); - }, - scope: { - Accordion, - AccordionItem, - AccordionHeader, - AccordionTrigger, - AccordionTitleText, - AccordionIcon, - AccordionContent, - AccordionContentText, - ChevronDownIcon, - ChevronUpIcon, - Wrapper, - }, - argsType: { - size: { - control: 'select', - options: ['sm', 'md', 'lg'], - default: 'md', - }, - variant: { - control: 'select', - options: ['filled', 'unfilled'], - default: 'filled', - }, - type: { - control: 'select', - options: ['single', 'multiple'], - default: 'single', - }, - isCollapsible: { - control: 'boolean', - default: true, - }, - isDisabled: { - control: 'boolean', - }, - }, - }} - /> - - -
- -## API Reference - -### Import - -To use this component in your project, include the following import statement in your file. - -```bash -import { Accordion } from '@gluestack-ui/themed'; -``` - -### Anatomy - -The structure provided below can help you identify and understand Accordion component's various parts. - -```jsx -export default () => ( - - - - - - - - - - - - - -); -``` - -### Component Props - -This section provides a comprehensive reference list for the component props, detailing descriptions, properties, types, and default behavior for easy project integration. - -#### Accordion - -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - type - - - - "single" | "multiple" - - - "single" - - - {`Determines whether one or multiple items can be opened at the same time.`} - - - - - - isCollapsible - - - - boolean - - - true - - - {`When type is "single" or "multiple", allows closing content when clicking trigger for an open item.`} - - - - - - defaultValue - - - - string[] - - - [] - - - {`The value of the item to expand when initially rendered when type is "single" or "multiple".`} - - - - - - value - - - - string[] - - - [] - - - {`The controlled value of the item to expand when type is "single" or "multiple".`} - - - - - - onValueChange - - - - function - - - - - - - {`Event handler called when the expanded state of an item changes and type is "single" or "multiple".`} - - - - - - isDisabled - - - - boolean - - - false - - - {`When true, prevents the user from interacting with the accordion and all its items.`} - - - -
- - - -**Descendants Styling Props** -Props to style child components. - -<> - - - - - - Sx Prop - - - Description - - - - - - - - _item - - - - {`Prop to style the AccordionItem Component`} - - - - - - - - _titleText - - - - {`Prop to style the AccordionTitleText Component`} - - - - - - - - _contentText - - - - {`Prop to style the AccordionContentText Component`} - - - - - - - - _icon - - - - {`Prop to style the AccordionIcon Component`} - - - -
- - - -#### AccordionItem - -Contains all the parts of a collapsible section. - -<> - - - - - - Prop - - - Type - - - Default - - - Description - - - - - - - - value - - - - string - - - - - - - {`The controlled value of the item to expand when type is "single" or "multiple". Must be used in conjunction with onValueChange.This is a mandatory prop.`} - - - - - - isDisabled - - - - boolean - - - false - - - {`When true, prevents the user from interacting with the accordion and all its items.`} - - - -
- - - -#### AccordionHeader - -Wraps an `Accordion.Trigger`. It inherits all the properties of @expo/html-elements's [H3](https://www.npmjs.com/package/@expo/html-elements#h3) on web and It inherits all the properties of react native's [View](https://reactnative.dev/docs/view) on native. Use the as prop to update it to the appropriate heading level for your page. - -#### AccordionTrigger - -Toggles the collapsed state of its associated item. It inherits all the properties of react native's [Pressable](https://reactnative.dev/docs/pressable). It should be nested inside of an `Accordion.Header`. - -#### AccordionTitleText - -It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. - -#### AccordionIcon - -Contains all Icon related layout style props and actions.It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - -#### AccordionContent - -Contains all the collapsible content for an item. It inherits all the properties of React Native [View](https://reactnative.dev/docs/view) component. - -#### AccordionContentText - -It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. - -### Accessibility - -Adheres to the Accordion [WAI-ARIA design pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/). - -We have outlined the various features that ensure the Accordion component is accessible to all users, including those with disabilities. These features help ensure that your application is inclusive and meets accessibility standards. - -- Header is h3 tag on web. -- aria-expanded is "true" when the Accordion Content is visible, otherwise false. -- role is set to "region" for the currently expanded accordion panel. -- aria-controls points to the id of the Accordion Content. -- aria-labelledby references the accordion header button that expands and collapses the region. - -### Keyboard Interactions - -- `Space` - When focus is on an Accordion.Trigger of a collapsed section, expands the section. -- `Enter` - When focus is on an Accordion.Trigger of a collapsed section, expands the section. -- `Tab` - Moves focus to the next focusable element. -- `Shift + Tab` - Moves focus to the previous focusable element. - -### Screen Reader - -- VoiceOver: When the Accordion Item is focused, the screen reader will announce the Accordion's title text and the state of the Accordion trigger (expanded or collapsed). - -## Themed - -The themed version of the component is a pre-styled version of the component, which allows you to quickly integrate the component into your project. The component's design and functionality are fully defined, allowing you to focus on the more important aspects of your project. To know more about Themed Library please visit this [link](https://gluestack.io/ui/docs/core-concepts/themed-library). - -## 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, -}, -}} -/> - - - -## Unstyled - -We provide in-depth information on how to customize and extend the component's functionality to meet your needs. Below, we describe how to modify the component to suit your requirements. diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx index a23c55718..84c63874c 100644 --- a/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Actionsheet/index.nw.stories.mdx @@ -79,7 +79,7 @@ This is an illustration of **Actionsheet** component. code: ` function App(){ const [showActionsheet, setShowActionsheet] = React.useState(false); - const handleClose = () => setShowActionsheet(!showActionsheet); + const handleClose = () => setShowActionsheet(false); return ( <> @@ -574,7 +574,7 @@ The Examples section provides visual representations of the different variants o code: ` function Example(){ const [showAlertDialog, setShowAlertDialog] = React.useState(false); - const handleClose = () => setShowAlertDialog(!showAlertDialog); + const handleClose = () => setShowAlertDialog(false); return ( <>