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.

[Copilot]

Pull request overview

Copilot reviewed 34 out of 35 changed files in this pull request and generated no new comments.

Comments suppressed due to low confidence (5)

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

• In the catch block, setState({ loading: false }) will replace the entire addon state value, clearing email/accessToken unexpectedly. Use a merging functional update (or set all fields explicitly).
  packages/apps/storybook/src/addon/manager.jsx:138
• The tooltip trigger is click, but the IconButton no longer has an onClick that clears the selection. The title string still says "(click to unselect)", which is misleading (unselecting currently requires clicking the active project inside the tooltip list). Consider updating the title to match the actual interaction.
  packages/modules/storybook-auth-addon/manager.jsx:15
• Importing UI components from storybook/internal/components relies on Storybook internal (non-public) APIs that may change without notice. For addon UIs, prefer the public @storybook/components package (and adjust dependencies accordingly) to avoid breakage across Storybook updates.
  packages/apps/storybook/src/addon/manager.jsx:16
• storybook/internal/components is an internal import path and not a stable public API. For a custom manager addon, prefer importing IconButton, WithTooltip, etc. from the supported @storybook/components package (and ensure it is listed in dependencies) to reduce upgrade risk.
  packages/apps/storybook/src/addon/manager.jsx:73
• useAddonState behaves like React useState (it replaces the stored value; it does not merge objects). This setState({ projects: ... }) call will replace the full { mustLoad, projects, ... } state, which can make state.mustLoad become undefined and change fetchProjects control flow. The same issue applies to the later setState({ projects: projects }) after a successful fetch—use a functional update that preserves other fields (and consider setting mustLoad: false after the initial load).