chore: migrate to storybook 9

[dmytrokirpa]

Summary

This PR migrates Storybook and its dependencies from version 8.6.14 to 9.1.16, following the official Storybook 9 migration guide.

Previous Behavior

• Storybook 8.6.14 was used across the monorepo
• Legacy import paths for Storybook packages (@storybook/blocks, @storybook/addon-docs)
• @storybook/html-webpack5 for HTML stories
• Direct imports from framework packages

New Behavior

• Storybook upgraded to 9.1.16
• Updated import paths to align with Storybook 9's module structure:
  • @storybook/addon-docs → @storybook/addon-docs/blocks
  • @storybook/blocks → @storybook/addon-docs/blocks
  • @storybook/manager-api → storybook/manager-api
  • @storybook/core-events → storybook/internal/core-events
• HTML markup replaces GFM syntax in MDX files (tables, etc.)
• @storybook/html-webpack5 → @storybook/html-vite (packages/web-components/package.json)
• Import paths include file extensions where required
• Removed deprecated packages (e.g., storybook-addon-performance)

Key Changes

Package Updates

Core packages:

• storybook: 8.6.14 → 9.1.16
• @storybook/react: 8.6.14 → 9.1.16
• @storybook/react-webpack5: 8.6.14 → 9.1.16
• @storybook/html-webpack5: 8.6.14 → removed (deprecated in v9)
• @storybook/html-vite: 9.1.16 (new)

Import Path Updates

• MDX files: Updated ~100+ MDX documentation files with new import paths
• Manager API: Updated manager.js files to use storybook/manager-api and storybook/internal/core-events
• Theme imports: Updated Storybook theming imports across docsite configurations

Breaking Changes Addressed

1. GFM Support Removed:

   • The @storybook/addon-mdx-gfm plugin used in v8 is deprecated and doesn't work with v9
   • Solution: Using the remark-gfm plugin as recommended by SB team.

2. HTML Framework Migration:

   • @storybook/html-webpack5 doesn't exist in Storybook v9
   • Solution: Migrated to @storybook/html-vite for HTML stories

3. Module Path Restructuring: Updated all imports to use the new modular package structure

4. TypeScript Configuration: Updated .storybook/tsconfig.json to include new module paths

Configuration Updates

• Updated .storybook/main.js configuration to align with Storybook 9
• Updated webpack and Vite configurations for compatibility
• Removed deprecated addon dependencies

Testing

• ✅ Storybook builds successfully
• ✅ All documentation pages render correctly with updated imports
• ✅ MDX files with HTML tables display properly
• ✅ HTML stories work correctly with Vite builder
• ✅ Custom addons continue to work with the new module structure

Migration Reference

Official migration guide: https://storybook.js.org/docs/9/releases/migration-guide

Related Issue(s)

• Fixes #

---

Checklist

• Code is up-to-date with the master branch
• Dependencies updated across all packages
• Import paths updated to Storybook 9 module structure
• Migrated from html-webpack5 to html-vite
• Storybook builds and runs successfully
• Change file added (yarn change)

[github-actions]

📊 Bundle size report

✅ No changes found

[github-actions]

Pull request demo site: URL

[Hotell]

@dmytrokirpa these link in the PR point to invalid URLs, this is what I see when clicking on one of those

[Hotell]

in general we can proceed but left some comments to be addressed/investigated. ty