From 13e1e746cb1974598440b68bc7c1c8f59c4ede46 Mon Sep 17 00:00:00 2001 From: Vaibhavi Kolloju Date: Fri, 15 Mar 2024 18:55:59 +0530 Subject: [PATCH 1/8] feat: testing tab in docs --- .../Heading/index.themed.stories.mdx | 31 +++++++++++++ .../Installation/index.nw.stories.mdx | 45 +++++++++++++++++-- .../Installation/index.themed.stories.mdx | 45 ++++++++++++++++++- yarn.lock | 8 ++++ 4 files changed, 124 insertions(+), 5 deletions(-) diff --git a/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx index e0d12e580b..f55eac9b64 100644 --- a/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx @@ -24,6 +24,9 @@ import { Text, InlineCode, CollapsibleCode, + Tabs, + Box, + HStack } from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -53,6 +56,30 @@ This is an illustration of **Heading** component. ## Installation + + + + CLI + + + Manual + + + + +<> + +```bash +npx gluestack-ui add button +``` + + + + +
+<> + + ### Step 1: Install the following dependencies: ```bash @@ -72,6 +99,10 @@ npm i @expo/html-elements ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx b/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx index dd7b4d7e47..755e88cb3c 100644 --- a/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx @@ -22,9 +22,48 @@ import { CollapsibleCode } from '@gluestack/design-system'; you can use [gluestack-expo-nativewind-v4-template](https://github.com/gluestack/gluestack-expo-nativewind-v4-template). ### Using CLI +If you wish to use `gluestack-ui` in your existing project using CLI, you can proceed with the following steps: + +### Step 1: Setup nativewind +Setup nativewind in your project following [NativeWind documentation](https://www.nativewind.dev/v4/getting-started/react-native). + +### Step 2: Install dependency +Install `gluestack-ui` into your existing project using the following command + +```bash +yarn add gluestack-ui +``` + +OR + +```bash +npm i gluestack-ui +``` + +### Step 3: Initialize +Use `init` command to add `GluestackUIProvider` and `gluestack-ui-provider/config.ts` file into your project. ```bash - comming soon... +npx gluestack-ui init +``` +You will be asked to select a component style to initialize + +```bash + Which style would you like to use in your project: + gluestack-style + nativewind + ``` + Refer Step: 6 in manual installation for usage of `GluestackUIProvider` + +### Step 4: Add components +To add components you wish to use in your project, you can use `add` command as shown below. + +```bash +npx gluestack-ui add button // adds button component into the project +``` +To add all the components, you can use +```bash +npx gluestack-ui add --all // adds all the components into the project ``` ## Manual @@ -55,7 +94,7 @@ npm i @gluestack-ui/nativewind-utils Update `tailwind.config.js` file with the following code - + ```js // tailwind.config.js module.exports = { @@ -230,8 +269,6 @@ module.exports = { }; ``` - - ### Step 4: Configure components path Create a `components/ui` folder inside `src` folder and add path in `tsconfig.json` diff --git a/example/storybook-nativewind/src/getting-started/Installation/index.themed.stories.mdx b/example/storybook-nativewind/src/getting-started/Installation/index.themed.stories.mdx index d807479871..60c3d8a0b4 100644 --- a/example/storybook-nativewind/src/getting-started/Installation/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/getting-started/Installation/index.themed.stories.mdx @@ -11,7 +11,7 @@ showHeader: true --- import { Meta } from '@storybook/addon-docs'; -import { CollapsibleCode } from '@gluestack/design-system'; +import { CollapsibleCode, Tabs, Box, HStack } from '@gluestack/design-system'; @@ -21,6 +21,49 @@ import { CollapsibleCode } from '@gluestack/design-system'; Coming soon +### Using CLI + +If you wish to use `gluestack-ui` in your existing project using CLI, you can proceed with the following steps: + +### Step 1: Install dependency +First install `gluestack-ui` into your existing project using the following command + +```bash +yarn add gluestack-ui +``` + +OR + +```bash +npm i gluestack-ui +``` + +### Step 2: Initialize +Use `init` command to add `GluestackUIProvider` and `gluestack-ui-provider/config.ts` file into your project. + +```bash +npx gluestack-ui init +``` +You will be asked to select a component style to initialize + +```bash + Which style would you like to use in your project: + gluestack-style // Choose a component style + nativewind + ``` + Refer step: 4 in manual installation for usage of `GluestackUIProvider` + +### Step 3: Add components +To add components you wish to use in your project, you can use `add` command as shown below. + +```bash +npx gluestack-ui add button +``` +To add all the components, you can use +```bash +npx gluestack-ui add --all +``` + ## Manual If you wish to install `gluestack-ui` into your existing project, you can proceed with the following steps: diff --git a/yarn.lock b/yarn.lock index ca310a1fe1..5d3cbd9d69 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3288,6 +3288,14 @@ dependencies: "@legendapp/motion" "^2.2.0" +"@gluestack-style/react@1.0.50": + version "1.0.50" + resolved "https://registry.yarnpkg.com/@gluestack-style/react/-/react-1.0.50.tgz#5a03fce6b9447c509db85c92a0f2bd839850cee0" + integrity sha512-WCME8xmfGFJnK7WaARgI1y1TZwU1y1xO0z4aou4e1PSk9lLfNy696Uu00ywG6r4AWEch3ZQyZAa3QADax5RHeA== + dependencies: + inline-style-prefixer "^6.0.1" + normalize-css-color "^1.0.2" + "@gluestack-ui/button@^0.1.15": version "0.1.34" resolved "https://registry.yarnpkg.com/@gluestack-ui/button/-/button-0.1.34.tgz#f635aba6a9023d153f5dd82cd96a3785b6244951" From 22740d44eb0e91559205c0d47c892bc6d399dac6 Mon Sep 17 00:00:00 2001 From: Vaibhavi Kolloju Date: Mon, 18 Mar 2024 18:09:50 +0530 Subject: [PATCH 2/8] feat: docs update checking --- example/storybook-nativewind/package.json | 2 +- .../components/Heading/index.nw.stories.mdx | 30 ++++++++++++++-- .../Heading/index.themed.stories.mdx | 34 ++++++++----------- example/storybook/package.json | 2 +- yarn.lock | 8 ++--- 5 files changed, 48 insertions(+), 28 deletions(-) diff --git a/example/storybook-nativewind/package.json b/example/storybook-nativewind/package.json index 117fb8412f..b51e6a6400 100644 --- a/example/storybook-nativewind/package.json +++ b/example/storybook-nativewind/package.json @@ -30,7 +30,7 @@ "@gluestack-style/react": "^1.0.50", "@gluestack-ui/config": "^1.1.10", "@gluestack-ui/themed": "^1.1.11", - "@gluestack/design-system": "^0.5.27", + "@gluestack/design-system": "^0.5.36", "@legendapp/motion": "^2.2.0", "@react-aria/button": "^3.7.0", "@react-aria/focus": "^3.11.0", 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 6a1258f6b3..b7a3cbd46a 100644 --- a/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx @@ -26,7 +26,7 @@ import { } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; +import { CollapsibleCode, Tabs } from '@gluestack/design-system'; This is an illustration of **Heading** component. @@ -55,12 +55,32 @@ This is an illustration of **Heading** component. ## Installation + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add heading + ``` + + + +<> + ### Step 1: Install the following dependencies: ```bash - npm i @expo/html-elements - ``` ### Step 2: Copy and paste the following code into your project. @@ -74,6 +94,10 @@ npm i @expo/html-elements ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx index f55eac9b64..de311fc515 100644 --- a/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx @@ -56,36 +56,32 @@ This is an illustration of **Heading** component. ## Installation - - + + - CLI + CLI - Manual + Manual - - - + + + <> -```bash -npx gluestack-ui add button -``` - +### Run the following command: + ```bash + npx gluestack-ui add heading + ``` - - -
+ + <> - ### Step 1: Install the following dependencies: ```bash - npm i @expo/html-elements - ``` ### Step 2: Copy and paste the following code into your project. @@ -101,8 +97,8 @@ npm i @expo/html-elements ### Step 3: Update the import paths to match your project setup. - - + + ## API Reference diff --git a/example/storybook/package.json b/example/storybook/package.json index fc0d02721a..9ee4a88b12 100644 --- a/example/storybook/package.json +++ b/example/storybook/package.json @@ -25,7 +25,7 @@ "@expo/webpack-config": "^0.17.2", "@geometricpanda/storybook-addon-iframe": "^0.2.2", "@gluestack-style/animation-plugin": "^0.1.12", - "@gluestack/design-system": "0.5.27", + "@gluestack/design-system": "0.5.36", "@legendapp/motion": "^2.2.0", "@react-aria/button": "^3.7.0", "@react-aria/focus": "^3.11.0", diff --git a/yarn.lock b/yarn.lock index 5d3cbd9d69..1ad9421524 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3316,10 +3316,10 @@ "@gluestack-ui/utils" "^0.1.12" "@react-native-aria/focus" "^0.2.9" -"@gluestack/design-system@0.5.27", "@gluestack/design-system@^0.5.27": - version "0.5.27" - resolved "https://registry.yarnpkg.com/@gluestack/design-system/-/design-system-0.5.27.tgz#50f32707de920e52d830782584b77385bba6bc87" - integrity sha512-+cCvT8Jm8KaiS0r4wb0iB45wqHDKSh2s9aN2l4NA8b/AkUZKZ/NNxCFKad6cgA/dA9KsJNPTtPayJJYfIfRIIg== +"@gluestack/design-system@0.5.36", "@gluestack/design-system@^0.5.36": + version "0.5.36" + resolved "https://registry.yarnpkg.com/@gluestack/design-system/-/design-system-0.5.36.tgz#ee9c6a1dc3d0806eda5bd5781b58c3e8b3621dcf" + integrity sha512-d+Rp4nlK7f2Ban4j+B478ppVNvJmclH1YHXZZDSsV7yg1Fwpb1eNZlXr0E/9k+9bWiXzrqd91/1u8LjfWGAO/g== dependencies: "@docsearch/css" "3" "@docsearch/react" "3" From 344cea91f1def2da557827bbf2a4805b1b932218 Mon Sep 17 00:00:00 2001 From: Vaibhavi Kolloju Date: Tue, 19 Mar 2024 12:23:44 +0530 Subject: [PATCH 3/8] fix: updated docs --- .../Installation/index.nw.stories.mdx | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx b/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx index 755e88cb3c..48539af6c4 100644 --- a/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx @@ -27,20 +27,7 @@ If you wish to use `gluestack-ui` in your existing project using CLI, you can pr ### Step 1: Setup nativewind Setup nativewind in your project following [NativeWind documentation](https://www.nativewind.dev/v4/getting-started/react-native). -### Step 2: Install dependency -Install `gluestack-ui` into your existing project using the following command - -```bash -yarn add gluestack-ui -``` - -OR - -```bash -npm i gluestack-ui -``` - -### Step 3: Initialize +### Step 2: Initialize Use `init` command to add `GluestackUIProvider` and `gluestack-ui-provider/config.ts` file into your project. ```bash @@ -59,11 +46,11 @@ You will be asked to select a component style to initialize To add components you wish to use in your project, you can use `add` command as shown below. ```bash -npx gluestack-ui add button // adds button component into the project +npx gluestack-ui add button ``` To add all the components, you can use ```bash -npx gluestack-ui add --all // adds all the components into the project +npx gluestack-ui add --all ``` ## Manual From 359aa43322450135070479f4a0e414744f7a3025 Mon Sep 17 00:00:00 2001 From: Vaibhavi Kolloju Date: Wed, 20 Mar 2024 14:07:44 +0530 Subject: [PATCH 4/8] feat: updated component docs --- .../Actionsheet/index.themed.stories.mdx | 32 +++++++++++++-- .../src/components/Alert/index.nw.stories.mdx | 28 ++++++++++++- .../components/Alert/index.themed.stories.mdx | 29 +++++++++++++- .../AlertDialog/index.themed.stories.mdx | 33 +++++++++++++-- .../components/Avatar/index.nw.stories.mdx | 30 ++++++++++++-- .../Avatar/index.themed.stories.mdx | 33 +++++++++++++-- .../src/components/Badge/index.nw.stories.mdx | 37 +++++++++++++++-- .../components/Badge/index.themed.stories.mdx | 36 +++++++++++++++-- .../src/components/Box/index.nw.stories.mdx | 37 +++++++++++++++-- .../components/Box/index.themed.stories.mdx | 37 +++++++++++++++-- .../components/Button/index.nw.stories.mdx | 34 +++++++++++++--- .../Button/index.themed.stories.mdx | 36 +++++++++++++---- .../src/components/Card/index.nw.stories.mdx | 37 +++++++++++++++-- .../components/Card/index.themed.stories.mdx | 37 +++++++++++++++-- .../components/Center/index.nw.stories.mdx | 37 +++++++++++++++-- .../Center/index.themed.stories.mdx | 37 +++++++++++++++-- .../components/Checkbox/index.nw.stories.mdx | 34 +++++++++++++--- .../Checkbox/index.themed.stories.mdx | 36 +++++++++++++---- .../components/Divider/index.nw.stories.mdx | 35 ++++++++++++---- .../Divider/index.themed.stories.mdx | 36 +++++++++++++---- .../src/components/Fab/index.nw.stories.mdx | 34 +++++++++++++--- .../src/components/Fab/index.stories.mdx | 1 + .../components/Fab/index.themed.stories.mdx | 36 +++++++++++++---- .../FormControl/index.nw.stories.mdx | 34 +++++++++++++--- .../FormControl/index.themed.stories.mdx | 34 +++++++++++++--- .../components/HStack/index.nw.stories.mdx | 37 +++++++++++++++-- .../HStack/index.themed.stories.mdx | 38 ++++++++++++++++-- .../components/Heading/index.nw.stories.mdx | 5 +-- .../Heading/index.themed.stories.mdx | 5 +-- .../src/components/Icon/index.nw.stories.mdx | 34 +++++++++++++--- .../components/Icon/index.themed.stories.mdx | 34 +++++++++++++--- .../src/components/Image/index.nw.stories.mdx | 34 +++++++++++++--- .../components/Image/index.themed.stories.mdx | 34 +++++++++++++--- .../src/components/Input/index.nw.stories.mdx | 36 +++++++++++++---- .../components/Input/index.themed.stories.mdx | 36 +++++++++++++---- .../src/components/Link/index.nw.stories.mdx | 34 +++++++++++++--- .../components/Link/index.themed.stories.mdx | 34 +++++++++++++--- .../src/components/Modal/index.nw.stories.mdx | 40 ++++++++++++++----- .../components/Modal/index.themed.stories.mdx | 36 +++++++++++++---- .../components/Popover/index.nw.stories.mdx | 36 +++++++++++++---- .../Popover/index.themed.stories.mdx | 34 +++++++++++++--- .../components/Pressable/index.nw.stories.mdx | 38 +++++++++++++++--- .../Pressable/index.themed.stories.mdx | 38 +++++++++++++++--- .../components/Progress/index.nw.stories.mdx | 34 +++++++++++++--- .../Progress/index.themed.stories.mdx | 36 +++++++++++++---- .../src/components/Radio/index.nw.stories.mdx | 37 +++++++++++++---- .../components/Radio/index.themed.stories.mdx | 1 + .../components/Slider/index.nw.stories.mdx | 35 ++++++++++++---- .../Slider/index.themed.stories.mdx | 36 +++++++++++++---- .../components/Spinner/index.nw.stories.mdx | 35 ++++++++++++---- .../Spinner/index.themed.stories.mdx | 35 ++++++++++++---- .../components/Switch/index.nw.stories.mdx | 35 ++++++++++++---- .../Switch/index.themed.stories.mdx | 32 ++++++++++++--- .../src/components/Text/index.nw.stories.mdx | 38 +++++++++++++++--- .../components/Text/index.themed.stories.mdx | 36 +++++++++++++++-- .../components/Textarea/index.nw.stories.mdx | 38 +++++++++++++++--- .../Textarea/index.themed.stories.mdx | 38 +++++++++++++++--- .../components/Toast/index.themed.stories.mdx | 36 +++++++++++++---- .../Tooltip/index.themed.stories.mdx | 36 +++++++++++++---- .../components/VStack/index.nw.stories.mdx | 36 +++++++++++++++-- .../VStack/index.themed.stories.mdx | 36 +++++++++++++++-- 61 files changed, 1703 insertions(+), 320 deletions(-) diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx index 81913bab11..20c04e1464 100644 --- a/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx @@ -67,6 +67,7 @@ import { AddIcon, InfoIcon, Alert, + Tabs, } from '@gluestack/design-system'; import { config } from '@gluestack-ui/config'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -141,12 +142,31 @@ function App(){ ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add actionsheet + ``` + + + +<> +### Step 1: Install the following dependencies: ```bash - -npm i @gluestack-ui/actionsheet - +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. @@ -160,6 +180,10 @@ npm i @gluestack-ui/actionsheet ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx index 6341d07a16..3b47069f7f 100644 --- a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx @@ -87,11 +87,33 @@ This is an illustration of **Alert** component. ## Installation + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add alert + ``` + + + +<> + ### Step 1: Install the following dependencies: ```bash -npm i @gluestack-ui/alert +npm i @expo/html-elements ``` @@ -106,6 +128,10 @@ npm i @gluestack-ui/alert ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx index e033a916b6..3a8eec48d1 100644 --- a/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx @@ -36,6 +36,7 @@ import { InlineCode, TableContainer, CollapsibleCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -86,11 +87,33 @@ This is an illustration of **Alert** component. ## Installation + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add alert + ``` + + + +<> + ### Step 1: Install the following dependencies: ```bash -npm i @gluestack-ui/alert +npm i @expo/html-elements ``` @@ -105,6 +128,10 @@ npm i @gluestack-ui/alert ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx b/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx index 05961e2c49..6840015d79 100644 --- a/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx @@ -40,7 +40,8 @@ import { Table, TableContainer, InlineCode, - CollapsibleCode + CollapsibleCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -138,12 +139,32 @@ This is an illustration of **AlertDialog** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> -```bash +### Run the following command: + ```bash + npx gluestack-ui add alert-dialog + ``` + + + +<> -npm i @gluestack-ui/alert-dialog +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. @@ -157,6 +178,10 @@ npm i @gluestack-ui/alert-dialog ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx index ac0b4f4b71..0b647136f5 100644 --- a/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx @@ -78,12 +78,32 @@ This is an illustration of **Avatar** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> -```bash +### Run the following command: + ```bash + npx gluestack-ui add avatar + ``` + + + +<> -npm i @gluestack-ui/avatar +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. @@ -97,6 +117,10 @@ npm i @gluestack-ui/avatar ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx index 7a6ac491fe..74c52f1154 100644 --- a/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx @@ -36,7 +36,8 @@ import { Table, TableContainer, InlineCode, - CollapsibleCode + CollapsibleCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -78,12 +79,32 @@ This is an illustration of **Avatar** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> -```bash +### Run the following command: + ```bash + npx gluestack-ui add avatar + ``` + + + +<> -npm i @gluestack-ui/avatar +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. @@ -97,6 +118,10 @@ npm i @gluestack-ui/avatar ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx index 961639c4e4..acd7a66d66 100644 --- a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx @@ -53,6 +53,7 @@ import { Table, TableContainer, InlineCode, + Tabs } from '@gluestack/design-system'; import { transformedCode } from '../../utils'; import Wrapper from '../../core-components/nativewind/Wrapper'; @@ -104,18 +105,46 @@ This is an illustration of **Badge** component. ## Installation + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add badge + ``` + + + +<> + +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements +``` -### Step 1: Copy and paste the following code into your project. - +### Step 2: Copy and paste the following code into your project. ```jsx %%-- File: core-components/nativewind/badge/index.tsx --%% ``` - -### Step 2: Update the import paths to match your project setup. +### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx index 92552fd270..1aff25302d 100644 --- a/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx @@ -53,6 +53,7 @@ import { TableContainer, InlineCode, CollapsibleCode, + Tabs } from '@gluestack/design-system'; import { transformedCode } from '../../utils'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -103,17 +104,46 @@ This is an illustration of **Badge** component. ## Installation -### Step 1: Copy and paste the following code into your project. + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add badge + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements +``` + +### Step 2: Copy and paste the following code into your project. ```jsx %%-- File: core-components/themed/badge/index.tsx --%% ``` - -### Step 2: Update the import paths to match your project setup. +### Step 3: Update the import paths to match your project setup. + + + + ## API Reference 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 fe6e8fc48b..a0a5242c0f 100644 --- a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx @@ -19,7 +19,7 @@ import { Box } from '../../core-components/nativewind'; import { Text } from '../../core-components/nativewind/text'; import { transformedCode } from '../../utils'; -import { AppProvider, CodePreview } from '@gluestack/design-system'; +import { AppProvider, CodePreview, Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; import { CollapsibleCode } from '@gluestack/design-system'; @@ -58,17 +58,46 @@ This is an illustration of **Box** component. ## Installation -### Step 1: Copy and paste the following code into your project. + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add box + ``` + + + +<> + +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements +``` +### Step 2: Copy and paste the following code into your project. ```jsx %%-- File: core-components/nativewind/box/index.tsx --%% ``` - -### Step 2: Update the import paths to match your project setup. +### Step 3: Update the import paths to match your project setup. + + + + To use this component in your project, include the following import statement in your file. diff --git a/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx index f446268cd4..048b5afdf0 100644 --- a/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx @@ -17,7 +17,7 @@ import { Meta } from '@storybook/addon-docs'; import { useRef, useEffect, useState } from 'react'; import { Box } from '../../core-components/themed'; import { transformedCode } from '../../utils'; -import { AppProvider,CodePreview,Text,CollapsibleCode} from '@gluestack/design-system'; +import { AppProvider,CodePreview,Text,CollapsibleCode, Tabs} from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; This is an illustration of **Box** component. @@ -55,17 +55,46 @@ This is an illustration of **Box** component. ## Installation -### Step 1: Copy and paste the following code into your project. + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add box + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements +``` + +### Step 2: Copy and paste the following code into your project. ```jsx %%-- File: core-components/themed/box/index.tsx --%% ``` - -### Step 2: Update the import paths to match your project setup. +### Step 3: Update the import paths to match your project setup. + + + + To use this component in your project, include the following import statement in your file. diff --git a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx index a0f48e73ba..6e542dea0e 100644 --- a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx @@ -40,6 +40,7 @@ import { Table, TableContainer, InlineCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; import { CollapsibleCode } from '@gluestack/design-system'; @@ -86,25 +87,46 @@ This is an illustration of **Button** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add button + ``` + + + +<> +### Step 1: Install the following dependencies: ```bash - -npm i @gluestack-ui/button - +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/nativewind/button/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx index 55299a9067..e6eaca83e7 100644 --- a/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx @@ -43,7 +43,8 @@ import { Table, TableContainer, InlineCode, - CollapsibleCode + CollapsibleCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -89,25 +90,46 @@ This is an illustration of **Button** component. ## Installation -### Step 1: Install the following dependencies: - -```bash + + + + CLI + + + Manual + + + + +<> -npm install @gluestack-ui/button +### Run the following command: + ```bash + npx gluestack-ui add button + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/themed/button/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference 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 a4e44dc76f..da439437b7 100644 --- a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx @@ -39,6 +39,7 @@ import { Table, TableContainer, InlineCode, + Tabs } from '@gluestack/design-system'; import { transformedCode } from '../../utils'; @@ -89,18 +90,46 @@ This is an illustration of a **Card** component. ## Installation + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add card + ``` + + + +<> + +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements +``` -### Step 1: Copy and paste the following code into your project. - +### Step 2: Copy and paste the following code into your project. ```jsx %%-- File: core-components/nativewind/card/index.tsx --%% ``` - -### Step 2: Update the import paths to match your project setup. +### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Card/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Card/index.themed.stories.mdx index f57833fbf0..e99d5051f7 100644 --- a/example/storybook-nativewind/src/components/Card/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Card/index.themed.stories.mdx @@ -39,7 +39,8 @@ import { Table, TableContainer, InlineCode, - CollapsibleCode + CollapsibleCode, + Tabs } from '@gluestack/design-system'; import { transformedCode } from '../../utils'; import { config } from '@gluestack-ui/config'; @@ -89,18 +90,46 @@ This is an illustration of a **Card** component. ## Installation + + + + CLI + + + Manual + + + + +<> -### Step 1: Copy and paste the following code into your project. +### Run the following command: + ```bash + npx gluestack-ui add card + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements +``` + +### Step 2: Copy and paste the following code into your project. ```jsx %%-- File: core-components/themed/card/index.tsx --%% ``` - -### Step 2: Update the import paths to match your project setup. +### Step 3: Update the import paths to match your project setup. + + + + ## API Reference 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 4cfdfc8f3f..b5d6f18a94 100644 --- a/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx @@ -21,7 +21,7 @@ import { transformedCode } from '../../utils'; import { AppProvider, CodePreview, Table } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; +import { CollapsibleCode, Tabs } from '@gluestack/design-system'; This is an illustration of **Center** component. @@ -56,17 +56,46 @@ This is an illustration of **Center** component. ## Installation -### Step 1: Copy and paste the following code into your project. + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add center + ``` + + + +<> + +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements +``` +### Step 2: Copy and paste the following code into your project. ```jsx %%-- File: core-components/nativewind/center/index.tsx --%% ``` - -### Step 2: Update the import paths to match your project setup. +### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Center/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Center/index.themed.stories.mdx index 1c01d6eda7..cdfc6e3920 100644 --- a/example/storybook-nativewind/src/components/Center/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Center/index.themed.stories.mdx @@ -21,7 +21,7 @@ import { transformedCode } from '../../utils'; import { AppProvider, CodePreview, Table } from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; +import { CollapsibleCode, Tabs} from '@gluestack/design-system'; This is an illustration of **Center** component. @@ -56,17 +56,46 @@ This is an illustration of **Center** component. ## Installation -### Step 1: Copy and paste the following code into your project. + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add center + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements +``` + +### Step 2: Copy and paste the following code into your project. ```jsx %%-- File: core-components/themed/center/index.tsx --%% ``` - -### Step 2: Update the import paths to match your project setup. +### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx index 391a81241c..10c272023a 100644 --- a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx @@ -39,6 +39,7 @@ import { Table, TableContainer, InlineCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; @@ -94,25 +95,46 @@ This is an illustration of **Checkbox** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add checkbox + ``` + + + +<> +### Step 1: Install the following dependencies: ```bash - -npm i @gluestack-ui/checkbox - +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/nativewind/checkbox/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx index d6b2448ed2..259a3b4c30 100644 --- a/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx @@ -41,7 +41,8 @@ import { Table, TableContainer, InlineCode, - CollapsibleCode + CollapsibleCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -95,25 +96,46 @@ This is an illustration of **Checkbox** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add checkbox + ``` + + + +<> +### Step 1: Install the following dependencies: ```bash - -npm i @gluestack-ui/checkbox - +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/themed/checkbox/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx index 86863634b6..3f547a8814 100644 --- a/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx @@ -34,7 +34,7 @@ import { InlineCode, } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; +import { CollapsibleCode, Tabs } from '@gluestack/design-system'; This is an illustration of **Divider** component. @@ -72,25 +72,46 @@ This is an illustration of **Divider** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add divider + ``` + + + +<> +### Step 1: Install the following dependencies: ```bash - -npm i @gluestack-ui/divider - +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/nativewind/divider/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx index 10d5a5ef29..36d95045be 100644 --- a/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx @@ -32,6 +32,7 @@ import { TableContainer, InlineCode, CollapsibleCode, + Tabs } from '@gluestack/design-system'; import { transformedCode } from '../../utils'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -72,25 +73,46 @@ This is an illustration of **Divider** component. ## Installation -### Step 1: Install the following dependencies: - -```bash + + + + CLI + + + Manual + + + + +<> -npm i @gluestack-ui/divider +### Run the following command: + ```bash + npx gluestack-ui add divider + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/themed/divider/index.tsx --%% -```` - +``` ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx index 287f49a8f1..0ac3ff7dfb 100644 --- a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx @@ -45,6 +45,7 @@ import { Table, TableContainer, InlineCode, + Tabs } from '@gluestack/design-system'; import {ShoppingCartIcon} from 'lucide-react-native' @@ -114,25 +115,46 @@ This is an illustration of **Fab** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add fab + ``` + + + +<> +### Step 1: Install the following dependencies: ```bash - -npm i @gluestack-ui/fab - +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/nativewind/fab/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ### API Reference diff --git a/example/storybook-nativewind/src/components/Fab/index.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.stories.mdx index be7ef575da..016694f752 100644 --- a/example/storybook-nativewind/src/components/Fab/index.stories.mdx +++ b/example/storybook-nativewind/src/components/Fab/index.stories.mdx @@ -37,6 +37,7 @@ import { Table, TableContainer, InlineCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; diff --git a/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx index a4efb0c3ed..270a846a90 100644 --- a/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx @@ -40,7 +40,8 @@ import { Table, TableContainer, InlineCode, - CollapsibleCode + CollapsibleCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -111,25 +112,46 @@ This is an illustration of **Fab** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add fab + ``` + + + +<> +### Step 1: Install the following dependencies: ```bash - -npm i @gluestack-ui/fab - +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/themed/fab/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ### API Reference diff --git a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx index 2f6a5518fd..f1f2a7124b 100644 --- a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx @@ -81,6 +81,7 @@ import { Text, InlineCode, CollapsibleCode, + Tabs } from '@gluestack/design-system'; import { transformedCode } from '../../utils'; import { useState } from 'react'; @@ -237,25 +238,46 @@ The Radio Component can be incorporated within the FormControl. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add form-control + ``` + + + +<> +### Step 1: Install the following dependencies: ```bash - -npm i @gluestack-ui/form-control - +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/nativewind/form-control/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx b/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx index 1d3c2e9591..08c31af849 100644 --- a/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx @@ -81,6 +81,7 @@ import { Text, InlineCode, CollapsibleCode, + Tabs } from '@gluestack/design-system'; import { transformedCode } from '../../utils'; import { useState } from 'react'; @@ -172,25 +173,46 @@ This is an illustration of **FormControl** component. ## Installation -### Step 1: Install the following dependencies: - -```bash + + + + CLI + + + Manual + + + + +<> -npm i @gluestack-ui/form-control +### Run the following command: + ```bash + npx gluestack-ui add form-control + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/themed/form-control/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference 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 659aad70ca..eafaa0063e 100644 --- a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx @@ -26,7 +26,7 @@ import { } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; +import { CollapsibleCode, Tabs } from '@gluestack/design-system'; import { Box } from '../../core-components/nativewind/box'; This is an illustration of **HStack** component. @@ -67,17 +67,46 @@ This is an illustration of **HStack** component. ## Installation -### Step 1: Copy and paste the following code into your project. + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add hstack + ``` + + + +<> + +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements +``` +### Step 2: Copy and paste the following code into your project. ```jsx %%-- File: core-components/nativewind/hstack/index.tsx --%% ``` - -### Step 2: Update the import paths to match your project setup. +### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx b/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx index edbf6ba8c0..17436c05de 100644 --- a/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx @@ -23,7 +23,8 @@ import { TableContainer, Text, InlineCode, - CollapsibleCode + CollapsibleCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -67,17 +68,46 @@ This is an illustration of **HStack** component. ## Installation -### Step 1: Copy and paste the following code into your project. + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add hstack + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements +``` + +### Step 2: Copy and paste the following code into your project. ```jsx %%-- File: core-components/themed/hstack/index.tsx --%% ``` - -### Step 2: Update the import paths to match your project setup. +### Step 3: Update the import paths to match your project setup. + + + + ## API Reference 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 b7a3cbd46a..6cd51fb2e1 100644 --- a/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Heading/index.nw.stories.mdx @@ -56,7 +56,7 @@ This is an illustration of **Heading** component. ## Installation - + CLI @@ -78,19 +78,16 @@ This is an illustration of **Heading** component. <> ### Step 1: Install the following dependencies: - ```bash npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/nativewind/heading/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx index de311fc515..99634a9aab 100644 --- a/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Heading/index.themed.stories.mdx @@ -57,7 +57,7 @@ This is an illustration of **Heading** component. ## Installation - + CLI @@ -79,19 +79,16 @@ This is an illustration of **Heading** component. <> ### Step 1: Install the following dependencies: - ```bash npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/themed/heading/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx index 0840440396..ac1433dbdc 100644 --- a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx @@ -92,6 +92,7 @@ import { Table, TableContainer, InlineCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; @@ -129,25 +130,46 @@ This is an illustration of **Icon** component. ## Installation -### Step 1: Install the following dependencies: - -```bash + + + + CLI + + + Manual + + + + +<> -npm i @gluestack-ui/icon +### Run the following command: + ```bash + npx gluestack-ui add icon + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/nativewind/icon/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx index 8d3851f4a2..9d8d68404a 100644 --- a/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx @@ -91,6 +91,7 @@ import { Table, TableContainer, InlineCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -128,25 +129,46 @@ This is an illustration of **Icon** component. ## Installation -### Step 1: Install the following dependencies: - -```bash + + + + CLI + + + Manual + + + + +<> -npm i @gluestack-ui/icon +### Run the following command: + ```bash + npx gluestack-ui add icon + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/themed/icon/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx index 2fdf62dbb8..6922afee44 100644 --- a/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx @@ -25,6 +25,7 @@ import { Table, TableContainer, InlineCode, + Tabs } from '@gluestack/design-system'; import { CollapsibleCode } from '@gluestack/design-system'; @@ -69,25 +70,46 @@ This is an illustration of **Image** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add image + ``` + + + +<> +### Step 1: Install the following dependencies: ```bash - -npm i @gluestack-ui/image - +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/nativewind/image/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Image/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Image/index.themed.stories.mdx index dff46530ca..d2b4fd5f34 100644 --- a/example/storybook-nativewind/src/components/Image/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Image/index.themed.stories.mdx @@ -25,6 +25,7 @@ import { Table, TableContainer, InlineCode, + Tabs } from '@gluestack/design-system'; import { CollapsibleCode } from '@gluestack/design-system'; @@ -69,25 +70,46 @@ This is an illustration of **Image** component. ## Installation -### Step 1: Install the following dependencies: - -```bash + + + + CLI + + + Manual + + + + +<> -npm i @gluestack-ui/image +### Run the following command: + ```bash + npx gluestack-ui add image + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/themed/image/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx index b9eb4e109b..bdc309abff 100644 --- a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx @@ -38,7 +38,8 @@ import { TableContainer, Text, InlineCode, - CollapsibleCode + CollapsibleCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; @@ -98,25 +99,46 @@ This is an illustration of **Input** component. ## Installation -### Step 1: Install the following dependencies: - -```bash + + + + CLI + + + Manual + + + + +<> -npm i @gluestack-ui/input +### Run the following command: + ```bash + npx gluestack-ui add input + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/nativewind/input/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx index c22f8bf28d..e9edcea614 100644 --- a/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx @@ -40,7 +40,8 @@ import { TableContainer, Text, InlineCode, - CollapsibleCode + CollapsibleCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -100,25 +101,46 @@ This is an illustration of **Input** component. ## Installation -### Step 1: Install the following dependencies: - -```bash + + + + CLI + + + Manual + + + + +<> -npm i @gluestack-ui/input +### Run the following command: + ```bash + npx gluestack-ui add input + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/themed/input/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx index 38bc62f295..5ea5b9665b 100644 --- a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx @@ -22,6 +22,7 @@ import { Table, TableContainer, InlineCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; @@ -56,25 +57,46 @@ This is an illustration of **Link** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add link + ``` + + + +<> +### Step 1: Install the following dependencies: ```bash - -npm i @gluestack-ui/link - +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/nativewind/link/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Link/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Link/index.themed.stories.mdx index ebf2764ce1..3095206a62 100644 --- a/example/storybook-nativewind/src/components/Link/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Link/index.themed.stories.mdx @@ -28,6 +28,7 @@ import { Table, TableContainer, InlineCode, + Tabs } from '@gluestack/design-system'; import { transformedCode } from '../../utils'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -62,25 +63,46 @@ This is an illustration of **Link** component. ## Installation -### Step 1: Install the following dependencies: - -```bash + + + + CLI + + + Manual + + + + +<> -npm i @gluestack-ui/link +### Run the following command: + ```bash + npx gluestack-ui add link + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/themed/link/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx index 39b247c951..0cd20538ff 100644 --- a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx @@ -47,6 +47,7 @@ import { AddIcon, InfoIcon, InlineCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; @@ -148,27 +149,46 @@ This is an illustration of **Modal** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add modal + ``` + + + +<> +### Step 1: Install the following dependencies: ```bash - -npm i @gluestack-ui/modal @legendapp/motion - +npm i @expo/html-elements ``` -> Note: At present, we have integrated the `@legendapp/motion` for animation. You have the option to remove this and implement your own custom animation wrapper. - ### Step 2: Copy and paste the following code into your project. - -```jsx -%%-- File: core-components/nativewind/modal/index.tsx --%% +```jsx +%%-- File: core-components/nativewind/modal/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx index 5bbca771bf..f35a62d430 100644 --- a/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx @@ -48,7 +48,8 @@ import { AddIcon, InfoIcon, InlineCode, - CollapsibleCode + CollapsibleCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -148,25 +149,46 @@ This is an illustration of **Modal** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add modal + ``` + + + +<> +### Step 1: Install the following dependencies: ```bash - -npm i @gluestack-ui/modal - +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/themed/modal/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx index 9fdfec6864..d78310f013 100644 --- a/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx @@ -49,6 +49,7 @@ import { Text, InlineCode, CollapsibleCode, + Tabs } from '@gluestack/design-system'; import { transformedCode } from '../../utils'; import Wrapper from '../../core-components/nativewind/Wrapper'; @@ -171,27 +172,46 @@ This is an illustration of **Popover** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add popover + ``` + + + +<> +### Step 1: Install the following dependencies: ```bash - -npm i @gluestack-ui/popover @legendapp/motion - +npm i @expo/html-elements ``` -> Note: At present, we have integrated the `@legendapp/motion` for animation. You have the option to remove this and implement your own custom animation wrapper. - ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/nativewind/popover/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx index a48efeedf5..ce6486ac65 100644 --- a/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx @@ -50,6 +50,7 @@ import { Text, InlineCode, CollapsibleCode, + Tabs } from '@gluestack/design-system'; import { transformedCode } from '../../utils'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -292,25 +293,46 @@ We have exported `PopoverArrow` component which can be used to render an arrow f ## Installation -### Step 1: Install the following dependencies: - -```bash + + + + CLI + + + Manual + + + + +<> -npm i @gluestack-ui/popover +### Run the following command: + ```bash + npx gluestack-ui add popover + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/themed/popover/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx index e047e654f7..128613b70a 100644 --- a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx @@ -20,7 +20,7 @@ import { transformedCode } from '../../utils'; import { AppProvider, CodePreview } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; +import { CollapsibleCode , Tabs} from '@gluestack/design-system'; This is an illustration of **Pressable** component. @@ -52,18 +52,46 @@ This is an illustration of **Pressable** component. ## Installation + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add pressable + ``` + + + +<> + +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements +``` -### Step 1: Copy and paste the following code into your project. - +### Step 2: Copy and paste the following code into your project. ```jsx %%-- File: core-components/nativewind/pressable/index.tsx --%% ``` - -### Step 2: Update the import paths to match your project setup. +### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx index 174f6ff018..1876605c71 100644 --- a/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx @@ -15,7 +15,7 @@ import { Meta } from '@storybook/addon-docs'; import { Pressable } from '../../core-components/themed'; -import { AppProvider, CodePreview,CollapsibleCode ,Text} from '@gluestack/design-system'; +import { AppProvider, CodePreview,CollapsibleCode ,Text, Tabs} from '@gluestack/design-system'; import { transformedCode } from '../../utils'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -51,18 +51,46 @@ This is an illustration of **Pressable** component. ## Installation + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add pressable + ``` + + + +<> + +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements +``` -### Step 1: Copy and paste the following code into your project. - +### Step 2: Copy and paste the following code into your project. ```jsx %%-- File: core-components/themed/pressable/index.tsx --%% ``` - -### Step 2: Update the import paths to match your project setup. +### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx index 7926acb243..55a1bfcc33 100644 --- a/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx @@ -24,6 +24,7 @@ import { Table, TableContainer, InlineCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; @@ -60,25 +61,46 @@ This is an illustration of **Progress** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add progress + ``` + + + +<> +### Step 1: Install the following dependencies: ```bash - -npm i @gluestack-ui/progress - +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/nativewind/progress/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx index f3e4e9a5dd..3a77acbce7 100644 --- a/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx @@ -21,7 +21,8 @@ import { Table, TableContainer, InlineCode, - CollapsibleCode + CollapsibleCode, + Tabs } from '@gluestack/design-system'; import { Progress, @@ -66,25 +67,46 @@ This is an illustration of **Progress** component. ## Installation -### Step 1: Install the following dependencies: - -```bash + + + + CLI + + + Manual + + + + +<> -npm i @gluestack-ui/progress +### Run the following command: + ```bash + npx gluestack-ui add progress + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/themed/progress/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx index 1863e95116..89bb3e1c57 100644 --- a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx @@ -31,6 +31,7 @@ import { Table, TableContainer, InlineCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; @@ -86,24 +87,46 @@ This is an illustration of **Radio** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add radio + ``` + + + +<> +### Step 1: Install the following dependencies: ```bash - -npm i @gluestack-ui/radio - +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - -```jsx %%-- File: core-components/nativewind/radio/index.tsx --%% +```jsx +%%-- File: core-components/nativewind/radio/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Radio/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Radio/index.themed.stories.mdx index 07b93f71f2..09f4369420 100644 --- a/example/storybook-nativewind/src/components/Radio/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Radio/index.themed.stories.mdx @@ -23,6 +23,7 @@ import { TableContainer, InlineCode, CollapsibleCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; import { diff --git a/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx index 503cf844ba..6e4db426fc 100644 --- a/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx @@ -43,7 +43,7 @@ import { import Wrapper from '../../core-components/nativewind/Wrapper'; import { Center } from '../../core-components/nativewind/center'; -import { CollapsibleCode } from '@gluestack/design-system'; +import { CollapsibleCode, Tabs } from '@gluestack/design-system'; This is an illustration of **Slider** component. @@ -99,25 +99,46 @@ This is an illustration of **Slider** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add slider + ``` + + + +<> +### Step 1: Install the following dependencies: ```bash - -npm i @gluestack-ui/slider - +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/nativewind/slider/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Slider/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Slider/index.themed.stories.mdx index f8fa133e60..43d7c83bf3 100644 --- a/example/storybook-nativewind/src/components/Slider/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Slider/index.themed.stories.mdx @@ -39,7 +39,8 @@ import { InlineCode, Table, TableContainer, - CollapsibleCode + CollapsibleCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -97,25 +98,46 @@ This is an illustration of **Slider** component. ## Installation -### Step 1: Install the following dependencies: - -```bash + + + + CLI + + + Manual + + + + +<> -npm i @gluestack-ui/slider +### Run the following command: + ```bash + npx gluestack-ui add slider + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/themed/slider/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx index 24572b7879..d236c6c27a 100644 --- a/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx @@ -20,7 +20,7 @@ import { AppProvider, CodePreview } from '@gluestack/design-system'; import colors from 'tailwindcss/colors'; import Wrapper from '../../core-components/nativewind/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; +import { CollapsibleCode, Tabs } from '@gluestack/design-system'; This is an illustration of **Spinner** component. @@ -51,25 +51,46 @@ This is an illustration of **Spinner** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add spinner + ``` + + + +<> +### Step 1: Install the following dependencies: ```bash - -npm i @gluestack-ui/spinner - +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/nativewind/spinner/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Spinner/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Spinner/index.themed.stories.mdx index 8024d688a4..e0ccdde1f9 100644 --- a/example/storybook-nativewind/src/components/Spinner/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Spinner/index.themed.stories.mdx @@ -15,7 +15,7 @@ import { Meta } from '@storybook/addon-docs'; import { transformedCode } from '../../utils'; -import { AppProvider, CodePreview ,CollapsibleCode} from '@gluestack/design-system'; +import { AppProvider, CodePreview ,CollapsibleCode, Tabs} from '@gluestack/design-system'; import { Spinner, HStack, VStack, Text } from '../../core-components/themed'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -49,25 +49,46 @@ This is an illustration of **Spinner** component. ## Installation -### Step 1: Install the following dependencies: - -```bash + + + + CLI + + + Manual + + + + +<> -npm i @gluestack-ui/spinner +### Run the following command: + ```bash + npx gluestack-ui add spinner + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/themed/spinner/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx index 88a983df45..7dc822810d 100644 --- a/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx @@ -28,7 +28,7 @@ import { } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; +import { CollapsibleCode, Tabs } from '@gluestack/design-system'; This is an illustration of **Switch** component. @@ -65,25 +65,46 @@ This is an illustration of **Switch** component. ## Installation -### Step 1: Install the following dependencies: - + + + + CLI + + + Manual + + + + +<> + +### Run the following command: ```bash +npx gluestack-ui add switch +``` + + + +<> -npm i @gluestack-ui/switch - +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/nativewind/switch/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Switch/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Switch/index.themed.stories.mdx index d718153588..56dd13b2c6 100644 --- a/example/storybook-nativewind/src/components/Switch/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Switch/index.themed.stories.mdx @@ -23,6 +23,7 @@ import { TableContainer, InlineCode, CollapsibleCode, + Tabs } from '@gluestack/design-system'; import { transformedCode } from '../../utils'; import { Switch, VStack, Text, HStack } from '../../core-components/themed'; @@ -60,25 +61,46 @@ This is an illustration of **Switch** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> +### Run the following command: ```bash +npx gluestack-ui add switch +``` + + + +<> -npm i @gluestack-ui/switch - +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/themed/switch/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference 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 3757908715..b0601b2017 100644 --- a/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx @@ -17,7 +17,7 @@ import { Meta } from '@storybook/addon-docs'; import { Text, Center } from '../../core-components/nativewind'; import { transformedCode } from '../../utils'; import Wrapper from '../../core-components/nativewind/Wrapper'; -import { CollapsibleCode } from '@gluestack/design-system'; +import { CollapsibleCode, Tabs } from '@gluestack/design-system'; import { AppProvider, @@ -53,20 +53,48 @@ This is an illustration of **Text** component.
- ## Installation -### Step 1: Copy and paste the following code into your project. + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add text + ``` + + + +<> + +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements +``` +### Step 2: Copy and paste the following code into your project. ```jsx %%-- File: core-components/nativewind/text/index.tsx --%% ``` - -### Step 2: Update the import paths to match your project setup. +### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Text/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Text/index.themed.stories.mdx index c26a9694f0..d38a58eec5 100644 --- a/example/storybook-nativewind/src/components/Text/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Text/index.themed.stories.mdx @@ -21,6 +21,7 @@ import { TableContainer, InlineCode, CollapsibleCode, + Tabs } from '@gluestack/design-system'; import { transformedCode } from '../../utils'; import { Text, Center } from '../../core-components/themed'; @@ -54,17 +55,46 @@ This is an illustration of **Text** component. ## Installation -### Step 1: Copy and paste the following code into your project. + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add text + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements +``` + +### Step 2: Copy and paste the following code into your project. ```jsx %%-- File: core-components/themed/text/index.tsx --%% ``` - -### Step 2: Update the import paths to match your project setup. +### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx index fa7229a367..cb6ad97a50 100644 --- a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx @@ -31,6 +31,7 @@ import { Table, TableContainer, InlineCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; @@ -86,21 +87,46 @@ This is an illustration of **Textarea** component. ## Installation -### Step 1: Install the following dependencies: - -```bash + + + + CLI + + + Manual + + + + +<> -npm i @gluestack-ui/textarea +### Run the following command: + ```bash + npx gluestack-ui add textarea + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. + -```jsx -%%-- File: core-components/nativewind/textarea/index.tsx --%% +```jsx +%%-- File: core-components/nativewind/textarea/index.tsx --%% ``` + ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx index cffd6d351c..7446ece901 100644 --- a/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx @@ -31,6 +31,7 @@ import { Table, TableContainer, InlineCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -87,21 +88,46 @@ This is an illustration of **Textarea** component. ## Installation -### Step 1: Install the following dependencies: - -```bash + + + + CLI + + + Manual + + + + +<> -npm i @gluestack-ui/textarea +### Run the following command: + ```bash + npx gluestack-ui add textarea + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. + -```jsx -%%-- File: core-components/themed/textarea/index.tsx --%% +```jsx +%%-- File: core-components/themed/textarea/index.tsx --%% ``` + ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx index cced321ef1..a9e1433f8e 100644 --- a/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx @@ -39,7 +39,8 @@ import { TableContainer, Text, InlineCode, - CollapsibleCode + CollapsibleCode, + Tabs } from '@gluestack/design-system'; import { View } from 'react-native'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -116,25 +117,46 @@ This is an illustration of **Toast** component. ## Installation -### Step 1: Install the following dependencies: - -```bash + + + + CLI + + + Manual + + + + +<> -npm i @gluestack-ui/toast +### Run the following command: + ```bash + npx gluestack-ui add toast + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/themed/toast/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx index 5d59c00fd2..9047bf0f4e 100644 --- a/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx @@ -40,7 +40,8 @@ import { TableContainer, Text, InlineCode, - CollapsibleCode + CollapsibleCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -107,25 +108,46 @@ This is an illustration of **Tooltip** component. ## Installation -### Step 1: Install the following dependencies: - -```bash + + + + CLI + + + Manual + + + + +<> -npm i @gluestack-ui/tooltip +### Run the following command: + ```bash + npx gluestack-ui add tooltip + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/themed/tooltip/index.tsx --%% ``` - ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference 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 4c92a5787d..eab6e2d545 100644 --- a/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx @@ -21,6 +21,7 @@ import { TableContainer, Text, InlineCode, + Tabs } from '@gluestack/design-system'; import { Box, VStack } from '../../core-components/nativewind'; import { transformedCode } from '../../utils'; @@ -72,17 +73,46 @@ This is an illustration of **VStack** component. ## Installation -### Step 1: Copy and paste the following code into your project. + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add vstack + ``` + + + +<> + +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements +``` +### Step 2: Copy and paste the following code into your project. ```jsx %%-- File: core-components/nativewind/vstack/index.tsx --%% ``` - -### Step 2: Update the import paths to match your project setup. +### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx b/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx index 1de652a0ea..549980d9fe 100644 --- a/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx @@ -24,6 +24,7 @@ import { Text, InlineCode, CollapsibleCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; @@ -71,17 +72,46 @@ This is an illustration of **VStack** component. ## Installation -### Step 1: Copy and paste the following code into your project. + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add vstack + ``` + + + +<> +### Step 1: Install the following dependencies: +```bash +npm i @expo/html-elements +``` + +### Step 2: Copy and paste the following code into your project. ```jsx %%-- File: core-components/themed/vstack/index.tsx --%% ``` - -### Step 2: Update the import paths to match your project setup. +### Step 3: Update the import paths to match your project setup. + + + + ## API Reference From 8b39014c79e5314116f72a60d13a034c13ec46e1 Mon Sep 17 00:00:00 2001 From: Vaibhavi Kolloju Date: Wed, 20 Mar 2024 15:23:13 +0530 Subject: [PATCH 5/8] feat: update docs --- .../src/components/Actionsheet/index.themed.stories.mdx | 2 +- .../src/components/Alert/index.nw.stories.mdx | 3 ++- .../src/components/Alert/index.themed.stories.mdx | 2 +- .../src/components/AlertDialog/index.themed.stories.mdx | 2 +- .../src/components/Avatar/index.nw.stories.mdx | 3 ++- .../src/components/Avatar/index.themed.stories.mdx | 2 +- .../src/components/Badge/index.nw.stories.mdx | 9 ++------- .../src/components/Badge/index.themed.stories.mdx | 9 ++------- .../src/components/Box/index.nw.stories.mdx | 9 ++------- .../src/components/Box/index.themed.stories.mdx | 9 ++------- .../src/components/Button/index.nw.stories.mdx | 2 +- .../src/components/Button/index.themed.stories.mdx | 2 +- .../src/components/Card/index.nw.stories.mdx | 9 ++------- .../src/components/Card/index.themed.stories.mdx | 9 ++------- .../src/components/Center/index.nw.stories.mdx | 9 ++------- .../src/components/Center/index.themed.stories.mdx | 9 ++------- .../src/components/Checkbox/index.nw.stories.mdx | 2 +- .../src/components/Checkbox/index.themed.stories.mdx | 2 +- .../src/components/Divider/index.nw.stories.mdx | 2 +- .../src/components/Divider/index.themed.stories.mdx | 2 +- .../src/components/Fab/index.nw.stories.mdx | 2 +- .../src/components/Fab/index.themed.stories.mdx | 2 +- .../src/components/FormControl/index.nw.stories.mdx | 2 +- .../src/components/FormControl/index.themed.stories.mdx | 2 +- .../src/components/HStack/index.nw.stories.mdx | 9 ++------- .../src/components/HStack/index.themed.stories.mdx | 9 ++------- .../src/components/Icon/index.nw.stories.mdx | 2 +- .../src/components/Icon/index.themed.stories.mdx | 2 +- .../src/components/Image/index.nw.stories.mdx | 2 +- .../src/components/Image/index.themed.stories.mdx | 2 +- .../src/components/Input/index.nw.stories.mdx | 2 +- .../src/components/Input/index.themed.stories.mdx | 2 +- .../src/components/Link/index.nw.stories.mdx | 2 +- .../src/components/Link/index.themed.stories.mdx | 2 +- .../src/components/Modal/index.nw.stories.mdx | 2 +- .../src/components/Modal/index.themed.stories.mdx | 2 +- .../src/components/Popover/index.nw.stories.mdx | 2 +- .../src/components/Popover/index.themed.stories.mdx | 2 +- .../src/components/Pressable/index.nw.stories.mdx | 9 ++------- .../src/components/Pressable/index.themed.stories.mdx | 9 ++------- .../src/components/Progress/index.nw.stories.mdx | 2 +- .../src/components/Progress/index.themed.stories.mdx | 2 +- .../src/components/Radio/index.nw.stories.mdx | 2 +- .../src/components/Radio/index.themed.stories.mdx | 2 +- .../src/components/Slider/index.nw.stories.mdx | 2 +- .../src/components/Slider/index.themed.stories.mdx | 2 +- .../src/components/Spinner/index.nw.stories.mdx | 2 +- .../src/components/Spinner/index.themed.stories.mdx | 2 +- .../src/components/Switch/index.nw.stories.mdx | 2 +- .../src/components/Switch/index.themed.stories.mdx | 2 +- .../src/components/Text/index.nw.stories.mdx | 9 ++------- .../src/components/Text/index.themed.stories.mdx | 9 ++------- .../src/components/Textarea/index.nw.stories.mdx | 5 +++-- .../src/components/Textarea/index.themed.stories.mdx | 2 +- .../src/components/Toast/index.themed.stories.mdx | 2 +- .../src/components/Tooltip/index.themed.stories.mdx | 2 +- .../src/components/VStack/index.nw.stories.mdx | 9 ++------- .../src/components/VStack/index.themed.stories.mdx | 9 ++------- .../getting-started/Installation/index.nw.stories.mdx | 4 ++-- 59 files changed, 80 insertions(+), 157 deletions(-) diff --git a/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx index 20c04e1464..c6f8efea82 100644 --- a/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx @@ -166,7 +166,7 @@ function App(){ ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/actionsheet @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx index 3b47069f7f..e50dc6608a 100644 --- a/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx @@ -37,6 +37,7 @@ import { Table, InlineCode, TableContainer, + Tabs } from '@gluestack/design-system'; import { CollapsibleCode } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; @@ -113,7 +114,7 @@ This is an illustration of **Alert** component. ```bash -npm i @expo/html-elements +npm i @gluestack-ui/alert ``` diff --git a/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx index 3a8eec48d1..260070af02 100644 --- a/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx @@ -113,7 +113,7 @@ This is an illustration of **Alert** component. ```bash -npm i @expo/html-elements +npm i @gluestack-ui/alert ``` diff --git a/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx b/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx index 6840015d79..bd098d9751 100644 --- a/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx @@ -164,7 +164,7 @@ This is an illustration of **AlertDialog** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/alert-dialog ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx index 0b647136f5..8673960c6d 100644 --- a/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx @@ -35,6 +35,7 @@ import { Table, TableContainer, InlineCode, + Tabs } from '@gluestack/design-system'; import { CollapsibleCode } from '@gluestack/design-system'; @@ -103,7 +104,7 @@ This is an illustration of **Avatar** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/avatar ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx index 74c52f1154..afb345efcf 100644 --- a/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Avatar/index.themed.stories.mdx @@ -104,7 +104,7 @@ This is an illustration of **Avatar** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/avatar ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx index acd7a66d66..458346a1ff 100644 --- a/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Badge/index.nw.stories.mdx @@ -127,12 +127,7 @@ This is an illustration of **Badge** component. <> -### Step 1: Install the following dependencies: -```bash -npm i @expo/html-elements -``` - -### Step 2: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into your project. ```jsx @@ -140,7 +135,7 @@ npm i @expo/html-elements ``` -### Step 3: Update the import paths to match your project setup. +### Step 2: 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 index 1aff25302d..d06c9cfe12 100644 --- a/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Badge/index.themed.stories.mdx @@ -126,12 +126,7 @@ This is an illustration of **Badge** component. <> -### Step 1: Install the following dependencies: -```bash -npm i @expo/html-elements -``` - -### Step 2: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into your project. ```jsx @@ -139,7 +134,7 @@ npm i @expo/html-elements ``` -### Step 3: Update the import paths to match your project setup. +### Step 2: 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 index a0a5242c0f..229296d725 100644 --- a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx @@ -80,12 +80,7 @@ This is an illustration of **Box** component. <> -### Step 1: Install the following dependencies: -```bash -npm i @expo/html-elements -``` - -### Step 2: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into your project. ```jsx @@ -93,7 +88,7 @@ npm i @expo/html-elements ``` -### Step 3: Update the import paths to match your project setup. +### Step 2: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx index 048b5afdf0..d9f128c4ab 100644 --- a/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx @@ -77,12 +77,7 @@ This is an illustration of **Box** component. <> -### Step 1: Install the following dependencies: -```bash -npm i @expo/html-elements -``` - -### Step 2: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into your project. ```jsx @@ -90,7 +85,7 @@ npm i @expo/html-elements ``` -### Step 3: Update the import paths to match your project setup. +### Step 2: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx index 6e542dea0e..27a166315a 100644 --- a/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Button/index.nw.stories.mdx @@ -111,7 +111,7 @@ This is an illustration of **Button** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/button ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx index e6eaca83e7..8eb3fabcf6 100644 --- a/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Button/index.themed.stories.mdx @@ -114,7 +114,7 @@ This is an illustration of **Button** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/button ``` ### Step 2: Copy and paste the following code into your project. 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 da439437b7..2228973ba1 100644 --- a/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Card/index.nw.stories.mdx @@ -112,12 +112,7 @@ This is an illustration of a **Card** component. <> -### Step 1: Install the following dependencies: -```bash -npm i @expo/html-elements -``` - -### Step 2: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into your project. ```jsx @@ -125,7 +120,7 @@ npm i @expo/html-elements ``` -### Step 3: Update the import paths to match your project setup. +### Step 2: 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 index e99d5051f7..7e4bbc69ff 100644 --- a/example/storybook-nativewind/src/components/Card/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Card/index.themed.stories.mdx @@ -112,12 +112,7 @@ This is an illustration of a **Card** component. <> -### Step 1: Install the following dependencies: -```bash -npm i @expo/html-elements -``` - -### Step 2: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into your project. ```jsx @@ -125,7 +120,7 @@ npm i @expo/html-elements ``` -### Step 3: Update the import paths to match your project setup. +### Step 2: 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 index b5d6f18a94..ba511a920d 100644 --- a/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Center/index.nw.stories.mdx @@ -78,12 +78,7 @@ This is an illustration of **Center** component. <> -### Step 1: Install the following dependencies: -```bash -npm i @expo/html-elements -``` - -### Step 2: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into your project. ```jsx @@ -91,7 +86,7 @@ npm i @expo/html-elements ``` -### Step 3: Update the import paths to match your project setup. +### Step 2: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/components/Center/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Center/index.themed.stories.mdx index cdfc6e3920..952dc7ac25 100644 --- a/example/storybook-nativewind/src/components/Center/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Center/index.themed.stories.mdx @@ -78,12 +78,7 @@ This is an illustration of **Center** component. <> -### Step 1: Install the following dependencies: -```bash -npm i @expo/html-elements -``` - -### Step 2: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into your project. ```jsx @@ -91,7 +86,7 @@ npm i @expo/html-elements ``` -### Step 3: Update the import paths to match your project setup. +### Step 2: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx index 10c272023a..d182280d09 100644 --- a/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Checkbox/index.nw.stories.mdx @@ -119,7 +119,7 @@ This is an illustration of **Checkbox** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/checkbox lucide-react-native ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx index 259a3b4c30..8401cb5b0f 100644 --- a/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Checkbox/index.themed.stories.mdx @@ -120,7 +120,7 @@ This is an illustration of **Checkbox** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/checkbox lucide-react-native ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx index 3f547a8814..7a8a08b2f0 100644 --- a/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Divider/index.nw.stories.mdx @@ -96,7 +96,7 @@ This is an illustration of **Divider** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/divider ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx index 36d95045be..b41e5249bc 100644 --- a/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Divider/index.themed.stories.mdx @@ -97,7 +97,7 @@ This is an illustration of **Divider** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/divider ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx index 0ac3ff7dfb..d5c636d20b 100644 --- a/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Fab/index.nw.stories.mdx @@ -139,7 +139,7 @@ This is an illustration of **Fab** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/fab ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx index 270a846a90..bb50f0a7e1 100644 --- a/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Fab/index.themed.stories.mdx @@ -136,7 +136,7 @@ This is an illustration of **Fab** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/fab ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx index f1f2a7124b..92b81e1ad0 100644 --- a/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/FormControl/index.nw.stories.mdx @@ -262,7 +262,7 @@ The Radio Component can be incorporated within the FormControl. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/form-control ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx b/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx index 08c31af849..936882da24 100644 --- a/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/FormControl/index.themed.stories.mdx @@ -197,7 +197,7 @@ This is an illustration of **FormControl** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/form-control ``` ### Step 2: Copy and paste the following code into your project. 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 eafaa0063e..ad6681295b 100644 --- a/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/HStack/index.nw.stories.mdx @@ -89,12 +89,7 @@ This is an illustration of **HStack** component. <> -### Step 1: Install the following dependencies: -```bash -npm i @expo/html-elements -``` - -### Step 2: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into your project. ```jsx @@ -102,7 +97,7 @@ npm i @expo/html-elements ``` -### Step 3: Update the import paths to match your project setup. +### Step 2: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx b/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx index 17436c05de..879f958928 100644 --- a/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/HStack/index.themed.stories.mdx @@ -90,12 +90,7 @@ This is an illustration of **HStack** component. <> -### Step 1: Install the following dependencies: -```bash -npm i @expo/html-elements -``` - -### Step 2: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into your project. ```jsx @@ -103,7 +98,7 @@ npm i @expo/html-elements ``` -### Step 3: Update the import paths to match your project setup. +### Step 2: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx index ac1433dbdc..37825f540e 100644 --- a/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Icon/index.nw.stories.mdx @@ -154,7 +154,7 @@ This is an illustration of **Icon** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/icon ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx index 9d8d68404a..9006de6249 100644 --- a/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Icon/index.themed.stories.mdx @@ -153,7 +153,7 @@ This is an illustration of **Icon** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/icon ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx index 6922afee44..9809cc9dcf 100644 --- a/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Image/index.nw.stories.mdx @@ -94,7 +94,7 @@ This is an illustration of **Image** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/image ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Image/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Image/index.themed.stories.mdx index d2b4fd5f34..55b66fd3f8 100644 --- a/example/storybook-nativewind/src/components/Image/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Image/index.themed.stories.mdx @@ -94,7 +94,7 @@ This is an illustration of **Image** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/image ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx index bdc309abff..8ee36f6127 100644 --- a/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Input/index.nw.stories.mdx @@ -123,7 +123,7 @@ This is an illustration of **Input** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/input ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx index e9edcea614..98a8501a5f 100644 --- a/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Input/index.themed.stories.mdx @@ -125,7 +125,7 @@ This is an illustration of **Input** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/input ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx index 5ea5b9665b..7fb13be506 100644 --- a/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Link/index.nw.stories.mdx @@ -81,7 +81,7 @@ This is an illustration of **Link** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/link ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Link/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Link/index.themed.stories.mdx index 3095206a62..a827df8734 100644 --- a/example/storybook-nativewind/src/components/Link/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Link/index.themed.stories.mdx @@ -87,7 +87,7 @@ This is an illustration of **Link** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/link ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx index 0cd20538ff..6fbf3055ec 100644 --- a/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Modal/index.nw.stories.mdx @@ -173,7 +173,7 @@ This is an illustration of **Modal** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/modal @legendapp/motion ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx index f35a62d430..6f81604286 100644 --- a/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Modal/index.themed.stories.mdx @@ -173,7 +173,7 @@ This is an illustration of **Modal** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/modal ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx index d78310f013..ed2c9fd35d 100644 --- a/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Popover/index.nw.stories.mdx @@ -196,7 +196,7 @@ This is an illustration of **Popover** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/popover ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx index ce6486ac65..cf8c566a06 100644 --- a/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Popover/index.themed.stories.mdx @@ -317,7 +317,7 @@ We have exported `PopoverArrow` component which can be used to render an arrow f ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/popover ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx index 128613b70a..55764ceda2 100644 --- a/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Pressable/index.nw.stories.mdx @@ -74,12 +74,7 @@ This is an illustration of **Pressable** component. <> -### Step 1: Install the following dependencies: -```bash -npm i @expo/html-elements -``` - -### Step 2: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into your project. ```jsx @@ -87,7 +82,7 @@ npm i @expo/html-elements ``` -### Step 3: Update the import paths to match your project setup. +### Step 2: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx index 1876605c71..2fbfbb6a17 100644 --- a/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Pressable/index.themed.stories.mdx @@ -73,12 +73,7 @@ This is an illustration of **Pressable** component. <> -### Step 1: Install the following dependencies: -```bash -npm i @expo/html-elements -``` - -### Step 2: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into your project. ```jsx @@ -86,7 +81,7 @@ npm i @expo/html-elements ``` -### Step 3: Update the import paths to match your project setup. +### Step 2: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx index 55a1bfcc33..c882246988 100644 --- a/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Progress/index.nw.stories.mdx @@ -85,7 +85,7 @@ This is an illustration of **Progress** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/progress ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx index 3a77acbce7..a34b1f88b8 100644 --- a/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Progress/index.themed.stories.mdx @@ -91,7 +91,7 @@ This is an illustration of **Progress** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/progress ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx index 89bb3e1c57..548f416a22 100644 --- a/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Radio/index.nw.stories.mdx @@ -111,7 +111,7 @@ This is an illustration of **Radio** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/radio lucide-react-native ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Radio/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Radio/index.themed.stories.mdx index 09f4369420..53d64d396e 100644 --- a/example/storybook-nativewind/src/components/Radio/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Radio/index.themed.stories.mdx @@ -96,7 +96,7 @@ This is an illustration of **Radio** component. ```bash -npm i @gluestack-ui/radio +npm i @gluestack-ui/radio lucide-react-native ``` diff --git a/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx index 6e4db426fc..b7b8795851 100644 --- a/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Slider/index.nw.stories.mdx @@ -123,7 +123,7 @@ This is an illustration of **Slider** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/slider ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Slider/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Slider/index.themed.stories.mdx index 43d7c83bf3..4739c246e1 100644 --- a/example/storybook-nativewind/src/components/Slider/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Slider/index.themed.stories.mdx @@ -122,7 +122,7 @@ This is an illustration of **Slider** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/slider ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx index d236c6c27a..2b59b7898c 100644 --- a/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Spinner/index.nw.stories.mdx @@ -75,7 +75,7 @@ This is an illustration of **Spinner** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/spinner ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Spinner/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Spinner/index.themed.stories.mdx index e0ccdde1f9..f4005ce17b 100644 --- a/example/storybook-nativewind/src/components/Spinner/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Spinner/index.themed.stories.mdx @@ -73,7 +73,7 @@ This is an illustration of **Spinner** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/spinner ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx index 7dc822810d..c6911810ef 100644 --- a/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Switch/index.nw.stories.mdx @@ -89,7 +89,7 @@ npx gluestack-ui add switch ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/switch ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Switch/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Switch/index.themed.stories.mdx index 56dd13b2c6..55a1e091b4 100644 --- a/example/storybook-nativewind/src/components/Switch/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Switch/index.themed.stories.mdx @@ -85,7 +85,7 @@ npx gluestack-ui add switch ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/switch ``` ### Step 2: Copy and paste the following code into 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 b0601b2017..b479671d56 100644 --- a/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Text/index.nw.stories.mdx @@ -77,12 +77,7 @@ This is an illustration of **Text** component. <> -### Step 1: Install the following dependencies: -```bash -npm i @expo/html-elements -``` - -### Step 2: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into your project. ```jsx @@ -90,7 +85,7 @@ npm i @expo/html-elements ``` -### Step 3: Update the import paths to match your project setup. +### Step 2: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/components/Text/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Text/index.themed.stories.mdx index d38a58eec5..d6829b3e90 100644 --- a/example/storybook-nativewind/src/components/Text/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Text/index.themed.stories.mdx @@ -77,12 +77,7 @@ This is an illustration of **Text** component. <> -### Step 1: Install the following dependencies: -```bash -npm i @expo/html-elements -``` - -### Step 2: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into your project. ```jsx @@ -90,7 +85,7 @@ npm i @expo/html-elements ``` -### Step 3: Update the import paths to match your project setup. +### Step 2: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx index cb6ad97a50..e438f0eec6 100644 --- a/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Textarea/index.nw.stories.mdx @@ -31,7 +31,8 @@ import { Table, TableContainer, InlineCode, - Tabs + Tabs, + CollapsibleCode } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; @@ -111,7 +112,7 @@ This is an illustration of **Textarea** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/textarea ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx index 7446ece901..942708a5af 100644 --- a/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx @@ -112,7 +112,7 @@ This is an illustration of **Textarea** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/textarea ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx index a9e1433f8e..d17b458285 100644 --- a/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Toast/index.themed.stories.mdx @@ -141,7 +141,7 @@ This is an illustration of **Toast** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/toast ``` ### Step 2: Copy and paste the following code into your project. diff --git a/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx index 9047bf0f4e..d128c42f35 100644 --- a/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Tooltip/index.themed.stories.mdx @@ -132,7 +132,7 @@ This is an illustration of **Tooltip** component. ### Step 1: Install the following dependencies: ```bash -npm i @expo/html-elements +npm i @gluestack-ui/tooltip ``` ### Step 2: Copy and paste the following code into your project. 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 eab6e2d545..ab1d011404 100644 --- a/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/VStack/index.nw.stories.mdx @@ -95,12 +95,7 @@ This is an illustration of **VStack** component. <> -### Step 1: Install the following dependencies: -```bash -npm i @expo/html-elements -``` - -### Step 2: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into your project. ```jsx @@ -108,7 +103,7 @@ npm i @expo/html-elements ``` -### Step 3: Update the import paths to match your project setup. +### Step 2: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx b/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx index 549980d9fe..dd5383272d 100644 --- a/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/VStack/index.themed.stories.mdx @@ -94,12 +94,7 @@ This is an illustration of **VStack** component. <> -### Step 1: Install the following dependencies: -```bash -npm i @expo/html-elements -``` - -### Step 2: Copy and paste the following code into your project. +### Step 1: Copy and paste the following code into your project. ```jsx @@ -107,7 +102,7 @@ npm i @expo/html-elements ``` -### Step 3: Update the import paths to match your project setup. +### Step 2: Update the import paths to match your project setup. diff --git a/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx b/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx index 48539af6c4..f664017a9c 100644 --- a/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/getting-started/Installation/index.nw.stories.mdx @@ -24,7 +24,7 @@ you can use [gluestack-expo-nativewind-v4-template](https://github.com/gluestack ### Using CLI If you wish to use `gluestack-ui` in your existing project using CLI, you can proceed with the following steps: -### Step 1: Setup nativewind +### Step 1: Setup Nativewind Setup nativewind in your project following [NativeWind documentation](https://www.nativewind.dev/v4/getting-started/react-native). ### Step 2: Initialize @@ -42,7 +42,7 @@ You will be asked to select a component style to initialize ``` Refer Step: 6 in manual installation for usage of `GluestackUIProvider` -### Step 4: Add components +### Step 3: Add components To add components you wish to use in your project, you can use `add` command as shown below. ```bash From 25877b45352be9063bbaa10d73ce35a7643be735 Mon Sep 17 00:00:00 2001 From: Vaibhavi Kolloju Date: Wed, 20 Mar 2024 16:52:11 +0530 Subject: [PATCH 6/8] fix: code refactor --- .../src/components/Box/index.nw.stories.mdx | 2 ++ .../src/components/Box/index.themed.stories.mdx | 2 ++ .../Installation/index.themed.stories.mdx | 17 ++--------------- 3 files changed, 6 insertions(+), 15 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 229296d725..edc75b6fac 100644 --- a/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Box/index.nw.stories.mdx @@ -94,6 +94,8 @@ This is an illustration of **Box** component. +## API Reference + To use this component in your project, include the following import statement in your file. ```jsx diff --git a/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx index d9f128c4ab..9db3fb9d08 100644 --- a/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Box/index.themed.stories.mdx @@ -91,6 +91,8 @@ This is an illustration of **Box** component. +## API Reference + To use this component in your project, include the following import statement in your file. ```jsx diff --git a/example/storybook-nativewind/src/getting-started/Installation/index.themed.stories.mdx b/example/storybook-nativewind/src/getting-started/Installation/index.themed.stories.mdx index 60c3d8a0b4..78bf249c82 100644 --- a/example/storybook-nativewind/src/getting-started/Installation/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/getting-started/Installation/index.themed.stories.mdx @@ -25,20 +25,7 @@ Coming soon If you wish to use `gluestack-ui` in your existing project using CLI, you can proceed with the following steps: -### Step 1: Install dependency -First install `gluestack-ui` into your existing project using the following command - -```bash -yarn add gluestack-ui -``` - -OR - -```bash -npm i gluestack-ui -``` - -### Step 2: Initialize +### Step 1: Initialize Use `init` command to add `GluestackUIProvider` and `gluestack-ui-provider/config.ts` file into your project. ```bash @@ -48,7 +35,7 @@ You will be asked to select a component style to initialize ```bash Which style would you like to use in your project: - gluestack-style // Choose a component style + gluestack-style nativewind ``` Refer step: 4 in manual installation for usage of `GluestackUIProvider` From f112321bae6a3b639872eebe725a36bbe4aa157c Mon Sep 17 00:00:00 2001 From: Vaibhavi Kolloju Date: Wed, 20 Mar 2024 17:06:05 +0530 Subject: [PATCH 7/8] fix: fix error --- .../src/components/Textarea/index.themed.stories.mdx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx index 942708a5af..5ade3cfd4a 100644 --- a/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Textarea/index.themed.stories.mdx @@ -31,7 +31,8 @@ import { Table, TableContainer, InlineCode, - Tabs + Tabs, + CollapsibleCode } from '@gluestack/design-system'; import Wrapper from '../../core-components/themed/Wrapper'; From f14025339afc38e4471b4cd60eb406e792fa2784 Mon Sep 17 00:00:00 2001 From: Vaibhavi Kolloju Date: Wed, 20 Mar 2024 19:05:02 +0530 Subject: [PATCH 8/8] feat: updated docs for new components --- .../components/Accordion/index.nw.stories.mdx | 37 +++++++++++++++++-- .../AlertDialog/index.nw.stories.mdx | 34 +++++++++++++++-- .../src/components/Menu/index.nw.stories.mdx | 32 ++++++++++++++-- .../components/Menu/index.themed.stories.mdx | 30 +++++++++++++-- .../components/Tooltip/index.nw.stories.mdx | 34 +++++++++++++++-- 5 files changed, 149 insertions(+), 18 deletions(-) diff --git a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx index 4d449ea5d9..3ddfcad82f 100644 --- a/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx @@ -36,6 +36,7 @@ import { AddIcon, InfoIcon, Alert, + Tabs } from '@gluestack/design-system'; import { transformedCode } from '../../utils'; import { CollapsibleCode } from '@gluestack/design-system'; @@ -159,21 +160,49 @@ This is an illustration of **Accordion** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> -```bash +### Run the following command: + ```bash + npx gluestack-ui add accordion + ``` + + + +<> -npm i @gluestack-ui/accordion +### Step 1: Install the following dependencies: +```bash +npm i @gluestack-ui/accordion @expo/html-elements ``` ### Step 2: Copy and paste the following code into your project. - ```jsx %%-- File: core-components/nativewind/accordion/index.tsx --%% ``` + +```jsx +%%-- File: core-components/nativewind/accordion/index.tsx --%% +``` + ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx b/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx index 8e52d6e11f..1944349bce 100644 --- a/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx @@ -41,7 +41,8 @@ import { Table, TableContainer, InlineCode, - CollapsibleCode + CollapsibleCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; @@ -136,13 +137,34 @@ This is an illustration of **AlertDialog** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> -```bash +### Run the following command: + ```bash + npx gluestack-ui add alert-dialog + ``` + + + +<> -npm i @gluestack-ui/alert-dialog +### Step 1: Install the following dependencies: +```bash +npm i @gluestack-ui/alert-dialog @legendapp/motion ``` +> Note: At present, we have integrated the `@legendapp/motion` for animation. You have the option to remove this and implement your own custom animation wrapper. ### Step 2: Copy and paste the following code into your project. @@ -155,6 +177,10 @@ npm i @gluestack-ui/alert-dialog ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx index 7d22e1bdf7..0eb6016aed 100644 --- a/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Menu/index.nw.stories.mdx @@ -43,6 +43,7 @@ import { TableContainer, InfoIcon, InlineCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; @@ -130,13 +131,34 @@ This is an illustration of a **Menu** component. ## Installation + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add menu + ``` + + + +<> + ### Step 1: Install the following dependencies: ```bash - -npm i @gluestack-ui/menu - +npm i @gluestack-ui/menu @legendapp/motion ``` +> Note: At present, we have integrated the `@legendapp/motion` for animation. You have the option to remove this and implement your own custom animation wrapper. ### Step 2: Copy and paste the following code into your project. @@ -149,6 +171,10 @@ npm i @gluestack-ui/menu ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Menu/index.themed.stories.mdx b/example/storybook-nativewind/src/components/Menu/index.themed.stories.mdx index cc5017e39a..9d56dfea8d 100644 --- a/example/storybook-nativewind/src/components/Menu/index.themed.stories.mdx +++ b/example/storybook-nativewind/src/components/Menu/index.themed.stories.mdx @@ -129,12 +129,32 @@ This is an illustration of a **Menu** component. ## Installation + + + + CLI + + + Manual + + + + +<> + +### Run the following command: + ```bash + npx gluestack-ui add menu + ``` + + + +<> + ### Step 1: Install the following dependencies: ```bash - -npm i @gluestack-ui/menu - +npm i @gluestack-ui/menu ``` ### Step 2: Copy and paste the following code into your project. @@ -148,6 +168,10 @@ npm i @gluestack-ui/menu ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference diff --git a/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx b/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx index 10f7275782..f49387daa6 100644 --- a/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx +++ b/example/storybook-nativewind/src/components/Tooltip/index.nw.stories.mdx @@ -41,7 +41,8 @@ import { TableContainer, Text, InlineCode, - CollapsibleCode + CollapsibleCode, + Tabs } from '@gluestack/design-system'; import Wrapper from '../../core-components/nativewind/Wrapper'; @@ -111,13 +112,34 @@ This is an illustration of **Tooltip** component. ## Installation -### Step 1: Install the following dependencies: + + + + CLI + + + Manual + + + + +<> -```bash +### Run the following command: + ```bash + npx gluestack-ui add tooltip + ``` + + + +<> -npm i @gluestack-ui/tooltip +### Step 1: Install the following dependencies: +```bash +npm i @gluestack-ui/tooltip @legendapp/motion ``` +> Note: At present, we have integrated the `@legendapp/motion` for animation. You have the option to remove this and implement your own custom animation wrapper. ### Step 2: Copy and paste the following code into your project. @@ -130,6 +152,10 @@ npm i @gluestack-ui/tooltip ### Step 3: Update the import paths to match your project setup. + + + + ## API Reference