@lunit/design-system 2.1.0 → 2.2.3

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

@@ -1,10 +1,10 @@
-import React from "react";
-import { StoryFn, Meta } from "@storybook/react";
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react-webpack5';
 
-import DatePicker from "@/components/DatePicker";
+import DatePicker from '@/components/DatePicker';
 
 export default {
-  title: "Components/DatePicker",
+  title: 'Components/DatePicker',
   component: DatePicker,
 } as Meta<typeof DatePicker>;
 

package/src/stories/components/Dialog/Dialog.stories.tsx

@@ -1,21 +1,20 @@
-import React, { useState } from "react";
-import { Box } from "@mui/material";
-import Error from "@lunit/design-system-icons/Error";
+import React, { useState } from 'react';
+import { Box } from '@mui/material';
+import Error from '@lunit/design-system-icons/Error';
 
-import Button from "@/components/Button";
-import Dialog from "@/components/Dialog";
+import Button from '@/components/Button';
+import Dialog, { DialogProps } from '@/components/Dialog';
 
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta, StoryObj, StoryContext } from '@storybook/react-webpack5';
 
 const meta: Meta<typeof Dialog> = {
-  title: "components/Dialog",
+  title: 'components/Dialog',
   component: Dialog,
-  tags: ["autodocs"],
   parameters: {
     docs: { disable: true, hidden: true },
   },
   argTypes: {
-    onClose: { action: "onClose" },
+    onClose: { action: 'onClose' },
   },
 };
 
@@ -23,14 +22,18 @@ export default meta;
 type Story = StoryObj<typeof Dialog>;
 
 export const PassiveModal: Story = {
-  name: "Type: passive modal",
-  render: function PassiveModalRender(_Story, context) {
+  name: 'Type: passive modal',
+  render: function PassiveModalRender(_Story: DialogProps, context: StoryContext<DialogProps>) {
     const classNameFromGlobal = context.globals.theme;
     const [target, setTarget] = useState<HTMLDivElement | null>(null);
 
     return (
-      <div style={{ width: "100vw", height: "100vh" }}>
-        <div ref={(ref) => setTarget(ref)} />
+      <div style={{ width: '100vw', height: '100vh' }}>
+        <div
+          ref={(ref) => {
+            setTarget(ref);
+          }}
+        />
         <Dialog
           className={classNameFromGlobal}
           isOpen={Boolean(target)}
@@ -38,8 +41,7 @@ export const PassiveModal: Story = {
           type="passive"
           title="Title area"
         >
-          Lorem Ipsum is simply dummy text of the a printing and typesetting
-          industry
+          Lorem Ipsum is simply dummy text of the a printing and typesetting industry
         </Dialog>
       </div>
     );
@@ -47,14 +49,18 @@ export const PassiveModal: Story = {
 };
 
 export const ActionModal: Story = {
-  name: "Type: action modal",
-  render: function ActionModalRender(_Story, context) {
+  name: 'Type: action modal',
+  render: function ActionModalRender(_Story: DialogProps, context: StoryContext<DialogProps>) {
     const classNameFromGlobal = context.globals.theme;
     const [target, setTarget] = useState<HTMLDivElement | null>(null);
 
     return (
-      <div style={{ width: "100vw", height: "100vh" }}>
-        <div ref={(ref) => setTarget(ref)} />
+      <div style={{ width: '100vw', height: '100vh' }}>
+        <div
+          ref={(ref) => {
+            setTarget(ref);
+          }}
+        />
         <Dialog
           className={classNameFromGlobal}
           isOpen={Boolean(target)}
@@ -63,12 +69,7 @@ export const ActionModal: Story = {
           title="Title area"
           actions={
             <>
-              <Button
-                kind="ghost"
-                color="secondary"
-                size="medium"
-                onClick={close}
-              >
+              <Button kind="ghost" color="secondary" size="medium" onClick={close}>
                 Cancel
               </Button>
               <Button kind="contained" size="medium" onClick={close}>
@@ -77,8 +78,7 @@ export const ActionModal: Story = {
             </>
           }
         >
-          Lorem Ipsum is simply dummy text of the a printing and typesetting
-          industry
+          Lorem Ipsum is simply dummy text of the a printing and typesetting industry
         </Dialog>
       </div>
     );
@@ -86,8 +86,8 @@ export const ActionModal: Story = {
 };
 
 export const NonModal: Story = {
-  name: "Type: non modal",
-  render: function NonModalRender(_Story, context) {
+  name: 'Type: non modal',
+  render: function NonModalRender(_Story: DialogProps, context: StoryContext<DialogProps>) {
     const classNameFromGlobal = context.globals.theme;
     const [isOpen, setIsOpen] = useState(false);
     function open() {
@@ -100,7 +100,7 @@ export const NonModal: Story = {
 
     return (
       <>
-        <Box sx={{ display: "flex", gap: "8px" }}>
+        <Box sx={{ display: 'flex', gap: '8px' }}>
           <Button kind="contained" size="medium" onClick={open}>
             Open to see Dialog
           </Button>
@@ -118,12 +118,7 @@ export const NonModal: Story = {
           title="Title area"
           actions={
             <>
-              <Button
-                kind="ghost"
-                color="secondary"
-                size="medium"
-                onClick={close}
-              >
+              <Button kind="ghost" color="secondary" size="medium" onClick={close}>
                 Cancel
               </Button>
               <Button kind="contained" size="medium" onClick={close}>
@@ -132,8 +127,7 @@ export const NonModal: Story = {
             </>
           }
         >
-          Lorem Ipsum is simply dummy text of the a printing and typesetting
-          industry
+          Lorem Ipsum is simply dummy text of the a printing and typesetting industry
         </Dialog>
       </>
     );
@@ -141,14 +135,18 @@ export const NonModal: Story = {
 };
 
 export const SmallFalse: Story = {
-  name: "Option: small false",
-  render: function SmallFalseRender(_Story, context) {
+  name: 'Option: small false',
+  render: function SmallFalseRender(_Story: DialogProps, context: StoryContext<DialogProps>) {
     const classNameFromGlobal = context.globals.theme;
     const [target, setTarget] = useState<HTMLDivElement | null>(null);
 
     return (
-      <div style={{ width: "100vw", height: "100vh" }}>
-        <div ref={(ref) => setTarget(ref)} />
+      <div style={{ width: '100vw', height: '100vh' }}>
+        <div
+          ref={(ref) => {
+            setTarget(ref);
+          }}
+        />
         <Dialog
           className={classNameFromGlobal}
           isOpen={Boolean(target)}
@@ -157,8 +155,7 @@ export const SmallFalse: Story = {
           title="Title area"
           size="medium"
         >
-          Lorem Ipsum is simply dummy text of the a printing and typesetting
-          industry
+          Lorem Ipsum is simply dummy text of the a printing and typesetting industry
         </Dialog>
       </div>
     );
@@ -166,14 +163,18 @@ export const SmallFalse: Story = {
 };
 
 export const WithTitleIcon: Story = {
-  name: "Option: title icon",
-  render: function WithTitleIconRender(_Story, context) {
+  name: 'Option: title icon',
+  render: function WithTitleIconRender(_Story: DialogProps, context: StoryContext<DialogProps>) {
     const classNameFromGlobal = context.globals.theme;
     const [target, setTarget] = useState<HTMLDivElement | null>(null);
 
     return (
-      <div style={{ width: "100vw", height: "100vh" }}>
-        <div ref={(ref) => setTarget(ref)} />
+      <div style={{ width: '100vw', height: '100vh' }}>
+        <div
+          ref={(ref) => {
+            setTarget(ref);
+          }}
+        />
         <Dialog
           className={classNameFromGlobal}
           isOpen={Boolean(target)}
@@ -183,27 +184,16 @@ export const WithTitleIcon: Story = {
           titleIcon={<Error color="error" variant="filled" />}
           actions={
             <>
-              <Button
-                kind="ghost"
-                color="secondary"
-                size="medium"
-                onClick={close}
-              >
+              <Button kind="ghost" color="secondary" size="medium" onClick={close}>
                 Cancel
               </Button>
-              <Button
-                kind="contained"
-                color="error"
-                size="medium"
-                onClick={close}
-              >
+              <Button kind="contained" color="error" size="medium" onClick={close}>
                 Confirm
               </Button>
             </>
           }
         >
-          Lorem Ipsum is simply dummy text of the a printing and typesetting
-          industry
+          Lorem Ipsum is simply dummy text of the a printing and typesetting industry
         </Dialog>
       </div>
     );
@@ -211,14 +201,18 @@ export const WithTitleIcon: Story = {
 };
 
 export const WithCustomStyle: Story = {
-  name: "Option: custom style",
-  render: function WithCustomStyleRender(_Story, context) {
+  name: 'Option: custom style',
+  render: function WithCustomStyleRender(_Story: DialogProps, context: StoryContext<DialogProps>) {
     const classNameFromGlobal = context.globals.theme;
     const [target, setTarget] = useState<HTMLDivElement | null>(null);
 
     return (
-      <div style={{ width: "100vw", height: "100vh" }}>
-        <div ref={(ref) => setTarget(ref)} />
+      <div style={{ width: '100vw', height: '100vh' }}>
+        <div
+          ref={(ref) => {
+            setTarget(ref);
+          }}
+        />
         <Dialog
           className={classNameFromGlobal}
           isOpen={Boolean(target)}
@@ -226,15 +220,14 @@ export const WithCustomStyle: Story = {
           onClose={close}
           title="Title area"
           sx={{
-            "& .dialog-title-wrapper": {
-              border: "4px dashed red",
-              borderRadius: "10px",
-              backgroundColor: "green",
+            '& .dialog-title-wrapper': {
+              border: '4px dashed red',
+              borderRadius: '10px',
+              backgroundColor: 'green',
             },
           }}
         >
-          Lorem Ipsum is simply dummy text of the a printing and typesetting
-          industry
+          Lorem Ipsum is simply dummy text of the a printing and typesetting industry
         </Dialog>
       </div>
     );
@@ -242,14 +235,18 @@ export const WithCustomStyle: Story = {
 };
 
 export const WithScroll: Story = {
-  name: "Option: with scroll",
-  render: function WithScrollRender(_Story, context) {
+  name: 'Option: with scroll',
+  render: function WithScrollRender(_Story: DialogProps, context: StoryContext<DialogProps>) {
     const classNameFromGlobal = context.globals.theme;
     const [target, setTarget] = useState<HTMLDivElement | null>(null);
 
     return (
-      <div style={{ width: "100vw", height: "100vh" }}>
-        <div ref={(ref) => setTarget(ref)} />
+      <div style={{ width: '100vw', height: '100vh' }}>
+        <div
+          ref={(ref) => {
+            setTarget(ref);
+          }}
+        />
         <Dialog
           className={classNameFromGlobal}
           isOpen={Boolean(target)}
@@ -258,61 +255,43 @@ export const WithScroll: Story = {
           title="Title area"
           actions={
             <>
-              <Button
-                kind="ghost"
-                color="secondary"
-                size="medium"
-                onClick={close}
-              >
+              <Button kind="ghost" color="secondary" size="medium" onClick={close}>
                 Cancel
               </Button>
-              <Button
-                kind="contained"
-                color="error"
-                size="medium"
-                onClick={close}
-              >
+              <Button kind="contained" color="error" size="medium" onClick={close}>
                 Confirm
               </Button>
             </>
           }
         >
-          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis,
-          suscipit at. Atque enim, hic architecto sequi libero deserunt dolores
-          omnis, cumque dignissimos ab animi. Recusandae saepe facere error
-          tempore quasi. Lorem ipsum dolor sit amet consectetur adipisicing
-          elit. Consectetur eius commodi deserunt reiciendis. Officia veniam
-          consequuntur doloribus debitis numquam ipsum autem, eos repellendus
-          eligendi esse voluptatum natus, cum optio? Unde! Lorem ipsum dolor sit
-          amet consectetur adipisicing elit. Quibusdam praesentium incidunt
-          tempora quam aut nulla corrupti ipsa voluptatem vitae soluta ex
-          officia, explicabo, voluptate porro. Eius mollitia veritatis corporis
-          neque. Lorem Ipsum is simply dummy text of the a printing and
-          typesetting industry Lorem ipsum dolor sit amet consectetur Lorem
-          ipsum dolor sit amet consectetur, adipisicing elit. Quis, suscipit at.
-          Atque enim, hic architecto sequi libero deserunt dolores omnis, cumque
-          dignissimos ab animi. Recusandae saepe facere error tempore quasi.
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur
-          eius commodi deserunt reiciendis. Officia veniam consequuntur
-          doloribus debitis numquam ipsum autem, eos repellendus eligendi esse
-          voluptatum natus, cum optio? Unde! Lorem ipsum dolor sit amet
-          consectetur adipisicing elit. Quibusdam praesentium incidunt tempora
-          quam aut nulla corrupti ipsa voluptatem vitae soluta ex officia,
-          explicabo, voluptate porro. Eius mollitia veritatis corporis neque.
-          Lorem Ipsum is simply dummy text of the a printing and typesetting
-          industry Lorem ipsum dolor sit amet consectetur Lorem ipsum dolor sit
-          amet consectetur, adipisicing elit. Quis, suscipit at. Atque enim, hic
-          architecto sequi libero deserunt dolores omnis, cumque dignissimos ab
-          animi. Recusandae saepe facere error tempore quasi. Lorem ipsum dolor
-          sit amet consectetur adipisicing elit. Consectetur eius commodi
-          deserunt reiciendis. Officia veniam consequuntur doloribus debitis
-          numquam ipsum autem, eos repellendus eligendi esse voluptatum natus,
-          cum optio? Unde! Lorem ipsum dolor sit amet consectetur adipisicing
-          elit. Quibusdam praesentium incidunt tempora quam aut nulla corrupti
-          ipsa voluptatem vitae soluta ex officia, explicabo, voluptate porro.
-          Eius mollitia veritatis corporis neque. Lorem Ipsum is simply dummy
-          text of the a printing and typesetting industry Lorem ipsum dolor sit
-          amet consectetur
+          Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis, suscipit at. Atque enim,
+          hic architecto sequi libero deserunt dolores omnis, cumque dignissimos ab animi.
+          Recusandae saepe facere error tempore quasi. Lorem ipsum dolor sit amet consectetur
+          adipisicing elit. Consectetur eius commodi deserunt reiciendis. Officia veniam
+          consequuntur doloribus debitis numquam ipsum autem, eos repellendus eligendi esse
+          voluptatum natus, cum optio? Unde! Lorem ipsum dolor sit amet consectetur adipisicing
+          elit. Quibusdam praesentium incidunt tempora quam aut nulla corrupti ipsa voluptatem vitae
+          soluta ex officia, explicabo, voluptate porro. Eius mollitia veritatis corporis neque.
+          Lorem Ipsum is simply dummy text of the a printing and typesetting industry Lorem ipsum
+          dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis,
+          suscipit at. Atque enim, hic architecto sequi libero deserunt dolores omnis, cumque
+          dignissimos ab animi. Recusandae saepe facere error tempore quasi. Lorem ipsum dolor sit
+          amet consectetur adipisicing elit. Consectetur eius commodi deserunt reiciendis. Officia
+          veniam consequuntur doloribus debitis numquam ipsum autem, eos repellendus eligendi esse
+          voluptatum natus, cum optio? Unde! Lorem ipsum dolor sit amet consectetur adipisicing
+          elit. Quibusdam praesentium incidunt tempora quam aut nulla corrupti ipsa voluptatem vitae
+          soluta ex officia, explicabo, voluptate porro. Eius mollitia veritatis corporis neque.
+          Lorem Ipsum is simply dummy text of the a printing and typesetting industry Lorem ipsum
+          dolor sit amet consectetur Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quis,
+          suscipit at. Atque enim, hic architecto sequi libero deserunt dolores omnis, cumque
+          dignissimos ab animi. Recusandae saepe facere error tempore quasi. Lorem ipsum dolor sit
+          amet consectetur adipisicing elit. Consectetur eius commodi deserunt reiciendis. Officia
+          veniam consequuntur doloribus debitis numquam ipsum autem, eos repellendus eligendi esse
+          voluptatum natus, cum optio? Unde! Lorem ipsum dolor sit amet consectetur adipisicing
+          elit. Quibusdam praesentium incidunt tempora quam aut nulla corrupti ipsa voluptatem vitae
+          soluta ex officia, explicabo, voluptate porro. Eius mollitia veritatis corporis neque.
+          Lorem Ipsum is simply dummy text of the a printing and typesetting industry Lorem ipsum
+          dolor sit amet consectetur
         </Dialog>
       </div>
     );

package/src/stories/components/Dialog/DialogDocs.mdx

@@ -1,8 +1,8 @@
-import { Canvas, Stories, Controls, Meta, Story } from "@storybook/blocks";
-import { Error } from "@lunit/design-system-icons";
+import { Canvas, Stories, Controls, Meta, Story } from '@storybook/addon-docs/blocks';
+import { Error } from '@lunit/design-system-icons';
 
-import Dialog from "@/components/Dialog";
-import * as DialogStories from "./Dialog.stories";
+import Dialog from '@/components/Dialog';
+import * as DialogStories from './Dialog.stories';
 
 <Meta name="Dialog Docs" of={DialogStories} />
 
@@ -16,9 +16,9 @@ Dialogs are rendered in a [Portal](https://react.dev/reference/react-dom/createP
 ### Basic Dialog
 
 ```tsx
-import { Dialog } from "@lunit/design-system";
+import { Dialog } from '@lunit/design-system';
 // or
-import Dialog from "@lunit/design-system/Dialog";
+import Dialog from '@lunit/design-system/Dialog';
 
 <Dialog />;
 ```
@@ -124,13 +124,7 @@ The `actions` prop sets the actions of the Dialog. <br />
 You can pass any component to the actions prop only when the type of the modal is action.
 
 ```tsx
-<Dialog
-  isOpen={true}
-  onClose={close}
-  type="action"
-  title="Title area"
-  actions={actionsChildren}
->
+<Dialog isOpen={true} onClose={close} type="action" title="Title area" actions={actionsChildren}>
   Lorem Ipsum is simply dummy text of the a printing and typesetting industry
 </Dialog>
 ```