From b65892089885ea37da7260f6351e2b5b67bd538c Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Tue, 29 Mar 2022 12:12:11 +0800 Subject: [PATCH 1/4] Fix storybook packages paths --- plugins/woocommerce-admin/storybook/.storybook/main.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/plugins/woocommerce-admin/storybook/.storybook/main.js b/plugins/woocommerce-admin/storybook/.storybook/main.js index 7167788b42b..5e613f04411 100644 --- a/plugins/woocommerce-admin/storybook/.storybook/main.js +++ b/plugins/woocommerce-admin/storybook/.storybook/main.js @@ -6,9 +6,9 @@ module.exports = { }, stories: [ // WooCommerce Admin / @woocommerce/components components - '../../packages/components/src/**/stories/*.@(js|tsx)', + '../../../../packages/js/components/src/**/stories/*.@(js|tsx)', // WooCommerce Admin / @woocommerce/experimental components - '../../packages/experimental/src/**/stories/*.@(js|tsx)', + '../../../../packages/js/experimental/src/**/stories/*.@(js|tsx)', '../../client/**/stories/*.js', ], addons: [ From 6f03e42dd1a13baeb58d0709e211850e807d7b44 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Tue, 29 Mar 2022 14:52:31 +0800 Subject: [PATCH 2/4] Add @babel/runtime to dev dependencies of js packages --- packages/js/components/package.json | 1 + packages/js/data/package.json | 1 + packages/js/navigation/package.json | 1 + packages/js/number/package.json | 1 + 4 files changed, 4 insertions(+) diff --git a/packages/js/components/package.json b/packages/js/components/package.json index e8369cdf545..b9ec712baa5 100644 --- a/packages/js/components/package.json +++ b/packages/js/components/package.json @@ -77,6 +77,7 @@ }, "devDependencies": { "@babel/core": "^7.17.5", + "@babel/runtime": "^7.17.2", "@storybook/addon-actions": "^6.4.0", "@storybook/addon-console": "^1.2.3", "@storybook/addon-controls": "^6.4.19", diff --git a/packages/js/data/package.json b/packages/js/data/package.json index afa56cc7d32..1308e6827d0 100644 --- a/packages/js/data/package.json +++ b/packages/js/data/package.json @@ -43,6 +43,7 @@ }, "devDependencies": { "@babel/core": "^7.17.5", + "@babel/runtime": "^7.17.2", "@testing-library/react": "^12.1.3", "@testing-library/react-hooks": "^7.0.2", "@types/wordpress__data-controls": "^2.2.0", diff --git a/packages/js/navigation/package.json b/packages/js/navigation/package.json index 29ab512ee9a..c4b578c2cc6 100644 --- a/packages/js/navigation/package.json +++ b/packages/js/navigation/package.json @@ -51,6 +51,7 @@ "@babel/core": "^7.17.5", "@wordpress/eslint-plugin": "^11.0.0", "eslint": "^8.12.0", + "@babel/runtime": "^7.17.2", "jest": "^27.5.1", "jest-cli": "^27.5.1", "rimraf": "^3.0.2", diff --git a/packages/js/number/package.json b/packages/js/number/package.json index 377779d3a2c..d7daf0f01d0 100644 --- a/packages/js/number/package.json +++ b/packages/js/number/package.json @@ -39,6 +39,7 @@ "@babel/core": "^7.17.5", "@wordpress/eslint-plugin": "^11.0.0", "eslint": "^8.12.0", + "@babel/runtime": "^7.17.2", "jest": "^27.5.1", "jest-cli": "^27.5.1", "rimraf": "^3.0.2", From 0cc5c6d51516fa12a8245f7045241fecb8200891 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Tue, 29 Mar 2022 14:56:42 +0800 Subject: [PATCH 3/4] Add expose-loader for storybook webpack config --- plugins/woocommerce-admin/package.json | 1 + pnpm-lock.yaml | 30 +++++++++++++++++++++----- 2 files changed, 26 insertions(+), 5 deletions(-) diff --git a/plugins/woocommerce-admin/package.json b/plugins/woocommerce-admin/package.json index e1be84b7b25..3ea08ccd1f5 100644 --- a/plugins/woocommerce-admin/package.json +++ b/plugins/woocommerce-admin/package.json @@ -235,6 +235,7 @@ "eslint-import-resolver-webpack": "^0.13.2", "eslint-plugin-import": "^2.25.4", "eslint-plugin-react": "^7.29.2", + "expose-loader": "^3.1.0", "fork-ts-checker-webpack-plugin": "^6.5.0", "fs-extra": "^8.1.0", "grunt": "^1.4.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d03a7c0c0e1..39401378126 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -141,6 +141,7 @@ importers: specifiers: '@automattic/interpolate-components': ^1.2.0 '@babel/core': ^7.17.5 + '@babel/runtime': ^7.17.2 '@storybook/addon-actions': ^6.4.0 '@storybook/addon-console': ^1.2.3 '@storybook/addon-controls': ^6.4.19 @@ -253,6 +254,7 @@ importers: react-transition-group: 4.4.2 devDependencies: '@babel/core': 7.17.8 + '@babel/runtime': 7.17.7 '@storybook/addon-actions': 6.4.19 '@storybook/addon-console': 1.2.3_@storybook+addon-actions@6.4.19 '@storybook/addon-controls': 6.4.19_ad5fc232a476648e022b673b2e1293fc @@ -408,6 +410,7 @@ importers: packages/js/data: specifiers: '@babel/core': ^7.17.5 + '@babel/runtime': ^7.17.2 '@testing-library/react': ^12.1.3 '@testing-library/react-hooks': ^7.0.2 '@types/wordpress__data-controls': ^2.2.0 @@ -453,6 +456,7 @@ importers: rememo: 4.0.0 devDependencies: '@babel/core': 7.17.8 + '@babel/runtime': 7.17.7 '@testing-library/react': 12.1.4 '@testing-library/react-hooks': 7.0.2 '@types/wordpress__data-controls': 2.2.0 @@ -852,6 +856,7 @@ importers: packages/js/navigation: specifiers: '@babel/core': ^7.17.5 + '@babel/runtime': ^7.17.2 '@wordpress/api-fetch': ^6.0.1 '@wordpress/components': ^19.5.0 '@wordpress/compose': ^5.1.2 @@ -882,6 +887,7 @@ importers: '@babel/core': 7.17.8 '@wordpress/eslint-plugin': 11.0.1_7c040a9b494a33cf8bf9079642892fb1 eslint: 8.12.0 + '@babel/runtime': 7.17.7 jest: 27.5.1 jest-cli: 27.5.1 rimraf: 3.0.2 @@ -920,6 +926,7 @@ importers: '@babel/core': ^7.17.5 '@wordpress/eslint-plugin': ^11.0.0 eslint: ^8.12.0 + '@babel/runtime': ^7.17.2 jest: ^27.5.1 jest-cli: ^27.5.1 locutus: ^2.0.16 @@ -932,6 +939,7 @@ importers: '@babel/core': 7.17.8 '@wordpress/eslint-plugin': 11.0.1_7c040a9b494a33cf8bf9079642892fb1 eslint: 8.12.0 + '@babel/runtime': 7.17.7 jest: 27.5.1 jest-cli: 27.5.1 rimraf: 3.0.2 @@ -1268,6 +1276,7 @@ importers: eslint-import-resolver-webpack: ^0.13.2 eslint-plugin-import: ^2.25.4 eslint-plugin-react: ^7.29.2 + expose-loader: ^3.1.0 fork-ts-checker-webpack-plugin: ^6.5.0 fs-extra: ^8.1.0 github-label-sync: ^2.0.2 @@ -1471,6 +1480,7 @@ importers: eslint-import-resolver-webpack: 0.13.2_bac363bc2c2f46a65300020741b6cf5e eslint-plugin-import: 2.25.4_eslint@8.11.0 eslint-plugin-react: 7.29.4_eslint@8.11.0 + expose-loader: 3.1.0_webpack@5.70.0 fork-ts-checker-webpack-plugin: 6.5.0_10568ae13669cc833891d65cd6879aa0 fs-extra: 8.1.0 grunt: 1.4.1 @@ -2488,9 +2498,9 @@ packages: engines: {node: '>=6.9.0'} dependencies: '@babel/helper-function-name': 7.16.0 - '@babel/template': 7.16.0 - '@babel/traverse': 7.16.3 - '@babel/types': 7.16.0 + '@babel/template': 7.16.7 + '@babel/traverse': 7.17.3 + '@babel/types': 7.17.0 transitivePeerDependencies: - supports-color @@ -22074,6 +22084,15 @@ packages: jest-message-util: 27.5.1 dev: true + /expose-loader/3.1.0_webpack@5.70.0: + resolution: {integrity: sha512-2RExSo0yJiqP+xiUue13jQa2IHE8kLDzTI7b6kn+vUlBVvlzNSiLDzo4e5Pp5J039usvTUnxZ8sUOhv0Kg15NA==} + engines: {node: '>= 12.13.0'} + peerDependencies: + webpack: ^5.0.0 + dependencies: + webpack: 5.70.0_webpack-cli@4.9.2 + dev: true + /express/4.17.1: resolution: {integrity: sha512-mHJ9O79RqluphRrcw2X/GTh3k9tVv8YcoyY4Kkh4WDMUYKRZUq0h1o0w2rrrxBqM7VoeUVqgb27xlEMXTnYt4g==} engines: {node: '>= 0.10.0'} @@ -34066,7 +34085,7 @@ packages: resolution: {integrity: sha512-1JU/8q+VgFZyxwrJ+SVIOsh+KywWGpds3NTqikiKpDMZWScmAYyKIgqkO+ARvNWJfXeXR1zxz7aHF4u4CyH6vQ==} engines: {node: '>=0.10'} dependencies: - graceful-fs: 4.2.8 + graceful-fs: 4.2.9 micromatch: 3.1.10 readable-stream: 2.3.7 dev: true @@ -36933,7 +36952,7 @@ packages: serialize-javascript: 6.0.0 source-map: 0.6.1 terser: 5.10.0_acorn@8.7.0 - webpack: 5.70.0_webpack-cli@3.3.12 + webpack: 5.70.0 transitivePeerDependencies: - acorn dev: true @@ -37760,6 +37779,7 @@ packages: resolution: {integrity: sha512-qZukoSxOG0urUTvjc2ERMTcAy+BiFh3weWAkeurLwjrCba73poHmG3E36XEjd/JGukMzwTL7uCxZiAexj8ppvQ==} engines: {node: '>=0.8.0'} hasBin: true + requiresBuild: true dev: true /unbox-primitive/1.0.1: From 386d1731051390f59b317c4c973397e5399915f3 Mon Sep 17 00:00:00 2001 From: Chi-Hsuan Huang Date: Tue, 29 Mar 2022 14:57:04 +0800 Subject: [PATCH 4/4] Update storybook webpack config to build stories --- .../storybook/webpack.config.js | 31 ++++++++++++++++--- 1 file changed, 27 insertions(+), 4 deletions(-) diff --git a/plugins/woocommerce-admin/storybook/webpack.config.js b/plugins/woocommerce-admin/storybook/webpack.config.js index 1dedd724879..dfb3dc58ca9 100644 --- a/plugins/woocommerce-admin/storybook/webpack.config.js +++ b/plugins/woocommerce-admin/storybook/webpack.config.js @@ -22,14 +22,32 @@ const wcAdminPackages = [ ]; module.exports = ( storybookConfig ) => { - storybookConfig.module.rules.push( ...wcAdminWebpackConfig.module.rules ); + storybookConfig.module.rules = [ + ...storybookConfig.module.rules, + ...wcAdminWebpackConfig.module.rules, + // We need to expose packages in "peerDependencies" to the global scope for @woocommerce/* to resolve packages. + { + test: require.resolve( 'moment' ), + loader: 'expose-loader', + options: { + exposes: [ 'moment' ], + }, + }, + { + test: require.resolve( '@wordpress/data' ), + loader: 'expose-loader', + options: { + exposes: [ '_wp_data' ], + }, + }, + ]; storybookConfig.resolve.alias = wcAdminWebpackConfig.resolve.alias; wcAdminPackages.forEach( ( name ) => { storybookConfig.resolve.alias[ `@woocommerce/${ name }` - ] = path.resolve( __dirname, `../packages/${ name }/src` ); + ] = path.resolve( __dirname, `../../../packages/js/${ name }/src` ); } ); storybookConfig.resolve.alias[ '@woocommerce/settings' ] = path.resolve( @@ -53,14 +71,14 @@ module.exports = ( storybookConfig ) => { { from: path.resolve( __dirname, - `../packages/components/build-style/*.css` + `../../../packages/js/components/build-style/*.css` ), to: `./component-css/[name][ext]`, }, { from: path.resolve( __dirname, - `../packages/experimental/build-style/*.css` + `../../../packages/js/experimental/build-style/*.css` ), to: `./experimental-css/[name][ext]`, }, @@ -68,5 +86,10 @@ module.exports = ( storybookConfig ) => { } ) ); + storybookConfig.externals = { + '@wordpress/data': '_wp_data', + moment: 'moment', + }; + return storybookConfig; };