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.ts

@@ -0,0 +1,98 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import type { StorybookConfig } from "@storybook/react-webpack5";
+import path from "path";
+import { fileURLToPath } from "url";
+
+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/addon-webpack5-compiler-swc",
+    "storybook-dark-mode",
+    "../../../modules/storybook-auth-addon",
+    "../src/addon",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
+  typescript: {
+    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 = config.resolve || {};
+    config.resolve.mainFields = ["module", "main"];
+
+    const packagePaths: Record<string, string> = {
+      "@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"
+      ),
+    };
+
+    // Alias local packages to source directories for both dev and production builds
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      ...packagePaths,
+    };
+
+    // 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: {
+        absoluteResourcePath: string;
+      }) => {
+        // Derive repo root (four levels up from .storybook: ../../../../)
+        const repoRoot = path.resolve(__dirname, "../../../../");
+        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"],
+    });
+
+    return config;
+  },
+};
+
+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,92 @@
+/*---------------------------------------------------------------------------------------------
+ * 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 { 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}
+        // 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:*",
@@ -24,14 +26,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",
@@ -51,14 +45,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"