Chore: Upgrade Chromatic CLI #33176
Chore: Upgrade Chromatic CLI #33176
Conversation
📝 WalkthroughWalkthroughAdds a readiness gate and debounced initialization to the checklist hook and wires it into the ChecklistWidget to delay and coordinate animated enter/exit transitions; also bumps Changes
Sequence Diagram(s)sequenceDiagram
participant Widget as ChecklistWidget (UI)
participant Hook as useChecklist (hook)
participant Store as UniversalStore
participant API as ManagerAPI
Note over Store,API: App start
API->>Store: store status becomes READY
API->>API: emit PREVIEW_INITIALIZED (once)
API->>Hook: api.once(PREVIEW_INITIALIZED) callback
Hook->>Hook: set initialized = true
Hook->>Hook: wait for items and debounce(500ms)
Hook->>Widget: return ready = true
Widget->>Widget: after 1s delay set animated = true
Widget->>Widget: run enter/exit transitions (2s)
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes
Possibly related PRs
✨ Finishing touches
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used📓 Path-based instructions (5)**/*.{js,jsx,json,html,ts,tsx,mjs}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
**/*.{ts,tsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
code/**/*.{ts,tsx,js,jsx,mjs}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
code/**/*.{ts,tsx,js,jsx}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
code/**/*.{js,jsx,json,html,ts,tsx,mjs}📄 CodeRabbit inference engine (.github/copilot-instructions.md)
Files:
🧠 Learnings (5)📚 Learning: 2025-11-05T09:38:47.712ZApplied to files:
📚 Learning: 2025-09-24T09:39:39.233ZApplied to files:
📚 Learning: 2025-09-18T20:51:06.618ZApplied to files:
📚 Learning: 2025-09-18T20:51:06.618ZApplied to files:
📚 Learning: 2025-11-05T09:37:25.920ZApplied to files:
🧬 Code graph analysis (2)code/core/src/manager/components/sidebar/ChecklistWidget.tsx (1)
code/core/src/manager/components/sidebar/useChecklist.ts (2)
⏰ 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)
🔇 Additional comments (2)
Comment |
|
View your CI Pipeline Execution ↗ for commit 0aea115
☁️ Nx Cloud last updated this comment at |
… animations until settled down and only delay transition for outgoing items
| const { loaded, allItems, nextItems, progress, accept, mute, items } = useChecklist(); | ||
| const [renderItems, setItems] = useState<ChecklistItem[]>([]); | ||
| const { loaded, ready, allItems, nextItems, progress, accept, mute, items } = useChecklist(); | ||
| const [renderItems, setRenderItems] = useState<ChecklistItem[]>(nextItems); | ||
| const [animated, setAnimated] = useState(false); | ||
|
|
||
| const hasItems = renderItems.length > 0; | ||
| const transitionItems = useTransitionArray(allItems, renderItems, { | ||
| keyFn: (item) => item.id, | ||
| timeout: 300, | ||
| }); | ||
| useEffect(() => { | ||
| if (ready) { | ||
| // Don't animate anything until the checklist items have settled down. | ||
| const timeout = setTimeout(setAnimated, 1000, true); | ||
| return () => clearTimeout(timeout); | ||
| } | ||
| }, [ready]); | ||
|
|
||
| useEffect(() => { | ||
| // Render old items (with updated status) for 2 seconds before | ||
| if (!animated) { | ||
| setRenderItems(nextItems); | ||
| return; | ||
| } | ||
|
|
||
| // Render outgoing items with updated state for 2 seconds before | ||
| // rendering new items, in order to allow exit transition. | ||
| setItems((current) => | ||
| current.map((item) => ({ | ||
| ...item, | ||
| isCompleted: items[item.id].status === 'accepted' || items[item.id].status === 'done', | ||
| isSkipped: items[item.id].status === 'skipped', | ||
| })) | ||
| ); | ||
| const timeout = setTimeout(setItems, 2000, nextItems); |
There was a problem hiding this comment.
This does not seem related to the PR?
What I did
Chromatic has been complaining for a while about our outdated dependency. So I upgraded it.
I checked the breaking changes in v12 and v13, none of them apply to us.
Checklist for Contributors
Testing
The changes in this PR are covered in the following automated tests:
Manual testing
This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!
Documentation
MIGRATION.MD
Checklist for Maintainers
When this PR is ready for testing, make sure to add
ci:normal,ci:mergedorci:dailyGH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli-storybook/src/sandbox-templates.tsMake sure this PR contains one of the labels below:
Available labels
bug: Internal changes that fixes incorrect behavior.maintenance: User-facing maintenance tasks.dependencies: Upgrading (sometimes downgrading) dependencies.build: Internal-facing build tooling & test updates. Will not show up in release changelog.cleanup: Minor cleanup style change. Will not show up in release changelog.documentation: Documentation only changes. Will not show up in release changelog.feature request: Introducing a new feature.BREAKING CHANGE: Changes that break compatibility in some way with current major version.other: Changes that don't fit in the above categories.🦋 Canary release
This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the
@storybookjs/coreteam here.core team members can create a canary release here or locally with
gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>Summary by CodeRabbit
New Features
Bug Fixes
Chores
✏️ Tip: You can customize this high-level summary in your review settings.