@lunit/design-system 2.0.2 → 2.2.0

package/src/stories/GettingStarted.mdx

@@ -1,4 +1,4 @@
-import {  Meta } from '@storybook/blocks';
+import { Meta } from "@storybook/addon-docs/blocks";
 
 <Meta title="Getting Started/Overview" />
 
@@ -17,9 +17,9 @@ Material UI is peer dependency of Lunit Design System Library. You need to insta
 ```json
 "peerDependencies": {
   "@mui/material": "^5.0.0",
-  "@types/react": "^17.0.0 || ^18.0.0",
-  "react": "^17.0.0 || ^18.0.0",
-  "react-dom": "^17.0.0 || ^18.0.0"
+  "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+  "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
 }
 ```
 
@@ -30,12 +30,9 @@ Material UI is peer dependency of Lunit Design System Library. You need to insta
 This library is based on Material UI's themes feature, so it imports themes and puts them into the provider. We also recommend using the `CssBaseline` component.
 
 ```tsx
-import {
-  createTheme,
-  ThemeProvider,
-} from '@mui/material/styles';
-import CssBaseline from '@mui/material/CssBaseline';
-import { themeOptions } from '@lunit/design-system';
+import { createTheme, ThemeProvider } from "@mui/material/styles";
+import CssBaseline from "@mui/material/CssBaseline";
+import { themeOptions } from "@lunit/design-system";
 
 const theme = createTheme(themeOptions);
 
@@ -61,11 +58,8 @@ This library uses the `Pretendard` font-family by default. The [Pretendard font]
 const theme = createTheme(
   deepmerge(themeOptions, {
     typography: {
-      fontFamily: [
-        'Pretendard Variable',
-        'sans-serif',
-      ]
-    }
+      fontFamily: ["Pretendard Variable", "sans-serif"],
+    },
   })
 );
 ```
@@ -85,4 +79,4 @@ This library provides a variety of components that are used in Lunit's products.
 ## Support
 
 - Github: [Create a new issue](https://github.com/lunit-io/design-system/issues/new)
-- Slack: #tf_design_system
+- Slack: #tf_design_system

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";
@@ -281,3 +281,21 @@ export const ContainedWithDeleteAndThumbnail = {
 
   name: "Kind(Variant): Contained with Thumbnail and Deletable",
 };
+
+export const Multiline = {
+  render: () => (
+    <Box sx={{ width: 100 }}>
+      <Chip
+        sx={{
+          height: "auto",
+          "& .MuiChip-label": {
+            display: "block",
+            whiteSpace: "normal",
+          },
+        }}
+        label="This is a chip that has multiple lines."
+      />
+      <Chip label="This is a chip that has ellipsis." />
+    </Box>
+  ),
+};

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";
@@ -120,6 +120,26 @@ The hover/pressed effects are only applied to the delete icon. <br />
 <Chip label="label@lunit.io" onDelete={() => console.log("onDelete")} thumbnail="W as initial" />
 ````
 
+### 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",
+    },
+  }}
+  label="This is a chip that has multiple lines."
+/>
+<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,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";
@@ -41,24 +41,16 @@ If it is set to `false`, the Dialog will not be rendered in the DOM.
 </Dialog>
 ```
 
-### Dismiss(onClose, enableBackButtonClose, enableBackdropClick)
+### Dismiss(onClose, enableBackdropClick)
 
 The `onClose` prop is used to close the Dialog. You can pass a function to the prop to close the Dialog. <br />
-If the `enableBackButtonClick` prop is set to `true`, the Dialog will be closed when the back button(escape/backspace key) is pressed. <br />
 If the `enableBackdropClose` prop is set to `true`, the Dialog will be closed when the backdrop(outside of the dialog area) is clicked. <br />
-
-<br />
-The `enableBackButtonClick` is awalys `true` in Passive Modal, but it is optional
-in Action Modal. <br />
-The `enableBackdropClose` is awalys `true` only in Passive Modal.
+The `enableBackdropClose` is always `true` only in Passive Modal.
 
 ```tsx
 <Dialog isOpen={true} onClose={close} type="passive" title="Title area">
   Lorem Ipsum is simply dummy text of the a printing and typesetting industry
 </Dialog>
-<Dialog isOpen={true} onClose={close} type="action" title="Title area" actions={actionsChildren} enableBackButtonClick>
-  Lorem Ipsum is simply dummy text of the a printing and typesetting industry
-</Dialog>
 ```
 
 ### Type

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

@@ -1,21 +1,310 @@
-import React from "react";
-import { StoryFn, Meta } from "@storybook/react";
+import React, { useState } from "react";
+import { StoryFn, Meta, StoryObj } from "@storybook/react-webpack5";
 
-import Dropdown from "@/components/Dropdown";
+import Dropdown, { DropdownItem } from "@/components/Dropdown";
+import { Box, SelectChangeEvent } from "@mui/material";
 
 export default {
   title: "Components/Dropdown",
   component: Dropdown,
+  argTypes: {
+    size: {
+      control: {
+        type: "radio",
+      },
+      options: ["small", "medium", "large"],
+      description: "The size of the dropdown. Default is medium.",
+    },
+    select: {
+      control: {
+        type: "radio",
+      },
+      options: ["single", "multiple"],
+      description: "The select type of the dropdown. Default is single.",
+    },
+    error: {
+      control: {
+        type: "radio",
+      },
+      options: [true, false],
+      description: "The error prop toggles the error state.",
+    },
+    disabled: {
+      control: {
+        type: "radio",
+      },
+      options: [true, false],
+      description: "If true, the text field will be disabled.",
+    },
+  },
 } as Meta<typeof Dropdown>;
 
-const Template: StoryFn<typeof Dropdown> = () => <Dropdown />;
+const BasicDropdownTemplate: StoryFn<typeof Dropdown> = (args, context) => {
+  const classNameFromGlobal = context.globals.theme;
 
-export const SingleSelect = {
-  render: Template,
+  // In a single select, selectedValue can be used as a string type instead of an array.
+  // In the current Storybook Template, we use selectedValue as a string[] in order to also use it as multiple depending on the control selection.
+  const [selectedValue, setSelectedValue] = useState<string[]>(["test1"]);
+  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
+    const {
+      target: { value },
+    } = event;
+    setSelectedValue(
+      // On autofill we get a stringified value.
+      typeof value === "string" ? value.split(",") : (value as string[]),
+    );
+  };
+
+  return (
+    <Box>
+      <Dropdown
+        className={classNameFromGlobal}
+        value={selectedValue}
+        onChange={handleSelectedValueChange}
+        sx={{ width: "150px" }}
+        {...args}
+      >
+        <DropdownItem value={"test1"}>Conquer cancer through AI</DropdownItem>
+        <DropdownItem value={"test2"}>test item 2</DropdownItem>
+        <DropdownItem value={"test3"}>test item 3</DropdownItem>
+      </Dropdown>
+    </Box>
+  );
 };
-export const MultiSelect = {
-  render: Template,
+
+export const BasicDropdown: StoryObj<typeof Dropdown> = {
+  render: BasicDropdownTemplate,
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
 };
-export const NoSelect = {
-  render: Template,
+
+const SizeTemplate: StoryFn<typeof Dropdown> = (args, context) => {
+  const classNameFromGlobal = context.globals.theme;
+
+  // In a single select, selectedValue can be used as a string type instead of an array.
+  // In the current Storybook Template, we use selectedValue as a string[] in order to also use it as multiple depending on the control selection.
+  const [selectedValue, setSelectedValue] = useState<string[]>(["test1"]);
+  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
+    const {
+      target: { value },
+    } = event;
+    setSelectedValue(
+      // On autofill we get a stringified value.
+      typeof value === "string" ? value.split(",") : (value as string[]),
+    );
+  };
+
+  return (
+    <Box sx={{ display: "flex", alignItems: "center", gap: 4 }}>
+      <Box>
+        <Dropdown
+          className={classNameFromGlobal}
+          value={selectedValue}
+          onChange={handleSelectedValueChange}
+          size="small"
+          sx={{ width: "150px" }}
+          {...args}
+        >
+          <DropdownItem value={"test1"}>Small item 1</DropdownItem>
+          <DropdownItem value={"test2"}>Small item 2</DropdownItem>
+          <DropdownItem value={"test3"}>Small item 3</DropdownItem>
+        </Dropdown>
+      </Box>
+      <Box>
+        <Dropdown
+          className={classNameFromGlobal}
+          value={selectedValue}
+          onChange={handleSelectedValueChange}
+          size="medium"
+          sx={{ width: "150px" }}
+          {...args}
+        >
+          <DropdownItem value={"test1"}>Medium item 1</DropdownItem>
+          <DropdownItem value={"test2"}>Medium item 2</DropdownItem>
+          <DropdownItem value={"test3"}>Medium item 3</DropdownItem>
+        </Dropdown>
+      </Box>
+      <Box>
+        <Dropdown
+          className={classNameFromGlobal}
+          value={selectedValue}
+          onChange={handleSelectedValueChange}
+          size="large"
+          sx={{ width: "150px" }}
+          {...args}
+        >
+          <DropdownItem value={"test1"}>Large item 1</DropdownItem>
+          <DropdownItem value={"test2"}>Large item 2</DropdownItem>
+          <DropdownItem value={"test3"}>Large item 3</DropdownItem>
+        </Dropdown>
+      </Box>
+    </Box>
+  );
+};
+
+export const Size: StoryObj<typeof Dropdown> = {
+  render: SizeTemplate,
+  parameters: {
+    controls: {
+      include: ["select", "error", "disabled"],
+    },
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+const SelectTypeTemplate: StoryFn<typeof Dropdown> = (args, context) => {
+  const classNameFromGlobal = context.globals.theme;
+
+  const [selectedValue, setSelectedValue] = useState<string>("single1");
+  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
+    const {
+      target: { value },
+    } = event;
+    setSelectedValue(value as string);
+  };
+  const [selectedValue2, setSelectedValue2] = useState<string[]>(["multiple1"]);
+  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[]),
+    );
+  };
+
+  return (
+    <Box sx={{ display: "flex", alignItems: "center", gap: 4 }}>
+      <Box>
+        <Dropdown
+          className={classNameFromGlobal}
+          value={selectedValue}
+          onChange={handleSelectedValueChange}
+          sx={{ width: "150px" }}
+          {...args}
+        >
+          <DropdownItem value={"single1"}>Single item 1</DropdownItem>
+          <DropdownItem value={"single2"}>Single item 2</DropdownItem>
+          <DropdownItem value={"single3"}>Single item 3</DropdownItem>
+        </Dropdown>
+      </Box>
+      <Box>
+        <Dropdown
+          className={classNameFromGlobal}
+          value={selectedValue2}
+          onChange={handleSelectedValueChange2}
+          select="multiple"
+          sx={{ width: "200px" }}
+          {...args}
+        >
+          <DropdownItem value={"multiple1"}>Multiple item 1</DropdownItem>
+          <DropdownItem value={"multiple2"}>Multiple item 2</DropdownItem>
+          <DropdownItem value={"multiple3"}>Multiple item 3</DropdownItem>
+        </Dropdown>
+      </Box>
+    </Box>
+  );
+};
+
+export const SelectType: StoryObj<typeof Dropdown> = {
+  render: SelectTypeTemplate,
+  parameters: {
+    controls: {
+      include: ["size", "error", "disabled"],
+    },
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+const ErrorTemplate: StoryFn<typeof Dropdown> = (args, context) => {
+  const classNameFromGlobal = context.globals.theme;
+
+  // In a single select, selectedValue can be used as a string type instead of an array.
+  // In the current Storybook Template, we use selectedValue as a string[] in order to also use it as multiple depending on the control selection.
+  const [selectedValue, setSelectedValue] = useState<string[]>(["test1"]);
+  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
+    const {
+      target: { value },
+    } = event;
+    setSelectedValue(
+      // On autofill we get a stringified value.
+      typeof value === "string" ? value.split(",") : (value as string[]),
+    );
+  };
+
+  return (
+    <Box sx={{ display: "flex", alignItems: "center", gap: 4 }}>
+      <Box>
+        <Dropdown
+          className={classNameFromGlobal}
+          value={selectedValue}
+          onChange={handleSelectedValueChange}
+          error
+          sx={{ width: "150px" }}
+          {...args}
+        >
+          <DropdownItem value={"test1"}>Small item 1</DropdownItem>
+          <DropdownItem value={"test2"}>Small item 2</DropdownItem>
+          <DropdownItem value={"test3"}>Small item 3</DropdownItem>
+        </Dropdown>
+      </Box>
+    </Box>
+  );
+};
+
+export const Error: StoryObj<typeof Dropdown> = {
+  render: ErrorTemplate,
+  parameters: {
+    controls: {
+      include: [],
+    },
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+const DisabledTemplate: StoryFn<typeof Dropdown> = (args, context) => {
+  const classNameFromGlobal = context.globals.theme;
+
+  // In a single select, selectedValue can be used as a string type instead of an array.
+  // In the current Storybook Template, we use selectedValue as a string[] in order to also use it as multiple depending on the control selection.
+  const [selectedValue, setSelectedValue] = useState<string[]>(["test1"]);
+  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
+    const {
+      target: { value },
+    } = event;
+    setSelectedValue(
+      // On autofill we get a stringified value.
+      typeof value === "string" ? value.split(",") : (value as string[]),
+    );
+  };
+
+  return (
+    <Box sx={{ display: "flex", alignItems: "center", gap: 4 }}>
+      <Box>
+        <Dropdown
+          className={classNameFromGlobal}
+          value={selectedValue}
+          onChange={handleSelectedValueChange}
+          disabled
+          sx={{ width: "150px" }}
+          {...args}
+        >
+          <DropdownItem value={"test1"}>Small item 1</DropdownItem>
+          <DropdownItem value={"test2"}>Small item 2</DropdownItem>
+          <DropdownItem value={"test3"}>Small item 3</DropdownItem>
+        </Dropdown>
+      </Box>
+    </Box>
+  );
+};
+
+export const Disabled: StoryObj<typeof Dropdown> = {
+  render: DisabledTemplate,
+  parameters: {
+    controls: {
+      include: [],
+    },
+    chromatic: { disableSnapshot: true },
+  },
 };