@lunit/design-system 2.1.0 → 2.2.3

package/src/stories/components/TextField/TextFieldMulti.stories.tsx

@@ -1,87 +1,76 @@
-import React from "react";
-import {
-  Box,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-} from "@mui/material";
+import React from 'react';
+import { Box, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
 
-import TextField from "@/components/TextField/TextField";
+import TextField from '@/components/TextField/TextField';
 
-import type { StoryFn, Meta } from "@storybook/react";
+import type { StoryFn, Meta } from '@storybook/react-webpack5';
 
 export default {
-  title: "Components/TextField",
+  title: 'Components/TextField',
   component: TextField,
   args: {
     disabled: false,
-    size: "small",
-    placeholder: "Please typing...",
-    helperText: "Helper Text",
+    size: 'small',
+    placeholder: 'Please typing...',
+    helperText: 'Helper Text',
     multiline: true,
   },
   argTypes: {
     disabled: {
-      control: {
-        type: "radio",
-      },
+      control: { type: 'radio' },
       options: [true, false],
-      description: "If true, the text field will be disabled.",
+      description: 'If true, the text field will be disabled.',
       table: {
-        defaultValue: { summary: false },
-        type: { summary: [true, false] },
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
       },
     },
     size: {
-      control: {
-        type: "radio",
-      },
-      description: "The size of the text field.",
+      control: { type: 'radio' },
+      options: ['small', 'medium', 'large'],
+      description: 'The size of the text field.',
       table: {
-        defaultValue: { summary: "small" },
-        type: { summary: ["small", "medium", "large"] },
+        defaultValue: { summary: 'small' },
+        type: { summary: 'string' },
       },
     },
     rows: {
-      type: "number",
+      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"] },
+        defaultValue: { summary: 'undefined' },
+        type: { summary: 'number' },
       },
     },
     placeholder: {
-      type: "string",
-      description: "The placeholder content.",
+      type: 'string',
+      description: 'The placeholder content.',
       table: {
-        defaultValue: { summary: "undefined" },
-        type: { summary: "string" },
+        defaultValue: { summary: 'undefined' },
+        type: { summary: 'string' },
       },
     },
     helperText: {
-      type: "string",
-      description:
-        'The helper text content, use "error" or "sub text" to display helper text.',
+      type: 'string',
+      description: 'The helper text content, use "error" or "sub text" to display helper text.',
       table: {
-        defaultValue: { summary: "undefined" },
-        type: { summary: "string" },
+        defaultValue: { summary: 'undefined' },
+        type: { summary: 'string' },
       },
     },
     multiline: {
-      type: "boolean",
-      description: "If true, a textarea element(multi line) will be rendered.",
+      type: 'boolean',
+      description: 'If true, a textarea element(multi line) will be rendered.',
       table: {
-        defaultValue: { summary: "false" },
-        type: { summary: "boolean" },
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
       },
     },
   },
   parameters: {
     controls: {
-      include: ["size", "rows", "disabled", "helperText", "placeholder"],
+      include: ['size', 'rows', 'disabled', 'helperText', 'placeholder'],
     },
     docs: {
       description: {
@@ -98,21 +87,13 @@ 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" }}>
+        <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' }}>
           Error Focused
         </TableCell>
-        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-          Disabled
-        </TableCell>
+        <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>Disabled</TableCell>
       </TableRow>
     </TableHead>
     <TableBody>
@@ -139,5 +120,5 @@ const MultiTemplate: StoryFn<typeof TextField> = (args) => (
 
 export const TextFieldWithMulti = {
   render: MultiTemplate,
-  name: "Multi Line",
+  name: 'Multi Line',
 };

package/src/stories/components/TextField/TextFieldSingle.stories.tsx

@@ -1,78 +1,67 @@
-import React from "react";
-import {
-  Box,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-} from "@mui/material";
-import { action } from "@storybook/addon-actions";
-import { Bell } from "@lunit/design-system-icons";
+import React from 'react';
+import { Box, Table, TableBody, TableCell, TableHead, TableRow } from '@mui/material';
+import { action } from 'storybook/actions';
+import { Bell } from '@lunit/design-system-icons';
 
-import TextField from "@/components/TextField/TextField";
+import TextField from '@/components/TextField/TextField';
 
-import type { StoryFn, Meta } from "@storybook/react";
+import type { StoryFn, Meta } from '@storybook/react-webpack5';
 
 export default {
-  title: "Components/TextField",
+  title: 'Components/TextField',
   component: TextField,
   args: {
     disabled: false,
-    size: "small",
-    placeholder: "Please typing...",
-    helperText: "Helper Text",
+    size: 'small',
+    placeholder: 'Please typing...',
+    helperText: 'Helper Text',
     multiline: false,
   },
   argTypes: {
     disabled: {
-      control: {
-        type: "radio",
-      },
+      control: { type: 'radio' },
       options: [true, false],
-      description: "If true, the text field will be disabled.",
+      description: 'If true, the text field will be disabled.',
       table: {
-        defaultValue: { summary: false },
-        type: { summary: [true, false] },
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
       },
     },
     size: {
-      control: {
-        type: "radio",
-      },
-      description: "The size of the text field.",
+      control: { type: 'radio' },
+      options: ['small', 'medium', 'large'],
+      description: 'The size of the text field.',
       table: {
-        defaultValue: { summary: "small" },
-        type: { summary: ["small", "medium", "large"] },
+        defaultValue: { summary: 'small' },
+        type: { summary: 'string' },
       },
     },
     placeholder: {
-      type: "string",
-      description: "The placeholder content.",
+      type: 'string',
+      description: 'The placeholder content.',
       table: {
-        defaultValue: { summary: "undefined" },
-        type: { summary: "string" },
+        defaultValue: { summary: 'undefined' },
+        type: { summary: 'string' },
       },
     },
     helperText: {
-      type: "string",
-      description:
-        'The helper text content, use "error " or "sub text " to display helper text.',
+      type: 'string',
+      description: 'The helper text content, use "error " or "sub text " to display helper text.',
       table: {
-        defaultValue: { summary: "undefined" },
-        type: { summary: "string" },
+        defaultValue: { summary: 'undefined' },
+        type: { summary: 'string' },
       },
     },
   },
   parameters: {
     controls: {
       include: [
-        "size",
-        "disabled",
-        "helperText",
-        "placeholder",
-        "onLeftIconClick",
-        "onRightIconClick",
+        'size',
+        'disabled',
+        'helperText',
+        'placeholder',
+        'onLeftIconClick',
+        'onRightIconClick',
       ],
     },
     docs: {
@@ -90,21 +79,13 @@ const SingleTemplate: 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" }}>
+        <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' }}>
           Error Focused
         </TableCell>
-        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-          Disabled
-        </TableCell>
+        <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>Disabled</TableCell>
       </TableRow>
     </TableHead>
     <TableBody>
@@ -133,29 +114,19 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
   <Table>
     <TableHead>
       <TableRow>
-        <TableCell></TableCell>
-        <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" }}>
+        <TableCell />
+        <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' }}>
           Error focused
         </TableCell>
-        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-          Disabled
-        </TableCell>
+        <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>Disabled</TableCell>
       </TableRow>
     </TableHead>
     <TableBody>
       <TableRow>
-        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-          Left Icon
-        </TableCell>
+        <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>Left Icon</TableCell>
         <TableCell>
           <TextField {...args} leftIcon={<Bell />} />
         </TableCell>
@@ -173,9 +144,7 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-          Right Icon
-        </TableCell>
+        <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>Right Icon</TableCell>
         <TableCell>
           <TextField {...args} rightIcon={<Bell />} />
         </TableCell>
@@ -193,7 +162,7 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
+        <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>
           Left Right Both Icon
         </TableCell>
         <TableCell>
@@ -203,29 +172,13 @@ const SingleWithIconTemplate: StoryFn<typeof TextField> = (args) => (
           <TextField {...args} error leftIcon={<Bell />} rightIcon={<Bell />} />
         </TableCell>
         <TableCell>
-          <TextField
-            {...args}
-            focused
-            leftIcon={<Bell />}
-            rightIcon={<Bell />}
-          />
+          <TextField {...args} focused leftIcon={<Bell />} rightIcon={<Bell />} />
         </TableCell>
         <TableCell>
-          <TextField
-            {...args}
-            error
-            focused
-            leftIcon={<Bell />}
-            rightIcon={<Bell />}
-          />
+          <TextField {...args} error focused leftIcon={<Bell />} rightIcon={<Bell />} />
         </TableCell>
         <TableCell>
-          <TextField
-            {...args}
-            disabled
-            leftIcon={<Bell />}
-            rightIcon={<Bell />}
-          />
+          <TextField {...args} disabled leftIcon={<Bell />} rightIcon={<Bell />} />
         </TableCell>
       </TableRow>
     </TableBody>
@@ -238,33 +191,33 @@ export const TextFieldWithSingle = {
   argTypes: {
     onLeftIconClick: {
       control: false,
-      options: ["function", undefined],
+      options: ['function', undefined],
       mapping: {
-        function: action("onLeftIconClick"),
+        function: action('onLeftIconClick'),
         undefined: undefined,
       },
-      description: "The left icon click event call back function.",
+      description: 'The left icon click event call back function.',
       table: {
-        defaultValue: { summary: "undefined" },
-        type: { summary: "function" },
+        defaultValue: { summary: 'undefined' },
+        type: { summary: 'function' },
       },
     },
     onRightIconClick: {
       control: false,
-      options: ["function", undefined],
+      options: ['function', undefined],
       mapping: {
-        function: action("onRightIconClick"),
+        function: action('onRightIconClick'),
         undefined: undefined,
       },
-      description: "The right icon click event call back function.",
+      description: 'The right icon click event call back function.',
       table: {
-        defaultValue: { summary: "undefined" },
-        type: { summary: "function" },
+        defaultValue: { summary: 'undefined' },
+        type: { summary: 'function' },
       },
     },
   },
 
-  name: "Single Line",
+  name: 'Single Line',
 };
 
 export const TextFieldWithIcon = {
@@ -273,35 +226,35 @@ export const TextFieldWithIcon = {
   argTypes: {
     onLeftIconClick: {
       control: {
-        type: "select",
+        type: 'select',
       },
-      options: ["function", undefined],
+      options: ['function', undefined],
       mapping: {
-        function: action("onLeftIconClick"),
+        function: action('onLeftIconClick'),
         undefined: undefined,
       },
-      description: "The left icon click event call back function.",
+      description: 'The left icon click event call back function.',
       table: {
-        defaultValue: { summary: "undefined" },
-        type: { summary: "function" },
+        defaultValue: { summary: 'undefined' },
+        type: { summary: 'function' },
       },
     },
     onRightIconClick: {
       control: {
-        type: "select",
+        type: 'select',
       },
-      options: ["function", undefined],
+      options: ['function', undefined],
       mapping: {
-        function: action("onRightIconClick"),
+        function: action('onRightIconClick'),
         undefined: undefined,
       },
-      description: "The right icon click event call back function.",
+      description: 'The right icon click event call back function.',
       table: {
-        defaultValue: { summary: "undefined" },
-        type: { summary: "function" },
+        defaultValue: { summary: 'undefined' },
+        type: { summary: 'function' },
       },
     },
   },
 
-  name: "With Icon(single-line only)",
+  name: 'With Icon(single-line only)',
 };

package/src/stories/components/TextField/TextFieldSize.stories.tsx

@@ -1,67 +1,58 @@
-import React from "react";
-import {
-  Box,
-  Table,
-  TableCell,
-  TableBody,
-  TableHead,
-  TableRow,
-} from "@mui/material";
+import React from 'react';
+import { Box, Table, TableCell, TableBody, TableHead, TableRow } from '@mui/material';
 
-import TextField from "@/components/TextField/TextField";
+import TextField from '@/components/TextField/TextField';
 
-import type { StoryFn, Meta } from "@storybook/react";
+import type { StoryFn, Meta } from '@storybook/react-webpack5';
 
 export default {
-  title: "Components/TextField",
+  title: 'Components/TextField',
   component: TextField,
   args: {
     disabled: false,
-    size: "small",
-    placeholder: "Please typing...",
-    helperText: "Helper Text",
+    size: 'small',
+    placeholder: 'Please typing...',
+    helperText: 'Helper Text',
   },
   argTypes: {
     disabled: {
-      control: {
-        type: "radio",
-      },
+      control: { type: 'radio' },
       options: [true, false],
-      description: "If true, the text field will be disabled.",
+      description: 'If true, the text field will be disabled.',
       table: {
-        defaultValue: { summary: false },
-        type: { summary: [true, false] },
+        defaultValue: { summary: 'false' },
+        type: { summary: 'boolean' },
       },
     },
     size: {
-      control: false,
-      description: "The size of the text field.",
+      control: { type: 'radio' },
+      options: ['small', 'medium', 'large'],
+      description: 'The size of the text field.',
       table: {
-        defaultValue: { summary: "small" },
-        type: { summary: ["small", "medium", "large"] },
+        defaultValue: { summary: 'small' },
+        type: { summary: 'string' },
       },
     },
     placeholder: {
-      type: "string",
-      description: "The placeholder content.",
+      type: 'string',
+      description: 'The placeholder content.',
       table: {
-        defaultValue: { summary: "undefined" },
-        type: { summary: "string" },
+        defaultValue: { summary: 'undefined' },
+        type: { summary: 'string' },
       },
     },
     helperText: {
-      type: "string",
-      description:
-        'The helper text content, use "error " or "sub text " to display helper text.',
+      type: 'string',
+      description: 'The helper text content, use "error " or "sub text " to display helper text.',
       table: {
-        defaultValue: { summary: "undefined" },
-        type: { summary: "string" },
+        defaultValue: { summary: 'undefined' },
+        type: { summary: 'string' },
       },
     },
   },
   parameters: {
     controls: {
-      include: ["size", "disabled", "helperText", "placeholder"],
+      include: ['size', 'disabled', 'helperText', 'placeholder'],
     },
     docs: {
       description: {
@@ -77,24 +68,15 @@ const TextFieldSizeWithTableTemplate: StoryFn<typeof TextField> = (args) => (
   <Table>
     <TableHead>
       <TableRow>
-        <TableCell></TableCell>
-        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-          Small
-        </TableCell>
-        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-          Medium
-        </TableCell>
-        <TableCell sx={{ typography: "body2_14_medium", color: "inherit" }}>
-          Large
-        </TableCell>
+        <TableCell />
+        <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>Small</TableCell>
+        <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>Medium</TableCell>
+        <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }}>Large</TableCell>
       </TableRow>
     </TableHead>
     <TableBody>
       <TableRow>
-        <TableCell
-          sx={{ typography: "body2_14_medium", color: "inherit" }}
-          width={100}
-        >
+        <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }} width={100}>
           Single line
         </TableCell>
         <TableCell>
@@ -108,10 +90,7 @@ const TextFieldSizeWithTableTemplate: StoryFn<typeof TextField> = (args) => (
         </TableCell>
       </TableRow>
       <TableRow>
-        <TableCell
-          sx={{ typography: "body2_14_medium", color: "inherit" }}
-          width={50}
-        >
+        <TableCell sx={{ typography: 'body2_14_medium', color: 'inherit' }} width={50}>
           Multi line
         </TableCell>
         <TableCell>
@@ -130,11 +109,11 @@ const TextFieldSizeWithTableTemplate: StoryFn<typeof TextField> = (args) => (
 
 export const TextFieldSize = {
   render: TextFieldSizeWithTableTemplate,
-  name: "Size",
+  name: 'Size',
 };
 
 const TextFieldSizeTemplate: StoryFn<typeof TextField> = (args) => (
-  <Box sx={{ display: "flex", flexDirection: "column", gap: 4 }}>
+  <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
     <Box>
       <TextField sx={{ mr: 4 }} {...args} />
       <TextField sx={{ mr: 4 }} {...args} size="medium" />
@@ -150,7 +129,7 @@ const TextFieldSizeTemplate: StoryFn<typeof TextField> = (args) => (
 
 export const TextFieldOnlySize = {
   render: TextFieldSizeTemplate,
-  name: "Size Only",
+  name: 'Size Only',
   parameters: {
     chromatic: { disableSnapshot: true },
   },