fix: stories

gluestack · Mar 5, 2024 · 0aaf8e5 · 0aaf8e5
1 parent 98e95ee
commit 0aaf8e5
Show file tree

Hide file tree

Showing 68 changed files with 336 additions and 71 deletions.
diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.nw.storiesold.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.nw.storiesold.mdx
@@ -148,7 +148,11 @@ npm i @gluestack-ui/actionsheet
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/nativewind/Actionsheet/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/Actionsheet/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx
@@ -152,7 +152,11 @@ npm i @gluestack-ui/actionsheet
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/themed/actionsheet/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/actionsheet/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx
@@ -98,7 +98,11 @@ npm i @gluestack-ui/alert
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/nativewind/Alert/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/Alert/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx
@@ -96,7 +96,11 @@ npm i @gluestack-ui/alert
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/themed/alert/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/alert/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/AlertDialog/index.nw.storiesold.mdx b/example/storybook-nativewind/src/components/AlertDialog/index.nw.storiesold.mdx
@@ -151,7 +151,11 @@ npm i @gluestack-ui/alert-dialog
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/nativewind/AlertDialog/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/AlertDialog/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx b/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx
@@ -152,7 +152,9 @@ npm i @gluestack-ui/alert-dialog
 
 <CollapsibleCode>
 
-```jsx %%-- File: core-components/themed/alert-dialog/index.tsx --%% ```
+```jsx 
+%%-- File: core-components/themed/alert-dialog/index.tsx --%% 
+```
 
 </CollapsibleCode>
 

diff --git a/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx
@@ -89,7 +89,11 @@ npm i @gluestack-ui/avatar
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/nativewind/Avatar/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/Avatar/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/Avatar/index.stories.mdx b/example/storybook-nativewind/src/components/Avatar/index.stories.mdx
@@ -120,7 +120,11 @@ npm install @gluestack-ui/nativewind-utils
 Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/nativewind/Avatar/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/Avatar/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 Step 3: Update the import paths to match your project setup.
@@ -139,7 +143,11 @@ npm install @gluestack-style/react
 Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/themed/avatar/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/avatar/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx
@@ -90,7 +90,11 @@ npm i @gluestack-ui/avatar
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/themed/avatar/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/avatar/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx
@@ -114,7 +114,11 @@ npm i @gluestack-ui/badge
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/nativewind/Badge/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/Badge/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx
@@ -112,7 +112,11 @@ npm i @gluestack-ui/badge
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/themed/badge/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/badge/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx
@@ -62,7 +62,9 @@ This is an illustration of **Box** component.
 
 <CollapsibleCode>
 
-```jsx %%-- File: core-components/nativewind/Box/index.tsx --%% ```
+```jsx 
+%%-- File: core-components/nativewind/Box/index.tsx --%% 
+```
 
 </CollapsibleCode>
 

diff --git a/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx
@@ -63,7 +63,9 @@ This is an illustration of **Box** component.
 
 <CollapsibleCode>
 
-```jsx %%-- File: core-components/themed/box/index.tsx --%% ```
+```jsx 
+%%-- File: core-components/themed/box/index.tsx --%% 
+```
 
 </CollapsibleCode>
 

diff --git a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx
@@ -96,7 +96,11 @@ npm i @gluestack-ui/button
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/nativewind/Button/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/Button/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/Button/index.stories.mdx b/example/storybook-nativewind/src/components/Button/index.stories.mdx
@@ -74,7 +74,11 @@ npm install @gluestack-ui/button
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/nativewind/Button/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/Button/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -668,9 +672,11 @@ npm install @gluestack-style/react
 Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx 
+
+```jsx 
   %%-- File: core-components/themed/button/index.tsx --%% 
   ```
+
 </CollapsibleCode>
 
 Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx
@@ -94,7 +94,9 @@ npm install @gluestack-ui/button
 
 <CollapsibleCode>
 
-```jsx %%-- File: core-components/themed/button/index.tsx --%% ```
+```jsx 
+%%-- File: core-components/themed/button/index.tsx --%% 
+```
 
 </CollapsibleCode>
 

diff --git a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx
@@ -101,7 +101,11 @@ npm i @gluestack-ui/card
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/nativewind/Card/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/Card/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/Card/index.stories.mdx b/example/storybook-nativewind/src/components/Card/index.stories.mdx
@@ -101,7 +101,11 @@ npm install @gluestack-ui/card
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/nativewind/button/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/button/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.
@@ -684,7 +688,11 @@ npm install @gluestack-style/react
 Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/themed/card/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/card/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/Card/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Card/index.themed.stories.mdx
@@ -101,7 +101,11 @@ npm i @gluestack-ui/card
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/themed/card/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/card/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx
@@ -60,7 +60,9 @@ This is an illustration of **Center** component.
 
 <CollapsibleCode>
 
-```jsx %%-- File: core-components/nativewind/center/index.tsx --%% ```
+```jsx 
+%%-- File: core-components/nativewind/center/index.tsx --%% 
+```
 
 </CollapsibleCode>
 

diff --git a/example/storybook-nativewind/src/components/Center/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Center/index.themed.stories.mdx
@@ -60,7 +60,9 @@ This is an illustration of **Center** component.
 
 <CollapsibleCode>
 
-```jsx %%-- File: core-components/themed/center/index.tsx --%% ```
+```jsx 
+%%-- File: core-components/themed/center/index.tsx --%% 
+```
 
 </CollapsibleCode>
 

diff --git a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx
@@ -105,7 +105,11 @@ npm i @gluestack-ui/checkbox
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/nativewind/checkbox/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/checkbox/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx
@@ -105,7 +105,11 @@ npm i @gluestack-ui/checkbox
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/themed/checkbox/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/checkbox/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx
@@ -83,7 +83,11 @@ npm i @gluestack-ui/divider
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/nativewind/divider/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/divider/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx
@@ -83,7 +83,11 @@ npm i @gluestack-ui/divider
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/themed/divider/index.tsx --%% ````
+
+```jsx 
+%%-- File: core-components/themed/divider/index.tsx --%% 
+````
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx
@@ -125,7 +125,11 @@ npm i @gluestack-ui/fab
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/nativewind/fab/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/fab/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx
@@ -120,7 +120,11 @@ npm i @gluestack-ui/fab
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/themed/fab/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/themed/fab/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.

diff --git a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx
@@ -248,7 +248,11 @@ npm i @gluestack-ui/form-control
 ### Step 2: Copy and paste the following code into your project.
 
 <CollapsibleCode>
-  ```jsx %%-- File: core-components/nativewind/form-control/index.tsx --%% ```
+
+```jsx 
+%%-- File: core-components/nativewind/form-control/index.tsx --%% 
+```
+
 </CollapsibleCode>
 
 ### Step 3: Update the import paths to match your project setup.