@lunit/design-system 2.0.2 → 2.2.0

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

@@ -0,0 +1,221 @@
+import React, { useState } from "react";
+import { StoryFn, Meta, StoryObj } from "@storybook/react-webpack5";
+
+import Dropdown, { DropdownItem } from "@/components/Dropdown";
+import {
+  Box,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+import Button from "@/components/Button";
+
+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 dropdownContent = {
+  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 handleEx1SelectedValueChange = (event: SelectChangeEvent<unknown>) => {
+    const {
+      target: { value },
+    } = event;
+    setEx1SelectedValue(value as string);
+  };
+  const [ex2selectedValue, setEx2SelectedValue] = useState<string[]>([]);
+  const handleEx2SelectedValueChange = (event: SelectChangeEvent<unknown>) => {
+    const {
+      target: { value },
+    } = event;
+    setEx2SelectedValue(
+      // On autofill we get a stringified value.
+      typeof value === "string" ? value.split(",") : (value as string[]),
+    );
+  };
+  const [ex3selectedValue, setEx3SelectedValue] = useState<string>("test1");
+  const handleEx3SelectedValueChange = (event: SelectChangeEvent<unknown>) => {
+    const {
+      target: { value },
+    } = event;
+    setEx3SelectedValue(value as string);
+  };
+
+  const [open, setOpen] = useState(false);
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleOpen = () => {
+    setOpen(true);
+  };
+
+  return (
+    <Table sx={{ maxWidth: "1200px" }}>
+      <TableHead>
+        <TableRow>
+          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            Using placeholder Example
+          </TableCell>
+          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            Dropdown with Button Example
+          </TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            {/* This placeholder examples are referenced from MUI demo https://v5.mui.com/material-ui/react-select/#placeholder */}
+            {/* Example 1 (Placeholder with Single select) */}
+            <Dropdown
+              className={classNameFromGlobal}
+              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
+              renderValue={(selected) => {
+                if (!selected) {
+                  return (
+                    <Box
+                      sx={{
+                        color: (theme) =>
+                          theme.palette.lunit_token.core.text_light,
+                      }}
+                    >
+                      Placeholder Single
+                    </Box>
+                  );
+                }
+                return dropdownContent[
+                  selected as keyof typeof dropdownContent
+                ];
+              }}
+            >
+              {Object.entries(dropdownContent).map(([key, text]) => (
+                <DropdownItem key={key} value={key}>
+                  {text}
+                </DropdownItem>
+              ))}
+            </Dropdown>
+            &nbsp;&nbsp;
+            {/* Example 2 (Placeholder with Multiple select) */}
+            <Dropdown
+              className={classNameFromGlobal}
+              sx={{ width: "200px" }}
+              value={ex2selectedValue}
+              onChange={handleEx2SelectedValueChange}
+              select="multiple"
+              displayEmpty
+              renderValue={(selected) => {
+                if ((selected as string[]).length === 0) {
+                  return (
+                    <Box
+                      sx={{
+                        color: (theme) =>
+                          theme.palette.lunit_token.core.text_light,
+                      }}
+                    >
+                      Placeholder multiple
+                    </Box>
+                  );
+                }
+                return (selected as string[])
+                  .map(
+                    (value) =>
+                      dropdownContent[value as keyof typeof dropdownContent],
+                  )
+                  .join(", ");
+              }}
+            >
+              {Object.entries(dropdownContent).map(([key, text]) => (
+                <DropdownItem key={key} value={key}>
+                  {text}
+                </DropdownItem>
+              ))}
+            </Dropdown>
+          </TableCell>
+          <TableCell>
+            {/* Example 3 (Button dropdown) */}
+            <Box sx={{ position: "relative" }}>
+              <Button onClick={handleOpen}>Dropdown Button</Button>
+              <Dropdown
+                value={ex3selectedValue}
+                onChange={handleEx3SelectedValueChange}
+                open={open}
+                onClose={handleClose}
+                onOpen={handleOpen}
+                sx={{
+                  clip: "rect(0 0 0 0)",
+                  clipPath: "inset(50%)",
+                  height: "1px",
+                  overflow: "hidden",
+                  position: "absolute",
+                  bottom: 0,
+                  left: 0,
+                  whiteSpace: "nowrap",
+                  width: "1px",
+                }}
+              >
+                {Object.entries(dropdownContent).map(([key, text]) => (
+                  <DropdownItem key={key} value={key}>
+                    {text}
+                  </DropdownItem>
+                ))}
+              </Dropdown>
+            </Box>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
+
+export const DropdownExamples: StoryObj<typeof Dropdown> = {
+  render: DropdownExampleTemplate,
+  parameters: {
+    controls: {
+      include: [],
+    },
+    chromatic: { disableSnapshot: true },
+  },
+};

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

@@ -0,0 +1,360 @@
+import React, { useState } from "react";
+import { StoryFn, Meta, StoryObj } from "@storybook/react-webpack5";
+
+import Dropdown, {
+  DropdownDivider,
+  DropdownItem,
+  DropdownSubtitle,
+} from "@/components/Dropdown";
+import {
+  Box,
+  SelectChangeEvent,
+  Table,
+  TableBody,
+  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";
+
+export default {
+  title: "Components/Dropdown",
+  component: DropdownItem,
+  argTypes: {
+    leftIcon: {
+      control: false,
+      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" },
+      },
+    },
+    rightText: {
+      description: "Use this prop when you want to add text.",
+      table: {
+        defaultValue: { summary: "undefined" },
+      },
+    },
+    isFilledStyle: {
+      control: {
+        type: "radio",
+      },
+      options: [true, false],
+      description: "Only for GNB or few situations of single select type.",
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+    disabled: {
+      control: {
+        type: "radio",
+      },
+      options: [true, false],
+      description: "If true, the component will be disabled.",
+      table: {
+        defaultValue: { summary: "false" },
+      },
+    },
+  },
+  parameters: {
+    controls: {
+      include: ["leftIcon", "rightText", "isFilledStyle", "disabled"],
+    },
+  },
+} as Meta<typeof DropdownItem>;
+
+const BasicDropdownItemTemplate: StoryFn<typeof DropdownItem> = (
+  args,
+  context,
+) => {
+  const classNameFromGlobal = context.globals.theme;
+
+  const [selectedValue, setSelectedValue] = useState<string>("test1");
+  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
+    const {
+      target: { value },
+    } = event;
+    setSelectedValue(value as string);
+  };
+
+  return (
+    <Box>
+      <Dropdown
+        className={classNameFromGlobal}
+        value={selectedValue}
+        onChange={handleSelectedValueChange}
+        sx={{ width: "150px" }}
+        open={true}
+      >
+        <DropdownItem value={"test1"} {...args}>
+          Conquer cancer through AI
+        </DropdownItem>
+        <DropdownItem value={"test2"} {...args}>
+          test item 2
+        </DropdownItem>
+        <DropdownItem value={"test3"} {...args}>
+          test item 3
+        </DropdownItem>
+      </Dropdown>
+    </Box>
+  );
+};
+
+export const BasicDropdownItem: StoryObj<typeof DropdownItem> = {
+  render: BasicDropdownItemTemplate,
+  name: "Basic DropdownItem",
+  parameters: {
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+const DropdownItemSelectStyleTemplate: StoryFn<typeof DropdownItem> = (
+  args,
+  context,
+) => {
+  const classNameFromGlobal = context.globals.theme;
+
+  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 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 (
+    <Table sx={{ maxWidth: "1200px" }}>
+      <TableHead>
+        <TableRow>
+          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            Single select
+          </TableCell>
+          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            Single select(Filled Style)
+          </TableCell>
+          <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+            Multiple select
+          </TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            <Dropdown
+              className={classNameFromGlobal}
+              value={selectedValue}
+              onChange={handleSelectedValueChange}
+              sx={{ width: "150px" }}
+            >
+              <DropdownItem value={"test1"} {...args}>
+                Conquer cancer through AI
+              </DropdownItem>
+              <DropdownItem value={"test2"} {...args}>
+                test item 2
+              </DropdownItem>
+              <DropdownItem value={"test3"} {...args}>
+                test item 3
+              </DropdownItem>
+            </Dropdown>
+          </TableCell>
+          <TableCell>
+            <Dropdown
+              className={classNameFromGlobal}
+              value={selectedValue}
+              onChange={handleSelectedValueChange}
+              sx={{ width: "150px" }}
+            >
+              <DropdownItem value={"test1"} isFilledStyle {...args}>
+                Conquer cancer through AI
+              </DropdownItem>
+              <DropdownItem value={"test2"} isFilledStyle {...args}>
+                test item 2
+              </DropdownItem>
+              <DropdownItem value={"test3"} isFilledStyle {...args}>
+                test item 3
+              </DropdownItem>
+            </Dropdown>
+          </TableCell>
+          <TableCell>
+            <Dropdown
+              className={classNameFromGlobal}
+              select="multiple"
+              value={selectedValue2}
+              onChange={handleSelectedValueChange2}
+              sx={{ width: "230px" }}
+            >
+              <DropdownItem value={"test1"} {...args}>
+                test item1
+              </DropdownItem>
+              <DropdownItem value={"test2"} {...args}>
+                test item 2
+              </DropdownItem>
+              <DropdownItem value={"test3"} {...args}>
+                test item 3
+              </DropdownItem>
+            </Dropdown>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
+
+export const DropdownItemSelectStyle: StoryObj<typeof DropdownItem> = {
+  render: DropdownItemSelectStyleTemplate,
+  name: "DropdownItem : Style by Select Type",
+  parameters: {
+    controls: {
+      include: [],
+    },
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+const DropdownItemWithIconTextTemplate: StoryFn<typeof DropdownItem> = (
+  args,
+  context,
+) => {
+  const classNameFromGlobal = context.globals.theme;
+
+  const [selectedValue, setSelectedValue] = useState<string>("test1");
+  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
+    const {
+      target: { value },
+    } = event;
+    setSelectedValue(value as string);
+  };
+
+  return (
+    <Box>
+      <Dropdown
+        className={classNameFromGlobal}
+        value={selectedValue}
+        onChange={handleSelectedValueChange}
+        sx={{ width: "150px" }}
+        open={true}
+      >
+        <DropdownItem
+          value={"test1"}
+          leftIcon={<Demo fontSize="small" />}
+          rightText="lunit"
+          {...args}
+        >
+          Conquer cancer through AI
+        </DropdownItem>
+        <DropdownItem
+          value={"test2"}
+          leftIcon={<RulerT2 fontSize="small" />}
+          rightText="design"
+          {...args}
+        >
+          test item 2
+        </DropdownItem>
+        <DropdownItem
+          value={"test3"}
+          leftIcon={<ViewfinderT1 fontSize="small" />}
+          rightText="system"
+          {...args}
+        >
+          test item 3
+        </DropdownItem>
+      </Dropdown>
+    </Box>
+  );
+};
+
+export const DropdownItemWithIconText: StoryObj<typeof DropdownItem> = {
+  render: DropdownItemWithIconTextTemplate,
+  name: "DropdownItem : With Left Icon, Right Text",
+  parameters: {
+    controls: {
+      include: [],
+    },
+    chromatic: { disableSnapshot: true },
+  },
+};
+
+const DropdownItemDividerSubtitleTemplate: StoryFn<typeof DropdownItem> = (
+  args,
+  context,
+) => {
+  const classNameFromGlobal = context.globals.theme;
+
+  const [selectedValue, setSelectedValue] = useState<string>("test1");
+  const handleSelectedValueChange = (event: SelectChangeEvent<unknown>) => {
+    const {
+      target: { value },
+    } = event;
+    setSelectedValue(value as string);
+  };
+
+  return (
+    <Box>
+      <Dropdown
+        className={classNameFromGlobal}
+        value={selectedValue}
+        onChange={handleSelectedValueChange}
+        sx={{ width: "150px" }}
+        open={true}
+      >
+        <DropdownSubtitle title="Subtitle 1" />
+        <DropdownItem
+          value={"test1"}
+          leftIcon={<Demo fontSize="small" />}
+          {...args}
+        >
+          Conquer cancer through AI
+        </DropdownItem>
+        <DropdownItem
+          value={"test2"}
+          leftIcon={<RulerT2 fontSize="small" />}
+          {...args}
+        >
+          test item 2
+        </DropdownItem>
+        <DropdownItem
+          value={"test3"}
+          leftIcon={<ViewfinderT1 fontSize="small" />}
+          {...args}
+        >
+          test item 3
+        </DropdownItem>
+        <DropdownDivider />
+        <DropdownSubtitle title="Subtitle 2" />
+        <DropdownItem value={"test4"} {...args}>
+          Example 1
+        </DropdownItem>
+        <DropdownItem value={"test5"} {...args}>
+          Example 2
+        </DropdownItem>
+        <DropdownItem value={"test6"} {...args}>
+          Example 3
+        </DropdownItem>
+      </Dropdown>
+    </Box>
+  );
+};
+
+export const DropdownItemDividerSubtitle: StoryObj<typeof DropdownItem> = {
+  render: DropdownItemDividerSubtitleTemplate,
+  name: "DropdownItem : Divider, Subtitle",
+  parameters: {
+    controls: {
+      include: [],
+    },
+    chromatic: { disableSnapshot: true },
+  },
+};

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: {
@@ -140,6 +133,34 @@ export const Disabled: StoryObj<typeof TextField> = {
   },
 };
 
+const ReadOnlyTemplate: StoryFn<typeof TextField> = (args) => {
+  return (
+    <Box sx={{ display: "flex", gap: 2 }}>
+      <TextField
+        {...args}
+        inputProps={{ readOnly: true }}
+        defaultValue="Conquer Cancer through AI."
+      />
+      <TextField
+        {...args}
+        multiline={true}
+        inputProps={{ readOnly: true }}
+        defaultValue="Conquer Cancer through AI. We develop AI that detects early-stage cancer and optimizes cancer treatment."
+      />
+    </Box>
+  );
+};
+
+export const ReadOnly: StoryObj<typeof TextField> = {
+  render: ReadOnlyTemplate,
+  parameters: {
+    controls: {
+      include: ["size", "helperText", "error", "disabled"],
+    },
+    chromatic: { disableSnapshot: true },
+  },
+};
+
 const ErrorTemplate: StoryFn<typeof TextField> = (args) => {
   return (
     <Box sx={{ display: "flex", gap: 2 }}>