Skip to content

Commit

Permalink
Merge pull request #1986 from gluestack/feat/setup-docs
Browse files Browse the repository at this point in the history 
feat: update docs for CLI
  • Loading branch information
@Viraj-10
Viraj-10 authored Mar 21, 2024
2 parents af7e29c + f140253 commit adb86fe
Show file tree
Hide file tree
Showing 71 changed files with 1,853 additions and 290 deletions.
2 changes: 1 addition & 1 deletion example/storybook-nativewind/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
"@gluestack-style/react": "^1.0.52",
"@gluestack-ui/config": "^1.1.17",
"@gluestack-ui/themed": "^1.1.14",
"@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",
Expand Down
37 changes: 33 additions & 4 deletions example/storybook-nativewind/src/components/Accordion/index.nw.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import {
AddIcon,
InfoIcon,
Alert,
Tabs
} from '@gluestack/design-system';
import { transformedCode } from '../../utils';
import { CollapsibleCode } from '@gluestack/design-system';
Expand Down Expand Up @@ -159,21 +160,49 @@ This is an illustration of **Accordion** component.

## Installation

### Step 1: Install the following dependencies:
<Tabs value="cli" type="section">
<Tabs.TabList>
<Tabs.Tab value="cli">
<Tabs.TabTitle>CLI</Tabs.TabTitle>
</Tabs.Tab>
<Tabs.Tab value="manual">
<Tabs.TabTitle>Manual</Tabs.TabTitle>
</Tabs.Tab>
</Tabs.TabList>
<Tabs.TabPanels>
<Tabs.TabPanel value="cli">
<>

```bash
### Run the following command:
```bash
npx gluestack-ui add accordion
```
</>
</Tabs.TabPanel>
<Tabs.TabPanel value="manual">
<>

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.

<CollapsibleCode>
```jsx %%-- File: core-components/nativewind/accordion/index.tsx --%% ```

```jsx
%%-- File: core-components/nativewind/accordion/index.tsx --%%
```

</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.
</>
</Tabs.TabPanel>
</Tabs.TabPanels>
</Tabs>

## API Reference

Expand Down
32 changes: 28 additions & 4 deletions example/storybook-nativewind/src/components/Actionsheet/index.themed.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -141,12 +142,31 @@ function App(){

## Installation

### Step 1: Install the following dependencies:

```bash
<Tabs value="cli" type="section">
<Tabs.TabList>
<Tabs.Tab value="cli">
<Tabs.TabTitle>CLI</Tabs.TabTitle>
</Tabs.Tab>
<Tabs.Tab value="manual">
<Tabs.TabTitle>Manual</Tabs.TabTitle>
</Tabs.Tab>
</Tabs.TabList>
<Tabs.TabPanels>
<Tabs.TabPanel value="cli">
<>

npm i @gluestack-ui/actionsheet
### Run the following command:
```bash
npx gluestack-ui add actionsheet
```
</>
</Tabs.TabPanel>
<Tabs.TabPanel value="manual">
<>

### Step 1: Install the following dependencies:
```bash
npm i @gluestack-ui/actionsheet @expo/html-elements
```

### Step 2: Copy and paste the following code into your project.
Expand All @@ -160,6 +180,10 @@ npm i @gluestack-ui/actionsheet
</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.
</>
</Tabs.TabPanel>
</Tabs.TabPanels>
</Tabs>

## API Reference

Expand Down
27 changes: 27 additions & 0 deletions example/storybook-nativewind/src/components/Alert/index.nw.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -87,6 +88,28 @@ This is an illustration of **Alert** component.

## Installation

<Tabs value="cli" type="section">
<Tabs.TabList>
<Tabs.Tab value="cli">
<Tabs.TabTitle>CLI</Tabs.TabTitle>
</Tabs.Tab>
<Tabs.Tab value="manual">
<Tabs.TabTitle>Manual</Tabs.TabTitle>
</Tabs.Tab>
</Tabs.TabList>
<Tabs.TabPanels>
<Tabs.TabPanel value="cli">
<>

### Run the following command:
```bash
npx gluestack-ui add alert
```
</>
</Tabs.TabPanel>
<Tabs.TabPanel value="manual">
<>

### Step 1: Install the following dependencies:

```bash
Expand All @@ -106,6 +129,10 @@ npm i @gluestack-ui/alert
</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.
</>
</Tabs.TabPanel>
</Tabs.TabPanels>
</Tabs>

## API Reference

Expand Down
27 changes: 27 additions & 0 deletions example/storybook-nativewind/src/components/Alert/index.themed.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import {
InlineCode,
TableContainer,
CollapsibleCode,
Tabs
} from '@gluestack/design-system';

import Wrapper from '../../core-components/themed/Wrapper';
Expand Down Expand Up @@ -86,6 +87,28 @@ This is an illustration of **Alert** component.

## Installation

<Tabs value="cli" type="section">
<Tabs.TabList>
<Tabs.Tab value="cli">
<Tabs.TabTitle>CLI</Tabs.TabTitle>
</Tabs.Tab>
<Tabs.Tab value="manual">
<Tabs.TabTitle>Manual</Tabs.TabTitle>
</Tabs.Tab>
</Tabs.TabList>
<Tabs.TabPanels>
<Tabs.TabPanel value="cli">
<>

### Run the following command:
```bash
npx gluestack-ui add alert
```
</>
</Tabs.TabPanel>
<Tabs.TabPanel value="manual">
<>

### Step 1: Install the following dependencies:

```bash
Expand All @@ -105,6 +128,10 @@ npm i @gluestack-ui/alert
</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.
</>
</Tabs.TabPanel>
</Tabs.TabPanels>
</Tabs>

## API Reference

Expand Down
34 changes: 30 additions & 4 deletions example/storybook-nativewind/src/components/AlertDialog/index.nw.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,8 @@ import {
Table,
TableContainer,
InlineCode,
CollapsibleCode
CollapsibleCode,
Tabs
} from '@gluestack/design-system';
import Wrapper from '../../core-components/nativewind/Wrapper';

Expand Down Expand Up @@ -136,13 +137,34 @@ This is an illustration of **AlertDialog** component.

## Installation

### Step 1: Install the following dependencies:
<Tabs value="cli" type="section">
<Tabs.TabList>
<Tabs.Tab value="cli">
<Tabs.TabTitle>CLI</Tabs.TabTitle>
</Tabs.Tab>
<Tabs.Tab value="manual">
<Tabs.TabTitle>Manual</Tabs.TabTitle>
</Tabs.Tab>
</Tabs.TabList>
<Tabs.TabPanels>
<Tabs.TabPanel value="cli">
<>

```bash
### Run the following command:
```bash
npx gluestack-ui add alert-dialog
```
</>
</Tabs.TabPanel>
<Tabs.TabPanel value="manual">
<>

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.

Expand All @@ -155,6 +177,10 @@ npm i @gluestack-ui/alert-dialog
</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.
</>
</Tabs.TabPanel>
</Tabs.TabPanels>
</Tabs>

## API Reference

Expand Down
31 changes: 28 additions & 3 deletions example/storybook-nativewind/src/components/AlertDialog/index.themed.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,8 @@ import {
Table,
TableContainer,
InlineCode,
CollapsibleCode
CollapsibleCode,
Tabs
} from '@gluestack/design-system';
import Wrapper from '../../core-components/themed/Wrapper';

Expand Down Expand Up @@ -142,12 +143,32 @@ This is an illustration of **AlertDialog** component.

## Installation

<Tabs value="cli" type="section">
<Tabs.TabList>
<Tabs.Tab value="cli">
<Tabs.TabTitle>CLI</Tabs.TabTitle>
</Tabs.Tab>
<Tabs.Tab value="manual">
<Tabs.TabTitle>Manual</Tabs.TabTitle>
</Tabs.Tab>
</Tabs.TabList>
<Tabs.TabPanels>
<Tabs.TabPanel value="cli">
<>

### Run the following command:
```bash
npx gluestack-ui add alert-dialog
```
</>
</Tabs.TabPanel>
<Tabs.TabPanel value="manual">
<>

### Step 1: Install the following dependencies:

```bash

npm i @gluestack-ui/alert-dialog

```

### Step 2: Copy and paste the following code into your project.
Expand All @@ -161,6 +182,10 @@ npm i @gluestack-ui/alert-dialog
</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.
</>
</Tabs.TabPanel>
</Tabs.TabPanels>
</Tabs>

## API Reference

Expand Down
29 changes: 27 additions & 2 deletions example/storybook-nativewind/src/components/Avatar/index.nw.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import {
Table,
TableContainer,
InlineCode,
Tabs
} from '@gluestack/design-system';
import { CollapsibleCode } from '@gluestack/design-system';

Expand Down Expand Up @@ -78,12 +79,32 @@ This is an illustration of **Avatar** component.

## Installation

<Tabs value="cli" type="section">
<Tabs.TabList>
<Tabs.Tab value="cli">
<Tabs.TabTitle>CLI</Tabs.TabTitle>
</Tabs.Tab>
<Tabs.Tab value="manual">
<Tabs.TabTitle>Manual</Tabs.TabTitle>
</Tabs.Tab>
</Tabs.TabList>
<Tabs.TabPanels>
<Tabs.TabPanel value="cli">
<>

### Run the following command:
```bash
npx gluestack-ui add avatar
```
</>
</Tabs.TabPanel>
<Tabs.TabPanel value="manual">
<>

### Step 1: Install the following dependencies:

```bash

npm i @gluestack-ui/avatar

```

### Step 2: Copy and paste the following code into your project.
Expand All @@ -97,6 +118,10 @@ npm i @gluestack-ui/avatar
</CollapsibleCode>

### Step 3: Update the import paths to match your project setup.
</>
</Tabs.TabPanel>
</Tabs.TabPanels>
</Tabs>

## API Reference

Expand Down
Loading

0 comments on commit adb86fe

Please sign in to comment.