@lunit/design-system 2.1.0 → 2.2.3

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

@@ -1,64 +1,51 @@
-import React, { useEffect } from "react";
-import Radio from "@/components/Radio";
-import RadioGroup from "@/components/RadioGroup";
-import FormLabel from "@/components/FormLabel";
-import { Meta, StoryFn } from "@storybook/react";
+import React from 'react';
+import Radio from '@/components/Radio';
+import RadioGroup from '@/components/RadioGroup';
+import FormLabel from '@/components/FormLabel';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 
 export default {
-  title: "Components/Radio",
+  title: 'Components/Radio',
   component: RadioGroup,
   argTypes: {
     value: {
       control: {
-        type: "select",
+        type: 'select',
       },
-      table: { type: { summary: "any" } },
-      options: ["On", "Off"],
-      description:
-        "Value of the selected radio button. The DOM API casts this to a string.",
+      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" } },
+      table: { type: { summary: 'func' } },
       description:
-        "Callback fired when the state is changed. Signature: `function(event: React.ChangeEvent<HTMLInputElement>) => void`",
+        'Callback fired when the state is changed. Signature: `function(event: React.ChangeEvent<HTMLInputElement>) => void`',
     },
   },
   parameters: {
     controls: {
       expanded: true,
-      include: ["value", "onChange"],
+      include: ['value', 'onChange'],
     },
   },
   docs: {
     description: {
-      component: "This component is identical to the MUI RadioGroup component.",
+      component: 'This component is identical to the MUI RadioGroup component.',
     },
   },
 } as Meta<typeof RadioGroup>;
 
 const RadioGroupTemplate: StoryFn<typeof RadioGroup> = (args) => {
-  const [value, setValue] = React.useState("On");
+  const [value, setValue] = React.useState(args.value || '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}
-    >
+    <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)"
-      />
+      <FormLabel value="(Disabled option)" control={<Radio disabled />} label="(Disabled option)" />
     </RadioGroup>
   );
 };

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

@@ -1,33 +1,26 @@
-import React from "react";
-import {
-  Box,
-  Table,
-  TableHead,
-  TableRow,
-  TableBody,
-  TableCell,
-} from "@mui/material";
-import Radio from "@/components/Radio";
-import { Meta, StoryFn } from "@storybook/react";
+import React from 'react';
+import { Table, TableHead, TableRow, TableBody, TableCell } from '@mui/material';
+import Radio from '@/components/Radio';
+import { Meta, StoryFn } from '@storybook/react-webpack5';
 
 export default {
-  title: "Components/Radio",
+  title: 'Components/Radio',
   component: Radio,
   argTypes: {
     disabled: {
-      control: "boolean",
-      table: { type: { summary: "bool" }, defaultValue: { summary: "false" } },
-      description: "If true, the component is 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.",
+      control: 'boolean',
+      table: { type: { summary: 'bool' }, defaultValue: { summary: 'false' } },
+      description: 'If true, the component is checked.',
     },
     onChange: {
-      table: { type: { summary: "func" } },
+      table: { type: { summary: 'func' } },
       description:
-        "Callback fired when the state is changed. Signature: `function(event: React.ChangeEvent<HTMLInputElement>) => void`",
+        'Callback fired when the state is changed. Signature: `function(event: React.ChangeEvent<HTMLInputElement>) => void`',
     },
   },
   args: {
@@ -37,12 +30,12 @@ export default {
   parameters: {
     controls: {
       expanded: true,
-      include: ["checked", "disabled", "onChange"],
+      include: ['checked', 'disabled', 'onChange'],
     },
   },
   docs: {
     description: {
-      component: "This component base is Material UI Radio component.",
+      component: 'This component base is Material UI Radio component.',
     },
   },
 } as Meta<typeof Radio>;
@@ -52,7 +45,7 @@ const RadioTemplate: StoryFn<typeof Radio> = (args) => {
     <Table sx={{ width: 650 }}>
       <TableHead>
         <TableRow>
-          <TableCell></TableCell>
+          <TableCell />
           <TableCell>Enabled</TableCell>
           <TableCell>Focuse</TableCell>
           <TableCell>Disabled</TableCell>

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

@@ -1,25 +1,17 @@
-import React, { useEffect, useState } from "react";
-import { StoryFn, Meta } from "@storybook/react";
-import Toggle from "@/components/Toggle/Toggle";
-import {
-  Box,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  TextField,
-} from "@mui/material";
-import FormLabel from "@/components/FormLabel";
-import { action } from "@storybook/addon-actions";
+import React, { useState } from 'react';
+import { StoryFn, Meta } from '@storybook/react-webpack5';
+import Toggle from '@/components/Toggle/Toggle';
+import { Box, Table, TableBody, TableCell, TableHead, TableRow, TextField } from '@mui/material';
+import FormLabel from '@/components/FormLabel';
+import { action } from 'storybook/actions';
 
 export default {
-  title: "Components/Toggle",
+  title: 'Components/Toggle',
   component: Toggle,
   argTypes: {
     checked: {
       control: {
-        type: "select",
+        type: 'select',
       },
       options: [true, false, undefined],
       description:
@@ -27,31 +19,31 @@ export default {
     },
     onChange: {
       control: {
-        type: "select",
+        type: 'select',
       },
-      options: ["function", undefined],
+      options: ['function', undefined],
       mapping: {
-        function: action("onChange"),
+        function: action('onChange'),
         undefined: undefined,
       },
-      description: "(() => void)",
+      description: '(() => void)',
     },
     disabled: {
       control: {
-        type: "boolean",
+        type: 'boolean',
       },
-      description: "If `true`, the component is disabled.",
+      description: 'If `true`, the component is disabled.',
       options: [true, false],
     },
   },
   args: {
-    size: "small",
+    size: 'small',
     indeterminate: false,
     disabled: false,
   },
   parameters: {
     controls: {
-      include: ["disabled", "checked", "size", "indeterminate", "onChange"],
+      include: ['disabled', 'checked', 'size', 'indeterminate', 'onChange'],
     },
     docs: {
       description: {
@@ -64,10 +56,7 @@ export default {
 } as Meta<typeof Toggle>;
 
 const BaseTemplate: StoryFn<typeof Toggle> = (args) => {
-  const [checked, setChecked] = useState(false);
-  useEffect(() => {
-    setChecked(Boolean(args.checked));
-  }, [args.checked]);
+  const [checked, setChecked] = useState(Boolean(args.checked));
 
   return (
     <Table>
@@ -79,11 +68,7 @@ const BaseTemplate: StoryFn<typeof Toggle> = (args) => {
       <TableBody>
         <TableRow>
           <TableCell>
-            <Toggle
-              {...args}
-              checked={checked}
-              onChange={() => setChecked(!checked)}
-            />
+            <Toggle {...args} checked={checked} onChange={() => setChecked(!checked)} />
           </TableCell>
         </TableRow>
       </TableBody>
@@ -95,7 +80,7 @@ const Template: StoryFn<typeof Toggle> = (args) => (
   <Table>
     <TableHead>
       <TableRow>
-        <TableCell></TableCell>
+        <TableCell />
         <TableCell>ON</TableCell>
         <TableCell>Indeterminate</TableCell>
         <TableCell>OFF</TableCell>
@@ -158,7 +143,7 @@ const DisabledTemplate: StoryFn<typeof Toggle> = (args) => (
   <Table>
     <TableHead>
       <TableRow>
-        <TableCell></TableCell>
+        <TableCell />
         <TableCell>ON</TableCell>
         <TableCell>Indeterminate</TableCell>
         <TableCell>OFF</TableCell>
@@ -197,7 +182,7 @@ const TemplateWithLabel: StoryFn<typeof Toggle> = (args) => (
   <Table>
     <TableHead>
       <TableRow>
-        <TableCell></TableCell>
+        <TableCell />
         <TableCell>ON</TableCell>
         <TableCell>Indeterminate</TableCell>
         <TableCell>OFF</TableCell>
@@ -216,10 +201,7 @@ const TemplateWithLabel: StoryFn<typeof Toggle> = (args) => (
           />
         </TableCell>
         <TableCell>
-          <FormLabel
-            label={<TextField placeholder="Label 3" />}
-            control={<Toggle {...args} />}
-          />
+          <FormLabel label={<TextField placeholder="Label 3" />} control={<Toggle {...args} />} />
         </TableCell>
       </TableRow>
       <TableRow>
@@ -249,10 +231,7 @@ const TemplateWithLabel: StoryFn<typeof Toggle> = (args) => (
       <TableRow>
         <TableCell>LARGE DEFAULT</TableCell>
         <TableCell>
-          <FormLabel
-            label="Label 1"
-            control={<Toggle {...args} size="large" checked />}
-          />
+          <FormLabel label="Label 1" control={<Toggle {...args} size="large" checked />} />
         </TableCell>
         <TableCell>
           <FormLabel
@@ -295,7 +274,7 @@ const TemplateWithLabel: StoryFn<typeof Toggle> = (args) => (
   </Table>
 );
 
-const IndeterminateTemplate: StoryFn<typeof Toggle> = (args) => {
+const IndeterminateTemplate: StoryFn<typeof Toggle> = () => {
   const [checked, setChecked] = useState([true, false, false]);
 
   const handleChange1 = () => {
@@ -336,25 +315,19 @@ const IndeterminateTemplate: StoryFn<typeof Toggle> = (args) => {
                 />
               }
             />
-            <Box sx={{ display: "flex", flexDirection: "column" }}>
+            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
               <FormLabel
                 label="Child 1"
-                control={
-                  <Toggle checked={checked[0]} onChange={handleChange2} />
-                }
+                control={<Toggle checked={checked[0]} onChange={handleChange2} />}
               />
               <FormLabel
                 label="Child 2"
-                control={
-                  <Toggle checked={checked[1]} onChange={handleChange3} />
-                }
+                control={<Toggle checked={checked[1]} onChange={handleChange3} />}
               />
               <FormLabel
                 label="Child 3"
                 disabled
-                control={
-                  <Toggle checked={checked[2]} onChange={handleChange4} />
-                }
+                control={<Toggle checked={checked[2]} onChange={handleChange4} />}
               />
             </Box>
           </TableCell>
@@ -370,37 +343,19 @@ const IndeterminateTemplate: StoryFn<typeof Toggle> = (args) => {
                 />
               }
             />
-            <Box sx={{ display: "flex", flexDirection: "column" }}>
+            <Box sx={{ display: 'flex', flexDirection: 'column' }}>
               <FormLabel
                 label="Child 1"
-                control={
-                  <Toggle
-                    size="large"
-                    checked={checked[0]}
-                    onChange={handleChange2}
-                  />
-                }
+                control={<Toggle size="large" checked={checked[0]} onChange={handleChange2} />}
               />
               <FormLabel
                 label="Child 2"
-                control={
-                  <Toggle
-                    size="large"
-                    checked={checked[1]}
-                    onChange={handleChange3}
-                  />
-                }
+                control={<Toggle size="large" checked={checked[1]} onChange={handleChange3} />}
               />
               <FormLabel
                 label="Child 3"
                 disabled
-                control={
-                  <Toggle
-                    size="large"
-                    checked={checked[2]}
-                    onChange={handleChange4}
-                  />
-                }
+                control={<Toggle size="large" checked={checked[2]} onChange={handleChange4} />}
               />
             </Box>
           </TableCell>
@@ -436,7 +391,7 @@ export const ToggleWithLabelAndIndeterminate = {
   parameters: {
     docs: {
       description: {
-        story: "Usage is same with Toggle",
+        story: 'Usage is same with Toggle',
       },
     },
   },

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

@@ -1,88 +1,72 @@
-import React from "react";
-import { Box } from "@mui/material";
-import { Bell } from "@lunit/design-system-icons";
+import React from 'react';
+import { Box } from '@mui/material';
+import { Bell } from '@lunit/design-system-icons';
 
-import TextField from "@/components/TextField/TextField";
+import TextField from '@/components/TextField/TextField';
 
-import type { StoryObj, Meta, StoryFn } from "@storybook/react";
+import type { StoryObj, Meta, StoryFn } from '@storybook/react-webpack5';
 
 export default {
-  title: "Components/TextField",
+  title: 'Components/TextField',
   component: TextField,
   args: {
     multiline: false,
-    size: "small",
+    size: 'small',
     disabled: false,
     error: false,
-    placeholder: "Please typing...",
-    helperText: "",
+    placeholder: 'Please typing...',
+    helperText: '',
   },
   argTypes: {
     multiline: {
-      control: {
-        type: "radio",
-      },
+      control: { type: 'radio' },
       options: [true, false],
-      description:
-        "The multiline prop transforms the text field into a TextareaAutosize element.",
+      description: 'The multiline prop transforms the text field into a TextareaAutosize element.',
     },
     error: {
-      control: {
-        type: "radio",
-      },
+      control: { type: 'radio' },
       options: [true, false],
       description:
-        "The error prop toggles the error state. The helperText prop can then be used to provide feedback to the user about the error.",
+        'The error prop toggles the error state. The helperText prop can then be used to provide feedback to the user about the error.',
     },
     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",
-        "multiline",
-        "error",
-      ],
+      include: ['size', 'disabled', 'helperText', 'placeholder', 'multiline', 'error'],
     },
     docs: {
       description: {
@@ -104,7 +88,7 @@ export const BasicTextField: StoryObj<typeof TextField> = {
 
 const MultiAndSingleTemplate: StoryFn<typeof TextField> = (args) => {
   return (
-    <Box sx={{ display: "flex", gap: 2 }}>
+    <Box sx={{ display: 'flex', gap: 2 }}>
       <TextField {...args} />
       <TextField {...args} multiline={true} />
     </Box>
@@ -115,7 +99,7 @@ export const MultiAndSingle: StoryObj<typeof TextField> = {
   render: MultiAndSingleTemplate,
   parameters: {
     controls: {
-      include: ["size", "disabled", "helperText", "placeholder", "error"],
+      include: ['size', 'disabled', 'helperText', 'placeholder', 'error'],
     },
     chromatic: { disableSnapshot: true },
   },
@@ -123,7 +107,7 @@ export const MultiAndSingle: StoryObj<typeof TextField> = {
 
 const DisabledTemplate: StoryFn<typeof TextField> = (args) => {
   return (
-    <Box sx={{ display: "flex", gap: 2 }}>
+    <Box sx={{ display: 'flex', gap: 2 }}>
       <TextField {...args} disabled />
       <TextField {...args} multiline={true} disabled />
     </Box>
@@ -134,7 +118,7 @@ export const Disabled: StoryObj<typeof TextField> = {
   render: DisabledTemplate,
   parameters: {
     controls: {
-      include: ["size", "helperText", "placeholder", "error", "disabled"],
+      include: ['size', 'helperText', 'placeholder', 'error', 'disabled'],
     },
     chromatic: { disableSnapshot: true },
   },
@@ -142,7 +126,7 @@ export const Disabled: StoryObj<typeof TextField> = {
 
 const ReadOnlyTemplate: StoryFn<typeof TextField> = (args) => {
   return (
-    <Box sx={{ display: "flex", gap: 2 }}>
+    <Box sx={{ display: 'flex', gap: 2 }}>
       <TextField
         {...args}
         inputProps={{ readOnly: true }}
@@ -162,7 +146,7 @@ export const ReadOnly: StoryObj<typeof TextField> = {
   render: ReadOnlyTemplate,
   parameters: {
     controls: {
-      include: ["size", "helperText", "error", "disabled"],
+      include: ['size', 'helperText', 'error', 'disabled'],
     },
     chromatic: { disableSnapshot: true },
   },
@@ -170,7 +154,7 @@ export const ReadOnly: StoryObj<typeof TextField> = {
 
 const ErrorTemplate: StoryFn<typeof TextField> = (args) => {
   return (
-    <Box sx={{ display: "flex", gap: 2 }}>
+    <Box sx={{ display: 'flex', gap: 2 }}>
       <TextField {...args} error />
       <TextField {...args} multiline={true} error />
     </Box>
@@ -181,7 +165,7 @@ export const Error: StoryObj<typeof TextField> = {
   render: ErrorTemplate,
   parameters: {
     controls: {
-      include: ["size", "helperText", "placeholder", "disabled"],
+      include: ['size', 'helperText', 'placeholder', 'disabled'],
     },
     chromatic: { disableSnapshot: true },
   },
@@ -189,7 +173,7 @@ export const Error: StoryObj<typeof TextField> = {
 
 const PlaceholderTemplate: StoryFn<typeof TextField> = (args) => {
   return (
-    <Box sx={{ display: "flex", gap: 2 }}>
+    <Box sx={{ display: 'flex', gap: 2 }}>
       <TextField {...args} placeholder="Please typing..." />
       <TextField {...args} multiline={true} placeholder="Please typing..." />
     </Box>
@@ -200,7 +184,7 @@ export const Placeholder: StoryObj<typeof TextField> = {
   render: PlaceholderTemplate,
   parameters: {
     controls: {
-      include: ["size", "helperText", "disabled", "error"],
+      include: ['size', 'helperText', 'disabled', 'error'],
     },
     chromatic: { disableSnapshot: true },
   },
@@ -208,7 +192,7 @@ export const Placeholder: StoryObj<typeof TextField> = {
 
 const HelperTextTemplate: StoryFn<typeof TextField> = (args) => {
   return (
-    <Box sx={{ display: "flex", gap: 2 }}>
+    <Box sx={{ display: 'flex', gap: 2 }}>
       <TextField {...args} helperText="helper text" />
       <TextField {...args} multiline={true} helperText="helper text" />
     </Box>
@@ -219,7 +203,7 @@ export const HelperText: StoryObj<typeof TextField> = {
   render: HelperTextTemplate,
   parameters: {
     controls: {
-      include: ["size", "disabled", "error", "placeholder"],
+      include: ['size', 'disabled', 'error', 'placeholder'],
     },
     chromatic: { disableSnapshot: true },
   },
@@ -227,7 +211,7 @@ export const HelperText: StoryObj<typeof TextField> = {
 
 const IconTemplate: StoryFn<typeof TextField> = (args) => {
   return (
-    <Box sx={{ display: "flex", gap: 2 }}>
+    <Box sx={{ display: 'flex', gap: 2 }}>
       <TextField {...args} leftIcon={<Bell />} />
       <TextField {...args} rightIcon={<Bell />} />
     </Box>

package/src/stories/components/TextField/TextFieldDocs.mdx

@@ -1,9 +1,9 @@
-import { Canvas, Stories, Controls, Meta, Story } from "@storybook/blocks";
-import Box from "@mui/material/Box";
+import { Canvas, Stories, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import Box from '@mui/material/Box';
 
-import TextField from "@/components/TextField";
-import * as TextFieldStories from "./BasicTextField.stories";
-import * as TextFieldSizeStories from "./TextFieldSize.stories";
+import TextField from '@/components/TextField';
+import * as TextFieldStories from './BasicTextField.stories';
+import * as TextFieldSizeStories from './TextFieldSize.stories';
 
 <Meta name="TextField Docs" of={TextFieldStories} />
 
@@ -16,9 +16,9 @@ Text Fields let users enter and edit text.
 ### Basic TextField
 
 ```tsx
-import { TextField } from "@lunit/design-system";
+import { TextField } from '@lunit/design-system';
 // or
-import TextField from "@lunit/design-system/TextField";
+import TextField from '@lunit/design-system/TextField';
 
 <TextField />;
 ```
@@ -48,11 +48,7 @@ The TextField have three sizes: `small`, `medium` and `large`.<br />
 Using the `size` prop, you can change the size of the TextField.<br />
 Default size is `small`.
 
-<Canvas
-  of={TextFieldSizeStories.TextFieldSize}
-  meta={TextFieldSizeStories}
-  sourceState="none"
-/>
+<Canvas of={TextFieldSizeStories.TextFieldSize} meta={TextFieldSizeStories} sourceState="none" />
 
 ```tsx
 // multiline is false or undefined