@lunit/design-system 2.1.0 → 2.2.0

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

@@ -1,11 +1,11 @@
 import React from "react";
 import { Box, Typography } from "@mui/material";
-import { StoryFn, Meta } from "@storybook/react";
+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 { action } from "storybook/actions";
 
 export default {
   title: "Components/Alert",
@@ -24,7 +24,7 @@ export default {
       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.`,
     },

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

@@ -1,10 +1,10 @@
 import React from "react";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Box } from "@mui/material";
 
 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",

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

@@ -1,4 +1,4 @@
-import { Canvas, Stories, Controls, Meta, Story } from "@storybook/blocks";
+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";
 

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

@@ -1,10 +1,10 @@
 import React from "react";
 import { Box } from "@mui/material";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 
 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",

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

@@ -1,10 +1,10 @@
 import React from "react";
 import Bell from "@lunit/design-system-icons/Bell";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 
 import Button from "@/components/Button";
 
-import type { StoryFn, Meta } from "@storybook/react";
+import type { StoryFn, Meta } from "@storybook/react-webpack5";
 import { Box } from "@mui/material";
 
 export default {

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

@@ -6,11 +6,11 @@ import {
   TableBody,
   TableCell,
 } from "@mui/material";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 
 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",

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

@@ -1,9 +1,9 @@
 import React, { useState, useEffect } from "react";
 import { Box, FormControlLabel } from "@mui/material";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import Checkbox from "@/components/Checkbox";
 import FormLabel from "@/components/FormLabel";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react-webpack5";
 
 export default {
   title: "Components/Checkbox",

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

@@ -1,4 +1,4 @@
-import { Canvas, Stories, Controls, Meta, Story } from "@storybook/blocks";
+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";
 

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

@@ -1,6 +1,6 @@
 import React from "react";
-import { Meta } from "@storybook/react";
-import { action } from "@storybook/addon-actions";
+import { Meta } from "@storybook/react-webpack5";
+import { action } from "storybook/actions";
 import { Box } from "@mui/system";
 
 import Chip from "@/components/Chip";

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

@@ -1,4 +1,4 @@
-import { Canvas, Stories, Controls, Meta, Story } from "@storybook/blocks";
+import { Canvas, Stories, Controls, Meta, Story } from "@storybook/addon-docs/blocks";
 import { Error } from "@lunit/design-system-icons";
 
 import Chip from "@/components/Chip";

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryFn, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react-webpack5";
 
 import DataTable from "@/components/DataTable";
 

package/src/stories/components/DatePicker/DatePicker.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { StoryFn, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react-webpack5";
 
 import DatePicker from "@/components/DatePicker";
 

package/src/stories/components/Dialog/Dialog.stories.tsx

@@ -5,12 +5,11 @@ import Error from "@lunit/design-system-icons/Error";
 import Button from "@/components/Button";
 import Dialog from "@/components/Dialog";
 
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj } from "@storybook/react-webpack5";
 
 const meta: Meta<typeof Dialog> = {
   title: "components/Dialog",
   component: Dialog,
-  tags: ["autodocs"],
   parameters: {
     docs: { disable: true, hidden: true },
   },
@@ -30,7 +29,9 @@ export const PassiveModal: Story = {
 
     return (
       <div style={{ width: "100vw", height: "100vh" }}>
-        <div ref={(ref) => setTarget(ref)} />
+        <div ref={ref => {
+          setTarget(ref);
+        }} />
         <Dialog
           className={classNameFromGlobal}
           isOpen={Boolean(target)}
@@ -54,7 +55,9 @@ export const ActionModal: Story = {
 
     return (
       <div style={{ width: "100vw", height: "100vh" }}>
-        <div ref={(ref) => setTarget(ref)} />
+        <div ref={ref => {
+          setTarget(ref);
+        }} />
         <Dialog
           className={classNameFromGlobal}
           isOpen={Boolean(target)}
@@ -148,7 +151,9 @@ export const SmallFalse: Story = {
 
     return (
       <div style={{ width: "100vw", height: "100vh" }}>
-        <div ref={(ref) => setTarget(ref)} />
+        <div ref={ref => {
+          setTarget(ref);
+        }} />
         <Dialog
           className={classNameFromGlobal}
           isOpen={Boolean(target)}
@@ -173,7 +178,9 @@ export const WithTitleIcon: Story = {
 
     return (
       <div style={{ width: "100vw", height: "100vh" }}>
-        <div ref={(ref) => setTarget(ref)} />
+        <div ref={ref => {
+          setTarget(ref);
+        }} />
         <Dialog
           className={classNameFromGlobal}
           isOpen={Boolean(target)}
@@ -218,7 +225,9 @@ export const WithCustomStyle: Story = {
 
     return (
       <div style={{ width: "100vw", height: "100vh" }}>
-        <div ref={(ref) => setTarget(ref)} />
+        <div ref={ref => {
+          setTarget(ref);
+        }} />
         <Dialog
           className={classNameFromGlobal}
           isOpen={Boolean(target)}
@@ -249,7 +258,9 @@ export const WithScroll: Story = {
 
     return (
       <div style={{ width: "100vw", height: "100vh" }}>
-        <div ref={(ref) => setTarget(ref)} />
+        <div ref={ref => {
+          setTarget(ref);
+        }} />
         <Dialog
           className={classNameFromGlobal}
           isOpen={Boolean(target)}

package/src/stories/components/Dialog/DialogDocs.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Stories, Controls, Meta, Story } from "@storybook/blocks";
+import { Canvas, Stories, Controls, Meta, Story } from "@storybook/addon-docs/blocks";
 import { Error } from "@lunit/design-system-icons";
 
 import Dialog from "@/components/Dialog";

package/src/stories/components/Dropdown/Dropdown.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { StoryFn, Meta, StoryObj } from "@storybook/react";
+import { StoryFn, Meta, StoryObj } from "@storybook/react-webpack5";
 
 import Dropdown, { DropdownItem } from "@/components/Dropdown";
 import { Box, SelectChangeEvent } from "@mui/material";
@@ -51,7 +51,7 @@ const BasicDropdownTemplate: StoryFn<typeof Dropdown> = (args, context) => {
     } = event;
     setSelectedValue(
       // On autofill we get a stringified value.
-      typeof value === "string" ? value.split(",") : (value as string[])
+      typeof value === "string" ? value.split(",") : (value as string[]),
     );
   };
 
@@ -91,7 +91,7 @@ const SizeTemplate: StoryFn<typeof Dropdown> = (args, context) => {
     } = event;
     setSelectedValue(
       // On autofill we get a stringified value.
-      typeof value === "string" ? value.split(",") : (value as string[])
+      typeof value === "string" ? value.split(",") : (value as string[]),
     );
   };
 
@@ -170,7 +170,7 @@ const SelectTypeTemplate: StoryFn<typeof Dropdown> = (args, context) => {
     } = event;
     setSelectedValue2(
       // On autofill we get a stringified value.
-      typeof value === "string" ? value.split(",") : (value as string[])
+      typeof value === "string" ? value.split(",") : (value as string[]),
     );
   };
 
@@ -229,7 +229,7 @@ const ErrorTemplate: StoryFn<typeof Dropdown> = (args, context) => {
     } = event;
     setSelectedValue(
       // On autofill we get a stringified value.
-      typeof value === "string" ? value.split(",") : (value as string[])
+      typeof value === "string" ? value.split(",") : (value as string[]),
     );
   };
 
@@ -275,7 +275,7 @@ const DisabledTemplate: StoryFn<typeof Dropdown> = (args, context) => {
     } = event;
     setSelectedValue(
       // On autofill we get a stringified value.
-      typeof value === "string" ? value.split(",") : (value as string[])
+      typeof value === "string" ? value.split(",") : (value as string[]),
     );
   };
 

package/src/stories/components/Dropdown/DropdownExamples.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { StoryFn, Meta, StoryObj } from "@storybook/react";
+import { StoryFn, Meta, StoryObj } from "@storybook/react-webpack5";
 
 import Dropdown, { DropdownItem } from "@/components/Dropdown";
 import {
@@ -71,7 +71,7 @@ const DropdownExampleTemplate: StoryFn<typeof Dropdown> = (args, context) => {
     } = event;
     setEx2SelectedValue(
       // On autofill we get a stringified value.
-      typeof value === "string" ? value.split(",") : (value as string[])
+      typeof value === "string" ? value.split(",") : (value as string[]),
     );
   };
   const [ex3selectedValue, setEx3SelectedValue] = useState<string>("test1");
@@ -162,7 +162,7 @@ const DropdownExampleTemplate: StoryFn<typeof Dropdown> = (args, context) => {
                 return (selected as string[])
                   .map(
                     (value) =>
-                      dropdownContent[value as keyof typeof dropdownContent]
+                      dropdownContent[value as keyof typeof dropdownContent],
                   )
                   .join(", ");
               }}

package/src/stories/components/Dropdown/DropdownItem.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from "react";
-import { StoryFn, Meta, StoryObj } from "@storybook/react";
+import { StoryFn, Meta, StoryObj } from "@storybook/react-webpack5";
 
 import Dropdown, {
   DropdownDivider,
@@ -68,7 +68,7 @@ export default {
 
 const BasicDropdownItemTemplate: StoryFn<typeof DropdownItem> = (
   args,
-  context
+  context,
 ) => {
   const classNameFromGlobal = context.globals.theme;
 
@@ -113,7 +113,7 @@ export const BasicDropdownItem: StoryObj<typeof DropdownItem> = {
 
 const DropdownItemSelectStyleTemplate: StoryFn<typeof DropdownItem> = (
   args,
-  context
+  context,
 ) => {
   const classNameFromGlobal = context.globals.theme;
 
@@ -131,7 +131,7 @@ const DropdownItemSelectStyleTemplate: StoryFn<typeof DropdownItem> = (
     } = event;
     setSelectedValue2(
       // On autofill we get a stringified value.
-      typeof value === "string" ? value.split(",") : (value as string[])
+      typeof value === "string" ? value.split(",") : (value as string[]),
     );
   };
 
@@ -226,7 +226,7 @@ export const DropdownItemSelectStyle: StoryObj<typeof DropdownItem> = {
 
 const DropdownItemWithIconTextTemplate: StoryFn<typeof DropdownItem> = (
   args,
-  context
+  context,
 ) => {
   const classNameFromGlobal = context.globals.theme;
 
@@ -289,7 +289,7 @@ export const DropdownItemWithIconText: StoryObj<typeof DropdownItem> = {
 
 const DropdownItemDividerSubtitleTemplate: StoryFn<typeof DropdownItem> = (
   args,
-  context
+  context,
 ) => {
   const classNameFromGlobal = context.globals.theme;
 

package/src/stories/components/SelectControl/RadioGroup.stories.tsx

@@ -2,7 +2,7 @@ import React, { useEffect } from "react";
 import Radio from "@/components/Radio";
 import RadioGroup from "@/components/RadioGroup";
 import FormLabel from "@/components/FormLabel";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react-webpack5";
 
 export default {
   title: "Components/Radio",

package/src/stories/components/SelectControl/RadioStatus.stories.tsx

@@ -8,7 +8,7 @@ import {
   TableCell,
 } from "@mui/material";
 import Radio from "@/components/Radio";
-import { Meta, StoryFn } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react-webpack5";
 
 export default {
   title: "Components/Radio",

package/src/stories/components/SelectControl/Toggle.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { StoryFn, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react-webpack5";
 import Toggle from "@/components/Toggle/Toggle";
 import {
   Box,
@@ -11,7 +11,7 @@ import {
   TextField,
 } from "@mui/material";
 import FormLabel from "@/components/FormLabel";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 
 export default {
   title: "Components/Toggle",

package/src/stories/components/TextField/BasicTextField.stories.tsx

@@ -4,7 +4,7 @@ import { Bell } from "@lunit/design-system-icons";
 
 import TextField from "@/components/TextField/TextField";
 
-import type { StoryObj, Meta, StoryFn } from "@storybook/react";
+import type { StoryObj, Meta, StoryFn } from "@storybook/react-webpack5";
 
 export default {
   title: "Components/TextField",
@@ -19,40 +19,33 @@ export default {
   },
   argTypes: {
     multiline: {
-      control: {
-        type: "radio",
-      },
+      control: { type: "radio" },
       options: [true, false],
       description:
         "The multiline prop transforms the text field into a TextareaAutosize element.",
     },
     error: {
-      control: {
-        type: "radio",
-      },
+      control: { type: "radio" },
       options: [true, false],
       description:
         "The error prop toggles the error state. The helperText prop can then be used to provide feedback to the user about the error.",
     },
     disabled: {
-      control: {
-        type: "radio",
-      },
+      control: { type: "radio" },
       options: [true, false],
       description: "If true, the text field will be disabled.",
       table: {
-        defaultValue: { summary: false },
-        type: { summary: [true, false] },
+        defaultValue: { summary: "false" },
+        type: { summary: "boolean" },
       },
     },
     size: {
-      control: {
-        type: "radio",
-      },
+      control: { type: "radio" },
+      options: ["small", "medium", "large"],
       description: "The size of the text field.",
       table: {
         defaultValue: { summary: "small" },
-        type: { summary: ["small", "medium", "large"] },
+        type: { summary: "string" },
       },
     },
     placeholder: {

package/src/stories/components/TextField/TextFieldDocs.mdx

@@ -1,4 +1,4 @@
-import { Canvas, Stories, Controls, Meta, Story } from "@storybook/blocks";
+import { Canvas, Stories, Controls, Meta, Story } from "@storybook/addon-docs/blocks";
 import Box from "@mui/material/Box";
 
 import TextField from "@/components/TextField";

package/src/stories/components/TextField/TextFieldMulti.stories.tsx

@@ -10,7 +10,7 @@ import {
 
 import TextField from "@/components/TextField/TextField";
 
-import type { StoryFn, Meta } from "@storybook/react";
+import type { StoryFn, Meta } from "@storybook/react-webpack5";
 
 export default {
   title: "Components/TextField",
@@ -24,24 +24,21 @@ export default {
   },
   argTypes: {
     disabled: {
-      control: {
-        type: "radio",
-      },
+      control: { type: "radio" },
       options: [true, false],
       description: "If true, the text field will be disabled.",
       table: {
-        defaultValue: { summary: false },
-        type: { summary: [true, false] },
+        defaultValue: { summary: "false" },
+        type: { summary: "boolean" },
       },
     },
     size: {
-      control: {
-        type: "radio",
-      },
+      control: { type: "radio" },
+      options: ["small", "medium", "large"],
       description: "The size of the text field.",
       table: {
         defaultValue: { summary: "small" },
-        type: { summary: ["small", "medium", "large"] },
+        type: { summary: "string" },
       },
     },
     rows: {
@@ -50,7 +47,7 @@ export default {
         \n the rows default value is undefined.`,
       table: {
         defaultValue: { summary: "undefined" },
-        type: { summary: ["number", "string", "undefined"] },
+        type: { summary: "number" },
       },
     },
     placeholder: {

package/src/stories/components/TextField/TextFieldSingle.stories.tsx

@@ -7,12 +7,12 @@ import {
   TableHead,
   TableRow,
 } from "@mui/material";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import { Bell } from "@lunit/design-system-icons";
 
 import TextField from "@/components/TextField/TextField";
 
-import type { StoryFn, Meta } from "@storybook/react";
+import type { StoryFn, Meta } from "@storybook/react-webpack5";
 
 export default {
   title: "Components/TextField",
@@ -26,24 +26,21 @@ export default {
   },
   argTypes: {
     disabled: {
-      control: {
-        type: "radio",
-      },
+      control: { type: "radio" },
       options: [true, false],
       description: "If true, the text field will be disabled.",
       table: {
-        defaultValue: { summary: false },
-        type: { summary: [true, false] },
+        defaultValue: { summary: "false" },
+        type: { summary: "boolean" },
       },
     },
     size: {
-      control: {
-        type: "radio",
-      },
+      control: { type: "radio" },
+      options: ["small", "medium", "large"],
       description: "The size of the text field.",
       table: {
         defaultValue: { summary: "small" },
-        type: { summary: ["small", "medium", "large"] },
+        type: { summary: "string" },
       },
     },
     placeholder: {

package/src/stories/components/TextField/TextFieldSize.stories.tsx

@@ -10,7 +10,7 @@ import {
 
 import TextField from "@/components/TextField/TextField";
 
-import type { StoryFn, Meta } from "@storybook/react";
+import type { StoryFn, Meta } from "@storybook/react-webpack5";
 
 export default {
   title: "Components/TextField",
@@ -23,22 +23,21 @@ export default {
   },
   argTypes: {
     disabled: {
-      control: {
-        type: "radio",
-      },
+      control: { type: "radio" },
       options: [true, false],
       description: "If true, the text field will be disabled.",
       table: {
-        defaultValue: { summary: false },
-        type: { summary: [true, false] },
+        defaultValue: { summary: "false" },
+        type: { summary: "boolean" },
       },
     },
     size: {
-      control: false,
+      control: { type: "radio" },
+      options: ["small", "medium", "large"],
       description: "The size of the text field.",
       table: {
         defaultValue: { summary: "small" },
-        type: { summary: ["small", "medium", "large"] },
+        type: { summary: "string" },
       },
     },
     placeholder: {

package/src/stories/components/Toast/Toast.stories.tsx

@@ -1,14 +1,17 @@
 import React from "react";
-import { StoryFn, Meta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react-webpack5";
 import { Box } from "@mui/material";
 
 import Toast from "@/components/Toast";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import Button from "@/components/Button";
 
 export default {
   title: "Components/Toast",
   component: Toast,
+  args: {
+    onClose: action("onClose"),
+  },
   argTypes: {
     severity: {
       control: "radio",
@@ -30,7 +33,9 @@ export default {
       control: {
         type: "select",
       },
-      defaultValue: "function",
+      table: {
+        defaultValue: { summary: "function" },
+      },
       options: ["function", undefined],
       mapping: {
         function: action("onClose"),