-
Notifications
You must be signed in to change notification settings - Fork 221
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat: Upgrade Storybook to v6.1.3 #897
Conversation
Test summaryRun details
View run in Cypress Dashboard ➡️ This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard |
e01de04
to
57abafd
Compare
57abafd
to
602a5b7
Compare
… "kind"" This reverts commit 220c4f7.
4f3fd1e
to
86cc97d
Compare
@@ -48,6 +50,7 @@ | |||
"babel-loader": "^8.1.0", | |||
"babel-plugin-emotion": "^10.0.29", | |||
"babel-plugin-transform-es2015-modules-commonjs": "^6.26.2", | |||
"caniuse-lite": "^1.0.30001154", |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What's with these version numbers? Looks like they are already on 1.0.30001161
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
haha right? We were getting console warnings and the suggested fix was adding this dep. This was the latest when I added it, but I can upgrade again if you want
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No, just saw it and was wondering which prompted me to look it up. They have about 400 versions in the 1.0.3x
range
cbed0f3
to
86cc97d
Compare
Summary
To make use of Storybook Composition, we need to be on Storybook v6. This PR upgrades CK to use the latest version. This includes:
config.js
,addons.js
, etc.) for the new style (main.js
,manager.js
,preview.js
).main.js
|
hierarchy separator is gone, and top level sections are just pulled from the string before the first/
Theming
folder in storybook. I should probably open an issue for the parameter issue...addon-essentials
, which includes Actions (disabled due to poor performance), Backgrounds, Controls, Docs, Viewport, and ToolbarsAdditional References
Here are some gotchas that I ran into:
Due to this issue, all mdx files have to be prefixed with
.stories
. For examplecard.stories.mdx
will work, butcard.mdx
orstories.mdx
will not.Due to this issue, static class/function members must be defined after the class/function is defined, but before it is exported. If you define it in both places, this will avoid any Typescript errors. This does not apply for functional components since their static members are always defined after instantiation. For example:
Due to this issue and this issue, if you have combined exports for components and types, you need to use the plugin
@babel/plugin-transform-modules-commonjs
. You may still be required to separate some exports. For example:Since we had to combine all stories of the same folder structure into the same file, we now have to conditionally add parameters to some stories but not others. Be careful doing this if the story is a simple re-assignment. Since they have the same functional reference, the parameter will apply to both. Make sure you use a function that returns the original story instead.
Due to this issue, JSX elements now need a line break between them. Unfortunately divs or React Fragments do not work with Storybook's
Meta
component, so the only solution I've found is adding markdown between JSX tags, or saving the file without formatting.