From 5009b2713181f1c0951b57c45e3a11eac1150023 Mon Sep 17 00:00:00 2001 From: Damini Date: Wed, 20 Mar 2024 22:44:50 +0530 Subject: [PATCH 1/5] fix: build --- packages/themed/src/components/FormControl/index.tsx | 1 - yarn.lock | 9 +++++++++ 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/themed/src/components/FormControl/index.tsx b/packages/themed/src/components/FormControl/index.tsx index 9da336b49a..3cf1079c69 100644 --- a/packages/themed/src/components/FormControl/index.tsx +++ b/packages/themed/src/components/FormControl/index.tsx @@ -27,6 +27,5 @@ export const FormControlErrorText = FormControl.Error.Text; export const FormControlErrorIcon = FormControl.Error.Icon; export const FormControlLabel = FormControl.Label; export const FormControlLabelText = FormControl.Label.Text; -export const FormControlLabelAstrick = FormControl.Label.Astrick; export const FormControlHelper = FormControl.Helper; export const FormControlHelperText = FormControl.Helper.Text; diff --git a/yarn.lock b/yarn.lock index ca310a1fe1..30097fcfca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3297,6 +3297,15 @@ "@react-native-aria/focus" "^0.2.9" "@react-native-aria/interactions" "^0.2.11" +"@gluestack-ui/tabs@0.1.14": + version "0.1.14" + resolved "https://registry.yarnpkg.com/@gluestack-ui/tabs/-/tabs-0.1.14.tgz#5bcb5cc659927cde08f8e32497830257ed5cba4f" + integrity sha512-QIAf+ACVFIBm5khxMPNwo4hGtr+uOdc18ygeyHmCOQaCBAhQN9zyscDg5PjBDNasHk7I9WJf5sVr2A4ZzRXybg== + dependencies: + "@gluestack-ui/utils" "^0.1.12" + "@react-native-aria/focus" "^0.2.9" + "@react-native-aria/interactions" "^0.2.11" + "@gluestack-ui/toast@^0.1.7": version "0.1.20" resolved "https://registry.yarnpkg.com/@gluestack-ui/toast/-/toast-0.1.20.tgz#863453f75d2e941000204a9524161bfd2500e320" From 5b0699aa41fd19090063a40354deb631bc5b6653 Mon Sep 17 00:00:00 2001 From: Damini Date: Wed, 20 Mar 2024 23:00:16 +0530 Subject: [PATCH 2/5] fix: nativewind docs --- .../src/components/Menu/index.themed.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/components/Menu/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Menu/index.themed.stories.mdx index cc5017e39a..f534af50a0 100644 --- a/example/storybook-nativewind/src/components/Menu/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Menu/index.themed.stories.mdx @@ -38,6 +38,7 @@ import { import { PaintBucket, PuzzleIcon } from 'lucide-react-native'; import { transformedCode } from '../../utils'; import { + AppProvider, CodePreview, Table, TableContainer, @@ -111,7 +112,6 @@ This is an illustration of a **Menu** component. MenuIcon, MenuItem, MenuItemLabel, - Text, Box, Icon, GlobeIcon, From ff92b9bbee77241eb1311e4b74577dce0bf7f22c Mon Sep 17 00:00:00 2001 From: Damini Date: Wed, 20 Mar 2024 23:37:18 +0530 Subject: [PATCH 3/5] fix: accordion themed docs --- .../Accordion/index.themed.stories.mdx | 468 +++++++++++++++++- 1 file changed, 466 insertions(+), 2 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 7122d2ad83..690d40326a 100644 --- a/example/storybook-nativewind/src/components/Accordion/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Accordion/index.themed.stories.mdx @@ -39,12 +39,476 @@ import { AddIcon, InfoIcon, Alert, + CollapsibleCode, } from '@gluestack/design-system'; import { transformedCode } from '../../utils'; -import { config } from '../../core-components/themed/gluestack-ui-provider/config'; import Wrapper from '../../core-components/themed/Wrapper'; -# Accordion +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', + }, + }, + }} + /> + + +
+ +## Installation + +### Step 1: Install the following dependencies: + +```bash + +npm i @gluestack-ui/accordion + +``` + +### Step 2: Copy and paste the following code into your project. + + + +```jsx +%%-- File: core-components/themed/accordion/index.tsx --%% +``` + + + +### Step 3: Update the import paths to match your project setup. + +## API Reference + +To use this component in your project, include the following import statement in your file. + +```jsx +import { Accordion, AccordionItem, AccordionHeader, AccordionTrigger, AccordionTitleText, AccordionIcon, AccordionContent, AccordionContentText } from '@/components/ui/accordion'; +``` + +```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). ## Examples From 3ee6cda9d34eff11b507529cd902c011dad21b74 Mon Sep 17 00:00:00 2001 From: Damini Date: Thu, 21 Mar 2024 11:19:42 +0530 Subject: [PATCH 4/5] fix: table widths in docs --- .../src/components/Fab/index.nw.stories.mdx | 8 ++++---- .../src/components/FormControl/index.nw.storiesold.mdx | 4 ++-- .../src/components/Link/index.nw.stories.mdx | 8 ++++---- .../src/components/Popover/index.nw.stories.mdx | 8 ++++---- .../src/components/Slider/index.nw.stories.mdx | 8 ++++---- .../src/components/Switch/index.nw.stories.mdx | 8 ++++---- 6 files changed, 22 insertions(+), 22 deletions(-) diff --git a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx index 287f49a8f1..c43caa83b6 100644 --- a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx @@ -156,7 +156,7 @@ export default () => ( Contains all fab related layout style props and actions. It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component. - +<> @@ -262,7 +262,7 @@ It inherits all the properties of React Native's [Pressable](https://reactnative
- + #### FabLabel @@ -311,7 +311,7 @@ Fab component is created using Pressable component from react-native. It extends #### Fab - +<> @@ -360,7 +360,7 @@ Fab component is created using Pressable component from react-native. It extends
- + > Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available. diff --git a/example/storybook-nativewind/src/components/FormControl/index.nw.storiesold.mdx b/example/storybook-nativewind/src/components/FormControl/index.nw.storiesold.mdx index 4787295fc9..19c16af64e 100644 --- a/example/storybook-nativewind/src/components/FormControl/index.nw.storiesold.mdx +++ b/example/storybook-nativewind/src/components/FormControl/index.nw.storiesold.mdx @@ -232,7 +232,7 @@ This section provides a comprehensive reference list for the component props, de It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - +<> @@ -335,7 +335,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
- + #### FormControlLabel diff --git a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx index 38bc62f295..632f4e8c22 100644 --- a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx @@ -101,7 +101,7 @@ This section provides a comprehensive reference list for the component props, de Contains all link related layout style props and actions. It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component. - +<> @@ -206,7 +206,7 @@ It inherits all the properties of React Native's [Pressable](https://reactnative
- + #### LinkText @@ -231,7 +231,7 @@ Link component is created using Pressable component from react-native. It extend #### Link - +<> @@ -266,7 +266,7 @@ Link component is created using Pressable component from react-native. It extend
- + > Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available. diff --git a/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx index 9fdfec6864..212ea76a45 100644 --- a/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx @@ -234,7 +234,7 @@ This section provides a comprehensive reference list for the component props, de It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - +<> @@ -590,7 +590,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
- + #### PopoverBackdrop @@ -635,7 +635,7 @@ Popover component is created using ScrollView component from react-native. It ex #### Popover - +<> @@ -668,7 +668,7 @@ Popover component is created using ScrollView component from react-native. It ex
- + ### Examples diff --git a/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx index 503cf844ba..9b37686482 100644 --- a/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx @@ -146,7 +146,7 @@ This section provides a comprehensive reference list for the component props, de It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - +<> @@ -317,12 +317,12 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
- + **Descendants Styling Props** Props to style child components. - +<> @@ -369,7 +369,7 @@ Props to style child components.
- + #### SliderTrack diff --git a/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx index 88a983df45..5d247a7d7e 100644 --- a/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx @@ -106,7 +106,7 @@ This section provides a comprehensive reference list for the component props, de Contains all switch related layout style props and actions. It inherits all the properties of React Native's [Switch](https://reactnative.dev/docs/switch) component. - +<> @@ -241,7 +241,7 @@ It inherits all the properties of React Native's [Switch](https://reactnative.de
- + ### Accessibility @@ -262,7 +262,7 @@ Switch component is created using Switch component from react-native. It extends #### Switch - +<> @@ -295,7 +295,7 @@ Switch component is created using Switch component from react-native. It extends
- + > Note: These props are exclusively applicable when utilizing the default configuration of gluestack-ui/config. If you are using a custom theme, these props may not be available. From eb5a88c1cfb3a7df49ae534fc3862de1ff07667d Mon Sep 17 00:00:00 2001 From: Damini Date: Thu, 21 Mar 2024 11:27:18 +0530 Subject: [PATCH 5/5] fix: table width --- .../src/components/FormControl/index.nw.stories.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx index 2f6a5518fd..1be6e7c8cc 100644 --- a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx @@ -290,7 +290,7 @@ This section provides a comprehensive reference list for the component props, de It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. - +<> @@ -393,7 +393,7 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/
- + #### FormControlLabel