@lunit/design-system 2.1.0 → 2.2.3

package/src/stories/components/Alert/Alert.stories.tsx

@@ -1,37 +1,37 @@
-import React from "react";
-import { Box, Typography } from "@mui/material";
-import { StoryFn, Meta } from "@storybook/react";
+import React from 'react';
+import { Box, Typography } from '@mui/material';
+import { StoryFn, Meta } from '@storybook/react-webpack5';
 
-import Alert from "@/components/Alert";
-import Button from "@/components/Button";
-import theme from "@/theme";
-import { action } from "@storybook/addon-actions";
+import Alert from '@/components/Alert';
+import Button from '@/components/Button';
+import theme from '@/theme';
+import { action } from 'storybook/actions';
 
 export default {
-  title: "Components/Alert",
+  title: 'Components/Alert',
   component: Alert,
   argTypes: {
     title: {
-      control: "text",
-      description: "Used to represent the title of the alert.",
+      control: 'text',
+      description: 'Used to represent the title of the alert.',
     },
     severity: {
-      control: "radio",
+      control: 'radio',
       table: {
-        defaultValue: { summary: "success" },
+        defaultValue: { summary: 'success' },
       },
-      options: ["success", "info", "warning", "error", undefined],
+      options: ['success', 'info', 'warning', 'error', undefined],
       description: `\`success\`, \`info\`, \`warning\`, \`error\`, \`undefined\``,
     },
     onClose: {
-      control: "function",
+      control: false, // TODO: 스토리북 버전업 과정에서 control 이 'function' 타입을 지원하지 않아 false 로 변경. 현재 스토리북에서 동작은 이상없으나 필요한 사항이 있으면 수정할 것
       description: `Callback fired when the component requests to be closed.
         When provided, a close icon button is displayed that triggers the callback when clicked.`,
     },
   },
   parameters: {
     controls: {
-      include: ["title", "severity", "onClose"],
+      include: ['title', 'severity', 'onClose'],
     },
     docs: {
       description: {
@@ -45,10 +45,10 @@ export default {
     (Story) => (
       <Box
         sx={{
-          display: "flex",
-          flexDirection: "column",
-          padding: "3em",
-          gap: "1em",
+          display: 'flex',
+          flexDirection: 'column',
+          padding: '3em',
+          gap: '1em',
         }}
       >
         {Story()}
@@ -60,13 +60,10 @@ export default {
 const AlertChildrenContentLong = () => {
   return (
     <Typography variant="body2_14_regular">
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-      tempor incididunt ut{" "}
-      <u style={{ color: theme.palette.lunit_token.core.link_primary }}>
-        labore et dolore
-      </u>{" "}
-      magna aliqua. A diam sollicitudin tempor id eu nisl nunc mi. Auctor augue
-      mauris augue neque gravida in fermentum.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut{' '}
+      <u style={{ color: theme.palette.lunit_token.core.link_primary }}>labore et dolore</u> magna
+      aliqua. A diam sollicitudin tempor id eu nisl nunc mi. Auctor augue mauris augue neque gravida
+      in fermentum.
     </Typography>
   );
 };
@@ -81,7 +78,7 @@ const AlertChildrenContentShort = () => {
 
 const AlertBottomAction = () => {
   return (
-    <Box sx={{ display: "flex", columnGap: "8px" }}>
+    <Box sx={{ display: 'flex', columnGap: '8px' }}>
       <Button color="primary" kind="contained">
         Button
       </Button>
@@ -93,34 +90,30 @@ const AlertBottomAction = () => {
 };
 
 const Template: StoryFn<typeof Alert> = (args) => (
-  <Alert sx={{ width: "620px" }} {...args}>
+  <Alert sx={{ width: '620px' }} {...args}>
     <AlertChildrenContentLong />
   </Alert>
 );
 
 const Template2: StoryFn<typeof Alert> = (args) => (
   <>
-    <Alert sx={{ width: "504px" }} {...args}>
+    <Alert sx={{ width: '504px' }} {...args}>
       <AlertChildrenContentLong />
     </Alert>
-    <Alert sx={{ width: "620px" }} severity={args.severity} onClose={() => {}}>
+    <Alert sx={{ width: '620px' }} severity={args.severity} onClose={() => {}}>
       <AlertChildrenContentLong />
     </Alert>
-    <Alert sx={{ width: "620px" }} severity={args.severity} onClose={() => {}}>
+    <Alert sx={{ width: '620px' }} severity={args.severity} onClose={() => {}}>
       <AlertChildrenContentShort />
     </Alert>
-    <Alert sx={{ width: "620px" }} severity={args.severity}>
+    <Alert sx={{ width: '620px' }} severity={args.severity}>
       <AlertChildrenContentShort />
     </Alert>
   </>
 );
 const Template3: StoryFn<typeof Alert> = (args) => (
   <>
-    <Alert
-      sx={{ width: "504px" }}
-      bottomAction={<AlertBottomAction />}
-      {...args}
-    >
+    <Alert sx={{ width: '504px' }} bottomAction={<AlertBottomAction />} {...args}>
       <AlertChildrenContentLong />
     </Alert>
   </>
@@ -130,9 +123,9 @@ export const AlertBase = {
   render: Template,
 
   args: {
-    title: "Alert title",
-    severity: "success",
-    onClose: action("Close Button is clicked"),
+    title: 'Alert title',
+    severity: 'success',
+    onClose: action('Close Button is clicked'),
   },
 };
 
@@ -140,9 +133,9 @@ export const AlertVariant = {
   render: Template2,
 
   args: {
-    title: "Alert title",
-    severity: "success",
-    onClose: action("Close Button is clicked"),
+    title: 'Alert title',
+    severity: 'success',
+    onClose: action('Close Button is clicked'),
   },
 };
 
@@ -150,8 +143,8 @@ export const AlertWithBottomAction = {
   render: Template3,
 
   args: {
-    title: "Alert title",
-    severity: "success",
-    onClose: action("Close Button is clicked"),
+    title: 'Alert title',
+    severity: 'success',
+    onClose: action('Close Button is clicked'),
   },
 };

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

@@ -1,21 +1,21 @@
-import React from "react";
-import { action } from "@storybook/addon-actions";
-import { Box } from "@mui/material";
+import React from 'react';
+import { action } from 'storybook/actions';
+import { Box } from '@mui/material';
 
-import Button from "@/components/Button";
+import Button from '@/components/Button';
 
-import type { StoryObj, StoryFn, Meta } from "@storybook/react";
+import type { StoryObj, StoryFn, Meta } from '@storybook/react-webpack5';
 
 export default {
-  title: "Components/Button",
+  title: 'Components/Button',
   component: Button,
   args: {
-    kind: "contained",
-    children: "Text",
-    color: "primary",
+    kind: 'contained',
+    children: 'Text',
+    color: 'primary',
     disabled: false,
-    size: "small",
-    onClick: action("onClick"),
+    size: 'small',
+    onClick: action('onClick'),
   },
   argTypes: {
     icon: {
@@ -23,90 +23,80 @@ export default {
       description: `Use this prop when you want to add icon.
         \n It is added to the left of the text criteria`,
       table: {
-        defaultValue: { summary: "undefined" },
-        type: { summary: "React.ReactNode" },
+        defaultValue: { summary: 'undefined' },
+        type: { summary: 'React.ReactNode' },
       },
     },
     children: {
-      description: "The content of the component.",
-      type: "string",
+      description: 'The content of the component.',
+      type: 'string',
     },
     kind: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["contained", "outlined", "ghost"],
-      description: "Button has three Kinds Contained, Outlined, Ghost",
+      options: ['contained', 'outlined', 'ghost'],
+      description: 'Button has three Kinds Contained, Outlined, Ghost',
       table: {
-        defaultValue: { summary: "contained" },
+        defaultValue: { summary: 'contained' },
       },
     },
     variant: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["contained", "outlined", "text", "ghost"],
-      description: "The variant is alias of kind.",
+      options: ['contained', 'outlined', 'text', 'ghost'],
+      description: 'The variant is alias of kind.',
       table: {
-        defaultValue: { summary: "contained" },
+        defaultValue: { summary: 'contained' },
       },
     },
     color: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
       description: `The color of the component. It supports both default and custom theme colors,
         \nwhich can be added as shown in the palette customization guide.`,
-      options: ["primary", "secondary", "error"],
+      options: ['primary', 'secondary', 'error'],
       table: {
-        defaultValue: { summary: "primary" },
+        defaultValue: { summary: 'primary' },
       },
     },
     disabled: {
       control: {
-        type: "boolean",
+        type: 'boolean',
       },
-      description: "If true, the button will be disabled.",
+      description: 'If true, the button will be disabled.',
       table: {
-        defaultValue: { summary: "false" },
+        defaultValue: { summary: 'false' },
       },
     },
     size: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      description: "The size of the button.",
-      options: ["small", "medium", "large"],
+      description: 'The size of the button.',
+      options: ['small', 'medium', 'large'],
       table: {
-        defaultValue: { summary: "small" },
+        defaultValue: { summary: 'small' },
       },
     },
     onClick: {
-      type: "function",
+      type: 'function',
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["function", undefined],
+      options: ['function', undefined],
       mapping: {
-        function: action("onClick"),
+        function: action('onClick'),
         undefined: undefined,
       },
-      description:
-        "It is a callback function that is called when the button is clicked.",
+      description: 'It is a callback function that is called when the button is clicked.',
     },
   },
   parameters: {
     controls: {
-      include: [
-        "onClick",
-        "children",
-        "disabled",
-        "size",
-        "kind",
-        "variant",
-        "color",
-        "icon",
-      ],
+      include: ['onClick', 'children', 'disabled', 'size', 'kind', 'variant', 'color', 'icon'],
     },
     docs: {
       description: {
@@ -122,17 +112,18 @@ export const BasicButton: StoryObj<typeof Button> = {
 };
 
 const DisabledButtonTemplate: StoryFn<typeof Button> = (args) => {
-  const { children, kind, variant, ...restArgs } = args;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { children, variant, ...restArgs } = args;
 
   return (
-    <Box sx={{ display: "flex", gap: 2 }}>
+    <Box sx={{ display: 'flex', gap: 2 }}>
       <Button {...restArgs} disabled kind="contained">
         {children}
       </Button>
       <Button
         {...restArgs}
         disabled
-        color={args.color === "error" ? "primary" : args.color}
+        color={args.color === 'error' ? 'primary' : args.color}
         kind="outlined"
       >
         {children}
@@ -148,16 +139,17 @@ export const Disabled: StoryObj<typeof Button> = {
   render: DisabledButtonTemplate,
   parameters: {
     controls: {
-      include: ["onClick", "children", "size", "color"],
+      include: ['onClick', 'children', 'size', 'color'],
     },
   },
 };
 
 const SizeButtonTemplate: StoryFn<typeof Button> = (args) => {
-  const { children, kind, variant, color, ...restArgs } = args;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { kind, ...restArgs } = args;
 
   return (
-    <Box sx={{ display: "flex", flexDirection: "column", gap: 4 }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
       <Box>
         <Button sx={{ mr: 2 }} {...restArgs} variant="contained" size="small">
           Small
@@ -170,13 +162,30 @@ const SizeButtonTemplate: StoryFn<typeof Button> = (args) => {
         </Button>
       </Box>
       <Box>
-        <Button sx={{ mr: 2 }} {...restArgs} variant="outlined" size="small">
+        <Button
+          sx={{ mr: 2 }}
+          {...restArgs}
+          variant="outlined"
+          size="small"
+          color={args.color === 'error' ? 'primary' : args.color}
+        >
           Small
         </Button>
-        <Button sx={{ mr: 2 }} {...restArgs} variant="outlined" size="medium">
+        <Button
+          sx={{ mr: 2 }}
+          {...restArgs}
+          variant="outlined"
+          size="medium"
+          color={args.color === 'error' ? 'primary' : args.color}
+        >
           Medium
         </Button>
-        <Button {...restArgs} variant="outlined" size="large">
+        <Button
+          {...restArgs}
+          variant="outlined"
+          size="large"
+          color={args.color === 'error' ? 'primary' : args.color}
+        >
           Large
         </Button>
       </Box>
@@ -199,7 +208,7 @@ export const Size = {
   render: SizeButtonTemplate,
   parameters: {
     controls: {
-      include: ["onClick", "disabled", "icon"],
+      include: ['onClick', 'disabled', 'icon'],
     },
   },
 };

package/src/stories/components/Button/ButtonDocs.mdx

@@ -1,12 +1,12 @@
-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 Button from "@/components/Button";
-import * as ButtonStories from "./BasicButton.stories";
-import * as ButtonKindStories from "./Kind.stories";
-import * as ButtonColorStories from "./Color.stories";
-import * as ButtonIconStories from "./IconButton.stories";
+import Button from '@/components/Button';
+import * as ButtonStories from './BasicButton.stories';
+import * as ButtonKindStories from './Kind.stories';
+import * as ButtonColorStories from './Color.stories';
+import * as ButtonIconStories from './IconButton.stories';
 
 <Meta name="Button Docs" of={ButtonStories} />
 
@@ -19,9 +19,9 @@ Buttons allow users to take actions, and make choices, with a single tap.
 ### Basic Button
 
 ```tsx
-import { Button } from "@lunit/design-system";
+import { Button } from '@lunit/design-system';
 // or
-import Button from "@lunit/design-system/Button";
+import Button from '@lunit/design-system/Button';
 
 <Button>Button</Button>;
 ```
@@ -39,11 +39,7 @@ In our design system Figma, we use `variant` and `kind` together, They are the *
 Using the `variant` or `kind` prop, you can change the variant of the Button.<br />
 Default variant(kind) is `contained`.
 
-<Canvas
-  of={ButtonKindStories.Kind}
-  meta={ButtonKindStories}
-  sourceState="none"
-/>
+<Canvas of={ButtonKindStories.Kind} meta={ButtonKindStories} sourceState="none" />
 
 ```tsx
 <Button variant="contained">Text</Button>
@@ -64,11 +60,7 @@ Using the `color` prop, you can change the color of the Button.<br />
 Outline vairant does not have error color state.<br />
 Default color is `primary`.
 
-<Canvas
-  of={ButtonColorStories.Color}
-  meta={ButtonColorStories}
-  sourceState="none"
-/>
+<Canvas of={ButtonColorStories.Color} meta={ButtonColorStories} sourceState="none" />
 
 ```tsx
 // Contained
@@ -116,11 +108,7 @@ Default size is `small`.
 
 If you want to use an icon and text together, you can use the `icon` prop and `children` prop.
 
-<Canvas
-  of={ButtonIconStories.IconWithTextButton}
-  meta={ButtonIconStories}
-  sourceState="none"
-/>
+<Canvas of={ButtonIconStories.IconWithTextButton} meta={ButtonIconStories} sourceState="none" />
 
 ```tsx
 <Button variant="contained" icon={<Bell />}>Contained</Button>
@@ -132,11 +120,7 @@ If you want to use an icon and text together, you can use the `icon` prop and `c
 
 If you want to use only an icon, you can use the `icon` prop.
 
-<Canvas
-  of={ButtonIconStories.IconOnlyButton}
-  meta={ButtonIconStories}
-  sourceState="none"
-/>
+<Canvas of={ButtonIconStories.IconOnlyButton} meta={ButtonIconStories} sourceState="none" />
 
 ```tsx
 <Button variant="contained" icon={<Bell />} />
@@ -149,11 +133,7 @@ If you want to use only an icon, you can use the `icon` prop.
 If you want to disable the button, you can use the `disabled` prop.<br />
 Default disabled is `false`.
 
-<Canvas
-  of={ButtonStories.Disabled}
-  meta={ButtonIconStories}
-  sourceState="none"
-/>
+<Canvas of={ButtonStories.Disabled} meta={ButtonIconStories} sourceState="none" />
 
 ```tsx
 <Button variant="contained" disabled>Text</Button>
@@ -165,14 +145,10 @@ Default disabled is `false`.
 
 If you want to add an event to the button, you can use the `onClick` prop.
 
-<Canvas
-  of={ButtonKindStories.Kind}
-  meta={ButtonKindStories}
-  sourceState="none"
-/>
+<Canvas of={ButtonKindStories.Kind} meta={ButtonKindStories} sourceState="none" />
 
 ```tsx
-<Button onClick={() => console.log("onClick")}>Text</Button>
+<Button onClick={() => console.log('onClick')}>Text</Button>
 ```
 
 ## Reference

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

@@ -1,69 +1,60 @@
-import React from "react";
-import { Box } from "@mui/material";
-import { action } from "@storybook/addon-actions";
+import React from 'react';
+import { Box } from '@mui/material';
+import { action } from 'storybook/actions';
 
-import Button from "@/components/Button";
+import Button from '@/components/Button';
 
-import type { StoryFn, Meta } from "@storybook/react";
+import type { StoryFn, Meta } from '@storybook/react-webpack5';
 
 export default {
-  title: "Components/Button",
+  title: 'Components/Button',
   component: Button,
   args: {
-    children: "Text",
+    children: 'Text',
     disabled: false,
-    size: "small",
-    onClick: action("onClick"),
+    size: 'small',
+    onClick: action('onClick'),
   },
   argTypes: {
     children: {
-      type: "string",
+      type: 'string',
     },
     disabled: {
       control: {
-        type: "boolean",
+        type: 'boolean',
       },
       table: {
-        defaultValue: { summary: "false" },
+        defaultValue: { summary: 'false' },
       },
     },
     size: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["small", "medium", "large"],
+      options: ['small', 'medium', 'large'],
       table: {
-        defaultValue: { summary: "small" },
+        defaultValue: { summary: 'small' },
       },
     },
     onClick: {
-      type: "function",
+      type: 'function',
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["function", undefined],
+      options: ['function', undefined],
       mapping: {
-        function: action("onClick"),
+        function: action('onClick'),
         undefined: undefined,
       },
-      description:
-        "It is a callback function that is called when the button is clicked.",
+      description: 'It is a callback function that is called when the button is clicked.',
     },
   },
   parameters: {
     controls: {
-      include: ["onClick", "children", "size", "disabled", "kind", "variant"],
+      include: ['onClick', 'children', 'size', 'disabled', 'kind', 'variant'],
     },
     pseudo: {
-      hover: [
-        "#hover1",
-        "#hover2",
-        "#hover3",
-        "#hover4",
-        "#hover5",
-        "#hover6",
-        "#hover7",
-      ],
+      hover: ['#hover1', '#hover2', '#hover3', '#hover4', '#hover5', '#hover6', '#hover7'],
     },
     docs: {
       description: {
@@ -75,24 +66,15 @@ export default {
 } as Meta<typeof Button>;
 
 const ColorButtonTemplate: StoryFn<typeof Button> = (args) => {
-  const { children, kind, variant, ...restArgs } = args;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { children, kind, ...restArgs } = args;
   return (
-    <Box sx={{ display: "flex", flexDirection: "column", gap: 4 }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
       <Box>
-        <Button
-          sx={{ mr: 2 }}
-          {...restArgs}
-          variant="contained"
-          color="primary"
-        >
+        <Button sx={{ mr: 2 }} {...restArgs} variant="contained" color="primary">
           {children}
         </Button>
-        <Button
-          sx={{ mr: 2 }}
-          {...restArgs}
-          variant="contained"
-          color="secondary"
-        >
+        <Button sx={{ mr: 2 }} {...restArgs} variant="contained" color="secondary">
           {children}
         </Button>
         <Button {...restArgs} variant="contained" color="error">
@@ -103,12 +85,7 @@ const ColorButtonTemplate: StoryFn<typeof Button> = (args) => {
         <Button sx={{ mr: 2 }} {...restArgs} variant="outlined" color="primary">
           {children}
         </Button>
-        <Button
-          sx={{ mr: 2 }}
-          {...restArgs}
-          variant="outlined"
-          color="secondary"
-        >
+        <Button sx={{ mr: 2 }} {...restArgs} variant="outlined" color="secondary">
           {children}
         </Button>
       </Box>