storybook v6 -> v7

.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
+      }
+    ]
+  ]
+}

.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",
       },
     },
     {

.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: StoryStoryObj<{{ inputs.name | pascal }}Props> = {
+  render: (args) => (
+    <{{ inputs.name | pascal }} {...args} />
+  )
+};
 ```

.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,
   },
 };

.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();
 

package.json

@@ -18,8 +18,8 @@
     "build": "tsc && 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": "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.0.0",
     "@rollup/plugin-node-resolve": "15.0.0",
     "@rollup/plugin-typescript": "11.0.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.5",
+    "@storybook/addon-links": "7.1.0-alpha.5",
+    "@storybook/addon-mdx-gfm": "7.1.0-alpha.5",
+    "@storybook/addon-storysource": "7.1.0-alpha.5",
+    "@storybook/react": "7.1.0-alpha.5",
+    "@storybook/react-webpack5": "7.1.0-alpha.5",
     "@testing-library/jest-dom": "5.16.4",
     "@testing-library/react": "14.0.0",
     "@types/jest": "28.1.1",
@@ -81,6 +82,7 @@
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-terser": "7.0.2",
     "scaffdog": "2.5.0",
+    "storybook": "7.1.0-alpha.5",
     "styled-components": "5.3.5",
     "ts-jest": "28.0.4",
     "typescript": "4.9.3"

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,
+  },
 };

src/components/Backdrop/Backdrop.stories.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { Story } from "@storybook/react/types-6-0";
+import { StoryObj } from "@storybook/react";
 import { Title, ArgsTable, Stories } from "@storybook/addon-docs";
 import Backdrop, { BackdropProps } from "./Backdrop";
 import Spinner from "../Spinner";
@@ -13,7 +13,7 @@ export default {
   },
   parameters: {
     docs: {
-      source: { type: "code" },
+      source: { language: "tsx" },
       page: () => (
         <>
           <Title />
@@ -25,17 +25,23 @@ export default {
   },
 };
 
-export const Example: Story<BackdropProps> = (args) => {
-  const [isOpen, setIsOpen] = React.useState(false);
-  const handleToggle = () => {
-    setIsOpen(!isOpen);
-  };
-  return (
-    <>
-      <Button onClick={handleToggle}>Toggle Show Backdrop & Spinner</Button>
-      <Backdrop {...args} isOpen={isOpen || args.isOpen} onClick={handleToggle}>
-        <Spinner />
-      </Backdrop>
-    </>
-  );
+export const Example: StoryObj<BackdropProps> = {
+  render: (args) => {
+    const [isOpen, setIsOpen] = React.useState(false);
+    const handleToggle = () => {
+      setIsOpen(!isOpen);
+    };
+    return (
+      <>
+        <Button onClick={handleToggle}>Toggle Show Backdrop & Spinner</Button>
+        <Backdrop
+          {...args}
+          isOpen={isOpen || args.isOpen}
+          onClick={handleToggle}
+        >
+          <Spinner />
+        </Backdrop>
+      </>
+    );
+  },
 };

src/components/Badge/Badge.stories.tsx

@@ -1,18 +1,17 @@
 import React from "react";
-import { Story } from "@storybook/react/types-6-0";
-import { Title, Subtitle, ArgsTable, Stories } from "@storybook/addon-docs";
-import Badge, { BadgeProps } from "./Badge";
+import { StoryObj } from "@storybook/react";
+import { Title, ArgsTable, Stories } from "@storybook/addon-docs";
+import Badge from "./Badge";
 
 export default {
   title: "Components/Data Display/Badge",
   components: Badge,
   parameters: {
     docs: {
-      source: { type: "code" },
+      source: { language: "tsx" },
       page: () => (
         <>
           <Title />
-          <Subtitle />
           <ArgsTable of={Badge} />
           <Stories includePrimary title="Stories" />
         </>
@@ -21,34 +20,45 @@ export default {
   },
 };
 
-const Template: Story<BadgeProps> = (args) => <Badge {...args} />;
-
-export const Primary = Template.bind({});
-Primary.args = {
-  color: "primary",
-  children: "primary",
+const Template: StoryObj<typeof Badge> = {
+  render: (args) => <Badge {...args} />,
 };
 
-export const Secondary = Template.bind({});
-Secondary.args = {
-  color: "secondary",
-  children: "secondary",
+export const Primary: StoryObj<typeof Badge> = {
+  ...Template,
+  args: {
+    color: "primary",
+    children: "primary",
+  },
 };
 
-export const Success = Template.bind({});
-Success.args = {
-  color: "success",
-  children: "success",
+export const Secondary: StoryObj<typeof Badge> = {
+  ...Template,
+  args: {
+    color: "secondary",
+    children: "secondary",
+  },
+};
+export const Success: StoryObj<typeof Badge> = {
+  ...Template,
+  args: {
+    color: "success",
+    children: "success",
+  },
 };
 
-export const Warning = Template.bind({});
-Warning.args = {
-  color: "warning",
-  children: "warning",
+export const Warning: StoryObj<typeof Badge> = {
+  ...Template,
+  args: {
+    color: "warning",
+    children: "warning",
+  },
 };
 
-export const Danger = Template.bind({});
-Danger.args = {
-  color: "danger",
-  children: "danger",
+export const Danger: StoryObj<typeof Badge> = {
+  ...Template,
+  args: {
+    color: "danger",
+    children: "danger",
+  },
 };