⬆️ Storybook V8 migration

rubric-dev · Jun 14, 2024 · 0f2c33c · 0f2c33c
1 parent dec9679
commit 0f2c33c
Show file tree

Hide file tree

Showing 14 changed files with 208 additions and 193 deletions.
diff --git a/apps/storybook/stories/DialogModal.stories.tsx b/apps/storybook/stories/DialogModal.stories.tsx
@@ -5,7 +5,7 @@ import {
   DialogModalProps,
   theme,
 } from "@parte-ds/ui";
-import { Story, Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 import { css } from "styled-components";
 
@@ -18,6 +18,8 @@ export default {
   },
 } as Meta;
 
+type Story = StoryObj<typeof DialogModal>;
+
 const ScrollBox = () => (
   <Box
     width="100%"
@@ -28,7 +30,7 @@ const ScrollBox = () => (
   />
 );
 
-const Template: Story<DialogModalProps> = ({ children, ...args }) => {
+const Template = ({ children, ...args }: DialogModalProps) => {
   const [open, setOpen] = useState(false);
   return (
     <div
@@ -50,24 +52,30 @@ const Template: Story<DialogModalProps> = ({ children, ...args }) => {
   );
 };
 
-export const Default = Template.bind({});
-Default.args = {
-  confirmVariant: "fill-primary",
-  children: `Used for multiline pieces of content. Lorem ipsum dolor sit amet, ex
-  lucilius hendrerit vim, tempor scaevola iudicabit ei ius, te eum illud
-  impetus antiopam. Eu wisi commune volutpat pro, usu at alii magna
-  aperiam.`,
+export const Default: Story = {
+  args: {
+    confirmVariant: "fill-primary",
+    children: `Used for multiline pieces of content. Lorem ipsum dolor sit amet, ex
+    lucilius hendrerit vim, tempor scaevola iudicabit ei ius, te eum illud
+    impetus antiopam. Eu wisi commune volutpat pro, usu at alii magna
+    aperiam.`,
+  },
+  render: Template,
 };
-export const Error = Template.bind({});
-Error.args = {
-  confirmVariant: "fill-error",
-  confirmLabel: "오류",
-  width: 320,
-  title: "에러 케이스",
-  children: `오류가 발생했습니다`,
+export const Error: Story = {
+  args: {
+    confirmVariant: "fill-error",
+    confirmLabel: "오류",
+    width: 320,
+    title: "에러 케이스",
+    children: `오류가 발생했습니다`,
+  },
+  render: Template,
 };
-export const ScrollContent = Template.bind({});
-ScrollContent.args = {
-  confirmVariant: "fill-primary",
-  children: <ScrollBox />,
+export const ScrollContent: Story = {
+  args: {
+    confirmVariant: "fill-primary",
+    children: <ScrollBox />,
+  },
+  render: Template,
 };
diff --git a/apps/storybook/stories/Menu.stories.tsx b/apps/storybook/stories/Menu.stories.tsx
@@ -4,7 +4,7 @@ import {
   ActionRefreshIcon,
 } from "@parte-ds/icons";
 import { Menu, MenuProps, Option } from "@parte-ds/ui";
-import { Story, Meta } from "@storybook/react";
+import { StoryObj, Meta } from "@storybook/react";
 import { useState } from "react";
 
 export default {
@@ -16,7 +16,9 @@ export default {
   },
 } as Meta;
 
-const Template: Story<MenuProps> = () => {
+type Story = StoryObj<typeof Menu>;
+
+const Template = (props: MenuProps) => {
   return (
     <Menu>
       <Menu.Group title="TITLE">
@@ -39,7 +41,7 @@ const menuOptions: Option<string>[] = [
   { label: "label2", value: "label2" },
   { label: "label3", value: "label3" },
 ];
-const SelectableTemplate: Story<MenuProps> = () => {
+const SelectableTemplate = () => {
   const [selected, setSelected] = useState("");
   return (
     <Menu>
@@ -63,7 +65,7 @@ const SelectableTemplate: Story<MenuProps> = () => {
   );
 };
 
-const CheckBoxTemplate: Story<MenuProps> = () => {
+const CheckBoxTemplate = () => {
   const [selected, setSelected] = useState<string[]>([]);
   return (
     <Menu>
@@ -78,7 +80,7 @@ const CheckBoxTemplate: Story<MenuProps> = () => {
                 setSelected((prev) =>
                   included
                     ? prev.filter((item) => item !== value)
-                    : [...prev, value]
+                    : [...prev, value],
                 );
               }}
               selected={included}
@@ -92,6 +94,8 @@ const CheckBoxTemplate: Story<MenuProps> = () => {
   );
 };
 
-export const Default = Template.bind({});
-export const Selectable = SelectableTemplate.bind({});
-export const CheckBox = CheckBoxTemplate.bind({});
+export const Default: Story = {
+  render: Template,
+};
+export const Selectable: Story = { render: SelectableTemplate };
+export const CheckBox: Story = { render: CheckBoxTemplate };
diff --git a/apps/storybook/stories/MenuGroup.stories.tsx b/apps/storybook/stories/MenuGroup.stories.tsx
@@ -1,5 +1,5 @@
 import { Menu, MenuGroupProps } from "@parte-ds/ui";
-import { Story, Meta } from "@storybook/react";
+import { StoryObj, Meta } from "@storybook/react";
 
 export default {
   title: "Components/Menu/MenuGroup",
@@ -10,17 +10,17 @@ export default {
   },
 } as Meta;
 
-const Template: Story<MenuGroupProps> = ({ ...args }) => {
-  return (
-    <Menu.Group {...args}>
-      <Menu.Row>Label 1</Menu.Row>
-      <Menu.Row>Label 2</Menu.Row>
-      <Menu.Row>Label 3</Menu.Row>
-    </Menu.Group>
-  );
-};
+type Story = StoryObj<typeof Menu.Group>;
 
-export const Default = Template.bind({});
-Default.args = {
-  title: "title",
+export const Default: Story = {
+  args: { title: "title" },
+  render: ({ ...args }) => {
+    return (
+      <Menu.Group {...args}>
+        <Menu.Row>Label 1</Menu.Row>
+        <Menu.Row>Label 2</Menu.Row>
+        <Menu.Row>Label 3</Menu.Row>
+      </Menu.Group>
+    );
+  },
 };
diff --git a/apps/storybook/stories/MenuOptionsGroup.stories.tsx b/apps/storybook/stories/MenuOptionsGroup.stories.tsx
@@ -1,5 +1,5 @@
-import { Menu, MenuOptionsGroupProps } from "@parte-ds/ui";
-import { Story, Meta } from "@storybook/react";
+import { Menu } from "@parte-ds/ui";
+import { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 
 export default {
@@ -11,39 +11,41 @@ export default {
   },
 } as Meta;
 
-const Template: Story<MenuOptionsGroupProps<string>> = () => {
-  const [selectedOrder, setSelectedOrder] = useState("asc");
-  const [selectedField, setSelectedField] = useState("email");
+type Story = StoryObj<typeof Menu.OptionsGroup>;
 
-  return (
-    <Menu>
-      <Menu.OptionsGroup
-        title="Order"
-        options={[
-          { label: "Ascending", value: "asc" },
-          { label: "Descending", value: "desc" },
-        ]}
-        selected={selectedOrder}
-        onChange={(selected) => setSelectedOrder(selected)}
-      />
-      <Menu.Divider />
-      <Menu.OptionsGroup
-        title="Show"
-        options={[
-          { label: "Email", value: "email" },
-          { label: "Phone", value: "phone" },
-          { label: "State", value: "state" },
-          { label: "Country", value: "country" },
-          { label: "Type", value: "type" },
-        ]}
-        selected={selectedField}
-        onChange={(selected) => setSelectedField(selected)}
-      />
-    </Menu>
-  );
-};
+export const Default: Story = {
+  args: {
+    title: "title",
+  },
+  render: () => {
+    const [selectedOrder, setSelectedOrder] = useState("asc");
+    const [selectedField, setSelectedField] = useState("email");
 
-export const Default = Template.bind({});
-Default.args = {
-  title: "title",
+    return (
+      <Menu>
+        <Menu.OptionsGroup
+          title="Order"
+          options={[
+            { label: "Ascending", value: "asc" },
+            { label: "Descending", value: "desc" },
+          ]}
+          selected={selectedOrder}
+          onChange={(selected) => setSelectedOrder(selected)}
+        />
+        <Menu.Divider />
+        <Menu.OptionsGroup
+          title="Show"
+          options={[
+            { label: "Email", value: "email" },
+            { label: "Phone", value: "phone" },
+            { label: "State", value: "state" },
+            { label: "Country", value: "country" },
+            { label: "Type", value: "type" },
+          ]}
+          selected={selectedField}
+          onChange={(selected) => setSelectedField(selected)}
+        />
+      </Menu>
+    );
+  },
 };
diff --git a/apps/storybook/stories/MenuRow.stories.tsx b/apps/storybook/stories/MenuRow.stories.tsx
@@ -1,6 +1,6 @@
 import { ActionChatIcon } from "@parte-ds/icons";
 import { Menu, MenuRowProps } from "@parte-ds/ui";
-import { Story, Meta } from "@storybook/react";
+import { StoryObj, Meta } from "@storybook/react";
 import { useState } from "react";
 
 export default {
@@ -12,10 +12,12 @@ export default {
   },
 } as Meta;
 
-const Template: Story<MenuRowProps> = ({ ...args }) => {
+type Story = StoryObj<typeof Menu.Row>;
+
+const Template = ({ ...args }: MenuRowProps) => {
   return <Menu.Row {...args}>Menu Row</Menu.Row>;
 };
-const ClickableTemplate: Story<MenuRowProps> = ({ ...args }) => {
+const ClickableTemplate = ({ ...args }: MenuRowProps) => {
   const [selected, setSeleted] = useState(false);
   return (
     <Menu.Row
@@ -27,21 +29,23 @@ const ClickableTemplate: Story<MenuRowProps> = ({ ...args }) => {
     </Menu.Row>
   );
 };
-export const Default = Template.bind({});
-Default.args = {
-  selected: false,
+export const Default: Story = {
+  args: { selected: false },
+  render: Template,
+};
+export const Icon: Story = {
+  args: { leadingIcon: <ActionChatIcon size={16} /> },
+  render: Template,
 };
-export const Icon = Template.bind({});
-Icon.args = {
-  leadingIcon: <ActionChatIcon size={16} />,
+export const Title: Story = {
+  args: { type: "title" },
+  render: Template,
 };
-export const Title = Template.bind({});
-Title.args = {
-  type: "title",
+export const Checkbox: Story = {
+  args: { type: "checkbox", selected: false },
+  render: Template,
 };
-export const Checkbox = Template.bind({});
-Checkbox.args = {
-  type: "checkbox",
-  selected: false,
+
+export const Clickable: Story = {
+  render: ClickableTemplate,
 };
-export const Clickable = ClickableTemplate.bind({});
diff --git a/apps/storybook/stories/Overlay.stories.tsx b/apps/storybook/stories/Overlay.stories.tsx
@@ -1,5 +1,5 @@
 import { Button, Overlay, OverlayProps } from "@parte-ds/ui";
-import { Story, Meta } from "@storybook/react";
+import { StoryObj, Meta } from "@storybook/react";
 import { useState } from "react";
 
 export default {
@@ -11,7 +11,9 @@ export default {
   },
 } as Meta;
 
-const Template: Story<OverlayProps> = ({ ...args }) => {
+type Story = StoryObj<typeof Overlay>;
+
+const Template = ({ ...args }: OverlayProps) => {
   const [open, setOpen] = useState(false);
   return (
     <div
@@ -26,9 +28,9 @@ const Template: Story<OverlayProps> = ({ ...args }) => {
   );
 };
 
-export const Default = Template.bind({});
-Default.args = {};
-export const AllowScroll = Template.bind({});
-AllowScroll.args = {
-  preventBodyScrolling: false,
+export const Default: Story = { render: Template };
+
+export const AllowScroll: Story = {
+  args: { preventBodyScrolling: false },
+  render: Template,
 };
diff --git a/apps/storybook/stories/Pagination.stories.tsx b/apps/storybook/stories/Pagination.stories.tsx
@@ -1,5 +1,5 @@
 import { Pagination, PaginationProps } from "@parte-ds/ui";
-import { Story, Meta } from "@storybook/react";
+import { StoryObj, Meta } from "@storybook/react";
 import { useCallback, useState } from "react";
 
 export default {
@@ -11,10 +11,9 @@ export default {
   },
 } as Meta;
 
-const Template: Story<PaginationProps> = ({
-  page: initialPage,
-  totalPages,
-}) => {
+type Story = StoryObj<typeof Pagination>;
+
+const Template = ({ page: initialPage, totalPages }: PaginationProps) => {
   const [page, setPage] = useState(initialPage);
 
   const onPageChange = useCallback((index: number) => {
@@ -30,14 +29,11 @@ const Template: Story<PaginationProps> = ({
   );
 };
 
-export const Default = Template.bind({});
-Default.args = {
-  page: 4,
-  totalPages: 10,
+export const Default: Story = {
+  args: { page: 4, totalPages: 10 },
+  render: Template,
 };
-
-export const Under7Page = Template.bind({});
-Under7Page.args = {
-  page: 3,
-  totalPages: 6,
+export const Under7Page: Story = {
+  args: { page: 3, totalPages: 6 },
+  render: Template,
 };