From 7da8421a0bbcb52102d69886a25d37c903b82d66 Mon Sep 17 00:00:00 2001 From: viraj-10 Date: Fri, 16 Aug 2024 12:30:47 +0530 Subject: [PATCH] fix: image for storybook and added rsc table --- example/storybook-nativewind/babel.config.js | 4 + .../src/components/Box/index.nw.stories.mdx | 43 +++++++++- .../components/Center/index.nw.stories.mdx | 43 +++++++++- .../src/components/Grid/index.nw.stories.mdx | 86 ++++++++++++++++++- .../components/HStack/index.nw.stories.mdx | 41 ++++++++- .../components/VStack/index.nw.stories.mdx | 43 +++++++++- .../storybook-components/NextImageAlt.tsx | 30 +++++++ 7 files changed, 280 insertions(+), 10 deletions(-) create mode 100644 example/storybook-nativewind/src/extra-components/storybook-components/NextImageAlt.tsx diff --git a/example/storybook-nativewind/babel.config.js b/example/storybook-nativewind/babel.config.js index e1b7980c5..13dd0bbdf 100644 --- a/example/storybook-nativewind/babel.config.js +++ b/example/storybook-nativewind/babel.config.js @@ -147,6 +147,10 @@ module.exports = function (api) { __dirname, '../../example/storybook-nativewind/tailwind.config.js' ), + 'next/image': path.resolve( + __dirname, + './src/extra-components/storybook-components/NextImageAlt' + ), }, }, ], diff --git a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx index 948863b7e..f06a7589a 100644 --- a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx @@ -24,7 +24,7 @@ import { transformedCode } from '../../utils'; import { AppProvider, CodePreview, Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; +import { CollapsibleCode, Table, TableContainer, } from '@gluestack/design-system'; This is an illustration of **Box** component. @@ -132,4 +132,43 @@ This section provides a comprehensive reference list for the component props, de #### Box -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. +

{`Renders a

on web and a View on native.`}

+ +<> + + + + + + Platform + + + Output + + + + + + + + {`Web`} + + + + {`
`} + + + + + + Native + + + + {``} + + + +
+ + diff --git a/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx index 61c11275f..fb6573924 100644 --- a/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx @@ -20,7 +20,7 @@ import { Center } from '../../core-components/nativewind'; import { Text } from '../../core-components/nativewind/text'; import { transformedCode } from '../../utils'; -import { AppProvider, CodePreview, Table } from '@gluestack/design-system'; +import { AppProvider, CodePreview, Table, TableContainer, } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; import { CollapsibleCode, Tabs } from '@gluestack/design-system'; @@ -130,4 +130,43 @@ This section provides a comprehensive reference list for the component props, de #### Center -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. \ No newline at end of file +

{`Renders a

on web and a View on native.`}

+ +<> + + + + + + Platform + + + Output + + + + + + + + {`Web`} + + + + {`
`} + + + + + + Native + + + + {``} + + + +
+ + \ No newline at end of file diff --git a/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx index fa77557e9..6530e1583 100644 --- a/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx @@ -178,7 +178,48 @@ This section provides a comprehensive reference list for the component props, de ### Grid -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component on native and html div tag on web. +

{`Renders a

on web and a View on native.`}

+ +<> + + + + + + Platform + + + Output + + + + + + + + {`Web`} + + + + {`
`} + + + + + + Native + + + + {``} + + + +
+ + + +#### props <> @@ -223,7 +264,48 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/ ### GridItem -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component on native and html div tag on web. +

{`Renders a

on web and a View on native.`}

+ +<> + + + + + + Platform + + + Output + + + + + + + + {`Web`} + + + + {`
`} + + + + + + Native + + + + {``} + + + +
+ + + +#### props <> diff --git a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx index 418c42055..1dd5e19ba 100644 --- a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx @@ -141,7 +141,46 @@ This section provides a comprehensive reference list for the component props, de #### HStack -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. +

{`Renders a

on web and a View on native.`}

+ +<> + + + + + + Platform + + + Output + + + + + + + + {`Web`} + + + + {`
`} + + + + + + Native + + + + {``} + + + +
+ + ### Accessibility diff --git a/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx b/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx index 93ef435af..145264283 100644 --- a/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx @@ -147,7 +147,46 @@ This section provides a comprehensive reference list for the component props, de #### VStack -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. +

{`Renders a

on web and a View on native.`}

+ +<> + + + + + + Platform + + + Output + + + + + + + + {`Web`} + + + + {`
`} + + + + + + Native + + + + {``} + + + +
+ + ### Accessibility @@ -157,8 +196,6 @@ In essence, the VStack acts as a container that inherits and propagates the acce ### Props -VStack component is created using View component from react-native. It extends all the props supported by [React Native View](https://reactnative.dev/docs/view#props), [utility props](https://ui.gluestack.io/docs/styling/utility-and-sx-props) and the props mentioned below. - #### VStack <> diff --git a/example/storybook-nativewind/src/extra-components/storybook-components/NextImageAlt.tsx b/example/storybook-nativewind/src/extra-components/storybook-components/NextImageAlt.tsx new file mode 100644 index 000000000..d3b3edd9c --- /dev/null +++ b/example/storybook-nativewind/src/extra-components/storybook-components/NextImageAlt.tsx @@ -0,0 +1,30 @@ +import { cssInterop } from 'nativewind'; +import React from 'react'; +import { Image } from 'react-native'; +cssInterop(Image, { className: 'style' }); +export default function NextImageAlt({ + src, + alt, + className, +}: { + src: string; + alt: string; + className: string; + props?: any; +}) { + return ( + {alt} + ); +}