build: migrate Storybook to 10.5.6

[danieliser]

Summary

• migrate Storybook from 8.6 to 10.5.6 through the official Storybook 9 and 10 automigrations
• replace removed essentials/action imports with Storybook 10 core APIs
• replace the obsolete SCSS preset with the supported styling-webpack Sass rule
• remove unused and incompatible icon-package Storybook addons
• add the Storybook ESLint recommendations

Validation

• pnpm install --frozen-lockfile
• pnpm run build-storybook — passed
• pnpm run test:unit --runInBand — 28 suites and 383 tests passed
• pnpm run build:production — passed
• targeted lint for migrated Storybook configuration and story — passed
• git diff --check

Existing Sass deprecation warnings remain unchanged and are not build failures.

Summary by CodeRabbit

• Chores

  • Upgraded Storybook tooling and related styling dependencies.
  • Updated Storybook configuration for improved Sass and documentation support.
  • Modernized Storybook setup across the icon component library.

• Documentation

  • Enabled improved component documentation generation in Storybook.

• Refactor

  • Updated Storybook stories and TypeScript settings for the latest integration.

[coderabbitai]

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro Plus

Run ID: 36251366-73ba-4ea7-851d-19abbd4ab4a5

📥 Commits

Reviewing files that changed from the base of the PR and between f1ecddb and ad7d9a4.

⛔ Files ignored due to path filters (1)

• pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (8)

• .eslintrc.js
• .storybook/main.js
• .storybook/preview.js
• package.json
• packages/block-editor/src/formats/popup-trigger/trigger-popover/popup-trigger-viewer.tsx
• packages/icons/package.json
• packages/icons/src/stories/Icons.stories.tsx
• packages/icons/tsconfig.json

---

Walkthrough

Storybook was upgraded to 10.5.6. The root configuration now uses absolute package resolution and explicit Sass loaders. The icons package uses updated Storybook imports and bundler module resolution. The popup viewer line has no behavioral change.

Changes

Storybook 10 migration

Layer / File(s)	Summary
Storybook dependency migration .storybook/..., package.json, packages/icons/package.json	Storybook development dependencies now use version 10.5.6. Sass, Sass loader, and style loader dependencies were added.
Root Storybook configuration .storybook/main.js, .storybook/preview.js, .eslintrc.js	The configuration uses absolute package resolution, Babel and docs addons, explicit Sass processing, and the React Webpack 5 framework. ESLint now includes Storybook rules.
Icons Storybook integration packages/icons/src/stories/Icons.stories.tsx, packages/icons/tsconfig.json	The icons story uses current Storybook action and React Webpack 5 imports. TypeScript now uses bundler module resolution.

Estimated code review effort: 3 (Moderate) | ~20 minutes

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch agent/storybook-10

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}