From 74d2bd47c0349b6e7d3a0172ae4aa1255caaa1f7 Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 7 May 2024 15:09:01 +0530 Subject: [PATCH 1/5] fix: table docs rsc note --- .../src/components/Table/index.nw.stories.mdx | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) 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 b4d92feaf2..ec4f6d7c31 100644 --- a/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx @@ -144,7 +144,12 @@ This is an illustration of a **Table** component. <> -### 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. ```jsx @@ -152,9 +157,9 @@ This is an illustration of a **Table** component. ``` -> 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. ```jsx @@ -163,7 +168,7 @@ This is an illustration of a **Table** component. -### 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. ```jsx @@ -171,7 +176,7 @@ This is an illustration of a **Table** component. ``` -### Step 4: Update the import paths to match your project setup. +### Step 5: Update the import paths to match your project setup. From d74aea39e5c83356754ee3a4ff589bcba4604563 Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 7 May 2024 15:15:21 +0530 Subject: [PATCH 2/5] fix: add roboto font family in installation page config file --- .../src/home/getting-started/Installation/index.nw.stories.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/example/storybook-nativewind/src/home/getting-started/Installation/index.nw.stories.mdx b/example/storybook-nativewind/src/home/getting-started/Installation/index.nw.stories.mdx index 306be3a18a..2ae8406078 100644 --- a/example/storybook-nativewind/src/home/getting-started/Installation/index.nw.stories.mdx +++ b/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", From 6fcbdba075a8467f58649feca60b3feb58b8eb55 Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 7 May 2024 15:30:00 +0530 Subject: [PATCH 3/5] fix: rsc note in table, box, center, hstack, vstack, grid, heading, text, card components --- .../src/components/Box/index.nw.stories.mdx | 4 ++-- .../src/components/Card/index.nw.stories.mdx | 4 ++-- .../src/components/Center/index.nw.stories.mdx | 4 ++-- .../src/components/Grid/index.nw.stories.mdx | 4 ++-- .../src/components/HStack/index.nw.stories.mdx | 4 ++-- .../src/components/Heading/index.nw.stories.mdx | 4 ++-- .../src/components/Table/index.nw.stories.mdx | 2 +- .../src/components/Text/index.nw.stories.mdx | 4 ++-- .../src/components/VStack/index.nw.stories.mdx | 4 ++-- 9 files changed, 17 insertions(+), 17 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 06d4992881..0a4d6422b7 100644 --- a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx @@ -88,9 +88,9 @@ This is an illustration of **Box** component. ``` -> 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. ```jsx 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 554f0da739..e8e37c7f60 100644 --- a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx @@ -120,9 +120,9 @@ This is an illustration of a **Card** component. ``` -> 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. ```jsx 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 3dfeace13b..0b5a4493e2 100644 --- a/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx @@ -86,9 +86,9 @@ This is an illustration of **Center** component. ``` -> 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. ```jsx 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 5f44ba0e23..84c1055b54 100644 --- a/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx @@ -118,9 +118,9 @@ This is an illustration of **Grid** component. ``` -> 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. ```jsx 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 3013f178eb..d35f6ecc1d 100644 --- a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx @@ -97,9 +97,9 @@ This is an illustration of **HStack** component. ``` -> 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. ```jsx diff --git a/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx index 6f984829d5..c27bc8ea39 100644 --- a/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx @@ -85,9 +85,9 @@ This is an illustration of **Heading** component. ``` -> 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. ```jsx 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 ec4f6d7c31..26fec3a48a 100644 --- a/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx @@ -157,7 +157,7 @@ This is an illustration of a **Table** component. ``` -> 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.** +> 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 3(optional): Copy and paste the following code into index.web.tsx in your project. 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 295fcb32df..637fb3bf2e 100644 --- a/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx @@ -86,9 +86,9 @@ This is an illustration of **Text** component. ``` -> 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. ```jsx 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 957a0a419c..b6a9b837f9 100644 --- a/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx @@ -103,9 +103,9 @@ This is an illustration of **VStack** component. ``` -> 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. ```jsx From c24936e153f9b21e9c84ff4cfd058c61f3224d0a Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 7 May 2024 15:34:17 +0530 Subject: [PATCH 4/5] fix: replace phone number placeholder with 1234567890 --- .../src/components/Table/index.nw.stories.mdx | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) 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 26fec3a48a..1de9c41f24 100644 --- a/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Table/index.nw.stories.mdx @@ -370,32 +370,32 @@ function App(){ Rajesh Kumar rajesh@example.com - +91 98765 43210 + 1234567890 Priya Sharma priya@example.com - +91 87654 32109 + 1234567890 Ravi Patel ravi@example.com - +91 76543 21098 + 1234567890 Ananya Gupta ananya@example.com - +91 65432 10987 + 1234567890 Arjun Singh arjun@example.com - +91 54321 09876 + 1234567890 Nisha Verma nisha@example.com - +91 43210 98765 + 1234567890 From 614cf90178bb5bad70605f98c8bfd6cbf52c5917 Mon Sep 17 00:00:00 2001 From: Damini Date: Tue, 7 May 2024 15:54:13 +0530 Subject: [PATCH 5/5] fix: grid docs changes --- .../src/components/Grid/index.nw.stories.mdx | 24 +++++++++---------- 1 file changed, 12 insertions(+), 12 deletions(-) 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 84c1055b54..5fb671c594 100644 --- a/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Grid/index.nw.stories.mdx @@ -271,22 +271,22 @@ Use the gap-* utilities to change the gap between both rows and columns in grid }} metaData={{ code: ` - + A B C @@ -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. - 01 - 04 - 04 + 1 + 4 + 4 - 01 - 02 - 03 - 04 + 1 + 2 + 3 + 4