Migrate to storybook 10 for compatibility with Backstage

[brooke-hamilton]

Description

Dependabot PR #257 ("Bump the all group with 17 updates") attempted to upgrade Storybook from 7.6.24 to a mix of 8.6.x and 10.3.6. CI's Build Packages job failed at the build-storybook step with:

SB_CORE-SERVER_0002 (CriticalPresetLoadError):
  Storybook failed to load the following preset: ./.storybook/main.ts.
  ReferenceError: require is not defined in ES module scope

Why dependabot couldn't fix this on its own

Storybook 9 and 10 introduced two breaking changes that intersect badly with our setup:

1. Several first-party addons were removed. @storybook/addon-essentials, @storybook/addon-interactions, @storybook/blocks, and @storybook/test have no 9.x or 10.x release — their last published version is 8.6.x. Their functionality was either folded into @storybook/addon-docs/built-ins, or replaced by @storybook/addon-vitest. That's why dependabot left those packages stuck at 8.6.14 while bumping the rest to 10.3.6, producing an internally inconsistent dependency graph.
2. .storybook/main.ts is now loaded as ESM. Combined with "type": "module" in packages/rad-components/package.json, the existing require.resolve(...) calls throw ReferenceError: require is not defined in ES module scope. Storybook's own auto-migration message points to this and explicitly instructs users to switch to createRequire(import.meta.url).

A simple revert to 7.6.24 would unblock CI but moves us away from where Backstage is going. Each subsequent dependabot run would re-propose the same broken bump.

What Backstage does

Upstream backstage/backstage (v1.51.0-next.2) has fully migrated to Storybook 10:

• Uses storybook ^10.3.3 with @storybook/react-vite (no longer react-webpack5).
• Uses the new addon set: addon-docs, addon-themes, addon-a11y, addon-links (and addon-vitest for test integration).
• .storybook/main.ts uses defineMain from @storybook/react-vite/node and createRequire(import.meta.url) to keep require.resolve working in ESM scope.
• .storybook/preview.ts(x) uses definePreview from @storybook/react-vite.

This PR aligns packages/rad-components with that pattern.

Changes

• packages/rad-components/package.json
  • Removed: @storybook/addon-essentials, @storybook/addon-interactions, @storybook/addon-onboarding, @storybook/blocks, @storybook/test, @storybook/react-webpack5.
  • Added/updated to ^10.3.6: @storybook/addon-links, @storybook/addon-docs, @storybook/addon-themes, @storybook/addon-a11y, @storybook/react, @storybook/react-vite, storybook.
  • Added vite ^7.1.5 (required by @storybook/react-vite).
  • Added @babel/preset-typescript ^7.27.1 (was satisfied transitively by Storybook 7's dependency tree; now must be declared explicitly because babel.config.json references it).
• packages/rad-components/.storybook/main.ts
  • Switched from StorybookConfig typing to defineMain from @storybook/react-vite/node.
  • Replaced bare require.resolve with createRequire(import.meta.url) so it works under ESM.
  • Updated the addon list to the v10 set.
  • Switched the framework from @storybook/react-webpack5 (with useSWC) to @storybook/react-vite.
  • Removed the deprecated docs.autodocs option.
• packages/rad-components/.storybook/preview.ts
  • Switched to definePreview from @storybook/react-vite.
  • Removed parameters.actions.argTypesRegex (auto-actions was removed in Storybook 10).
• AppGraph.mdx, ResourceNode.mdx — import { Canvas, Meta } from '@storybook/blocks' → from '@storybook/addon-docs/blocks' (the v10 location).
• yarn.lock — regenerated.

Scope

These changes are limited to the rad-components Storybook tooling. No rad-components source files are modified, so no runtime behavior in the dashboard application changes. The exports consumed by plugin-radius (parseResourceId, AppGraph, ResourceNode, related types) are unchanged.

Validation

• yarn install — clean.
• yarn workspace @radapp.io/rad-components run build-storybook — Storybook 10.3.6 + Vite 7.x build succeeds.
• backstage-cli package test in rad-components — both test suites pass.
• yarn tsc — clean.
• Manual: Storybook dev server renders the AppGraph and ResourceNode stories and their .mdx docs pages.

References

• Backstage upstream .storybook/main.ts: https://github.com/backstage/backstage/blob/master/.storybook/main.ts
• Backstage upstream root package.json (Storybook deps): https://github.com/backstage/backstage/blob/master/package.json
• Storybook 10 migration guide: https://storybook.js.org/docs/releases/migration-guide

[github-actions]

Dependency Review

✅ No vulnerabilities or license issues or OpenSSF Scorecard issues found.

[Copilot]

Pull request overview

Migrates @radapp.io/rad-components Storybook tooling to Storybook 10 (Vite-based) to match Backstage’s current direction and fix ESM loading issues introduced by "type": "module" + Storybook’s ESM config loading.

Changes:

• Upgraded Storybook dependencies to ^10.3.6, switched from webpack5 to @storybook/react-vite, and added explicit vite + @babel/preset-typescript dev dependencies.
• Updated .storybook/main.ts and .storybook/preview.ts to Storybook 10’s defineMain/definePreview APIs and ESM-safe createRequire.
• Updated MDX docs imports from @storybook/blocks to @storybook/addon-docs/blocks and regenerated yarn.lock.

Reviewed changes

Copilot reviewed 5 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/rad-components/package.json	Aligns Storybook/dev tooling deps with Storybook 10 + Vite and adds missing Babel TS preset dependency.
packages/rad-components/.storybook/main.ts	Migrates Storybook main config to @storybook/react-vite and fixes require.resolve usage under ESM.
packages/rad-components/.storybook/preview.ts	Migrates preview config to definePreview and removes deprecated auto-actions config.
packages/rad-components/src/components/appgraph/docs/AppGraph.mdx	Updates blocks import path for Storybook 10 docs.
packages/rad-components/src/components/resourcenode/docs/ResourceNode.mdx	Updates blocks import path for Storybook 10 docs.
yarn.lock	Captures the updated dependency graph for the Storybook 10 migration.