upgrade storybook to 10.x #1634
Conversation
SutuSebastian
added
the
📚 documentation
|
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
WalkthroughStorybook version upgraded from 8.x to 10.x across configuration, dependencies, and story files. Configuration simplified with static addon lists and updated framework references. All story files updated to use Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes
Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 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 |
![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 (4)
apps/storybook/src/ButtonGroup.stories.tsx (1)
18-18: Consider renaming for clarity.The variable name
DefaultAvatarGroupdoesn't match the component being demonstrated (ButtonGroup). Consider renaming toDefaultButtonGroupto improve code clarity.Apply this diff:
-export const DefaultAvatarGroup = Template.bind({}); -DefaultAvatarGroup.storyName = "ButtonGroup"; -DefaultAvatarGroup.args = {}; +export const DefaultButtonGroup = Template.bind({}); +DefaultButtonGroup.storyName = "ButtonGroup"; +DefaultButtonGroup.args = {};apps/storybook/src/RangeSlider.stories.tsx (1)
24-30: Consider modernizing to Storybook 10.x patterns.While the current implementation works, you could optionally modernize this story file to align with current Storybook best practices:
- Replace
as Metawithsatisfies Meta<typeof RangeSlider>for better type safety- Remove the deprecated
storyNameproperty (export names are used automatically)- Use object-based stories instead of the Template.bind pattern
Example modernization:
-} as Meta; +} satisfies Meta<typeof RangeSlider>; -const Template: StoryFn<RangeSliderProps> = (args) => <RangeSlider {...args} />; - -export const DefaultRangeSlider = Template.bind({}); -DefaultRangeSlider.storyName = "RangeSlider"; -DefaultRangeSlider.args = {}; +export const RangeSlider: StoryFn<RangeSliderProps> = { + render: (args) => <RangeSlider {...args} />, + args: {}, +};apps/storybook/src/Drawer.stories.tsx (1)
1-1: LGTM! Import path correctly updated for Storybook 10.x with Vite.The import from
@storybook/react-viteis the correct approach for Storybook with React and Vite, and this change aligns with the PR's objective to upgrade to Storybook 10.x.Optional: Consider modernizing to the object-based story pattern.
While the current
StoryFn-based template pattern works fine, Storybook recommends usingStoryObjwith object-based stories for better type safety and a more concise syntax. You could refactor this later as:import type { Meta, StoryObj } from "@storybook/react-vite"; import { Drawer, DrawerHeader, DrawerItems, type DrawerProps } from "flowbite-react"; const meta = { title: "Components/Drawer", component: Drawer, } satisfies Meta<typeof Drawer>; export default meta; type Story = StoryObj<typeof meta>; export const Default: Story = { args: { backdrop: true, open: true, position: "left", }, render: (args) => ( <Drawer {...args}> <DrawerHeader title="Drawer" /> <DrawerItems> {/* ... existing content ... */} </DrawerItems> </Drawer> ), };This is purely optional and can be deferred—the current implementation is valid.
apps/storybook/src/Footer.stories.tsx (1)
1-1: LGTM! Import path correctly updated for Storybook 10.x with Vite.The import path
@storybook/react-viteis the correct package for Storybook with React and Vite, and bothMetaandStoryFntypes are properly exported from this package.Optional: Consider migrating to modern CSF 3.0 format.
While the current
Template.bind({})pattern withStoryFnworks correctly, Storybook's modern CSF 3.0 format usesStoryObjinstead for improved type safety and a more concise syntax.Example modern format:
import type { Meta, StoryObj } from "@storybook/react-vite"; import { Footer } from "flowbite-react"; const meta = { title: "Components/Footer", component: Footer, } satisfies Meta<typeof Footer>; export default meta; type Story = StoryObj<typeof meta>; export const DefaultFooter: Story = { render: ({ children }) => <Footer>{children}</Footer>, args: { children: ( <div className="flex w-full justify-between p-6"> {/* ... */} </div> ), }, };
📜 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 (49)
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 (50)
apps/storybook/src/Popover.stories.tsx (1)
1-1: LGTM! Type import correctly updated for Storybook 10.x with Vite.The import path change from
@storybook/reactto@storybook/react-viteis correct and aligns with the Storybook 10.x upgrade.apps/storybook/src/Breadcrumb.stories.tsx (1)
1-1: LGTM! Import correctly updated for Storybook 10.x with Vite.The type import change from
@storybook/reactto@storybook/react-vitealigns with the Storybook upgrade and Vite integration. The types remain the same and are used correctly throughout the story file.apps/storybook/src/Table.stories.tsx (1)
1-1: LGTM! Type imports correctly updated for Storybook 10.x.The migration from
@storybook/reactto@storybook/react-vitealigns with Storybook 10's Vite integration. Since these are type-only imports, there's no runtime impact.apps/storybook/src/Spinner.stories.tsx (1)
1-1: LGTM! Correct type import for Storybook 10.x with Vite.The import change from
@storybook/reactto@storybook/react-viteis appropriate for the Storybook 10.x upgrade using Vite as the bundler. The fact that no other code changes were needed confirms type compatibility.apps/storybook/src/Badge.stories.tsx (1)
1-1: LGTM! Import path correctly updated for Storybook 10.x with Vite.The import path change from
@storybook/reactto@storybook/react-viteis correct for the Storybook 10.x migration with the Vite framework. The types remain functionally identical.apps/storybook/src/Progress.stories.tsx (1)
1-1: LGTM! Import updated correctly for Vite-based Storybook.The import change from
@storybook/reactto@storybook/react-viteis correct and aligns with the Storybook 10.x upgrade using Vite as the bundler.apps/storybook/src/MegaMenu.stories.tsx (1)
1-1: LGTM! Import correctly updated for Storybook 10.x with Vite.The type import change from
@storybook/reactto@storybook/react-viteis correct and consistent with the Storybook 10.x upgrade using Vite integration.apps/storybook/src/ButtonGroup.stories.tsx (1)
1-1: LGTM! Import updated for Storybook 10.x migration.The import change from
@storybook/reactto@storybook/react-vitecorrectly aligns with the Storybook 10.x upgrade and react-vite framework adoption.apps/storybook/src/Clipboard.stories.tsx (1)
1-1: LGTM! Import updated correctly for Storybook 10.x with Vite.The migration from
@storybook/reactto@storybook/react-vitealigns with Storybook 10.x best practices when using Vite as the build tool. The type-only import ensures no runtime impact, and the unchanged rest of the file confirms type compatibility.apps/storybook/src/RangeSlider.stories.tsx (1)
1-1: LGTM! Import correctly updated for Storybook 10.x.The import change from
@storybook/reactto@storybook/react-viteis correct and necessary for the Storybook 10.x upgrade with the Vite framework.apps/storybook/src/Timeline.stories.tsx (1)
1-1: LGTM! Import updated for Storybook 10.x with Vite.The import change from
@storybook/reactto@storybook/react-viteis correct for the Storybook 10.x upgrade. The types are used appropriately throughout the file.apps/storybook/src/FloatingLabel.stories.tsx (1)
1-1: LGTM! Import updated correctly for Storybook 10.x with Vite.The import change from
@storybook/reactto@storybook/react-viteis correct and aligns with the Storybook 10.x migration. The types remain compatible, requiring no other changes to the story file.apps/storybook/src/ToggleSwitch.stories.tsx (1)
1-1: LGTM! Import path correctly updated for Storybook 10.x with Vite.The change from
@storybook/reactto@storybook/react-vitealigns with Storybook 10.x's Vite-based framework setup.apps/storybook/src/FileInput.stories.tsx (1)
1-1: LGTM: Storybook type imports correctly updated.The import path migration to
@storybook/react-vitealigns with the Storybook v10 upgrade.apps/storybook/src/ListGroup.stories.tsx (1)
1-1: LGTM: Storybook type imports correctly updated.The import path migration to
@storybook/react-vitealigns with the Storybook v10 upgrade.apps/storybook/src/Datepicker.stories.tsx (1)
1-1: LGTM: Storybook type imports correctly updated.The import path migration to
@storybook/react-vitealigns with the Storybook v10 upgrade.apps/storybook/src/Blockquote.stories.tsx (1)
1-1: LGTM: Storybook type imports correctly updated.The import path migration to
@storybook/react-vitealigns with the Storybook v10 upgrade.apps/storybook/src/Avatar.stories.tsx (1)
1-1: LGTM: Storybook type imports correctly updated.The import path migration to
@storybook/react-vitealigns with the Storybook v10 upgrade.apps/storybook/src/Alert.stories.tsx (1)
1-1: LGTM: Storybook type imports correctly updated.The import path migration to
@storybook/react-vitealigns with the Storybook v10 upgrade.apps/storybook/src/Rating.stories.tsx (1)
1-1: LGTM: Storybook type imports correctly updated.The import path migration to
@storybook/react-vitealigns with the Storybook v10 upgrade.apps/storybook/src/Radio.stories.tsx (1)
1-1: LGTM: Storybook type imports correctly updated.The import path migration to
@storybook/react-vitealigns with the Storybook v10 upgrade.apps/storybook/src/Carousel.stories.tsx (1)
1-1: LGTM! Type import correctly updated for Vite-based Storybook.The migration to
@storybook/react-vitealigns with the Storybook 10.x upgrade.apps/storybook/src/Navbar.stories.tsx (1)
1-1: LGTM! Type import correctly updated for Vite-based Storybook.apps/storybook/src/HR.stories.tsx (1)
1-1: LGTM! Type import correctly updated for Vite-based Storybook.apps/storybook/src/Kbd.stories.tsx (1)
1-1: LGTM! Type import correctly updated for Vite-based Storybook.apps/storybook/src/Card.stories.tsx (1)
1-1: LGTM! Type import correctly updated for Vite-based Storybook.apps/storybook/src/DarkThemeToggle.stories.tsx (1)
1-1: LGTM! Type import correctly updated for Vite-based Storybook.apps/storybook/src/Toast.stories.tsx (1)
1-1: LGTM! Type import correctly updated for Vite-based Storybook.apps/storybook/src/Accordion.stories.tsx (1)
1-1: LGTM! Type import correctly updated for Vite-based Storybook.apps/storybook/src/Dropdown.stories.tsx (2)
1-1: LGTM! Type imports updated for Storybook 10.x.The import path change from
@storybook/reactto@storybook/react-vitecorrectly aligns with the Storybook 10.x migration and Vite-based setup.
4-4: LGTM! Action import consolidated.The change from
@storybook/addon-actionstostorybook/actionsfollows the Storybook 10.x pattern of consolidating action imports into a centralized module.apps/storybook/src/Label.stories.tsx (1)
1-1: LGTM! Type imports updated for Storybook 10.x.The import path correctly updated to
@storybook/react-vite, consistent with the migration.apps/storybook/src/Banner.stories.tsx (1)
1-1: LGTM! Type imports updated for Storybook 10.x.apps/storybook/src/Textarea.stories.tsx (1)
1-1: LGTM! Type imports updated for Storybook 10.x.apps/storybook/src/Tooltip.stories.tsx (1)
1-1: LGTM! Type imports updated for Storybook 10.x.apps/storybook/src/Button.stories.tsx (1)
1-1: LGTM! Type imports updated for Storybook 10.x.apps/storybook/src/AvatarGroup.stories.tsx (1)
1-1: LGTM! Type imports updated for Storybook 10.x.apps/storybook/src/List.stories.tsx (1)
1-1: LGTM! Type imports updated for Storybook 10.x.apps/storybook/src/Pagination.stories.tsx (1)
1-1: LGTM! Import updated for Storybook 10 migration.The type import correctly updated to use
@storybook/react-viteas part of the Storybook 10 upgrade.apps/storybook/src/TextInput.stories.tsx (1)
1-1: LGTM! Import updated for Storybook 10 migration.Consistent with the migration pattern across all story files.
apps/storybook/.storybook/preview.tsx (1)
2-2: LGTM! Preview types updated for react-vite.The type imports correctly updated to match the new framework configuration.
apps/storybook/src/Tabs.stories.tsx (1)
1-1: LGTM! Import updated consistently.Type import follows the established migration pattern.
apps/storybook/src/Select.stories.tsx (1)
1-1: LGTM! Import updated for Storybook 10.Follows the consistent migration pattern.
apps/storybook/src/Sidebar.stories.tsx (1)
1-1: LGTM! Import updated consistently.Type import aligns with the Storybook 10 migration.
apps/storybook/.storybook/main.ts (2)
7-7: LGTM! Framework configuration simplified.Using the literal string
"@storybook/react-vite"is the recommended approach in Storybook 10, replacing the previous dynamic path resolution.
5-5: Configuration is correct and addon functionality is preserved.Storybook 10 built the functionality from addon-essentials into core as accessible via import paths like
storybook/actions,storybook/controls,storybook/interactions, andstorybook/viewport. The codebase confirms this is already in use—story files importactiondirectly fromstorybook/actions(e.g., Modal.stories.tsx, Dropdown.stories.tsx), which is the correct pattern for Storybook 10.0.2. The remaining three addons (addon-links,addon-themes,addon-docs) are appropriate for this configuration and no functionality gaps exist.apps/storybook/package.json (1)
22-37: Verification complete: Storybook 10.0.2 is a valid, stable release and the package removals are intentional per the migration path.The packages
@storybook/addon-essentials,@storybook/addon-interactions,@storybook/addon-links, and@storybook/blocksshould be removed—they are empty since Storybook 9 and will no longer be published going forward. The viewport, controls, interactions and actions addons have been moved from their respective packages to Storybook core, and you no longer need to install these separately or include them in your addons list.@storybook/reactshould be replaced with@storybook/react-vite(which is already in the package.json). For@storybook/test, addon-vitest and the rest of the Storybook Test experience is designed to supersede the test-runner and provides a better experience for writing and running tests, and should be considered for projects using React, Vue, or Svelte with Vite.The package list reflects the documented Storybook 9-to-10 migration path. No issues detected.
apps/storybook/src/Checkbox.stories.tsx (1)
1-1: LGTM! Correct import path for Storybook 10.x with Vite.The import path
@storybook/react-viteis correct for React projects using Vite with Storybook, and theMetaandStoryFntypes are available from this package. This change aligns with the PR objective of upgrading to Storybook 10.x and is consistent with the migration pattern applied across other story files.apps/storybook/src/Modal.stories.tsx (2)
1-1: LGTM! Import path correctly updated for Storybook 10.x.The import from
@storybook/react-viteis correct for React projects using Vite in Storybook 10.x.
5-5: LGTM! Action import correctly updated for Storybook 10.x.The import from
storybook/actionsis the correct pattern for Storybook 10.x. The action function usage throughout the file (lines 18, 19, 45, 46, 65, 68) remains compatible with this import.
Continuing from the PR #1633
also upgrading to
10.xSummary by CodeRabbit