feat(radio, radiogroup, checkboxgroup): added new Radio, RadioGroup, …

…and CheckBoxGroup components
younes200 · Nov 15, 2021 · 0836d4c · 0836d4c
1 parent d2df012
commit 0836d4c
Show file tree

Hide file tree

Showing 24 changed files with 3,094 additions and 117 deletions.
diff --git a/App.tsx b/App.tsx
@@ -13,10 +13,12 @@ import { ThemeProvider } from "./src/theme/src/themeContext";
 import Screen from "./src/components/Atoms/Screen/Screen";
 import Input from "./src/components/Molecules/Input/Input";
 import Icon from "./src/components/Atoms/Icon/Icon";
-import Text from "./src/components/Atoms/Text/Text";
 import Button from "./src/components/Molecules/Button/Button";
 import Stack from "./src/components/Atoms/Stack/Stack";
 import CheckBox from "./src/components/Molecules/CheckBox/CheckBox";
+import Radio from "./src/components/Molecules/Radio/Radio";
+import RadioGroup from "./src/components/Molecules/Radio/RadioGroup";
+import CheckBoxGroup from "./src/components/Molecules/CheckBox/CheckBoxGroup";
 
 const App = () => {
   const [haveFontsLoaded] = useFonts({
@@ -30,11 +32,12 @@ const App = () => {
 
   const [text, settext] = useState("");
   const [checked, setchecked] = useState(false);
+  const [checkedGroup, setCheckedGroup] = useState([]);
 
   return (
     <ThemeProvider defaultColorMode="light" haveFontsLoaded={haveFontsLoaded}>
-      <Storybook />
-      {/* <Screen>
+      {/* <Storybook /> */}
+      <Screen>
         <Input
           isFullWidth
           placeholder="Enter Email"
@@ -51,21 +54,38 @@ const App = () => {
           rightIcon={<Icon iconFamily="Ionicons" iconName="eye-off" />}
         />
 
-        <CheckBox
-          mt="s"
-          isChecked={checked}
-          onPress={() => {
-            setchecked(!checked);
-            console.log("Checked!");
+        <CheckBoxGroup
+          value={checkedGroup}
+          onChange={(value) => {
+            console.log(value);
+            setCheckedGroup(value);
           }}
         >
-          Remember me
-        </CheckBox>
+          <Stack direction="horizontal" spacing="s">
+            <CheckBox value="1">Value 1</CheckBox>
+            <CheckBox value="2">Value 2</CheckBox>
+            <CheckBox value="3">Value 3</CheckBox>
+            <CheckBox value="4">Value 4</CheckBox>
+          </Stack>
+        </CheckBoxGroup>
+
+        {/* <RadioGroup
+          defaultValue="1"
+          value="2"
+          onChange={(value) => console.log(value)}
+        >
+          <Stack direction="horizontal" spacing="s">
+            <Radio value="1">Value 1</Radio>
+            <Radio value="2">Value 2</Radio>
+            <Radio value="3">Value 3</Radio>
+            <Radio value="4">Value 4</Radio>
+          </Stack>
+        </RadioGroup> */}
 
         <Button mt="xl" isFullWidth onPress={() => console.log(2)}>
           Login
         </Button>
-      </Screen> */}
+      </Screen>
     </ThemeProvider>
   );
 };

diff --git a/documentationwebsite/docs/components/forms/CheckBox.mdx b/documentationwebsite/docs/components/forms/CheckBox.mdx
@@ -94,21 +94,21 @@ In some special scenarios, you might need to display a partial checked state(als
 
 ### Checkbox error state
 
-Similar to the checked state, you can add an error state to the checkbox based on any validation criteria you use along with special visual styles to go along with it by using some [special props](#supported-style-props) prefixed with the word <t>error</t>. The `isErrorVisible` prop is used to define whether the checkbox has an error.
+Similar to the checked state, you can add an error state to the checkbox based on any validation criteria you use along with special visual styles to go along with it by using some [special props](#supported-style-props) prefixed with the word <t>error</t>. The `isInvalid` prop is used to define whether the checkbox has an error.
 
 You can also pass the `errorMessage` prop to add a helper text describing the error below the checkbox.
 
 ```jsx
 <CheckBox
-  isErrorVisible
+  isInvalid
   errorBackgroundColor="pink"
   errorBorderColor="red"
 >
   Error Checkbox
 </CheckBox>
 
 <CheckBox
-  isErrorVisible
+  isInvalid
   errorBackgroundColor="cyan"
   errorBorderColor="violet"
   errorMessage="This is an error message!"
@@ -206,7 +206,7 @@ CheckBox composes the [Stack](../layout/Stack) component, you can pass all [Stac
 | isDisabled               | false    | <t>boolean</t>                                                                                                                                                                                                                           | `false`            | Whether the checkbox is disabled.                                       |
 | isChecked                | false    | <t>boolean</t>                                                                                                                                                                                                                           | `false`            | Whether the checkbox is in a checked state.                             |
 | isIndeterminate          | false    | <t>boolean</t>                                                                                                                                                                                                                           | `false`            | Whether the checkbox is in an indeterminate state.                      |
-| isErrorVisible           | false    | <t>boolean</t>                                                                                                                                                                                                                           | `false`            | Whether the checkbox is in an error state.                              |
+| isInvalid                | false    | <t>boolean</t>                                                                                                                                                                                                                           | `false`            | Whether the checkbox is in an error state.                              |
 | errorMessage             | false    | <t>string</t>                                                                                                                                                                                                                            |                    | The error message to be displayed if the checkbox is in an error state. |
 | colorScheme              | false    | <t>PearlTheme.palette</t>                                                                                                                                                                                                                | `"primary"`        | Active color palette of the input field.                                |
 | spacing                  | false    | <t>PearlTheme.spacing</t>                                                                                                                                                                                                                | `"xs"`             | The spacing between the checkbox and the label text.                    |
@@ -311,26 +311,30 @@ export default {
   variants: {
     filled: {
       box: {
+        borderWidth: 2,
         backgroundColor: {
           light: "neutral.200",
           dark: "neutral.900",
         },
         borderColor: {
           light: "neutral.200",
-          dark: "neutral.900",
+          dark: "neutral.600",
         },
+        checkedBorderColor: "primary.500",
       },
     },
     outline: {
       box: {
+        borderWidth: 2,
         backgroundColor: {
           light: "neutral.50",
           dark: "neutral.800",
         },
         borderColor: {
-          light: "neutral.300",
-          dark: "neutral.600",
+          light: "neutral.400",
+          dark: "neutral.500",
         },
+        checkedBorderColor: "primary.500",
       },
     },
   },

diff --git a/documentationwebsite/docs/components/forms/Input.mdx b/documentationwebsite/docs/components/forms/Input.mdx
@@ -126,13 +126,13 @@ The input field is in a `focus` state when the text inside the field can be edit
 
 ### Input error state
 
-Similar to the focus state, you can add an error state to the input field based on any validation criteria you use along with special visual styles to go along with it by using some [special props](#supported-style-props) prefixed with the word <t>error</t>. The `isErrorVisible` prop is used to define whether the input field has an error or not.
+Similar to the focus state, you can add an error state to the input field based on any validation criteria you use along with special visual styles to go along with it by using some [special props](#supported-style-props) prefixed with the word <t>error</t>. The `isInvalid` prop is used to define whether the input field has an error or not.
 
 You can also pass the `errorMessage` prop to add a helper text describing the error below the input field.
 
 ```jsx
 <Input
-  isErrorVisible={true}
+  isInvalid={true}
   errorMessage="Some weird error occured!"
   errorBackgroundColor="pink"
   errorBorderColor="red"
@@ -197,7 +197,7 @@ Input also composes the [TextInput](https://reactnative.dev/docs/textinput) comp
 | variant                | false    | <t>PearlTheme.components.Input["variants"]</t> | `"filled"`      | Variant of the input field.                                                   |
 | isDisabled             | false    | <t>boolean</t>                                 | `false`         | Whether the input field is disabled.                                          |
 | isFullWidth            | false    | <t>boolean</t>                                 | `false`         | Whether the input field should span the entire width of the parent container. |
-| isErrorVisible         | false    | <t>boolean</t>                                 | `false`         | Whether there the input field is in an error state.                           |
+| isInvalid              | false    | <t>boolean</t>                                 | `false`         | Whether there the input field is in an error state.                           |
 | errorMessage           | false    | <t>string</t>                                  |                 | The error message to be displayed if the input field is in an error state.    |
 | colorScheme            | false    | <t>PearlTheme.palette</t>                      | `"primary"`     | Active color palette of the input field.                                      |
 | hasClearButton         | false    | <t>boolean</t>                                 | `false`         | Whether the input field should display a clear button.                        |

diff --git a/src/components/Atoms/Divider/Divider.tsx b/src/components/Atoms/Divider/Divider.tsx
@@ -1,41 +1,9 @@
 import React from "react";
 import { useAtomicComponentConfig } from "../../../hooks/useAtomicComponentConfig";
-import {
-  backgroundColor,
-  opacity,
-  layout,
-  spacing,
-  position,
-} from "../../../theme/src/styleFunctions";
-import {
-  BackgroundColorProps,
-  OpacityProps,
-  VisibleProps,
-  LayoutProps,
-  SpacingProps,
-  PositionProps,
-  visible,
-} from "../../../theme/src/styleFunctions";
-import { StyleFunctionContainer } from "../../../theme/src/types";
 import { View } from "react-native";
+import { BoxProps } from "../../Atoms/Box/Box";
 
-export type DividerStyleProps = BackgroundColorProps &
-  OpacityProps &
-  VisibleProps &
-  LayoutProps &
-  SpacingProps &
-  PositionProps;
-
-export const boxStyleFunctions = [
-  backgroundColor,
-  opacity,
-  visible,
-  layout,
-  spacing,
-  position,
-] as StyleFunctionContainer[];
-
-type DividerProps = DividerStyleProps & {
+type DividerProps = BoxProps & {
   /** The size of the divider */
   size?: string;
   /** The variant of the divider */

diff --git a/src/components/Atoms/Stack/Stack.tsx b/src/components/Atoms/Stack/Stack.tsx
@@ -55,6 +55,7 @@ const Stack: React.FC<StackProps> = ({ children, ...rest }) => {
 
   return (
     <Box
+      flexWrap="wrap"
       {...rest}
       alignSelf="flex-start"
       flexDirection={rest.direction === "horizontal" ? "row" : "column"}

diff --git a/src/components/Atoms/Stack/__snapshots__/Stack.spec.tsx.snap b/src/components/Atoms/Stack/__snapshots__/Stack.spec.tsx.snap
@@ -10,6 +10,7 @@ exports[`Atoms/Stack passes the snapshot test for horizontal direction 1`] = `
       "alignSelf": "flex-start",
       "display": "flex",
       "flexDirection": "row",
+      "flexWrap": "wrap",
     }
   }
 >
@@ -154,6 +155,7 @@ exports[`Atoms/Stack passes the snapshot test for vertical direction 1`] = `
       "alignSelf": "flex-start",
       "display": "flex",
       "flexDirection": "column",
+      "flexWrap": "wrap",
       "marginTop": 24,
     }
   }

diff --git a/src/components/Molecules/CheckBox/CheckBox.config.ts b/src/components/Molecules/CheckBox/CheckBox.config.ts
@@ -7,6 +7,7 @@ export default {
     },
     box: {
       p: "hairline",
+      shape: "square",
       borderWidth: 1,
       borderColor: "neutral.300",
       checkedBackgroundColor: "primary.500",
@@ -74,26 +75,30 @@ export default {
   variants: {
     filled: {
       box: {
+        borderWidth: 2,
         backgroundColor: {
           light: "neutral.200",
           dark: "neutral.900",
         },
         borderColor: {
           light: "neutral.200",
-          dark: "neutral.900",
+          dark: "neutral.600",
         },
+        checkedBorderColor: "primary.500",
       },
     },
     outline: {
       box: {
+        borderWidth: 2,
         backgroundColor: {
           light: "neutral.50",
           dark: "neutral.800",
         },
         borderColor: {
-          light: "neutral.300",
-          dark: "neutral.600",
+          light: "neutral.400",
+          dark: "neutral.500",
         },
+        checkedBorderColor: "primary.500",
       },
     },
   },