@lunit/design-system 2.1.0 → 2.2.3

package/src/stories/components/CheckBox/BasicCheckbox.stories.tsx

@@ -1,12 +1,12 @@
-import React, { useState, useEffect } from "react";
-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";
+import React, { useState } from 'react';
+import { Box, FormControlLabel } from '@mui/material';
+import { action } from 'storybook/actions';
+import Checkbox from '@/components/Checkbox';
+import FormLabel from '@/components/FormLabel';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 
 export default {
-  title: "Components/Checkbox",
+  title: 'Components/Checkbox',
   component: Checkbox,
   args: {
     checked: false,
@@ -15,83 +15,73 @@ export default {
   },
   argTypes: {
     disabled: {
-      control: "boolean",
-      table: { type: { summary: "bool" }, defaultValue: { summary: "false" } },
-      description: "If true, the component is disabled.",
+      control: 'boolean',
+      table: { type: { summary: 'bool' }, defaultValue: { summary: 'false' } },
+      description: 'If true, the component is disabled.',
     },
     indeterminate: {
-      control: "boolean",
-      table: { type: { summary: "bool" }, defaultValue: { summary: "false" } },
-      description: "If true, the component appears indeterminate.",
+      control: 'boolean',
+      table: { type: { summary: 'bool' }, defaultValue: { summary: 'false' } },
+      description: 'If true, the component appears indeterminate.',
     },
     onChange: {
-      type: "function",
+      type: 'function',
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["function", undefined],
+      options: ['function', undefined],
       mapping: {
-        function: action("onChange"),
+        function: action('onChange'),
         undefined: undefined,
       },
-      defaultValue: "function",
-      table: { type: { summary: "func" } },
+      defaultValue: 'function',
+      table: { type: { summary: 'func' } },
       description:
-        "Callback fired when the state is changed. Signature: `function(event: React.ChangeEvent<HTMLInputElement>) => void`",
+        'Callback fired when the state is changed. Signature: `function(event: React.ChangeEvent<HTMLInputElement>) => void`',
     },
     required: {
-      control: "boolean",
-      table: { type: { summary: "bool" }, defaultValue: { summary: "false" } },
-      description: "If true, the input element is required.",
+      control: 'boolean',
+      table: { type: { summary: 'bool' }, defaultValue: { summary: 'false' } },
+      description: 'If true, the input element is required.',
     },
     checked: {
       table: {
-        type: { summary: "bool" },
-        defaultValue: { summary: "false" },
+        type: { summary: 'bool' },
+        defaultValue: { summary: 'false' },
       },
-      description: "If true, the component is checked.",
+      description: 'If true, the component is checked.',
     },
     defaultChecked: {
-      control: "boolean",
-      table: { type: { summary: "bool" }, defaultValue: { summary: "false" } },
-      description:
-        "The default checked state. Use when the component is not controlled.",
+      control: 'boolean',
+      table: { type: { summary: 'bool' }, defaultValue: { summary: 'false' } },
+      description: 'The default checked state. Use when the component is not controlled.',
     },
   },
   parameters: {
     controls: {
       expanded: true,
-      include: [
-        "disabled",
-        "indeterminate",
-        "onChange",
-        "required",
-        "checked",
-        "defaultChecked",
-      ],
+      include: ['disabled', 'indeterminate', 'onChange', 'required', 'checked', 'defaultChecked'],
     },
     docs: {
       description: {
         component:
-          "This component base is Material UI Checkbox component. [Props of the Material UI Checkbox component](material-u) are also available.",
+          'This component base is Material UI Checkbox component. [Props of the Material UI Checkbox component](material-u) are also available.',
       },
     },
   },
 } as Meta<typeof Checkbox>;
 
 const BasicCheckboxTemplate: StoryFn<typeof Checkbox> = (args) => {
-  const [checked, setChecked] = useState(false);
-
-  useEffect(() => {
-    setChecked(Boolean(args.checked));
-  }, [args.checked]);
+  const [checked, setChecked] = useState(Boolean(args.checked));
 
   return (
     <Checkbox
       {...args}
       checked={checked}
       onChange={(event) => {
-        args.onChange && args.onChange(event, checked);
+        if (args.onChange) {
+          args.onChange(event, checked);
+        }
         setChecked((prev) => !prev);
       }}
     />
@@ -103,41 +93,31 @@ export const BasicCheckbox = {
 };
 
 const LabelTemplate: StoryFn<typeof Checkbox> = (args) => {
-  const [checked1, setChecked1] = useState(true);
-  const [checked2, setChecked2] = useState(false);
-
-  useEffect(() => {
-    setChecked1(Boolean(args.checked));
-    setChecked2(Boolean(args.checked));
-  }, [args.checked]);
+  const [checked1, setChecked1] = useState(Boolean(args.checked));
+  const [checked2, setChecked2] = useState(Boolean(args.checked));
 
   const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
-    args.onChange && args.onChange(event, checked1);
+    if (args.onChange) {
+      args.onChange(event, checked1);
+    }
     setChecked1((prev) => !prev);
   };
 
   const handleChange2 = (event: React.ChangeEvent<HTMLInputElement>) => {
-    args.onChange && args.onChange(event, checked2);
+    if (args.onChange) {
+      args.onChange(event, checked2);
+    }
     setChecked2((prev) => !prev);
   };
 
   return (
-    <Box sx={{ display: "flex", gap: 4 }}>
+    <Box sx={{ display: 'flex', gap: 4 }}>
       <FormControlLabel
-        control={
-          <Checkbox {...args} checked={checked1} onChange={handleChange1} />
-        }
+        control={<Checkbox {...args} checked={checked1} onChange={handleChange1} />}
         label="Label"
       />
       <FormControlLabel
-        control={
-          <Checkbox
-            {...args}
-            disabled
-            checked={checked2}
-            onChange={handleChange2}
-          />
-        }
+        control={<Checkbox {...args} disabled checked={checked2} onChange={handleChange2} />}
         label="Disabled Label"
       />
     </Box>
@@ -149,7 +129,7 @@ export const Label = {
   parameters: {
     docs: {
       description: {
-        story: "You can use the `FormControlLabel` component to provide label.",
+        story: 'You can use the `FormControlLabel` component to provide label.',
       },
     },
   },
@@ -159,6 +139,7 @@ const IndeterminateTemplate: StoryFn<typeof Checkbox> = (args) => {
   const [checked, setChecked] = React.useState([true, false]);
   const { disabled } = args;
 
+  // useCallback 사용하기
   const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
     setChecked([event.target.checked, event.target.checked]);
   };
@@ -172,7 +153,7 @@ const IndeterminateTemplate: StoryFn<typeof Checkbox> = (args) => {
   };
 
   const children = (
-    <Box sx={{ display: "flex", flexDirection: "column", ml: 3 }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', ml: 3 }}>
       <FormLabel
         label="Child 1"
         control={<Checkbox checked={checked[0]} onChange={handleChange2} />}
@@ -207,7 +188,7 @@ export const Indeterminate = {
   parameters: {
     docs: {
       description: {
-        story: "You can use the `FormControlLabel` component to provide label.",
+        story: 'You can use the `FormControlLabel` component to provide label.',
       },
     },
   },
@@ -215,7 +196,7 @@ export const Indeterminate = {
 
 const DisabledTemplate: StoryFn<typeof Checkbox> = (args) => {
   return (
-    <Box sx={{ display: "flex", gap: 4 }}>
+    <Box sx={{ display: 'flex', gap: 4 }}>
       <Checkbox {...args} disabled checked />
       <Checkbox {...args} indeterminate disabled />
       <Checkbox {...args} disabled />
@@ -228,7 +209,7 @@ export const Disabled = {
   parameters: {
     docs: {
       description: {
-        story: "You can use the `FormControlLabel` component to provide label.",
+        story: 'You can use the `FormControlLabel` component to provide label.',
       },
     },
   },

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

@@ -1,8 +1,8 @@
-import { Canvas, Stories, Controls, Meta, Story } from "@storybook/blocks";
-import Box from "@mui/material/Box";
-import Bell from "@lunit/design-system-icons/Bell";
+import { Canvas, Stories, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import Box from '@mui/material/Box';
+import Bell from '@lunit/design-system-icons/Bell';
 
-import * as BasicCheckbox from "./BasicCheckbox.stories";
+import * as BasicCheckbox from './BasicCheckbox.stories';
 
 <Meta name="Checkbox Docs" of={BasicCheckbox} />
 
@@ -15,9 +15,9 @@ Checkboxes allow the user to select one or more items from a set.
 ### Basic Checkbox
 
 ```tsx
-import { Checkbox } from "@lunit/design-system";
+import { Checkbox } from '@lunit/design-system';
 // or
-import Checkbox from "@lunit/design-system/Checkbox";
+import Checkbox from '@lunit/design-system/Checkbox';
 
 <Checkbox />;
 ```

package/src/stories/components/Chip/Chip.stories.tsx

@@ -1,9 +1,9 @@
-import React from "react";
-import { Meta } from "@storybook/react";
-import { action } from "@storybook/addon-actions";
-import { Box } from "@mui/system";
+import React from 'react';
+import { Meta } from '@storybook/react-webpack5';
+import { action } from 'storybook/actions';
+import { Box } from '@mui/system';
 
-import Chip from "@/components/Chip";
+import Chip from '@/components/Chip';
 import {
   Logo16,
   Avatar16,
@@ -11,72 +11,72 @@ import {
   Error16,
   Information16,
   Warning16,
-} from "@lunit/design-system-icons";
+} from '@lunit/design-system-icons';
 
 export default {
-  title: "Components/Chips",
+  title: 'Components/Chips',
   component: Chip,
   argTypes: {
     kind: {
       description: `Default status of Contained or Outlined Chip is readOnly. You can pass onClick, onDelete or thumbnail to Contained Chip only.`,
       control: {
-        type: "select",
+        type: 'select',
       },
-      options: ["contained", "outlined"],
+      options: ['contained', 'outlined'],
     },
     variant: {
       description: `The variant is alias of kind. It is Filled or Outlined.`,
       control: {
-        type: "select",
+        type: 'select',
       },
-      options: [undefined, "filled", "outlined"],
+      options: [undefined, 'filled', 'outlined'],
     },
     onClick: {
       description: `Contained chip can have onClick event. When Chip is clickable, onDelete is disabled.`,
       control: {
-        type: "select",
+        type: 'select',
       },
-      options: ["function", undefined],
+      options: ['function', undefined],
       mapping: {
-        function: action("onClick"),
+        function: action('onClick'),
         undefined: undefined,
       },
     },
     onDelete: {
       description:
-        "Contained chip can have onDelete event. When Chip is deletable, onClick is disabled.",
+        'Contained chip can have onDelete event. When Chip is deletable, onClick is disabled.',
       control: {
-        type: "select",
+        type: 'select',
       },
-      options: ["function", undefined],
+      options: ['function', undefined],
       mapping: {
-        function: action("onDelete"),
+        function: action('onDelete'),
         undefined: undefined,
       },
     },
 
     thumbnail: {
       control: {
-        type: "select",
+        type: 'select',
       },
       options: [
         undefined,
-        "Initial",
-        "Logo16",
-        "Avatar16",
-        "Avatar16Filled",
-        "Success16",
-        "Success16Filled",
-        "Error16",
-        "Error16Filled",
-        "Information16",
-        "Information16Filled",
-        "Warning16",
-        "Warning16Filled",
+        'Initial',
+        'Logo16',
+        'Avatar16',
+        'Avatar16Filled',
+        'Success16',
+        'Success16Filled',
+        'Error16',
+        'Error16Filled',
+        'Information16',
+        'Information16Filled',
+        'Warning16',
+        'Warning16Filled',
       ],
       mapping: {
         undefined: undefined,
-        Initial: "W as initial",
+        Initial: 'W as initial',
         Logo16: <Logo16 />,
         Avatar16: <Avatar16 />,
         Avatar16Filled: <Avatar16 variant="filled" />,
@@ -92,9 +92,9 @@ export default {
     },
   },
   args: {
-    kind: "contained",
-    variant: "filled",
-    label: "label@lunit.io",
+    kind: 'contained',
+    variant: 'filled',
+    label: 'label@lunit.io',
   },
   parameters: {
     docs: {
@@ -119,52 +119,52 @@ export const Outlined = {
     },
     controls: {
       exclude: [
-        "thumbnail",
-        "onClick",
-        "onDelete",
-        "disabled",
-        "clickable",
-        "skipFocusWhenDisabled",
+        'thumbnail',
+        'onClick',
+        'onDelete',
+        'disabled',
+        'clickable',
+        'skipFocusWhenDisabled',
       ],
     },
   },
 
   args: {
-    color: "primary",
-    kind: "outlined",
-    variant: "outlined",
+    color: 'primary',
+    kind: 'outlined',
+    variant: 'outlined',
   },
 
-  name: "Kind(Variant): Outlined",
+  name: 'Kind(Variant): Outlined',
 };
 
 export const Contained = {
   parameters: {
     controls: {
       exclude: [
-        "thumbnail",
-        "onClick",
-        "onDelete",
-        "disabled",
-        "clickable",
-        "skipFocusWhenDisabled",
+        'thumbnail',
+        'onClick',
+        'onDelete',
+        'disabled',
+        'clickable',
+        'skipFocusWhenDisabled',
       ],
     },
   },
 
   args: {
-    color: "primary",
-    kind: "contained",
-    variant: "filled",
+    color: 'primary',
+    kind: 'contained',
+    variant: 'filled',
   },
 
-  name: "Kind(Variant): Contained / Read Only",
+  name: 'Kind(Variant): Contained / Read Only',
 };
 
 export const Kind = {
   chromatic: { disableSnapshot: true },
   render: () => (
-    <Box sx={{ display: "flex", flexDirection: "row", gap: 4 }}>
+    <Box sx={{ display: 'flex', flexDirection: 'row', gap: 4 }}>
       <Chip kind="outlined" label="label@lunit.io" />
       <Chip kind="contained" label="label@lunit.io" />
     </Box>
@@ -174,7 +174,7 @@ export const Kind = {
 export const Color = {
   chromatic: { disableSnapshot: true },
   render: () => (
-    <Box sx={{ display: "flex", flexDirection: "row", gap: 4 }}>
+    <Box sx={{ display: 'flex', flexDirection: 'row', gap: 4 }}>
       <Chip color="primary" label="label@lunit.io" />
       <Chip color="secondary" label="label@lunit.io" />
       <Chip color="warning" label="label@lunit.io" />
@@ -187,7 +187,7 @@ export const Color = {
 export const Thumbnail = {
   chromatic: { disableSnapshot: true },
   render: () => (
-    <Box sx={{ display: "flex", flexDirection: "row", gap: 4 }}>
+    <Box sx={{ display: 'flex', flexDirection: 'row', gap: 4 }}>
       <Chip thumbnail={<Logo16 />} label="label@lunit.io" />
       <Chip thumbnail={<Avatar16 />} label="label@lunit.io" />
       <Chip thumbnail={<Success16 />} label="label@lunit.io" />
@@ -199,7 +199,7 @@ export const Thumbnail = {
 export const ContainedWithClick = {
   args: {
     ...Contained.args,
-    onClick: action("onClick"),
+    onClick: action('onClick'),
     onDelete: undefined,
   },
 
@@ -210,18 +210,18 @@ export const ContainedWithClick = {
       },
     },
     controls: {
-      exclude: ["onDelete", "deletable"],
+      exclude: ['onDelete', 'deletable'],
     },
   },
 
-  name: "Kind(Variant): Contained / Enable",
+  name: 'Kind(Variant): Contained / Enable',
 };
 
 export const ContainedWithDelete = {
   args: {
     ...Contained.args,
     onClick: undefined,
-    onDelete: action("onDelete"),
+    onDelete: action('onDelete'),
   },
 
   parameters: {
@@ -231,17 +231,17 @@ export const ContainedWithDelete = {
       },
     },
     controls: {
-      exclude: ["onClick", "clickable"],
+      exclude: ['onClick', 'clickable'],
     },
   },
 
-  name: "Kind(Variant): Contained / Deletable",
+  name: 'Kind(Variant): Contained / Deletable',
 };
 
 export const ContainedWithThumbnail = {
   args: {
     ...Contained.args,
-    thumbnail: "Initial",
+    thumbnail: 'Initial',
     onClick: undefined,
     onDelete: undefined,
   },
@@ -253,19 +253,19 @@ export const ContainedWithThumbnail = {
       },
     },
     controls: {
-      exclude: ["onClick", "onDelete"],
+      exclude: ['onClick', 'onDelete'],
     },
   },
 
-  name: "Kind(Variant): Contained with Thumbnail",
+  name: 'Kind(Variant): Contained with Thumbnail',
 };
 
 export const ContainedWithDeleteAndThumbnail = {
   args: {
     ...Contained.args,
-    thumbnail: "Initial",
+    thumbnail: 'Initial',
     onClick: undefined,
-    onDelete: action("onDelete"),
+    onDelete: action('onDelete'),
   },
 
   parameters: {
@@ -275,11 +275,11 @@ export const ContainedWithDeleteAndThumbnail = {
       },
     },
     controls: {
-      exclude: ["onClick"],
+      exclude: ['onClick'],
     },
   },
 
-  name: "Kind(Variant): Contained with Thumbnail and Deletable",
+  name: 'Kind(Variant): Contained with Thumbnail and Deletable',
 };
 
 export const Multiline = {
@@ -287,10 +287,10 @@ export const Multiline = {
     <Box sx={{ width: 100 }}>
       <Chip
         sx={{
-          height: "auto",
-          "& .MuiChip-label": {
-            display: "block",
-            whiteSpace: "normal",
+          height: 'auto',
+          '& .MuiChip-label': {
+            display: 'block',
+            whiteSpace: 'normal',
           },
         }}
         label="This is a chip that has multiple lines."

package/src/stories/components/Chip/ChipDocs.mdx

@@ -1,8 +1,8 @@
-import { Canvas, Stories, Controls, Meta, Story } from "@storybook/blocks";
-import { Error } from "@lunit/design-system-icons";
+import { Canvas, Stories, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Error } from '@lunit/design-system-icons';
 
-import Chip from "@/components/Chip";
-import * as ChipStories from "./Chip.stories";
+import Chip from '@/components/Chip';
+import * as ChipStories from './Chip.stories';
 
 <Meta name="Chip Docs" of={ChipStories} />
 
@@ -15,9 +15,9 @@ Chips are compact elements that represent an input, attribute, or action.
 ### Basic Chip
 
 ```tsx
-import { Chip } from "@lunit/design-system";
+import { Chip } from '@lunit/design-system';
 // or
-import Chip from "@lunit/design-system/Chip";
+import Chip from '@lunit/design-system/Chip';
 
 <Chip />;
 ```
@@ -78,7 +78,7 @@ You cannot pass the `onClick` prop to the Chip when its variant is `outlined`. <
 
 <Canvas of={ChipStories.ContainedWithClick} />
 ```tsx
-<Chip label="label@lunit.io" onClick={() => console.log("onClick")} />
+<Chip label="label@lunit.io" onClick={() => console.log('onClick')} />
 
 ````
 
@@ -121,16 +121,17 @@ The hover/pressed effects are only applied to the delete icon. <br />
 ````
 
 ### Multiline
+
 By default, Chips displays labels only in a single line. To have them support multiline content, use the `sx` prop to add `height:auto` to the Chip component, and `whiteSpace: normal` to the `label` styles.
 
 <Canvas of={ChipStories.Multiline} />
 ```tsx
 <Chip
   sx={{
-    height: "auto",
-    "& .MuiChip-label": {
-      display: "block",
-      whiteSpace: "normal",
+    height: 'auto',
+    '& .MuiChip-label': {
+      display: 'block',
+      whiteSpace: 'normal',
     },
   }}
   label="This is a chip that has multiple lines."
@@ -138,8 +139,6 @@ By default, Chips displays labels only in a single line. To have them support mu
 <Chip label="This is a chip that has ellipsis." />
 ````
 
-
-
 ## Reference
 
 - [Material-UI Chip](https://mui.com/material-ui/react-chip/)

package/src/stories/components/DataTable/DataTable.stories.tsx

@@ -1,10 +1,10 @@
-import React from "react";
-import { StoryFn, Meta } from "@storybook/react";
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react-webpack5';
 
-import DataTable from "@/components/DataTable";
+import DataTable from '@/components/DataTable';
 
 export default {
-  title: "Components/DataTable",
+  title: 'Components/DataTable',
   component: DataTable,
 } as Meta<typeof DataTable>;