Skip to content

Commit

Permalink
docs: 📝 update component and getting-started docs
Browse files Browse the repository at this point in the history
  • Loading branch information
@Karthik-B-06
Karthik-B-06 committed Jun 24, 2022
1 parent 2e9c517 commit cc11ffb
Show file tree
Hide file tree
Showing 7 changed files with 115 additions and 185 deletions.
1 change: 0 additions & 1 deletion docs/avatar-group.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@ export default function App() {

![simulator_screenshot_4866F248-4CC5-4C3B-BAD1-9CBCBD1C3170](https://user-images.githubusercontent.com/35562287/175233051-7e392f4d-c1d4-4bc2-aa02-2528bb699265.png)


[![Edit CodeSandbox](https://img.shields.io/badge/Avatar_Group-Open%20On%20Expo-%230971f1?style=for-the-badge&logo=expo&labelColor=151515)](https://snack.expo.dev/@timelessco/avatargroup-component---adaptui)

## Props
Expand Down
1 change: 0 additions & 1 deletion docs/avatar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ export default function App() {

![simulator_screenshot_7BB37E9E-E36F-476F-B559-1EF75CA2F160](https://user-images.githubusercontent.com/35562287/175239509-fec60c4e-7ec2-4afa-b6ec-587feab074d5.png)


[![Edit CodeSandbox](https://img.shields.io/badge/Avatar-Open%20On%20Expo-%230971f1?style=for-the-badge&logo=expo&labelColor=151515)](https://snack.expo.dev/@timelessco/avatar-component---adaptui)

## Props
Expand Down
70 changes: 23 additions & 47 deletions docs/badge.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,8 @@
Adapt UI provides five themes for `Badge` with three styles. Use this component
to show the status of an activity.


![simulator_screenshot_371B4CAB-C08A-4EE3-85DE-EF990FC831B1](https://user-images.githubusercontent.com/35562287/175248712-b872b752-801b-403e-ad2f-9993800cac54.png)


#### Simple Usage

```
Expand Down Expand Up @@ -44,18 +42,12 @@ You can use this themed badge based on your specific scenarios.
```
import { Badge, useTheme } from "@adaptui/react-native-tailwind"
export default function App() {
const tailwind = useTheme();
return (
<>
<Badge>Completed</Badge>
<Badge themeColor="primary">Processing</Badge>
<Badge themeColor="secondary">Waiting</Badge>
<Badge themeColor="success">Success</Badge>
<Badge themeColor="danger">Cancelled</Badge>
</>
)
}
export default function App() { const tailwind = useTheme(); return ( <>
<Badge>Completed</Badge> <Badge themeColor="primary">Processing</Badge>
<Badge themeColor="secondary">Waiting</Badge>
<Badge themeColor="success">Success</Badge>
<Badge themeColor="danger">Cancelled</Badge> </> ) }
```
</details>

Expand All @@ -72,20 +64,15 @@ better visual hierarchy.
<summary>
<h3>Usage</h3>
</summary>

```
import { Badge, useTheme } from "@adaptui/react-native-tailwind"
export default function App() {
const tailwind = useTheme();
return (
<>
<Badge>Solid</Badge>
<Badge variant="subtle">Subtle</Badge>
<Badge variant="outline">Outline</Badge>
</>
)
}
export default function App() { const tailwind = useTheme(); return ( <>
<Badge>Solid</Badge> <Badge variant="subtle">Subtle</Badge>
<Badge variant="outline">Outline</Badge> </> ) }
```

</details>
Expand All @@ -102,21 +89,15 @@ Adapt UI provides three different sizes for badges, namely `sm`, `md`, and `lg`.
</summary>

```
import { Badge, useTheme } from "@adaptui/react-native-tailwind"
export default function App() {
const tailwind = useTheme();
return (
<>
<Badge size="sm">Small</Badge>
<Badge>Medium</Badge>
<Badge size="lg">Large</Badge>
</>
)
}
export default function App() { const tailwind = useTheme(); return ( <>
<Badge size="sm">Small</Badge> <Badge>Medium</Badge>
<Badge size="lg">Large</Badge> </> ) }
```

</details>

## Prefix
Expand All @@ -133,20 +114,14 @@ property. It’s a frame that hugs the component inside it.
<summary>
<h3>Usage</h3>
</summary>

```
import { Badge, useTheme, Icon, Check } from "@adaptui/react-native-tailwind"
export default function App() {
const tailwind = useTheme();
return (
<>
<Badge prefix={<Icon icon={<Check />} />} themeColor="success">
Completed
</Badge>
</>
)
}
export default function App() { const tailwind = useTheme(); return ( <> <Badge
prefix={<Icon icon={<Check />} />} themeColor="success"> Completed </Badge> </>
) }
```

Expand All @@ -165,3 +140,4 @@ export default function App() {
| themeColor | How the badge should be themed? | `base` `primary` `secondary` `success` `danger` | `base` |
| prefix | If added, the tag will show an icon before the tag's text. | JSX.Element | |
| textProps | Props for the underlying Text Component | `TextProps` from React Native | {} |
```
139 changes: 47 additions & 92 deletions docs/button.md
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
# Button

Adapt UI provides five themes for `Button` with four variant. Use this component to receive a specific request from the user.
Adapt UI provides five themes for `Button` with four variant. Use this component
to receive a specific request from the user.

![simulator_screenshot_B8B371AC-3850-46D9-96C5-27F1D400A07B](https://user-images.githubusercontent.com/35562287/175280578-b5bfe58b-6129-429e-a120-9e7340f2414d.png)


#### Simple Usage

```
Expand All @@ -26,14 +26,12 @@ export default function App() {
- [IconOnly](#icononly)
- [Props](#props)


## Themes

Adapt UI provides five themes for buttons: `base`, `primary`, `secondary`,
`success`, and `danger`. You can use this themed button based on your specific
scenarios.


![simulator_screenshot_CDE9AA6A-4264-49EA-9BF6-579FE99F3E45](https://user-images.githubusercontent.com/35562287/175274104-8c261360-0d0c-4753-bb51-c72514144049.png)

<details>
Expand All @@ -44,23 +42,16 @@ scenarios.
```
import { Button, useTheme } from "@adaptui/react-native-tailwind"
export default function App() {
const tailwind = useTheme();
return (
<>
<Button>Get Started</Button>
<Button themeColor="primary">Register for free</Button>
<Button themeColor="secondary">Watch Demo</Button>
<Button themeColor="success">Subscribe to Newsletter</Button>
<Button themeColor="danger">Delete</Button>
</>
)
}
export default function App() { const tailwind = useTheme(); return ( <>
<Button>Get Started</Button> <Button themeColor="primary">Register for
free</Button> <Button themeColor="secondary">Watch Demo</Button>
<Button themeColor="success">Subscribe to Newsletter</Button>
<Button themeColor="danger">Delete</Button> </> ) }
```
</details>


## Variants

Adapt UI provides four different styles for buttons, namely `solid`, `subtle`,
Expand All @@ -78,57 +69,44 @@ button with a base theme or your tertiary theme.
![simulator_screenshot_644B7A72-EBA3-4296-B05A-1B55E58CBB57](https://user-images.githubusercontent.com/35562287/175274648-0d5c852f-82a9-49c4-a9a3-9e3401c27f8c.png)

<details>

<summary>
<h3>Usage</h3>
</summary>

```
import { Button, useTheme } from "@adaptui/react-native-tailwind"
export default function App() {
const tailwind = useTheme();
return (
<>
<Button>Buy this Stock</Button>
<Button variant="subtle">Contact Us</Button>
<Button variant="outline">Add Subtask</Button>
<Button variant="ghost">Skip for now</Button>
</>
)
}
export default function App() { const tailwind = useTheme(); return ( <>
<Button>Buy this Stock</Button> <Button variant="subtle">Contact Us</Button>
<Button variant="outline">Add Subtask</Button> <Button variant="ghost">Skip for
now</Button> </> ) }
```

</details>

## Size

There are four different sizes for buttons in Adapt UI: `sm`, `md`, `lg` & `xl`.
There are four different sizes for buttons in Adapt UI: `sm`, `md`, `lg` & `xl`.
Based on the hierarchy, you can switch between different sizes.

![simulator_screenshot_C3201852-F472-442E-9EFF-D928BFCD4AFC](https://user-images.githubusercontent.com/35562287/175275224-59d11951-fd45-4717-bc82-bbbdf4772fa0.png)

<details>

<summary>
<h3>Usage</h3>
</summary>

```
import { Button, useTheme } from "@adaptui/react-native-tailwind"
export default function App() {
const tailwind = useTheme();
return (
<>
<Button size="sm">Share</Button>
<Button>Share</Button>
<Button size="lg">Share</Button>
<Button size="xl">Share</Button>
</>
)
}
export default function App() { const tailwind = useTheme(); return ( <>
<Button size="sm">Share</Button> <Button>Share</Button>
<Button size="lg">Share</Button> <Button size="xl">Share</Button> </> ) }
```

Expand All @@ -144,24 +122,19 @@ property. It’s a frame that hugs the component inside it.
![simulator_screenshot_3CAB6EBE-4566-44A8-BBDA-0228F9B7F22C](https://user-images.githubusercontent.com/35562287/175275961-ec61f262-164c-4976-9e76-dff39b97ad10.png)

<details>

<summary>
<h3>Usage</h3>
</summary>

```
import { Button, useTheme, Icon, DefaultUser } from "@adaptui/react-native-tailwind"
export default function App() {
const tailwind = useTheme();
return (
<>
<Button prefix={<Icon icon={<DefaultUser />} />} themeColor="success">
Sign In
</Button>
</>
)
}
import { Button, useTheme, Icon, DefaultUser } from
"@adaptui/react-native-tailwind"
export default function App() { const tailwind = useTheme(); return ( <> <Button
prefix={<Icon icon={<DefaultUser />} />} themeColor="success"> Sign In </Button>
</> ) }
```

Expand All @@ -177,24 +150,19 @@ button component.
![simulator_screenshot_C6A4D0D0-5F94-4E1D-B095-66878EABA9CD](https://user-images.githubusercontent.com/35562287/175276283-0ada6b3a-3494-495b-8996-ed68f3399b98.png)

<details>

<summary>
<h3>Usage</h3>
</summary>

```
import { Button, useTheme, Icon, CaretRight } from "@adaptui/react-native-tailwind"
export default function App() {
const tailwind = useTheme();
return (
<>
<Button themeColor="primary" suffix={<Icon icon={<CaretRight />} />}>
Continue
</Button>
</>
)
}
import { Button, useTheme, Icon, CaretRight } from
"@adaptui/react-native-tailwind"
export default function App() { const tailwind = useTheme(); return ( <> <Button
themeColor="primary" suffix={<Icon icon={<CaretRight />} />}> Continue </Button>
</> ) }
```

Expand All @@ -209,36 +177,22 @@ slot for your icon.
![simulator_screenshot_A40A8968-A3AD-46EA-AB78-A62E9FF1521C](https://user-images.githubusercontent.com/35562287/175276812-619d46b4-a948-43c5-a338-38e70d7359bd.png)

<details>

<summary>
<h3>Usage</h3>
</summary>

```
import { Button, useTheme, Icon, CaretRight, Add, Delete } from "@adaptui/react-native-tailwind"
export default function App() {
const tailwind = useTheme();
return (
<>
<Button
themeColor="primary"
iconOnly={<Icon icon={<CaretRight />} />}
style={tailwind.style("my-1")}
/>
<Button
themeColor="success"
iconOnly={<Icon icon={<Add />} />}
style={tailwind.style("my-1")}
/>
<Button
themeColor="danger"
iconOnly={<Icon icon={<Delete />} />}
style={tailwind.style("my-1")}
/>
</>
)
}
import { Button, useTheme, Icon, CaretRight, Add, Delete } from
"@adaptui/react-native-tailwind"
export default function App() { const tailwind = useTheme(); return ( <> <Button
themeColor="primary" iconOnly={<Icon icon={<CaretRight />} />}
style={tailwind.style("my-1")} /> <Button themeColor="success" iconOnly={<Icon
icon={<Add />} />} style={tailwind.style("my-1")} /> <Button themeColor="danger"
iconOnly={<Icon icon={<Delete />} />} style={tailwind.style("my-1")} /> </> ) }
```
</details>

Expand All @@ -257,3 +211,4 @@ export default function App() {
| loading | If true, button renders a spinner for loading state | boolean | false |
| spinner | If provided, button renders this spinner when loading is set to true | JSX.Element | |
| textStyle | Style to customise the text inside button | `TextStyle` from React Native | |
```
Loading

0 comments on commit cc11ffb

Please sign in to comment.