Upgrade Storybook from 7.6.20 to 8.6.15 #661
Open
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Convert all 21 .stories.mdx files to CSF3 format (.stories.js) - Generate separate .mdx documentation files - Add @storybook/addon-webpack5-compiler-swc for build support - Add @storybook/addon-mdx-gfm for GitHub-flavored markdown - Remove deprecated argTypesRegex from preview.js - Update stories glob pattern in main.js Closes SolidOS#570
Contributor
There was a problem hiding this comment.
Pull request overview
This PR upgrades Storybook from version 7.6.20 to 8.6.15, a major version upgrade that requires significant structural changes. The conversion follows Storybook 8's new requirements where stories must be in CSF (Component Story Format) files and MDX is used only for documentation.
Changes:
- Upgraded all Storybook packages from 7.6.20 to 8.6.15
- Converted 21
.stories.mdxfiles to separate.stories.js(CSF3) and.mdx(documentation) files - Added required addons:
@storybook/addon-webpack5-compiler-swcand@storybook/addon-mdx-gfm - Updated Storybook configuration to remove deprecated
argTypesRegexand update stories glob pattern
Reviewed changes
Copilot reviewed 62 out of 63 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| package.json | Updated all Storybook dependencies to 8.6.15 and added new required addons |
| .storybook/main.js | Updated stories glob pattern and added new addon configurations |
| .storybook/preview.js | Removed deprecated argTypesRegex parameter |
| src/stories/**/*.stories.js | 21 new CSF3 format story files converted from .stories.mdx |
| src/stories/**/*.mdx | 21 new documentation-only MDX files |
| src/stories/forms/Intro.stories.mdx | Deleted (converted to Intro.mdx) |
| src/stories/forms/Forms.stories.mdx | Deleted (split into Forms.stories.js and Forms.mdx) |
| src/stories/forms/Fields.stories.mdx | Deleted (split into Fields.stories.js and Fields.mdx) |
| All other *.stories.mdx files | Deleted and converted to the new format |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| const headerDecorator = (Story) => { | ||
| setTimeout(() => Story(), 1); | ||
| return '<div>The above <code>div<code> with ID "PageHeader" is replaced by the header component</div>'; |
There was a problem hiding this comment.
There is an unclosed HTML tag in the returned string. The opening <code> tag should be followed by </code> instead of another <code>. This will cause incorrect HTML rendering.
Suggested change
| return '<div>The above <code>div<code> with ID "PageHeader" is replaced by the header component</div>'; | |
| return '<div>The above <code>div</code> with ID "PageHeader" is replaced by the header component</div>'; |
| export const DeleteButton = { | ||
| render: () => { | ||
| const div = document.createElement("div"); | ||
| const result = UI.widgets.deleteButtonWithCheck( |
There was a problem hiding this comment.
Unused variable result.
Suggested change
| const result = UI.widgets.deleteButtonWithCheck( | |
| UI.widgets.deleteButtonWithCheck( |
| @@ -0,0 +1,156 @@ | |||
| import * as UI from "../../src/index"; | |||
|
|
|||
| import { rawJsonDecorator } from "./decorators"; | |||
There was a problem hiding this comment.
Unused import rawJsonDecorator.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary
.stories.mdxfiles to CSF3 format (.stories.js).mdxdocumentation filesDetails
Storybook 8 removed support for the hybrid
.stories.mdxformat. Stories must now be in CSF (Component Story Format) files, with MDX used only for documentation.Changes
@storybook/addon-webpack5-compiler-swc,@storybook/addon-mdx-gfmargTypesRegex, updated stories globmdx-to-csfcodemodTest plan
npm run build-storybooksucceedsCloses #570