@lunit/design-system 1.0.0 → 2.0.0

package/src/stories/components/Button/Color.stories.tsx

@@ -0,0 +1,132 @@
+import React from "react";
+import { Box } from "@mui/material";
+import { action } from "@storybook/addon-actions";
+
+import Button from "@/components/Button";
+
+import type { StoryFn, Meta } from "@storybook/react";
+
+export default {
+  title: "Components/Button",
+  component: Button,
+  args: {
+    children: "Text",
+    disabled: false,
+    size: "small",
+    onClick: action("onClick"),
+  },
+  argTypes: {
+    children: {
+      type: "string",
+    },
+    disabled: {
+      control: {
+        type: "boolean",
+      },
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+    size: {
+      control: {
+        type: "radio",
+      },
+      options: ["small", "medium", "large"],
+      table: {
+        defaultValue: { summary: "small" },
+      },
+    },
+    onClick: {
+      type: "function",
+      control: {
+        type: "radio",
+      },
+      options: ["function", undefined],
+      mapping: {
+        function: action("onClick"),
+        undefined: undefined,
+      },
+      description:
+        "It is a callback function that is called when the button is clicked.",
+    },
+  },
+  parameters: {
+    controls: {
+      include: ["onClick", "children", "size", "disabled", "kind", "variant"],
+    },
+    pseudo: {
+      hover: [
+        "#hover1",
+        "#hover2",
+        "#hover3",
+        "#hover4",
+        "#hover5",
+        "#hover6",
+        "#hover7",
+      ],
+    },
+    docs: {
+      description: {
+        component: `It is a kind Button docs. For more details, please
+				see [Material-UI Button](https://mui.com/material-ui/react-button/).`,
+      },
+    },
+  },
+} as Meta<typeof Button>;
+
+const ColorButtonTemplate: StoryFn<typeof Button> = (args) => {
+  const { children, kind, variant, ...restArgs } = args;
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", gap: 4 }}>
+      <Box>
+        <Button
+          sx={{ mr: 2 }}
+          {...restArgs}
+          variant="contained"
+          color="primary"
+        >
+          {children}
+        </Button>
+        <Button
+          sx={{ mr: 2 }}
+          {...restArgs}
+          variant="contained"
+          color="secondary"
+        >
+          {children}
+        </Button>
+        <Button {...restArgs} variant="contained" color="error">
+          {children}
+        </Button>
+      </Box>
+      <Box>
+        <Button sx={{ mr: 2 }} {...restArgs} variant="outlined" color="primary">
+          {children}
+        </Button>
+        <Button
+          sx={{ mr: 2 }}
+          {...restArgs}
+          variant="outlined"
+          color="secondary"
+        >
+          {children}
+        </Button>
+      </Box>
+      <Box>
+        <Button sx={{ mr: 2 }} {...restArgs} variant="text" color="primary">
+          {children}
+        </Button>
+        <Button sx={{ mr: 2 }} {...restArgs} variant="text" color="secondary">
+          {children}
+        </Button>
+        <Button {...restArgs} variant="text" color="error">
+          {children}
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export const Color = {
+  render: ColorButtonTemplate,
+};

package/src/stories/components/Button/IconButton.stories.tsx

@@ -5,12 +5,12 @@ import { action } from "@storybook/addon-actions";
 import Button from "@/components/Button";
 
 import type { StoryFn, Meta } from "@storybook/react";
+import { Box } from "@mui/material";
 
 export default {
   title: "Components/Button",
   component: Button,
   args: {
-    kind: "contained",
     color: "primary",
     disabled: false,
     size: "small",
@@ -26,26 +26,6 @@ export default {
         type: { summary: "React.ReactNode" },
       },
     },
-    kind: {
-      control: {
-        type: "radio",
-      },
-      options: ["contained", "outlined", "ghost"],
-      description: "Button has three Kinds Contained, Outlined, Ghost",
-      table: {
-        defaultValue: { summary: "contained" },
-      },
-    },
-    variant: {
-      control: {
-        type: "radio",
-      },
-      options: ["contained", "outlined", "text", "ghost"],
-      description: "The variant is alias of kind.",
-      table: {
-        defaultValue: { summary: "contained" },
-      },
-    },
     color: {
       control: {
         type: "radio",
@@ -89,7 +69,6 @@ export default {
   parameters: {
     controls: {
       include: [
-        "children",
         "icon",
         "onClick",
         "disabled",
@@ -108,15 +87,48 @@ export default {
   },
 } as Meta<typeof Button>;
 
-const IconButtonTemplate: StoryFn<typeof Button> = (args) => (
-  <Button icon={<Bell />} {...args}>
-    {args.children}
-  </Button>
-);
+const IconButtonTemplate: StoryFn<typeof Button> = (args) => {
+  const { variant, kind, ...restArgs } = args;
 
-export const IconOnlyButton = {
-  render: IconButtonTemplate,
+  return (
+    <Box sx={{ display: "flex", gap: 2 }}>
+      <Button icon={<Bell />} {...restArgs} kind="contained">
+        Contained
+      </Button>
+      <Button
+        icon={<Bell />}
+        {...restArgs}
+        color={args.color === "error" ? "primary" : args.color}
+        kind="outlined"
+      >
+        Outlined
+      </Button>
+      <Button icon={<Bell />} {...restArgs} kind="ghost">
+        Ghost
+      </Button>
+    </Box>
+  );
+};
+
+const IconOnlyButtonTemplate: StoryFn<typeof Button> = (args) => {
+  const { variant, kind, ...restArgs } = args;
+
+  return (
+    <Box sx={{ display: "flex", gap: 2 }}>
+      <Button icon={<Bell />} {...restArgs} kind="contained" />
+      <Button
+        icon={<Bell />}
+        {...restArgs}
+        color={args.color === "error" ? "primary" : args.color}
+        kind="outlined"
+      />
+      <Button icon={<Bell />} {...restArgs} kind="ghost" />
+    </Box>
+  );
+};
 
+export const IconOnlyButton = {
+  render: IconOnlyButtonTemplate,
   argTypes: {
     children: {
       control: false,
@@ -126,17 +138,11 @@ export const IconOnlyButton = {
       },
     },
   },
-
   name: "Icon only",
 };
 
 export const IconWithTextButton = {
   render: IconButtonTemplate,
-
-  args: {
-    children: "Text",
-  },
-
   argTypes: {
     children: {
       type: "string",

package/src/stories/components/Button/Kind.stories.tsx

@@ -20,7 +20,10 @@ export default {
     children: "Text",
     disabled: false,
     size: "small",
-    onClick: action("onClick"),
+    onClick: () => {
+      action("onClick")();
+      console.log("onClick");
+    },
   },
   argTypes: {
     children: {
@@ -116,57 +119,15 @@ const ButtonTemplate: StoryFn<typeof Button> = ({
 }) => {
   return (
     <>
-      <Table sx={{ width: 600 }}>
-        <TableHead>
-          <TableRow>
-            <TableCell
-              colSpan={3}
-              sx={{
-                typography: "body1_16_semibold",
-                color: "inherit",
-              }}
-            >
-              Kind
-            </TableCell>
-          </TableRow>
-          <TableRow>
-            <TableCell
-              sx={{
-                width: "33.33333%",
-                typography: "body2_14_medium",
-                color: "inherit",
-              }}
-            >
-              Contained(default)
-            </TableCell>
-            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-              Outlined
-            </TableCell>
-            <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-              Ghost
-            </TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          <TableRow>
-            <TableCell>
-              <Button color={color} {...restProps}>
-                {children}
-              </Button>
-            </TableCell>
-            <TableCell>
-              <Button kind="outlined" color="primary" {...restProps}>
-                {children}
-              </Button>
-            </TableCell>
-            <TableCell>
-              <Button kind="ghost" color={color} {...restProps}>
-                {children}
-              </Button>
-            </TableCell>
-          </TableRow>
-        </TableBody>
-      </Table>
+      <Button color={color} {...restProps} sx={{ mr: 2 }}>
+        {children}
+      </Button>
+      <Button kind="outlined" color="primary" {...restProps} sx={{ mr: 2 }}>
+        {children}
+      </Button>
+      <Button kind="ghost" color={color} {...restProps}>
+        {children}
+      </Button>
     </>
   );
 };

package/src/stories/components/{SelectControl/Checkbox.stories.tsx → CheckBox/BasicCheckbox.stories.tsx}

@@ -1,12 +1,6 @@
 import React, { useState, useEffect } from "react";
-import {
-  Box,
-  Table,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableCell,
-} from "@mui/material";
+import { Box, FormControlLabel } from "@mui/material";
+import { action } from "@storybook/addon-actions";
 import Checkbox from "@/components/Checkbox";
 import FormLabel from "@/components/FormLabel";
 import { Meta, StoryFn } from "@storybook/react";
@@ -14,6 +8,11 @@ import { Meta, StoryFn } from "@storybook/react";
 export default {
   title: "Components/Checkbox",
   component: Checkbox,
+  args: {
+    checked: false,
+    disabled: false,
+    indeterminate: false,
+  },
   argTypes: {
     disabled: {
       control: "boolean",
@@ -26,6 +25,16 @@ export default {
       description: "If true, the component appears indeterminate.",
     },
     onChange: {
+      type: "function",
+      control: {
+        type: "radio",
+      },
+      options: ["function", undefined],
+      mapping: {
+        function: action("onChange"),
+        undefined: undefined,
+      },
+      defaultValue: "function",
       table: { type: { summary: "func" } },
       description:
         "Callback fired when the state is changed. Signature: `function(event: React.ChangeEvent<HTMLInputElement>) => void`",
@@ -42,12 +51,6 @@ export default {
       },
       description: "If true, the component is checked.",
     },
-    value: {
-      control: "text",
-      table: { type: { summary: "any" } },
-      description:
-        "The value of the component. The DOM API casts this to a string.",
-    },
     defaultChecked: {
       control: "boolean",
       table: { type: { summary: "bool" }, defaultValue: { summary: "false" } },
@@ -55,11 +58,6 @@ export default {
         "The default checked state. Use when the component is not controlled.",
     },
   },
-  args: {
-    checked: false,
-    disabled: false,
-    indeterminate: false,
-  },
   parameters: {
     controls: {
       expanded: true,
@@ -67,7 +65,6 @@ export default {
         "disabled",
         "indeterminate",
         "onChange",
-        "value",
         "required",
         "checked",
         "defaultChecked",
@@ -93,7 +90,10 @@ const BasicCheckboxTemplate: StoryFn<typeof Checkbox> = (args) => {
     <Checkbox
       {...args}
       checked={checked}
-      onChange={() => setChecked(!checked)}
+      onChange={(event) => {
+        args.onChange && args.onChange(event, checked);
+        setChecked((prev) => !prev);
+      }}
     />
   );
 };
@@ -103,28 +103,49 @@ export const BasicCheckbox = {
 };
 
 const LabelTemplate: StoryFn<typeof Checkbox> = (args) => {
-  const [checked, setChecked] = useState(false);
+  const [checked1, setChecked1] = useState(true);
+  const [checked2, setChecked2] = useState(false);
+
   useEffect(() => {
-    setChecked(Boolean(args.checked));
+    setChecked1(Boolean(args.checked));
+    setChecked2(Boolean(args.checked));
   }, [args.checked]);
 
+  const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
+    args.onChange && args.onChange(event, checked1);
+    setChecked1((prev) => !prev);
+  };
+
+  const handleChange2 = (event: React.ChangeEvent<HTMLInputElement>) => {
+    args.onChange && args.onChange(event, checked2);
+    setChecked2((prev) => !prev);
+  };
+
   return (
-    <FormLabel
-      label="with label"
-      control={
-        <Checkbox
-          {...args}
-          checked={checked}
-          onChange={() => setChecked(!checked)}
-        />
-      }
-    />
+    <Box sx={{ display: "flex", gap: 4 }}>
+      <FormControlLabel
+        control={
+          <Checkbox {...args} checked={checked1} onChange={handleChange1} />
+        }
+        label="Label"
+      />
+      <FormControlLabel
+        control={
+          <Checkbox
+            {...args}
+            disabled
+            checked={checked2}
+            onChange={handleChange2}
+          />
+        }
+        label="Disabled Label"
+      />
+    </Box>
   );
 };
 
 export const Label = {
   render: LabelTemplate,
-
   parameters: {
     docs: {
       description: {
@@ -134,68 +155,9 @@ export const Label = {
   },
 };
 
-const StatusTemplate: StoryFn<typeof Checkbox> = (args) => (
-  <Table sx={{ width: 650 }}>
-    <TableHead>
-      <TableRow>
-        <TableCell></TableCell>
-        <TableCell>Enabled</TableCell>
-        <TableCell>Focuse</TableCell>
-        <TableCell>Disabled</TableCell>
-      </TableRow>
-    </TableHead>
-    <TableBody>
-      <TableRow>
-        <TableCell>On</TableCell>
-        <TableCell>
-          <Checkbox {...args} checked />
-        </TableCell>
-        <TableCell>
-          <Checkbox {...args} checked className="Mui-focusVisible" />
-        </TableCell>
-        <TableCell>
-          <Checkbox {...args} checked disabled />
-        </TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell>Off</TableCell>
-        <TableCell>
-          <Checkbox {...args} />
-        </TableCell>
-        <TableCell>
-          <Checkbox {...args} className="Mui-focusVisible" />
-        </TableCell>
-        <TableCell>
-          <Checkbox {...args} disabled />
-        </TableCell>
-      </TableRow>
-      <TableRow>
-        <TableCell>Indeterminate</TableCell>
-        <TableCell>
-          <Checkbox {...args} checked indeterminate />
-        </TableCell>
-        <TableCell>
-          <Checkbox
-            {...args}
-            checked
-            indeterminate
-            className="Mui-focusVisible"
-          />
-        </TableCell>
-        <TableCell>
-          <Checkbox {...args} checked indeterminate disabled />
-        </TableCell>
-      </TableRow>
-    </TableBody>
-  </Table>
-);
-
-export const Status = {
-  render: StatusTemplate,
-};
-
 const IndeterminateTemplate: StoryFn<typeof Checkbox> = (args) => {
   const [checked, setChecked] = React.useState([true, false]);
+  const { disabled } = args;
 
   const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
     setChecked([event.target.checked, event.target.checked]);
@@ -223,7 +185,7 @@ const IndeterminateTemplate: StoryFn<typeof Checkbox> = (args) => {
   );
 
   return (
-    <div>
+    <Box>
       <FormLabel
         label="Parent"
         control={
@@ -231,26 +193,43 @@ const IndeterminateTemplate: StoryFn<typeof Checkbox> = (args) => {
             checked={checked[0] && checked[1]}
             indeterminate={checked[0] !== checked[1]}
             onChange={handleChange1}
+            disabled={disabled}
           />
         }
       />
       {children}
-    </div>
+    </Box>
   );
 };
 
 export const Indeterminate = {
   render: IndeterminateTemplate,
-
-  argTypes: {
-    disabled: {
-      control: false,
-    },
-    checked: {
-      control: false,
+  parameters: {
+    docs: {
+      description: {
+        story: "You can use the `FormControlLabel` component to provide label.",
+      },
     },
-    indeterminate: {
-      control: false,
+  },
+};
+
+const DisabledTemplate: StoryFn<typeof Checkbox> = (args) => {
+  return (
+    <Box sx={{ display: "flex", gap: 4 }}>
+      <Checkbox {...args} disabled checked />
+      <Checkbox {...args} indeterminate disabled />
+      <Checkbox {...args} disabled />
+    </Box>
+  );
+};
+
+export const Disabled = {
+  render: DisabledTemplate,
+  parameters: {
+    docs: {
+      description: {
+        story: "You can use the `FormControlLabel` component to provide label.",
+      },
     },
   },
 };

package/src/stories/components/CheckBox/CheckboxDocs.mdx

@@ -0,0 +1,85 @@
+import { Canvas, Stories, Controls, Meta, Story } from "@storybook/blocks";
+import Box from "@mui/material/Box";
+import Bell from "@lunit/design-system-icons/Bell";
+
+import * as BasicCheckbox from "./BasicCheckbox.stories";
+
+<Meta name="Checkbox Docs" of={BasicCheckbox} />
+
+# Checkbox
+
+Checkboxes allow the user to select one or more items from a set.
+
+## Usage
+
+### Basic Checkbox
+
+```tsx
+import { Checkbox } from "@lunit/design-system";
+// or
+import Checkbox from "@lunit/design-system/Checkbox";
+
+<Checkbox />;
+```
+
+### Demo
+
+<Canvas of={BasicCheckbox.BasicCheckbox} sourceState="none" />
+
+<Controls />
+
+### Label
+
+You can provide a label to the Checkbox thanks to the FormControlLabel component.
+
+<Canvas of={BasicCheckbox.Label} sourceState="none" />
+
+```tsx
+<FormGroup>
+  <FormControlLabel control={<Checkbox />} label="Label" />
+  <FormControlLabel disabled control={<Checkbox />} label="Disabled Label" />
+</FormGroup>
+```
+
+### Indeterminate
+
+A Checkbox input can only have two states in a form: checked or unchecked. It either submits its value or doesn't. Visually, there are three states a checkbox can be in: checked, unchecked, or indeterminate.
+
+<Canvas of={BasicCheckbox.Indeterminate} sourceState="none" />
+
+```tsx
+<FormLabel
+  label="Parent"
+  control={
+    <Checkbox
+      checked={checked[0] && checked[1]}
+      indeterminate={checked[0] !== checked[1]}
+      onChange={handleChange1}
+    />
+  }
+/>
+```
+
+### Disabled
+
+If you want to disable the button, you can use the disabled prop.
+Default disabled is false.
+
+<Canvas of={BasicCheckbox.Disabled} sourceState="none" />
+
+```tsx
+<Checkbox checked disabed />
+<Checkbox indeterminate disabed />
+<Checkbox disabed />
+```
+
+## Reference
+
+- [Material-UI Checkbox](https://mui.com/material-ui/react-checkbox/)
+- [Material-UI Checkbox API](https://mui.com/material-ui/api/checkbox/)
+- [Lunit Design System Button Figma](https://www.figma.com/file/BSdRUpEPp7XiJ9YnEqpf6F/1.0.0_Components?type=design&node-id=1923-6820&mode=design&t=0BjGJV6Ef9WjfuCD-0)
+
+## Support
+
+- Github: [Create a new issue](https://github.com/lunit-io/design-system/issues/new)
+- Slack: #tf_design_system