Update to Storybook 10

packages/apps/storybook/.storybook/itwinTheme.js

@@ -2,7 +2,7 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-import { create } from "@storybook/theming/create";
+import { create } from "storybook/theming";
 
 export const lightTheme = create({
   base: "light",

packages/apps/storybook/.storybook/main.js → packages/apps/storybook/.storybook/main.ts

@@ -2,60 +2,41 @@
  * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
  * See LICENSE.md in the project root for license terms and full copyright notice.
  *--------------------------------------------------------------------------------------------*/
-const path = require("path");
+import type { StorybookConfig } from "@storybook/react-webpack5";
+import path from "path";
+import { fileURLToPath } from "url";
 
-module.exports = {
-  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+const config: StorybookConfig = {
+  core: {
+    disableTelemetry: true,
+    disableWhatsNewNotifications: true,
+  },
+  stories: ["../src/**/*.stories.@(js|jsx|ts|tsx)"],
   addons: [
-    "storybook-dark-mode/register",
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "../../../modules/storybook-auth-addon/register.js",
-    "../src/addon/register.js",
+    "@storybook/addon-webpack5-compiler-swc",
+    "storybook-dark-mode",
+    "../../../modules/storybook-auth-addon",
+    "../src/addon",
   ],
-  reactOptions: { fastRefresh: true },
-  core: {
-    builder: "webpack5",
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
   },
   typescript: {
-    reactDocgen: false, // Storybook 6 does not support react-docgen-typescript with Typescript 6 - once we update Storybook this can be restored
-  },
-  features: {
-    babelModeV7: true,
+    reactDocgen: "react-docgen-typescript",
   },
+  staticDirs: ["../../../modules/storybook-auth-addon/build"],
   webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
     // You can change the configuration based on that.
     // 'PRODUCTION' is used when building the static version of storybook.
 
-    config.resolve.mainFields = ["browser", "module", "main"];
-    config.resolve.fallback = {
-      ...config.resolve.fallback,
-      fs: false,
-    };
+    config.resolve = config.resolve || {};
+    config.resolve.mainFields = ["module", "main"];
 
-    // Ensure StrataKit icon SVGs are emitted with stable URLs so <Icon href="...#icon" />
-    // resolves correctly in Storybook (pnpm paths can otherwise leak into URLs).
-    config.module.rules.push({
-      test: /\.svg$/i,
-      include: (resourcePath) => {
-        if (!resourcePath) {
-          return false;
-        }
-        const normalized = resourcePath.replace(/\\/g, "/");
-        return (
-          normalized.includes("/node_modules/@stratakit/icons/") ||
-          normalized.includes("/.pnpm/@stratakit+icons@")
-        );
-      },
-      type: "asset/resource",
-      generator: {
-        filename: "static/media/[name].[contenthash:8][ext]",
-        publicPath: "/",
-      },
-    });
-
-    const packagePaths = {
+    const packagePaths: Record<string, string> = {
       "@itwin/imodel-browser-react/mui": path.resolve(
         __dirname,
         "../../../modules/imodel-browser/src/mui"
@@ -81,53 +62,62 @@ module.exports = {
         "../../../modules/manage-versions/src"
       ),
     };
-    // Ensure TypeScript files from source directories are processed
-    // (needed for both dev and production since some stories use relative imports to source)
-    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"],
-    });
 
+    // Alias local packages to source directories for both dev and production builds
     config.resolve.alias = {
       ...config.resolve.alias,
       ...packagePaths,
     };
 
-    // Enable HMR/source maps for local packages in development.
+    // 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) => {
+      config.output.devtoolModuleFilenameTemplate = (info: {
+        absoluteResourcePath: string;
+      }) => {
         // Derive repo root (four levels up from .storybook: ../../../../)
         const repoRoot = path.resolve(__dirname, "../../../../");
-        let relPath = path
+        const relPath = path
           .relative(repoRoot, info.absoluteResourcePath)
           .replace(/\\/g, "/");
         return `webpack:///${relPath}`;
       };
     }
 
+    // Handle SCSS files from source directories
+    config.module = config.module || {};
+    config.module.rules = config.module.rules || [];
+    config.module.rules.push({
+      test: /\.scss$/,
+      include: Object.values(packagePaths),
+      use: ["style-loader", "css-loader", "sass-loader"],
+    });
+
+    // Ensure StrataKit icon SVGs are emitted with stable URLs so <Icon href="...#icon" />
+    // resolves correctly in Storybook (pnpm paths can otherwise leak into URLs).
+    config.module.rules.push({
+      test: /\.svg$/i,
+      include: (resourcePath: string) => {
+        if (!resourcePath) {
+          return false;
+        }
+        const normalized = resourcePath.replace(/\\/g, "/");
+        return (
+          normalized.includes("/node_modules/@stratakit/icons/") ||
+          normalized.includes("/.pnpm/@stratakit+icons@")
+        );
+      },
+      type: "asset/resource",
+      generator: {
+        filename: "static/media/[name].[contenthash:8][ext]",
+        publicPath: "/",
+      },
+    });
+
     return config;
   },
-  staticDirs: ["../../../modules/storybook-auth-addon/build"],
 };
+
+export default config;

packages/apps/storybook/.storybook/preview-head.html

@@ -10,4 +10,8 @@
   #docs-root table thead th {
     color: var(--iui-color-text);
   }
+
+  .forced-thumbnail-height {
+    height: 200px;
+  }
 </style>

packages/apps/storybook/.storybook/preview.tsx

@@ -0,0 +1,96 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import { ThemeProvider } from "@itwin/itwinui-react";
+import { Root } from "@stratakit/mui";
+import { themes } from "storybook/theming";
+import { useDarkMode } from "storybook-dark-mode";
+import { darkTheme, lightTheme } from "./itwinTheme";
+import "@itwin/itwinui-react/styles.css";
+import React from "react";
+import { addons } from "storybook/preview-api";
+
+const ITWIN_ID_EVENT = "project/toolbar/set-itwin-id";
+const ACCESS_TOKEN_EVENT = "auth/toolbar/set-access-token";
+let _currentITwinId = "";
+let _currentAccessToken = "";
+
+export const parameters = {
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  backgrounds: { disable: true },
+  controls: { expanded: true },
+  darkMode: {
+    dark: { ...themes.dark, ...darkTheme },
+    light: { ...themes.light, ...lightTheme },
+  },
+  docs: {
+    theme: { ...themes.light, ...lightTheme },
+  },
+  authClientConfig: {
+    clientId: process.env.STORYBOOK_AUTH_CLIENT_ID,
+    scope: "itwin-platform",
+    authority: "https://qa-ims.bentley.com",
+  },
+  layout: "fullscreen",
+};
+
+export const decorators = [
+  (
+    Story: React.ComponentType<{ args?: Record<string, unknown> }>,
+    context: {
+      globals: Record<string, string>;
+      args: Record<string, unknown>;
+      argTypes: Record<string, unknown>;
+    }
+  ) => {
+    const isDark = useDarkMode();
+    const theme = isDark ? "dark" : "light";
+    const [iTwinId, setITwinId] = React.useState(_currentITwinId);
+    const [accessToken, setAccessToken] = React.useState(_currentAccessToken);
+
+    React.useEffect(() => {
+      const channel = addons.getChannel();
+      const handleITwinId = (id: string) => {
+        _currentITwinId = id;
+        setITwinId(id);
+      };
+      const handleAccessToken = (token: string) => {
+        _currentAccessToken = token;
+        setAccessToken(token);
+      };
+      channel.on(ITWIN_ID_EVENT, handleITwinId);
+      channel.on(ACCESS_TOKEN_EVENT, handleAccessToken);
+      return () => {
+        channel.off(ITWIN_ID_EVENT, handleITwinId);
+        channel.off(ACCESS_TOKEN_EVENT, handleAccessToken);
+      };
+    }, []);
+
+    const injectedArgs: Record<string, unknown> = {};
+    if ("accessToken" in context.argTypes) {
+      injectedArgs.accessToken = accessToken;
+    }
+    if ("iTwinId" in context.argTypes) {
+      injectedArgs.iTwinId = iTwinId;
+    }
+
+    return (
+      <ThemeProvider
+        style={{
+          background: "var(--iui-color-background)",
+          padding: "1rem",
+          minHeight: "100vh",
+        }}
+        theme={theme}
+        as={Root}
+        future={{ themeBridge: true }}
+        colorScheme={theme}
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        children={
+          (<Story args={{ ...context.args, ...injectedArgs }} />) as any
+        }
+      />
+    );
+  },
+];

packages/apps/storybook/package.json

@@ -8,13 +8,15 @@
     "@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",
+    "@storybook/addon-webpack5-compiler-swc": "^4.0.3",
+    "@storybook/icons": "^2.0.2",
+    "@storybook/react-webpack5": "^10.4.0",
     "css-loader": "^6.7.0",
     "sass": "^1.50.0",
     "sass-loader": "^12.6.0",
+    "storybook": "^10.4.0",
     "style-loader": "^3.3.0",
     "@itwin/create-imodel-react": "workspace:*",
     "@itwin/delete-imodel-react": "workspace:*",
@@ -29,14 +31,6 @@
     "@itwin/itwinui-react": "^3.19.4",
     "@itwin/manage-versions-react": "workspace:*",
     "@itwin/storybook-auth-addon": "workspace:*",
-    "@storybook/addon-actions": "^6.5.16",
-    "@storybook/addon-essentials": "^6.5.16",
-    "@storybook/addon-links": "^6.5.16",
-    "@storybook/addons": "^6.5.16",
-    "@storybook/api": "^6.5.16",
-    "@storybook/core-events": "^6.5.16",
-    "@storybook/react": "^6.5.16",
-    "@storybook/theming": "^6.5.16",
     "@types/react": "^18.3.5",
     "@types/react-dom": "^18.3.0",
     "typescript": "~6.0.3",
@@ -56,14 +50,14 @@
     "react-dom": "^18.3.1",
     "react": "^18.3.1",
     "rimraf": "^3.0.2",
-    "storybook-dark-mode": "^1.0.7",
+    "storybook-dark-mode": "^5.0.0",
     "webpack": "^5.28.0"
   },
   "scripts": {
-    "start": "start-storybook -p 6006",
+    "start": "storybook dev -p 6006",
     "build": "",
-    "build-storybook": "build-storybook -o storybook-static",
-    "test": "build-storybook --loglevel error --quiet",
+    "build-storybook": "storybook build -o storybook-static",
+    "test": "storybook build --loglevel error --quiet",
     "clean": "rimraf storybook-static"
   },
   "packageManager": "pnpm@10.15.1+sha512.34e538c329b5553014ca8e8f4535997f96180a1d0f614339357449935350d924e22f8614682191264ec33d1462ac21561aff97f6bb18065351c162c7e8f6de67"