@lunit/design-system 2.1.0 → 2.2.3

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

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
-import { StoryFn, Meta, StoryObj } from "@storybook/react";
+import React, { useState } from 'react';
+import { StoryFn, Meta, StoryObj } from '@storybook/react-webpack5';
 
-import Dropdown, { DropdownItem } from "@/components/Dropdown";
+import Dropdown, { DropdownItem } from '@/components/Dropdown';
 import {
   Box,
   SelectChangeEvent,
@@ -10,54 +10,54 @@ import {
   TableCell,
   TableHead,
   TableRow,
-} from "@mui/material";
-import Button from "@/components/Button";
+} from '@mui/material';
+import Button from '@/components/Button';
 
 export default {
-  title: "Components/Dropdown",
+  title: 'Components/Dropdown',
   component: Dropdown,
   argTypes: {
     size: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["small", "medium", "large"],
-      description: "The size of the dropdown. Default is medium.",
+      options: ['small', 'medium', 'large'],
+      description: 'The size of the dropdown. Default is medium.',
     },
     select: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["single", "multiple"],
-      description: "The select type of the dropdown. Default is single.",
+      options: ['single', 'multiple'],
+      description: 'The select type of the dropdown. Default is single.',
     },
     error: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
       options: [true, false],
-      description: "The error prop toggles the error state.",
+      description: 'The error prop toggles the error state.',
     },
     disabled: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
       options: [true, false],
-      description: "If true, the text field will be disabled.",
+      description: 'If true, the text field will be disabled.',
     },
   },
 } as Meta<typeof Dropdown>;
 
 const dropdownContent = {
-  test1: "Conquer cancer through AI",
-  test2: "test item 2",
-  test3: "test item 3",
+  test1: 'Conquer cancer through AI',
+  test2: 'test item 2',
+  test3: 'test item 3',
 };
 
 const DropdownExampleTemplate: StoryFn<typeof Dropdown> = (args, context) => {
   const classNameFromGlobal = context.globals.theme;
 
-  const [ex1selectedValue, setEx1SelectedValue] = useState<string>("");
+  const [ex1selectedValue, setEx1SelectedValue] = useState<string>('');
   const handleEx1SelectedValueChange = (event: SelectChangeEvent<unknown>) => {
     const {
       target: { value },
@@ -71,10 +71,10 @@ 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");
+  const [ex3selectedValue, setEx3SelectedValue] = useState<string>('test1');
   const handleEx3SelectedValueChange = (event: SelectChangeEvent<unknown>) => {
     const {
       target: { value },
@@ -91,13 +91,13 @@ const DropdownExampleTemplate: StoryFn<typeof Dropdown> = (args, context) => {
   };
 
   return (
-    <Table sx={{ maxWidth: "1200px" }}>
+    <Table sx={{ maxWidth: '1200px' }}>
       <TableHead>
         <TableRow>
-          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
             Using placeholder Example
           </TableCell>
-          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
             Dropdown with Button Example
           </TableCell>
         </TableRow>
@@ -109,7 +109,7 @@ const DropdownExampleTemplate: StoryFn<typeof Dropdown> = (args, context) => {
             {/* Example 1 (Placeholder with Single select) */}
             <Dropdown
               className={classNameFromGlobal}
-              sx={{ width: "200px" }}
+              sx={{ width: '200px' }}
               value={ex1selectedValue}
               onChange={handleEx1SelectedValueChange}
               displayEmpty // to make the placeholder visible. Refer to the following URL: https://v5.mui.com/material-ui/api/select/#select-prop-displayEmpty
@@ -118,17 +118,14 @@ const DropdownExampleTemplate: StoryFn<typeof Dropdown> = (args, context) => {
                   return (
                     <Box
                       sx={{
-                        color: (theme) =>
-                          theme.palette.lunit_token.core.text_light,
+                        color: (theme) => theme.palette.lunit_token.core.text_light,
                       }}
                     >
                       Placeholder Single
                     </Box>
                   );
                 }
-                return dropdownContent[
-                  selected as keyof typeof dropdownContent
-                ];
+                return dropdownContent[selected as keyof typeof dropdownContent];
               }}
             >
               {Object.entries(dropdownContent).map(([key, text]) => (
@@ -141,7 +138,7 @@ const DropdownExampleTemplate: StoryFn<typeof Dropdown> = (args, context) => {
             {/* Example 2 (Placeholder with Multiple select) */}
             <Dropdown
               className={classNameFromGlobal}
-              sx={{ width: "200px" }}
+              sx={{ width: '200px' }}
               value={ex2selectedValue}
               onChange={handleEx2SelectedValueChange}
               select="multiple"
@@ -151,8 +148,7 @@ const DropdownExampleTemplate: StoryFn<typeof Dropdown> = (args, context) => {
                   return (
                     <Box
                       sx={{
-                        color: (theme) =>
-                          theme.palette.lunit_token.core.text_light,
+                        color: (theme) => theme.palette.lunit_token.core.text_light,
                       }}
                     >
                       Placeholder multiple
@@ -160,11 +156,8 @@ const DropdownExampleTemplate: StoryFn<typeof Dropdown> = (args, context) => {
                   );
                 }
                 return (selected as string[])
-                  .map(
-                    (value) =>
-                      dropdownContent[value as keyof typeof dropdownContent]
-                  )
-                  .join(", ");
+                  .map((value) => dropdownContent[value as keyof typeof dropdownContent])
+                  .join(', ');
               }}
             >
               {Object.entries(dropdownContent).map(([key, text]) => (
@@ -176,7 +169,7 @@ const DropdownExampleTemplate: StoryFn<typeof Dropdown> = (args, context) => {
           </TableCell>
           <TableCell>
             {/* Example 3 (Button dropdown) */}
-            <Box sx={{ position: "relative" }}>
+            <Box sx={{ position: 'relative' }}>
               <Button onClick={handleOpen}>Dropdown Button</Button>
               <Dropdown
                 value={ex3selectedValue}
@@ -185,15 +178,15 @@ const DropdownExampleTemplate: StoryFn<typeof Dropdown> = (args, context) => {
                 onClose={handleClose}
                 onOpen={handleOpen}
                 sx={{
-                  clip: "rect(0 0 0 0)",
-                  clipPath: "inset(50%)",
-                  height: "1px",
-                  overflow: "hidden",
-                  position: "absolute",
+                  clip: 'rect(0 0 0 0)',
+                  clipPath: 'inset(50%)',
+                  height: '1px',
+                  overflow: 'hidden',
+                  position: 'absolute',
                   bottom: 0,
                   left: 0,
-                  whiteSpace: "nowrap",
-                  width: "1px",
+                  whiteSpace: 'nowrap',
+                  width: '1px',
                 }}
               >
                 {Object.entries(dropdownContent).map(([key, text]) => (

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

@@ -1,11 +1,8 @@
-import React, { useState } from "react";
-import { StoryFn, Meta, StoryObj } from "@storybook/react";
+import React, { useState } from 'react';
+import { StoryFn, Meta, StoryObj } from '@storybook/react-webpack5';
+import { within } from '@testing-library/react';
 
-import Dropdown, {
-  DropdownDivider,
-  DropdownItem,
-  DropdownSubtitle,
-} from "@/components/Dropdown";
+import Dropdown, { DropdownDivider, DropdownItem, DropdownSubtitle } from '@/components/Dropdown';
 import {
   Box,
   SelectChangeEvent,
@@ -14,13 +11,13 @@ import {
   TableCell,
   TableHead,
   TableRow,
-} from "@mui/material";
-import Demo from "@lunit/design-system-icons/Demo";
-import ViewfinderT1 from "@lunit/design-system-icons/ViewfinderT1";
-import RulerT2 from "@lunit/design-system-icons/RulerT2";
+} from '@mui/material';
+import Demo from '@lunit/design-system-icons/Demo';
+import ViewfinderT1 from '@lunit/design-system-icons/ViewfinderT1';
+import RulerT2 from '@lunit/design-system-icons/RulerT2';
 
 export default {
-  title: "Components/Dropdown",
+  title: 'Components/Dropdown',
   component: DropdownItem,
   argTypes: {
     leftIcon: {
@@ -28,51 +25,48 @@ 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: "JSX.Element" },
+        defaultValue: { summary: 'undefined' },
+        type: { summary: 'JSX.Element' },
       },
     },
     rightText: {
-      description: "Use this prop when you want to add text.",
+      description: 'Use this prop when you want to add text.',
       table: {
-        defaultValue: { summary: "undefined" },
+        defaultValue: { summary: 'undefined' },
       },
     },
     isFilledStyle: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
       options: [true, false],
-      description: "Only for GNB or few situations of single select type.",
+      description: 'Only for GNB or few situations of single select type.',
       table: {
-        defaultValue: { summary: "false" },
+        defaultValue: { summary: 'false' },
       },
     },
     disabled: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
       options: [true, false],
-      description: "If true, the component will be disabled.",
+      description: 'If true, the component will be disabled.',
       table: {
-        defaultValue: { summary: "false" },
+        defaultValue: { summary: 'false' },
       },
     },
   },
   parameters: {
     controls: {
-      include: ["leftIcon", "rightText", "isFilledStyle", "disabled"],
+      include: ['leftIcon', 'rightText', 'isFilledStyle', 'disabled'],
     },
   },
 } as Meta<typeof DropdownItem>;
 
-const BasicDropdownItemTemplate: StoryFn<typeof DropdownItem> = (
-  args,
-  context
-) => {
+const BasicDropdownItemTemplate: StoryFn<typeof DropdownItem> = (args, context) => {
   const classNameFromGlobal = context.globals.theme;
 
-  const [selectedValue, setSelectedValue] = useState<string>("test1");
+  const [selectedValue, setSelectedValue] = useState<string>('test1');
   const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
     const {
       target: { value },
@@ -86,16 +80,15 @@ const BasicDropdownItemTemplate: StoryFn<typeof DropdownItem> = (
         className={classNameFromGlobal}
         value={selectedValue}
         onChange={handleSelectedValueChange}
-        sx={{ width: "150px" }}
-        open={true}
+        sx={{ width: '150px' }}
       >
-        <DropdownItem value={"test1"} {...args}>
+        <DropdownItem value={'test1'} {...args}>
           Conquer cancer through AI
         </DropdownItem>
-        <DropdownItem value={"test2"} {...args}>
+        <DropdownItem value={'test2'} {...args}>
           test item 2
         </DropdownItem>
-        <DropdownItem value={"test3"} {...args}>
+        <DropdownItem value={'test3'} {...args}>
           test item 3
         </DropdownItem>
       </Dropdown>
@@ -105,47 +98,59 @@ const BasicDropdownItemTemplate: StoryFn<typeof DropdownItem> = (
 
 export const BasicDropdownItem: StoryObj<typeof DropdownItem> = {
   render: BasicDropdownItemTemplate,
-  name: "Basic DropdownItem",
+  name: 'Basic DropdownItem',
   parameters: {
-    chromatic: { disableSnapshot: true },
+    chromatic: {
+      disableSnapshot: true,
+      delay: 500,
+    },
+  },
+  play: async ({ canvasElement, userEvent }) => {
+    // canvasElement를 사용하여 DOM 요소 찾기
+    const canvas = within(canvasElement);
+    const dropdownButton = await canvas.getByRole('combobox');
+
+    if (dropdownButton) {
+      await userEvent.click(dropdownButton);
+
+      // dropdown이 완전히 열릴 때까지 잠시 대기
+      await new Promise((resolve) => setTimeout(resolve, 200));
+    }
   },
 };
 
-const DropdownItemSelectStyleTemplate: StoryFn<typeof DropdownItem> = (
-  args,
-  context
-) => {
+const DropdownItemSelectStyleTemplate: StoryFn<typeof DropdownItem> = (args, context) => {
   const classNameFromGlobal = context.globals.theme;
 
-  const [selectedValue, setSelectedValue] = useState<string>("test1");
+  const [selectedValue, setSelectedValue] = useState<string>('test1');
   const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
     const {
       target: { value },
     } = event;
     setSelectedValue(value as string);
   };
-  const [selectedValue2, setSelectedValue2] = useState<string[]>(["test1"]);
+  const [selectedValue2, setSelectedValue2] = useState<string[]>(['test1']);
   const handleSelectedValueChange2 = (event: SelectChangeEvent<unknown>) => {
     const {
       target: { value },
     } = 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[]),
     );
   };
 
   return (
-    <Table sx={{ maxWidth: "1200px" }}>
+    <Table sx={{ maxWidth: '1200px' }}>
       <TableHead>
         <TableRow>
-          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
             Single select
           </TableCell>
-          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
             Single select(Filled Style)
           </TableCell>
-          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
             Multiple select
           </TableCell>
         </TableRow>
@@ -157,15 +162,15 @@ const DropdownItemSelectStyleTemplate: StoryFn<typeof DropdownItem> = (
               className={classNameFromGlobal}
               value={selectedValue}
               onChange={handleSelectedValueChange}
-              sx={{ width: "150px" }}
+              sx={{ width: '150px' }}
             >
-              <DropdownItem value={"test1"} {...args}>
+              <DropdownItem value={'test1'} {...args}>
                 Conquer cancer through AI
               </DropdownItem>
-              <DropdownItem value={"test2"} {...args}>
+              <DropdownItem value={'test2'} {...args}>
                 test item 2
               </DropdownItem>
-              <DropdownItem value={"test3"} {...args}>
+              <DropdownItem value={'test3'} {...args}>
                 test item 3
               </DropdownItem>
             </Dropdown>
@@ -175,15 +180,15 @@ const DropdownItemSelectStyleTemplate: StoryFn<typeof DropdownItem> = (
               className={classNameFromGlobal}
               value={selectedValue}
               onChange={handleSelectedValueChange}
-              sx={{ width: "150px" }}
+              sx={{ width: '150px' }}
             >
-              <DropdownItem value={"test1"} isFilledStyle {...args}>
+              <DropdownItem value={'test1'} isFilledStyle {...args}>
                 Conquer cancer through AI
               </DropdownItem>
-              <DropdownItem value={"test2"} isFilledStyle {...args}>
+              <DropdownItem value={'test2'} isFilledStyle {...args}>
                 test item 2
               </DropdownItem>
-              <DropdownItem value={"test3"} isFilledStyle {...args}>
+              <DropdownItem value={'test3'} isFilledStyle {...args}>
                 test item 3
               </DropdownItem>
             </Dropdown>
@@ -194,15 +199,15 @@ const DropdownItemSelectStyleTemplate: StoryFn<typeof DropdownItem> = (
               select="multiple"
               value={selectedValue2}
               onChange={handleSelectedValueChange2}
-              sx={{ width: "230px" }}
+              sx={{ width: '230px' }}
             >
-              <DropdownItem value={"test1"} {...args}>
+              <DropdownItem value={'test1'} {...args}>
                 test item1
               </DropdownItem>
-              <DropdownItem value={"test2"} {...args}>
+              <DropdownItem value={'test2'} {...args}>
                 test item 2
               </DropdownItem>
-              <DropdownItem value={"test3"} {...args}>
+              <DropdownItem value={'test3'} {...args}>
                 test item 3
               </DropdownItem>
             </Dropdown>
@@ -215,7 +220,7 @@ const DropdownItemSelectStyleTemplate: StoryFn<typeof DropdownItem> = (
 
 export const DropdownItemSelectStyle: StoryObj<typeof DropdownItem> = {
   render: DropdownItemSelectStyleTemplate,
-  name: "DropdownItem : Style by Select Type",
+  name: 'DropdownItem : Style by Select Type',
   parameters: {
     controls: {
       include: [],
@@ -224,13 +229,10 @@ export const DropdownItemSelectStyle: StoryObj<typeof DropdownItem> = {
   },
 };
 
-const DropdownItemWithIconTextTemplate: StoryFn<typeof DropdownItem> = (
-  args,
-  context
-) => {
+const DropdownItemWithIconTextTemplate: StoryFn<typeof DropdownItem> = (args, context) => {
   const classNameFromGlobal = context.globals.theme;
 
-  const [selectedValue, setSelectedValue] = useState<string>("test1");
+  const [selectedValue, setSelectedValue] = useState<string>('test1');
   const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
     const {
       target: { value },
@@ -244,11 +246,10 @@ const DropdownItemWithIconTextTemplate: StoryFn<typeof DropdownItem> = (
         className={classNameFromGlobal}
         value={selectedValue}
         onChange={handleSelectedValueChange}
-        sx={{ width: "150px" }}
-        open={true}
+        sx={{ width: '150px' }}
       >
         <DropdownItem
-          value={"test1"}
+          value={'test1'}
           leftIcon={<Demo fontSize="small" />}
           rightText="lunit"
           {...args}
@@ -256,7 +257,7 @@ const DropdownItemWithIconTextTemplate: StoryFn<typeof DropdownItem> = (
           Conquer cancer through AI
         </DropdownItem>
         <DropdownItem
-          value={"test2"}
+          value={'test2'}
           leftIcon={<RulerT2 fontSize="small" />}
           rightText="design"
           {...args}
@@ -264,7 +265,7 @@ const DropdownItemWithIconTextTemplate: StoryFn<typeof DropdownItem> = (
           test item 2
         </DropdownItem>
         <DropdownItem
-          value={"test3"}
+          value={'test3'}
           leftIcon={<ViewfinderT1 fontSize="small" />}
           rightText="system"
           {...args}
@@ -278,22 +279,34 @@ const DropdownItemWithIconTextTemplate: StoryFn<typeof DropdownItem> = (
 
 export const DropdownItemWithIconText: StoryObj<typeof DropdownItem> = {
   render: DropdownItemWithIconTextTemplate,
-  name: "DropdownItem : With Left Icon, Right Text",
+  name: 'DropdownItem : With Left Icon, Right Text',
   parameters: {
     controls: {
       include: [],
     },
-    chromatic: { disableSnapshot: true },
+    chromatic: {
+      disableSnapshot: true,
+      delay: 500,
+    },
+  },
+  play: async ({ canvasElement, userEvent }) => {
+    // canvasElement를 사용하여 DOM 요소 찾기
+    const canvas = within(canvasElement);
+    const dropdownButton = await canvas.getByRole('combobox');
+
+    if (dropdownButton) {
+      await userEvent.click(dropdownButton);
+
+      // dropdown이 완전히 열릴 때까지 잠시 대기
+      await new Promise((resolve) => setTimeout(resolve, 200));
+    }
   },
 };
 
-const DropdownItemDividerSubtitleTemplate: StoryFn<typeof DropdownItem> = (
-  args,
-  context
-) => {
+const DropdownItemDividerSubtitleTemplate: StoryFn<typeof DropdownItem> = (args, context) => {
   const classNameFromGlobal = context.globals.theme;
 
-  const [selectedValue, setSelectedValue] = useState<string>("test1");
+  const [selectedValue, setSelectedValue] = useState<string>('test1');
   const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
     const {
       target: { value },
@@ -307,40 +320,27 @@ const DropdownItemDividerSubtitleTemplate: StoryFn<typeof DropdownItem> = (
         className={classNameFromGlobal}
         value={selectedValue}
         onChange={handleSelectedValueChange}
-        sx={{ width: "150px" }}
-        open={true}
+        sx={{ width: '150px' }}
       >
         <DropdownSubtitle title="Subtitle 1" />
-        <DropdownItem
-          value={"test1"}
-          leftIcon={<Demo fontSize="small" />}
-          {...args}
-        >
+        <DropdownItem value={'test1'} leftIcon={<Demo fontSize="small" />} {...args}>
           Conquer cancer through AI
         </DropdownItem>
-        <DropdownItem
-          value={"test2"}
-          leftIcon={<RulerT2 fontSize="small" />}
-          {...args}
-        >
+        <DropdownItem value={'test2'} leftIcon={<RulerT2 fontSize="small" />} {...args}>
           test item 2
         </DropdownItem>
-        <DropdownItem
-          value={"test3"}
-          leftIcon={<ViewfinderT1 fontSize="small" />}
-          {...args}
-        >
+        <DropdownItem value={'test3'} leftIcon={<ViewfinderT1 fontSize="small" />} {...args}>
           test item 3
         </DropdownItem>
         <DropdownDivider />
         <DropdownSubtitle title="Subtitle 2" />
-        <DropdownItem value={"test4"} {...args}>
+        <DropdownItem value={'test4'} {...args}>
           Example 1
         </DropdownItem>
-        <DropdownItem value={"test5"} {...args}>
+        <DropdownItem value={'test5'} {...args}>
           Example 2
         </DropdownItem>
-        <DropdownItem value={"test6"} {...args}>
+        <DropdownItem value={'test6'} {...args}>
           Example 3
         </DropdownItem>
       </Dropdown>
@@ -350,11 +350,26 @@ const DropdownItemDividerSubtitleTemplate: StoryFn<typeof DropdownItem> = (
 
 export const DropdownItemDividerSubtitle: StoryObj<typeof DropdownItem> = {
   render: DropdownItemDividerSubtitleTemplate,
-  name: "DropdownItem : Divider, Subtitle",
+  name: 'DropdownItem : Divider, Subtitle',
   parameters: {
     controls: {
       include: [],
     },
-    chromatic: { disableSnapshot: true },
+    chromatic: {
+      disableSnapshot: true,
+      delay: 500,
+    },
+  },
+  play: async ({ canvasElement, userEvent }) => {
+    // canvasElement를 사용하여 DOM 요소 찾기
+    const canvas = within(canvasElement);
+    const dropdownButton = await canvas.getByRole('combobox');
+
+    if (dropdownButton) {
+      await userEvent.click(dropdownButton);
+
+      // dropdown이 완전히 열릴 때까지 잠시 대기
+      await new Promise((resolve) => setTimeout(resolve, 200));
+    }
   },
 };