This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
Migrate Storybook to 6.4.0 and enable auto-detection of controls (#5249) #5264
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
sunyatasattva
added
focus: components
rubikuserbot
requested review from
a team and
Aljullu
and removed request for
a team
Previously our Babel configuration conflicted with the one provided by default by Storybook, making us unable to leverage the automatic detection of properties from both JS and TS components to create controls (formerly known as knobs). Upgrading to 6.4.0 fixes a bug that makes it easier to work with Babel configurations. Also done here: * Removed a few deprecated addons in favor of the replacement ones bundled within Storybook Essentials. * Add auto-detection of certain control types depending on the property names * Add support for TS stories More context: storybookjs/storybook#12292
sunyatasattva
force-pushed
the
update/5249-migrate-storybook-config
branch
from
339083e to
3331016
Compare
|
Size Change: 0 B Total Size: 1.04 MB ℹ️ View Unchanged
|
Aljullu
reviewed
Nov 30, 2021
There was a problem hiding this comment.
This is working and testing great, and the new features of Storybook are really cool.
The only issue I noticed is that there is quite a big increase in bundle sizes. You can see it if, after building, you compare a file from the build folder between trunk and this branch. You can also see it in the github action results in this PR.
I took a quick look and I think it's caused because of docgen. Is there any way to avoid it being applied to production builds?
|
Yep, this is indeed a problem I noticed and I don't have a great answer for it @Aljullu. Formerly, it was possible to have a Babel configuration that was specific for Storybook, but this is apparently not supported anymore, according to the docs:
I had in fact asked clarification on this on the thread I had made on the Storybook repo specifically because of this bundle size increase: storybookjs/storybook#16789 (comment) Any suggestion on this would be appreciated. Maybe I can force the NODE_ENV to be development and use the docgen plugin only then, but perhaps building storybook would have further differences? 🤔 Again, any suggestion appreciated. |
4 tasks
This should reduce production bundle size dramatically. The only problem here is that Storybook runs its `build` command with the `NODE_ENV` set to `production`. For this reason, we change the script to provide `BABEL_ENV` set to `development` to still make sure the correct configuration is loaded, while trying to reduce any side-effects on changing the whole `NODE_ENV`.
|
@Aljullu problem fixed. 0% increase in production bundle size. I have enabled doc generation only on Let me know what you think about this solution. |
sunyatasattva
force-pushed
the
update/5249-migrate-storybook-config
branch
from
b93adf3 to
59e1573
Compare
Aljullu
approved these changes
Dec 1, 2021
jonny-bull
pushed a commit
to jonny-bull/woocommerce-gutenberg-products-block
that referenced
this pull request
Dec 14, 2021
…commerce#5249) (woocommerce#5264) * Migrate Storybook to 6.4.0 and enable auto-detection of controls (woocommerce#5249) Previously our Babel configuration conflicted with the one provided by default by Storybook, making us unable to leverage the automatic detection of properties from both JS and TS components to create controls (formerly known as knobs). Upgrading to 6.4.0 fixes a bug that makes it easier to work with Babel configurations. Also done here: * Removed a few deprecated addons in favor of the replacement ones bundled within Storybook Essentials. * Add auto-detection of certain control types depending on the property names * Add support for TS stories More context: storybookjs/storybook#12292 * Use `react-docgen` only in development environments This should reduce production bundle size dramatically. The only problem here is that Storybook runs its `build` command with the `NODE_ENV` set to `production`. For this reason, we change the script to provide `BABEL_ENV` set to `development` to still make sure the correct configuration is loaded, while trying to reduce any side-effects on changing the whole `NODE_ENV`.
jonny-bull
pushed a commit
to jonny-bull/woocommerce-gutenberg-products-block
that referenced
this pull request
Dec 16, 2021
…commerce#5249) (woocommerce#5264) * Migrate Storybook to 6.4.0 and enable auto-detection of controls (woocommerce#5249) Previously our Babel configuration conflicted with the one provided by default by Storybook, making us unable to leverage the automatic detection of properties from both JS and TS components to create controls (formerly known as knobs). Upgrading to 6.4.0 fixes a bug that makes it easier to work with Babel configurations. Also done here: * Removed a few deprecated addons in favor of the replacement ones bundled within Storybook Essentials. * Add auto-detection of certain control types depending on the property names * Add support for TS stories More context: storybookjs/storybook#12292 * Use `react-docgen` only in development environments This should reduce production bundle size dramatically. The only problem here is that Storybook runs its `build` command with the `NODE_ENV` set to `production`. For this reason, we change the script to provide `BABEL_ENV` set to `development` to still make sure the correct configuration is loaded, while trying to reduce any side-effects on changing the whole `NODE_ENV`.
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
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.
Previously our Babel configuration conflicted with the one provided by default by Storybook, making us unable to leverage the automatic detection of properties from both JS and TS components to create controls (formerly known as knobs).
Upgrading to 6.4.0 fixes a bug that makes it easier to work with Babel configurations. Also done here:
More context: storybookjs/storybook#12292
Fixes #5249
Screenshots
Testing
Manual Testing
How to test the changes in this Pull Request:
npm run storybookControlstab, where the properties of the components are auto-detected and documented along with the descriptionUser Facing Testing
N/A (internal)
Changelog