Migrate Storybook to 6.4.0 and enable auto-detection of controls (https://github.com/woocommerce/woocommerce-blocks/pull/5249) (https://github.com/woocommerce/woocommerce-blocks/pull/5264)
* Migrate Storybook to 6.4.0 and enable auto-detection of controls (https://github.com/woocommerce/woocommerce-blocks/pull/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: https://github.com/storybookjs/storybook/issues/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`.
This commit is contained in:
M. L. Giannotta
GitHub
parent
1aca1eaa7c
commit
7e9f8c822d
|
|
@ -1,4 +1,15 @@
|
|||
module.exports = {
|
||||
env: {
|
||||
development: {
|
||||
plugins: [
|
||||
[
|
||||
'react-docgen',
|
||||
{ DOC_GEN_COLLECTION_NAME: 'STORYBOOK_REACT_CLASSES' },
|
||||
],
|
||||
[ '@babel/plugin-syntax-jsx' ],
|
||||
],
|
||||
},
|
||||
},
|
||||
presets: [
|
||||
[
|
||||
'@wordpress/babel-preset-default',
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -59,7 +59,7 @@
|
|||
"release": "sh ./bin/wordpress-deploy.sh",
|
||||
"start": "rimraf build/* && cross-env BABEL_ENV=default CHECK_CIRCULAR_DEPS=true webpack --watch --info-verbosity none",
|
||||
"storybook": "start-storybook -c ./storybook -p 6006 --ci",
|
||||
"storybook:build": "build-storybook -c ./storybook -o ./storybook/dist",
|
||||
"storybook:build": "BABEL_ENV=development build-storybook -c ./storybook -o ./storybook/dist",
|
||||
"storybook:deploy": "rimraf ./storybook/dist/* && npm run storybook:build && gh-pages -d ./storybook/dist",
|
||||
"test": "wp-scripts test-unit-js --config tests/js/jest.config.json",
|
||||
"test:e2e": "npm run wp-env:config && cross-env NODE_CONFIG_DIR=tests/e2e/config wp-scripts test-e2e --config tests/e2e/config/jest.config.js",
|
||||
|
|
@ -79,18 +79,18 @@
|
|||
"@automattic/data-stores": "2.0.1",
|
||||
"@babel/cli": "7.16.0",
|
||||
"@babel/core": "7.16.0",
|
||||
"@babel/plugin-proposal-class-properties": "7.16.0",
|
||||
"@babel/plugin-syntax-jsx": "^7.16.0",
|
||||
"@babel/polyfill": "7.12.1",
|
||||
"@babel/preset-typescript": "7.16.0",
|
||||
"@octokit/graphql": "4.8.0",
|
||||
"@storybook/addon-a11y": "6.3.12",
|
||||
"@storybook/addon-actions": "6.3.12",
|
||||
"@storybook/addon-docs": "6.3.12",
|
||||
"@storybook/addon-knobs": "6.4.0",
|
||||
"@storybook/addon-links": "6.3.12",
|
||||
"@storybook/addon-storysource": "6.3.12",
|
||||
"@storybook/addon-viewport": "6.3.12",
|
||||
"@storybook/addons": "6.3.12",
|
||||
"@storybook/react": "6.3.12",
|
||||
"@storybook/addon-a11y": "^6.4.0",
|
||||
"@storybook/addon-essentials": "^6.4.0",
|
||||
"@storybook/addon-knobs": "^6.3.1",
|
||||
"@storybook/addon-links": "^6.4.0",
|
||||
"@storybook/addon-storysource": "^6.4.0",
|
||||
"@storybook/addons": "^6.4.0",
|
||||
"@storybook/react": "^6.4.0",
|
||||
"@testing-library/jest-dom": "5.14.1",
|
||||
"@testing-library/react": "11.2.7",
|
||||
"@testing-library/react-hooks": "5.1.3",
|
||||
|
|
@ -133,6 +133,10 @@
|
|||
"@wordpress/scripts": "17.1.0",
|
||||
"autoprefixer": "10.3.7",
|
||||
"axios": "0.21.4",
|
||||
"babel-plugin-react-docgen": "^4.2.1",
|
||||
"babel-plugin-transform-async-generator-functions": "6.24.1",
|
||||
"babel-plugin-transform-object-rest-spread": "6.26.0",
|
||||
"babel-plugin-transform-react-jsx": "6.24.1",
|
||||
"babel-plugin-transform-react-remove-prop-types": "0.4.24",
|
||||
"chalk": "4.1.2",
|
||||
"circular-dependency-plugin": "5.2.2",
|
||||
|
|
@ -169,11 +173,13 @@
|
|||
"prettier": "npm:wp-prettier@2.0.5",
|
||||
"progress-bar-webpack-plugin": "2.1.0",
|
||||
"promptly": "3.2.0",
|
||||
"react-docgen": "^5.4.0",
|
||||
"react-test-renderer": "17.0.2",
|
||||
"request-promise": "4.2.6",
|
||||
"rimraf": "3.0.2",
|
||||
"sass-loader": "10.1.0",
|
||||
"source-map-explorer": "2.5.2",
|
||||
"storybook-addon-react-docgen": "^1.2.42",
|
||||
"terser-webpack-plugin": "3.0.3",
|
||||
"typescript": "4.1.3",
|
||||
"webpack": "4.44.2",
|
||||
|
|
|
|||
|
|
@ -1,18 +1,16 @@
|
|||
module.exports = {
|
||||
stories: [
|
||||
// WooCommerce Blocks stuff (anywhere in repo!)
|
||||
'../assets/js/**/stories/*.js',
|
||||
'../assets/js/**/stories/*.@(js|jsx|ts|tsx)',
|
||||
],
|
||||
addons: [
|
||||
{
|
||||
name: '@storybook/addon-docs',
|
||||
options: { configureJSX: true },
|
||||
},
|
||||
'@storybook/addon-knobs',
|
||||
'@storybook/addon-storysource',
|
||||
'@storybook/addon-viewport',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-a11y',
|
||||
'@storybook/addon-actions',
|
||||
'@storybook/addon-knobs',
|
||||
'@storybook/addon-links',
|
||||
'storybook-addon-react-docgen',
|
||||
],
|
||||
features: {
|
||||
babelModeV7: true,
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,3 +12,13 @@ import './style.scss';
|
|||
|
||||
addDecorator( withA11y );
|
||||
addDecorator( withKnobs );
|
||||
|
||||
export const parameters = {
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
},
|
||||
},
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue