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

.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.0.2",
+    "@storybook/addon-links": "7.0.2",
+    "@storybook/addon-mdx-gfm": "7.0.2",
+    "@storybook/addon-storysource": "7.0.2",
+    "@storybook/react": "7.0.2",
+    "@storybook/react-webpack5": "7.0.2",
     "@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.0.2",
     "styled-components": "5.3.5",
     "ts-jest": "28.0.4",
     "typescript": "4.9.3"