[WEB-4255] chore: upgrade storybook to v9 in ui package #7164
Conversation
|
|
WalkthroughThis update upgrades Storybook and related dependencies from version 8.x to 9.x in the Changes
Sequence Diagram(s)sequenceDiagram
participant Developer
participant StorybookConfig
participant Webpack
participant Linting
Developer->>StorybookConfig: Runs Storybook (v9)
StorybookConfig->>Webpack: Apply async webpackFinal (custom CSS loaders)
StorybookConfig->>Linting: Use ESLint with Storybook recommended rules
StorybookConfig->>StorybookConfig: Load updated addons (docs, etc.)
StorybookConfig->>Developer: Serve updated Storybook UI with new stories and config
Suggested labels
Poem
✨ Finishing Touches
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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
|
Pull Request Linked with Plane Work Items
Comment Automatically Generated by Plane |
There was a problem hiding this comment.
Pull Request Overview
This PR updates the Storybook configuration and related story files in the ui package to support Storybook v9 with webpack5 and refactors story definitions for improved type usage. Key changes include:
- Updating imports from "@storybook/react" to "@storybook/react-webpack5" across story files.
- Refactoring story meta definitions and type annotations to leverage modern TypeScript features.
- Upgrading related dependencies in package.json and adjusting ESLint and Webpack configurations.
Reviewed Changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/ui/src/tables/table.stories.tsx | Refactored story meta and type definitions for the Table component. |
| packages/ui/src/sortable/sortable.stories.tsx | Updated meta signature and inline type usage for the Sortable component story. |
| packages/ui/src/popovers/popover.stories.tsx | Simplified Popover story by inlining custom component rendering. |
| packages/ui/src/popovers/popover-menu.stories.tsx | Inlined render logic and updated meta configuration for PopoverMenu. |
| packages/ui/src/avatar/avatar.stories.tsx | Adapted story meta and default story for the Avatar component. |
| packages/ui/package.json | Upgraded Storybook and related dependencies to v9 versions. |
| packages/ui/.storybook/preview.ts | Updated global CSS import and Storybook type import for webpack5. |
| packages/ui/.storybook/main.ts | Added webpackFinal to modify CSS rules for compatibility with the new Storybook version. |
| packages/ui/.eslintrc.js | Extended ESLint config to include Storybook recommended plugin. |
![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
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
yarn.lockis excluded by!**/yarn.lock,!**/*.lock
📒 Files selected for processing (9)
packages/ui/.eslintrc.js(1 hunks)packages/ui/.storybook/main.ts(1 hunks)packages/ui/.storybook/preview.ts(1 hunks)packages/ui/package.json(1 hunks)packages/ui/src/avatar/avatar.stories.tsx(1 hunks)packages/ui/src/popovers/popover-menu.stories.tsx(1 hunks)packages/ui/src/popovers/popover.stories.tsx(1 hunks)packages/ui/src/sortable/sortable.stories.tsx(1 hunks)packages/ui/src/tables/table.stories.tsx(3 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: Analyze (javascript)
🔇 Additional comments (21)
packages/ui/.storybook/preview.ts (1)
1-2: LGTM! Imports correctly updated for Storybook v9.The changes properly reflect the migration to Storybook v9 with webpack5 and the CSS restructuring from processed output to global styles.
packages/ui/.eslintrc.js (1)
4-4: LGTM! Proper integration of Storybook ESLint rules.Adding the Storybook recommended configuration is a best practice that will help catch Storybook-specific issues and maintain consistency.
packages/ui/package.json (1)
50-69:❓ Verification inconclusive
Verify dependency compatibility and completeness.
The Storybook v9 upgrade looks comprehensive, but please verify:
- All removed Storybook v8 dependencies are properly cleaned up
- The new
postcss-loaderversion (8.1.1) is compatible with the webpack configuration- Version compatibility between all Storybook v9 packages
🏁 Script executed:
#!/bin/bash # Description: Check for any remaining v8 Storybook dependencies and verify package compatibility # Check for any remaining v8 storybook packages echo "Checking for remaining v8 Storybook packages:" jq -r '.devDependencies | to_entries[] | select(.key | contains("storybook")) | "\(.key): \(.value)"' packages/ui/package.json # Check if postcss-loader is used elsewhere in the monorepo echo -e "\nChecking postcss-loader usage across monorepo:" fd "package.json" --exec jq -r 'select(.devDependencies."postcss-loader" or .dependencies."postcss-loader") | "postcss-loader found in: " + input_filename' 2>/dev/null || echo "No other postcss-loader dependencies found"Length of output: 770
Dependency cleanup complete, pending manual compatibility checks
All Storybook v8 packages have been removed from
packages/ui/package.json—only v9 add-ons remain—and[email protected]is only declared in that package. Before merging:
- Confirm that
[email protected]integrates correctly with your Webpack setup.- Run Storybook locally (and in CI) to validate compatibility across all v9 add-ons.
- Double-check no other packages in the monorepo still reference v8 Storybook or
postcss-loader.packages/ui/src/avatar/avatar.stories.tsx (3)
1-1: LGTM! Correct import for Storybook v9 webpack5.The import change aligns with the migration to Storybook v9 and webpack5.
7-9: LGTM! Good practice centralizing common args.Moving shared arguments to the meta level reduces duplication and follows Storybook v9 best practices.
16-22: LGTM! Clean story definitions with proper inheritance.The simplified story exports properly inherit the common args from meta while allowing individual stories to override specific properties.
packages/ui/.storybook/main.ts (1)
18-18: LGTM! Proper addition of docs addon.Adding
@storybook/addon-docsis appropriate for the v9 upgrade and provides enhanced documentation capabilities.packages/ui/src/popovers/popover.stories.tsx (3)
1-1: LGTM: Correct Storybook v9 import updateThe import change from
@storybook/reactto@storybook/react-webpack5is correct for the Storybook v9 upgrade.
11-25: Good refactor: Inlined children prop improves readabilityThe inlining of the JSX content directly into the
childrenprop eliminates an unnecessary intermediate constant and makes the story definition cleaner.
29-33: LGTM: Proper story structure for Storybook v9The changes correctly implement the modern Storybook pattern:
- Meta exported as default at the bottom
- Story type using
typeof metafor better type inference- Default story simplified to rely on meta-level args
packages/ui/src/sortable/sortable.stories.tsx (4)
1-1: LGTM: Correct Storybook v9 import updateThe import change to
@storybook/react-webpack5is correct for the upgrade.
13-13: Excellent type safety improvementThe meta type
Meta<typeof Sortable<(typeof data)[number]>>provides better type inference by deriving the generic type from the data array elements.
18-24: Good simplification: Type inference over explicit annotationsRemoving explicit type annotations on
renderandkeyExtractorfunctions is appropriate since TypeScript can infer these types from the context.
25-29: Good addition: Action logging for onChangeAdding
onChangetoargTypeswith action logging enables Storybook's action panel to show when the callback is triggered, which is helpful for testing and documentation.packages/ui/src/popovers/popover-menu.stories.tsx (3)
1-1: LGTM: Consistent import update for Storybook v9Correctly updated to
@storybook/react-webpack5consistent with the other story files.
12-12: Good type safety improvementThe meta type using
Meta<typeof PopoverMenu<(typeof data)[number]>>provides better type inference similar to the other upgraded stories.
19-24: Clean refactor: Inlined render functionThe render function is now defined inline within the args, eliminating the need for a separate constant and making the story more self-contained.
packages/ui/src/tables/table.stories.tsx (4)
1-4: LGTM: Correct imports for Storybook v9 upgradeThe import updates are consistent with the Storybook v9 upgrade, including the addition of
TTableColumntype import.
17-28: Good type inference: Removed redundant annotationsRemoving explicit type annotations from
tdRenderparameters is appropriate since TypeScript can infer therowDatatype from the table's generic type.
29-29: Excellent use of satisfies operatorThe
satisfies TTableColumn<typeof tableData[number]>[]ensures type safety for the columns array while preserving the inferred types of individual elements. This is a modern TypeScript best practice.
31-52: LGTM: Consistent story structure upgradeThe meta type definition and story structure follow the same improved pattern as the other upgraded story files, providing better type safety and cleaner code organization.
Description
Upgrade storybook to v9 in ui package
Type of Change
Screenshots and Media (if applicable)
Test Scenarios
References
Summary by CodeRabbit