Skip to content

Commit b3084ce

Browse files
Karthik-B-06Karthik-B-06
authored
Merge pull request #56 from adaptui/docs
Initial Docs for components
2 parents bcd776a + 7064e1f commit b3084ce

22 files changed

+2034
-2
lines changed

‎.vscode/settings.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@
1717
"radio",
1818
"slider",
1919
"circular-progress",
20-
"input"
20+
"input",
21+
"icons"
2122
],
2223
"git.branchProtection": ["main"]
2324
}

‎docs/avatar-group.md‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
# Avatar Group
2+
3+
`Avatar Group` component provides a way to stack display profile pictures,
4+
initials or a fallback icon to represent a user as a group
5+
6+
- Use the `max` prop to limit the no of avatars to show. This will truncate the
7+
avatars and show a "+X" value (where X is the remaining avatars).
8+
- To size all the avatars equally, pass the `size` prop.
9+
10+
#### Simple Usage
11+
12+
```
13+
import { AvatarGroup, Avatar } from "@adaptui/react-native-tailwind"
14+
export default function App() {
15+
return (
16+
<>
17+
<AvatarGroup size="3xl">
18+
<Avatar src={{ uri: "https://i.pravatar.cc/300??img=6" }} />
19+
<Avatar src={{ uri: "https://i.pravatar.cc/300??img=13" }} />
20+
<Avatar src={{ uri: "https://i.pravatar.cc/300??img=25" }} />
21+
<Avatar src={{ uri: "https://i.pravatar.cc/300??img=33" }} />
22+
<Avatar src={{ uri: "https://i.pravatar.cc/300??img=45" }} />
23+
</AvatarGroup>
24+
</>
25+
)
26+
}
27+
```
28+
29+
![simulator_screenshot_4866F248-4CC5-4C3B-BAD1-9CBCBD1C3170](https://user-images.githubusercontent.com/35562287/175233051-7e392f4d-c1d4-4bc2-aa02-2528bb699265.png)
30+
31+
32+
[![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)
33+
34+
## Props
35+
36+
> Avatar Group also implements Box accepting all `ViewProps`
37+
38+
| Name | Description | Type | Default |
39+
| --------- | ----------------------------------------------------------------------------- | ------------------------------------ | ------- |
40+
| size | How large should avatar be? Defaults to 'md' | `xs` `sm` `md` `lg` `xl` `2xl` `3xl` | `xl` |
41+
| max | Maximum number of avatars to be displayed within the group. | number or null | |
42+
| squared | If true, Avatar gets rounded corners | boolean | |
43+
| showRing | If true, the Avatar will show a border around it. Best for a group of avatars | boolean | true |
44+
| ringColor | Color of the border to match it's parent background. | string | |

‎docs/avatar.md‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
# Avatar
2+
3+
`Avatar` component provides a way to display profile pictures, initials or a
4+
fallback icon to represent a user
5+
6+
#### Simple Usage
7+
8+
```
9+
import { Avatar } from "@adaptui/react-native-tailwind"
10+
export default function App() {
11+
return (
12+
<Avatar src={{ uri: 'https://i.pravatar.cc/300??img=39' }} />
13+
)
14+
}
15+
16+
```
17+
18+
![simulator_screenshot_7BB37E9E-E36F-476F-B559-1EF75CA2F160](https://user-images.githubusercontent.com/35562287/175239509-fec60c4e-7ec2-4afa-b6ec-587feab074d5.png)
19+
20+
21+
[![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)
22+
23+
## Props
24+
25+
> Avatar implements Box accepting all `ViewProps`
26+
27+
| Name | Description | Type | Default |
28+
| ----------------- | ------------------------------------------------------------------------------------------------ | -------------------------------------------- | ------- |
29+
| size | How large should avatar be? Defaults to 'md' | `xs` `sm` `md` `lg` `xl` `2xl` `3xl` | `xl` |
30+
| src | The image src attribute | `ImageSourcePropType` from React Native | |
31+
| imageProps | Image Props | `ImageProps` from React Native except source | |
32+
| squared | If true, Avatar gets rounded corners | boolean | |
33+
| status | Shows AvatarBadge with the given type | `active` `away` `sleep` `typing` or `null` | `null` |
34+
| parentsBackground | Color to match the background in StatusIndicator's Background Color & StatusIndicator Ring Color | string | |
35+
| name | Name prop used for alt & calculate placeholder initials. | string | |

‎docs/badge.md‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,167 @@
1+
# Badge
2+
3+
Adapt UI provides five themes for `Badge` with three styles. Use this component
4+
to show the status of an activity.
5+
6+
7+
![simulator_screenshot_371B4CAB-C08A-4EE3-85DE-EF990FC831B1](https://user-images.githubusercontent.com/35562287/175248712-b872b752-801b-403e-ad2f-9993800cac54.png)
8+
9+
10+
#### Simple Usage
11+
12+
```
13+
import { Badge } from "@adaptui/react-native-tailwind"
14+
export default function App() {
15+
return (
16+
<Badge>Beta</Badge>
17+
)
18+
}
19+
```
20+
21+
## Table of Contents
22+
23+
- [Themes](#themes)
24+
- [Variant](#variant)
25+
- [Size](#size)
26+
- [Prefix](#prefix)
27+
- [Props](#props)
28+
29+
## Themes
30+
31+
Adapt UI provides five themes for badges: `base`, `primary`, `secondary`,
32+
`success`, and `danger`.
33+
34+
You can use this themed badge based on your specific scenarios.
35+
36+
![simulator_screenshot_23A30580-3C27-435B-9A6C-F2D15534AEB3](https://user-images.githubusercontent.com/35562287/175240643-43af3704-e476-410f-807c-21bd662528f6.png)
37+
38+
<details>
39+
40+
<summary>
41+
<h3>Usage</h3>
42+
</summary>
43+
44+
```
45+
import { Badge, useTheme } from "@adaptui/react-native-tailwind"
46+
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+
}
59+
```
60+
</details>
61+
62+
## Variant
63+
64+
Adapt UI provides three different styles for badges, namely `solid`, `subtle`,
65+
and `outline`. You can use these various styled badge components to give a
66+
better visual hierarchy.
67+
68+
69+
![Simulator Screen Shot - iPhone 12 - 2022-06-23 at 13 00 29](https://user-images.githubusercontent.com/35562287/175241854-7bb5ea10-b12a-4647-9cac-41b0d0a10bfb.png)
70+
71+
<details>
72+
<summary>
73+
<h3>Usage</h3>
74+
</summary>
75+
76+
```
77+
import { Badge, useTheme } from "@adaptui/react-native-tailwind"
78+
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+
}
89+
```
90+
91+
</details>
92+
93+
## Size
94+
95+
Adapt UI provides three different sizes for badges, namely `sm`, `md`, and `lg`.
96+
97+
![Simulator Screen Shot - iPhone 12 - 2022-06-23 at 13 05 56](https://user-images.githubusercontent.com/35562287/175242915-c4df0bf3-c74a-4a2f-b3b2-f76a0b7e2827.png)
98+
99+
<details>
100+
<summary>
101+
<h3>Usage</h3>
102+
</summary>
103+
104+
```
105+
import { Badge, useTheme } from "@adaptui/react-native-tailwind"
106+
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+
}
117+
118+
```
119+
120+
</details>
121+
122+
## Prefix
123+
124+
The prefix is a slot at the beginning or prefix position of a component. Here in
125+
the badge, the prefix slot can be used to bring an icon, spinner, or, if we need
126+
to think wild, maybe even an avatar. Prefix itself doesn’t have any unique
127+
property. It’s a frame that hugs the component inside it.
128+
129+
![simulator_screenshot_13BEF27A-9C5C-4404-84D0-65DE9A9C1387](https://user-images.githubusercontent.com/35562287/175243281-80b1a421-5856-4487-b028-b023e7ba1a67.png)
130+
131+
132+
<details>
133+
<summary>
134+
<h3>Usage</h3>
135+
</summary>
136+
137+
```
138+
import { Badge, useTheme, Icon, Check } from "@adaptui/react-native-tailwind"
139+
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+
}
150+
151+
```
152+
153+
</details>
154+
155+
[![Edit CodeSandbox](https://img.shields.io/badge/Badge-Open%20On%20Expo-%230971f1?style=for-the-badge&logo=expo&labelColor=151515)](https://snack.expo.dev/@timelessco/badge-component--adaptui)
156+
157+
## Props
158+
159+
> Badge implements Box accepting all `ViewProps`
160+
161+
| Name | Description | Type | Default |
162+
| ---------- | ---------------------------------------------------------- | ----------------------------------------------- | ------- |
163+
| size | How large should badge be? Defaults to 'md' | `sm` `md` `lg` | `md` |
164+
| variant | How the badge should look? | `outline` `subtle` `solid` | `solid` |
165+
| themeColor | How the badge should be themed? | `base` `primary` `secondary` `success` `danger` | `base` |
166+
| prefix | If added, the tag will show an icon before the tag's text. | JSX.Element | |
167+
| textProps | Props for the underlying Text Component | `TextProps` from React Native | {} |

0 commit comments

Comments
 (0)