Update Storybook from ~8 to ^10

Problem/Motivation

Storybook 10 (latest stable: 10.3.5) has been released. The project template currently pins Storybook and all its related packages to ~8. Staying on v8 means missing performance improvements, bug fixes, and the consolidated package architecture introduced in v9/v10.

Proposed resolution

Update all Storybook-related packages in package.json to ^10 and adapt the Storybook configuration files accordingly.

package.json — devDependencies changes

Packages upgraded to ^10:

• storybook: ~8 → ^10
• @storybook/server: ~8 → ^10
• @storybook/server-webpack5: ~8 → ^10
• @storybook/builder-webpack5: ~8 → ^10
• @storybook/cli: ~8 → ^10
• @storybook/addon-a11y: ~8 → ^10
• @storybook/addon-links: ~8 → ^10
• @storybook/addon-webpack5-compiler-swc: ^2 → ^4
• @chromatic-com/storybook: ^3 → ^5
• eslint-plugin-storybook: ^0.11.3 → ^10

New package added:

• @storybook/addon-docs: ^10 — was previously bundled inside @storybook/addon-essentials

Packages removed (consolidated into the storybook core package in v10):

• @storybook/addon-essentials
• @storybook/blocks
• @storybook/components
• @storybook/core-events
• @storybook/manager-api
• @storybook/preview-api
• @storybook/react
• @storybook/test
• @storybook/theming
• @storybook/types
• storybook-addon-root-attributes — not compatible with Storybook 10; replaced with native globals (see below)

.storybook/main.ts changes

• Removed from addons: @storybook/addon-essentials, @storybook/manager-api, @storybook/theming, @storybook/blocks, storybook-addon-root-attributes
• Added to addons: @storybook/addon-docs
• Added webpackFinal alias: maps @storybook/blocks → @storybook/addon-docs/blocks so that existing MDX story files that still import from @storybook/blocks continue to work without modification

.storybook/preview.ts changes

storybook-addon-root-attributes is not compatible with Storybook 10 because it
imports from @storybook/manager-api and @storybook/components,
which are no longer separate packages. Its functionality is replaced with a native
Storybook 10 implementation using globalTypes, initialGlobals,
and a Decorator:

• Bootstrap color mode toggle (data-bs-theme on body): Light / Dark
• Text direction toggle (dir on html): LTR / RTL

Both toolbar controls appear natively in the Storybook toolbar without any third-party addon.

tsconfig.json changes

Added "module": "ESNext" and "moduleResolution": "Bundler"
because Storybook 10 loads main.ts as an ES module (using file://
URL protocol), so import.meta.url support is required.

Remaining considerations

• MDX story files that import from @storybook/blocks do not need to be changed — the webpack alias handles the redirect transparently.
• Any contributed theme or module that ships its own Storybook manager customisations using @storybook/manager-api, @storybook/components, or @storybook/theming should update those imports to use the storybook/manager-api, storybook/internal/components, and storybook/theming paths exported from the consolidated storybook package.

Tested on

• Drupal 11 + Varbase + Vartheme BS5 + DDEV
• yarn storybook:build — passes without errors
• yarn storybook:dev — starts and serves correctly at port 6006

Remaining tasks

• ✅ File an issue about this project
• ❌ Addition/Change/Update/Fix to this project
• ❌ Testing to ensure no regression
• ➖ Automated unit/functional testing coverage
• ➖ Developer Documentation support on feature change/addition
• ➖ User Guide Documentation support on feature change/addition
• ➖ UX/UI designer responsibilities
• ➖ Accessibility and Readability
• ❌ Code review from 1 Varbase core team member
• ❌ Full testing and approval
• ❌ Credit contributors
• ❌ Review with the product owner
• ❌ Update Release Notes
• ❌ Release

User interface changes

• N/A

API changes

• N/A

Data model changes

• N/A

Release notes snippet

• chore(tooling): #3583717 Update Storybook from ~8 to ^10