Update Storybook fully and move it to TS

Author: pimterry

.babelrc.json

@@ -0,0 +1,6 @@
+{
+  "presets": [
+    ["@babel/preset-react", { "runtime": "automatic" }],
+    "@babel/preset-typescript"
+  ]
+}

.github/workflows/ci.yml

@@ -7,7 +7,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [14.x, 16.x, 18.x, 20.x, 22.x, 24.x]
+        node-version: ["24.x"]
 
     steps:
       - uses: actions/checkout@v4
@@ -21,8 +21,7 @@ jobs:
       - run: npm run build-storybook --quiet
 
       - uses: actions/upload-artifact@v4
-        # Only publish examples using the main branch, and only from one build
-        if: github.ref == 'refs/heads/main' && matrix.node-version == '24.x'
+        if: github.ref == 'refs/heads/main'
         with:
           name: examples
           path: examples/*

.storybook/addons.js

@@ -0,0 +1,44 @@
+module.exports = {
+  stories: ['../stories/**/*.stories.@(js|jsx|tsx)'],
+  addons: ['@storybook/addon-docs'],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
+  },
+  docs: {
+    autodocs: true,
+  },
+  typescript: {
+    check: true,
+    reactDocgen: false,
+  },
+  webpackFinal: async (config) => {
+    const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');
+
+    // Ensure babel-loader processes story files
+    config.module.rules.push({
+      test: /\.(ts|tsx|js|jsx)$/,
+      include: /stories/,
+      use: [{
+        loader: require.resolve('babel-loader'),
+        options: {
+          presets: [
+            [require.resolve('@babel/preset-react'), { runtime: 'automatic' }],
+            require.resolve('@babel/preset-typescript')
+          ]
+        }
+      }]
+    });
+
+    // Add TypeScript type checking
+    config.plugins.push(
+      new ForkTsCheckerWebpackPlugin({
+        typescript: {
+          configFile: require('path').resolve(__dirname, '../stories/tsconfig.json'),
+        },
+      })
+    );
+
+    return config;
+  },
+};

.storybook/config.js

@@ -0,0 +1,5 @@
+export const parameters = {
+  docs: {
+    codePanel: true,
+  },
+};

.storybook/main.js

@@ -16,8 +16,8 @@
     "pretest": "npm run build",
     "test": "echo \"It built ok, that'll do for now\"",
     "prepare": "npm run build",
-    "storybook": "start-storybook -p 6006",
-    "build-storybook": "build-storybook -o examples"
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build -o examples"
   },
   "repository": {
     "type": "git",
@@ -40,17 +40,22 @@
   "homepage": "https://github.com/httptoolkit/react-reverse-portal#readme",
   "devDependencies": {
     "@babel/core": "^7.5.5",
-    "@storybook/addon-storysource": "~5.1.11",
-    "@storybook/addons": "~5.1.11",
-    "@storybook/react": "~5.1.11",
+    "@babel/preset-react": "^7.27.1",
+    "@babel/preset-typescript": "^7.27.1",
+    "@storybook/addon-docs": "^9.1.10",
+    "@storybook/preset-react-webpack": "^9.1.10",
+    "@storybook/react": "^9.1.10",
+    "@storybook/react-webpack5": "^9.1.10",
     "@types/events": "^3.0.0",
     "@types/node": "^24.6.2",
-    "@types/react": "^16.9.2",
-    "@types/react-dom": "^16.9.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
     "babel-loader": "^8.0.6",
-    "react": "^16.9.0",
-    "react-dom": "^16.9.0",
+    "fork-ts-checker-webpack-plugin": "^9.1.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rimraf": "^3.0.0",
+    "storybook": "^9.1.10",
     "typescript": "^5.9.3"
   },
   "peerDependencies": {