chore: upgrade storybook dependencies#4692
Conversation
WalkthroughUpdates Storybook 10 tooling, configuration, theming, and CI naming. The MSW service worker now reports interception timestamps and handles SSE responses without cloning. A metadata visual-story mock directly parses typed ChangesStorybook tooling and build wiring
Storybook UI configuration
MSW interception and response flow
Metadata visual-story request parsing
Estimated code review effort: 3 (Moderate) | ~25 minutes Sequence Diagram(s)sequenceDiagram
participant Browser
participant mockServiceWorker
participant StorybookClient
Browser->>mockServiceWorker: fetch request
mockServiceWorker->>mockServiceWorker: record interception timestamp
mockServiceWorker->>StorybookClient: send REQUEST with interceptedAt
mockServiceWorker->>mockServiceWorker: process response and detect SSE
mockServiceWorker->>StorybookClient: send RESPONSE with conditional body
Possibly related PRs
Suggested labels: Suggested reviewers: Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
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 |
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
|
Warning Review the following alerts detected in dependencies. According to your organization's Security Policy, it is recommended to resolve "Warn" alerts. Learn more about Socket for GitHub.
|
There was a problem hiding this comment.
this file is auto generated
There was a problem hiding this comment.
the update caused the toolbar button colors to not work. so I just copied the theme used in blueprint
There was a problem hiding this comment.
breaking change for storybook caused the imports to not work
There was a problem hiding this comment.
weird type issue appearing
![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
🧹 Nitpick comments (1)
src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx (1)
324-326: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider a more specific type assertion for
order_by.The assertion
as { order_by }leavesorder_byimplicitly untyped, soorder_by[0].directionandorder_by[0].field_keyget no type checking. The upstream contract (MetadataQueryOrderByClausefromsrc/common/types/metadataQueries.js) definesdirectionandfield_keyas required string fields.♻️ Suggested type improvement
- const { order_by } = (await request.clone().json()) as { order_by }; + const { order_by } = (await request.clone().json()) as { + order_by: Array<{ direction: string; field_key: string }>; + }; const orderByDirection = order_by[0].direction; const orderByFieldKey = order_by[0].field_key;🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx` around lines 324 - 326, Update the request JSON assertion in the relevant mock handler to type order_by as MetadataQueryOrderByClause[] using the existing type from metadataQueries.js, then access direction and field_key through that typed array so both fields receive compile-time validation.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@package.json`:
- Around line 154-165: Align the Storybook dependency versions by either
upgrading `@storybook/addon-styling-webpack` to a release that explicitly supports
Storybook 10.5.0, or change the Storybook packages such as `@storybook/addon-docs`
and `@storybook/react-webpack5` back to a supported 10.4.x release.
---
Nitpick comments:
In `@src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx`:
- Around line 324-326: Update the request JSON assertion in the relevant mock
handler to type order_by as MetadataQueryOrderByClause[] using the existing type
from metadataQueries.js, then access direction and field_key through that typed
array so both fields receive compile-time validation.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 1d385f3e-2ac3-45e9-bbf3-f3229187aedc
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (7)
.circleci/config.yml.storybook/customTheme.ts.storybook/main.ts.storybook/manager.ts.storybook/public/mockServiceWorker.jspackage.jsonsrc/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx
| "@chromatic-com/storybook": "^5.2.1", | ||
| "@commitlint/cli": "^19.8.0", | ||
| "@commitlint/config-conventional": "^19.8.0", | ||
| "@eslint/eslintrc": "^3.1.0", | ||
| "@eslint/js": "^9.6.0", | ||
| "@formatjs/intl-pluralrules": "^1.5.2", | ||
| "@formatjs/intl-relativetimeformat": "^4.5.9", | ||
| "@hapi/address": "^2.1.4", | ||
| "@storybook/addon-docs": "^9.1.20", | ||
| "@storybook/addon-styling-webpack": "^2.0.0", | ||
| "@storybook/addon-webpack5-compiler-babel": "^3.0.6", | ||
| "@storybook/react-webpack5": "^9.1.20", | ||
| "@storybook/addon-docs": "^10.5.0", | ||
| "@storybook/addon-styling-webpack": "^3.0.2", | ||
| "@storybook/addon-webpack5-compiler-babel": "^4.0.1", | ||
| "@storybook/react-webpack5": "^10.5.0", |
There was a problem hiding this comment.
🩺 Stability & Availability | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check installed versions and peer dependency requirements
cat node_modules/storybook/package.json 2>/dev/null | jq '{version, engines, peerDependencies}' || echo "storybook not installed"
cat node_modules/chromatic/package.json 2>/dev/null | jq '{version, engines, peerDependencies}' || echo "chromatic not installed"
cat node_modules/@chromatic-com/storybook/package.json 2>/dev/null | jq '{version, engines, peerDependencies}' || echo "`@chromatic-com/storybook` not installed"
cat node_modules/msw-storybook-addon/package.json 2>/dev/null | jq '{version, engines, peerDependencies}' || echo "msw-storybook-addon not installed"
cat node_modules/storybook-react-intl/package.json 2>/dev/null | jq '{version, engines, peerDependencies}' || echo "storybook-react-intl not installed"
cat node_modules/@storybook/addon-styling-webpack/package.json 2>/dev/null | jq '{version, peerDependencies}' || echo "addon-styling-webpack not installed"
cat node_modules/@storybook/addon-webpack5-compiler-babel/package.json 2>/dev/null | jq '{version, peerDependencies}' || echo "addon-webpack5-compiler-babel not installed"Repository: box/box-ui-elements
Length of output: 1346
@storybook/addon-styling-webpack needs a Storybook 10.5-compatible release 3.0.2 only declares support through 10.4.0-0, but this bump pulls 10.5.0. Update the addon or keep Storybook on a supported 10.4.x release.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@package.json` around lines 154 - 165, Align the Storybook dependency versions
by either upgrading `@storybook/addon-styling-webpack` to a release that
explicitly supports Storybook 10.5.0, or change the Storybook packages such as
`@storybook/addon-docs` and `@storybook/react-webpack5` back to a supported 10.4.x
release.
Source: Learnings
1 participant
Summary by CodeRabbit