Upgrade storybook to v7

.eslintrc.js

@@ -17,6 +17,7 @@ module.exports = {
     "plugin:react-hooks/recommended",
     "plugin:eslint-comments/recommended",
     "prettier",
+    "plugin:storybook/recommended",
   ],
   rules: {
     "eslint-comments/disable-enable-pair": "off",

.github/actions/setup/action.yml

@@ -19,7 +19,7 @@ runs:
         cache: 'pnpm'
 
     # Wireit cache
-    - uses: google/wireit@setup-github-actions-caching/v1
+    # - uses: google/wireit@setup-github-actions-caching/v1
 
     - name: Install dependencies
       shell: bash

.storybook/main.js

@@ -5,16 +5,21 @@ const ROOT = path.resolve(__dirname, "..");
 const PKGS = path.resolve(ROOT, "packages");
 const STORIES = path.resolve(ROOT, "stories");
 
+const wrapForPnp = (packageName) => path.dirname(require.resolve(path.join(packageName, 'package.json')));
+
 module.exports = {
   webpackFinal: async (config) => {
     // Read all the victory packages and alias.
-    glob.sync(path.join(PKGS, "victory*/package.json").replace(/\\/g, "/")).forEach((pkgPath) => {
-      const key = path.dirname(path.relative(PKGS, pkgPath));
-      config.resolve.alias[key] = path.resolve(path.dirname(pkgPath));
-    });
+    glob
+      .sync(path.join(PKGS, "victory*/package.json"))
+      .forEach((pkgPath) => {
+        const key = path.dirname(path.relative(PKGS, pkgPath));
+        config.resolve.alias[key] = path.resolve(path.dirname(pkgPath));
+      });
 
     return config;
   },
+
   addons: [
     "@storybook/addon-options/register",
     {
@@ -30,8 +35,18 @@ module.exports = {
       },
     },
   ],
+
   // Use glob to locate the stories, because it ignores our circular dependencies.
   stories: glob.sync("../**/*.stories.@(js|jsx|ts|tsx)", {
     cwd: __dirname,
   }),
+
+  framework: {
+    name: wrapForPnp("@storybook/react-webpack5"),
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
 };

package.json

@@ -45,10 +45,11 @@
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "^7.17.12",
     "@changesets/cli": "^2.24.1",
-    "@storybook/addon-actions": "^6.5.6",
+    "@storybook/addon-actions": "^7.6.7",
     "@storybook/addon-options": "^5.3.21",
-    "@storybook/addon-storysource": "^6.5.6",
-    "@storybook/react": "^6.5.6",
+    "@storybook/addon-storysource": "^7.6.7",
+    "@storybook/react": "^7.6.7",
+    "@storybook/react-webpack5": "^7.6.7",
     "@svitejs/changesets-changelog-github-compact": "^0.1.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.3.0",
@@ -83,6 +84,7 @@
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-react": "^7.0.0",
     "eslint-plugin-react-hooks": "^4.2.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "fs-extra": "^10.0.0",
     "glob": "8.0.3",
     "immutable": "^3.8.2",
@@ -104,6 +106,7 @@
     "remark-stringify": "^7.0.3",
     "rimraf": "^3.0.2",
     "seedrandom": "^3.0.5",
+    "storybook": "^7.6.7",
     "styled-components": "^5.3.5",
     "ts-jest": "^28.0.7",
     "ts-loader": "^9.3.0",
@@ -158,7 +161,7 @@
     "types:create": "wireit",
     "storybook:build": "wireit",
     "build-storybook": "pnpm run build:lib:esm && pnpm exec build-storybook",
-    "storybook:server": "concurrently --raw \"pnpm:build:lib:esm --watch\" \"start-storybook -p 6006\"",
+    "storybook:server": "concurrently --raw \"pnpm:build:lib:esm --watch\" \"pnpx storybook dev -p 6006\"",
     "chromatic": "wireit",
     "chromatic:ci": "wireit",
     "sync": "wireit",
@@ -476,7 +479,7 @@
       ]
     },
     "storybook:build": {
-      "command": "build-storybook",
+      "command": "storybook build",
       "files": [
         ".storybook",
         "stories",