Upgrade Storybook to 9.x #1633
Upgrade Storybook to 9.x #1633
Conversation
🦋 Changeset detectedLatest commit: 2e62b86 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
@shilman is attempting to deploy a commit to the Themesberg Team on Vercel. A member of the Team first needs to authorize it. |
WalkthroughStorybook upgraded from version 8.1.10 to 9.1.15 with corresponding dependency updates, addon reorganization, and type import source changes across story files to use Vite-based Storybook packages. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Areas requiring extra attention:
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches✅ Passed checks (3 passed)
✨ Finishing touches
🧪 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 |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@shilman u can sync the branch with latest |
|
@SutuSebastian I did. I'm not sure why it's still showing your changes 🤷 |
|
@shilman the diff looks fine now. Only thing left to do is run |
![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
🧹 Nitpick comments (1)
.changeset/neat-things-lie.md (1)
5-5: Consider a more descriptive changeset message.The message "up packages" is quite terse. Consider something like "Upgrade Storybook to 9.x" to better document what changed for future reference.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
bun.lockis excluded by!**/*.lock
📒 Files selected for processing (50)
.changeset/neat-things-lie.md(1 hunks)apps/storybook/.storybook/main.ts(1 hunks)apps/storybook/.storybook/preview.tsx(1 hunks)apps/storybook/package.json(2 hunks)apps/storybook/src/Accordion.stories.tsx(1 hunks)apps/storybook/src/Alert.stories.tsx(1 hunks)apps/storybook/src/Avatar.stories.tsx(1 hunks)apps/storybook/src/AvatarGroup.stories.tsx(1 hunks)apps/storybook/src/Badge.stories.tsx(1 hunks)apps/storybook/src/Banner.stories.tsx(1 hunks)apps/storybook/src/Blockquote.stories.tsx(1 hunks)apps/storybook/src/Breadcrumb.stories.tsx(1 hunks)apps/storybook/src/Button.stories.tsx(1 hunks)apps/storybook/src/ButtonGroup.stories.tsx(1 hunks)apps/storybook/src/Card.stories.tsx(1 hunks)apps/storybook/src/Carousel.stories.tsx(1 hunks)apps/storybook/src/Checkbox.stories.tsx(1 hunks)apps/storybook/src/Clipboard.stories.tsx(1 hunks)apps/storybook/src/DarkThemeToggle.stories.tsx(1 hunks)apps/storybook/src/Datepicker.stories.tsx(1 hunks)apps/storybook/src/Drawer.stories.tsx(1 hunks)apps/storybook/src/Dropdown.stories.tsx(1 hunks)apps/storybook/src/FileInput.stories.tsx(1 hunks)apps/storybook/src/FloatingLabel.stories.tsx(1 hunks)apps/storybook/src/Footer.stories.tsx(1 hunks)apps/storybook/src/HR.stories.tsx(1 hunks)apps/storybook/src/Kbd.stories.tsx(1 hunks)apps/storybook/src/Label.stories.tsx(1 hunks)apps/storybook/src/List.stories.tsx(1 hunks)apps/storybook/src/ListGroup.stories.tsx(1 hunks)apps/storybook/src/MegaMenu.stories.tsx(1 hunks)apps/storybook/src/Modal.stories.tsx(1 hunks)apps/storybook/src/Navbar.stories.tsx(1 hunks)apps/storybook/src/Pagination.stories.tsx(1 hunks)apps/storybook/src/Popover.stories.tsx(1 hunks)apps/storybook/src/Progress.stories.tsx(1 hunks)apps/storybook/src/Radio.stories.tsx(1 hunks)apps/storybook/src/RangeSlider.stories.tsx(1 hunks)apps/storybook/src/Rating.stories.tsx(1 hunks)apps/storybook/src/Select.stories.tsx(1 hunks)apps/storybook/src/Sidebar.stories.tsx(1 hunks)apps/storybook/src/Spinner.stories.tsx(1 hunks)apps/storybook/src/Table.stories.tsx(1 hunks)apps/storybook/src/Tabs.stories.tsx(1 hunks)apps/storybook/src/TextInput.stories.tsx(1 hunks)apps/storybook/src/Textarea.stories.tsx(1 hunks)apps/storybook/src/Timeline.stories.tsx(1 hunks)apps/storybook/src/Toast.stories.tsx(1 hunks)apps/storybook/src/ToggleSwitch.stories.tsx(1 hunks)apps/storybook/src/Tooltip.stories.tsx(1 hunks)
🔇 Additional comments (51)
apps/storybook/src/Avatar.stories.tsx (1)
1-1: Clean migration to Vite-based Storybook types.The import update from
@storybook/reactto@storybook/react-vitealigns with Storybook 9.x and the Vite integration. No logic changes, so the story behavior remains intact.apps/storybook/src/Navbar.stories.tsx (1)
1-1: LGTM!The type import update is consistent with the Storybook 9.x upgrade across the codebase.
apps/storybook/src/Progress.stories.tsx (1)
1-1: LGTM!The Vite-based type import is correctly applied.
apps/storybook/src/Carousel.stories.tsx (1)
1-1: LGTM!The import update is correctly applied for Storybook 9.x.
apps/storybook/src/FloatingLabel.stories.tsx (1)
1-1: LGTM!The type import migration is correct.
apps/storybook/src/Pagination.stories.tsx (1)
1-1: LGTM!The import path is correctly updated for the Vite-based Storybook setup.
apps/storybook/src/ListGroup.stories.tsx (1)
1-1: LGTM!The type import update completes the migration pattern seen across all story files.
apps/storybook/src/Spinner.stories.tsx (1)
1-1: LGTM! Type import updated for Storybook 9.x compatibility.The migration to
@storybook/react-viteis consistent with the Storybook 9.x upgrade and Vite-based type definitions.apps/storybook/src/MegaMenu.stories.tsx (1)
1-1: LGTM! Type import updated for Storybook 9.x compatibility.The migration to
@storybook/react-viteis consistent with the Storybook 9.x upgrade and Vite-based type definitions.apps/storybook/src/HR.stories.tsx (1)
1-1: LGTM! Type import updated for Storybook 9.x compatibility.The migration to
@storybook/react-viteis consistent with the Storybook 9.x upgrade and Vite-based type definitions.apps/storybook/src/Label.stories.tsx (1)
1-1: LGTM! Type import updated for Storybook 9.x compatibility.The migration to
@storybook/react-viteis consistent with the Storybook 9.x upgrade and Vite-based type definitions.apps/storybook/src/Textarea.stories.tsx (1)
1-1: LGTM! Type import updated for Storybook 9.x compatibility.The migration to
@storybook/react-viteis consistent with the Storybook 9.x upgrade and Vite-based type definitions.apps/storybook/src/Timeline.stories.tsx (1)
1-1: LGTM! Type import updated for Storybook 9.x compatibility.The migration to
@storybook/react-viteis consistent with the Storybook 9.x upgrade and Vite-based type definitions.apps/storybook/src/AvatarGroup.stories.tsx (1)
1-1: LGTM! Type import updated for Storybook 9.x compatibility.The migration to
@storybook/react-viteis consistent with the Storybook 9.x upgrade and Vite-based type definitions.apps/storybook/src/List.stories.tsx (1)
1-1: LGTM! Type import updated for Storybook 9.x compatibility.The migration to
@storybook/react-viteis consistent with the Storybook 9.x upgrade and Vite-based type definitions.apps/storybook/src/Breadcrumb.stories.tsx (1)
1-1: LGTM! Type import correctly updated.Consistent with the Storybook 9.x migration pattern.
apps/storybook/src/Tooltip.stories.tsx (1)
1-1: LGTM! Type import correctly updated.Consistent with the Storybook 9.x migration pattern.
apps/storybook/src/Select.stories.tsx (1)
1-1: LGTM! Type import correctly updated.Consistent with the Storybook 9.x migration pattern.
apps/storybook/src/Popover.stories.tsx (1)
1-1: LGTM! Type import correctly updated.Consistent with the Storybook 9.x migration pattern.
apps/storybook/src/Blockquote.stories.tsx (1)
1-1: LGTM! Type import correctly updated.Consistent with the Storybook 9.x migration pattern.
apps/storybook/src/Datepicker.stories.tsx (1)
1-1: LGTM! Type import correctly updated.Consistent with the Storybook 9.x migration pattern.
apps/storybook/src/Toast.stories.tsx (1)
1-1: LGTM! Type import correctly updated.Consistent with the Storybook 9.x migration pattern.
apps/storybook/src/Clipboard.stories.tsx (1)
1-1: ✓ Type import migration verified and valid.The import of types from
@storybook/react-viteis correct and confirmed—@storybook/react-vitev9.1.15 is properly installed in the project.apps/storybook/src/Drawer.stories.tsx (1)
1-1: LGTM! Type import correctly updated for Storybook 9.x.The migration from
@storybook/reactto@storybook/react-vitealigns with Storybook 9.x's Vite-based architecture.apps/storybook/src/Alert.stories.tsx (1)
1-1: LGTM! Type import correctly updated for Storybook 9.x.apps/storybook/src/ButtonGroup.stories.tsx (1)
1-1: LGTM! Type import correctly updated for Storybook 9.x.apps/storybook/src/ToggleSwitch.stories.tsx (1)
1-1: LGTM! Type import correctly updated for Storybook 9.x.apps/storybook/src/Radio.stories.tsx (1)
1-1: LGTM! Type import correctly updated for Storybook 9.x.apps/storybook/src/Checkbox.stories.tsx (1)
1-1: LGTM! Type import correctly updated for Storybook 9.x.apps/storybook/src/FileInput.stories.tsx (1)
1-1: LGTM! Type import correctly updated for Storybook 9.x.apps/storybook/src/Dropdown.stories.tsx (1)
1-2: Action import is correct; but StoryFn is deprecated in Storybook 9.x—consider migrating to CSF3.The action import from
storybook/actionsis correctly updated for Storybook 9.x. However,StoryFnis the deprecated CSF2 pattern. Storybook 9.x recommends CSF3 withStoryObjinstead. WhileStoryFnstill works in 9.1.15, consider migrating using the official codemod:npx storybook@latest migrate csf-2-to-3 --glob="**/*.stories.*"Update the import to
import type { Meta, StoryObj } from "@storybook/react-vite";and adjust story definitions accordingly for forward compatibility.Likely an incorrect or invalid review comment.
apps/storybook/src/Rating.stories.tsx (1)
1-1: LGTM! Storybook type imports correctly updated for Vite.The migration from
@storybook/reactto@storybook/react-viteis the correct approach for Storybook 9.x with Vite builder.apps/storybook/src/Tabs.stories.tsx (1)
1-1: LGTM! Import updated correctly.apps/storybook/src/Footer.stories.tsx (1)
1-1: LGTM! Import updated correctly.apps/storybook/src/DarkThemeToggle.stories.tsx (1)
1-1: LGTM! Import updated correctly.apps/storybook/src/Kbd.stories.tsx (1)
1-1: LGTM! Import updated correctly.apps/storybook/src/Badge.stories.tsx (1)
1-1: LGTM! Import updated correctly.apps/storybook/src/Table.stories.tsx (1)
1-1: LGTM! Import updated correctly.apps/storybook/src/RangeSlider.stories.tsx (2)
1-1: LGTM! Import updated correctly.
1-1: All story files have been successfully migrated to@storybook/react-vitewith no legacy imports remaining.Verification confirms all 46
.stories.tsxfiles in the codebase use the new@storybook/react-viteimport—no files remain on the old@storybook/reactimport. The migration is complete and consistent.apps/storybook/src/TextInput.stories.tsx (1)
1-1: LGTM! Type import correctly updated for Storybook 9.x.The migration to
@storybook/react-vitefor type imports is consistent with the Vite-based Storybook 9.x setup being adopted across the codebase.apps/storybook/src/Modal.stories.tsx (2)
2-2: LGTM! Type import correctly updated.The migration to
@storybook/react-vitefor type imports aligns with the Storybook 9.x upgrade.
1-1: The import path is correct and requires no changes.In Storybook 9.x (including 9.1.15), actions should be imported from
storybook/actions, which is exactly what the code does. This is the official consolidated core path and is the standard approach for this Storybook version. The import is being used correctly in the code.Likely an incorrect or invalid review comment.
apps/storybook/.storybook/preview.tsx (1)
2-2: LGTM! Type imports correctly migrated.The type import update to
@storybook/react-viteis consistent with the Storybook 9.x migration and has no runtime impact.apps/storybook/src/Sidebar.stories.tsx (1)
1-1: LGTM! Type import correctly updated.The migration to
@storybook/react-viteis consistent with the Storybook 9.x upgrade across all story files.apps/storybook/src/Banner.stories.tsx (1)
1-1: LGTM! Type import correctly migrated.The type import update aligns with the Vite-based Storybook 9.x setup being adopted throughout the project.
apps/storybook/src/Card.stories.tsx (1)
1-1: LGTM! Type import correctly updated.The migration to
@storybook/react-vitecompletes the consistent pattern across all reviewed story files.apps/storybook/package.json (1)
22-25: Storybook 9.1.15 upgrade verified and confirmed compatible.The
action()function imports in Modal.stories.tsx and Dropdown.stories.tsx are already correctly configured for Storybook 9.x, usingimport { action } from "storybook/actions". The actions API is provided by Storybook's core package at the path storybook/actions, which is what your codebase is using. The old@storybook/addon-actionspackage has been properly removed from dependencies, and@storybook/testis not needed—it's only required for thefn()spy helper, not foraction().apps/storybook/.storybook/main.ts (1)
15-19: No action required—remove the review comment.Storybook 9 no longer includes addon-essentials, as its functionality (Controls, Actions, Viewport, Interactions) was moved into core. The current configuration is correct for Storybook 9.x. The explicit addons present (addon-links, addon-themes, addon-docs) are the appropriate selections beyond core functionality. No broken features or missing panels will result from this change.
Likely an incorrect or invalid review comment.
apps/storybook/src/Accordion.stories.tsx (1)
1-1: LGTM: Type import correctly updated for Storybook 9.x with Vite.The switch from
@storybook/reactto@storybook/react-viteis the expected change for Storybook 9.x using Vite. Since this is a type-only import, there's no runtime impact.apps/storybook/src/Button.stories.tsx (1)
1-1: LGTM: Type import correctly updated for Storybook 9.x with Vite.Consistent with the Accordion story file, this correctly switches to
@storybook/react-vitefor the Storybook 9.x upgrade.
3 participants
Simple upgrade & verified that the Storybook is still working. Branched off of @SutuSebastian 's
fix/dev-envwork.Summary by CodeRabbit
Chores
Refactor