@lunit/design-system 2.2.0 → 2.2.3

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

@@ -1,21 +1,21 @@
-import React from "react";
-import { action } from "storybook/actions";
-import { Box } from "@mui/material";
+import React from 'react';
+import { action } from 'storybook/actions';
+import { Box } from '@mui/material';
 
-import Button from "@/components/Button";
+import Button from '@/components/Button';
 
-import type { StoryObj, StoryFn, Meta } from "@storybook/react-webpack5";
+import type { StoryObj, StoryFn, Meta } from '@storybook/react-webpack5';
 
 export default {
-  title: "Components/Button",
+  title: 'Components/Button',
   component: Button,
   args: {
-    kind: "contained",
-    children: "Text",
-    color: "primary",
+    kind: 'contained',
+    children: 'Text',
+    color: 'primary',
     disabled: false,
-    size: "small",
-    onClick: action("onClick"),
+    size: 'small',
+    onClick: action('onClick'),
   },
   argTypes: {
     icon: {
@@ -23,90 +23,80 @@ export default {
       description: `Use this prop when you want to add icon.
         \n It is added to the left of the text criteria`,
       table: {
-        defaultValue: { summary: "undefined" },
-        type: { summary: "React.ReactNode" },
+        defaultValue: { summary: 'undefined' },
+        type: { summary: 'React.ReactNode' },
       },
     },
     children: {
-      description: "The content of the component.",
-      type: "string",
+      description: 'The content of the component.',
+      type: 'string',
     },
     kind: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["contained", "outlined", "ghost"],
-      description: "Button has three Kinds Contained, Outlined, Ghost",
+      options: ['contained', 'outlined', 'ghost'],
+      description: 'Button has three Kinds Contained, Outlined, Ghost',
       table: {
-        defaultValue: { summary: "contained" },
+        defaultValue: { summary: 'contained' },
       },
     },
     variant: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["contained", "outlined", "text", "ghost"],
-      description: "The variant is alias of kind.",
+      options: ['contained', 'outlined', 'text', 'ghost'],
+      description: 'The variant is alias of kind.',
       table: {
-        defaultValue: { summary: "contained" },
+        defaultValue: { summary: 'contained' },
       },
     },
     color: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
       description: `The color of the component. It supports both default and custom theme colors,
         \nwhich can be added as shown in the palette customization guide.`,
-      options: ["primary", "secondary", "error"],
+      options: ['primary', 'secondary', 'error'],
       table: {
-        defaultValue: { summary: "primary" },
+        defaultValue: { summary: 'primary' },
       },
     },
     disabled: {
       control: {
-        type: "boolean",
+        type: 'boolean',
       },
-      description: "If true, the button will be disabled.",
+      description: 'If true, the button will be disabled.',
       table: {
-        defaultValue: { summary: "false" },
+        defaultValue: { summary: 'false' },
       },
     },
     size: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      description: "The size of the button.",
-      options: ["small", "medium", "large"],
+      description: 'The size of the button.',
+      options: ['small', 'medium', 'large'],
       table: {
-        defaultValue: { summary: "small" },
+        defaultValue: { summary: 'small' },
       },
     },
     onClick: {
-      type: "function",
+      type: 'function',
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["function", undefined],
+      options: ['function', undefined],
       mapping: {
-        function: action("onClick"),
+        function: action('onClick'),
         undefined: undefined,
       },
-      description:
-        "It is a callback function that is called when the button is clicked.",
+      description: 'It is a callback function that is called when the button is clicked.',
     },
   },
   parameters: {
     controls: {
-      include: [
-        "onClick",
-        "children",
-        "disabled",
-        "size",
-        "kind",
-        "variant",
-        "color",
-        "icon",
-      ],
+      include: ['onClick', 'children', 'disabled', 'size', 'kind', 'variant', 'color', 'icon'],
     },
     docs: {
       description: {
@@ -122,17 +112,18 @@ export const BasicButton: StoryObj<typeof Button> = {
 };
 
 const DisabledButtonTemplate: StoryFn<typeof Button> = (args) => {
-  const { children, kind, variant, ...restArgs } = args;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { children, variant, ...restArgs } = args;
 
   return (
-    <Box sx={{ display: "flex", gap: 2 }}>
+    <Box sx={{ display: 'flex', gap: 2 }}>
       <Button {...restArgs} disabled kind="contained">
         {children}
       </Button>
       <Button
         {...restArgs}
         disabled
-        color={args.color === "error" ? "primary" : args.color}
+        color={args.color === 'error' ? 'primary' : args.color}
         kind="outlined"
       >
         {children}
@@ -148,16 +139,17 @@ export const Disabled: StoryObj<typeof Button> = {
   render: DisabledButtonTemplate,
   parameters: {
     controls: {
-      include: ["onClick", "children", "size", "color"],
+      include: ['onClick', 'children', 'size', 'color'],
     },
   },
 };
 
 const SizeButtonTemplate: StoryFn<typeof Button> = (args) => {
-  const { children, kind, variant, color, ...restArgs } = args;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { kind, ...restArgs } = args;
 
   return (
-    <Box sx={{ display: "flex", flexDirection: "column", gap: 4 }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
       <Box>
         <Button sx={{ mr: 2 }} {...restArgs} variant="contained" size="small">
           Small
@@ -170,13 +162,30 @@ const SizeButtonTemplate: StoryFn<typeof Button> = (args) => {
         </Button>
       </Box>
       <Box>
-        <Button sx={{ mr: 2 }} {...restArgs} variant="outlined" size="small">
+        <Button
+          sx={{ mr: 2 }}
+          {...restArgs}
+          variant="outlined"
+          size="small"
+          color={args.color === 'error' ? 'primary' : args.color}
+        >
           Small
         </Button>
-        <Button sx={{ mr: 2 }} {...restArgs} variant="outlined" size="medium">
+        <Button
+          sx={{ mr: 2 }}
+          {...restArgs}
+          variant="outlined"
+          size="medium"
+          color={args.color === 'error' ? 'primary' : args.color}
+        >
           Medium
         </Button>
-        <Button {...restArgs} variant="outlined" size="large">
+        <Button
+          {...restArgs}
+          variant="outlined"
+          size="large"
+          color={args.color === 'error' ? 'primary' : args.color}
+        >
           Large
         </Button>
       </Box>
@@ -199,7 +208,7 @@ export const Size = {
   render: SizeButtonTemplate,
   parameters: {
     controls: {
-      include: ["onClick", "disabled", "icon"],
+      include: ['onClick', 'disabled', 'icon'],
     },
   },
 };

package/src/stories/components/Button/ButtonDocs.mdx

@@ -1,12 +1,12 @@
-import { Canvas, Stories, Controls, Meta, Story } from "@storybook/addon-docs/blocks";
-import Box from "@mui/material/Box";
-import Bell from "@lunit/design-system-icons/Bell";
+import { Canvas, Stories, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import Box from '@mui/material/Box';
+import Bell from '@lunit/design-system-icons/Bell';
 
-import Button from "@/components/Button";
-import * as ButtonStories from "./BasicButton.stories";
-import * as ButtonKindStories from "./Kind.stories";
-import * as ButtonColorStories from "./Color.stories";
-import * as ButtonIconStories from "./IconButton.stories";
+import Button from '@/components/Button';
+import * as ButtonStories from './BasicButton.stories';
+import * as ButtonKindStories from './Kind.stories';
+import * as ButtonColorStories from './Color.stories';
+import * as ButtonIconStories from './IconButton.stories';
 
 <Meta name="Button Docs" of={ButtonStories} />
 
@@ -19,9 +19,9 @@ Buttons allow users to take actions, and make choices, with a single tap.
 ### Basic Button
 
 ```tsx
-import { Button } from "@lunit/design-system";
+import { Button } from '@lunit/design-system';
 // or
-import Button from "@lunit/design-system/Button";
+import Button from '@lunit/design-system/Button';
 
 <Button>Button</Button>;
 ```
@@ -39,11 +39,7 @@ In our design system Figma, we use `variant` and `kind` together, They are the *
 Using the `variant` or `kind` prop, you can change the variant of the Button.<br />
 Default variant(kind) is `contained`.
 
-<Canvas
-  of={ButtonKindStories.Kind}
-  meta={ButtonKindStories}
-  sourceState="none"
-/>
+<Canvas of={ButtonKindStories.Kind} meta={ButtonKindStories} sourceState="none" />
 
 ```tsx
 <Button variant="contained">Text</Button>
@@ -64,11 +60,7 @@ Using the `color` prop, you can change the color of the Button.<br />
 Outline vairant does not have error color state.<br />
 Default color is `primary`.
 
-<Canvas
-  of={ButtonColorStories.Color}
-  meta={ButtonColorStories}
-  sourceState="none"
-/>
+<Canvas of={ButtonColorStories.Color} meta={ButtonColorStories} sourceState="none" />
 
 ```tsx
 // Contained
@@ -116,11 +108,7 @@ Default size is `small`.
 
 If you want to use an icon and text together, you can use the `icon` prop and `children` prop.
 
-<Canvas
-  of={ButtonIconStories.IconWithTextButton}
-  meta={ButtonIconStories}
-  sourceState="none"
-/>
+<Canvas of={ButtonIconStories.IconWithTextButton} meta={ButtonIconStories} sourceState="none" />
 
 ```tsx
 <Button variant="contained" icon={<Bell />}>Contained</Button>
@@ -132,11 +120,7 @@ If you want to use an icon and text together, you can use the `icon` prop and `c
 
 If you want to use only an icon, you can use the `icon` prop.
 
-<Canvas
-  of={ButtonIconStories.IconOnlyButton}
-  meta={ButtonIconStories}
-  sourceState="none"
-/>
+<Canvas of={ButtonIconStories.IconOnlyButton} meta={ButtonIconStories} sourceState="none" />
 
 ```tsx
 <Button variant="contained" icon={<Bell />} />
@@ -149,11 +133,7 @@ If you want to use only an icon, you can use the `icon` prop.
 If you want to disable the button, you can use the `disabled` prop.<br />
 Default disabled is `false`.
 
-<Canvas
-  of={ButtonStories.Disabled}
-  meta={ButtonIconStories}
-  sourceState="none"
-/>
+<Canvas of={ButtonStories.Disabled} meta={ButtonIconStories} sourceState="none" />
 
 ```tsx
 <Button variant="contained" disabled>Text</Button>
@@ -165,14 +145,10 @@ Default disabled is `false`.
 
 If you want to add an event to the button, you can use the `onClick` prop.
 
-<Canvas
-  of={ButtonKindStories.Kind}
-  meta={ButtonKindStories}
-  sourceState="none"
-/>
+<Canvas of={ButtonKindStories.Kind} meta={ButtonKindStories} sourceState="none" />
 
 ```tsx
-<Button onClick={() => console.log("onClick")}>Text</Button>
+<Button onClick={() => console.log('onClick')}>Text</Button>
 ```
 
 ## Reference

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

@@ -1,69 +1,60 @@
-import React from "react";
-import { Box } from "@mui/material";
-import { action } from "storybook/actions";
+import React from 'react';
+import { Box } from '@mui/material';
+import { action } from 'storybook/actions';
 
-import Button from "@/components/Button";
+import Button from '@/components/Button';
 
-import type { StoryFn, Meta } from "@storybook/react-webpack5";
+import type { StoryFn, Meta } from '@storybook/react-webpack5';
 
 export default {
-  title: "Components/Button",
+  title: 'Components/Button',
   component: Button,
   args: {
-    children: "Text",
+    children: 'Text',
     disabled: false,
-    size: "small",
-    onClick: action("onClick"),
+    size: 'small',
+    onClick: action('onClick'),
   },
   argTypes: {
     children: {
-      type: "string",
+      type: 'string',
     },
     disabled: {
       control: {
-        type: "boolean",
+        type: 'boolean',
       },
       table: {
-        defaultValue: { summary: "false" },
+        defaultValue: { summary: 'false' },
       },
     },
     size: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["small", "medium", "large"],
+      options: ['small', 'medium', 'large'],
       table: {
-        defaultValue: { summary: "small" },
+        defaultValue: { summary: 'small' },
       },
     },
     onClick: {
-      type: "function",
+      type: 'function',
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["function", undefined],
+      options: ['function', undefined],
       mapping: {
-        function: action("onClick"),
+        function: action('onClick'),
         undefined: undefined,
       },
-      description:
-        "It is a callback function that is called when the button is clicked.",
+      description: 'It is a callback function that is called when the button is clicked.',
     },
   },
   parameters: {
     controls: {
-      include: ["onClick", "children", "size", "disabled", "kind", "variant"],
+      include: ['onClick', 'children', 'size', 'disabled', 'kind', 'variant'],
     },
     pseudo: {
-      hover: [
-        "#hover1",
-        "#hover2",
-        "#hover3",
-        "#hover4",
-        "#hover5",
-        "#hover6",
-        "#hover7",
-      ],
+      hover: ['#hover1', '#hover2', '#hover3', '#hover4', '#hover5', '#hover6', '#hover7'],
     },
     docs: {
       description: {
@@ -75,24 +66,15 @@ export default {
 } as Meta<typeof Button>;
 
 const ColorButtonTemplate: StoryFn<typeof Button> = (args) => {
-  const { children, kind, variant, ...restArgs } = args;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { children, kind, ...restArgs } = args;
   return (
-    <Box sx={{ display: "flex", flexDirection: "column", gap: 4 }}>
+    <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
       <Box>
-        <Button
-          sx={{ mr: 2 }}
-          {...restArgs}
-          variant="contained"
-          color="primary"
-        >
+        <Button sx={{ mr: 2 }} {...restArgs} variant="contained" color="primary">
           {children}
         </Button>
-        <Button
-          sx={{ mr: 2 }}
-          {...restArgs}
-          variant="contained"
-          color="secondary"
-        >
+        <Button sx={{ mr: 2 }} {...restArgs} variant="contained" color="secondary">
           {children}
         </Button>
         <Button {...restArgs} variant="contained" color="error">
@@ -103,12 +85,7 @@ const ColorButtonTemplate: StoryFn<typeof Button> = (args) => {
         <Button sx={{ mr: 2 }} {...restArgs} variant="outlined" color="primary">
           {children}
         </Button>
-        <Button
-          sx={{ mr: 2 }}
-          {...restArgs}
-          variant="outlined"
-          color="secondary"
-        >
+        <Button sx={{ mr: 2 }} {...restArgs} variant="outlined" color="secondary">
           {children}
         </Button>
       </Box>

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

@@ -1,20 +1,20 @@
-import React from "react";
-import Bell from "@lunit/design-system-icons/Bell";
-import { action } from "storybook/actions";
+import React from 'react';
+import Bell from '@lunit/design-system-icons/Bell';
+import { action } from 'storybook/actions';
 
-import Button from "@/components/Button";
+import Button from '@/components/Button';
 
-import type { StoryFn, Meta } from "@storybook/react-webpack5";
-import { Box } from "@mui/material";
+import type { StoryFn, Meta } from '@storybook/react-webpack5';
+import { Box } from '@mui/material';
 
 export default {
-  title: "Components/Button",
+  title: 'Components/Button',
   component: Button,
   args: {
-    color: "primary",
+    color: 'primary',
     disabled: false,
-    size: "small",
-    onClick: action("onClick"),
+    size: 'small',
+    onClick: action('onClick'),
   },
   argTypes: {
     icon: {
@@ -22,61 +22,52 @@ export default {
       description: `Use this prop when you want to add icon.
       \n It is added to the left of the text criteria`,
       table: {
-        defaultValue: { summary: "undefined" },
-        type: { summary: "React.ReactNode" },
+        defaultValue: { summary: 'undefined' },
+        type: { summary: 'React.ReactNode' },
       },
     },
     color: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["primary", "secondary", "error"],
+      options: ['primary', 'secondary', 'error'],
       table: {
-        defaultValue: { summary: "primary" },
+        defaultValue: { summary: 'primary' },
       },
     },
     disabled: {
       control: {
-        type: "boolean",
+        type: 'boolean',
       },
       table: {
-        defaultValue: { summary: "false" },
+        defaultValue: { summary: 'false' },
       },
     },
     size: {
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["small", "medium", "large"],
+      options: ['small', 'medium', 'large'],
       table: {
-        defaultValue: { summary: "small" },
+        defaultValue: { summary: 'small' },
       },
     },
     onClick: {
-      type: "function",
+      type: 'function',
       control: {
-        type: "radio",
+        type: 'radio',
       },
-      options: ["function", undefined],
+      options: ['function', undefined],
       mapping: {
-        function: action("onClick"),
+        function: action('onClick'),
         undefined: undefined,
       },
-      description:
-        "It is a callback function that is called when the button is clicked.",
+      description: 'It is a callback function that is called when the button is clicked.',
     },
   },
   parameters: {
     controls: {
-      include: [
-        "icon",
-        "onClick",
-        "disabled",
-        "size",
-        "kind",
-        "variant",
-        "color",
-      ],
+      include: ['icon', 'onClick', 'disabled', 'size', 'kind', 'variant', 'color'],
     },
     docs: {
       description: {
@@ -88,17 +79,18 @@ export default {
 } as Meta<typeof Button>;
 
 const IconButtonTemplate: StoryFn<typeof Button> = (args) => {
-  const { variant, kind, ...restArgs } = args;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { variant, ...restArgs } = args;
 
   return (
-    <Box sx={{ display: "flex", gap: 2 }}>
+    <Box sx={{ display: 'flex', gap: 2 }}>
       <Button icon={<Bell />} {...restArgs} kind="contained">
         Contained
       </Button>
       <Button
         icon={<Bell />}
         {...restArgs}
-        color={args.color === "error" ? "primary" : args.color}
+        color={args.color === 'error' ? 'primary' : args.color}
         kind="outlined"
       >
         Outlined
@@ -111,15 +103,16 @@ const IconButtonTemplate: StoryFn<typeof Button> = (args) => {
 };
 
 const IconOnlyButtonTemplate: StoryFn<typeof Button> = (args) => {
-  const { variant, kind, ...restArgs } = args;
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars, no-unused-vars
+  const { variant, ...restArgs } = args;
 
   return (
-    <Box sx={{ display: "flex", gap: 2 }}>
+    <Box sx={{ display: 'flex', gap: 2 }}>
       <Button icon={<Bell />} {...restArgs} kind="contained" />
       <Button
         icon={<Bell />}
         {...restArgs}
-        color={args.color === "error" ? "primary" : args.color}
+        color={args.color === 'error' ? 'primary' : args.color}
         kind="outlined"
       />
       <Button icon={<Bell />} {...restArgs} kind="ghost" />
@@ -132,25 +125,25 @@ export const IconOnlyButton = {
   argTypes: {
     children: {
       control: false,
-      type: "string",
+      type: 'string',
       table: {
-        defaultValue: { summary: "undefined" },
+        defaultValue: { summary: 'undefined' },
       },
     },
   },
-  name: "Icon only",
+  name: 'Icon only',
 };
 
 export const IconWithTextButton = {
   render: IconButtonTemplate,
   argTypes: {
     children: {
-      type: "string",
+      type: 'string',
       table: {
-        defaultValue: { summary: "undefined" },
+        defaultValue: { summary: 'undefined' },
       },
     },
   },
 
-  name: "Icon",
+  name: 'Icon',
 };