diff --git a/docs/src/components/Checkbox/Basic.tsx b/docs/src/components/Checkbox/Basic.tsx new file mode 100644 index 00000000..1d332edd --- /dev/null +++ b/docs/src/components/Checkbox/Basic.tsx @@ -0,0 +1,44 @@ +import { + Checkbox, + LoadingIndicator, + ThemeProvider, + ThemeType, + useTheme, +} from 'dooboo-ui'; +import React, {FC, useState} from 'react'; + +import {View} from 'react-native'; +import {useFonts} from 'expo-font'; + +const Component: FC = () => { + const [checked, setChecked] = useState(false); + const {theme} = useTheme(); + + const [fontsLoaded] = useFonts({ + IcoMoon: require('../../assets/doobooui.ttf'), + }); + + if (!fontsLoaded) return ; + + return ( + + setChecked(!checked)} /> + + ); +}; + +export const Basic: FC<{themeType: ThemeType}> = ({themeType}) => { + return ( + + + + ); +}; diff --git a/docs/src/components/Checkbox/Checkbox.stories.mdx b/docs/src/components/Checkbox/Checkbox.stories.mdx index 2d142aa1..3c61d799 100644 --- a/docs/src/components/Checkbox/Checkbox.stories.mdx +++ b/docs/src/components/Checkbox/Checkbox.stories.mdx @@ -1,12 +1,14 @@ import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'; import {ThemeProvider} from 'dooboo-ui'; -import {Default, LeftElement, RightElement} from './index'; +import {Basic, Solid, Disabled, LeftElement, RightElement} from './index'; # Checkbox -> [Checkbox] component with default styles with animation. +> [Checkbox] component that can be used inside the product. Has basic feature like `disabled` state, can apply different color with `type` prop, and also can put the extra element to the `left` and `right` side of the checkbox. + +
## Usage @@ -18,46 +20,143 @@ import {Checkbox} from 'dooboo-ui'; ## Props -| | Types | Description | -| ---------------------- | ---------------------------------------- | --------------------------------------- | -| testID? | `string` | | -| indicatorColor? | `string` | | -| loading? | `boolean` | | -| disabled? | `boolean` | | -| style? | `StyleProp` | root `ViewStyle` | -| styles? | `Styles` | List of all style props within [Button] | -| leftElement? | `ReactElement` | Extra element to place on the left | -| rightElement? | `ReactElement` | Extra element to place on the right | -| activeOpacity? | `TouchableOpacityProps['activeOpacity']` | | -| text? | `string` | | -| onPress? | `TouchableOpacityProps['onPress']` | | -| touchableOpacityProps? | `Partial` | | -| textProps? | `Partial` | | -| type? | `ButtonType` | | -| size? | `ButtonSize` | | +| | Necessary | Types | Description | Default | +| ---------------------- | ----------- | ---------------------------------------- | ---------------------------------------------- | -------- | +| onPress? | | `() => void` | | | +| style? | | `StyleProp` | root `ViewStyle` | | +| styles? | | `Styles` | List of all style props within [Checkbox] | | +| type? | | `CheckboxType` | | primary | +| disabled? | | `boolean` | | | +| theme? | | `DoobooTheme` | | | +| chekced? | | `boolean` | | | +| leftElement? | | `ReactElement` | Extra element to place on the left | | +| rightElement? | | `ReactElement` | Extra element to place on the right | | + + +
## Demo -### Default Checkbox +### Basic Style +```tsx + setChecked(!checked)} /> +``` + + + +
+ + +### Solid Color Types +`primary` `secondary` `success` `warning` `info` `danger` + +The `type` prop can generate different color of Checkbox. The default value of type is `primary`. + +```tsx + setChecked(!checked)} + type="primary" +/> + setChecked(!checked)} + type="secondary" +/> + setChecked(!checked)} + type="success" +/> + setChecked(!checked)} + type="warning" +/> + setChecked(!checked)} + type="info" +/> + setChecked(!checked)} + type="danger" +/> +``` + + + +
+ + +### Disabled Checkbox +The `disabled` prop can generate disabled Checkbox which is not pressable. + +It can't apply `type` prop at the same time. -#### light - +```tsx + +``` + + + +
-#### dark - ### Checkbox with leftElement +The `leftElement` prop can generate Checkbox following behind the element. -#### light - +It can be used with the `type` prop. -#### dark +```tsx + setChecked(!checked)} + leftElement={Hello this is a checkbox} +/> + setChecked(!checked)} + leftElement={Hello this is a checkbox} +/> + setChecked(!checked)} + leftElement={Hello this is a checkbox} +/> +``` + + +
+ ### Checkbox with rightElement -#### light - +The `rightElement` prop can generate Checkbox in front of the element. + +It can be used with the `type` prop. + +```tsx + setChecked(!checked)} + rightElement={Hello this is a checkbox} +/> + setChecked(!checked)} + rightElement={Hello this is a checkbox} +/> + setChecked(!checked)} + rightElement={Hello this is a checkbox} +/> +``` -#### dark + +
+ diff --git a/docs/src/components/Checkbox/Disabled.tsx b/docs/src/components/Checkbox/Disabled.tsx new file mode 100644 index 00000000..6b810e1f --- /dev/null +++ b/docs/src/components/Checkbox/Disabled.tsx @@ -0,0 +1,43 @@ +import { + Checkbox, + LoadingIndicator, + ThemeProvider, + ThemeType, + useTheme, +} from 'dooboo-ui'; +import React, {FC} from 'react'; + +import {View} from 'react-native'; +import {useFonts} from 'expo-font'; + +const Component: FC = () => { + const {theme} = useTheme(); + + const [fontsLoaded] = useFonts({ + IcoMoon: require('../../assets/doobooui.ttf'), + }); + + if (!fontsLoaded) return ; + + return ( + + + + ); +}; + +export const Disabled: FC<{themeType: ThemeType}> = ({themeType}) => { + return ( + + + + ); +}; diff --git a/docs/src/components/Checkbox/LeftElement.tsx b/docs/src/components/Checkbox/LeftElement.tsx index a1b961f2..2769dbf6 100644 --- a/docs/src/components/Checkbox/LeftElement.tsx +++ b/docs/src/components/Checkbox/LeftElement.tsx @@ -31,8 +31,9 @@ const Component: FC = () => { backgroundColor: theme.background, flex: 1, alignSelf: 'stretch', - flexDirection: 'column', + alignItems: 'center', + padding: 10, }}> { backgroundColor: theme.background, flex: 1, alignSelf: 'stretch', + alignItems: 'center', + padding: 10, }}> { backgroundColor: theme.background, flex: 1, alignSelf: 'stretch', - flexDirection: 'row', + justifyContent: 'center', + padding: 5, }}> - setChecked(!checked)} /> + setChecked(!checked)} + type="primary" + /> { onPress={() => setChecked(!checked)} type="danger" /> - setChecked(!checked)} - disabled - /> ); }; -export const Default: FC<{themeType: ThemeType}> = ({themeType}) => { +export const Solid: FC<{themeType: ThemeType}> = ({themeType}) => { return ( diff --git a/docs/src/components/Checkbox/index.tsx b/docs/src/components/Checkbox/index.tsx index fb10d4f1..a08eb986 100644 --- a/docs/src/components/Checkbox/index.tsx +++ b/docs/src/components/Checkbox/index.tsx @@ -1,3 +1,5 @@ -export * from './Default'; +export * from './Basic'; +export * from './Disabled'; export * from './LeftElement'; export * from './RightElement'; +export * from './Solid';