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

package/src/stories/components/Button/IconButton.stories.tsx

@@ -1,20 +1,26 @@
 import React from "react";
-import { Bell } from "@lunit/design-system-icons";
+import Bell from "@lunit/design-system-icons/Bell";
 import { action } from "@storybook/addon-actions";
 
 import Button from "@/components/Button";
 
-import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { StoryFn, Meta } from "@storybook/react";
 
 export default {
   title: "Components/Button",
   component: Button,
+  args: {
+    kind: "contained",
+    color: "primary",
+    disabled: false,
+    size: "small",
+    onClick: action("onClick"),
+  },
   argTypes: {
     icon: {
       control: false,
       description: `Use this prop when you want to add icon.
-        \n It is added to the left of the text criteria,
-        \n and only Icon can be checked when used with hasIconOnly.`,
+      \n It is added to the left of the text criteria`,
       table: {
         defaultValue: { summary: "undefined" },
         type: { summary: "React.ReactNode" },
@@ -26,7 +32,6 @@ export default {
       },
       options: ["contained", "outlined", "ghost"],
       description: "Button has three Kinds Contained, Outlined, Ghost",
-      defaultValue: "contained",
       table: {
         defaultValue: { summary: "contained" },
       },
@@ -36,7 +41,6 @@ export default {
         type: "radio",
       },
       options: ["primary", "secondary", "error"],
-      defaultValue: "primary",
       table: {
         defaultValue: { summary: "primary" },
       },
@@ -45,7 +49,6 @@ export default {
       control: {
         type: "boolean",
       },
-      defaultValue: false,
       table: {
         defaultValue: { summary: "false" },
       },
@@ -55,7 +58,6 @@ export default {
         type: "radio",
       },
       options: ["small", "medium", "large"],
-      defaultValue: "small",
       table: {
         defaultValue: { summary: "small" },
       },
@@ -70,7 +72,6 @@ export default {
         function: action("onClick"),
         undefined: undefined,
       },
-      defaultValue: "function",
       description:
         "It is a callback function that is called when the button is clicked.",
     },
@@ -81,7 +82,6 @@ export default {
         "children",
         "icon",
         "onClick",
-        "hasIconOnly",
         "disabled",
         "size",
         "kind",
@@ -95,34 +95,45 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof Button>;
+} as Meta<typeof Button>;
 
-const IconButtonTemplate: ComponentStory<typeof Button> = (args) => (
+const IconButtonTemplate: StoryFn<typeof Button> = (args) => (
   <Button icon={<Bell />} {...args}>
     {args.children}
   </Button>
 );
 
-export const IconOnlyButton = IconButtonTemplate.bind({});
-IconOnlyButton.argTypes = {
-  children: {
-    control: false,
-    type: "string",
-    table: {
-      defaultValue: { summary: "undefined" },
+export const IconOnlyButton = {
+  render: IconButtonTemplate,
+
+  argTypes: {
+    children: {
+      control: false,
+      type: "string",
+      table: {
+        defaultValue: { summary: "undefined" },
+      },
     },
   },
+
+  name: "Icon only",
 };
-IconOnlyButton.storyName = "Icon only";
 
-export const IconWithTextButton = IconButtonTemplate.bind({});
-IconWithTextButton.argTypes = {
-  children: {
-    type: "string",
-    defaultValue: "Text",
-    table: {
-      defaultValue: { summary: "undefined" },
+export const IconWithTextButton = {
+  render: IconButtonTemplate,
+
+  args: {
+    children: "Text",
+  },
+
+  argTypes: {
+    children: {
+      type: "string",
+      table: {
+        defaultValue: { summary: "undefined" },
+      },
     },
   },
+
+  name: "Icon",
 };
-IconWithTextButton.storyName = "Icon";

package/src/stories/components/Button/Kind.stories.tsx

@@ -1,6 +1,5 @@
 import React from "react";
 import {
-  Box,
   Table,
   TableHead,
   TableRow,
@@ -11,21 +10,26 @@ import { action } from "@storybook/addon-actions";
 
 import Button from "@/components/Button";
 
-import type { ComponentStory, ComponentMeta } from "@storybook/react";
+import type { StoryFn, Meta } from "@storybook/react";
 
 export default {
   title: "Components/Button",
   component: Button,
+  args: {
+    kind: "contained",
+    children: "Text",
+    disabled: false,
+    size: "small",
+    onClick: action("onClick"),
+  },
   argTypes: {
     children: {
       type: "string",
-      defaultValue: "Text",
     },
     disabled: {
       control: {
         type: "boolean",
       },
-      defaultValue: false,
       table: {
         defaultValue: { summary: "false" },
       },
@@ -35,7 +39,6 @@ export default {
         type: "radio",
       },
       options: ["small", "medium", "large"],
-      defaultValue: "small",
       table: {
         defaultValue: { summary: "small" },
       },
@@ -50,7 +53,6 @@ export default {
         function: action("onClick"),
         undefined: undefined,
       },
-      defaultValue: "function",
       description:
         "It is a callback function that is called when the button is clicked.",
     },
@@ -58,7 +60,6 @@ export default {
       control: false,
       options: ["contained", "outlined", "ghost"],
       description: "Button has three Kinds Contained, Outlined, Ghost",
-      defaultValue: "contained",
       table: {
         defaultValue: { summary: "contained" },
       },
@@ -68,6 +69,17 @@ export default {
     controls: {
       include: ["onClick", "children", "color", "size", "disabled", "kind"],
     },
+    pseudo: {
+      hover: [
+        "#hover1",
+        "#hover2",
+        "#hover3",
+        "#hover4",
+        "#hover5",
+        "#hover6",
+        "#hover7",
+      ],
+    },
     docs: {
       description: {
         component: `It is a kind Button docs. For more details, please
@@ -75,9 +87,9 @@ export default {
       },
     },
   },
-} as ComponentMeta<typeof Button>;
+} as Meta<typeof Button>;
 
-const ButtonTemplate: ComponentStory<typeof Button> = ({
+const ButtonTemplate: StoryFn<typeof Button> = ({
   kind,
   color,
   children,
@@ -140,9 +152,11 @@ const ButtonTemplate: ComponentStory<typeof Button> = ({
   );
 };
 
-export const Kind = ButtonTemplate.bind({});
+export const Kind = {
+  render: ButtonTemplate,
+};
 
-const ContainedButtonTemplate: ComponentStory<typeof Button> = (args) => {
+const ContainedButtonTemplate: StoryFn<typeof Button> = (args) => {
   return (
     <>
       <Table sx={{ width: 650 }}>
@@ -190,17 +204,17 @@ const ContainedButtonTemplate: ComponentStory<typeof Button> = (args) => {
               Hover
             </TableCell>
             <TableCell>
-              <Button {...args} id="hover" kind="contained">
+              <Button {...args} id="hover1" kind="contained">
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button {...args} id="hover" kind="contained" color="secondary">
+              <Button {...args} id="hover2" kind="contained" color="secondary">
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button {...args} id="hover" kind="contained" color="error">
+              <Button {...args} id="hover3" kind="contained" color="error">
                 {args.children}
               </Button>
             </TableCell>
@@ -265,23 +279,27 @@ const ContainedButtonTemplate: ComponentStory<typeof Button> = (args) => {
   );
 };
 
-export const KindContained = ContainedButtonTemplate.bind({});
-KindContained.argTypes = {
-  color: {
-    control: "false",
-    options: ["primary", "secondary", "error"],
-    defaultValue: "primary",
-    description: `The color of the component.
-    \n It supports both default and custom theme colors,
-    \n which can be added as shown in the palette customization guide.`,
-    table: {
-      defaultValue: { summary: "primary" },
+export const KindContained = {
+  render: ContainedButtonTemplate,
+
+  argTypes: {
+    color: {
+      control: "false",
+      options: ["primary", "secondary", "error"],
+      defaultValue: "primary",
+      description: `The color of the component.
+      \n It supports both default and custom theme colors,
+      \n which can be added as shown in the palette customization guide.`,
+      table: {
+        defaultValue: { summary: "primary" },
+      },
     },
   },
+
+  name: "Kind: Contained",
 };
-KindContained.storyName = "Kind: Contained";
 
-const GhostButtonTemplate: ComponentStory<typeof Button> = (args) => {
+const GhostButtonTemplate: StoryFn<typeof Button> = (args) => {
   return (
     <>
       <Table sx={{ width: 650 }}>
@@ -329,17 +347,17 @@ const GhostButtonTemplate: ComponentStory<typeof Button> = (args) => {
               Hover
             </TableCell>
             <TableCell>
-              <Button {...args} id="hover" kind="ghost">
+              <Button {...args} id="hover4" kind="ghost">
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button {...args} id="hover" kind="ghost" color="secondary">
+              <Button {...args} id="hover5" kind="ghost" color="secondary">
                 {args.children}
               </Button>
             </TableCell>
             <TableCell>
-              <Button {...args} id="hover" kind="ghost" color="error">
+              <Button {...args} id="hover6" kind="ghost" color="error">
                 {args.children}
               </Button>
             </TableCell>
@@ -406,23 +424,27 @@ const GhostButtonTemplate: ComponentStory<typeof Button> = (args) => {
   );
 };
 
-export const KindGhost = GhostButtonTemplate.bind({});
-KindGhost.argTypes = {
-  color: {
-    control: "false",
-    options: ["primary", "secondary", "error"],
-    description: `The color of the component.
-    \n It supports both default and custom theme colors,
-    \n which can be added as shown in the palette customization guide.`,
-    defaultValue: "primary",
-    table: {
-      defaultValue: { summary: "primary" },
+export const KindGhost = {
+  render: GhostButtonTemplate,
+
+  argTypes: {
+    color: {
+      control: "false",
+      options: ["primary", "secondary", "error"],
+      description: `The color of the component.
+      \n It supports both default and custom theme colors,
+      \n which can be added as shown in the palette customization guide.`,
+      defaultValue: "primary",
+      table: {
+        defaultValue: { summary: "primary" },
+      },
     },
   },
+
+  name: "Kind: Ghost",
 };
-KindGhost.storyName = "Kind: Ghost";
 
-const OutlinedButtonTemplate: ComponentStory<typeof Button> = ({
+const OutlinedButtonTemplate: StoryFn<typeof Button> = ({
   color,
   ...restProps
 }) => {
@@ -457,7 +479,7 @@ const OutlinedButtonTemplate: ComponentStory<typeof Button> = ({
               Hover
             </TableCell>
             <TableCell>
-              <Button {...restProps} id="hover" kind="outlined">
+              <Button {...restProps} id="hover7" kind="outlined">
                 Text
               </Button>
             </TableCell>
@@ -496,19 +518,23 @@ const OutlinedButtonTemplate: ComponentStory<typeof Button> = ({
   );
 };
 
-export const KindOutlined = OutlinedButtonTemplate.bind({});
-KindOutlined.argTypes = {
-  color: {
-    control: "false",
-    options: ["primary"],
-    defaultValue: "primary",
-    description: `The color of the component.
-    \n It supports both default and custom theme colors,
-    \n which can be added as shown in the palette customization guide.`,
-    table: {
-      type: { summary: "primary" },
-      defaultValue: { summary: "primary" },
+export const KindOutlined = {
+  render: OutlinedButtonTemplate,
+
+  argTypes: {
+    color: {
+      control: "false",
+      options: ["primary"],
+      defaultValue: "primary",
+      description: `The color of the component.
+      \n It supports both default and custom theme colors,
+      \n which can be added as shown in the palette customization guide.`,
+      table: {
+        type: { summary: "primary" },
+        defaultValue: { summary: "primary" },
+      },
     },
   },
+
+  name: "Kind: Outlined",
 };
-KindOutlined.storyName = "Kind: Outlined";

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

@@ -1,5 +1,5 @@
 import React from "react";
-import { ComponentStory, ComponentMeta } from "@storybook/react";
+import { Meta } from "@storybook/react";
 import { action } from "@storybook/addon-actions";
 import Chip from "@/components/Chip";
 import {
@@ -11,15 +11,6 @@ import {
   Warning16,
 } from "@lunit/design-system-icons";
 
-import type {
-  OutlinedChipProps,
-  ReadOnlyContainedChipProps,
-  EnableContainedChipProps,
-  DeletableContainedChipProps,
-  ChipProps,
-  ChipThumbnail,
-} from "@/components/Chip/Chip.types";
-
 export default {
   title: "Components/Chips",
   component: Chip,
@@ -31,7 +22,6 @@ export default {
       description: `Contained chip can have onClick event. When Chip is clickable, onDelete is disabled.`,
       control: {
         type: "select",
-        defaultValue: undefined,
       },
       options: ["function", undefined],
       mapping: {
@@ -50,13 +40,11 @@ export default {
         function: action("onDelete"),
         undefined: undefined,
       },
-      defaultValue: null,
     },
 
     thumbnail: {
       control: {
         type: "select",
-        defaultValue: "undefined",
       },
       options: [
         undefined,
@@ -104,93 +92,117 @@ export default {
       expanded: true,
     },
   },
-} as ComponentMeta<typeof Chip>;
+} as Meta<typeof Chip>;
 
-const Template: ComponentStory<typeof Chip> = (args) => <Chip {...args} />;
+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",
+      ],
+    },
+  },
 
-export const Outlined = Template.bind({});
+  args: {
+    color: "primary",
+    kind: "outlined",
+  },
 
-Outlined.parameters = {
-  docs: {
-    description: {
-      story: `Outlined chip only contains label and shows the state of disabled.`,
+  name: "Kind: Outlined",
+};
+
+export const Contained = {
+  parameters: {
+    controls: {
+      exclude: [
+        "thumbnail",
+        "onClick",
+        "onDelete",
+        "disabled",
+        "clickable",
+        "skipFocusWhenDisabled",
+      ],
     },
   },
-  controls: {
-    exclude: [
-      "thumbnail",
-      "onClick",
-      "onDelete",
-      "disabled",
-      "clickable",
-      "skipFocusWhenDisabled",
-    ],
+
+  args: {
+    color: "primary",
+    kind: "contained",
   },
-};
-Outlined.args = {
-  color: "primary",
-  kind: "outlined",
+
+  name: "Kind: Contained / Read Only",
 };
 
-export const Contained = Template.bind({});
-Contained.parameters = {
-  controls: {
-    exclude: [
-      "thumbnail",
-      "onClick",
-      "onDelete",
-      "disabled",
-      "clickable",
-      "skipFocusWhenDisabled",
-    ],
+export const ContainedWithClick = {
+  args: {
+    ...Contained.args,
+    onClick: action("onClick"),
+    onDelete: undefined,
   },
-};
-Contained.args = {
-  color: "primary",
-  kind: "contained",
-};
 
-export const ContainedWithClick = Template.bind({});
-ContainedWithClick.args = {
-  onClick: action("onClick"),
-  onDelete: undefined,
-};
-ContainedWithClick.parameters = {
-  docs: {
-    description: {
-      story: `Contained chip can have onClick event. When Chip is clickable, onDelete is disabled.`,
+  parameters: {
+    docs: {
+      description: {
+        story: `Contained chip can have onClick event. When Chip is clickable, onDelete is disabled.`,
+      },
+    },
+    controls: {
+      exclude: ["onDelete", "deletable"],
     },
   },
-  controls: {
-    exclude: ["onDelete", "deletable"],
-  },
-};
 
-export const ContainedWithDelete = Template.bind({});
-ContainedWithDelete.args = {
-  ...Contained.args,
-  onClick: undefined,
-  onDelete: action("onDelete"),
+  name: "Kind: Contained / Enable",
 };
-ContainedWithDelete.parameters = {
-  docs: {
-    description: {
-      story: `Contained chip can have delete button. When Chip is deletable, onClick is disabled.`,
-    },
+
+export const ContainedWithDelete = {
+  args: {
+    ...Contained.args,
+    onClick: undefined,
+    onDelete: action("onDelete"),
   },
-  controls: {
-    exclude: ["onClick", "clickable"],
+
+  parameters: {
+    docs: {
+      description: {
+        story: `Contained chip can have delete button. When Chip is deletable, onClick is disabled.`,
+      },
+    },
+    controls: {
+      exclude: ["onClick", "clickable"],
+    },
   },
-};
 
-export const ContainedWithThumbnail = Template.bind({});
-ContainedWithThumbnail.args = {
-  thumbnail: "Initial",
+  name: "Kind: Contained / Deletable",
 };
-ContainedWithThumbnail.parameters = {
-  docs: {
-    description: {
-      story: `Contained chip can have thumbnail as "avatar", "logo", and lunit icons.`,
+
+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

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

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

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