Skip to content

Commit 1f2c52c

Browse files
Karthik-B-06Karthik-B-06
authored
Merge pull request #91 from adaptui/updating-docs
2 parents 0d80bcf + 91e4753 commit 1f2c52c

File tree

14 files changed

+907
-135
lines changed

14 files changed

+907
-135
lines changed

‎docs/avatar-group.md‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,12 +30,14 @@ export default function App() {
3030

3131
[![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)
3232

33+
> Check Documentation for [Avatar](avatar.md) to know more about the props.
34+
3335
## Props
3436

3537
> Avatar Group also implements Box accepting all `ViewProps`
3638
3739
| Name | Description | Type | Default |
38-
| --------- | ----------------------------------------------------------------------------- | ------------------------------------ | ------- |
40+
|-----------|-------------------------------------------------------------------------------|--------------------------------------|---------|
3941
| size | How large should avatar be? Defaults to 'md' | `xs` `sm` `md` `lg` `xl` `2xl` `3xl` | `xl` |
4042
| max | Maximum number of avatars to be displayed within the group. | number or null | |
4143
| squared | If true, Avatar gets rounded corners | boolean | |

‎docs/avatar.md‎

Lines changed: 96 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,10 @@
11
# Avatar
22

3-
`Avatar` component provides a way to display profile pictures, initials or a
3+
Adapt UI `Avatar` component provides a way to display profile pictures, initials or a
44
fallback icon to represent a user
55

6+
![simulator_screenshot_DB8EEAB1-D0D1-48F6-8495-49DFC12D17E2](https://user-images.githubusercontent.com/35562287/203246134-bc0f262f-8bfd-4f86-8e56-f83c337c26b1.png)
7+
68
#### Simple Usage
79

810
```js
@@ -12,7 +14,98 @@ export default function App() {
1214
}
1315
```
1416

15-
![simulator_screenshot_7BB37E9E-E36F-476F-B559-1EF75CA2F160](https://user-images.githubusercontent.com/35562287/175239509-fec60c4e-7ec2-4afa-b6ec-587feab074d5.png)
17+
## Table of contents
18+
19+
- [Size](size)
20+
- [Status](status)
21+
- [Squared](squared)
22+
- [Props](props)
23+
24+
## Size
25+
26+
Adapt UI provides seven different sizes for Avatar, namely `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, and `3xl`/
27+
28+
![simulator_screenshot_08644040-F280-4EDE-89A0-F93B6AA2BED0](https://user-images.githubusercontent.com/35562287/203247187-81cc0c3a-ffa8-4562-98b2-8966ca2c7598.png)
29+
30+
<details>
31+
<summary>
32+
<h3>Usage</h3>
33+
</summary>
34+
35+
```js
36+
import { Avatar, useTheme } from "@adaptui/react-native-tailwind";
37+
export default function App() {
38+
const tailwind = useTheme();
39+
return (
40+
<>
41+
<Avatar size="xs" src={{ uri: "https://i.pravatar.cc/300??img=39" }}/>
42+
<Avatar size="sm" src={{ uri: "https://i.pravatar.cc/300??img=39" }}/>
43+
<Avatar size="md" src={{ uri: "https://i.pravatar.cc/300??img=39" }} />
44+
<Avatar size="lg" src={{ uri: "https://i.pravatar.cc/300??img=39" }} />
45+
<Avatar src={{ uri: "https://i.pravatar.cc/300??img=39" }} />
46+
<Avatar size="2xl" src={{ uri: "https://i.pravatar.cc/300??img=39" }} />
47+
<Avatar size="3xl" src={{ uri: "https://i.pravatar.cc/300??img=39" }} />
48+
</>
49+
);
50+
}
51+
```
52+
53+
</details>
54+
55+
## Status
56+
57+
Adapt UI provides four different options to convey the status for Avatar, namely `active`, `away`, `sleep`, & `typing`.
58+
59+
![simulator_screenshot_AF574547-68C3-4E75-8C71-55AEC5D7456B](https://user-images.githubusercontent.com/35562287/203248282-99ff2518-885e-422b-bbc3-b61ea9f81217.png)
60+
61+
<details>
62+
<summary>
63+
<h3>Usage</h3>
64+
</summary>
65+
66+
```js
67+
import { Avatar, useTheme } from "@adaptui/react-native-tailwind";
68+
export default function App() {
69+
const tailwind = useTheme();
70+
return (
71+
<>
72+
<Avatar status="active" src={{ uri: "https://i.pravatar.cc/300??img=39" }} />
73+
<Avatar status="away" src={{ uri: "https://i.pravatar.cc/300??img=39" }} />
74+
<Avatar status="sleep" src={{ uri: "https://i.pravatar.cc/300??img=39" }} />
75+
<Avatar status="typing" src={{ uri: "https://i.pravatar.cc/300??img=39" }} />
76+
</>
77+
);
78+
}
79+
```
80+
81+
</details>
82+
83+
## Squared
84+
85+
Adapt UI provides two different options to style the Avatar, namely rounded and squared.
86+
87+
![simulator_screenshot_9A9D130D-937B-481C-9EA8-82C2132E0D03](https://user-images.githubusercontent.com/35562287/203249914-7b308e1d-fb19-4467-b203-6fadd084b361.png)
88+
89+
90+
<details>
91+
<summary>
92+
<h3>Usage</h3>
93+
</summary>
94+
95+
```js
96+
import { Avatar, useTheme } from "@adaptui/react-native-tailwind";
97+
export default function App() {
98+
const tailwind = useTheme();
99+
return (
100+
<>
101+
<Avatar squared src={{ uri: "https://i.pravatar.cc/300??img=39" }} />
102+
<Avatar src={{ uri: "https://i.pravatar.cc/300??img=39" }} />
103+
</>
104+
);
105+
}
106+
```
107+
108+
</details>
16109

17110
[![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)
18111

@@ -21,7 +114,7 @@ export default function App() {
21114
> Avatar implements Box accepting all `ViewProps`
22115
23116
| Name | Description | Type | Default |
24-
| ----------------- | ------------------------------------------------------------------------------------------------ | -------------------------------------------- | ------- |
117+
|-------------------|--------------------------------------------------------------------------------------------------|----------------------------------------------|---------|
25118
| size | How large should avatar be? Defaults to 'md' | `xs` `sm` `md` `lg` `xl` `2xl` `3xl` | `xl` |
26119
| src | The image src attribute | `ImageSourcePropType` from React Native | |
27120
| imageProps | Image Props | `ImageProps` from React Native except source | |

‎docs/checkbox-group.md‎

Lines changed: 175 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
# Checkbox Group
22

3-
AdaptUI exports a `<CheckboxGroup />` component to help manage the checked state
4-
of its children Checkbox components and conveniently pass a few shared style
5-
props to each.
3+
Adapt UI provides two themes for the `CheckboxGroup` with three sizes.
64

7-
See the [props](#props) table at the bottom of this page for a list of the
8-
shared props.
5+
These are groups of checkboxes stacked horizontally or vertically.
6+
So any changes made in the checkbox component will reflect here too.
97

10-
Also check the Indeterminate case [here.](checkbox.md#indeterminate)
11-
12-
#### Preview
13-
14-
https://user-images.githubusercontent.com/35562287/175327232-2f1774b7-8110-4f60-8901-e911fe11af74.mp4
8+
![simulator_screenshot_5B121795-0688-496F-91CA-26C28FE23E2A](https://user-images.githubusercontent.com/35562287/203286255-a6d2be49-2606-4de0-99a9-9cd53105622e.png)
159

1610
#### Simple Usage
1711

@@ -34,30 +28,188 @@ export const App = () => {
3428
<CheckboxGroup value={value} onChange={setValue}>
3529
<Checkbox value="apple" label="Apple" />
3630
<Checkbox value="orange" label="Orange" />
37-
<Checkbox value="watermelon" label="Watermelon" />
38-
<Checkbox value="sapota" label="Sapota" />
31+
<Checkbox isDisabled value="watermelon" label="Watermelon" />
32+
<Checkbox value="strawberry" label="Strawberry" />
3933
<Checkbox value="cherry" label="Cherry" />
4034
</CheckboxGroup>
41-
<Box style={tailwind.style("mt-2")}>
42-
<Text>Picked fruits</Text>
43-
{value.map((item, index) => {
44-
return (
45-
<Text style={tailwind.style("my-1")} key={index}>
46-
- {item}
47-
</Text>
48-
);
49-
})}
50-
</Box>
5135
</Box>
5236
);
5337
};
5438

5539
```
5640

41+
## Table of contents
42+
43+
- [Themes](#themes)
44+
- [Sizes](#sizes)
45+
- [Indeterminate](#indeterminate)
46+
- [Orientation](#orientation)
47+
48+
49+
## Themes
50+
51+
Adapt UI provides two themes for checkbox groups: `base` and `primary`.
52+
You can use these themed checkbox groups based on your specific scenarios.
53+
54+
![simulator_screenshot_5CEC669D-067D-48AB-8B3A-632C2D2A85D0](https://user-images.githubusercontent.com/35562287/203289544-5b8e3595-f993-4177-8014-e8cd0b5ee06b.png)
55+
56+
<details>
57+
58+
<summary>
59+
<h3>Usage</h3>
60+
</summary>
61+
62+
```js
63+
import { CheckboxGroup, useTheme } from "@adaptui/react-native-tailwind"
64+
export default function App() {
65+
const tailwind = useTheme();
66+
const [value, setValue] = React.useState<string[]>([]);
67+
68+
return (
69+
<>
70+
<CheckboxGroup
71+
themeColor="primary"
72+
value={value}
73+
onChange={setValue}
74+
>
75+
<Checkbox value="artic" label="Artic" />
76+
<Checkbox value="national-parks" label="National Parks" />
77+
<Checkbox isDisabled value="camping" label="Camping" />
78+
<Checkbox value="beaches" label="Beaches" />
79+
<Checkbox value="caves" label="Caves" />
80+
<Checkbox value="farms" label="Farms" />
81+
</CheckboxGroup>
82+
</>
83+
)
84+
}
85+
```
86+
</details>
87+
88+
## Sizes
89+
90+
There are three different sizes for the checkbox group in Adapt UI, `sm`, `md` and `lg`.
91+
Based on the hierarchy, you can switch between different sizes.
92+
93+
![simulator_screenshot_982D4B28-85CF-4AC2-99C9-C6EABFA977E4](https://user-images.githubusercontent.com/35562287/203288193-64a25b4e-3521-4f84-9ad2-57d19a26d518.png)
94+
95+
<details>
96+
97+
<summary>
98+
<h3>Usage</h3>
99+
</summary>
100+
101+
```js
102+
import { CheckboxGroup, useTheme } from "@adaptui/react-native-tailwind"
103+
export default function App() {
104+
const tailwind = useTheme();
105+
const [value, setValue] = React.useState<string[]>([]);
106+
107+
return (
108+
<>
109+
<CheckboxGroup
110+
size="lg"
111+
value={value}
112+
onChange={setValue}
113+
>
114+
<Checkbox value="artic" label="Artic" />
115+
<Checkbox value="national-parks" label="National Parks" />
116+
<Checkbox isDisabled value="camping" label="Camping" />
117+
<Checkbox value="beaches" label="Beaches" />
118+
<Checkbox value="caves" label="Caves" />
119+
<Checkbox value="farms" label="Farms" />
120+
</CheckboxGroup>
121+
</>
122+
)
123+
}
124+
```
125+
</details>
126+
127+
## Indeterminate
128+
129+
This property can make the checkbox group into an indeterminate group where one checkbox will act as a master, which has a set of checkboxes under it.
130+
131+
![simulator_screenshot_E202A2A8-A406-4C5A-B3B1-6D1826742D2D](https://user-images.githubusercontent.com/35562287/203288537-63c432ad-a14c-44bc-8345-a778da68fccf.png)
132+
133+
<details>
134+
135+
<summary>
136+
<h3>Usage</h3>
137+
</summary>
138+
139+
```js
140+
import {
141+
Box,
142+
Checkbox,
143+
CheckboxGroup,
144+
useTheme,
145+
} from "@adaptui/react-native-tailwind";
146+
147+
export const App = () => {
148+
const tailwind = useTheme();
149+
return (
150+
<Box style={tailwind.style("h-full justify-center items-center bg-white-900")}>
151+
<CheckboxGroup>
152+
<Checkbox label="Fund Category" isIndeterminate />
153+
<Box style={tailwind.style("ml-[25px]")}>
154+
<Checkbox value="Equity" label="Equity" />
155+
<Checkbox value="Debt" label="Debt" />
156+
<Checkbox value="Hybrid" label="Hybrid" />
157+
<Checkbox value="International Equity" label="International Equity" />
158+
<Checkbox value="Solution Oriented" label="Solution Oriented" />
159+
</Box>
160+
</CheckboxGroup>
161+
</Box>
162+
);
163+
};
164+
165+
```
166+
</details>
167+
168+
## Orientation
169+
170+
Stack is the property to describe the layout of the component. Checkbox groups can be stacked horizontally and vertically.
171+
172+
This property helps you to pick one for yourself, defaults to `vertical`.
173+
174+
![simulator_screenshot_199E5E05-2DF0-4469-8E9C-5A854667F5CB](https://user-images.githubusercontent.com/35562287/203289204-882dcc11-bb00-4448-94cf-75fded46be35.png)
175+
176+
<details>
177+
178+
<summary>
179+
<h3>Usage</h3>
180+
</summary>
181+
182+
```js
183+
import { CheckboxGroup, useTheme } from "@adaptui/react-native-tailwind"
184+
export default function App() {
185+
const tailwind = useTheme();
186+
const [value, setValue] = React.useState<string[]>([]);
187+
188+
return (
189+
<>
190+
<CheckboxGroup
191+
orientation="horizontal"
192+
value={value}
193+
onChange={setValue}
194+
>
195+
<Checkbox value="artic" label="Artic" />
196+
<Checkbox value="national-parks" label="National Parks" />
197+
<Checkbox isDisabled value="camping" label="Camping" />
198+
<Checkbox value="beaches" label="Beaches" />
199+
<Checkbox value="caves" label="Caves" />
200+
<Checkbox value="farms" label="Farms" />
201+
</CheckboxGroup>
202+
</>
203+
)
204+
}
205+
```
206+
</details>
207+
208+
57209
## Props
58210

59211
| Name | Description | Type | Default |
60-
| ------------ | ---------------------------------- | ------------------------- | ---------- |
212+
|--------------|------------------------------------|---------------------------|------------|
61213
| orientation | Checkbox Group Orientation | `vertical` `horizontal` | `vertical` |
62214
| value | Array of Checkbox Values | string[] | |
63215
| defaultValue | Default State of Children Checkbox | string[] | |

0 commit comments

Comments
 (0)