Update to Storybook 10#205
Open
alexdunae wants to merge 34 commits into
Open
Conversation
It is pinned to @typescript-eslint/parser 5.x and blocks us from upgrading Typescript. The whole CRA project is deprecated anyways https://github.com/react/create-react-app/blob/main/packages/eslint-config-react-app/package.json We also remove eslint-plugin-flowtype since we don't use Flow at all
Contributor
There was a problem hiding this comment.
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, newpreview.tsx, framework@storybook/react-webpack5, SWC compiler, droppedaddon-essentials/addon-actions/addon-linksand@storybook/addons/api/components/theming). - Rewrite
storybook-auth-addonandsrc/addonmanager entries to usestorybook/manager-api,storybook/internal/components,@storybook/icons, and a customACCESS_TOKEN_EVENT/ITWIN_ID_EVENTchannel instead ofuseGlobals/updateGlobals. - Update all
*.stories.tsxfiles to useStoryFn/Metafrom@storybook/react-webpack5, remove thewithAccessTokenOverride/withITwinIdOverrideHOCs, and adapt a few stories (decorators for CreateIModel/UpdateIModel, removed hard-codediTwinIddefault).
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
Loaderspinner 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/iconsorstorybook/internal/componentsinstead 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, andonMouseEnter={() => fetchProjects()}to prefetch the favorites list. Both handlers were removed and the new code only fetches projects when the tooltip becomes visible. SinceWithTooltipnow usestrigger="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 clearsselectedId(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.
alexdunae
requested review from
aruniverse,
ben-polinsky,
veekeys and
williamkbentley
as code owners
williamkbentley
approved these changes
May 29, 2026
| config.resolve = config.resolve || {}; | ||
| config.resolve.mainFields = ["module", "main"]; | ||
|
|
||
| const packagePaths: Record<string, string> = { |
Contributor
Author
There was a problem hiding this comment.
I resisted the urge to ditch webpack for vite...
ben-polinsky
approved these changes
May 29, 2026
alexdunae
commented
May 29, 2026
|
|
||
| // 5. Use the created component in the story template, the props documentation will appear "normal" | ||
| const Template: Story<IModelThumbnailProps> = (args) => ( | ||
| <IModelThumbnail {...args} /> |
Contributor
Author
There was a problem hiding this comment.
I have no idea what this story was trying to accomplish before - it wasn't rendering anything visual.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Based on #202
Update to Storybook 10
Replace
withAccessTokenOverrideHOC with Storybook argsUse Storybook channels for auth add on
Fixed dark mode
Updated Storybook add-on buttons etc... to non-deprecated components
Fixes #108