@lunit/design-system 2.0.1 → 2.1.0

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";
 
-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 },
+  },
 };

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

@@ -0,0 +1,221 @@
+import React, { useState } from "react";
+import { StoryFn, Meta, StoryObj } from "@storybook/react";
+
+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 },
+  },
+};