edited storybook Checkbox component

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<boolean>(false);
+  const {theme} = useTheme();
+
+  const [fontsLoaded] = useFonts({
+    IcoMoon: require('../../assets/doobooui.ttf'),
+  });
+
+  if (!fontsLoaded) return <LoadingIndicator />;
+
+  return (
+    <View
+      style={{
+        backgroundColor: theme.background,
+        flex: 1,
+        alignSelf: 'stretch',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        padding: 5,
+      }}>
+      <Checkbox checked={checked} onPress={() => setChecked(!checked)} />
+    </View>
+  );
+};
+
+export const Basic: FC<{themeType: ThemeType}> = ({themeType}) => {
+  return (
+    <ThemeProvider initialThemeType={themeType}>
+      <Component />
+    </ThemeProvider>
+  );
+};

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';
 
 <Meta title="Components/Checkbox" />
 
 # 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.
+
+<br />
 
 ## Usage
 
@@ -18,46 +20,143 @@ import {Checkbox} from 'dooboo-ui';
 
 ## Props
 
-|                        | Types                                    | Description                             |
-| ---------------------- | ---------------------------------------- | --------------------------------------- |
-| testID?                | `string`                                 |                                         |
-| indicatorColor?        | `string`                                 |                                         |
-| loading?               | `boolean`                                |                                         |
-| disabled?              | `boolean`                                |                                         |
-| style?                 | `StyleProp<ViewStyle>`                   | 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<TouchableOpacityProps>`         |                                         |
-| textProps?             | `Partial<TextProps>`                     |                                         |
-| type?                  | `ButtonType`                             |                                         |
-| size?                  | `ButtonSize`                             |                                         |
+|                        | Necessary   | Types                                    | Description                                    | Default  |
+| ---------------------- | ----------- | ---------------------------------------- | ---------------------------------------------- | -------- |
+| onPress?               |             | `() => void`                             |                                                |          |
+| style?                 |             | `StyleProp<ViewStyle>`                   | 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            |          |
+
+
+<br/>
 
 ## Demo
 
-### Default Checkbox
+### Basic Style
+```tsx
+<Checkbox text="check" checked={checked} onPress={() => setChecked(!checked)} />
+```
+
+<Basic themeType="light"/>
+<Basic themeType="dark"/>
+<br/>
+
+
+### 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
+<Checkbox
+  checked={checked}
+  onPress={() => setChecked(!checked)}
+  type="primary"
+/>
+<Checkbox
+  checked={checked}
+  onPress={() => setChecked(!checked)}
+  type="secondary"
+/>
+<Checkbox
+  checked={checked}
+  onPress={() => setChecked(!checked)}
+  type="success"
+/>
+<Checkbox
+  checked={checked}
+  onPress={() => setChecked(!checked)}
+  type="warning"
+/>
+<Checkbox
+  checked={checked}
+  onPress={() => setChecked(!checked)}
+  type="info"
+/>
+<Checkbox
+  checked={checked}
+  onPress={() => setChecked(!checked)}
+  type="danger"
+/>
+```
+
+<Solid themeType="light" />
+<Solid themeType="dark" />
+<br/>
+
+
+### Disabled Checkbox
+The `disabled` prop can generate disabled Checkbox which is not pressable.
+
+It can't apply `type` prop at the same time.
 
-#### light
-<Default themeType="light"/>
+```tsx
+<Checkbox disabled />
+```
+
+<Disabled themeType="light" />
+<Disabled themeType="dark" />
+<br/>
 
-#### dark
-<Default themeType="dark"/>
 
 ### Checkbox with leftElement
+The `leftElement` prop can generate Checkbox following behind the element.
 
-#### light
-<LeftElement themeType="light"/>
+It can be used with the `type` prop.
 
-#### dark
+```tsx
+<Checkbox
+  checked={checked}
+  onPress={() => setChecked(!checked)}
+  leftElement={<StyledText>Hello this is a checkbox</StyledText>}
+/>
+<Checkbox
+  checked={checked}
+  onPress={() => setChecked(!checked)}
+  leftElement={<StyledText>Hello this is a checkbox</StyledText>}
+/>
+<Checkbox
+  checked={checked}
+  onPress={() => setChecked(!checked)}
+  leftElement={<StyledText>Hello this is a checkbox</StyledText>}
+/>
+```
+
+<LeftElement themeType="light"/>
 <LeftElement themeType="dark"/>
+<br/>
+
 
 ### Checkbox with rightElement
 
-#### light
-<RightElement themeType="light"/>
+The `rightElement` prop can generate Checkbox in front of the element.
+
+It can be used with the `type` prop.
+
+```tsx
+<Checkbox
+  checked={checked}
+  onPress={() => setChecked(!checked)}
+  rightElement={<StyledText>Hello this is a checkbox</StyledText>}
+/>
+<Checkbox
+  checked={checked}
+  onPress={() => setChecked(!checked)}
+  rightElement={<StyledText>Hello this is a checkbox</StyledText>}
+/>
+<Checkbox
+  checked={checked}
+  onPress={() => setChecked(!checked)}
+  rightElement={<StyledText>Hello this is a checkbox</StyledText>}
+/>
+```
 
-#### dark
+<RightElement themeType="light"/>
 <RightElement themeType="dark"/>
+<br/>
+

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 <LoadingIndicator />;
+
+  return (
+    <View
+      style={{
+        backgroundColor: theme.background,
+        flex: 1,
+        alignSelf: 'stretch',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        padding: 5,
+      }}>
+      <Checkbox disabled />
+    </View>
+  );
+};
+
+export const Disabled: FC<{themeType: ThemeType}> = ({themeType}) => {
+  return (
+    <ThemeProvider initialThemeType={themeType}>
+      <Component />
+    </ThemeProvider>
+  );
+};

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,
       }}>
       <Checkbox
         checked={checked}

docs/src/components/Checkbox/RightElement.tsx

@@ -31,6 +31,8 @@ const Component: FC = () => {
         backgroundColor: theme.background,
         flex: 1,
         alignSelf: 'stretch',
+        alignItems: 'center',
+        padding: 10,
       }}>
       <View style={{flexDirection: 'column'}}>
         <Checkbox

docs/src/components/Checkbox/Default.tsx → docs/src/components/Checkbox/Solid.tsx

@@ -26,10 +26,15 @@ const Component: FC = () => {
         backgroundColor: theme.background,
         flex: 1,
         alignSelf: 'stretch',
-
         flexDirection: 'row',
+        justifyContent: 'center',
+        padding: 5,
       }}>
-      <Checkbox checked={checked} onPress={() => setChecked(!checked)} />
+      <Checkbox
+        checked={checked}
+        onPress={() => setChecked(!checked)}
+        type="primary"
+      />
       <View style={{width: 8}} />
       <Checkbox
         checked={checked}
@@ -60,16 +65,11 @@ const Component: FC = () => {
         onPress={() => setChecked(!checked)}
         type="danger"
       />
-      <Checkbox
-        checked={checked}
-        onPress={() => setChecked(!checked)}
-        disabled
-      />
     </View>
   );
 };
 
-export const Default: FC<{themeType: ThemeType}> = ({themeType}) => {
+export const Solid: FC<{themeType: ThemeType}> = ({themeType}) => {
   return (
     <ThemeProvider initialThemeType={themeType}>
       <Component />

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';