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

package/src/stories/components/Chip/Chip.stories.tsx

@@ -0,0 +1,208 @@
+import React from "react";
+import { Meta } from "@storybook/react";
+import { action } from "@storybook/addon-actions";
+import Chip from "@/components/Chip";
+import {
+  Logo16,
+  Avatar16,
+  Success16,
+  Error16,
+  Information16,
+  Warning16,
+} from "@lunit/design-system-icons";
+
+export default {
+  title: "Components/Chips",
+  component: Chip,
+  argTypes: {
+    kind: {
+      description: `Default status of Contained or Outlined Chip is readOnly. You can pass onClick, onDelete or thumbnail to Contained Chip only.`,
+    },
+    onClick: {
+      description: `Contained chip can have onClick event. When Chip is clickable, onDelete is disabled.`,
+      control: {
+        type: "select",
+      },
+      options: ["function", undefined],
+      mapping: {
+        function: action("onClick"),
+        undefined: undefined,
+      },
+    },
+    onDelete: {
+      description:
+        "Contained chip can have onDelete event. When Chip is deletable, onClick is disabled.",
+      control: {
+        type: "select",
+      },
+      options: ["function", undefined],
+      mapping: {
+        function: action("onDelete"),
+        undefined: undefined,
+      },
+    },
+
+    thumbnail: {
+      control: {
+        type: "select",
+      },
+      options: [
+        undefined,
+        "Initial",
+        "Logo16",
+        "Avatar16",
+        "Avatar16Filled",
+        "Success16",
+        "Success16Filled",
+        "Error16",
+        "Error16Filled",
+        "Information16",
+        "Information16Filled",
+        "Warning16",
+        "Warning16Filled",
+      ],
+      mapping: {
+        undefined: undefined,
+        Initial: "W as initial",
+        Logo16: <Logo16 />,
+        Avatar16: <Avatar16 />,
+        Avatar16Filled: <Avatar16 variant="filled" />,
+        Success16: <Success16 />,
+        Success16Filled: <Success16 variant="filled" />,
+        Error16: <Error16 />,
+        Error16Filled: <Error16 variant="filled" />,
+        Information16: <Information16 />,
+        Information16Filled: <Information16 variant="filled" />,
+        Warning16: <Warning16 />,
+        Warning16Filled: <Warning16 variant="filled" />,
+      },
+    },
+  },
+  args: {
+    kind: "contained",
+    label: "label@lunit.io",
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: `Chips are compact elements that represent an input, attribute, or action.`,
+      },
+    },
+    controls: {
+      expanded: true,
+    },
+  },
+} as Meta<typeof Chip>;
+
+export const Outlined = {
+  parameters: {
+    docs: {
+      description: {
+        story: `Outlined chip only contains label and shows the state of disabled.`,
+      },
+    },
+    controls: {
+      exclude: [
+        "thumbnail",
+        "onClick",
+        "onDelete",
+        "disabled",
+        "clickable",
+        "skipFocusWhenDisabled",
+      ],
+    },
+  },
+
+  args: {
+    color: "primary",
+    kind: "outlined",
+  },
+
+  name: "Kind: Outlined",
+};
+
+export const Contained = {
+  parameters: {
+    controls: {
+      exclude: [
+        "thumbnail",
+        "onClick",
+        "onDelete",
+        "disabled",
+        "clickable",
+        "skipFocusWhenDisabled",
+      ],
+    },
+  },
+
+  args: {
+    color: "primary",
+    kind: "contained",
+  },
+
+  name: "Kind: Contained / Read Only",
+};
+
+export const ContainedWithClick = {
+  args: {
+    ...Contained.args,
+    onClick: action("onClick"),
+    onDelete: undefined,
+  },
+
+  parameters: {
+    docs: {
+      description: {
+        story: `Contained chip can have onClick event. When Chip is clickable, onDelete is disabled.`,
+      },
+    },
+    controls: {
+      exclude: ["onDelete", "deletable"],
+    },
+  },
+
+  name: "Kind: Contained / Enable",
+};
+
+export const ContainedWithDelete = {
+  args: {
+    ...Contained.args,
+    onClick: undefined,
+    onDelete: action("onDelete"),
+  },
+
+  parameters: {
+    docs: {
+      description: {
+        story: `Contained chip can have delete button. When Chip is deletable, onClick is disabled.`,
+      },
+    },
+    controls: {
+      exclude: ["onClick", "clickable"],
+    },
+  },
+
+  name: "Kind: Contained / Deletable",
+};
+
+export const ContainedWithThumbnail = {
+  args: {
+    ...Contained.args,
+    thumbnail: "Initial",
+    onClick: undefined,
+    onDelete: undefined,
+  },
+
+  parameters: {
+    docs: {
+      description: {
+        story: `Contained chip can have thumbnail as "avatar", "logo", and lunit icons.`,
+      },
+    },
+    controls: {
+      exclude: ["onClick", "onDelete"],
+    },
+  },
+
+  name: "Kind: Contained with Thumbnail",
+};

package/src/stories/components/DataTable/DataTable.stories.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { StoryFn, Meta } from "@storybook/react";
+
+import DataTable from "@/components/DataTable";
+
+export default {
+  title: "Components/DataTable",
+  component: DataTable,
+} as Meta<typeof DataTable>;
+
+const Template: StoryFn<typeof DataTable> = () => <DataTable />;
+
+export const LunitDataTable = {
+  render: Template,
+};

package/src/stories/components/DatePicker/DatePicker.stories.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { StoryFn, Meta } from "@storybook/react";
+
+import DatePicker from "@/components/DatePicker";
+
+export default {
+  title: "Components/DatePicker",
+  component: DatePicker,
+} as Meta<typeof DatePicker>;
+
+const Template: StoryFn<typeof DatePicker> = () => <DatePicker />;
+
+export const LunitDatePicker = {
+  render: Template,
+};

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

@@ -0,0 +1,21 @@
+import React from "react";
+import { StoryFn, Meta } from "@storybook/react";
+
+import Dropdown from "@/components/Dropdown";
+
+export default {
+  title: "Components/Dropdown",
+  component: Dropdown,
+} as Meta<typeof Dropdown>;
+
+const Template: StoryFn<typeof Dropdown> = () => <Dropdown />;
+
+export const SingleSelect = {
+  render: Template,
+};
+export const MultiSelect = {
+  render: Template,
+};
+export const NoSelect = {
+  render: Template,
+};

package/src/stories/components/Modal/Modal.stories.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+import { StoryFn, Meta } from "@storybook/react";
+
+import Modal from "@/components/Modal";
+
+export default {
+  title: "Components/Modal",
+  component: Modal,
+} as Meta<typeof Modal>;
+
+const Template: StoryFn<typeof Modal> = () => <Modal />;
+
+export const LunitModal = {
+  render: Template,
+};

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

@@ -0,0 +1,256 @@
+import React, { useState, useEffect } from "react";
+import {
+  Box,
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableCell,
+} from "@mui/material";
+import Checkbox from "@/components/Checkbox";
+import FormLabel from "@/components/FormLabel";
+import { Meta, StoryFn } from "@storybook/react";
+
+export default {
+  title: "Components/Checkbox",
+  component: Checkbox,
+  argTypes: {
+    disabled: {
+      control: "boolean",
+      table: { type: { summary: "bool" }, defaultValue: { summary: "false" } },
+      description: "If true, the component is disabled.",
+    },
+    indeterminate: {
+      control: "boolean",
+      table: { type: { summary: "bool" }, defaultValue: { summary: "false" } },
+      description: "If true, the component appears indeterminate.",
+    },
+    onChange: {
+      table: { type: { summary: "func" } },
+      description:
+        "Callback fired when the state is changed. Signature: `function(event: React.ChangeEvent<HTMLInputElement>) => void`",
+    },
+    required: {
+      control: "boolean",
+      table: { type: { summary: "bool" }, defaultValue: { summary: "false" } },
+      description: "If true, the input element is required.",
+    },
+    checked: {
+      table: {
+        type: { summary: "bool" },
+        defaultValue: { summary: "false" },
+      },
+      description: "If true, the component is checked.",
+    },
+    value: {
+      control: "text",
+      table: { type: { summary: "any" } },
+      description:
+        "The value of the component. The DOM API casts this to a string.",
+    },
+    defaultChecked: {
+      control: "boolean",
+      table: { type: { summary: "bool" }, defaultValue: { summary: "false" } },
+      description:
+        "The default checked state. Use when the component is not controlled.",
+    },
+  },
+  args: {
+    checked: false,
+    disabled: false,
+    indeterminate: false,
+  },
+  parameters: {
+    controls: {
+      expanded: true,
+      include: [
+        "disabled",
+        "indeterminate",
+        "onChange",
+        "value",
+        "required",
+        "checked",
+        "defaultChecked",
+      ],
+    },
+    docs: {
+      description: {
+        component:
+          "This component base is Material UI Checkbox component. [Props of the Material UI Checkbox component](material-u) are also available.",
+      },
+    },
+  },
+} as Meta<typeof Checkbox>;
+
+const BasicCheckboxTemplate: StoryFn<typeof Checkbox> = (args) => {
+  const [checked, setChecked] = useState(false);
+
+  useEffect(() => {
+    setChecked(Boolean(args.checked));
+  }, [args.checked]);
+
+  return (
+    <Checkbox
+      {...args}
+      checked={checked}
+      onChange={() => setChecked(!checked)}
+    />
+  );
+};
+
+export const BasicCheckbox = {
+  render: BasicCheckboxTemplate,
+};
+
+const LabelTemplate: StoryFn<typeof Checkbox> = (args) => {
+  const [checked, setChecked] = useState(false);
+  useEffect(() => {
+    setChecked(Boolean(args.checked));
+  }, [args.checked]);
+
+  return (
+    <FormLabel
+      label="with label"
+      control={
+        <Checkbox
+          {...args}
+          checked={checked}
+          onChange={() => setChecked(!checked)}
+        />
+      }
+    />
+  );
+};
+
+export const Label = {
+  render: LabelTemplate,
+
+  parameters: {
+    docs: {
+      description: {
+        story: "You can use the `FormControlLabel` component to provide label.",
+      },
+    },
+  },
+};
+
+const StatusTemplate: StoryFn<typeof Checkbox> = (args) => (
+  <Table sx={{ width: 650 }}>
+    <TableHead>
+      <TableRow>
+        <TableCell></TableCell>
+        <TableCell>Enabled</TableCell>
+        <TableCell>Focuse</TableCell>
+        <TableCell>Disabled</TableCell>
+      </TableRow>
+    </TableHead>
+    <TableBody>
+      <TableRow>
+        <TableCell>On</TableCell>
+        <TableCell>
+          <Checkbox {...args} checked />
+        </TableCell>
+        <TableCell>
+          <Checkbox {...args} checked className="Mui-focusVisible" />
+        </TableCell>
+        <TableCell>
+          <Checkbox {...args} checked disabled />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Off</TableCell>
+        <TableCell>
+          <Checkbox {...args} />
+        </TableCell>
+        <TableCell>
+          <Checkbox {...args} className="Mui-focusVisible" />
+        </TableCell>
+        <TableCell>
+          <Checkbox {...args} disabled />
+        </TableCell>
+      </TableRow>
+      <TableRow>
+        <TableCell>Indeterminate</TableCell>
+        <TableCell>
+          <Checkbox {...args} checked indeterminate />
+        </TableCell>
+        <TableCell>
+          <Checkbox
+            {...args}
+            checked
+            indeterminate
+            className="Mui-focusVisible"
+          />
+        </TableCell>
+        <TableCell>
+          <Checkbox {...args} checked indeterminate disabled />
+        </TableCell>
+      </TableRow>
+    </TableBody>
+  </Table>
+);
+
+export const Status = {
+  render: StatusTemplate,
+};
+
+const IndeterminateTemplate: StoryFn<typeof Checkbox> = (args) => {
+  const [checked, setChecked] = React.useState([true, false]);
+
+  const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked([event.target.checked, event.target.checked]);
+  };
+
+  const handleChange2 = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked([event.target.checked, checked[1]]);
+  };
+
+  const handleChange3 = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setChecked([checked[0], event.target.checked]);
+  };
+
+  const children = (
+    <Box sx={{ display: "flex", flexDirection: "column", ml: 3 }}>
+      <FormLabel
+        label="Child 1"
+        control={<Checkbox checked={checked[0]} onChange={handleChange2} />}
+      />
+      <FormLabel
+        label="Child 2"
+        control={<Checkbox checked={checked[1]} onChange={handleChange3} />}
+      />
+    </Box>
+  );
+
+  return (
+    <div>
+      <FormLabel
+        label="Parent"
+        control={
+          <Checkbox
+            checked={checked[0] && checked[1]}
+            indeterminate={checked[0] !== checked[1]}
+            onChange={handleChange1}
+          />
+        }
+      />
+      {children}
+    </div>
+  );
+};
+
+export const Indeterminate = {
+  render: IndeterminateTemplate,
+
+  argTypes: {
+    disabled: {
+      control: false,
+    },
+    checked: {
+      control: false,
+    },
+    indeterminate: {
+      control: false,
+    },
+  },
+};

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

@@ -0,0 +1,68 @@
+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";
+
+export default {
+  title: "Components/Radio",
+  component: RadioGroup,
+  argTypes: {
+    value: {
+      control: {
+        type: "select",
+      },
+      table: { type: { summary: "any" } },
+      options: ["On", "Off"],
+      description:
+        "Value of the selected radio button. The DOM API casts this to a string.",
+    },
+    onChange: {
+      table: { type: { summary: "func" } },
+      description:
+        "Callback fired when the state is changed. Signature: `function(event: React.ChangeEvent<HTMLInputElement>) => void`",
+    },
+  },
+  parameters: {
+    controls: {
+      expanded: true,
+      include: ["value", "onChange"],
+    },
+  },
+  docs: {
+    description: {
+      component: "This component is identical to the MUI RadioGroup component.",
+    },
+  },
+} as Meta<typeof RadioGroup>;
+
+const RadioGroupTemplate: StoryFn<typeof RadioGroup> = (args) => {
+  const [value, setValue] = React.useState("On");
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setValue((event.target as HTMLInputElement).value);
+  };
+
+  useEffect(() => {
+    if (args.value) setValue(args.value);
+  }, [args.value]);
+
+  return (
+    <RadioGroup
+      name="controlled-radio-buttons-group"
+      value={value}
+      onChange={handleChange}
+    >
+      <FormLabel value="On" control={<Radio />} label="On" />
+      <FormLabel value="Off" control={<Radio />} label="Off" />
+      <FormLabel
+        value="(Disabled option)"
+        control={<Radio disabled />}
+        label="(Disabled option)"
+      />
+    </RadioGroup>
+  );
+};
+
+export const ControlledRadioGroup = {
+  render: RadioGroupTemplate,
+};

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

@@ -0,0 +1,93 @@
+import React from "react";
+import {
+  Box,
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableCell,
+} from "@mui/material";
+import Radio from "@/components/Radio";
+import { Meta, StoryFn } from "@storybook/react";
+
+export default {
+  title: "Components/Radio",
+  component: Radio,
+  argTypes: {
+    disabled: {
+      control: "boolean",
+      table: { type: { summary: "bool" }, defaultValue: { summary: "false" } },
+      description: "If true, the component is disabled.",
+    },
+    checked: {
+      control: "boolean",
+      table: { type: { summary: "bool" }, defaultValue: { summary: "false" } },
+      description: "If true, the component is checked.",
+    },
+    onChange: {
+      table: { type: { summary: "func" } },
+      description:
+        "Callback fired when the state is changed. Signature: `function(event: React.ChangeEvent<HTMLInputElement>) => void`",
+    },
+  },
+  args: {
+    disabled: false,
+    checked: false,
+  },
+  parameters: {
+    controls: {
+      expanded: true,
+      include: ["checked", "disabled", "onChange"],
+    },
+  },
+  docs: {
+    description: {
+      component: "This component base is Material UI Radio component.",
+    },
+  },
+} as Meta<typeof Radio>;
+
+const RadioTemplate: StoryFn<typeof Radio> = (args) => {
+  return (
+    <Table sx={{ width: 650 }}>
+      <TableHead>
+        <TableRow>
+          <TableCell></TableCell>
+          <TableCell>Enabled</TableCell>
+          <TableCell>Focuse</TableCell>
+          <TableCell>Disabled</TableCell>
+        </TableRow>
+      </TableHead>
+      <TableBody>
+        <TableRow>
+          <TableCell>On</TableCell>
+          <TableCell>
+            <Radio {...args} checked />
+          </TableCell>
+          <TableCell>
+            <Radio {...args} checked className="Mui-focusVisible" />
+          </TableCell>
+          <TableCell>
+            <Radio {...args} checked disabled />
+          </TableCell>
+        </TableRow>
+        <TableRow>
+          <TableCell>Off</TableCell>
+          <TableCell>
+            <Radio {...args} />
+          </TableCell>
+          <TableCell>
+            <Radio {...args} className="Mui-focusVisible" />
+          </TableCell>
+          <TableCell>
+            <Radio {...args} disabled />
+          </TableCell>
+        </TableRow>
+      </TableBody>
+    </Table>
+  );
+};
+
+export const Status = {
+  render: RadioTemplate,
+};