fix: platform based elements

gluestack · Aug 16, 2024 · a2e218b · a2e218b
1 parent cbbbef4
commit a2e218b
Show file tree

Hide file tree

Showing 5 changed files with 171 additions and 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
@@ -132,7 +132,7 @@ This section provides a comprehensive reference list for the component props, de
 
 #### Box
 
-<p>{`Renders a <div /> on web and a View on native.`}</p>
+Renders a `<div />` on web and a `View` on native.
 
 <>
   <TableContainer>

diff --git 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 `<div />` on web and a `View` on native.
+
+<>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Platform</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Output</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>{`Web`}</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`<div />`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>Native</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`<View />`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</>
+
 
 <>
   <TableContainer>

diff --git 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., `<path>`, `<rect>` etc) with the corresponding React Native SVG components (e.g., `<Path>`, `<Rect>` 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., `<path>`, `<rect>` etc) with the corresponding React Native SVG components (e.g., `<Path>`, `<Rect>` 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 :
 `<path fill="#FF0000" d="M10 10L20 20" /> `
 
-After :
+on Native :
 `<Path fill="currentColor" d="M10 10L20 20" /> `
 
 <Wrapper>
@@ -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
@@ -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 `<div />` on web and a `Animated.View` on native and has the following properties:
+
+<>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Platform</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Output</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>{`Web`}</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`<div />`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>Native</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`<View />`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</>
+
 
 <>
   <TableContainer>
@@ -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 `<div />` on web and a `Animated.View` on native and has the following properties:
+
+<>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Platform</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Output</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>{`Web`}</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`<div />`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>Native</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`<View />`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</>
 
 <>
   <TableContainer>

diff --git 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.
+<p>{`Renders a <span /> on web and a Text on native.`}</p>
+
+<>
+  <TableContainer>
+    <Table>
+      <Table.THead>
+        <Table.TR>
+          <Table.TH>
+            <Table.TText>Platform</Table.TText>
+          </Table.TH>
+          <Table.TH>
+            <Table.TText>Output</Table.TText>
+          </Table.TH>
+        </Table.TR>
+      </Table.THead>
+      <Table.TBody>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>{`Web`}</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`<span />`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+        <Table.TR>
+          <Table.TD>
+            <Table.TText>
+              <InlineCode>Native</InlineCode>
+            </Table.TText>
+          </Table.TD>
+          <Table.TD>
+            <Table.TText>{`<Text />`}</Table.TText>
+          </Table.TD>
+        </Table.TR>
+      </Table.TBody>
+    </Table>
+  </TableContainer>
+</>
 
 ### 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