feat: updated config

example/storybook-nativewind/src/core-components/nativewind/dependencies.json

@@ -5,7 +5,8 @@
       "@gluestack-ui/overlay": "latest",
       "@gluestack-ui/toast": "latest",
       "@gluestack-ui/nativewind-utils": "latest",
-      "react-native-svg": "13.4.0"
+      "react-native-svg": "13.4.0",
+      "nativewind": "4.1.10"
     },
     "devDependencies": {
       "jscodeshift": "0.15.2"
@@ -40,15 +41,23 @@
       "@gluestack-ui/avatar": "latest"
     }
   },
-  "badge": { "dependencies": {} },
-  "box": { "dependencies": {} },
+  "badge": {
+    "dependencies": {}
+  },
+  "box": {
+    "dependencies": {}
+  },
   "button": {
     "dependencies": {
       "@gluestack-ui/button": "latest"
     }
   },
-  "card": { "dependencies": {} },
-  "center": { "dependencies": {} },
+  "card": {
+    "dependencies": {}
+  },
+  "center": {
+    "dependencies": {}
+  },
   "checkbox": {
     "dependencies": {
       "@gluestack-ui/checkbox": "latest"
@@ -142,9 +151,15 @@
       "@gluestack-ui/radio": "latest"
     }
   },
-  "refresh-control": { "dependencies": {} },
-  "safe-area-view": { "dependencies": {} },
-  "scroll-view": { "dependencies": {} },
+  "refresh-control": {
+    "dependencies": {}
+  },
+  "safe-area-view": {
+    "dependencies": {}
+  },
+  "scroll-view": {
+    "dependencies": {}
+  },
   "section-list": {
     "dependencies": {}
   },
@@ -166,13 +181,17 @@
       "@gluestack-ui/spinner": "latest"
     }
   },
-  "status-bar": { "dependencies": {} },
+  "status-bar": {
+    "dependencies": {}
+  },
   "switch": {
     "dependencies": {
       "@gluestack-ui/switch": "latest"
     }
   },
-  "text": { "dependencies": {} },
+  "text": {
+    "dependencies": {}
+  },
   "textarea": {
     "dependencies": {
       "@gluestack-ui/textarea": "latest"
@@ -190,7 +209,18 @@
       "@legendapp/motion": "latest"
     }
   },
-  "view": { "dependencies": {} },
-  "virtualized-list": { "dependencies": {} },
-  "vstack": { "dependencies": {} }
+  "view": {
+    "dependencies": {}
+  },
+  "virtualized-list": {
+    "dependencies": {}
+  },
+  "vstack": {
+    "dependencies": {}
+  },
+  "grid": {
+    "dependencies": {},
+    "hooks": ["useBreakpointValue"]
+  },
+  "IgnoredComponents": ["bottomsheet"]
 }

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

@@ -92,7 +92,7 @@ npm i @gluestack-ui/nativewind-utils
 
 ### Step 2.1: Update Tailwind configuration
 
-Update `tailwind.config.js` file with the following code
+Update the `tailwind.config.js` file with the following code and also the the `content` property with paths to the files where components are used.
 
 ```js
 %%-- File: tailwind.config.js --%% 
@@ -108,7 +108,7 @@ Create a `components/ui` folder inside `src` folder and add path in `tsconfig.js
     // ...
     "paths": {
       // ...
-      "@/*": ["./src/*"] // Add relative path
+      "@/*": ["./*"] // Add relative path
     },
   }
 ```
@@ -147,6 +147,16 @@ To add `GluestackUIProvider`, create a `gluestack-ui-provider/index.web.tsx` fil
 
 </CollapsibleCode>
 
+Also, create a `gluestack-ui-provider/script.ts` file inside `components/ui` folder and paste the following code.
+
+<CollapsibleCode>
+
+```jsx
+%%-- File: core-components/nativewind/gluestack-ui-provider/script.ts --%%
+```
+
+</CollapsibleCode>
+
 ### Step 3: Configure GluestackUIProvider in project
 
 Wrap your app with `GluestackUIProvider` in `App.tsx`.

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

@@ -25,6 +25,7 @@ The init command adds the necessary `gluestack-ui.config.json` file, includes th
 - `next.config.js` ( for Next.js)
 - `tailwind.config.js`
 - `global.css` (for Tailwind CSS)
+- `ts.config.json`
 - entry file (for your project)
 
 
@@ -38,6 +39,8 @@ npx gluestack-ui init
 
 - `--path <path>`: Specifies the directory path where you want to add the GluestackUIProvider component. By default, it creates the component in the `components/ui` directory within your project's root.
 
+- `--use-<package>`: This flag specifies the package manager to use when initializing gluestack-ui. Supported options are npm (default), yarn, bun, and pnpm. Replace `<package>` with your preferred package manager.
+
 ```bash
 Usage: npx gluestack-ui init [options]
 
@@ -68,6 +71,10 @@ add component to your project
 Options:
   --all          Adds all existing components from gluestack-ui
   --path <path>  Path to add components, defaults to the directory where GluestackUIProvider is located.
+  --use-npm      Set npm as the project's package manager, default
+  --use-yarn     Set yarn as the project's package manager
+  --use-bun      Set bun as the project's package manager
+  --use-pnpm     Set pnpm as the project's package manager, currently not supported in react-native-cli projects
 ```
 
 ## gluestack-ui.config.json