Bump to Storybook v10#6685
Conversation
|
Warning Rate limit exceeded@PavelVanecek has exceeded the limit for the number of commits or files that can be reviewed per hour. Please wait 28 minutes and 13 seconds before requesting another review. ⌛ How to resolve this issue?After the wait time has elapsed, a review can be triggered using the We recommend that you space out your commits to avoid hitting the rate limit. 🚦 How do rate limits work?CodeRabbit enforces hourly rate limits for each developer per organization. Our paid plans have higher rate limits than the trial, open-source and free plans. In all cases, we re-allow further reviews after a brief timeout. Please see our FAQ for further information. ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (4)
WalkthroughBumps Storybook-related dependencies to 10.x, migrates preview background config to use Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
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 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
📜 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 (4)
package.json(4 hunks)storybook/preview.ts(2 hunks)storybook/storybook-addon-stackblitz/StackBlitzButton.tsx(1 hunks)storybook/tsconfig.json(1 hunks)
⏰ 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). (1)
- GitHub Check: Build, Test, Pack
🔇 Additional comments (5)
package.json (1)
105-105: Chromatic package updated for Storybook 10 compatibility.The bump from
^4.0.1to^4.1.3aligns with the Storybook 10 upgrade.storybook/preview.ts (2)
21-21: Background configuration migrated to initialGlobals pattern.The empty
backgrounds: {}object replaces the previousdefault: 'light'configuration, as the default is now set viainitialGlobals(lines 34-38). This aligns with Storybook 10's recommended pattern for global defaults.
34-38: Verified: The initialGlobals pattern is correct for Storybook 10.The code correctly sets the initial/selected background using
initialGlobals.backgrounds.value(instead of the old "default" parameter), matching the official Storybook 10 migration pattern. No changes needed.storybook/storybook-addon-stackblitz/StackBlitzButton.tsx (1)
15-17: I need to find the type definitions forHashEntryandStoryEntryto understand if the subtype check is necessary. Let me search for these type definitions:Found key documentation! The subtype field is documented as marking story entries as tests (experimental) and defaults to 'story' if not specified. Let me search for more details on whether this check should exclude test entries:
Based on my verification with Storybook 10 documentation, the
subtypecheck is both necessary and correct:The
subtypefield for story entries is used to mark an entry as a test (experimental), and if not specified, defaults to 'story'.The additional constraint
rootEntry.subtype === 'story'excludes experimental test entries (which havesubtype='test') and only allows regular story entries. This is an intentional distinction, as the StackBlitz addon should export interactive stories to StackBlitz, not experimental test-only entries.The check aligns with Storybook 10's entry type system and does not exclude valid story entries—only experimental test entries are filtered out, which appears to be the intended behavior for this addon.
storybook/tsconfig.json (1)
7-7: I found that the web search result discusses themoduleResolutionsetting, but the review comment is about themodulesetting—these are different TypeScript compiler options. Let me search specifically for Storybook 10's guidance on themodulesetting.Based on my verification, Storybook 10 is ESM-only, and by removing CommonJS support, it has simplified the framework. The change from
"commonjs"to"NodeNext"aligns well with this direction."module": "ESNext"is a common configuration for Storybook with TypeScript, and"NodeNext"provides similar modern module interop. The change appears consistent with Storybook 10's modern module setup requirements.
| "@storybook/addon-a11y": "^10.0.8", | ||
| "@storybook/addon-docs": "^10.0.8", | ||
| "@storybook/addon-links": "^10.0.8", | ||
| "@storybook/addon-onboarding": "^10.0.8", | ||
| "@storybook/addon-vitest": "^10.0.8", | ||
| "@storybook/builder-vite": "^10.0.8", | ||
| "@storybook/icons": "^1.2.12", | ||
| "@storybook/react-vite": "^9.0.17", | ||
| "@storybook/react-vite": "^10.0.8", |
There was a problem hiding this comment.
🧩 Analysis chain
Verify Storybook 10.0.8 is stable and check for known issues.
All Storybook packages have been consistently updated to version ^10.0.8. Please verify this is a stable release and check for any known breaking changes or issues that might affect the recharts integration.
Also applies to: 155-155, 168-168
🏁 Script executed:
#!/bin/bash
# Description: Check if there are migration guides or breaking changes documented
# Search for any migration or upgrade documentation in the repository
fd -e md -e txt | xargs rg -l -i 'storybook.*10|migration|upgrade' 2>/dev/null || echo "No migration docs found"Length of output: 12
🌐 Web query:
Storybook 10.0.8 release notes breaking changes
💡 Result:
Short answer: v10.0.8 itself contains only bug fixes/patches — no new breaking changes. The only Storybook 10 breaking change to be aware of is the major v10 change (ESM-only / config must be valid ESM and newer Node required). See below.
Sources:
- v10.0.8 GitHub release (patch notes). [1]
- Storybook 10 migration notes — ESM-only, main (.storybook/main.[js|ts]) must be ESM, Node 20.19+/22.12+ (see migration guide). [2]
- Storybook releases/overview page describing the v10 breaking change. [3]
I'll now verify the repository's Storybook setup and check for any recharts compatibility concerns.Now let me check the Node version requirements and CHANGELOG content in the repository:
---
🏁 Script executed:
```shell
#!/bin/bash
# Check Node version requirements in the repository
echo "=== Checking Node version requirements ==="
if [ -f .nvmrc ]; then
echo "Found .nvmrc:"
cat .nvmrc
else
echo ".nvmrc not found"
fi
echo ""
echo "=== Checking package.json for Node engines field ==="
jq '.engines' package.json 2>/dev/null || echo "No engines field found"
echo ""
echo "=== Checking CHANGELOG.md for Storybook 10 mentions ==="
head -100 CHANGELOG.md | rg -i 'storybook.*10|breaking|migration' -A2 -B2 || echo "No direct Storybook 10 mentions in first 100 lines"
Length of output: 242
Now let me verify the exact Node requirements for Storybook 10 and check for recharts compatibility issues:
Let me check the .storybook configuration to verify ESM setup:Now let me verify the .storybook configuration in the repository:
---
🏁 Script executed:
```shell
#!/bin/bash
# Check for .storybook configuration files
echo "=== Checking for .storybook/main.* files ==="
fd -e js -e ts 'main\.' .storybook 2>/dev/null || echo "No main.js or main.ts found"
echo ""
echo "=== Listing .storybook directory ==="
ls -la .storybook 2>/dev/null | head -20 || echo ".storybook directory not found"
Length of output: 110
Update Node version requirement to support Storybook 10.0.8.
Storybook 10 requires Node 20.19+, 22.12+, or higher, but package.json specifies "node": ">=18", which is insufficient. Update the engines field to "node": ">=20.19" or ">=22.12" to ensure compatibility. v10.0.8 itself contains only bug fixes with no new breaking changes, and there are no known recharts integration issues. The primary breaking change is the ESM-only requirement where the .storybook/main config must be valid ESM.
🤖 Prompt for AI Agents
In package.json around lines 114-121, the project still requires "node": ">=18"
which is incompatible with Storybook 10.0.8; update the engines.node field to a
compatible minimum (for example ">=20.19" or ">=22.12") in package.json, update
any CI/workflow Node versions to match, and run install/test to verify Storybook
builds with the new Node version.
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #6685 +/- ##
=======================================
Coverage 94.03% 94.03%
=======================================
Files 500 500
Lines 42657 42657
Branches 4901 4901
=======================================
Hits 40111 40111
Misses 2541 2541
Partials 5 5 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Bundle ReportBundle size has no change ✅ |
31ed9ce to
82f093e
Compare
There was a problem hiding this comment.
Actionable comments posted: 1
📜 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 (4)
package.json(4 hunks)storybook/preview.ts(2 hunks)storybook/storybook-addon-stackblitz/StackBlitzButton.tsx(1 hunks)storybook/tsconfig.json(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
- storybook/storybook-addon-stackblitz/StackBlitzButton.tsx
🧰 Additional context used
📓 Path-based instructions (2)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (DEVELOPING.md)
Run type checking on the codebase using
npm run check-types
**/*.{ts,tsx}: Never useanytype (implicit or explicit) in TypeScript code
Preferunknownoveranyand refine the type in TypeScript
Type function parameters and return values explicitly in TypeScript, do not rely on implicit any or inference; exceptions are React components and trivial functions
Do not useastype assertions in TypeScript; the only exception isas const
Files:
storybook/preview.ts
**/*.{js,ts,tsx}
📄 CodeRabbit inference engine (CONTRIBUTING.md)
Ensure code lints by running
npm run lintand follows Airbnb's Style Guide
Files:
storybook/preview.ts
🧠 Learnings (6)
📓 Common learnings
Learnt from: CR
Repo: recharts/recharts PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T01:22:59.699Z
Learning: Applies to storybook/stories/**/*.stories.tsx : Update Storybook stories when APIs have been changed to ensure they work as expected
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-11-25T01:22:48.279Z
Learning: Applies to storybook/**/*.stories.{ts,tsx} : Use Storybook stories in the `storybook` directory for high-fidelity component examples that will be published and used for visual regression testing
📚 Learning: 2025-11-25T01:22:59.699Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T01:22:59.699Z
Learning: Applies to storybook/stories/**/*.stories.tsx : Update Storybook stories when APIs have been changed to ensure they work as expected
Applied to files:
storybook/tsconfig.jsonpackage.json
📚 Learning: 2025-11-25T01:22:48.279Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: DEVELOPING.md:0-0
Timestamp: 2025-11-25T01:22:48.279Z
Learning: Applies to storybook/**/*.stories.{ts,tsx} : Use Storybook stories in the `storybook` directory for high-fidelity component examples that will be published and used for visual regression testing
Applied to files:
storybook/tsconfig.jsonpackage.json
📚 Learning: 2025-11-25T01:22:59.699Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T01:22:59.699Z
Learning: Applies to storybook/stories/**/*.stories.tsx : Use Storybook for smoke tests and add play functions with assertions for actual tests
Applied to files:
package.json
📚 Learning: 2025-11-25T01:23:08.237Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: test/README.md:0-0
Timestamp: 2025-11-25T01:23:08.237Z
Learning: Applies to test/**/*.{test,spec}.{ts,tsx} : Use `vi.useFakeTimers()` in all tests due to Redux autoBatchEnhancer dependency on timers and `requestAnimationFrame`
Applied to files:
package.json
📚 Learning: 2025-11-25T01:22:59.699Z
Learnt from: CR
Repo: recharts/recharts PR: 0
File: CONTRIBUTING.md:0-0
Timestamp: 2025-11-25T01:22:59.699Z
Learning: Applies to **/*.{js,ts,tsx} : Ensure code lints by running `npm run lint` and follows Airbnb's Style Guide
Applied to files:
package.json
⏰ 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). (2)
- GitHub Check: Build, Test, Pack
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (2)
package.json (1)
105-121: I'll help you verify the review comment about the Storybook/Chromatic version alignment. Let me start by examining the package.json file and the relevant npm scripts.
<function_calls>
#!/bin/bashGet full package.json to understand all dependencies and scripts
wc -l package.json
</function_calls>Provide output from the shell execution to continue.
#!/bin/bash # Check the file size first cat package.json | head -200 </parameter> </invoke> </function_calls> Let me fetch the package.json properly: <function_calls> <invoke name="shell"> <parameter name="script"> #!/bin/bash # Read package.json and extract relevant sections cat -n package.json | head -250 </parameter> </invoke> </function_calls> Waiting for script execution results to verify: 1. Full package.json content, especially lines 105-121 and 155-155, 168-168 2. npm scripts section for the commands mentioned in the review 3. Storybook and Chromatic version consistency </blockquote></details> <details> <summary>storybook/tsconfig.json (1)</summary><blockquote> `7-7`: Based on my verification, I can now provide a comprehensive assessment: **The `"module": "NodeNext"` configuration is appropriate and coherent**, but the review comment needs clarification. Here's what I found: 1. **Configuration is sound**: NodeNext aligns with Storybook 10's ESM-only architecture, and the tsconfig settings (allowSyntheticDefaultImports, esModuleInterop enabled, es2023 target) are coherent. 2. **Verification already happens in CI**: The GitHub Actions workflow explicitly runs `npm run check-types` in the "Typecheck" step, which includes `npm run check-types-storybook`. This would have already validated the change. 3. **No import issues detected**: All Storybook files use modern ESM imports compatible with NodeNext module resolution. 4. **The change is already applied**: This is part of a merge commit ("Resolve conflicts"), not a pending change needing review. --- **Rewritten Review Comment:** **`"module": "NodeNext"` configuration is appropriate for Storybook 10 and aligns with your ESM-based architecture.** The TypeScript configuration is coherent—allowSyntheticDefaultImports and esModuleInterop are enabled, target is es2023, and Storybook files already use ESM imports throughout. The `npm run check-types` step in CI will validate this automatically; ensure CI passes before merging. </blockquote></details> </blockquote></details> </details> <!-- This is an auto-generated comment by CodeRabbit for review status -->
82f093e to
25b9d36
Compare
This reverts commit d2cfeec.
## Description Turns out that our storybook addons need complete rewrite so until that happens let's stick to v9. ## Related Issue #6685 <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Revert** * Rolled back Storybook and Chromatic packages to earlier stable versions for improved reliability. * **Chores** * Refined Storybook's default background configuration. * Updated module system settings for enhanced tooling compatibility. * Optimized component behavior for better integration support. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
2 participants
Summary by CodeRabbit
Chores
Improvements
✏️ Tip: You can customize this high-level summary in your review settings.