Skip to content

chore: upgrade storybook dependencies - #4692

Merged
mergify[bot] merged 6 commits into
masterfrom
chore-upgrade-storybook
Jul 14, 2026
Merged

chore: upgrade storybook dependencies#4692
mergify[bot] merged 6 commits into
masterfrom
chore-upgrade-storybook

Conversation

@tjuanitas

@tjuanitas tjuanitas commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Summary by CodeRabbit

  • Bug Fixes

    • Improved Storybook stability by initializing React Aria window focus tracking to avoid a runtime crash.
    • Improved mocked network handling for Server-Sent Events (SSE).
    • Added timing details to intercepted network request notifications.
  • Style

    • Updated Storybook theme color values for clearer visual consistency.
  • Chores

    • Upgraded Storybook, Chromatic, and related mock tooling.
    • Renamed the Chromatic CI job for consistency.

@tjuanitas
tjuanitas requested a review from a team as a code owner July 10, 2026 23:10
@coderabbitai

coderabbitai Bot commented Jul 10, 2026

Copy link
Copy Markdown
Contributor

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 41f45928-c8d7-45c2-ba67-97831991a472

📥 Commits

Reviewing files that changed from the base of the PR and between 6dd36fd and 72e639c.

⛔ Files ignored due to path filters (1)
  • yarn.lock is excluded by !**/yarn.lock, !**/*.lock
📒 Files selected for processing (1)
  • package.json

Walkthrough

Updates Storybook 10 tooling, theme and runtime setup, Chromatic CI naming, MSW interception behavior, and metadata visual-story request parsing.

Changes

Storybook and MSW integration

Layer / File(s) Summary
Storybook tooling and build wiring
package.json, .storybook/main.ts, .circleci/config.yml
Storybook, Chromatic, and MSW packages are upgraded; webpack/i18n imports are updated; and the Chromatic CI job is renamed.
Storybook UI and runtime setup
.storybook/customTheme.ts, .storybook/preview.tsx
Storybook theme colors are revised and React Aria window focus tracking is initialized before Storybook focus patching.
MSW interception and response flow
.storybook/public/mockServiceWorker.js
The worker reports interception timestamps, removes MOCK_DEACTIVATE handling, and conditionally avoids cloning SSE response bodies.
Metadata visual-story request parsing
src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx
The metadata mock destructures and types order_by directly from the request JSON.

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 intercepted request metadata
  mockServiceWorker->>mockServiceWorker: process response and detect SSE
  mockServiceWorker->>StorybookClient: send response with conditional body
Loading

Possibly related PRs

Suggested labels: ready-to-merge

Suggested reviewers: jackiejou, jpan-box, dlasecki-box, jfox-box, dependabot[bot]

Poem

I’m a rabbit with a Storybook tune,
Fresh colors glow beneath the moon.
MSW hops through streams with care,
Chromatic jobs now match their name fair.
Focus stands ready—no crash in sight! 🐇

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Description check ⚠️ Warning No pull request description was provided, so the required template content and merge-queue guidance are missing. Add the required PR description content from the template, including the ready-to-merge label and merge-queue instructions.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title accurately reflects the main change: upgrading Storybook-related dependencies.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch chore-upgrade-storybook

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

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

@socket-security

socket-security Bot commented Jul 10, 2026

Copy link
Copy Markdown

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.

Action Severity Alert  (click "▶" to expand/collapse)
Warn High
Obfuscated code: npm @emnapi/runtime is 90.0% likely obfuscated

Confidence: 0.90

Location: Package overview

From: ?npm/storybook@10.5.0npm/@emnapi/runtime@1.11.1

ℹ Read more on: This package | This alert | What is obfuscated code?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/@emnapi/runtime@1.11.1. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

Warn High
Obfuscated code: npm @mswjs/interceptors is 90.0% likely obfuscated

Confidence: 0.90

Location: Package overview

From: ?npm/msw@2.15.0npm/@mswjs/interceptors@0.41.9

ℹ Read more on: This package | This alert | What is obfuscated code?

Next steps: Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support@socket.dev.

Suggestion: Packages should not obfuscate their code. Consider not using packages with obfuscated code.

Mark the package as acceptable risk. To ignore this alert only in this pull request, reply with the comment @SocketSecurity ignore npm/@mswjs/interceptors@0.41.9. You can also ignore all packages with @SocketSecurity ignore-all. To ignore an alert for all future pull requests, use Socket's Dashboard to change the triage state of this alert.

View full report

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this file is auto generated

Comment thread .storybook/customTheme.ts

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

the update caused the toolbar button colors to not work. so I just copied the theme used in blueprint

Comment thread .storybook/main.ts

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

breaking change for storybook caused the imports to not work

Comment thread .storybook/manager.ts

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

weird type issue appearing

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 value

Consider a more specific type assertion for order_by.

The assertion as { order_by } leaves order_by implicitly untyped, so order_by[0].direction and order_by[0].field_key get no type checking. The upstream contract (MetadataQueryOrderByClause from src/common/types/metadataQueries.js) defines direction and field_key as 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

📥 Commits

Reviewing files that changed from the base of the PR and between b6ebe89 and 1b8e309.

⛔ Files ignored due to path filters (1)
  • yarn.lock is 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.js
  • package.json
  • src/elements/content-explorer/stories/tests/MetadataView-visual.stories.tsx

Comment thread package.json
Comment on lines +154 to +165
"@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",

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🩺 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

jpan-box
jpan-box previously approved these changes Jul 13, 2026
tjiang-box
tjiang-box previously approved these changes Jul 13, 2026
@tjuanitas
tjuanitas dismissed stale reviews from tjiang-box and jpan-box via 6dd36fd July 14, 2026 01:01
@mergify

mergify Bot commented Jul 14, 2026

Copy link
Copy Markdown
Contributor

Merge Queue Status

  • Entered queue2026-07-14 01:20 UTC · Rule: Automatic ui-elements merge · triggered by rule Automatic merge queue
  • Checks passed · in-place
  • Merged2026-07-14 01:33 UTC · at 72e639c1009c873f0fcb43ba4f40b7ae2b74efef · squash

This pull request spent 12 minutes 9 seconds in the queue, including 11 minutes 56 seconds running CI.

Required conditions to merge
  • github-review-approved [🛡 GitHub branch protection]
  • github-review-decision = APPROVED [🛡 GitHub branch protection]
  • any of [🛡 GitHub branch protection]:
    • check-success = Summary
    • check-neutral = Summary
    • check-skipped = Summary
  • any of [🛡 GitHub branch protection]:
    • check-success = lint_test_build
    • check-neutral = lint_test_build
    • check-skipped = lint_test_build
  • any of [🛡 GitHub branch protection]:
    • check-success = license/cla
    • check-neutral = license/cla
    • check-skipped = license/cla
  • any of [🛡 GitHub branch protection]:
    • check-success = lint_pull_request
    • check-neutral = lint_pull_request
    • check-skipped = lint_pull_request

@mergify
mergify Bot merged commit 8530e4f into master Jul 14, 2026
14 checks passed
@mergify
mergify Bot deleted the chore-upgrade-storybook branch July 14, 2026 01:33
@mergify mergify Bot removed the queued label Jul 14, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants