build(storybook): update storybook to v10 DEV-1246

[magicznyleszek]

📣 Summary

Upgraded Storybook from v9 to v10 for compatibility with modern tooling and Node 20.19+. And hopes of making it behave better.

👷 Description for instance maintainers

This upgrade requires Node 20.19.0 or newer (was 20.18.1). The .nvmrc file has been updated, so nvm use will switch to the correct version. Although the version bump was due to Storybook (code testing), the version bump is project wide, so it influences the production code building too.

💭 Notes

Changes here:

Package updates:

• Storybook packages bumped to v10.4.6 (community addons updated to compatible versions)
• Removed @storybook/addon-links (deprecated in v10) - AFAIK we didn't use it at all
• Removed @storybook/addon-webpack5-compiler-swc (incompatible, switched to Babel)
• Updated jest-environment-jsdom to v30 to match Jest v30
• Pinned dependency versions to prevent CI failures:
  • orval: ^7.10.0 → ~7.10.0 (prevents upgrade to 7.21.0 which requires Node 22.18+)
  • webpack-extract-translation-keys-plugin: ^6.1.0 → 6.1.0 (exact version to match existing patch file)

Storybook configuration:

• .storybook/main.js → .storybook/main.mjs - Converted to ESM (Storybook 10 requirement)
  • Added __dirname polyfill using import.meta.url
  • Switched from SWC to Babel compiler addon
  • Added webpack rule for .module.css files
  • Excluded CSS modules from Storybook's default CSS handling to prevent loader conflicts
  • Removed TerserPlugin with swcMinify (didn't work with ESM output from msw-storybook-addon)

Type migrations for Storybook 10:

• Updated imports to new paths

ESLint plugin upgrade:

• Updated @tanstack/eslint-plugin-query - the newer version changed how eslint-disable directives work - they must be placed before the hook call, not inside the options object. Fixed affected files.

Orval config fixes for Node 20.19+:

• orval.config.js - Converted from mixed ESM/CommonJS to pure CommonJS
• jsapp/js/api/orval.operationName.js - Converted import to require() (Node 20.19+ is stricter about ESM in non-module files)

Node version updates (20.18.1 → 20.19.0):

• .nvmrc and .node-version, package.json, Dockerfile (already at 20.19, one missing spot was still there), GitHub Actions workflows, scripts/hints.js

TypeScript:

• tsconfig.json - Updated moduleResolution to handle Storybook 10's ESM packages

Why Babel instead of SWC?

The main webpack config (webpack.common.js) has refresh: true set for the SWC loader, which pairs with ReactRefreshWebpackPlugin in dev mode. When Storybook tried to use the SWC compiler addon, it inherited this setting and started injecting React Refresh code ($RefreshReg$, $RefreshSig$) without the runtime plugin that actually defines those globals. Result: browser errors. Babel doesn't have this conflict and works cleanly with Storybook's HMR.

👀 Preview steps

1. Check out this branch and run nvm use to switch to Node 20.19
2. Run npm ci to install dependencies (if you encounter some issues, try npm cache clean)
3. Run npm run storybook
4. 🟢 Storybook should start and open at http://localhost:6006
5. Click on any story (try Design system → ButtonNew)
6. 🟢 Story should render with no console errors
7. Run npm run build:storybook
8. 🟢 Build should complete without errors
9. Run npm run test
10. 🟢 All tests should pass
11. Open a .stories.tsx file in VSCode
12. 🟢 No TypeScript errors about missing @storybook/types or DecoratorFunction

[magicznyleszek]

@greptile-apps review please

[greptile-apps]

Greptile Summary

This PR upgrades Storybook and its local build setup. The main changes are:

• Storybook packages updated to v10.
• Storybook config moved to ESM in .storybook/main.mjs.
• Babel compiler addon used for Storybook webpack builds.
• Public Storybook type imports used in changed stories and decorators.
• Node version pins updated to 20.19.0 across local and CI config.
• Orval config loading adjusted to CommonJS for the generation workflow.

Confidence Score: 5/5

This looks safe to merge.

• No blocking issues found in the changed code.

_{Reviews (6): Last reviewed commit: "Merge branch 'main' into leszek/dev-1246..." | Re-trigger Greptile}

[magicznyleszek]

@greptile-apps please re-review

[jamesrkiger]

I think we should stick with the caret here. The caret keeps the versions bound to major version. >= does not, which makes the second clause redundant because the first clause includes anything above 20.19.

[magicznyleszek]

You're right, fixed :)

[jamesrkiger]

Left one comment

[jamesrkiger]

lgtm