Migrate storybook to typescript (#2747)

Author: carbonrobot

.storybook/main.js .storybook/main.ts

@@ -1,27 +1,30 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
 /* globals __dirname:false */
 const path = require("path");
 const glob = require("glob");
 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')));
+const wrapForPnp = (packageName) =>
+  path.dirname(require.resolve(path.join(packageName, "package.json")));
 
-module.exports = {
+const config: StorybookConfig = {
   webpackFinal: async (config) => {
     // Read all the victory packages and alias.
-    glob
-      .sync(path.join(PKGS, "victory*/package.json"))
-      .forEach((pkgPath) => {
-        const key = path.dirname(path.relative(PKGS, pkgPath));
+    glob.sync(path.join(PKGS, "victory*/package.json")).forEach((pkgPath) => {
+      const key = path.dirname(path.relative(PKGS, pkgPath));
+      if (config?.resolve?.alias) {
         config.resolve.alias[key] = path.resolve(path.dirname(pkgPath));
-      });
+      }
+    });
 
     return config;
   },
 
   addons: [
-    "@storybook/addon-options/register",
+    "@storybook/addon-essentials",
     {
       name: "@storybook/addon-storysource",
       options: {
@@ -49,4 +52,18 @@ module.exports = {
       },
     },
   },
+
+  typescript: {
+    // typescript compilation check is disabled until we upgrade the babel version
+    // which is required for the latest version of storybook to do typechecking
+    // https://github.com/FormidableLabs/victory/issues/2746
+    check: false,
+    checkOptions: {
+      typescript: {
+        configFile: path.join(__dirname, "../tsconfig.base.json"),
+      },
+    },
+  },
 };
+
+export default config;

package.json

@@ -45,9 +45,8 @@
     "@babel/preset-react": "7.18.6",
     "@babel/preset-typescript": "^7.17.12",
     "@changesets/cli": "^2.24.1",
-    "@storybook/addon-actions": "^7.6.7",
-    "@storybook/addon-options": "^5.3.21",
-    "@storybook/addon-storysource": "^7.6.7",
+    "@storybook/addon-storysource": "^7.6.10",
+    "@storybook/addon-essentials": "^7.6.10",
     "@storybook/react": "^7.6.7",
     "@storybook/react-webpack5": "^7.6.7",
     "@svitejs/changesets-changelog-github-compact": "^0.1.1",
@@ -354,11 +353,10 @@
       ]
     },
     "lint:root": {
-      "command": "nps \"lint:base *.js .storybook scripts config demo stories test\"",
+      "command": "nps \"lint:base *.js scripts config demo stories test\"",
       "files": [
         ".eslintrc.js",
         "*.js",
-        ".storybook",
         "scripts",
         "config",
         "demo",
@@ -372,11 +370,10 @@
       ]
     },
     "lint:root:fix": {
-      "command": "pnpm run lint:root || nps \"lint:base --fix *.js .storybook scripts config demo stories test\"",
+      "command": "pnpm run lint:root || nps \"lint:base --fix *.js scripts config demo stories test\"",
       "files": [
         ".eslintrc.js",
         "*.js",
-        ".storybook",
         "scripts",
         "config",
         "demo",