Storybook 7 #972
Merged
Storybook 7 #972
Conversation
This file contains 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
|
Uffizzi Preview |
nataliepina
force-pushed
the
npina/storybook-7
branch
9 times, most recently
from
0f6cd11 to
e3869e9
Compare
nataliepina
force-pushed
the
npina/storybook-7
branch
from
e3869e9 to
faefd81
Compare
nataliepina
commented
May 30, 2023
| @@ -8,9 +8,6 @@ module.exports = ({ config }) => { | |||
| config.resolve.extensions = config.resolve.extensions.concat( | |||
| webpackBase.getExtensions() | |||
| ); | |||
| config.resolve.alias["core-js"] = path.dirname(require.resolve("core-js")); | |||
| config.module.rules[0].use[0].options.sourceType = "unambiguous"; | |||
There was a problem hiding this comment.
These items are no longer required, and they will not allow Storybook to build.
clintonmedbery
approved these changes
Jun 5, 2023
seialkali
approved these changes
Jun 5, 2023
|
🎉 This PR is included in version 14.0.2 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Description
These changes introduce the migration from Storybook 6.5 to Storybook 7.
Issues Encountered
There was a breaking change for the Welcome page. Storybook's styles now will override all story files, including these MDX files. This broke our theming and styles for this page. I discovered a workaround in a community issue. We can use
Unstyledto remove any storybook style overrides. Also, for theming to work correctly, it will now come from "@storybook/theming/create".The favicon broke when upgrading to storybook 7. I chose a new method for us to integrate the favicon with the manager-preview.html file. The favicon won't appear locally but it will appear in the production build. You can test this out by running
npx http-server storybook_static. The favicon as an svg is the more modern way to manage this.The codemod took care of the migration of our stories from CSF2 to CSF3. There were a few stories that were broken and required tweaks. The decorators for the Toast component broke the Docs page. And you would see this error -
Error: Rendered more hooks than during the previous render.I fixed this by refactoring the stories so that Toaster will wrap around the Toast component within the individual stories. It doesn't need to be a decorator.There were a few other locations that had render errors. To fix this I had to slightly adjust the formatting of the story. PageHeader is an example of a story that I had to adjust. There also were some errors in the code due to props being overridden in stories. Infobox required a slight refactor to get the message to render.
Other Notable Changes
With these changes, I was also able to migrate us to MDX2! This only impacts the Welcome page, Typography, and Colors.
I wanted the changes to isolate the update to Storybook 7 primarily so that it’s easier to review. I did a side-by-side comparison of the component docs. I’ve noted a few locations where improvements could be made as a follow-up.
These changes have also been tested downstream.
Which issue(s) does this PR relate to?
Testing
npm installnpm run build:storybooknpm run startTrade-offs
It takes a few seconds longer for storybook to start up. I believe we can improve this by refactoring our webpack configuration and reduce/refactor our stories. Switching between stories seems to be more performant though.
Screenshots
Checklist