@lunit/design-system 1.0.0-a.2 → 1.0.0-a.4

package/src/stories/components/TextField/TextFieldSingle.stories.tsx

@@ -0,0 +1,283 @@
+import React from "react";
+import {
+  Box,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+import { action } from "@storybook/addon-actions";
+import { Bell } from "@lunit/design-system-icons";
+
+import TextField from "@/components/TextField/TextField";
+
+import type { StoryFn, Meta } from "@storybook/react";
+
+export default {
+  title: "Components/TextField",
+  component: TextField,
+  args: {
+    disabled: false,
+    size: "small",
+    placeholder: "Please typing...",
+    helperText: "Helper Text",
+    multiline: false,
+  },
+  argTypes: {
+    disabled: {
+      control: {
+        type: "radio",
+      },
+      options: [true, false],
+      description: "If true, the text field will be disabled.",
+      table: {
+        defaultValue: { summary: false },
+        type: { summary: [true, false] },
+      },
+    },
+    size: {
+      control: {
+        type: "radio",
+      },
+      description: "The size of the text field.",
+      table: {
+        defaultValue: { summary: "small" },
+        type: { summary: ["small", "medium", "large"] },
+      },
+    },
+    placeholder: {
+      type: "string",
+      description: "The placeholder content.",
+      table: {
+        defaultValue: { summary: "undefined" },
+        type: { summary: "string" },
+      },
+    },
+    helperText: {
+      type: "string",
+      description:
+        'The helper text content, use "error " or "sub text " to display helper text.',
+      table: {
+        defaultValue: { summary: "undefined" },
+        type: { summary: "string" },
+      },
+    },
+  },
+  parameters: {
+    controls: {
+      include: [
+        "size",
+        "disabled",
+        "helperText",
+        "placeholder",
+        "onLeftIconClick",
+        "onRightIconClick",
+      ],
+    },
+    docs: {
+      description: {
+        component: `It is a text field that allows users to enter and edit text.
+          \n It is usually used in forms. It can be used as a single line or multi-line text field.
+          \n It can be used with an icon on the left or right side.`,
+      },
+    },
+  },
+  decorators: [(Story) => <Box className="base00">{Story()}</Box>],
+} as Meta<typeof TextField>;
+
+const SingleTemplate: StoryFn<typeof TextField> = (args) => (
+  <Table>
+    <TableHead>
+      <TableRow>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Default
+        </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Error
+        </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Focused
+        </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Disabled
+        </TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell>
+          <TextField {...args} />
+        </TableCell>
+        <TableCell>
+          <TextField {...args} error />
+        </TableCell>
+        <TableCell>
+          <TextField {...args} focused />
+        </TableCell>
+        <TableCell>
+          <TextField {...args} disabled />
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+);
+
+const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
+  <Table>
+    <TableHead>
+      <TableRow>
+        <TableCell></TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Default
+        </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Error
+        </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          focused
+        </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Disabled
+        </TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Left Icon
+        </TableCell>
+        <TableCell>
+          <TextField {...args} leftIcon={<Bell />} />
+        </TableCell>
+        <TableCell>
+          <TextField {...args} error leftIcon={<Bell />} />
+        </TableCell>
+        <TableCell>
+          <TextField {...args} focused leftIcon={<Bell />} />
+        </TableCell>
+        <TableCell>
+          <TextField {...args} disabled leftIcon={<Bell />} />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Right Icon
+        </TableCell>
+        <TableCell>
+          <TextField {...args} rightIcon={<Bell />} />
+        </TableCell>
+        <TableCell>
+          <TextField {...args} error rightIcon={<Bell />} />
+        </TableCell>
+        <TableCell>
+          <TextField {...args} focused rightIcon={<Bell />} />
+        </TableCell>
+        <TableCell>
+          <TextField {...args} disabled rightIcon={<Bell />} />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Left Right Both Icon
+        </TableCell>
+        <TableCell>
+          <TextField {...args} leftIcon={<Bell />} rightIcon={<Bell />} />
+        </TableCell>
+        <TableCell>
+          <TextField {...args} error leftIcon={<Bell />} rightIcon={<Bell />} />
+        </TableCell>
+        <TableCell>
+          <TextField
+            {...args}
+            focused
+            leftIcon={<Bell />}
+            rightIcon={<Bell />}
+          />
+        </TableCell>
+        <TableCell>
+          <TextField
+            {...args}
+            disabled
+            leftIcon={<Bell />}
+            rightIcon={<Bell />}
+          />
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+);
+
+export const TextFieldWithSingle = {
+  render: SingleTemplate,
+
+  argTypes: {
+    onLeftIconClick: {
+      control: false,
+      options: ["function", undefined],
+      mapping: {
+        function: action("onLeftIconClick"),
+        undefined: undefined,
+      },
+      description: "The left icon click event call back function.",
+      table: {
+        defaultValue: { summary: "undefined" },
+        type: { summary: "function" },
+      },
+    },
+    onRightIconClick: {
+      control: false,
+      options: ["function", undefined],
+      mapping: {
+        function: action("onRightIconClick"),
+        undefined: undefined,
+      },
+      description: "The right icon click event call back function.",
+      table: {
+        defaultValue: { summary: "undefined" },
+        type: { summary: "function" },
+      },
+    },
+  },
+
+  name: "Single Line",
+};
+
+export const TextFieldWithIcon = {
+  render: SingleWithIconTemplate,
+
+  argTypes: {
+    onLeftIconClick: {
+      control: {
+        type: "select",
+      },
+      options: ["function", undefined],
+      mapping: {
+        function: action("onLeftIconClick"),
+        undefined: undefined,
+      },
+      description: "The left icon click event call back function.",
+      table: {
+        defaultValue: { summary: "undefined" },
+        type: { summary: "function" },
+      },
+    },
+    onRightIconClick: {
+      control: {
+        type: "select",
+      },
+      options: ["function", undefined],
+      mapping: {
+        function: action("onRightIconClick"),
+        undefined: undefined,
+      },
+      description: "The right icon click event call back function.",
+      table: {
+        defaultValue: { summary: "undefined" },
+        type: { summary: "function" },
+      },
+    },
+  },
+
+  name: "With Icon(single-line only)",
+};

package/src/stories/components/TextField/TextFieldSize.stories.tsx

@@ -0,0 +1,134 @@
+import React from "react";
+import {
+  Box,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+} from "@mui/material";
+
+import TextField from "@/components/TextField/TextField";
+
+import type { StoryFn, Meta } from "@storybook/react";
+
+export default {
+  title: "Components/TextField",
+  component: TextField,
+  args: {
+    disabled: false,
+    size: "small",
+    placeholder: "Please typing...",
+    helperText: "Helper Text",
+  },
+  argTypes: {
+    disabled: {
+      control: {
+        type: "radio",
+      },
+      options: [true, false],
+      description: "If true, the text field will be disabled.",
+      table: {
+        defaultValue: { summary: false },
+        type: { summary: [true, false] },
+      },
+    },
+    size: {
+      control: false,
+      description: "The size of the text field.",
+      table: {
+        defaultValue: { summary: "small" },
+        type: { summary: ["small", "medium", "large"] },
+      },
+    },
+    placeholder: {
+      type: "string",
+      description: "The placeholder content.",
+      table: {
+        defaultValue: { summary: "undefined" },
+        type: { summary: "string" },
+      },
+    },
+    helperText: {
+      type: "string",
+      description:
+        'The helper text content, use "error " or "sub text " to display helper text.',
+      table: {
+        defaultValue: { summary: "undefined" },
+        type: { summary: "string" },
+      },
+    },
+  },
+  parameters: {
+    controls: {
+      include: ["size", "disabled", "helperText", "placeholder"],
+    },
+    docs: {
+      description: {
+        component: `The size of the text field.
+          \n The default value is "small" and can be set to "medium" or "large".`,
+      },
+    },
+  },
+  decorators: [(Story) => <Box className="base00">{Story()}</Box>],
+} as Meta<typeof TextField>;
+
+const TextFieldSizeTemplate: StoryFn<typeof TextField> = (args) => (
+  <Table>
+    <TableHead>
+      <TableRow>
+        <TableCell></TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Small
+        </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Medium
+        </TableCell>
+        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+          Large
+        </TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell
+          sx={{ typography: "body2_14_medium", color: "inherit" }}
+          width={100}
+        >
+          Single line
+        </TableCell>
+        <TableCell>
+          <TextField {...args} />
+        </TableCell>
+        <TableCell>
+          <TextField {...args} size="medium" />
+        </TableCell>
+        <TableCell>
+          <TextField {...args} size="large" />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell
+          sx={{ typography: "body2_14_medium", color: "inherit" }}
+          width={50}
+        >
+          Multi line
+        </TableCell>
+        <TableCell>
+          <TextField {...args} multiline />
+        </TableCell>
+        <TableCell>
+          <TextField {...args} size="medium" multiline />
+        </TableCell>
+        <TableCell>
+          <TextField {...args} size="large" multiline />
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+);
+
+export const TextFieldSize = {
+  render: TextFieldSizeTemplate,
+  name: "Size",
+};

package/src/stories/components/Toast/Toast.stories.tsx

@@ -0,0 +1,152 @@
+import React from "react";
+import { StoryFn, Meta } from "@storybook/react";
+import { Box } from "@mui/material";
+
+import Toast from "@/components/Toast/Toast";
+import { action } from "@storybook/addon-actions";
+import Button from "@/components/Button";
+
+export default {
+  title: "Components/Toast",
+  component: Toast,
+  argTypes: {
+    severity: {
+      control: "radio",
+      options: ["success", "info", "warning", "error", undefined],
+      description: `\`success\`, \`info\`, \`warning\`, \`error\`, \`undefined\``,
+    },
+    action: {
+      control: {
+        type: "select",
+      },
+      options: ["Button", undefined],
+      mapping: {
+        Button: <Button kind="ghost">Button</Button>,
+        undefined: undefined,
+      },
+      default: undefined,
+    },
+    onClose: {
+      control: {
+        type: "select",
+      },
+      defaultValue: "function",
+      options: ["function", undefined],
+      mapping: {
+        function: action("onClose"),
+        undefined: undefined,
+      },
+    },
+  },
+  parameters: {
+    controls: {
+      include: ["severity", "action", "onClose"],
+    },
+    docs: {
+      description: {
+        component: `Toast provide brief notifications. But have to use with \`Snackbar\` component.`,
+      },
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Box
+        className="base10"
+        bgcolor={"lunit.grey.00.main"}
+        sx={{
+          padding: 8,
+        }}
+      >
+        {Story()}
+      </Box>
+    ),
+  ],
+} as Meta<typeof Toast>;
+
+const Template: StoryFn<typeof Toast> = (args) => <Toast {...args}>Test</Toast>;
+
+const Template2: StoryFn<typeof Toast> = () => (
+  <Box sx={{ display: "grid", gap: "40px" }}>
+    <Toast
+      severity="normal"
+      sx={{
+        width: "212px",
+        "& .Toast-message": {
+          width: "180px",
+        },
+      }}
+    >
+      Lorem ipsum dol
+    </Toast>
+
+    <Toast
+      severity="normal"
+      sx={{
+        width: "317px",
+        "& .Toast-message": {
+          width: "165px",
+        },
+      }}
+      onClose={() => {}}
+    >
+      Lorem ipsum dol
+    </Toast>
+
+    <Toast
+      severity="normal"
+      onClose={() => {}}
+      sx={{
+        width: "484px",
+      }}
+    >
+      Lorem ipsum dolor sit amet consectetur. Velit urna donec tortor egestas
+      donec laoreet porttitor phasellus imperdiet. Egestas leo pretium tempus
+      purus laoreet egestas habitant scelerisque non imperdiet.
+    </Toast>
+    <Toast
+      severity="success"
+      sx={{
+        width: "464px",
+      }}
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Augue lorem in
+      dictum vitae ut massa.
+    </Toast>
+
+    <Toast
+      severity="info"
+      action={
+        <Button size="medium" kind="outlined" sx={{ width: "64px" }}>
+          Button
+        </Button>
+      }
+      sx={{
+        width: "548px",
+      }}
+    >
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Augue lorem in
+      dictum vitae ut massa.
+    </Toast>
+    <Toast
+      severity="error"
+      action={
+        <Button size="medium" kind="ghost" color="error" sx={{ width: "64px" }}>
+          Button
+        </Button>
+      }
+      onClose={() => {}}
+      sx={{
+        width: "584px",
+      }}
+    >
+      Lorem ipsum dolor sit amet consectetur. Velit urna donec tortor.
+    </Toast>
+  </Box>
+);
+
+export const ToastBase = {
+  render: Template,
+};
+export const ToastVariant = {
+  render: Template2,
+};