@lunit/design-system 2.0.2 → 2.2.0

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";
@@ -78,6 +78,18 @@ Default disabled is `false`.
 <TextField multiline disabled />
 ```
 
+### ReadOnly
+
+The read-only textField can be applied with inputProps's the readOnly property.<br />
+You can save the text value you want to show in defaultValue property.
+
+<Canvas of={TextFieldStories.ReadOnly} sourceState="none" />
+
+```tsx
+<TextField inputProps={{ readOnly: true }} defaultValue="Conquer Cancer through AI." />
+<TextField multiline inputProps={{ readOnly: true }} defaultValue="Conquer Cancer through AI. We develop AI that detects early-stage cancer and optimizes cancer treatment."/>
+```
+
 ### Error
 
 The error prop toggles the error state.<br />

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"),

package/src/stories/components/ToggleButton/Basic.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import {
   Table,
   TableHead,
@@ -10,9 +10,8 @@ import {
 } from "@mui/material";
 import Bell from "@lunit/design-system-icons/Bell";
 import ToggleButton from "@/components/ToggleButton";
-import ToggleButtonGroup from "@/components/ToggleButtonGroup";
 
-import type { StoryFn, Meta } from "@storybook/react";
+import type { StoryFn, Meta } from "@storybook/react-webpack5";
 import type { ButtonProps } from "@/components/Button/Button.types";
 
 type Size = Pick<ButtonProps, "size">;
@@ -170,31 +169,17 @@ export const BasicToggleButton = {
 };
 
 const SizeTemplate: StoryFn<typeof ToggleButton> = (args) => {
-  const [values, setValues] = React.useState({
-    small: "",
-    medium: "",
-    large: "",
-  });
+  const [selectedButtons, setSelectedButtons] = React.useState<{
+    [key: string]: boolean;
+  }>({});
 
-  const handleChange = (value: string | null, size: SizeValues) => {
-    if (size) {
-      setValues({
-        ...values,
-        [size]: value,
-      });
-    }
+  const handleToggle = (buttonId: string) => {
+    setSelectedButtons((prev) => ({
+      ...prev,
+      [buttonId]: !prev[buttonId],
+    }));
   };
 
-  const group = sizeList.map((size) => {
-    if (size) {
-      return {
-        size: size,
-        handler: (_: React.MouseEvent<HTMLElement>, value: string | null) =>
-          handleChange(value, size),
-      };
-    }
-  });
-
   return (
     <Table sx={{ width: 900 }}>
       <TableHead>
@@ -223,47 +208,40 @@ const SizeTemplate: StoryFn<typeof ToggleButton> = (args) => {
       </TableHead>
       <TableBody>
         <TableRow>
-          {group.map((item) => {
-            if (item) {
-              const { size, handler } = item;
+          {sizeList.map((size) => {
+            if (size) {
               return (
                 <TableCell
                   key={size}
                   sx={{ "& button": { marginRight: "10px" } }}
                 >
-                  <ToggleButtonGroup
-                    value={values[size]}
-                    exclusive
-                    onChange={handler}
-                    aria-label="text alignment"
-                    sx={{
-                      "& button": {
-                        marginRight: "7px",
-                      },
-                    }}
+                  <ToggleButton
+                    {...args}
+                    icon={<Bell />}
+                    size={size}
+                    value={`${size}-1`}
+                    selected={selectedButtons[`${size}-1`]}
+                    onChange={() => handleToggle(`${size}-1`)}
+                  />
+                  <ToggleButton
+                    {...args}
+                    size={size}
+                    value={`${size}-2`}
+                    selected={selectedButtons[`${size}-2`]}
+                    onChange={() => handleToggle(`${size}-2`)}
+                  >
+                    {args.children}
+                  </ToggleButton>
+                  <ToggleButton
+                    {...args}
+                    icon={<Bell />}
+                    size={size}
+                    value={`${size}-3`}
+                    selected={selectedButtons[`${size}-3`]}
+                    onChange={() => handleToggle(`${size}-3`)}
                   >
-                    <ToggleButton
-                      {...args}
-                      icon={<Bell />}
-                      size={size}
-                      value={String(size) + 1}
-                    />
-                    <ToggleButton
-                      {...args}
-                      size={size}
-                      value={String(size) + 2}
-                    >
-                      {args.children}
-                    </ToggleButton>
-                    <ToggleButton
-                      {...args}
-                      icon={<Bell />}
-                      size={size}
-                      value={String(size) + 3}
-                    >
-                      {args.children}
-                    </ToggleButton>
-                  </ToggleButtonGroup>
+                    {args.children}
+                  </ToggleButton>
                 </TableCell>
               );
             }
@@ -285,19 +263,15 @@ export const Size = {
 };
 
 const SizeDocsTemplate: StoryFn<typeof ToggleButton> = (args) => {
-  const [values, setValues] = React.useState({
-    small: "",
-    medium: "",
-    large: "",
-  });
-
-  const handleChange = (value: string | null, size: SizeValues) => {
-    if (!size) return;
+  const [selectedButtons, setSelectedButtons] = React.useState<{
+    [key: string]: boolean;
+  }>({});
 
-    setValues({
-      ...values,
-      [size]: value,
-    });
+  const handleToggle = (buttonId: string) => {
+    setSelectedButtons((prev) => ({
+      ...prev,
+      [buttonId]: !prev[buttonId],
+    }));
   };
 
   return (
@@ -311,78 +285,117 @@ const SizeDocsTemplate: StoryFn<typeof ToggleButton> = (args) => {
         },
       }}
     >
-      <ToggleButtonGroup
+      <Box
         sx={{
           display: "flex",
           alignItems: "center",
         }}
-        value={values.small}
-        onChange={(_, value) => handleChange(value, "small")}
       >
-        <ToggleButton {...args} value="small" size="small">
+        <ToggleButton
+          {...args}
+          value="contained-small"
+          size="small"
+          selected={selectedButtons["contained-small"]}
+          onChange={() => handleToggle("contained-small")}
+        >
           Small
         </ToggleButton>
-        <ToggleButton {...args} value="medium" size="medium">
+        <ToggleButton
+          {...args}
+          value="contained-medium"
+          size="medium"
+          selected={selectedButtons["contained-medium"]}
+          onChange={() => handleToggle("contained-medium")}
+        >
           Medium
         </ToggleButton>
-        <ToggleButton {...args} value="large" size="large">
+        <ToggleButton
+          {...args}
+          value="contained-large"
+          size="large"
+          selected={selectedButtons["contained-large"]}
+          onChange={() => handleToggle("contained-large")}
+        >
           Large
         </ToggleButton>
-      </ToggleButtonGroup>
-      <ToggleButtonGroup
+      </Box>
+      <Box
         sx={{
           display: "flex",
           alignItems: "center",
         }}
-        value={values.medium}
-        onChange={(_, value) => handleChange(value, "medium")}
       >
         <ToggleButton
           {...args}
-          value="small"
+          value="outlined-small"
           kind="outlined"
           color="primary"
           size="small"
+          selected={selectedButtons["outlined-small"]}
+          onChange={() => handleToggle("outlined-small")}
         >
           Small
         </ToggleButton>
         <ToggleButton
           {...args}
-          value="medium"
+          value="outlined-medium"
           kind="outlined"
           color="primary"
           size="medium"
+          selected={selectedButtons["outlined-medium"]}
+          onChange={() => handleToggle("outlined-medium")}
         >
           Medium
         </ToggleButton>
         <ToggleButton
           {...args}
-          value="large"
+          value="outlined-large"
           kind="outlined"
           color="primary"
           size="large"
+          selected={selectedButtons["outlined-large"]}
+          onChange={() => handleToggle("outlined-large")}
         >
           Large
         </ToggleButton>
-      </ToggleButtonGroup>
-      <ToggleButtonGroup
+      </Box>
+      <Box
         sx={{
           display: "flex",
           alignItems: "center",
         }}
-        value={values.large}
-        onChange={(_, value) => handleChange(value, "large")}
       >
-        <ToggleButton {...args} value="small" kind="ghost" size="small">
+        <ToggleButton
+          {...args}
+          value="ghost-small"
+          kind="ghost"
+          size="small"
+          selected={selectedButtons["ghost-small"]}
+          onChange={() => handleToggle("ghost-small")}
+        >
           Small
         </ToggleButton>
-        <ToggleButton {...args} value="medium" kind="ghost" size="medium">
+        <ToggleButton
+          {...args}
+          value="ghost-medium"
+          kind="ghost"
+          size="medium"
+          selected={selectedButtons["ghost-medium"]}
+          onChange={() => handleToggle("ghost-medium")}
+        >
           Medium
         </ToggleButton>
-        <ToggleButton {...args} value="large" kind="ghost" size="large">
+        <ToggleButton
+          {...args}
+          value="ghost-large"
+          kind="ghost"
+          size="large"
+          selected={selectedButtons["ghost-large"]}
+          onChange={() => handleToggle("ghost-large")}
+        >
           Large
         </ToggleButton>
-      </ToggleButtonGroup>
+      </Box>
     </Box>
   );
 };
@@ -400,71 +413,97 @@ export const SizeDocs = {
 };
 
 const ColorTemplate: StoryFn<typeof ToggleButton> = (args) => {
-  const [contained, setContained] = useState("");
-  const [outlined, setOutlined] = useState("");
-  const [ghost, setGhost] = useState("");
+  const [selectedButtons, setSelectedButtons] = React.useState<{
+    [key: string]: boolean;
+  }>({});
+
+  const handleToggle = (buttonId: string) => {
+    setSelectedButtons((prev) => ({
+      ...prev,
+      [buttonId]: !prev[buttonId],
+    }));
+  };
 
   return (
     <Box sx={{ display: "flex", flexDirection: "column" }}>
-      <ToggleButtonGroup
+      <Box
         sx={{
           "& button": {
             marginRight: 2,
           },
         }}
-        value={contained}
-        onChange={(_, value) => setContained(value)}
       >
-        <ToggleButton {...args} value="first" kind="contained" color="primary">
+        <ToggleButton
+          {...args}
+          value="contained-primary"
+          kind="contained"
+          color="primary"
+          selected={selectedButtons["contained-primary"]}
+          onChange={() => handleToggle("contained-primary")}
+        >
           Primary
         </ToggleButton>
         <ToggleButton
           {...args}
-          value="second"
+          value="contained-secondary"
           kind="contained"
           color="secondary"
           selectedColor="secondary"
+          selected={selectedButtons["contained-secondary"]}
+          onChange={() => handleToggle("contained-secondary")}
         >
           Secondary
         </ToggleButton>
-      </ToggleButtonGroup>
-      <ToggleButtonGroup
+      </Box>
+      <Box
         sx={{
           marginTop: 4,
           "& button": {
             marginRight: 2,
           },
         }}
-        value={outlined}
-        onChange={(_, value) => setOutlined(value)}
       >
-        <ToggleButton {...args} value="first" kind="outlined" color="primary">
+        <ToggleButton
+          {...args}
+          value="outlined-primary"
+          kind="outlined"
+          color="primary"
+          selected={selectedButtons["outlined-primary"]}
+          onChange={() => handleToggle("outlined-primary")}
+        >
           Primary
         </ToggleButton>
-      </ToggleButtonGroup>
-      <ToggleButtonGroup
+      </Box>
+      <Box
         sx={{
           marginTop: 4,
           "& button": {
             marginRight: 2,
           },
         }}
-        value={ghost}
-        onChange={(_, value) => setGhost(value)}
       >
-        <ToggleButton {...args} value="first" kind="ghost" color="primary">
+        <ToggleButton
+          {...args}
+          value="ghost-primary"
+          kind="ghost"
+          color="primary"
+          selected={selectedButtons["ghost-primary"]}
+          onChange={() => handleToggle("ghost-primary")}
+        >
           Primary
         </ToggleButton>
         <ToggleButton
           {...args}
-          value="second"
+          value="ghost-secondary"
           kind="ghost"
           color="secondary"
           selectedColor="secondary"
+          selected={selectedButtons["ghost-secondary"]}
+          onChange={() => handleToggle("ghost-secondary")}
         >
           Secondary
         </ToggleButton>
-      </ToggleButtonGroup>
+      </Box>
     </Box>
   );
 };

package/src/stories/components/ToggleButton/ToggleButtonDocs.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/ToggleButton/ToggleButtonKind.stories.tsx

@@ -7,11 +7,11 @@ import {
   TableBody,
   TableCell,
 } from "@mui/material";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 
 import ToggleButton from "@/components/ToggleButton";
 
-import type { StoryFn, Meta } from "@storybook/react";
+import type { StoryFn, Meta } from "@storybook/react-webpack5";
 
 export default {
   title: "Components/ToggleButton",
@@ -317,7 +317,7 @@ const ContainedTemplate: StoryFn<typeof ToggleButton> = (args) => {
 
   const handleChange = (
     color: keyof typeof values,
-    value: keyof (typeof values)[keyof typeof values]
+    value: keyof (typeof values)[keyof typeof values],
   ) => {
     setValues({
       ...values,
@@ -483,7 +483,7 @@ const GhostTemplate: StoryFn<typeof ToggleButton> = (args) => {
 
   const handleChange = (
     color: keyof typeof values,
-    value: keyof (typeof values)[keyof typeof values]
+    value: keyof (typeof values)[keyof typeof values],
   ) => {
     setValues({
       ...values,
@@ -659,7 +659,7 @@ const OutlinedTemplate: StoryFn<typeof ToggleButton> = ({
 
   const handleChange = (
     color: keyof typeof values,
-    value: keyof (typeof values)[keyof typeof values]
+    value: keyof (typeof values)[keyof typeof values],
   ) => {
     setValues({
       ...values,

package/src/stories/components/ToggleButton/WithIcon.stories.tsx

@@ -7,12 +7,12 @@ import {
   TableCell,
   Box,
 } from "@mui/material";
-import { action } from "@storybook/addon-actions";
+import { action } from "storybook/actions";
 import Bell from "@lunit/design-system-icons/Bell";
 
 import ToggleButton from "@/components/ToggleButton";
 
-import type { StoryFn, Meta } from "@storybook/react";
+import type { StoryFn, Meta } from "@storybook/react-webpack5";
 
 export default {
   title: "Components/ToggleButton",

package/src/stories/components/Tooltip/Tooltip.stories.tsx

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