Update to Storybook 10

[alexdunae]

Based on #202

Update to Storybook 10
Replace withAccessTokenOverride HOC with Storybook args
Use Storybook channels for auth add on
Fixed dark mode
Updated Storybook add-on buttons etc... to non-deprecated components

Fixes #108

[Copilot]

Pull request overview

Upgrades the Storybook tooling from v6 to v10, replacing the legacy globals-based addon integration with a channel/event-based approach and migrating story/decorator typings to the new @storybook/react-webpack5 package. The auth and project-selection toolbar addons are rewritten against storybook/manager-api and storybook/internal/components, and a shared preview decorator listens to those channel events to inject accessToken / iTwinId into story args.

Changes:

• Migrate Storybook config to v10 (main.ts, new preview.tsx, framework @storybook/react-webpack5, SWC compiler, dropped addon-essentials/addon-actions/addon-links and @storybook/addons/api/components/theming).
• Rewrite storybook-auth-addon and src/addon manager entries to use storybook/manager-api, storybook/internal/components, @storybook/icons, and a custom ACCESS_TOKEN_EVENT / ITWIN_ID_EVENT channel instead of useGlobals/updateGlobals.
• Update all *.stories.tsx files to use StoryFn/Meta from @storybook/react-webpack5, remove the withAccessTokenOverride / withITwinIdOverride HOCs, and adapt a few stories (decorators for CreateIModel/UpdateIModel, removed hard-coded iTwinId default).

Reviewed changes

Copilot reviewed 26 out of 27 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/apps/storybook/package.json	Switch deps/scripts to Storybook 10 + SWC + react-webpack5.
packages/apps/storybook/.storybook/main.ts	New TS Storybook config replacing main.js, with framework, addons and webpack aliases.
packages/apps/storybook/.storybook/main.js	Removed (replaced by main.ts).
packages/apps/storybook/.storybook/preview.tsx	New decorator that subscribes to channel events and injects accessToken/iTwinId into args.
packages/apps/storybook/.storybook/preview.js	Removed (replaced by preview.tsx).
packages/apps/storybook/.storybook/itwinTheme.js	Update create import to storybook/theming.
packages/apps/storybook/src/addon/manager.jsx	Rewrite project toolbar addon for Storybook 10 (channel events, click-trigger tooltip, SvgItwin icon).
packages/apps/storybook/src/addon/preset.js	New preset registering manager.jsx.
packages/modules/storybook-auth-addon/manager.jsx	Rewrite auth addon for Storybook 10 with channel events and @storybook/icons.
packages/modules/storybook-auth-addon/preset.js	New preset registering manager.jsx.
packages/modules/storybook-auth-addon/package.json	Replace `@storybook/addons
packages/apps/storybook/src/utils/storyHelp.ts	Drop withAccessTokenOverride / withITwinIdOverride HOCs and Story import.
packages/apps/storybook/src/**/(*.stories.tsx)	Replace Story with StoryFn from @storybook/react-webpack5, drop HOC wrappers, minor cleanups (decorators, void on fire-and-forget call, formatting).

Comments suppressed due to low confidence (2)

packages/modules/storybook-auth-addon/manager.jsx:133

• The previous implementation rendered an animated Loader spinner while authentication was in flight; it has been replaced with the static text <span>...</span>, which is a visual regression (no longer indicates progress, and is not accessible as a busy indicator). Consider using an actual spinner component from @storybook/icons or storybook/internal/components instead of a literal ellipsis string.
  packages/apps/storybook/src/addon/manager.jsx:141
• The previous IconButton had onClick={() => updateGlobals({ iTwinId: "" })} to clear the currently-selected iTwin, and onMouseEnter={() => fetchProjects()} to prefetch the favorites list. Both handlers were removed and the new code only fetches projects when the tooltip becomes visible. Since WithTooltip now uses trigger="click", clicking the button only opens the tooltip — there is no longer any way to clear the selection directly from the toolbar (the user has to open the menu and click the active item). The title still advertises "(click to unselect)" when something is selected, which is misleading. Either restore an onClick that clears selectedId (and emits the event) or update the title text to match the new behavior.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.