Merge pull request #2119 from gluestack/fix/nw-docs-issues

fix/nw-docs-issues

example/storybook-nativewind/src/components/Box/index.nw.stories.mdx

@@ -88,9 +88,9 @@ This is an illustration of **Box** component.
 ```
 </CollapsibleCode>
 
-> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
+> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
 
-### Step 2: Copy and paste the following code into index.web.tsx in your project.
+### Step 2(optional): Copy and paste the following code into index.web.tsx in your project.
 <CollapsibleCode>
 
 ```jsx 

example/storybook-nativewind/src/components/Card/index.nw.stories.mdx

@@ -120,9 +120,9 @@ This is an illustration of a **Card** component.
 ```
 </CollapsibleCode>
 
-> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
+> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
 
-### Step 2: Copy and paste the following code into index.web.tsx in your project.
+### Step 2(optional): Copy and paste the following code into index.web.tsx in your project.
 <CollapsibleCode>
 
 ```jsx 

example/storybook-nativewind/src/components/Center/index.nw.stories.mdx

@@ -86,9 +86,9 @@ This is an illustration of **Center** component.
 ```
 </CollapsibleCode>
 
-> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
+> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
 
-### Step 2: Copy and paste the following code into index.web.tsx in your project.
+### Step 2(optional): Copy and paste the following code into index.web.tsx in your project.
 <CollapsibleCode>
 
 ```jsx 

example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx

@@ -118,9 +118,9 @@ This is an illustration of **Grid** component.
 ```
 </CollapsibleCode>
 
-> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
+> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
 
-### Step 2: Copy and paste the following code into index.web.tsx in your project.
+### Step 2(optional): Copy and paste the following code into index.web.tsx in your project.
 <CollapsibleCode>
 
 ```jsx 
@@ -271,22 +271,22 @@ Use the gap-* utilities to change the gap between both rows and columns in grid
     }}
     metaData={{
       code: `
-    <Grid numColumns={9} className="gap-10">
+    <Grid numColumns={9} className="gap-4">
       <GridItem
         colSpan={3}
-        className="bg-background-50 p-4 rounded-md text-center"
+        className="bg-background-50 p-3 rounded-md text-center"
       >
         <Text>A</Text>
       </GridItem>
        <GridItem
         colSpan={3}
-        className="bg-background-50 p-4 rounded-md text-center"
+        className="bg-background-50 p-3 rounded-md text-center"
       >
         <Text>B</Text>
       </GridItem>
       <GridItem
         colSpan={3}
-        className="bg-background-50 p-4 rounded-md text-center"
+        className="bg-background-50 p-3 rounded-md text-center"
       >
         <Text>C</Text>
       </GridItem>
@@ -375,7 +375,7 @@ Use the gap-x-* and gap-y-* utilities to change the gap between columns and rows
 
 ### Nested Grids
 
-The following example dipicts how easily you can nest grids to create complex layouts with multiple levels of nesting.
+The following example depicts how easily you can nest grids to create complex layouts with multiple levels of nesting.
 
 <Wrapper>
   <CodePreview
@@ -405,20 +405,20 @@ The following example dipicts how easily you can nest grids to create complex la
         className="bg-background-50 p-3 rounded-md text-center"
       >
       <Grid numColumns={4} className="gap-5">
-        <GridItem colSpan={1} className="bg-background-200 p-3 rounded-md"><Text className="text-sm">01</Text></GridItem>
-        <GridItem colSpan={3} className="bg-background-200 p-3 rounded-md"><Text className="text-sm">04</Text></GridItem>
-        <GridItem colSpan={4} className="bg-background-200 p-3 rounded-md"><Text className="text-sm">04</Text></GridItem>
+        <GridItem colSpan={1} className="bg-background-200 p-2 rounded-md"><Text className="text-sm">1</Text></GridItem>
+        <GridItem colSpan={3} className="bg-background-200 p-2 rounded-md"><Text className="text-sm">4</Text></GridItem>
+        <GridItem colSpan={4} className="bg-background-200 p-2 rounded-md"><Text className="text-sm">4</Text></GridItem>
         </Grid>
       </GridItem>
       <GridItem
         colSpan={4}
         className="bg-background-50 p-3 rounded-md text-center"
       >
         <Grid numColumns={4} className="gap-5">
-        <GridItem colSpan={2} className="bg-background-200 p-3 rounded-md"><Text className="text-sm">01</Text></GridItem>
-        <GridItem colSpan={2} className="bg-background-200 p-3 rounded-md"><Text className="text-sm">02</Text></GridItem>
-        <GridItem colSpan={2} className="bg-background-200 p-3 rounded-md"><Text className="text-sm">03</Text></GridItem>
-        <GridItem colSpan={2} className="bg-background-200 p-3 rounded-md"><Text className="text-sm">04</Text></GridItem>
+        <GridItem colSpan={2} className="bg-background-200 p-2 rounded-md"><Text className="text-sm">1</Text></GridItem>
+        <GridItem colSpan={2} className="bg-background-200 p-2 rounded-md"><Text className="text-sm">2</Text></GridItem>
+        <GridItem colSpan={2} className="bg-background-200 p-2 rounded-md"><Text className="text-sm">3</Text></GridItem>
+        <GridItem colSpan={2} className="bg-background-200 p-2 rounded-md"><Text className="text-sm">4</Text></GridItem>
         </Grid>
       </GridItem>
     </Grid>

example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx

@@ -97,9 +97,9 @@ This is an illustration of **HStack** component.
 ```
 </CollapsibleCode>
 
-> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
+> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
 
-### Step 2: Copy and paste the following code into index.web.tsx in your project.
+### Step 2(optional): Copy and paste the following code into index.web.tsx in your project.
 <CollapsibleCode>
 
 ```jsx 

example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx

@@ -85,9 +85,9 @@ This is an illustration of **Heading** component.
 ```
 </CollapsibleCode>
 
-> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
+> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
 
-### Step 2: Copy and paste the following code into index.web.tsx in your project.
+### Step 2(optional): Copy and paste the following code into index.web.tsx in your project.
 <CollapsibleCode>
 
 ```jsx 

example/storybook-nativewind/src/components/Table/index.nw.stories.mdx

@@ -144,17 +144,22 @@ This is an illustration of a **Table** component.
     <Tabs.TabPanel value="manual"> 
 <>
 
-### Step 1: Copy and paste the following code into index.tsx in your project.
+### Step 1: Install the following dependencies:
+  ```bash
+ npm i @expo/html-elements
+  ```
+
+### Step 2: Copy and paste the following code into index.tsx in your project.
 <CollapsibleCode>
 
 ```jsx 
 %%-- File: core-components/nativewind/table/index.tsx --%% 
 ```
 </CollapsibleCode>
 
-> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
+> Note: **Step 3 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 4 directly if you don't have this requirement.**
 
-### Step 2: Copy and paste the following code into index.web.tsx in your project.
+### Step 3(optional): Copy and paste the following code into index.web.tsx in your project.
 <CollapsibleCode>
 
 ```jsx 
@@ -163,15 +168,15 @@ This is an illustration of a **Table** component.
 </CollapsibleCode>
 
 
-### Step 3: Copy and paste the following code into styles.tsx in your project.
+### Step 4: Copy and paste the following code into styles.tsx in your project.
 <CollapsibleCode>
 
 ```jsx 
 %%-- File: core-components/nativewind/table/styles.tsx --%% 
 ```
 </CollapsibleCode>
 
-### Step 4: Update the import paths to match your project setup.
+### Step 5: Update the import paths to match your project setup.
 </>
     </Tabs.TabPanel>
   </Tabs.TabPanels>
@@ -365,32 +370,32 @@ function App(){
           <TableRow>
             <TableData>Rajesh Kumar</TableData>
             <TableData fontWeight="$normal">[email protected]</TableData>
-            <TableData fontWeight="$normal">+91 98765 43210</TableData>
+            <TableData fontWeight="$normal">1234567890</TableData>
           </TableRow>
           <TableRow>
             <TableData>Priya Sharma</TableData>
             <TableData fontWeight="$normal">[email protected]</TableData>
-            <TableData fontWeight="$normal">+91 87654 32109</TableData>
+            <TableData fontWeight="$normal">1234567890</TableData>
           </TableRow>
           <TableRow>
             <TableData>Ravi Patel</TableData>
             <TableData fontWeight="$normal">[email protected]</TableData>
-            <TableData fontWeight="$normal">+91 76543 21098</TableData>
+            <TableData fontWeight="$normal">1234567890</TableData>
           </TableRow>
           <TableRow>
             <TableData>Ananya Gupta</TableData>
             <TableData fontWeight="$normal">[email protected]</TableData>
-            <TableData fontWeight="$normal">+91 65432 10987</TableData>
+            <TableData fontWeight="$normal">1234567890</TableData>
           </TableRow>
           <TableRow>
             <TableData>Arjun Singh</TableData>
             <TableData fontWeight="$normal">[email protected]</TableData>
-            <TableData fontWeight="$normal">+91 54321 09876</TableData>
+            <TableData fontWeight="$normal">1234567890</TableData>
           </TableRow>
           <TableRow>
             <TableData>Nisha Verma</TableData>
             <TableData fontWeight="$normal">[email protected]</TableData>
-            <TableData fontWeight="$normal">+91 43210 98765</TableData>
+            <TableData fontWeight="$normal">1234567890</TableData>
           </TableRow>
         </TableBody>
         <TableCaption fontWeight="$normal">

example/storybook-nativewind/src/components/Text/index.nw.stories.mdx

@@ -86,9 +86,9 @@ This is an illustration of **Text** component.
 ```
 </CollapsibleCode>
 
-> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
+> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
 
-### Step 2: Copy and paste the following code into index.web.tsx in your project.
+### Step 2(optional): Copy and paste the following code into index.web.tsx in your project.
 <CollapsibleCode>
 
 ```jsx 

example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx

@@ -103,9 +103,9 @@ This is an illustration of **VStack** component.
 ```
 </CollapsibleCode>
 
-> Note: **This Step is (optional) and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
+> Note: **Step 2 is optional and only required if you want to add support for [React Server Components](https://vercel.com/blog/understanding-react-server-components), You can skip this and jump to Step 3 directly if you don't have this requirement.**
 
-### Step 2: Copy and paste the following code into index.web.tsx in your project.
+### Step 2(optional): Copy and paste the following code into index.web.tsx in your project.
 <CollapsibleCode>
 
 ```jsx 

example/storybook-nativewind/src/home/getting-started/Installation/index.nw.stories.mdx

@@ -243,6 +243,7 @@ module.exports = {
         heading: undefined,
         body: undefined,
         mono: undefined,
+        roboto: ['Roboto', 'sans-serif'],
       },
       fontWeight: {
         hairline: "100",