From b8b166ffc7928ff8f636f7c292a7b9ab0f439385 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Thu, 8 Aug 2024 13:56:17 +0530 Subject: [PATCH 01/27] feat: added anatomy image for alert --- .../src/components/Alert/index.nw.stories.mdx | 3 +++ .../nativewind/AnatomyImage.tsx | 27 +++++++++++++++++++ 2 files changed, 30 insertions(+) create mode 100644 example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx diff --git a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx index ba7f2606e..6fb9ec23c 100644 --- a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx @@ -45,6 +45,7 @@ import { } from '@gluestack/design-system'; import { CollapsibleCode } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; +import AnatomyImage from '../../extra-components/nativewind/GradientImage'; This is an illustration of **Alert** component. @@ -140,6 +141,8 @@ npm i @gluestack-ui/alert ## API Reference + + To use this component in your project, include the following import statement in your file. ```jsx diff --git a/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx b/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx new file mode 100644 index 000000000..a57dca3a6 --- /dev/null +++ b/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import { Image, Center } from '../../core-components/nativewind'; +// import { useBreakpointValue } from '@gluestack-ui/themed'; +import { useBreakpointValue } from '@/components/hooks/use-break-point-value'; + +const AnatomyImage = () => { + // const source = useBreakpointValue({ + // default: 'https://ibb.co/F3bdXr7', + // md: 'https://ibb.co/Z1R8HR2', + // }); + + const source = useBreakpointValue({ + default: '/assets/light-lg.svg', + md: '/assets/dark-lg.svg', + }); + + return ( +
+ anatomy-image +
+ ); +}; +export default AnatomyImage; From 2639d4b86b0d45bc853817a8e825321d44106f07 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Thu, 8 Aug 2024 14:12:52 +0530 Subject: [PATCH 02/27] fix: import --- .../src/extra-components/nativewind/AnatomyImage.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx b/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx index a57dca3a6..6e190b0fa 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx @@ -1,7 +1,9 @@ import React from 'react'; import { Image, Center } from '../../core-components/nativewind'; // import { useBreakpointValue } from '@gluestack-ui/themed'; -import { useBreakpointValue } from '@/components/hooks/use-break-point-value'; +// import { useBreakpointValue } from '@/components/hooks/use-break-point-value'; +//@ts-ignore +import { useBreakpointValue } from '@/hooks/useBreakPointValue'; const AnatomyImage = () => { // const source = useBreakpointValue({ @@ -10,8 +12,8 @@ const AnatomyImage = () => { // }); const source = useBreakpointValue({ - default: '/assets/light-lg.svg', - md: '/assets/dark-lg.svg', + default: '/assets/alert_mobile.svg', + md: '/assets/alert_web.svg', }); return ( From 0f27e999cde9593ea8fcdc839b6ff006e528612e Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Thu, 8 Aug 2024 16:14:01 +0530 Subject: [PATCH 03/27] fix: anatomyImage component for alert --- .../src/components/Alert/index.nw.stories.mdx | 4 +- .../nativewind/AnatomyImage.tsx | 41 ++++++++++--------- 2 files changed, 24 insertions(+), 21 deletions(-) diff --git a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx index 6fb9ec23c..3ff26df7c 100644 --- a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx @@ -45,7 +45,7 @@ import { } from '@gluestack/design-system'; import { CollapsibleCode } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; -import AnatomyImage from '../../extra-components/nativewind/GradientImage'; +import AnatomyImage from '../../extra-components/nativewind/AnatomyImage'; This is an illustration of **Alert** component. @@ -141,7 +141,7 @@ npm i @gluestack-ui/alert ## API Reference - + To use this component in your project, include the following import statement in your file. diff --git a/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx b/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx index 6e190b0fa..e749f5925 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx @@ -1,27 +1,30 @@ import React from 'react'; -import { Image, Center } from '../../core-components/nativewind'; -// import { useBreakpointValue } from '@gluestack-ui/themed'; -// import { useBreakpointValue } from '@/components/hooks/use-break-point-value'; -//@ts-ignore -import { useBreakpointValue } from '@/hooks/useBreakPointValue'; - -const AnatomyImage = () => { - // const source = useBreakpointValue({ - // default: 'https://ibb.co/F3bdXr7', - // md: 'https://ibb.co/Z1R8HR2', - // }); - - const source = useBreakpointValue({ - default: '/assets/alert_mobile.svg', - md: '/assets/alert_web.svg', - }); +import { Center } from '../../core-components/nativewind'; +import Image from 'next/image'; +const AnatomyImage = ({ + mobileUrl, + webUrl, +}: { + mobileUrl: string; + webUrl: string; +}) => { return ( -
+
+ anatomy-image + anatomy-image
); From 1ec3e533ccdf7f1714211e316c757f0daefe8dee Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Thu, 8 Aug 2024 16:29:48 +0530 Subject: [PATCH 04/27] fix: import tailwind.config in use-breakpoint-value --- .../src/core-components/hooks/use-break-point-value.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/core-components/hooks/use-break-point-value.ts b/example/storybook-nativewind/src/core-components/hooks/use-break-point-value.ts index d2647b6b0..65d3d06c7 100644 --- a/example/storybook-nativewind/src/core-components/hooks/use-break-point-value.ts +++ b/example/storybook-nativewind/src/core-components/hooks/use-break-point-value.ts @@ -2,7 +2,7 @@ import { Dimensions, useWindowDimensions } from 'react-native'; import { useEffect, useState } from 'react'; import resolveConfig from 'tailwindcss/resolveConfig'; -import tailwindConfig from '@/tailwind.config'; +import tailwindConfig from 'tailwind.config'; const TailwindTheme = resolveConfig(tailwindConfig); const screenSize = TailwindTheme.theme.screens; From b26d6611a928176f5e38677a55c1a5bfab9d2b01 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Thu, 8 Aug 2024 18:33:23 +0530 Subject: [PATCH 05/27] fix: anatomyImage component --- .../src/components/Alert/index.nw.stories.mdx | 4 ++-- .../nativewind/AnatomyImage.tsx | 21 ++++++++----------- 2 files changed, 11 insertions(+), 14 deletions(-) diff --git a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx index 3ff26df7c..cd3774ff5 100644 --- a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx @@ -141,10 +141,10 @@ npm i @gluestack-ui/alert ## API Reference - - To use this component in your project, include the following import statement in your file. + + ```jsx import { Alert, AlertIcon, AlertText } from '@/components/ui/alert'; ``` diff --git a/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx b/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx index e749f5925..5acd8e42f 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx @@ -1,6 +1,5 @@ import React from 'react'; -import { Center } from '../../core-components/nativewind'; -import Image from 'next/image'; +import { Image } from '../../core-components/nativewind'; const AnatomyImage = ({ mobileUrl, @@ -10,23 +9,21 @@ const AnatomyImage = ({ webUrl: string; }) => { return ( -
+ <> anatomy-image anatomy-image -
+ ); }; export default AnatomyImage; From 3fd90fa6bef0d4f0df5b70992886a3f3f1d9480d Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Thu, 8 Aug 2024 19:06:14 +0530 Subject: [PATCH 06/27] fix: anatomyImage component images issue --- .../nativewind/AnatomyImage.tsx | 51 +++++++++++++------ 1 file changed, 36 insertions(+), 15 deletions(-) diff --git a/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx b/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx index 5acd8e42f..ac7c5293b 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx @@ -1,5 +1,36 @@ +// import React from 'react'; +// import { Image } from '../../core-components/nativewind'; + +// const AnatomyImage = ({ +// mobileUrl, +// webUrl, +// }: { +// mobileUrl: string; +// webUrl: string; +// }) => { +// return ( +// <> +// anatomy-image + +// anatomy-image +// +// ); +// }; +// export default AnatomyImage; + import React from 'react'; -import { Image } from '../../core-components/nativewind'; +import { Center } from '../../core-components/nativewind'; +import Image from 'next/image'; const AnatomyImage = ({ mobileUrl, @@ -9,21 +40,11 @@ const AnatomyImage = ({ webUrl: string; }) => { return ( - <> - anatomy-image +
+ anatomy-image - anatomy-image - + anatomy-image +
); }; export default AnatomyImage; From 14381870cce1a473db910814fdc09c7b6a8d5932 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Fri, 9 Aug 2024 12:33:10 +0530 Subject: [PATCH 07/27] fix: anatomyImage issue of aspectRatio --- .../src/components/Alert/index.nw.stories.mdx | 4 +- .../nativewind/AnatomyImage.tsx | 51 ++++++------------- 2 files changed, 17 insertions(+), 38 deletions(-) diff --git a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx index cd3774ff5..b9e164faf 100644 --- a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx @@ -143,12 +143,12 @@ npm i @gluestack-ui/alert To use this component in your project, include the following import statement in your file. - - ```jsx import { Alert, AlertIcon, AlertText } from '@/components/ui/alert'; ``` + + ```jsx export default () => ( diff --git a/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx b/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx index ac7c5293b..e87e10985 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx @@ -1,36 +1,5 @@ -// import React from 'react'; -// import { Image } from '../../core-components/nativewind'; - -// const AnatomyImage = ({ -// mobileUrl, -// webUrl, -// }: { -// mobileUrl: string; -// webUrl: string; -// }) => { -// return ( -// <> -// anatomy-image - -// anatomy-image -// -// ); -// }; -// export default AnatomyImage; - import React from 'react'; -import { Center } from '../../core-components/nativewind'; -import Image from 'next/image'; +import { Image } from '../../core-components/nativewind'; const AnatomyImage = ({ mobileUrl, @@ -40,11 +9,21 @@ const AnatomyImage = ({ webUrl: string; }) => { return ( -
- anatomy-image + <> + anatomy-image - anatomy-image -
+ anatomy-image + ); }; export default AnatomyImage; From d332391eb8ccd588522be0a6bc882f58730fa299 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Fri, 9 Aug 2024 12:46:14 +0530 Subject: [PATCH 08/27] fix: anatomyImage issue of aspectRatio --- .../src/extra-components/nativewind/AnatomyImage.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx b/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx index e87e10985..437a04b72 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx @@ -13,14 +13,14 @@ const AnatomyImage = ({ anatomy-image anatomy-image From 06af03773393dcc99fee274388400a3f45ee5990 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Fri, 9 Aug 2024 13:55:23 +0530 Subject: [PATCH 09/27] fix: changed image links --- .../src/components/Alert/index.nw.stories.mdx | 2 +- .../src/extra-components/nativewind/AnatomyImage.tsx | 2 ++ 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx index b9e164faf..a18c4471f 100644 --- a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx @@ -147,7 +147,7 @@ To use this component in your project, include the following import statement in import { Alert, AlertIcon, AlertText } from '@/components/ui/alert'; ``` - + ```jsx export default () => ( diff --git a/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx b/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx index 437a04b72..f1c1c9c30 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx @@ -14,6 +14,7 @@ const AnatomyImage = ({ source={{ uri: mobileUrl }} alt="anatomy-image" className="md:hidden w-full aspect-[513/375] mb-5" + //@ts-ignore size="none" /> @@ -21,6 +22,7 @@ const AnatomyImage = ({ source={{ uri: webUrl }} alt="anatomy-image" className="hidden md:flex w-full aspect-[736/259] mb-6" + //@ts-ignore size="none" /> From 5d21d37ebe2caaa36d2f687454bded41769c0c49 Mon Sep 17 00:00:00 2001 From: Suraj Ahmed Choudhury Date: Fri, 9 Aug 2024 16:45:40 +0530 Subject: [PATCH 10/27] Update index.nw.stories.mdx --- .../src/home/overview/Introduction/index.nw.stories.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/home/overview/Introduction/index.nw.stories.mdx b/example/storybook-nativewind/src/home/overview/Introduction/index.nw.stories.mdx index fc13e2d7f..24b180c2d 100644 --- a/example/storybook-nativewind/src/home/overview/Introduction/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/home/overview/Introduction/index.nw.stories.mdx @@ -1,7 +1,7 @@ --- title: Introduction | gluestack-ui -description: gluestack-ui is a React Native and React library that provides universal, styled, and accessible components. +description: React & React Native Components & Patterns (copy-paste components & patterns crafted with Tailwind CSS (NativeWind)) --- From c7614bf0cc97f034ac9d1da0d856d71d989798b1 Mon Sep 17 00:00:00 2001 From: sra1kumar-NULL Date: Mon, 12 Aug 2024 16:09:47 +0530 Subject: [PATCH 11/27] fix: added textStyle prop for select item --- packages/unstyled/select/src/SelectItem.tsx | 3 ++- packages/unstyled/select/src/types.ts | 10 +++++----- 2 files changed, 7 insertions(+), 6 deletions(-) diff --git a/packages/unstyled/select/src/SelectItem.tsx b/packages/unstyled/select/src/SelectItem.tsx index 6bddd363f..204112592 100644 --- a/packages/unstyled/select/src/SelectItem.tsx +++ b/packages/unstyled/select/src/SelectItem.tsx @@ -14,6 +14,7 @@ export const SelectItem = (StyledSelectItem: any, StyledSelectItemText: any) => // isInvalid, label, value, + textStyle, ...props }: any, ref?: any @@ -44,7 +45,7 @@ export const SelectItem = (StyledSelectItem: any, StyledSelectItemText: any) => checked: activeValue == value ? 'true' : 'false', }} > - {label} + {label} ); } diff --git a/packages/unstyled/select/src/types.ts b/packages/unstyled/select/src/types.ts index 9a5c11aae..bcc17237e 100644 --- a/packages/unstyled/select/src/types.ts +++ b/packages/unstyled/select/src/types.ts @@ -82,11 +82,11 @@ export type ISelectComponentType< Item: React.ForwardRefExoticComponent< ISelectItemProps & React.PropsWithoutRef & - React.RefAttributes - >; - ItemText: React.ForwardRefExoticComponent< - React.PropsWithoutRef & - React.RefAttributes + React.RefAttributes & { + textStyle?: { + [K in keyof SelectItemTextProps]?: SelectItemTextProps[K]; + }; + } >; ScrollView: React.ForwardRefExoticComponent< React.PropsWithoutRef & From 896fb8877c4b7e00ed2502fb4983917b96282f33 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Mon, 12 Aug 2024 16:30:20 +0530 Subject: [PATCH 12/27] feat: added anatomy image for toast component --- .../src/components/Toast/index.nw.stories.mdx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx index 090b7d758..59f02eb73 100644 --- a/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx @@ -51,6 +51,7 @@ import { import { View } from 'react-native'; import Wrapper from '../../core-components/nativewind/Wrapper'; import { RefreshCw, Send, AlertTriangle } from 'lucide-react-native'; +import AnatomyImage from '../../extra-components/nativewind/AnatomyImage'; This is an illustration of **Toast** component. @@ -182,6 +183,8 @@ To use this component in your project, include the following import statement in import { useToast, Toast } from '@/components/ui/toast'; ``` + + ```jsx export default () => ( From ea503067921a977cbf941f091cad7b1c5d0d058a Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Mon, 12 Aug 2024 16:38:25 +0530 Subject: [PATCH 13/27] feat: added anatomy image for badge component --- .../src/components/Badge/index.nw.stories.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx index 7bf36c9de..e48ce1cf7 100644 --- a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx @@ -55,6 +55,7 @@ import { import { transformedCode } from '../../utils'; import Wrapper from '../../core-components/nativewind/Wrapper'; import { CollapsibleCode } from '@gluestack/design-system'; +import AnatomyImage from '../../extra-components/nativewind/AnatomyImage'; This is an illustration of **Badge** component. @@ -145,6 +146,7 @@ To use this component in your project, include the following import statement in ```jsx import { Badge } from '@/components/ui/badge'; ``` + ```jsx export default () => ( From 741732d0515d72b85c5fedb96905449a3b3ea783 Mon Sep 17 00:00:00 2001 From: sra1kumar-NULL Date: Mon, 12 Aug 2024 16:34:40 +0530 Subject: [PATCH 14/27] fix: added minor change in select item docs --- .../ui/components/Forms/Select/index.stories.mdx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/example/storybook/src/ui/components/Forms/Select/index.stories.mdx b/example/storybook/src/ui/components/Forms/Select/index.stories.mdx index 5715be45b..fe27e69a8 100644 --- a/example/storybook/src/ui/components/Forms/Select/index.stories.mdx +++ b/example/storybook/src/ui/components/Forms/Select/index.stories.mdx @@ -591,6 +591,22 @@ It internally uses gluestack-ui's [ActionsheetItem](https://ui.gluestack.io/docs {`The value to be used for the item. This is the value that will be returned on form submission.`} + + + + textStyle + + + + - + + + - + + + {`We can style this SelectItem in native devices only. In Web we can't add any text styles.`} + + From 8a639325f33dea91d86ed14213df2b259358c2da Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Mon, 12 Aug 2024 18:24:58 +0530 Subject: [PATCH 15/27] feat: added anatomy image for tooltip component --- .../src/components/Alert/index.nw.stories.mdx | 2 +- .../src/components/Badge/index.nw.stories.mdx | 2 +- .../src/components/Toast/index.nw.stories.mdx | 2 +- .../src/components/Tooltip/index.nw.stories.mdx | 5 +++-- .../src/extra-components/nativewind/AnatomyImage.tsx | 8 ++++++-- 5 files changed, 12 insertions(+), 7 deletions(-) diff --git a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx index a18c4471f..66e196212 100644 --- a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx @@ -147,7 +147,7 @@ To use this component in your project, include the following import statement in import { Alert, AlertIcon, AlertText } from '@/components/ui/alert'; ``` - + ```jsx export default () => ( diff --git a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx index e48ce1cf7..4cd523026 100644 --- a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx @@ -146,7 +146,7 @@ To use this component in your project, include the following import statement in ```jsx import { Badge } from '@/components/ui/badge'; ``` - + ```jsx export default () => ( diff --git a/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx index 59f02eb73..8c2ce8bbb 100644 --- a/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Toast/index.nw.stories.mdx @@ -183,7 +183,7 @@ To use this component in your project, include the following import statement in import { useToast, Toast } from '@/components/ui/toast'; ``` - + ```jsx export default () => ( diff --git a/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx index 2f2b19495..0f479f096 100644 --- a/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx @@ -44,10 +44,9 @@ import { CollapsibleCode, Tabs } from '@gluestack/design-system'; - import Wrapper from '../../core-components/nativewind/Wrapper'; - import { Command } from 'lucide-react-native'; +import AnatomyImage from '../../extra-components/nativewind/AnatomyImage'; This is an illustration of **Tooltip** component. @@ -165,6 +164,8 @@ To use this component in your project, include the following import statement in import { Tooltip } from '@/components/ui/tooltip'; ``` + + ```jsx export default () => ( diff --git a/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx b/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx index f1c1c9c30..bb54a9695 100644 --- a/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx +++ b/example/storybook-nativewind/src/extra-components/nativewind/AnatomyImage.tsx @@ -4,16 +4,20 @@ import { Image } from '../../core-components/nativewind'; const AnatomyImage = ({ mobileUrl, webUrl, + web_className, + mobile_className, }: { mobileUrl: string; webUrl: string; + web_className: string; + mobile_className: string; }) => { return ( <> anatomy-image @@ -21,7 +25,7 @@ const AnatomyImage = ({ anatomy-image From b6949f5c8198a5f6099d51384f39927b8c222ebe Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Mon, 12 Aug 2024 18:32:14 +0530 Subject: [PATCH 16/27] feat: table and modal --- .../src/components/Modal/index.nw.stories.mdx | 4 +++- .../src/components/Table/index.nw.stories.mdx | 3 +++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx index 247fa46c1..6de55d2b5 100644 --- a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx @@ -59,9 +59,9 @@ import { InlineCode, Tabs } from '@gluestack/design-system'; - import Wrapper from '../../core-components/nativewind/Wrapper'; import { CollapsibleCode } from '@gluestack/design-system'; +import AnatomyImage from '../../extra-components/nativewind/AnatomyImage'; This is an illustration of **Modal** component. @@ -215,6 +215,8 @@ To use this component in your project, include the following import statement in import { Modal } from '@/components/ui/modal'; ``` + + ```jsx export default () => ( diff --git a/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx index 7b31ae27c..e966519ec 100644 --- a/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx @@ -41,6 +41,7 @@ import { } from '@gluestack/design-system'; import { transformedCode } from '../../utils'; import Wrapper from '../../core-components/nativewind/Wrapper'; +import AnatomyImage from '../../extra-components/nativewind/AnatomyImage'; This is an illustration of a **Table** component. @@ -199,6 +200,8 @@ import { } from '@/components/ui/table'; ``` + + ```jsx export default () => ( From 8b0e7a3b9e1bb75bfbd0101db6427e8081171a71 Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Mon, 12 Aug 2024 18:40:53 +0530 Subject: [PATCH 17/27] feat: avatar, button, radio --- .../src/components/Avatar/index.nw.stories.mdx | 4 +++- .../src/components/Button/index.nw.stories.mdx | 3 +++ .../src/components/Radio/index.nw.stories.mdx | 3 +++ 3 files changed, 9 insertions(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx index 0ac338af3..8f354c01b 100644 --- a/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx @@ -38,8 +38,8 @@ import { Tabs } from '@gluestack/design-system'; import { CollapsibleCode } from '@gluestack/design-system'; - import Wrapper from '../../core-components/nativewind/Wrapper'; +import AnatomyImage from '../../extra-components/nativewind/AnatomyImage'; This is an illustration of **Avatar** component. @@ -142,6 +142,8 @@ import { } from '@/components/ui/avatar'; ``` + + > IOS: It is highly recommended to use `` before `` to avoid indexing issues in IOS. ```jsx 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 5887fb997..448d0d0fd 100644 --- a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx @@ -45,6 +45,7 @@ import { import Wrapper from '../../core-components/nativewind/Wrapper'; import { CollapsibleCode } from '@gluestack/design-system'; import colors from 'tailwindcss/colors'; +import AnatomyImage from '../../extra-components/nativewind/AnatomyImage'; This is an illustration of **Button** component. @@ -142,6 +143,8 @@ import { } from '@/components/ui/button'; ``` + + ```jsx export default () => ( 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 50f5932a7..e24d00ffc 100644 --- a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx @@ -36,6 +36,7 @@ import { import Wrapper from '../../core-components/nativewind/Wrapper'; import { CollapsibleCode } from '@gluestack/design-system'; +import AnatomyImage from '../../extra-components/nativewind/AnatomyImage'; This is an illustration of **Radio** component. @@ -136,6 +137,8 @@ To use this component in your project, include the following import statement in import { Radio } from '@gluestack-ui/themed'; ``` + + ```jsx export default () => ( From a56ec0cbd5937df08ecda9a6149c359159172e2a Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Mon, 12 Aug 2024 18:45:40 +0530 Subject: [PATCH 18/27] feat: checkbox, form-control --- .../src/components/Checkbox/index.nw.stories.mdx | 3 +++ .../src/components/FormControl/index.nw.stories.mdx | 3 +++ 2 files changed, 6 insertions(+) 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 117a82f89..2ac3606b9 100644 --- a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx @@ -44,6 +44,7 @@ import { import Wrapper from '../../core-components/nativewind/Wrapper'; import { CollapsibleCode } from '@gluestack/design-system'; +import AnatomyImage from '../../extra-components/nativewind/AnatomyImage'; This is an illustration of **Checkbox** component. @@ -144,6 +145,8 @@ To use this component in your project, include the following import statement in import { Checkbox } from '@/components/ui/checkbox'; ``` + + ```jsx export default () => ( 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 eca08b421..054e2feb9 100644 --- a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx @@ -86,6 +86,7 @@ import { import { transformedCode } from '../../utils'; import { useState } from 'react'; import Wrapper from '../../core-components/nativewind/Wrapper'; +import AnatomyImage from '../../extra-components/nativewind/AnatomyImage'; This is an illustration of **FormControl** component. @@ -287,6 +288,8 @@ To use this component in your project, include the following import statement in import { FormControl } from '@/components/ui/form-control'; ``` + + ```jsx export default () => ( From a32fad2051de2e23b460b759431687a57ad5bdfc Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Mon, 12 Aug 2024 18:52:11 +0530 Subject: [PATCH 19/27] feat: alert, input, divider --- .../src/components/Divider/index.nw.stories.mdx | 3 +++ .../src/components/Input/index.nw.stories.mdx | 4 +++- .../src/components/Slider/index.nw.stories.mdx | 5 +++-- 3 files changed, 9 insertions(+), 3 deletions(-) diff --git a/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx index d4116307e..ad2e71b4b 100644 --- a/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx @@ -35,6 +35,7 @@ import { } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; import { CollapsibleCode, Tabs } from '@gluestack/design-system'; +import AnatomyImage from '../../extra-components/nativewind/AnatomyImage'; This is an illustration of **Divider** component. @@ -121,6 +122,8 @@ To use this component in your project, include the following import statement in import { Divider } from '@/components/ui/divider'; ``` + + ```jsx export default () => ; ``` 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 178b20153..ec4c5ccbf 100644 --- a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx @@ -41,8 +41,8 @@ import { CollapsibleCode, Tabs } from '@gluestack/design-system'; - import Wrapper from '../../core-components/nativewind/Wrapper'; +import AnatomyImage from '../../extra-components/nativewind/AnatomyImage'; This is an illustration of **Input** component. @@ -148,6 +148,8 @@ To use this component in your project, include the following import statement in import { Input } from '@/components/ui/input'; ``` + + ```jsx export default () => ( 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 55f30e7b4..47374ba23 100644 --- a/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx @@ -21,7 +21,6 @@ import { SliderFilledTrack, SliderThumb, } from '../../core-components/nativewind'; - import { HStack, Volume2Icon, Box } from '../../core-components/nativewind'; import { VStack, @@ -40,10 +39,10 @@ import { Table, TableContainer, } from '@gluestack/design-system'; - import Wrapper from '../../core-components/nativewind/Wrapper'; import { Center } from '../../core-components/nativewind/center'; import { CollapsibleCode, Tabs } from '@gluestack/design-system'; +import AnatomyImage from '../../extra-components/nativewind/AnatomyImage'; This is an illustration of **Slider** component. @@ -148,6 +147,8 @@ To use this component in your project, include the following import statement in import { Slider } from '@/components/ui/slider'; ``` + + ```jsx export default () => ( From 7905b4b0aa08a95e2f29e85e9b1a45fceeb413dc Mon Sep 17 00:00:00 2001 From: Rajat Chaudhary Date: Mon, 12 Aug 2024 18:59:13 +0530 Subject: [PATCH 20/27] feat: link, textarea, fab --- .../src/components/Fab/index.nw.stories.mdx | 6 ++++-- .../src/components/Link/index.nw.stories.mdx | 4 +++- .../src/components/Textarea/index.nw.stories.mdx | 3 +++ 3 files changed, 10 insertions(+), 3 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 1f650af5c..e7d896311 100644 --- a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx @@ -48,9 +48,9 @@ import { Tabs } from '@gluestack/design-system'; import { ShoppingCartIcon } from 'lucide-react-native' - import Wrapper from '../../core-components/nativewind/Wrapper'; import { CollapsibleCode } from '@gluestack/design-system'; +import AnatomyImage from '../../extra-components/nativewind/AnatomyImage'; This is an illustration of **Fab** component. @@ -156,7 +156,7 @@ npm i @gluestack-ui/fab -### API Reference +## API Reference To use this component in your project, include the following import statement in your file. @@ -164,6 +164,8 @@ To use this component in your project, include the following import statement in import { Fab } from '@gluestack-ui/themed'; ``` + + ```jsx export default () => ( 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 e9d8cd274..567f29d2b 100644 --- a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx @@ -24,9 +24,9 @@ import { InlineCode, Tabs } from '@gluestack/design-system'; - import Wrapper from '../../core-components/nativewind/Wrapper'; import { CollapsibleCode } from '@gluestack/design-system'; +import AnatomyImage from '../../extra-components/nativewind/AnatomyImage'; This is an illustration of **Link** component. @@ -106,6 +106,8 @@ To use this component in your project, include the following import statement in import { Link } from '@/components/ui/link'; ``` + + ```jsx export default () => ( 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 a6b9ced6b..483540bfc 100644 --- a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx @@ -35,6 +35,7 @@ import { CollapsibleCode } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; +import AnatomyImage from '../../extra-components/nativewind/AnatomyImage'; This is an illustration of **Textarea** component. @@ -137,6 +138,8 @@ To use this component in your project, include the following import statement in import { Textarea } from '@/components/ui/textarea'; ``` + + ```jsx export default () => (