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/workflows/chromatic.yml

@@ -21,13 +21,12 @@ jobs:
         with:
           fetch-depth: 0
 
-      # requires node16, see https://github.com/FormidableLabs/victory/issues/2668
       - uses: ./.github/actions/setup
         with:
-          node-version: 16.x
+          node-version: 18.x
 
-      - name: Build Storybook
-        run: pnpm run storybook:build
+      - name: Build Victory
+        run: pnpm run build:lib:esm
 
       - name: Publish to Chromatic
         uses: chromaui/action@v1

.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",
@@ -156,11 +159,9 @@
     "jest:pkgs": "wireit",
     "types:check": "wireit",
     "types:create": "wireit",
+    "build-storybook": "storybook build",
     "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\"",
-    "chromatic": "wireit",
-    "chromatic:ci": "wireit",
+    "storybook:server": "concurrently --raw \"pnpm:build:lib:esm --watch\" \"pnpx storybook dev -p 6006\"",
     "sync": "wireit",
     "sync:pkgs": "node ./scripts/sync-pkgs-wireit.js",
     "sync:tsconfig": "pnpm -r --filter !victory-core  --filter !victory-vendor exec -- cpx ../victory-core/tsconfig.* .",
@@ -476,7 +477,7 @@
       ]
     },
     "storybook:build": {
-      "command": "build-storybook",
+      "command": "storybook build",
       "files": [
         ".storybook",
         "stories",
@@ -492,24 +493,6 @@
         "pnpm-lock.yaml"
       ]
     },
-    "chromatic": {
-      "command": "chromatic",
-      "dependencies": [
-        "storybook:build"
-      ],
-      "packageLocks": [
-        "pnpm-lock.yaml"
-      ]
-    },
-    "chromatic:ci": {
-      "command": "chromatic --ci --exit-zero-on-changes",
-      "dependencies": [
-        "storybook:build"
-      ],
-      "packageLocks": [
-        "pnpm-lock.yaml"
-      ]
-    },
     "sync": {
       "dependencies": [
         "sync:pkgs",