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

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import DataTable from "@/components/DataTable";
+
+export default {
+  title: "Components/DataTable",
+  component: DataTable,
+} as ComponentMeta<typeof DataTable>;
+
+const Template: ComponentStory<typeof DataTable> = () => <DataTable />;
+
+export const LunitDataTable = Template.bind({});

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import DatePicker from "@/components/DatePicker";
+
+export default {
+  title: "Components/DatePicker",
+  component: DatePicker,
+} as ComponentMeta<typeof DatePicker>;
+
+const Template: ComponentStory<typeof DatePicker> = () => <DatePicker />;
+
+export const LunitDatePicker = Template.bind({});

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

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

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

@@ -0,0 +1,13 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import Modal from "@/components/Modal";
+
+export default {
+  title: "Components/Modal",
+  component: Modal,
+} as ComponentMeta<typeof Modal>;
+
+const Template: ComponentStory<typeof Modal> = () => <Modal />;
+
+export const LunitModal = Template.bind({});

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

@@ -0,0 +1,248 @@
+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 { ComponentMeta, ComponentStory } 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 ComponentMeta<typeof Checkbox>;
+
+const BasicCheckboxTemplate: ComponentStory<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 = BasicCheckboxTemplate.bind({});
+
+const LabelTemplate: ComponentStory<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 = LabelTemplate.bind({});
+
+Label.parameters = {
+  docs: {
+    description: {
+      story: "You can use the `FormControlLabel` component to provide label.",
+    },
+  },
+};
+
+const StatusTemplate: ComponentStory<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 = StatusTemplate.bind({});
+
+const IndeterminateTemplate: ComponentStory<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 = IndeterminateTemplate.bind({});
+
+Indeterminate.argTypes = {
+  disabled: {
+    control: false,
+  },
+  checked: {
+    control: false,
+  },
+  indeterminate: {
+    control: false,
+  },
+};

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

@@ -0,0 +1,67 @@
+import React, { useEffect } from "react";
+import { Box } from "@mui/material";
+import Radio from "@/components/Radio";
+import RadioGroup from "@/components/RadioGroup";
+import FormLabel from "@/components/FormLabel";
+import { ComponentMeta, ComponentStory } 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 ComponentMeta<typeof RadioGroup>;
+
+const RadioGroupTemplate: ComponentStory<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 = RadioGroupTemplate.bind({});

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

@@ -0,0 +1,91 @@
+import React from "react";
+import {
+  Box,
+  Table,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableCell,
+} from "@mui/material";
+import Radio from "@/components/Radio";
+import { ComponentMeta, ComponentStory } 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 ComponentMeta<typeof Radio>;
+
+const RadioTemplate: ComponentStory<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 = RadioTemplate.bind({});