⬆️ Storybook V8 migration and packages updated (#304)

* 📦 Turbo version upgrade * 📦 Root packages version upgrade * 📦 Packages version up * 🚧 Storybook doc 변경중 * ⬆️ Storybook V8 migration
rubric-dev · Jun 14, 2024 · 8b0cf60 · 8b0cf60
1 parent 19c0b8d
commit 8b0cf60
Show file tree

Hide file tree

Showing 33 changed files with 5,075 additions and 5,251 deletions.
diff --git a/apps/storybook/.storybook/main.ts b/apps/storybook/.storybook/main.ts
@@ -1,22 +1,28 @@
+import { dirname, join } from "path";
 import type { StorybookConfig } from "@storybook/react-vite";
 
 const config: StorybookConfig = {
-  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|ts|tsx)"],
-  addons: [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-  ],
   framework: {
-    name: "@storybook/react-vite",
+    name: getAbsolutePath("@storybook/react-vite"),
     options: {},
   },
-  features: {
-    storyStoreV7: true,
-  },
-  docs: {
-    autodocs: true,
+  stories: ["../stories/**/*.mdx", "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    getAbsolutePath("@storybook/addon-links"),
+    getAbsolutePath("@storybook/addon-essentials"),
+    getAbsolutePath("@storybook/addon-interactions"),
+    getAbsolutePath("@storybook/addon-mdx-gfm"),
+    "@chromatic-com/storybook"
+  ],
+  docs: {},
+  features: {},
+  typescript: {
+    reactDocgen: false,
   },
 };
 
 export default config;
+
+function getAbsolutePath(value: string): any {
+  return dirname(require.resolve(join(value, "package.json")));
+}
diff --git a/apps/storybook/.storybook/preview.tsx b/apps/storybook/.storybook/preview.tsx
@@ -14,7 +14,6 @@ export const decorators = [
 ];
 
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
   controls: {
     matchers: {
       color: /(background|color)$/i,

diff --git a/apps/storybook/package.json b/apps/storybook/package.json
@@ -12,31 +12,33 @@
   "dependencies": {
     "@parte-ds/icons": "workspace:*",
     "@parte-ds/ui": "workspace:*",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-select": "^5.7.4",
-    "react-select-async-paginate": "^0.7.3",
-    "styled-components": "^6.0.7",
-    "stylis": "^4.3.0"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-select": "^5.8.0",
+    "react-select-async-paginate": "^0.7.4",
+    "styled-components": "^6.1.11",
+    "stylis": "^4.3.2"
   },
   "devDependencies": {
+    "@chromatic-com/storybook": "^1",
     "@parte-ds/tsconfig": "workspace:*",
-    "@storybook/addon-actions": "^7.4.0",
-    "@storybook/addon-docs": "^7.4.0",
-    "@storybook/addon-essentials": "^7.4.0",
-    "@storybook/addon-interactions": "^7.4.0",
-    "@storybook/addon-links": "^7.4.0",
-    "@storybook/react": "^7.4.0",
-    "@storybook/react-vite": "^7.4.0",
-    "@storybook/testing-library": "^0.1.0",
-    "@types/react": "^18.2.21",
-    "@types/react-dom": "^18.2.7",
-    "@vitejs/plugin-react": "^4.0.4",
+    "@storybook/addon-actions": "^8.1.8",
+    "@storybook/addon-docs": "^8.1.8",
+    "@storybook/addon-essentials": "^8.1.8",
+    "@storybook/addon-interactions": "^8.1.8",
+    "@storybook/addon-links": "^8.1.8",
+    "@storybook/addon-mdx-gfm": "^8.1.8",
+    "@storybook/react": "^8.1.8",
+    "@storybook/react-vite": "^8.1.8",
+    "@storybook/test": "^8.1.8",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
     "chromatic": "^6.24.1",
     "eslint-config-parte": "workspace:*",
-    "serve": "^14.2.1",
-    "storybook": "^7.4.0",
-    "typescript": "^5.2.2",
-    "vite": "^4.4.9"
+    "serve": "^14.2.3",
+    "storybook": "^8.1.8",
+    "typescript": "^5.4.5",
+    "vite": "^4.5.3"
   }
 }
diff --git a/apps/storybook/stories/Box.stories.tsx b/apps/storybook/stories/Box.stories.tsx
@@ -1,5 +1,5 @@
-import { Story, Meta } from "@storybook/react";
-import { BoxProps, Box, Button } from "@parte-ds/ui";
+import { Box, Button } from "@parte-ds/ui";
+import { Meta, StoryObj } from "@storybook/react";
 
 export default {
   title: "Components/Layout/Box",
@@ -10,6 +10,8 @@ export default {
   },
 } as Meta;
 
+type Story = StoryObj<typeof Box>;
+
 const Content = (
   <>
     <Button variant="fill-primary">First Button</Button>
@@ -19,27 +21,25 @@ const Content = (
   </>
 );
 
-const Template: Story<BoxProps> = ({ flexDirection, ...args }) => {
-  return <Box {...args} flexDirection={flexDirection} />;
-};
-
-export const FlexBox = Template.bind({});
-FlexBox.args = {
-  display: "flex",
-  flexDirection: "column",
-  gap: 10,
-  children: Content,
-  marginTop: 32,
-  backgroundColor: "purple",
-  width: 600,
-  justifyContent: "space-between",
+export const FlexBox: Story = {
+  args: {
+    display: "flex",
+    flexDirection: "column",
+    gap: 10,
+    children: Content,
+    marginTop: 32,
+    backgroundColor: "purple",
+    width: 600,
+    justifyContent: "space-between",
+  },
 };
 
-export const GridBox = Template.bind({});
-GridBox.args = {
-  display: "grid",
-  gap: 10,
-  backgroundColor: "green",
-  gridTemplateColumns: "repeat(2, 1fr)",
-  children: Content,
+export const GridBox: Story = {
+  args: {
+    display: "grid",
+    gap: 10,
+    backgroundColor: "green",
+    gridTemplateColumns: "repeat(2, 1fr)",
+    children: Content,
+  },
 };
diff --git a/apps/storybook/stories/Card.stories.tsx b/apps/storybook/stories/Card.stories.tsx
@@ -1,5 +1,5 @@
-import { Card, CardProps, Headline, Paragraph } from "@parte-ds/ui";
-import { Story, Meta } from "@storybook/react";
+import { Card, Headline, Paragraph } from "@parte-ds/ui";
+import { Meta, StoryObj } from "@storybook/react";
 
 export default {
   title: "Components/Card/DefaultCard",
@@ -10,19 +10,27 @@ export default {
   },
 } as Meta;
 
-const Template: Story<CardProps> = ({ ...args }) => {
-  return (
-    <Card {...args} flexDirection="column" padding={20} display="flex">
-      <Headline size={200}>Heading</Headline>
-      <Paragraph size={300}>Paragraph</Paragraph>
-    </Card>
-  );
-};
-
-export const Default = Template.bind({});
-Default.args = {};
+type Story = StoryObj<typeof Card>;
 
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
+export const Default: Story = {
+  args: {},
+  render: ({ ...args }) => {
+    return (
+      <Card {...args} flexDirection="column" padding={20} display="flex">
+        <Headline size={200}>Heading</Headline>
+        <Paragraph size={300}>Paragraph</Paragraph>
+      </Card>
+    );
+  },
+};
+export const Disabled: Story = {
+  args: { disabled: true },
+  render: ({ ...args }) => {
+    return (
+      <Card {...args} flexDirection="column" padding={20} display="flex">
+        <Headline size={200}>Heading</Headline>
+        <Paragraph size={300}>Paragraph</Paragraph>
+      </Card>
+    );
+  },
 };
diff --git a/apps/storybook/stories/Checkbox.stories.tsx b/apps/storybook/stories/Checkbox.stories.tsx
@@ -1,5 +1,5 @@
-import { Box, Checkbox, CheckboxProps } from "@parte-ds/ui";
-import { Story, Meta } from "@storybook/react";
+import { Box, Checkbox } from "@parte-ds/ui";
+import { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 
 export default {
@@ -11,7 +11,9 @@ export default {
   },
 } as Meta;
 
-const Template: Story<CheckboxProps> = ({ ...args }) => {
+type Story = StoryObj<typeof Checkbox>;
+
+const Renderer = ({ ...args }) => {
   const [checked, setChecked] = useState(false);
 
   const onChange = () => {
@@ -26,19 +28,25 @@ const Template: Story<CheckboxProps> = ({ ...args }) => {
   );
 };
 
-export const Default = Template.bind({});
-Default.args = {
-  label: "TEST",
+export const Default: Story = {
+  args: {
+    label: "TEST",
+  },
+  render: Renderer,
 };
 
-export const Indeterminate = Template.bind({});
-Indeterminate.args = {
-  label: "TEST",
-  indeterminate: true,
+export const Indeterminate: Story = {
+  args: {
+    label: "TEST",
+    indeterminate: true,
+  },
+  render: Renderer,
 };
 
-export const Checked = Template.bind({});
-Checked.args = {
-  label: "TEST",
-  checked: true,
+export const Checked: Story = {
+  args: {
+    label: "TEST",
+    checked: true,
+  },
+  render: Renderer,
 };
diff --git a/apps/storybook/stories/Color.stories.tsx b/apps/storybook/stories/Color.stories.tsx
@@ -1,5 +1,5 @@
 import { ColorList } from "@parte-ds/ui";
-import { Story, Meta } from "@storybook/react";
+import { Meta, StoryObj } from "@storybook/react";
 
 export default {
   title: "Foundation/Color",
@@ -10,8 +10,8 @@ export default {
   },
 } as Meta;
 
-const Template: Story = () => {
-  return <ColorList />;
+export const Default: StoryObj<typeof ColorList> = {
+  render: () => {
+    return <ColorList />;
+  },
 };
-
-export const Default = Template.bind({});
diff --git a/apps/storybook/stories/CornerDialog.stories.tsx b/apps/storybook/stories/CornerDialog.stories.tsx
@@ -1,5 +1,5 @@
-import { Button, CornerDialog, CornerDialogProps } from "@parte-ds/ui";
-import { Story, Meta } from "@storybook/react";
+import { Button, CornerDialog } from "@parte-ds/ui";
+import { Meta, StoryObj } from "@storybook/react";
 import { useState } from "react";
 
 export default {
@@ -11,32 +11,35 @@ export default {
   },
 } as Meta;
 
-const Template: Story<CornerDialogProps> = ({ children, ...args }) => {
-  const [open, setOpen] = useState(false);
-  return (
-    <div
-      style={{ display: "flex", flexDirection: "column", overflowY: "auto" }}
-    >
-      <Button variant="fill-primary" onClick={() => setOpen(true)}>
-        Open CornerDialog
-      </Button>
-      <div style={{ width: "100%", height: "1000px" }} />
-      <CornerDialog
-        onCloseComplete={() => setOpen(false)}
-        title="Dialog Title"
-        {...args}
-        isShown={open}
+type Story = StoryObj<typeof CornerDialog>;
+
+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: ({ children, ...args }) => {
+    const [open, setOpen] = useState(false);
+    return (
+      <div
+        style={{ display: "flex", flexDirection: "column", overflowY: "auto" }}
       >
-        {children}
-      </CornerDialog>
-    </div>
-  );
-};
-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.`,
+        <Button variant="fill-primary" onClick={() => setOpen(true)}>
+          Open CornerDialog
+        </Button>
+        <div style={{ width: "100%", height: "1000px" }} />
+        <CornerDialog
+          onCloseComplete={() => setOpen(false)}
+          title="Dialog Title"
+          {...args}
+          isShown={open}
+        >
+          {children}
+        </CornerDialog>
+      </div>
+    );
+  },
 };