chore(deps): bump storybook from v8.6.14 to v9.1.16 #936
Conversation
tbouffard
added
the
chore
WalkthroughReplace Storybook 8.x setup with 9.x entries in packages/html, update Storybook config to resolve addons/framework dynamically, switch MDX imports from Changes
Sequence Diagram(s)sequenceDiagram
participant Dev as Storybook Host
participant Main as packages/html/.storybook/main.ts
participant Resolver as getAbsolutePath
participant FS as node:fs / require.resolve
participant Storybook as Storybook Runtime
Dev->>Main: load configuration
Main->>Resolver: resolve("...-addon-links") / resolve("...-addon-docs") / resolve("...-html-vite")
Resolver->>FS: locate package.json for module
FS-->>Resolver: absolute path
Resolver-->>Main: absolute addon/framework paths
Main->>Storybook: export final config (addons, framework)
Storybook-->Dev: start with resolved addons/framework
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20–30 minutes
Possibly related PRs
Suggested labels
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
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. Comment |
Upgrade Storybook from v8.6.14 to v9.1.16 using the official upgrade command with automatic migrations. Key changes: - Essential addons (viewport, controls, interactions, actions) moved to Storybook core and removed as separate packages - Migrated from renderer-based to framework-based configuration (@storybook/html → @storybook/html-vite) - Replaced @storybook/addon-storysource with new built-in Code Panel - Added @storybook/addon-docs explicitly for documentation features - Installed eslint-plugin-storybook for better linting support - Updated module resolution with getAbsolutePath helper for monorepo - Removed deprecated docs.autodocs configuration - Added debug-storybook.log to .gitignore Automigrations applied: - eslintPlugin: Installed and configured Storybook ESLint plugin - addon-storysource-code-panel: Migrated to new Code Panel feature - consolidated-imports: Updated renamed/consolidated packages - renderer-to-framework: Moved to framework-based configuration - remove-essential-addons: Removed addons now in core - remove-docs-autodocs: Updated docs configuration - wrap-require: Fixed module resolution for special environments Tested: - Build completes successfully - Dev server starts and runs correctly on port 8901 Migration guide: https://storybook.js.org/docs/9/releases/migration-guide-from-older-version
…the latest vite version
tbouffard
force-pushed
the
chore/bump_storybook_to_v9
branch
from
15eff33 to
2be362d
Compare
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
♻️ Duplicate comments (7)
packages/html/stories/ZoomAndFit.mdx (1)
1-1: LGTM!The import path change is consistent with the Storybook 9.x migration (same verification applies as in Control.mdx).
packages/html/stories/Wires.mdx (1)
1-1: LGTM!The import path change is consistent with the Storybook 9.x migration (same verification applies as in Control.mdx).
packages/html/stories/AutoLayout.mdx (1)
1-1: LGTM!The import path change is consistent with the Storybook 9.x migration (same verification applies as in Control.mdx).
packages/html/stories/Boundary.mdx (1)
1-1: LGTM!The import path change is consistent with the Storybook 9.x migration (same verification applies as in Control.mdx).
packages/html/stories/Wrapping.mdx (1)
1-1: Duplicate: Import path verification needed.Same import path change as flagged in Animation.mdx. Please verify across all MDX files.
packages/html/stories/FixedPoints.mdx (1)
1-1: Duplicate: Import path verification needed.Same import path change as flagged in Animation.mdx.
packages/html/stories/Anchors.mdx (1)
1-1: Duplicate: Import path verification needed.Same import path change as flagged in Animation.mdx.
🧹 Nitpick comments (1)
packages/html/.storybook/main.ts (1)
44-46: Improve type safety: Replaceanywithstring.The
getAbsolutePathfunction returnsany, which bypasses type checking. Since it always returns a string (the directory path), the return type should bestring.Apply this diff to improve type safety:
-function getAbsolutePath(value: string): any { +function getAbsolutePath(value: string): string { return dirname(require.resolve(join(value, 'package.json'))); }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (14)
.github/dependabot.yml(1 hunks).gitignore(1 hunks)packages/html/.storybook/main.ts(1 hunks)packages/html/.storybook/preview.ts(2 hunks)packages/html/package.json(1 hunks)packages/html/stories/Anchors.mdx(1 hunks)packages/html/stories/Animation.mdx(1 hunks)packages/html/stories/AutoLayout.mdx(1 hunks)packages/html/stories/Boundary.mdx(1 hunks)packages/html/stories/Control.mdx(1 hunks)packages/html/stories/FixedPoints.mdx(1 hunks)packages/html/stories/Wires.mdx(1 hunks)packages/html/stories/Wrapping.mdx(1 hunks)packages/html/stories/ZoomAndFit.mdx(1 hunks)
🧰 Additional context used
🧠 Learnings (4)
📓 Common learnings
Learnt from: tbouffard
Repo: maxGraph/maxGraph PR: 849
File: packages/html/stories/DragSource.stories.js:98-101
Timestamp: 2025-06-13T07:48:10.300Z
Learning: User tbouffard prefers answers in English; avoid switching to other languages in future replies.
📚 Learning: 2025-01-05T15:35:57.645Z
Learnt from: tbouffard
Repo: maxGraph/maxGraph PR: 617
File: packages/ts-example/package.json:12-12
Timestamp: 2025-01-05T15:35:57.645Z
Learning: We keep Vite 5 specifically in the package that uses Storybook (the "html" package), while the other packages can safely use a newer version of Vite without compatibility issues.
Applied to files:
packages/html/package.jsonpackages/html/.storybook/main.tspackages/html/.storybook/preview.ts.github/dependabot.yml
📚 Learning: 2025-04-22T16:34:40.309Z
Learnt from: tbouffard
Repo: maxGraph/maxGraph PR: 774
File: packages/ts-example-selected-features/package.json:11-13
Timestamp: 2025-04-22T16:34:40.309Z
Learning: In the maxGraph project, TypeScript is defined as a dependency in the root package.json (~5.8.2) and not in individual package.json files for example packages. The build scripts in example packages can use `tsc` commands because the TypeScript dependency is hoisted in the monorepo structure.
Applied to files:
.github/dependabot.yml
📚 Learning: 2025-04-22T16:34:40.309Z
Learnt from: tbouffard
Repo: maxGraph/maxGraph PR: 774
File: packages/ts-example-selected-features/package.json:11-13
Timestamp: 2025-04-22T16:34:40.309Z
Learning: In the maxGraph project, TypeScript is defined as a dependency in the root package.json and not in individual package.json files for example packages. The build scripts in example packages can use `tsc` because it's available through this hoisted dependency in the monorepo structure.
Applied to files:
.github/dependabot.yml
🔇 Additional comments (10)
.gitignore (1)
28-28: LGTM!Adding
debug-storybook.logto the ignore list is appropriate for Storybook debug files..github/dependabot.yml (1)
25-27: LGTM!The updated comment correctly reflects the current Storybook version (9.x) in use after this migration.
packages/html/.storybook/preview.ts (2)
107-109: Code Panel configuration is correct and verified.The
docs.codePanel: trueparameter in your preview config is the correct way to enable the Code Panel feature in Storybook 9.x, and your implementation matches the official documentation exactly.
17-17: The Preview type import path is correct for Storybook 9.x html-vite framework.The import
import type { Preview } from '@storybook/html-vite'matches the official Storybook migration documentation for framework-specific Preview imports. This change correctly aligns with the renderer-to-framework migration in Storybook 9.x.packages/html/stories/Control.mdx (1)
1-1: Import path verified as correct for Storybook 9.x.The import path
@storybook/addon-docs/blocksfor Meta, Canvas, and Controls components is correct and matches the official Storybook 9.x documentation. The code change is accurate.packages/html/.storybook/main.ts (3)
17-20: LGTM: ES module compatibility setup.The ES module compatibility setup using
createRequireis correct and necessary for thegetAbsolutePathfunction to resolve package paths in a monorepo environment.
32-35: LGTM: Addon configuration aligned with Storybook 9.The addon configuration correctly uses dynamic path resolution for
addon-linksandaddon-docs. The removal ofaddon-essentialsandaddon-storysourcealigns with Storybook 9's move to include essential addons in core and replace addon-storysource with the built-in Code Panel.
37-40: LGTM: Framework configuration updated for Storybook 9.The framework configuration correctly migrates from renderer-based (
@storybook/html) to framework-based (@storybook/html-vite) configuration, which is a key change in Storybook 9.packages/html/stories/Animation.mdx (1)
1-1: The import path is correct for Storybook 9.The correct import path for the Meta component in Storybook 9 MDX files is
@storybook/addon-docs/blocks, which matches the code in Animation.mdx. The review comment incorrectly suggests this path should be changed to@storybook/blocks.Likely an incorrect or invalid review comment.
packages/html/package.json (1)
14-16: Verify Storybook 9.1.16 compatibility with custom addons and Vite 6 integration.Storybook 9.1.16 is generally compatible with React 19.1.0 and Vite 6.4.1, but there are known compatibility issues including React 19 addon/manager-bundle problems, peerDependency alignment issues, and Vite 6 related bugs like local hostname access failures. Before merging, please:
- Test custom addons — verify any custom Storybook addons work correctly with 9.1.16 and React 19
- Verify Vite 6 network access — confirm Storybook is accessible from localhost and any configured hostnames
- Check peerDependencies — ensure monorepo dependency resolution doesn't require manual overrides for React 19 compatibility
The PR shows successful build and dev server operation, which is a good sign, but full CI/dev workflows and custom addon testing are recommended.
|
✔️ Tested locally with the artifact built by GH Actions |
|
1 participant
Upgrade Storybook from v8.6.14 to v9.1.16 using the official upgrade command with automatic migrations.
Update dependabot configuration to let it update react and vite as Storybook v9 now supports the latest versions of these dependencies.
Key changes:
to Storybook core and removed as separate packages
(@storybook/html → @storybook/html-vite)
Installed eslint-plugin-storybook for better linting supportAutomigrations applied:
eslintPlugin: Installed and configured Storybook ESLint pluginTested:
Migration guide: https://storybook.js.org/docs/9/releases/migration-guide-from-older-version
Summary by CodeRabbit
Chores
New Features
✏️ Tip: You can customize this high-level summary in your review settings.