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

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

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

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

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

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

@@ -9,7 +9,7 @@ import {
 } from "@mui/material";
 import Checkbox from "@/components/Checkbox";
 import FormLabel from "@/components/FormLabel";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 export default {
   title: "Components/Checkbox",
@@ -80,9 +80,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof Checkbox>;
+} as Meta<typeof Checkbox>;
 
-const BasicCheckboxTemplate: ComponentStory<typeof Checkbox> = (args) => {
+const BasicCheckboxTemplate: StoryFn<typeof Checkbox> = (args) => {
   const [checked, setChecked] = useState(false);
 
   useEffect(() => {
@@ -98,9 +98,11 @@ const BasicCheckboxTemplate: ComponentStory<typeof Checkbox> = (args) => {
   );
 };
 
-export const BasicCheckbox = BasicCheckboxTemplate.bind({});
+export const BasicCheckbox = {
+  render: BasicCheckboxTemplate,
+};
 
-const LabelTemplate: ComponentStory<typeof Checkbox> = (args) => {
+const LabelTemplate: StoryFn<typeof Checkbox> = (args) => {
   const [checked, setChecked] = useState(false);
   useEffect(() => {
     setChecked(Boolean(args.checked));
@@ -120,17 +122,19 @@ const LabelTemplate: ComponentStory<typeof Checkbox> = (args) => {
   );
 };
 
-export const Label = LabelTemplate.bind({});
+export const Label = {
+  render: LabelTemplate,
 
-Label.parameters = {
-  docs: {
-    description: {
-      story: "You can use the `FormControlLabel` component to provide label.",
+  parameters: {
+    docs: {
+      description: {
+        story: "You can use the `FormControlLabel` component to provide label.",
+      },
     },
   },
 };
 
-const StatusTemplate: ComponentStory<typeof Checkbox> = (args) => (
+const StatusTemplate: StoryFn<typeof Checkbox> = (args) => (
   <Table sx={{ width: 650 }}>
     <TableHead>
       <TableRow>
@@ -186,9 +190,11 @@ const StatusTemplate: ComponentStory<typeof Checkbox> = (args) => (
   </Table>
 );
 
-export const Status = StatusTemplate.bind({});
+export const Status = {
+  render: StatusTemplate,
+};
 
-const IndeterminateTemplate: ComponentStory<typeof Checkbox> = (args) => {
+const IndeterminateTemplate: StoryFn<typeof Checkbox> = (args) => {
   const [checked, setChecked] = React.useState([true, false]);
 
   const handleChange1 = (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -233,16 +239,18 @@ const IndeterminateTemplate: ComponentStory<typeof Checkbox> = (args) => {
   );
 };
 
-export const Indeterminate = IndeterminateTemplate.bind({});
+export const Indeterminate = {
+  render: IndeterminateTemplate,
 
-Indeterminate.argTypes = {
-  disabled: {
-    control: false,
-  },
-  checked: {
-    control: false,
-  },
-  indeterminate: {
-    control: false,
+  argTypes: {
+    disabled: {
+      control: false,
+    },
+    checked: {
+      control: false,
+    },
+    indeterminate: {
+      control: false,
+    },
   },
 };

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

@@ -1,9 +1,8 @@
 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";
+import { Meta, StoryFn } from "@storybook/react";
 
 export default {
   title: "Components/Radio",
@@ -35,9 +34,9 @@ export default {
       component: "This component is identical to the MUI RadioGroup component.",
     },
   },
-} as ComponentMeta<typeof RadioGroup>;
+} as Meta<typeof RadioGroup>;
 
-const RadioGroupTemplate: ComponentStory<typeof RadioGroup> = (args) => {
+const RadioGroupTemplate: StoryFn<typeof RadioGroup> = (args) => {
   const [value, setValue] = React.useState("On");
   const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     setValue((event.target as HTMLInputElement).value);
@@ -64,4 +63,6 @@ const RadioGroupTemplate: ComponentStory<typeof RadioGroup> = (args) => {
   );
 };
 
-export const ControlledRadioGroup = RadioGroupTemplate.bind({});
+export const ControlledRadioGroup = {
+  render: RadioGroupTemplate,
+};

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

@@ -8,7 +8,7 @@ import {
   TableCell,
 } from "@mui/material";
 import Radio from "@/components/Radio";
-import { ComponentMeta, ComponentStory } from "@storybook/react";
+import { Meta, StoryFn } from "@storybook/react";
 
 export default {
   title: "Components/Radio",
@@ -45,9 +45,9 @@ export default {
       component: "This component base is Material UI Radio component.",
     },
   },
-} as ComponentMeta<typeof Radio>;
+} as Meta<typeof Radio>;
 
-const RadioTemplate: ComponentStory<typeof Radio> = (args) => {
+const RadioTemplate: StoryFn<typeof Radio> = (args) => {
   return (
     <Table sx={{ width: 650 }}>
       <TableHead>
@@ -88,4 +88,6 @@ const RadioTemplate: ComponentStory<typeof Radio> = (args) => {
   );
 };
 
-export const Status = RadioTemplate.bind({});
+export const Status = {
+  render: RadioTemplate,
+};

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

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { StoryFn, Meta } from "@storybook/react";
 import Toggle from "@/components/Toggle/Toggle";
 import {
   Box,
@@ -41,7 +41,6 @@ export default {
         type: "boolean",
       },
       description: "If `true`, the component is disabled.",
-      defaultValue: false,
       options: [true, false],
     },
   },
@@ -62,9 +61,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof Toggle>;
+} as Meta<typeof Toggle>;
 
-const BaseTemplate: ComponentStory<typeof Toggle> = (args) => {
+const BaseTemplate: StoryFn<typeof Toggle> = (args) => {
   const [checked, setChecked] = useState(false);
   useEffect(() => {
     setChecked(Boolean(args.checked));
@@ -92,7 +91,7 @@ const BaseTemplate: ComponentStory<typeof Toggle> = (args) => {
   );
 };
 
-const Template: ComponentStory<typeof Toggle> = (args) => (
+const Template: StoryFn<typeof Toggle> = (args) => (
   <Table>
     <TableHead>
       <TableRow>
@@ -155,7 +154,7 @@ const Template: ComponentStory<typeof Toggle> = (args) => (
   </Table>
 );
 
-const DisabledTemplate: ComponentStory<typeof Toggle> = (args) => (
+const DisabledTemplate: StoryFn<typeof Toggle> = (args) => (
   <Table>
     <TableHead>
       <TableRow>
@@ -194,7 +193,7 @@ const DisabledTemplate: ComponentStory<typeof Toggle> = (args) => (
   </Table>
 );
 
-const TemplateWithLabel: ComponentStory<typeof Toggle> = (args) => (
+const TemplateWithLabel: StoryFn<typeof Toggle> = (args) => (
   <Table>
     <TableHead>
       <TableRow>
@@ -296,7 +295,7 @@ const TemplateWithLabel: ComponentStory<typeof Toggle> = (args) => (
   </Table>
 );
 
-const IndeterminateTemplate: ComponentStory<typeof Toggle> = (args) => {
+const IndeterminateTemplate: StoryFn<typeof Toggle> = (args) => {
   const [checked, setChecked] = useState([true, false, false]);
 
   const handleChange1 = () => {
@@ -411,19 +410,34 @@ const IndeterminateTemplate: ComponentStory<typeof Toggle> = (args) => {
   );
 };
 
-export const ToggleBase = BaseTemplate.bind({});
-export const ToggleEnabled = Template.bind({});
-export const ToggleDisabled = DisabledTemplate.bind({});
-ToggleDisabled.args = {
-  disabled: true,
+export const ToggleBase = {
+  render: BaseTemplate,
 };
 
-export const ToggleWithLabel = TemplateWithLabel.bind({});
-export const ToggleWithLabelAndIndeterminate = IndeterminateTemplate.bind({});
-ToggleWithLabelAndIndeterminate.parameters = {
-  docs: {
-    description: {
-      story: "Usage is same with Toggle",
+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",
+};