From cc11ffb0bd979204bb7ba1f6cf147e0311c6f26f Mon Sep 17 00:00:00 2001 From: Karthik-B-06 Date: Fri, 24 Jun 2022 19:57:57 +0530 Subject: [PATCH] docs: :memo: update component and getting-started docs --- docs/avatar-group.md | 1 - docs/avatar.md | 1 - docs/badge.md | 70 +++++++------------- docs/button.md | 139 ++++++++++++++-------------------------- docs/checkbox-group.md | 8 +-- docs/checkbox.md | 65 ++++++++----------- docs/getting-started.md | 16 ++++- 7 files changed, 115 insertions(+), 185 deletions(-) diff --git a/docs/avatar-group.md b/docs/avatar-group.md index 41142ded..5bc76141 100644 --- a/docs/avatar-group.md +++ b/docs/avatar-group.md @@ -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 diff --git a/docs/avatar.md b/docs/avatar.md index 0df993f3..5f1056ce 100644 --- a/docs/avatar.md +++ b/docs/avatar.md @@ -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 diff --git a/docs/badge.md b/docs/badge.md index 82031114..a7a2b242 100644 --- a/docs/badge.md +++ b/docs/badge.md @@ -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 ``` @@ -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 ( - <> - Completed - Processing - Waiting - Success - Cancelled - - ) -} +export default function App() { const tailwind = useTheme(); return ( <> +Completed Processing +Waiting +Success +Cancelled ) } + ``` @@ -72,20 +64,15 @@ better visual hierarchy.

Usage

 - + ``` + import { Badge, useTheme } from "@adaptui/react-native-tailwind" -export default function App() { - const tailwind = useTheme(); - return ( - <> - Solid - Subtle - Outline - - ) -} +export default function App() { const tailwind = useTheme(); return ( <> +Solid Subtle +Outline ) } + ``` @@ -102,21 +89,15 @@ Adapt UI provides three different sizes for badges, namely `sm`, `md`, and `lg`. ``` + import { Badge, useTheme } from "@adaptui/react-native-tailwind" -export default function App() { - const tailwind = useTheme(); - return ( - <> - Small - Medium - Large - - ) -} +export default function App() { const tailwind = useTheme(); return ( <> +Small Medium +Large ) } ``` - + ## Prefix @@ -133,20 +114,14 @@ property. It’s a frame that hugs the component inside it.

Usage

 - + ``` + import { Badge, useTheme, Icon, Check } from "@adaptui/react-native-tailwind" -export default function App() { - const tailwind = useTheme(); - return ( - <> - } />} themeColor="success"> - Completed - - - ) -} +export default function App() { const tailwind = useTheme(); return ( <> } />} themeColor="success"> Completed +) } ``` @@ -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 | {} | +``` diff --git a/docs/button.md b/docs/button.md index 89b23b6f..b2098878 100644 --- a/docs/button.md +++ b/docs/button.md @@ -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 ``` @@ -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)
@@ -44,23 +42,16 @@ scenarios. ``` import { Button, useTheme } from "@adaptui/react-native-tailwind" -export default function App() { - const tailwind = useTheme(); - return ( - <> - - - - - - - ) -} +export default function App() { const tailwind = useTheme(); return ( <> + + + ) } ```
- - + + ## Variants Adapt UI provides four different styles for buttons, namely `solid`, `subtle`, @@ -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)
- +

Usage

 ``` + import { Button, useTheme } from "@adaptui/react-native-tailwind" -export default function App() { - const tailwind = useTheme(); - return ( - <> - - - - - - ) -} +export default function App() { const tailwind = useTheme(); return ( <> + + ) } ```
- + ## 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)
- +

Usage

 ``` + import { Button, useTheme } from "@adaptui/react-native-tailwind" -export default function App() { - const tailwind = useTheme(); - return ( - <> - - - - - - ) -} +export default function App() { const tailwind = useTheme(); return ( <> + + ) } ``` @@ -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)
- +

Usage

 ``` -import { Button, useTheme, Icon, DefaultUser } from "@adaptui/react-native-tailwind" -export default function App() { - const tailwind = useTheme(); - return ( - <> - - - ) -} +import { Button, useTheme, Icon, DefaultUser } from +"@adaptui/react-native-tailwind" + +export default function App() { const tailwind = useTheme(); return ( <> + ) } ``` @@ -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)
- +

Usage

 ``` -import { Button, useTheme, Icon, CaretRight } from "@adaptui/react-native-tailwind" -export default function App() { - const tailwind = useTheme(); - return ( - <> - - - ) -} +import { Button, useTheme, Icon, CaretRight } from +"@adaptui/react-native-tailwind" + +export default function App() { const tailwind = useTheme(); return ( <> + ) } ``` @@ -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)
- +

Usage

 ``` -import { Button, useTheme, Icon, CaretRight, Add, Delete } from "@adaptui/react-native-tailwind" -export default function App() { - const tailwind = useTheme(); - return ( - <> -
@@ -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 | | +``` diff --git a/docs/checkbox-group.md b/docs/checkbox-group.md index 5dcf9b98..5394af31 100644 --- a/docs/checkbox-group.md +++ b/docs/checkbox-group.md @@ -1,8 +1,8 @@ # Checkbox Group -AdaptUI exports a `` component to help manage the checked state of -its children Checkbox components and conveniently pass a few shared style props -to each. +AdaptUI exports a `` component to help manage the checked state +of its children Checkbox components and conveniently pass a few shared style +props to each. See the [props](#props) table at the bottom of this page for a list of the shared props. @@ -11,10 +11,8 @@ Also check the Indeterminate case [here.](checkbox.md#indeterminate) #### Preview - https://user-images.githubusercontent.com/35562287/175327232-2f1774b7-8110-4f60-8901-e911fe11af74.mp4 - #### Simple Usage ``` diff --git a/docs/checkbox.md b/docs/checkbox.md index 89cd6d24..6d536aab 100644 --- a/docs/checkbox.md +++ b/docs/checkbox.md @@ -8,11 +8,9 @@ five interaction states. ##### Simple Usage ```js -import { Checkbox } from "@adaptui/react-native-tailwind" +import { Checkbox } from "@adaptui/react-native-tailwind"; export default function App() { - return ( - - ) + return ; } ``` @@ -37,7 +35,7 @@ Adapt UI provides three themes for the checkbox: `base`, `primary`, and ```js -import { Checkbox, useTheme } from "@adaptui/react-native-tailwind" +import { Checkbox, useTheme } from "@adaptui/react-native-tailwind"; export default function App() { const tailwind = useTheme(); @@ -47,10 +45,10 @@ export default function App() { - ) + ); } - ``` +
## Size @@ -66,7 +64,7 @@ hierarchy, you can switch between different sizes. ```js -import { Checkbox, useTheme } from "@adaptui/react-native-tailwind" +import { Checkbox, useTheme } from "@adaptui/react-native-tailwind"; export default function App() { const tailwind = useTheme(); @@ -76,10 +74,10 @@ export default function App() { - ) + ); } - ``` +
## Label @@ -96,7 +94,7 @@ or even sizes. ```js -import { Checkbox, useTheme } from "@adaptui/react-native-tailwind" +import { Checkbox, useTheme } from "@adaptui/react-native-tailwind"; export default function App() { const tailwind = useTheme(); @@ -104,10 +102,10 @@ export default function App() { <> - ) + ); } - ``` +
## Description @@ -122,7 +120,7 @@ This property can give you description text along with the label. ```js -import { Checkbox, useTheme } from "@adaptui/react-native-tailwind" +import { Checkbox, useTheme } from "@adaptui/react-native-tailwind"; export default function App() { const tailwind = useTheme(); @@ -133,15 +131,17 @@ export default function App() { description="Pre-select your food, get more leg room seat and fast check-in. Extra charges apply." /> - ) + ); } - ``` + ## Indeterminate -In some scenarios, we have a checkbox group under a category. You can use indeterminate property to switch between indeterminate or unchecked states. We will use `` for the demo purpose. +In some scenarios, we have a checkbox group under a category. You can use +indeterminate property to switch between indeterminate or unchecked states. We +will use `` for the demo purpose. ![simulator_screenshot_692E2121-905B-4D02-A562-C74042B2DB42](https://user-images.githubusercontent.com/35562287/175297015-a93b669b-d65c-4644-bb13-6e876a4c453d.png) @@ -158,28 +158,18 @@ import { useTheme, } from "@adaptui/react-native-tailwind"; -export const App = () => { - const tailwind = useTheme(); - return ( - - - - - - - - - - - - - ); -}; +export const App = () => { const tailwind = useTheme(); return ( + + + + + + ); }; ``` - + ## Props @@ -202,3 +192,4 @@ export const App = () => { ## Also Check - [CheckboxGroup](checkbox-group.md) +``` diff --git a/docs/getting-started.md b/docs/getting-started.md index 16ab4ef4..37d27780 100644 --- a/docs/getting-started.md +++ b/docs/getting-started.md @@ -46,6 +46,18 @@ function AvatarComponentScreen() { ## Component Docs -- [Avatar](avatar.md) -- [AvatarGroup](avatar-group.md) +- [Avatar Group](avatar-group.md) - [Badge](badge.md) +- [Button](button.md) +- [Checkbox](checkbox.md) +- [Checkbox Group](checkbox-group.md) +- [Circular Progress](circular-progress.md) +- [Input](input.md) +- [Meter](meter.md) +- [Progress Bar](progress-bar.md) +- [Radio](radio.md) +- [Slider](slider.md) +- [Spinner](spinner.md) +- [Switch](switch.md) +- [Tag](tag.md) +- [Tooltip](tooltip.md)