diff --git a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx index ae03c3cd1..21f8d7cb9 100644 --- a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx @@ -479,6 +479,7 @@ Button component is created using Pressable component from react-native. It exte ### Data Attributes Table + Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling. <> diff --git a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx index fa1b3b840..51a7d7889 100644 --- a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx @@ -594,6 +594,7 @@ Checkbox component is created using Pressable component from react-native. It ex ### Data Attributes Table + Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling. <> 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 ee033b5cb..5578d46e9 100644 --- a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx @@ -334,6 +334,7 @@ The following are the lists of all the libraries and packages the component reli Fab component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props). ### Data Attributes Table + Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling. <> diff --git a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx index fcbd1bab1..d3db79abc 100644 --- a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx @@ -453,6 +453,7 @@ We have outlined the various features that ensure the Input component is accessi Input component is created using TextInput component from react-native. It extends all the props supported by [React Native Text Input](https://reactnative.dev/docs/textinput#props) and the props mentioned below. ### Data Attributes Table + Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling. <> 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 a1b8bf15c..b172a4c93 100644 --- a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx @@ -14,7 +14,7 @@ import { Meta } from '@storybook/addon-docs'; -import { ArrowUpRightIcon, Icon, HStack, Text, Link, LinkText } from '../../core-components/nativewind'; +import { Icon, HStack, Text, Link, LinkText } from '../../core-components/nativewind'; import { transformedCode } from '../../utils'; import { AppProvider, @@ -27,6 +27,7 @@ import { import Wrapper from '../../core-components/nativewind/Wrapper'; import { CollapsibleCode } from '@gluestack/design-system'; import AnatomyImage from '../../extra-components/nativewind/AnatomyImage'; +import { ArrowUpRight } from 'lucide-react-native'; This is an illustration of **Link** component. @@ -254,6 +255,7 @@ We have outlined the various features that ensure the Link component is accessib Link component is created using Pressable component from react-native. It extends all the props supported by [React Native Pressable](https://reactnative.dev/docs/pressable#props). ### Data Attributes Table + Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling. <> @@ -407,7 +409,7 @@ The Examples section provides visual representations of the different variants o transformCode: (code) => { return transformedCode(code); }, - scope: { Link, LinkText, Wrapper, ArrowUpRightIcon, Icon, HStack, Text }, + scope: { Link, LinkText, Wrapper, Icon, HStack, Text }, argsType: {}, }} /> @@ -427,7 +429,8 @@ The Examples section provides visual representations of the different variants o Pinterest - + {/* ArrowUpRight is imported from 'lucide-react-native' */} + @@ -435,7 +438,7 @@ The Examples section provides visual representations of the different variants o transformCode: (code) => { return transformedCode(code); }, - scope: { Link, LinkText, Wrapper, ArrowUpRightIcon, Icon, HStack, Text }, + scope: { Link, LinkText, Wrapper, ArrowUpRight, Icon, HStack, Text }, argsType: {}, }} /> diff --git a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx index acc3d0a6f..178771540 100644 --- a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx @@ -20,7 +20,7 @@ import { transformedCode } from '../../utils'; import { AppProvider, CodePreview } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; -import { CollapsibleCode, Tabs } from '@gluestack/design-system'; +import { CollapsibleCode, Table, TableContainer, Tabs, InlineCode } from '@gluestack/design-system'; This is an illustration of **Pressable** component. @@ -119,6 +119,7 @@ This section provides a comprehensive reference list for the component props, de It inherits all the properties of React Native's [Pressable](https://reactnative.dev/docs/pressable) component. ### Data Attributes Table + Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling. <> diff --git a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx index 3fa8b9d6e..262939307 100644 --- a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx @@ -466,6 +466,7 @@ Radio component is created using Pressable component from react-native. It exten ### Data Attributes Table + Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling. <> diff --git a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx index 8d08744f6..2de7bbf34 100644 --- a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx @@ -385,6 +385,7 @@ Textarea component is created using TextInput component from react-native. It ex ### Data Attributes Table + Component receives states as props as boolean values, which are applied as ```data-*``` attributes. These attributes are then used to style the component via classNames, enabling state-based styling. <>