From a2e218b28d71634f281aa3155acad4fdde095184 Mon Sep 17 00:00:00 2001 From: viraj-10 Date: Fri, 16 Aug 2024 14:23:23 +0530 Subject: [PATCH] fix: platform based elements --- .../src/components/Box/index.nw.stories.mdx | 2 +- .../src/components/Card/index.nw.stories.mdx | 42 +++++++++- .../src/components/Icon/index.nw.stories.mdx | 21 ++--- .../components/Skeleton/index.nw.stories.mdx | 83 ++++++++++++++++++- .../src/components/Text/index.nw.stories.mdx | 43 +++++++++- 5 files changed, 171 insertions(+), 20 deletions(-) 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 f06a7589a..ccdc54e84 100644 --- a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx @@ -132,7 +132,7 @@ This section provides a comprehensive reference list for the component props, de #### Box -

{`Renders a

on web and a View on native.`}

+Renders a `
` on web and a `View` on native. <> diff --git a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx index 551eb9bfb..4206bd5d3 100644 --- a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx @@ -164,7 +164,47 @@ This section provides a comprehensive reference list for the component props, de ### Card -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/Icon/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx index 18b8f6052..a79d86dcf 100644 --- a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx @@ -191,7 +191,7 @@ This section provides a comprehensive reference list for the component props, de #### Icon -Pre built icons provided by gluestack-ui inherits all the properties of React Native SVG's [svg](https://github.com/software-mansion/react-native-svg/tree/main/Example) component. +Pre built icons provided by gluestack-ui inherits all the properties of React Native SVG's [Svg](https://github.com/software-mansion/react-native-svg/tree/main/Example) on native and [svg](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/svg) html element on web. The Icon components inherits all the properties that third party library provides and can be directly applied as props. @@ -207,8 +207,6 @@ Role: img is passed ### Props -Icon component is created using AsForwarder component from @gluestack-style/react. It extends all the props supported by [gluestack-ui AsForwarder](https://gluestack.io/style/docs/api/as-forwarder) and the props mentioned below. - #### Image <> @@ -425,25 +423,20 @@ Below is a list of all of the icons in the library. #### SVG & Custom Icons -We can directly create Icon using `createIcon` function exported from `@gluestack-ui/themed` and use it by passing it in `as` prop in `Icon` component. -CreateIcon function takes viewBox, d, path etc as parameters. We can use svgs from other icon libraries like fluent, react-icons etc. - -#### SVG & Custom Icons - -We can directly create Icon using `createIcon` function exported from `@gluestack-ui/themed` and use it by passing it in `as` prop in `Icon` component. +We can directly create Icon using `createIcon` function exported from `@/components/ui/icon` and use it by passing it in `as` prop in `Icon` component. CreateIcon function takes viewBox, d, path etc as parameters. We can use svgs from other icon libraries like fluent, react-icons etc. ##### Notes to remember while using createIcon function - Pass svg props such as `viewBox` in `createIcon` directly. - Copy the svg code without the SVG tag directly into the function argument `Path` or `D` or whichever prop justifies your svg. -- Replace HTML SVG tags (e.g., ``, `` etc) with the corresponding React Native SVG components (e.g., ``, `` etc). -- For any color property (i.e. fill, stroke etc), if you want to override that color, pass "currentColor" instead of a colorCode. +- Replace HTML SVG tags (e.g., ``, `` etc) with the corresponding React Native SVG components (e.g., ``, `` etc) for native. +- For any color property (i.e. fill, stroke etc), if you want to override that color, pass "currentColor" instead of a colorCode or className. -Before : +on Web : ` ` -After : +on Native : ` ` @@ -453,7 +446,7 @@ After : metaData={{ code: ` const GluestackIcon = createIcon({ - // createIcon function is imported from '@gluestack-ui/themed' + // createIcon function is imported from '@/components/ui/icon' viewBox: '0 0 32 32', path: ( <> diff --git a/example/storybook-nativewind/src/components/Skeleton/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Skeleton/index.nw.stories.mdx index 20b7e9789..9d036de4f 100644 --- a/example/storybook-nativewind/src/components/Skeleton/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Skeleton/index.nw.stories.mdx @@ -132,7 +132,47 @@ This section provides a comprehensive reference list for the component props, de ### Skeleton -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. +Renders a `
` on web and a `Animated.View` on native and has the following properties: + +<> + + + + + + Platform + + + Output + + + + + + + + {`Web`} + + + + {`
`} + + + + + + Native + + + + {``} + + + +
+ + + <> @@ -217,7 +257,46 @@ It inherits all the properties of React Native's [View](https://reactnative.dev/ ### SkeletonText -It inherits all the properties of React Native's [View](https://reactnative.dev/docs/view) component. +Renders a `
` on web and a `Animated.View` on native and has the following properties: + +<> + + + + + + Platform + + + Output + + + + + + + + {`Web`} + + + + {`
`} + + + + + + Native + + + + {``} + + + +
+ + <> diff --git a/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx index 9c6a333e7..ccaa56db0 100644 --- a/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx @@ -130,11 +130,50 @@ This section provides a comprehensive reference list for the component props, de #### Text -It inherits all the properties of React Native's [Text](https://reactnative.dev/docs/text) component. +

{`Renders a on web and a Text on native.`}

+ +<> + + + + + + Platform + + + Output + + + + + + + + {`Web`} + + + + {``} + + + + + + Native + + + + {``} + + + +
+ + ### Props -Text component is created using Text component from react-native. It extends all the props supported by [React Native Text](https://reactnative.dev/docs/text#props), [utility props](/ui/docs/styling/utility-and-sx-props) and the props mentioned below. +Text component is created using `Text` component from react-native on native and `span` html element on web. It accepts the following props: #### Text