diff --git a/.storybook/main.js b/.storybook/main.js index 7416fc8b9e..5efaab619b 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -1,14 +1,30 @@ const path = require('path'); +const modulesDir = path.join( __dirname, '../node_modules' ); +console.log('NODE', modulesDir); +// Workaround for Emotion 11 +// https://github.com/storybookjs/storybook/pull/13300#issuecomment-783268111 +const updateEmotionAliases = (config) => ({ + ...config, + resolve: { + ...config.resolve, + alias: { + ...config.resolve.alias, + '@emotion/core': path.join(modulesDir, '@emotion/react'), + '@emotion/styled': path.join(modulesDir, '@emotion/styled'), + '@emotion/styled-base': path.join(modulesDir, '@emotion/styled'), + 'emotion-theming': path.join(modulesDir, '@emotion/react'), + }, + }, +}); + module.exports = { stories: ['../assets/js/src/**/_stories/*.tsx'], - webpackFinal: (config) => ({ - ...config, - resolve: { - ...config.resolve, - modules: ['node_modules', '../assets/js/src'], - }, - }), + webpackFinal: (config) => { + config.resolve.modules = ['node_modules', '../assets/js/src']; + return updateEmotionAliases(config); + }, + managerWebpack: updateEmotionAliases, addons: [ '@storybook/addon-actions', '@storybook/addon-links', diff --git a/package-lock.json b/package-lock.json index 06fcf54bcc..1a507d97ef 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,8 @@ "dependencies": { "@babel/runtime": "^7.14.0", "@babel/runtime-corejs3": "^7.14.0", + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", "@wordpress/api-fetch": "^5.2.1", "@wordpress/block-editor": "^7.0.1", "@wordpress/block-library": "^5.0.1", @@ -2533,23 +2535,34 @@ "dev": true }, "node_modules/@emotion/styled": { - "version": "10.0.27", - "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz", - "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==", - "dev": true, + "version": "11.3.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz", + "integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==", "dependencies": { - "@emotion/styled-base": "^10.0.27", - "babel-plugin-emotion": "^10.0.27" + "@babel/runtime": "^7.13.10", + "@emotion/babel-plugin": "^11.3.0", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/serialize": "^1.0.2", + "@emotion/utils": "^1.0.0" }, "peerDependencies": { - "@emotion/core": "^10.0.27", - "react": ">=16.3.0" + "@babel/core": "^7.0.0", + "@emotion/react": "^11.0.0-rc.0", + "react": ">=16.8.0" + }, + "peerDependenciesMeta": { + "@babel/core": { + "optional": true + }, + "@types/react": { + "optional": true + } } }, "node_modules/@emotion/styled-base": { - "version": "10.0.30", - "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.30.tgz", - "integrity": "sha512-pjAZxjnDzLQ5F0Wv3DgTLvg8pw4bMSABP9GHDdCaDjZak/8Il5mQRLs15h9AKC95E8QG1NEr11GfHO1SGYV5ZA==", + "version": "10.0.31", + "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.31.tgz", + "integrity": "sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==", "dev": true, "dependencies": { "@babel/runtime": "^7.5.5", @@ -2562,6 +2575,36 @@ "react": ">=16.3.0" } }, + "node_modules/@emotion/styled/node_modules/@emotion/is-prop-valid": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz", + "integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==", + "dependencies": { + "@emotion/memoize": "^0.7.4" + } + }, + "node_modules/@emotion/styled/node_modules/@emotion/serialize": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz", + "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==", + "dependencies": { + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.4", + "@emotion/unitless": "^0.7.5", + "@emotion/utils": "^1.0.0", + "csstype": "^3.0.2" + } + }, + "node_modules/@emotion/styled/node_modules/@emotion/utils": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz", + "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==" + }, + "node_modules/@emotion/styled/node_modules/csstype": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", + "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" + }, "node_modules/@emotion/stylis": { "version": "0.8.5", "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz", @@ -6188,6 +6231,20 @@ "react-dom": "^16.8.0 || ^17.0.0" } }, + "node_modules/@storybook/theming/node_modules/@emotion/styled": { + "version": "10.0.27", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz", + "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==", + "dev": true, + "dependencies": { + "@emotion/styled-base": "^10.0.27", + "babel-plugin-emotion": "^10.0.27" + }, + "peerDependencies": { + "@emotion/core": "^10.0.27", + "react": ">=16.3.0" + } + }, "node_modules/@storybook/theming/node_modules/resolve-from": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", @@ -7845,14 +7902,6 @@ } } }, - "node_modules/@wordpress/components/node_modules/@emotion/is-prop-valid": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz", - "integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==", - "dependencies": { - "@emotion/memoize": "^0.7.4" - } - }, "node_modules/@wordpress/components/node_modules/@emotion/serialize": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz", @@ -7870,31 +7919,6 @@ "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.2.tgz", "integrity": "sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw==" }, - "node_modules/@wordpress/components/node_modules/@emotion/styled": { - "version": "11.3.0", - "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz", - "integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==", - "dependencies": { - "@babel/runtime": "^7.13.10", - "@emotion/babel-plugin": "^11.3.0", - "@emotion/is-prop-valid": "^1.1.0", - "@emotion/serialize": "^1.0.2", - "@emotion/utils": "^1.0.0" - }, - "peerDependencies": { - "@babel/core": "^7.0.0", - "@emotion/react": "^11.0.0-rc.0", - "react": ">=16.8.0" - }, - "peerDependenciesMeta": { - "@babel/core": { - "optional": true - }, - "@types/react": { - "optional": true - } - } - }, "node_modules/@wordpress/components/node_modules/@emotion/utils": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz", @@ -33651,19 +33675,53 @@ "dev": true }, "@emotion/styled": { - "version": "10.0.27", - "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz", - "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==", - "dev": true, + "version": "11.3.0", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz", + "integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==", "requires": { - "@emotion/styled-base": "^10.0.27", - "babel-plugin-emotion": "^10.0.27" + "@babel/runtime": "^7.13.10", + "@emotion/babel-plugin": "^11.3.0", + "@emotion/is-prop-valid": "^1.1.0", + "@emotion/serialize": "^1.0.2", + "@emotion/utils": "^1.0.0" + }, + "dependencies": { + "@emotion/is-prop-valid": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz", + "integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==", + "requires": { + "@emotion/memoize": "^0.7.4" + } + }, + "@emotion/serialize": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz", + "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==", + "requires": { + "@emotion/hash": "^0.8.0", + "@emotion/memoize": "^0.7.4", + "@emotion/unitless": "^0.7.5", + "@emotion/utils": "^1.0.0", + "csstype": "^3.0.2" + } + }, + "@emotion/utils": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz", + "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==" + }, + "csstype": { + "version": "3.0.8", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz", + "integrity": "sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==" + } } }, "@emotion/styled-base": { - "version": "10.0.30", - "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.30.tgz", - "integrity": "sha512-pjAZxjnDzLQ5F0Wv3DgTLvg8pw4bMSABP9GHDdCaDjZak/8Il5mQRLs15h9AKC95E8QG1NEr11GfHO1SGYV5ZA==", + "version": "10.0.31", + "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.31.tgz", + "integrity": "sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==", "dev": true, "requires": { "@babel/runtime": "^7.5.5", @@ -36338,6 +36396,16 @@ "ts-dedent": "^2.0.0" }, "dependencies": { + "@emotion/styled": { + "version": "10.0.27", + "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz", + "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==", + "dev": true, + "requires": { + "@emotion/styled-base": "^10.0.27", + "babel-plugin-emotion": "^10.0.27" + } + }, "resolve-from": { "version": "5.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-5.0.0.tgz", @@ -37725,14 +37793,6 @@ "@emotion/utils": "^1.0.0" } }, - "@emotion/is-prop-valid": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz", - "integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==", - "requires": { - "@emotion/memoize": "^0.7.4" - } - }, "@emotion/serialize": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz", @@ -37750,18 +37810,6 @@ "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.2.tgz", "integrity": "sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw==" }, - "@emotion/styled": { - "version": "11.3.0", - "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz", - "integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==", - "requires": { - "@babel/runtime": "^7.13.10", - "@emotion/babel-plugin": "^11.3.0", - "@emotion/is-prop-valid": "^1.1.0", - "@emotion/serialize": "^1.0.2", - "@emotion/utils": "^1.0.0" - } - }, "@emotion/utils": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz", diff --git a/package.json b/package.json index fe627afa30..6e42d37cc0 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,8 @@ "dependencies": { "@babel/runtime": "^7.14.0", "@babel/runtime-corejs3": "^7.14.0", + "@emotion/react": "^11.4.1", + "@emotion/styled": "^11.3.0", "@wordpress/api-fetch": "^5.2.1", "@wordpress/block-editor": "^7.0.1", "@wordpress/block-library": "^5.0.1",