@lunit/design-system 1.0.0-a.1 → 1.0.0-a.3

package/src/stories/components/SelectControl/Toggle.stories.tsx

@@ -0,0 +1,443 @@
+import React, { useEffect, useState } from "react";
+import { StoryFn, Meta } from "@storybook/react";
+import Toggle from "@/components/Toggle/Toggle";
+import {
+  Box,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableRow,
+  TextField,
+} from "@mui/material";
+import FormLabel from "@/components/FormLabel";
+import { action } from "@storybook/addon-actions";
+
+export default {
+  title: "Components/Toggle",
+  component: Toggle,
+  argTypes: {
+    checked: {
+      control: {
+        type: "select",
+      },
+      options: [true, false, undefined],
+      description:
+        "If `true`, the component is checked. Indeterminate state doesn't supported `checked` prop.",
+    },
+    onChange: {
+      control: {
+        type: "select",
+      },
+      options: ["function", undefined],
+      mapping: {
+        function: action("onChange"),
+        undefined: undefined,
+      },
+      description: "(() => void)",
+    },
+    disabled: {
+      control: {
+        type: "boolean",
+      },
+      description: "If `true`, the component is disabled.",
+      options: [true, false],
+    },
+  },
+  args: {
+    size: "medium",
+    indeterminate: false,
+    disabled: false,
+  },
+  parameters: {
+    controls: {
+      include: ["disabled", "checked", "size", "indeterminate", "onChange"],
+    },
+    docs: {
+      description: {
+        component: `Switches toggle the state of a single setting on or off.
+				see [Material-UI Switch](https://mui.com/material-ui/react-switch/).
+				\nIn order to use Button, [checked] value have to be undefined`,
+      },
+    },
+  },
+} as Meta<typeof Toggle>;
+
+const BaseTemplate: StoryFn<typeof Toggle> = (args) => {
+  const [checked, setChecked] = useState(false);
+  useEffect(() => {
+    setChecked(Boolean(args.checked));
+  }, [args.checked]);
+
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell>DEFAULT</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            <Toggle
+              {...args}
+              checked={checked}
+              onChange={() => setChecked(!checked)}
+            />
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
+
+const Template: StoryFn<typeof Toggle> = (args) => (
+  <Table>
+    <TableHead>
+      <TableRow>
+        <TableCell></TableCell>
+        <TableCell>ON</TableCell>
+        <TableCell>Indeterminate</TableCell>
+        <TableCell>OFF</TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell>MEDIUM DEFAULT</TableCell>
+        <TableCell>
+          <Toggle {...args} checked />
+        </TableCell>
+        <TableCell>
+          <Toggle {...args} indeterminate />
+        </TableCell>
+        <TableCell>
+          <Toggle {...args} />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>MEDIUM FOCUS</TableCell>
+        <TableCell>
+          <Toggle {...args} className="focus-test" checked />
+        </TableCell>
+        <TableCell>
+          <Toggle {...args} className="focus-test" indeterminate />
+        </TableCell>
+        <TableCell>
+          <Toggle {...args} className="focus-test" />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>LARGE DEFAULT</TableCell>
+        <TableCell>
+          <Toggle {...args} size="large" checked />
+        </TableCell>
+        <TableCell>
+          <Toggle {...args} size="large" indeterminate />
+        </TableCell>
+        <TableCell>
+          <Toggle {...args} size="large" />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>LARGE FOCUS</TableCell>
+        <TableCell>
+          <Toggle {...args} size="large" className="focus-test" checked />
+        </TableCell>
+        <TableCell>
+          <Toggle {...args} size="large" className="focus-test" indeterminate />
+        </TableCell>
+        <TableCell>
+          <Toggle {...args} size="large" className="focus-test" />
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+);
+
+const DisabledTemplate: StoryFn<typeof Toggle> = (args) => (
+  <Table>
+    <TableHead>
+      <TableRow>
+        <TableCell></TableCell>
+        <TableCell>ON</TableCell>
+        <TableCell>Indeterminate</TableCell>
+        <TableCell>OFF</TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell>MEDIUM DEFAULT</TableCell>
+        <TableCell>
+          <Toggle {...args} checked />
+        </TableCell>
+        <TableCell>
+          <Toggle {...args} indeterminate />
+        </TableCell>
+        <TableCell>
+          <Toggle {...args} />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>LARGE DEFAULT</TableCell>
+        <TableCell>
+          <Toggle {...args} size="large" checked />
+        </TableCell>
+        <TableCell>
+          <Toggle {...args} size="large" indeterminate />
+        </TableCell>
+        <TableCell>
+          <Toggle {...args} size="large" />
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+);
+
+const TemplateWithLabel: StoryFn<typeof Toggle> = (args) => (
+  <Table>
+    <TableHead>
+      <TableRow>
+        <TableCell></TableCell>
+        <TableCell>ON</TableCell>
+        <TableCell>Indeterminate</TableCell>
+        <TableCell>OFF</TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell>MEDIUM DEFAULT</TableCell>
+        <TableCell>
+          <FormLabel label="Label 1" control={<Toggle {...args} checked />} />
+        </TableCell>
+        <TableCell>
+          <FormLabel
+            label={<input placeholder="Label 2" />}
+            control={<Toggle {...args} indeterminate />}
+          />
+        </TableCell>
+        <TableCell>
+          <FormLabel
+            label={<TextField placeholder="Label 3" />}
+            control={<Toggle {...args} />}
+          />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>MEDIUM FOCUS</TableCell>
+        <TableCell>
+          <FormLabel
+            className="focus-test"
+            label="Label 1"
+            control={<Toggle {...args} checked />}
+          />
+        </TableCell>
+        <TableCell>
+          <FormLabel
+            className="focus-test"
+            label={<input placeholder="Label 2" />}
+            control={<Toggle {...args} indeterminate />}
+          />
+        </TableCell>
+        <TableCell>
+          <FormLabel
+            className="focus-test"
+            label={<TextField placeholder="Label 3" />}
+            control={<Toggle {...args} />}
+          />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>LARGE DEFAULT</TableCell>
+        <TableCell>
+          <FormLabel
+            label="Label 1"
+            control={<Toggle {...args} size="large" checked />}
+          />
+        </TableCell>
+        <TableCell>
+          <FormLabel
+            label={<input placeholder="Label 2" />}
+            control={<Toggle {...args} size="large" indeterminate />}
+          />
+        </TableCell>
+        <TableCell>
+          <FormLabel
+            label={<TextField placeholder="Label 3" />}
+            control={<Toggle {...args} size="large" />}
+          />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>LARGE FOCUS</TableCell>
+        <TableCell>
+          <FormLabel
+            className="focus-test"
+            label="Label 1"
+            control={<Toggle {...args} size="large" checked />}
+          />
+        </TableCell>
+        <TableCell>
+          <FormLabel
+            className="focus-test"
+            label={<input placeholder="Label 2" />}
+            control={<Toggle {...args} size="large" indeterminate />}
+          />
+        </TableCell>
+        <TableCell>
+          <FormLabel
+            className="focus-test"
+            label={<TextField placeholder="Label 3" />}
+            control={<Toggle {...args} size="large" />}
+          />
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+);
+
+const IndeterminateTemplate: StoryFn<typeof Toggle> = (args) => {
+  const [checked, setChecked] = useState([true, false, false]);
+
+  const handleChange1 = () => {
+    const result = !(checked[0] && checked[1]);
+    setChecked([result, result, result]);
+  };
+
+  const handleChange2 = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked([event.target.checked, checked[1], checked[2]]);
+  };
+
+  const handleChange3 = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked([checked[0], event.target.checked, checked[2]]);
+  };
+
+  const handleChange4 = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked([checked[0], checked[1], event.target.checked]);
+  };
+
+  return (
+    <Table>
+      <TableHead>
+        <TableRow>
+          <TableCell>MEDIUM</TableCell>
+          <TableCell>LARGE</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>
+            <FormLabel
+              label="Parent"
+              control={
+                <Toggle
+                  checked={checked[0] && checked[1]}
+                  indeterminate={checked[0] !== checked[1]}
+                  onChange={handleChange1}
+                />
+              }
+            />
+            <Box sx={{ display: "flex", flexDirection: "column" }}>
+              <FormLabel
+                label="Child 1"
+                control={
+                  <Toggle checked={checked[0]} onChange={handleChange2} />
+                }
+              />
+              <FormLabel
+                label="Child 2"
+                control={
+                  <Toggle checked={checked[1]} onChange={handleChange3} />
+                }
+              />
+              <FormLabel
+                label="Child 3"
+                disabled
+                control={
+                  <Toggle checked={checked[2]} onChange={handleChange4} />
+                }
+              />
+            </Box>
+          </TableCell>
+          <TableCell>
+            <FormLabel
+              label="Parent"
+              control={
+                <Toggle
+                  size="large"
+                  checked={checked[0] && checked[1]}
+                  indeterminate={checked[0] !== checked[1]}
+                  onChange={handleChange1}
+                />
+              }
+            />
+            <Box sx={{ display: "flex", flexDirection: "column" }}>
+              <FormLabel
+                label="Child 1"
+                control={
+                  <Toggle
+                    size="large"
+                    checked={checked[0]}
+                    onChange={handleChange2}
+                  />
+                }
+              />
+              <FormLabel
+                label="Child 2"
+                control={
+                  <Toggle
+                    size="large"
+                    checked={checked[1]}
+                    onChange={handleChange3}
+                  />
+                }
+              />
+              <FormLabel
+                label="Child 3"
+                disabled
+                control={
+                  <Toggle
+                    size="large"
+                    checked={checked[2]}
+                    onChange={handleChange4}
+                  />
+                }
+              />
+            </Box>
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
+
+export const ToggleBase = {
+  render: BaseTemplate,
+};
+
+export const ToggleEnabled = {
+  render: Template,
+};
+
+export const ToggleDisabled = {
+  render: DisabledTemplate,
+
+  args: {
+    disabled: true,
+  },
+};
+
+export const ToggleWithLabel = {
+  render: TemplateWithLabel,
+};
+
+export const ToggleWithLabelAndIndeterminate = {
+  render: IndeterminateTemplate,
+
+  parameters: {
+    docs: {
+      description: {
+        story: "Usage is same with Toggle",
+      },
+    },
+  },
+};

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

@@ -0,0 +1,137 @@
+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",
+    multiline: true,
+  },
+  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"] },
+      },
+    },
+    rows: {
+      type: "number",
+      description: `The number of rows to display when multiline option is set to "true"
+        \n the rows default value is undefined.`,
+      table: {
+        defaultValue: { summary: "undefined" },
+        type: { summary: ["number", "string", "undefined"] },
+      },
+    },
+    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" },
+      },
+    },
+    multiline: {
+      type: "boolean",
+      description: "If true, a textarea element(multi line) will be rendered.",
+      table: {
+        defaultValue: { summary: "false" },
+        type: { summary: "boolean" },
+      },
+    },
+  },
+  parameters: {
+    controls: {
+      include: ["size", "rows", "disabled", "helperText", "placeholder"],
+    },
+    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 MultiTemplate: 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} multiline />
+        </TableCell>
+        <TableCell>
+          <TextField {...args} multiline error />
+        </TableCell>
+        <TableCell>
+          <TextField {...args} multiline focused />
+        </TableCell>
+        <TableCell>
+          <TextField {...args} multiline disabled />
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+);
+
+export const TextFieldWithMulti = {
+  render: MultiTemplate,
+  name: "Multi Line",
+};