Revert "Revert "storybook v6 -> v7" (#1257)"

This reverts commit 3457a95.
voyagegroup · Apr 25, 2023 · 13489df · 13489df
1 parent 3457a95
commit 13489df
Show file tree

Hide file tree

Showing 56 changed files with 5,162 additions and 7,175 deletions.
diff --git a/.babelrc.json b/.babelrc.json
@@ -0,0 +1,23 @@
+{
+  "sourceType": "unambiguous",
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "targets": {
+          "chrome": 100
+        }
+      }
+    ],
+    "@babel/preset-typescript",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-proposal-class-properties",
+      {
+        "loose": true
+      }
+    ]
+  ]
+}
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -168,6 +168,7 @@ module.exports = {
         // I realize it's silly of me, but I'll turn it off here for the sake of specs for once.
         "jsx-a11y/click-events-have-key-events": "off",
         "jsx-a11y/no-static-element-interactions": "off",
+        "react-hooks/rules-of-hooks": "off",
       },
     },
     {

diff --git a/.scaffdog/component.md b/.scaffdog/component.md
@@ -67,15 +67,17 @@ describe("{{ inputs.name | pascal }} component testing", () => {
 
 ```typescript
 import * as React from "react";
-import { Story } from "@storybook/react/types-6-0";
+import { StoryObj } from "@storybook/react";
 import {{ inputs.name | pascal }}, { {{ inputs.name | pascal }}Props } from "./{{ inputs.name | pascal }}";
 
 export default {
   title: "Components/〇〇/{{ inputs.name | pascal }}",
   component: {{ inputs.name | pascal }},
 };
 
-export const Example: Story<{{ inputs.name | pascal }}Props> = (args) => (
-  <{{ inputs.name | pascal }} {...args} />
-);
+export const Example: StoryObj<{{ inputs.name | pascal }}Props> = {
+  render: (args) => (
+    <{{ inputs.name | pascal }} {...args} />
+  )
+};
 ```
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -8,26 +8,25 @@ module.exports = {
     "@storybook/addon-essentials",
     "@storybook/addon-links",
     "@storybook/addon-storysource",
-    "@storybook/addon-postcss",
     {
       // MEMO: included in addon-essentials
       name: "@storybook/addon-docs",
       options: {
-        sourceLoaderOptions: {
+        csfPluginOptions: {
           injectStoryParameters: false,
         },
       },
     },
+    "@storybook/addon-mdx-gfm",
   ],
-  reactOptions: {
-    // TODO: fix warn "Rendered more hooks than during the previous render."
-    // strictMode: true,
+  features: {
+    babelModeV7: true,
   },
-  babel: async (options) => ({
-    ...options,
-    plugins: [["@babel/plugin-proposal-class-properties", { loose: true }]],
-  }),
-  core: {
-    builder: "webpack5",
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  docs: {
+    autodocs: true,
   },
 };
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,6 +1,5 @@
 import * as React from "react";
 import { ThemeProvider, createTheme } from "../src/themes";
-import "@storybook/addon-console";
 
 const theme = createTheme();
 

diff --git a/package.json b/package.json
@@ -18,8 +18,8 @@
     "build": "NODE_ENV=production rollup -c",
     "start": "rollup -c -w",
     "playground": "yarn build && cd testEnv && yarn install && yarn start",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "lint": "tsc && eslint 'src/**/*.{ts,tsx}' && prettier --check 'src/**/*.{ts,tsx}'",
     "format": "prettier --write 'src/**/*.{ts,tsx}'",
     "generate": "yarn scaffdog generate"
@@ -39,18 +39,19 @@
     "styled-components": ">= 5.X"
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.21.4",
+    "@babel/preset-react": "^7.18.6",
+    "@babel/preset-typescript": "^7.21.4",
     "@rollup/plugin-commonjs": "24.1.0",
     "@rollup/plugin-node-resolve": "15.0.0",
     "@rollup/plugin-typescript": "11.1.0",
     "@rollup/plugin-url": "8.0.0",
-    "@storybook/addon-console": "1.2.3",
-    "@storybook/addon-essentials": "6.5.9",
-    "@storybook/addon-links": "6.5.9",
-    "@storybook/addon-postcss": "2.0.0",
-    "@storybook/addon-storysource": "6.5.9",
-    "@storybook/builder-webpack5": "6.5.12",
-    "@storybook/manager-webpack5": "6.5.12",
-    "@storybook/react": "6.5.9",
+    "@storybook/addon-essentials": "7.1.0-alpha.8",
+    "@storybook/addon-links": "7.1.0-alpha.8",
+    "@storybook/addon-mdx-gfm": "7.1.0-alpha.8",
+    "@storybook/addon-storysource": "7.1.0-alpha.8",
+    "@storybook/react": "7.1.0-alpha.8",
+    "@storybook/react-webpack5": "7.1.0-alpha.8",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "14.0.0",
     "@types/jest": "28.1.1",
@@ -80,6 +81,7 @@
     "rollup-plugin-peer-deps-external": "2.2.4",
     "rollup-plugin-terser": "7.0.2",
     "scaffdog": "2.5.0",
+    "storybook": "7.1.0-alpha.8",
     "styled-components": "5.3.5",
     "ts-jest": "28.0.4",
     "typescript": "4.9.3"

diff --git a/src/components/Accordion/Accordion.stories.tsx b/src/components/Accordion/Accordion.stories.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { Story } from "@storybook/react/types-6-0";
+import { StoryObj } from "@storybook/react";
 import Accordion, { AccordionProps } from "./Accordion";
 
 export default {
@@ -13,64 +13,22 @@ export default {
   },
 };
 
-export const Example: Story<AccordionProps> = (args) => (
-  <>
+export const Example: StoryObj<AccordionProps> = {
+  render: (args) => (
     <Accordion
       title={args.title}
       disabled={args.disabled}
       expanded={args.expanded}
     >
       <div style={{ padding: "4px 8px" }}>{args.children}</div>
     </Accordion>
-  </>
-);
-
-export const Multiple: Story<AccordionProps> = () => (
-  <>
-    <Accordion title="title1">
-      <div style={{ padding: "4px 8px" }}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit
-        magna, dictum vel elementum ac, fermentum quis lorem. Aliquam sapien
-        augue, efficitur eget tincidunt non, accumsan et est. Aliquam lobortis
-        elit lorem, id ullamcorper libero elementum non. Sed rutrum porta enim,
-        et aliquet velit hendrerit ac. Morbi tincidunt eleifend elit.
-      </div>
-    </Accordion>
-    <Accordion title="title2">
-      <div style={{ padding: "4px 8px" }}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit
-        magna, dictum vel elementum ac, fermentum quis lorem. Aliquam sapien
-        augue, efficitur eget tincidunt non, accumsan et est. Aliquam lobortis
-        elit lorem, id ullamcorper libero elementum non. Sed rutrum porta enim,
-        et aliquet velit hendrerit ac. Morbi tincidunt eleifend elit.
-      </div>
-    </Accordion>
-    <Accordion disabled title="disabled">
-      <div style={{ padding: "4px 8px" }}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit
-        magna, dictum vel elementum ac, fermentum quis lorem. Aliquam sapien
-        augue, efficitur eget tincidunt non, accumsan et est. Aliquam lobortis
-        elit lorem, id ullamcorper libero elementum non. Sed rutrum porta enim,
-        et aliquet velit hendrerit ac. Morbi tincidunt eleifend elit.
-      </div>
-    </Accordion>
-  </>
-);
-
-export const Controlled: Story<AccordionProps> = () => {
-  const [expanded, setExpanded] = React.useState<string | false>(false);
-  const handleChange =
-    (panel: string) => (_: React.SyntheticEvent, newExpanded: boolean) => {
-      setExpanded(newExpanded ? panel : false);
-    };
+  ),
+};
 
-  return (
+export const Multiple: StoryObj<AccordionProps> = {
+  render: () => (
     <>
-      <Accordion
-        title="title1"
-        expanded={expanded === "title1"}
-        onChange={handleChange("title1")}
-      >
+      <Accordion title="title1">
         <div style={{ padding: "4px 8px" }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit
           magna, dictum vel elementum ac, fermentum quis lorem. Aliquam sapien
@@ -79,11 +37,7 @@ export const Controlled: Story<AccordionProps> = () => {
           enim, et aliquet velit hendrerit ac. Morbi tincidunt eleifend elit.
         </div>
       </Accordion>
-      <Accordion
-        title="title2"
-        expanded={expanded === "title2"}
-        onChange={handleChange("title2")}
-      >
+      <Accordion title="title2">
         <div style={{ padding: "4px 8px" }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit
           magna, dictum vel elementum ac, fermentum quis lorem. Aliquam sapien
@@ -92,11 +46,7 @@ export const Controlled: Story<AccordionProps> = () => {
           enim, et aliquet velit hendrerit ac. Morbi tincidunt eleifend elit.
         </div>
       </Accordion>
-      <Accordion
-        title="title3"
-        expanded={expanded === "title3"}
-        onChange={handleChange("title3")}
-      >
+      <Accordion disabled title="disabled">
         <div style={{ padding: "4px 8px" }}>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit
           magna, dictum vel elementum ac, fermentum quis lorem. Aliquam sapien
@@ -106,5 +56,62 @@ export const Controlled: Story<AccordionProps> = () => {
         </div>
       </Accordion>
     </>
-  );
+  ),
+};
+
+export const Controlled: StoryObj<AccordionProps> = {
+  render: () => {
+    const [expanded, setExpanded] = React.useState<string | false>(false);
+    const handleChange =
+      (panel: string) => (_: React.SyntheticEvent, newExpanded: boolean) => {
+        setExpanded(newExpanded ? panel : false);
+      };
+
+    return (
+      <>
+        <Accordion
+          title="title1"
+          expanded={expanded === "title1"}
+          onChange={handleChange("title1")}
+        >
+          <div style={{ padding: "4px 8px" }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit
+            magna, dictum vel elementum ac, fermentum quis lorem. Aliquam sapien
+            augue, efficitur eget tincidunt non, accumsan et est. Aliquam
+            lobortis elit lorem, id ullamcorper libero elementum non. Sed rutrum
+            porta enim, et aliquet velit hendrerit ac. Morbi tincidunt eleifend
+            elit.
+          </div>
+        </Accordion>
+        <Accordion
+          title="title2"
+          expanded={expanded === "title2"}
+          onChange={handleChange("title2")}
+        >
+          <div style={{ padding: "4px 8px" }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit
+            magna, dictum vel elementum ac, fermentum quis lorem. Aliquam sapien
+            augue, efficitur eget tincidunt non, accumsan et est. Aliquam
+            lobortis elit lorem, id ullamcorper libero elementum non. Sed rutrum
+            porta enim, et aliquet velit hendrerit ac. Morbi tincidunt eleifend
+            elit.
+          </div>
+        </Accordion>
+        <Accordion
+          title="title3"
+          expanded={expanded === "title3"}
+          onChange={handleChange("title3")}
+        >
+          <div style={{ padding: "4px 8px" }}>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc velit
+            magna, dictum vel elementum ac, fermentum quis lorem. Aliquam sapien
+            augue, efficitur eget tincidunt non, accumsan et est. Aliquam
+            lobortis elit lorem, id ullamcorper libero elementum non. Sed rutrum
+            porta enim, et aliquet velit hendrerit ac. Morbi tincidunt eleifend
+            elit.
+          </div>
+        </Accordion>
+      </>
+    );
+  },
 };
diff --git a/src/components/ActionButton/ActionButton.stories.tsx b/src/components/ActionButton/ActionButton.stories.tsx
@@ -1,6 +1,6 @@
 import { action } from "@storybook/addon-actions";
 import { ArgsTable, Description, Stories, Title } from "@storybook/addon-docs";
-import { Story } from "@storybook/react/types-6-0";
+import { StoryObj } from "@storybook/react";
 import React from "react";
 import ActionButton, { ActionButtonProps } from "./ActionButton";
 
@@ -14,7 +14,7 @@ export default {
   },
   parameters: {
     docs: {
-      source: { type: "code" },
+      source: { language: "tsx" },
       page: () => (
         <>
           <Title />
@@ -27,16 +27,20 @@ export default {
   },
 };
 
-const Template: Story<ActionButtonProps> = (args) => <ActionButton {...args} />;
-
-export const Primary = Template.bind({});
+export const Primary: StoryObj<ActionButtonProps> = {
+  args: {
+    color: "primary",
+  },
+};
 
-export const Warning = Template.bind({});
-Warning.args = {
-  color: "warning",
+export const Warning: StoryObj<ActionButtonProps> = {
+  args: {
+    color: "warning",
+  },
 };
 
-export const Disabled = Template.bind({});
-Disabled.args = {
-  disabled: true,
+export const Disabled: StoryObj<ActionButtonProps> = {
+  args: {
+    disabled: true,
+  },
 };