Storybook HMR + VSCode Launch Configuration

.vscode/launch.json

@@ -0,0 +1,47 @@
+{
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "type": "node",
+      "request": "launch",
+      "name": "Start Storybook",
+      "cwd": "${workspaceFolder}/packages/apps/storybook",
+      "runtimeExecutable": "pnpm",
+      "runtimeArgs": ["start"],
+      "console": "integratedTerminal",
+      "internalConsoleOptions": "neverOpen",
+      "serverReadyAction": {
+        "pattern": "Local:\\s+(https?://\\S+)",
+        "uriFormat": "%s",
+        "action": "openExternally"
+      }
+    },
+    {
+      "type": "chrome",
+      "request": "launch",
+      "name": "Debug Storybook",
+      "url": "http://localhost:6006",
+      "webRoot": "${workspaceFolder}",
+      "sourceMaps": true,
+      "skipFiles": ["<node_internals>/**"],
+      "sourceMapPathOverrides": {
+        "webpack:///packages/modules/*": "${webRoot}/packages/modules/*",
+        "webpack:///./packages/apps/storybook/src/*": "${webRoot}/packages/apps/storybook/src/*",
+        "webpack:///./packages/modules/imodel-browser/src/*": "${webRoot}/packages/modules/imodel-browser/src/*",
+        "webpack:///./packages/modules/create-imodel/src/*": "${webRoot}/packages/modules/create-imodel/src/*",
+        "webpack:///./packages/modules/delete-imodel/src/*": "${webRoot}/packages/modules/delete-imodel/src/*",
+        "webpack:///./packages/modules/delete-itwin/src/*": "${webRoot}/packages/modules/delete-itwin/src/*",
+        "webpack:///./packages/modules/manage-versions/src/*": "${webRoot}/packages/modules/manage-versions/src/*",
+        "webpack://@itwin/imodel-browser-react/src/*": "${webRoot}/packages/modules/imodel-browser/src/*",
+        "webpack://@itwin/create-imodel-react/src/*": "${webRoot}/packages/modules/create-imodel/src/*",
+        "webpack://@itwin/delete-imodel-react/src/*": "${webRoot}/packages/modules/delete-imodel/src/*",
+        "webpack://@itwin/delete-itwin-react/src/*": "${webRoot}/packages/modules/delete-itwin/src/*",
+        "webpack://@itwin/manage-versions-react/src/*": "${webRoot}/packages/modules/manage-versions/src/*",
+        "webpack:///*": "${webRoot}/*",
+        "webpack:///./~/*": "${webRoot}/node_modules/*",
+        "webpack:///./*": "${webRoot}/*"
+      },
+      "preLaunchTask": "Start Storybook Server"
+    }
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,32 @@
+{
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Start Storybook Server",
+      "type": "shell",
+      "command": "pnpm",
+      "args": ["start"],
+      "options": {
+        "cwd": "${workspaceFolder}/packages/apps/storybook"
+      },
+      "isBackground": true,
+      "problemMatcher": {
+        "pattern": {
+          "regexp": "^(.*)$",
+          "file": 1,
+          "location": 2,
+          "message": 3
+        },
+        "background": {
+          "activeOnStart": true,
+          "beginsPattern": ".*",
+          "endsPattern": "(Local:|On Your Network:).*http"
+        }
+      },
+      "presentation": {
+        "reveal": "always",
+        "panel": "dedicated"
+      }
+    }
+  ]
+}

packages/apps/storybook/.storybook/main.js

@@ -27,7 +27,55 @@ module.exports = {
 
     config.resolve.mainFields = ["module", "main"];
 
-    // Return the altered config
+    const packagePaths = {
+      "@itwin/imodel-browser-react": path.resolve(__dirname, "../../../modules/imodel-browser/src"),
+        "@itwin/create-imodel-react": path.resolve(__dirname, "../../../modules/create-imodel/src"),
+        "@itwin/delete-imodel-react": path.resolve(__dirname, "../../../modules/delete-imodel/src"),
+        "@itwin/delete-itwin-react": path.resolve(__dirname, "../../../modules/delete-itwin/src"),
+        "@itwin/manage-versions-react": path.resolve(__dirname, "../../../modules/manage-versions/src"),
+    }
+    // Enable HMR for local packages in development by aliasing to source directories
+    if (configType === 'DEVELOPMENT') {
+      // Use full source maps to allow VS Code Chrome debugger to map back to TS/TSX sources
+      config.devtool = 'source-map';
+      config.output = config.output || {};
+      config.output.devtoolModuleFilenameTemplate = (info) => {
+        // Derive repo root (four levels up from .storybook: ../../../../)
+        const repoRoot = path.resolve(__dirname, '../../../../');
+        let relPath = path.relative(repoRoot, info.absoluteResourcePath).replace(/\\/g, '/');
+        return `webpack:///${relPath}`;
+      };
+      config.resolve.alias = {
+        ...config.resolve.alias,
+        ...packagePaths
+      };
+
+      // Ensure TypeScript files from source directories are processed
+      config.module.rules.push({
+        test: /\.(ts|tsx)$/,
+        include: Object.values(packagePaths),
+        use: [
+          {
+            loader: require.resolve('babel-loader'),
+            options: {
+              presets: [
+                require.resolve('@babel/preset-env'),
+                require.resolve('@babel/preset-react'),
+                require.resolve('@babel/preset-typescript'),
+              ],
+            },
+          },
+        ],
+      });
+
+      // Handle SCSS files from source directories
+      config.module.rules.push({
+        test: /\.scss$/,
+        include: Object.values(packagePaths),
+        use: ['style-loader', 'css-loader', 'sass-loader'],
+      });
+    }
+
     return config;
   },
   staticDirs: ["../../../modules/storybook-auth-addon/build"]

packages/apps/storybook/package.json

@@ -4,11 +4,18 @@
   "private": true,
   "devDependencies": {
     "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.10",
+    "@babel/preset-react": "^7.12.10",
+    "@babel/preset-typescript": "^7.12.10",
     "@bentley/bentleyjs-core": "2.11.0",
     "@storybook/builder-webpack5": "6.5.16",
     "@storybook/manager-webpack5": "6.5.16",
     "@bentley/frontend-authorization-client": "2.11.0",
     "@bentley/itwin-client": "2.11.0",
+    "css-loader": "^6.7.0",
+    "sass": "^1.50.0",
+    "sass-loader": "^12.6.0",
+    "style-loader": "^3.3.0",
     "@itwin/create-imodel-react": "workspace:*",
     "@itwin/delete-imodel-react": "workspace:*",
     "@itwin/delete-itwin-react": "workspace:*",
@@ -53,5 +60,6 @@
     "build": "",
     "test": "build-storybook --loglevel error --quiet",
     "clean": "rimraf storybook-static"
-  }
+  },
+  "packageManager": "pnpm@10.15.1+sha512.34e538c329b5553014ca8e8f4535997f96180a1d0f614339357449935350d924e22f8614682191264ec33d1462ac21561aff97f6bb18065351c162c7e8f6de67"
 }