Skip to content

Commit cc11ffb

Browse files
Karthik-B-06Karthik-B-06
committed
docs: 📝 update component and getting-started docs
1 parent 2e9c517 commit cc11ffb

File tree

7 files changed

+115
-185
lines changed

7 files changed

+115
-185
lines changed

‎docs/avatar-group.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@ export default function App() {
2828

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

31-
3231
[![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)
3332

3433
## Props

‎docs/avatar.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ export default function App() {
1717

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

20-
2120
[![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)
2221

2322
## Props

‎docs/badge.md‎

Lines changed: 23 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,8 @@
33
Adapt UI provides five themes for `Badge` with three styles. Use this component
44
to show the status of an activity.
55

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

9-
108
#### Simple Usage
119

1210
```
@@ -44,18 +42,12 @@ You can use this themed badge based on your specific scenarios.
4442
```
4543
import { Badge, useTheme } from "@adaptui/react-native-tailwind"
4644
47-
export default function App() {
48-
const tailwind = useTheme();
49-
return (
50-
<>
51-
<Badge>Completed</Badge>
52-
<Badge themeColor="primary">Processing</Badge>
53-
<Badge themeColor="secondary">Waiting</Badge>
54-
<Badge themeColor="success">Success</Badge>
55-
<Badge themeColor="danger">Cancelled</Badge>
56-
</>
57-
)
58-
}
45+
export default function App() { const tailwind = useTheme(); return ( <>
46+
<Badge>Completed</Badge> <Badge themeColor="primary">Processing</Badge>
47+
<Badge themeColor="secondary">Waiting</Badge>
48+
<Badge themeColor="success">Success</Badge>
49+
<Badge themeColor="danger">Cancelled</Badge> </> ) }
50+
5951
```
6052
</details>
6153

@@ -72,20 +64,15 @@ better visual hierarchy.
7264
<summary>
7365
<h3>Usage</h3>
7466
</summary>
75-
67+
7668
```
69+
7770
import { Badge, useTheme } from "@adaptui/react-native-tailwind"
7871
79-
export default function App() {
80-
const tailwind = useTheme();
81-
return (
82-
<>
83-
<Badge>Solid</Badge>
84-
<Badge variant="subtle">Subtle</Badge>
85-
<Badge variant="outline">Outline</Badge>
86-
</>
87-
)
88-
}
72+
export default function App() { const tailwind = useTheme(); return ( <>
73+
<Badge>Solid</Badge> <Badge variant="subtle">Subtle</Badge>
74+
<Badge variant="outline">Outline</Badge> </> ) }
75+
8976
```
9077

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

10491
```
92+
10593
import { Badge, useTheme } from "@adaptui/react-native-tailwind"
10694
107-
export default function App() {
108-
const tailwind = useTheme();
109-
return (
110-
<>
111-
<Badge size="sm">Small</Badge>
112-
<Badge>Medium</Badge>
113-
<Badge size="lg">Large</Badge>
114-
</>
115-
)
116-
}
95+
export default function App() { const tailwind = useTheme(); return ( <>
96+
<Badge size="sm">Small</Badge> <Badge>Medium</Badge>
97+
<Badge size="lg">Large</Badge> </> ) }
11798
11899
```
119-
100+
120101
</details>
121102

122103
## Prefix
@@ -133,20 +114,14 @@ property. It’s a frame that hugs the component inside it.
133114
<summary>
134115
<h3>Usage</h3>
135116
</summary>
136-
117+
137118
```
119+
138120
import { Badge, useTheme, Icon, Check } from "@adaptui/react-native-tailwind"
139121
140-
export default function App() {
141-
const tailwind = useTheme();
142-
return (
143-
<>
144-
<Badge prefix={<Icon icon={<Check />} />} themeColor="success">
145-
Completed
146-
</Badge>
147-
</>
148-
)
149-
}
122+
export default function App() { const tailwind = useTheme(); return ( <> <Badge
123+
prefix={<Icon icon={<Check />} />} themeColor="success"> Completed </Badge> </>
124+
) }
150125
151126
```
152127

@@ -165,3 +140,4 @@ export default function App() {
165140
| themeColor | How the badge should be themed? | `base` `primary` `secondary` `success` `danger` | `base` |
166141
| prefix | If added, the tag will show an icon before the tag's text. | JSX.Element | |
167142
| textProps | Props for the underlying Text Component | `TextProps` from React Native | {} |
143+
```

‎docs/button.md‎

Lines changed: 47 additions & 92 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
# Button
22

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

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

7-
88
#### Simple Usage
99

1010
```
@@ -26,14 +26,12 @@ export default function App() {
2626
- [IconOnly](#icononly)
2727
- [Props](#props)
2828

29-
3029
## Themes
3130

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

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

3937
<details>
@@ -44,23 +42,16 @@ scenarios.
4442
```
4543
import { Button, useTheme } from "@adaptui/react-native-tailwind"
4644
47-
export default function App() {
48-
const tailwind = useTheme();
49-
return (
50-
<>
51-
<Button>Get Started</Button>
52-
<Button themeColor="primary">Register for free</Button>
53-
<Button themeColor="secondary">Watch Demo</Button>
54-
<Button themeColor="success">Subscribe to Newsletter</Button>
55-
<Button themeColor="danger">Delete</Button>
56-
</>
57-
)
58-
}
45+
export default function App() { const tailwind = useTheme(); return ( <>
46+
<Button>Get Started</Button> <Button themeColor="primary">Register for
47+
free</Button> <Button themeColor="secondary">Watch Demo</Button>
48+
<Button themeColor="success">Subscribe to Newsletter</Button>
49+
<Button themeColor="danger">Delete</Button> </> ) }
5950
6051
```
6152
</details>
62-
63-
53+
54+
6455
## Variants
6556

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

8071
<details>
81-
72+
8273
<summary>
8374
<h3>Usage</h3>
8475
</summary>
8576

8677
```
78+
8779
import { Button, useTheme } from "@adaptui/react-native-tailwind"
8880
89-
export default function App() {
90-
const tailwind = useTheme();
91-
return (
92-
<>
93-
<Button>Buy this Stock</Button>
94-
<Button variant="subtle">Contact Us</Button>
95-
<Button variant="outline">Add Subtask</Button>
96-
<Button variant="ghost">Skip for now</Button>
97-
</>
98-
)
99-
}
81+
export default function App() { const tailwind = useTheme(); return ( <>
82+
<Button>Buy this Stock</Button> <Button variant="subtle">Contact Us</Button>
83+
<Button variant="outline">Add Subtask</Button> <Button variant="ghost">Skip for
84+
now</Button> </> ) }
10085
10186
```
10287

10388
</details>
104-
89+
10590
## Size
10691

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

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

11297
<details>
113-
98+
11499
<summary>
115100
<h3>Usage</h3>
116101
</summary>
117102

118103
```
104+
119105
import { Button, useTheme } from "@adaptui/react-native-tailwind"
120106
121-
export default function App() {
122-
const tailwind = useTheme();
123-
return (
124-
<>
125-
<Button size="sm">Share</Button>
126-
<Button>Share</Button>
127-
<Button size="lg">Share</Button>
128-
<Button size="xl">Share</Button>
129-
</>
130-
)
131-
}
107+
export default function App() { const tailwind = useTheme(); return ( <>
108+
<Button size="sm">Share</Button> <Button>Share</Button>
109+
<Button size="lg">Share</Button> <Button size="xl">Share</Button> </> ) }
132110
133111
```
134112

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

146124
<details>
147-
125+
148126
<summary>
149127
<h3>Usage</h3>
150128
</summary>
151129

152130
```
153-
import { Button, useTheme, Icon, DefaultUser } from "@adaptui/react-native-tailwind"
154131
155-
export default function App() {
156-
const tailwind = useTheme();
157-
return (
158-
<>
159-
<Button prefix={<Icon icon={<DefaultUser />} />} themeColor="success">
160-
Sign In
161-
</Button>
162-
</>
163-
)
164-
}
132+
import { Button, useTheme, Icon, DefaultUser } from
133+
"@adaptui/react-native-tailwind"
134+
135+
export default function App() { const tailwind = useTheme(); return ( <> <Button
136+
prefix={<Icon icon={<DefaultUser />} />} themeColor="success"> Sign In </Button>
137+
</> ) }
165138
166139
```
167140

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

179152
<details>
180-
153+
181154
<summary>
182155
<h3>Usage</h3>
183156
</summary>
184157

185158
```
186-
import { Button, useTheme, Icon, CaretRight } from "@adaptui/react-native-tailwind"
187159
188-
export default function App() {
189-
const tailwind = useTheme();
190-
return (
191-
<>
192-
<Button themeColor="primary" suffix={<Icon icon={<CaretRight />} />}>
193-
Continue
194-
</Button>
195-
</>
196-
)
197-
}
160+
import { Button, useTheme, Icon, CaretRight } from
161+
"@adaptui/react-native-tailwind"
162+
163+
export default function App() { const tailwind = useTheme(); return ( <> <Button
164+
themeColor="primary" suffix={<Icon icon={<CaretRight />} />}> Continue </Button>
165+
</> ) }
198166
199167
```
200168

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

211179
<details>
212-
180+
213181
<summary>
214182
<h3>Usage</h3>
215183
</summary>
216184

217185
```
218-
import { Button, useTheme, Icon, CaretRight, Add, Delete } from "@adaptui/react-native-tailwind"
219186
220-
export default function App() {
221-
const tailwind = useTheme();
222-
return (
223-
<>
224-
<Button
225-
themeColor="primary"
226-
iconOnly={<Icon icon={<CaretRight />} />}
227-
style={tailwind.style("my-1")}
228-
/>
229-
<Button
230-
themeColor="success"
231-
iconOnly={<Icon icon={<Add />} />}
232-
style={tailwind.style("my-1")}
233-
/>
234-
<Button
235-
themeColor="danger"
236-
iconOnly={<Icon icon={<Delete />} />}
237-
style={tailwind.style("my-1")}
238-
/>
239-
</>
240-
)
241-
}
187+
import { Button, useTheme, Icon, CaretRight, Add, Delete } from
188+
"@adaptui/react-native-tailwind"
189+
190+
export default function App() { const tailwind = useTheme(); return ( <> <Button
191+
themeColor="primary" iconOnly={<Icon icon={<CaretRight />} />}
192+
style={tailwind.style("my-1")} /> <Button themeColor="success" iconOnly={<Icon
193+
icon={<Add />} />} style={tailwind.style("my-1")} /> <Button themeColor="danger"
194+
iconOnly={<Icon icon={<Delete />} />} style={tailwind.style("my-1")} /> </> ) }
195+
242196
```
243197
</details>
244198

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

0 commit comments

Comments
 (0)