From d0bee429f1f9f7d1958a9c2c859c45be246f6cb6 Mon Sep 17 00:00:00 2001 From: Vaibhavi Kolloju Date: Tue, 9 Jul 2024 16:11:40 +0530 Subject: [PATCH] feat: docs changes --- .../src/apps/dashboard-app/index.stories.mdx | 4 ++-- .../src/apps/starter-kit/index.stories.mdx | 4 ++-- .../src/apps/storybook-app/index.stories.mdx | 4 ++-- .../src/home/getting-started/cli/index.nw.stories.mdx | 9 ++++++++- .../getting-started/figma-ui-kit/index.nw.stories.mdx | 2 +- .../vscode-extensions/index.nw.stories.mdx | 4 ++-- .../customizing-theme/index.nw.stories.mdx | 6 +++--- .../theme-configuration/dark-mode/index.nw.stories.mdx | 2 +- .../default-tokens/index.nw.stories.mdx | 6 +++--- 9 files changed, 24 insertions(+), 17 deletions(-) diff --git a/example/storybook-nativewind/src/apps/dashboard-app/index.stories.mdx b/example/storybook-nativewind/src/apps/dashboard-app/index.stories.mdx index d319c891a1..919a0ca488 100644 --- a/example/storybook-nativewind/src/apps/dashboard-app/index.stories.mdx +++ b/example/storybook-nativewind/src/apps/dashboard-app/index.stories.mdx @@ -1,6 +1,6 @@ --- title: Dashboard App | gluestack-ui -description: A dashboard app created using all the components of gluestack-ui styled with NativeWind +description: A dashboard app created using all the components of gluestack-ui v2 toc: false --- @@ -12,7 +12,7 @@ import { kitchensink } from '../../extra-components/nativewind/appConfig'; # Dashboard App -This [Dashboard App](https://ui-example-nativewind.vercel.app/) is built using `gluestack-ui` components styled with `NativeWind`. +This [Dashboard App](https://ui-example-nativewind.vercel.app/) is built using `gluestack-ui v2`. diff --git a/example/storybook-nativewind/src/apps/starter-kit/index.stories.mdx b/example/storybook-nativewind/src/apps/starter-kit/index.stories.mdx index d9ef995ecf..10bc2b82f6 100644 --- a/example/storybook-nativewind/src/apps/starter-kit/index.stories.mdx +++ b/example/storybook-nativewind/src/apps/starter-kit/index.stories.mdx @@ -1,6 +1,6 @@ --- title: Starter Kit | gluestack-ui -description: A starter kit created using all the components of gluestack-ui styled with NativeWind +description: A starter kit created using all the components of gluestack-ui v2 toc: false --- @@ -12,7 +12,7 @@ import { starterKit } from '../../extra-components/nativewind/appConfig'; # Starter Kit -This [Starter Kit](https://gluestack-ui-starter-kits.vercel.app/) is built using `gluestack-ui` components styled with `NativeWind`. +This [Starter Kit](https://gluestack-ui-starter-kits.vercel.app/) is built using `gluestack-ui v2`. diff --git a/example/storybook-nativewind/src/apps/storybook-app/index.stories.mdx b/example/storybook-nativewind/src/apps/storybook-app/index.stories.mdx index 9b47859864..d5331b8af8 100644 --- a/example/storybook-nativewind/src/apps/storybook-app/index.stories.mdx +++ b/example/storybook-nativewind/src/apps/storybook-app/index.stories.mdx @@ -1,6 +1,6 @@ --- title: Storybook App | gluestack-ui -description: A storybook app created using all the components of gluestack-ui styled with NativeWind +description: A storybook app created using all the components of gluestack-ui v2 toc: false --- @@ -12,6 +12,6 @@ import { appStoryConfig } from '../../extra-components/nativewind/appConfig'; # Storybook App -This is a [Storybook App](https://storybook-v2.gluestack.io/?path=/story/stories-accordion--accordion) of `gluestack-ui` components styled with `NativeWind`. +This is a [Storybook App](https://storybook-v2.gluestack.io/?path=/story/stories-accordion--accordion) of `gluestack-ui v2`. diff --git a/example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx b/example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx index ad960bda2d..901401aad2 100644 --- a/example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/home/getting-started/cli/index.nw.stories.mdx @@ -17,7 +17,14 @@ The gluestack-ui CLI is a tool that simplifies integrating the gluestack-ui into Use init command to set up your project. -The init command adds the necessary `gluestack-ui.config.json` file, includes the `GluestackUIProvider`, installs dependencies, and configures `metro.config.js`, `babel.config.js`, `next.config.js` ( for Next.js) and `tailwind.config.js` for your project. +The init command adds the necessary `gluestack-ui.config.json` file, includes the `GluestackUIProvider`, installs dependencies, and configures above files for your project. +- `metro.config.js` +- `babel.config.js` +- `next.config.js` ( for Next.js) +- `tailwind.config.js` +- `global.css` (for Tailwind CSS) +- entry file (for your project) + ```bash npx gluestack-ui init diff --git a/example/storybook-nativewind/src/home/getting-started/figma-ui-kit/index.nw.stories.mdx b/example/storybook-nativewind/src/home/getting-started/figma-ui-kit/index.nw.stories.mdx index 941a71b4e4..0ece83e278 100644 --- a/example/storybook-nativewind/src/home/getting-started/figma-ui-kit/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/home/getting-started/figma-ui-kit/index.nw.stories.mdx @@ -9,7 +9,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; # Figma UI Kit -The [Figma UI Kit](https://www.figma.com/@gluestack) provides a collection of ready-to-use UI components from the gluestack-ui library. So you can directly use these components in Figma and design your app. The developers won’t have a chance to say this is not possible! +The [Figma UI Kit](https://www.figma.com/@gluestack) provides a collection of ready-to-use UI components from the gluestack-ui v2. So you can directly use these components in Figma and design your app. The developers won’t have a chance to say this is not possible! ## Auto-generated diff --git a/example/storybook-nativewind/src/home/getting-started/vscode-extensions/index.nw.stories.mdx b/example/storybook-nativewind/src/home/getting-started/vscode-extensions/index.nw.stories.mdx index 04a2280ec5..06e19e804b 100644 --- a/example/storybook-nativewind/src/home/getting-started/vscode-extensions/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/home/getting-started/vscode-extensions/index.nw.stories.mdx @@ -9,7 +9,7 @@ import { Canvas, Meta, Story } from '@storybook/addon-docs'; # VS Code Extensions -[gluestack VS Code Extension](https://marketplace.visualstudio.com/items?itemName=gluestack.gluestack-vscode) is specially crafted to streamline your development process when using the `@gluestack-ui with nativewind` library. It provides a set of powerful features to accelerate your workflow and improve efficiency. +[gluestack VS Code Extension](https://marketplace.visualstudio.com/items?itemName=gluestack.gluestack-vscode) is specially crafted to streamline your development process when using the gluestack-ui v2. It provides a set of powerful features to accelerate your workflow and improve efficiency. These extensions provide gluestack snippets, which are shorthand for commonly used gluestack-ui components. All snippets start with the prefix `gs-` and are followed by the name of the desired component. @@ -43,7 +43,7 @@ Tailor your application's functionality specific requirements using dynamic hook To get started with the gluestack VS Code Extension, follow these steps: 1. Install the extension from the [Visual Studio Code Marketplace](https://marketplace.visualstudio.com/items?itemName=gluestack.gluestack-vscode). -2. Open a project in Visual Studio Code that uses `gluestack-ui` library. +2. Open a project in Visual Studio Code that uses `gluestack-ui v2`. 3. Start using the extension by accessing the snippets, recipes, and automatic import features described above. ## Example Usage diff --git a/example/storybook-nativewind/src/home/theme-configuration/customizing-theme/index.nw.stories.mdx b/example/storybook-nativewind/src/home/theme-configuration/customizing-theme/index.nw.stories.mdx index d271e725a2..5320bfcf09 100644 --- a/example/storybook-nativewind/src/home/theme-configuration/customizing-theme/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/home/theme-configuration/customizing-theme/index.nw.stories.mdx @@ -1,7 +1,7 @@ --- title: Customizing Theme -description: Customizing the theme in gluestack-ui with nativewind involves defining a theme configuration and applying it using GluestackUIProvider, enabling you to style your application's visual elements according to your design preferences. +description: Customizing the theme in gluestack-ui v2 involves defining a theme configuration and applying it using GluestackUIProvider, enabling you to style your application's visual elements according to your design preferences. showHeader: true --- @@ -14,9 +14,9 @@ import { CollapsibleCode } from '@gluestack/design-system'; ## Customizing Tokens -gluestack-ui, integrated with Nativewind, seamlessly accommodates the default Tailwind CSS [theme](https://tailwindcss.com/docs/theme), allowing users to effortlessly expand and customize it to suit their needs. +gluestack-ui v2, seamlessly accommodates the default Tailwind CSS [theme](https://tailwindcss.com/docs/theme), allowing users to effortlessly expand and customize it to suit their needs. -gluestack-ui with nativewind also ships with a set of handpicked default color palette tokens which are mapped separately with each mode. For example, the default color palette for light mode is `light` and the default color palette for dark mode is `dark`. +gluestack-ui v2 also ships with a set of handpicked default color palette tokens which are mapped separately with each mode. For example, the default color palette for light mode is `light` and the default color palette for dark mode is `dark`. To customize tokens, follow these steps: diff --git a/example/storybook-nativewind/src/home/theme-configuration/dark-mode/index.nw.stories.mdx b/example/storybook-nativewind/src/home/theme-configuration/dark-mode/index.nw.stories.mdx index 8669cf06ea..93c98695e9 100644 --- a/example/storybook-nativewind/src/home/theme-configuration/dark-mode/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/home/theme-configuration/dark-mode/index.nw.stories.mdx @@ -1,7 +1,7 @@ --- title: Dark Mode -description: Customizing the theme in gluestack-ui with NativeWind for different color schemes and color mode support. +description: Customizing the theme in gluestack-ui v2 for different color schemes and color mode support. showHeader: true --- diff --git a/example/storybook-nativewind/src/home/theme-configuration/default-tokens/index.nw.stories.mdx b/example/storybook-nativewind/src/home/theme-configuration/default-tokens/index.nw.stories.mdx index e32530946d..8bc28a682a 100644 --- a/example/storybook-nativewind/src/home/theme-configuration/default-tokens/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/home/theme-configuration/default-tokens/index.nw.stories.mdx @@ -1,11 +1,11 @@ --- title: Default Tokens | gluestack-ui -description: gluestack-ui with nativewind ships with default tokens that provide access to theme values and lets you build and customize your own themed components. +description: gluestack-ui v2 ships with default tokens that provide access to theme values and lets you build and customize your own themed components. pageTitle: Default Tokens -pageDescription: gluestack-ui with nativewind ships with default tokens that provide access to theme values and lets you build and customize your own themed components. +pageDescription: gluestack-ui v2 ships with default tokens that provide access to theme values and lets you build and customize your own themed components. showHeader: true --- @@ -15,7 +15,7 @@ import {ColorPaletteComponent, ShadowComponent, FontSizeComponent, FontWeightCom -Theming in `@gluestack-ui with nativewind` is based on the [Styled System Theme Specification](https://github.com/system-ui/theme-specification). +Theming in `@gluestack-ui v2` is based on the [Styled System Theme Specification](https://github.com/system-ui/theme-specification). ## Colors