From 50b17313f971fcbac04c3e55dba0b736b0a0187f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Sun, 6 Mar 2022 22:07:16 +0100 Subject: [PATCH 01/10] Update Emotion deps --- .babelrc.js | 6 +- addons/docs/package.json | 4 +- .../storyshots/storyshots-core/package.json | 2 +- .../stories/storyshot.enzyme.test.js | 2 +- .../framework-preset-angular-cli.test.ts | 3 - examples/official-storybook/package.json | 2 +- jest.config.js | 6 +- .../src/blocks/DocsPage.stories.tsx | 2 +- .../vue-3-cli_preview-dev-windows | 3 - .../vue-3-cli_preview-prod-windows | 3 - lib/theming/package.json | 7 +- lib/theming/src/animation.ts | 2 +- lib/theming/src/index.ts | 22 +- package.json | 5 +- yarn.lock | 234 ++++++++++++++---- 15 files changed, 221 insertions(+), 82 deletions(-) diff --git a/.babelrc.js b/.babelrc.js index 5af9a9046c5d..b00deb2d4c20 100644 --- a/.babelrc.js +++ b/.babelrc.js @@ -55,7 +55,7 @@ module.exports = { '@babel/plugin-syntax-dynamic-import', ['@babel/plugin-proposal-object-rest-spread', { loose: true, useBuiltIns: true }], 'babel-plugin-macros', - ['emotion', { sourceMap: true, autoLabel: true }], + ['@emotion', { sourceMap: true, autoLabel: 'always' }], ], env: { test: withTests, @@ -90,7 +90,7 @@ module.exports = { ['@babel/plugin-proposal-private-property-in-object', { loose: true }], ['@babel/plugin-proposal-class-properties', { loose: true }], 'babel-plugin-macros', - ['emotion', { sourceMap: true, autoLabel: true }], + ['@emotion', { sourceMap: true, autoLabel: 'always' }], 'babel-plugin-add-react-displayname', ], env: { @@ -125,7 +125,7 @@ module.exports = { ], ], plugins: [ - 'emotion', + '@emotion', 'babel-plugin-macros', '@babel/plugin-transform-arrow-functions', '@babel/plugin-transform-shorthand-properties', diff --git a/addons/docs/package.json b/addons/docs/package.json index de54b7ea33c6..54a43ba571e1 100644 --- a/addons/docs/package.json +++ b/addons/docs/package.json @@ -103,8 +103,8 @@ "devDependencies": { "@angular/core": "^11.2.14", "@babel/core": "^7.12.10", - "@emotion/core": "^10.3.1", - "@emotion/styled": "^10.0.27", + "@emotion/react": "^11.8.1", + "@emotion/styled": "^11.8.1", "@storybook/angular": "6.5.0-alpha.46", "@storybook/html": "6.5.0-alpha.46", "@storybook/mdx2-csf": "canary", diff --git a/addons/storyshots/storyshots-core/package.json b/addons/storyshots/storyshots-core/package.json index a2287de53e1f..05f348f812b6 100644 --- a/addons/storyshots/storyshots-core/package.json +++ b/addons/storyshots/storyshots-core/package.json @@ -69,6 +69,7 @@ "devDependencies": { "@angular/core": "^11.2.0", "@angular/platform-browser-dynamic": "^11.2.0", + "@emotion/jest": "^11.8.0", "@storybook/addon-docs": "6.5.0-alpha.46", "@storybook/angular": "6.5.0-alpha.46", "@storybook/react": "6.5.0-alpha.46", @@ -77,7 +78,6 @@ "babel-loader": "^8.0.0", "enzyme": "^3.11.0", "enzyme-to-json": "^3.6.1", - "jest-emotion": "^10.0.32", "jest-preset-angular": "^8.3.2", "jest-vue-preprocessor": "^1.7.1", "rxjs": "^6.6.3", diff --git a/addons/storyshots/storyshots-core/stories/storyshot.enzyme.test.js b/addons/storyshots/storyshots-core/stories/storyshot.enzyme.test.js index ef3fb2f198cb..549d51dbda52 100644 --- a/addons/storyshots/storyshots-core/stories/storyshot.enzyme.test.js +++ b/addons/storyshots/storyshots-core/stories/storyshot.enzyme.test.js @@ -1,7 +1,7 @@ import path from 'path'; import { mount } from 'enzyme'; import { createSerializer as enzymeSerializer } from 'enzyme-to-json'; -import { createSerializer as emotionSerializer } from 'jest-emotion'; +import { createSerializer as emotionSerializer } from '@emotion/jest'; import initStoryshots from '../dist/ts3.9'; initStoryshots({ diff --git a/app/angular/src/server/framework-preset-angular-cli.test.ts b/app/angular/src/server/framework-preset-angular-cli.test.ts index a6c1853e6f2f..c96eebb307ae 100644 --- a/app/angular/src/server/framework-preset-angular-cli.test.ts +++ b/app/angular/src/server/framework-preset-angular-cli.test.ts @@ -797,9 +797,6 @@ const newWebpackConfiguration = ( modules: ['node_modules'], mainFields: ['browser', 'main'], alias: { - '@emotion/core': '/Users/joe/storybook/node_modules/@emotion/core', - '@emotion/styled': '/Users/joe/storybook/node_modules/@emotion/styled', - 'emotion-theming': '/Users/joe/storybook/node_modules/emotion-theming', '@storybook/addons': '/Users/joe/storybook/lib/addons', '@storybook/api': '/Users/joe/storybook/lib/api', '@storybook/channels': '/Users/joe/storybook/lib/channels', diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json index 69bd0a8e331a..e8a88096dca3 100644 --- a/examples/official-storybook/package.json +++ b/examples/official-storybook/package.json @@ -12,6 +12,7 @@ "storyshots-puppeteer": "yarn run build-storybook && yarn run do-storyshots-puppeteer" }, "devDependencies": { + "@emotion/jest": "^11.8.0", "@packtracker/webpack-plugin": "^2.3.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.3", "@storybook/addon-a11y": "6.5.0-alpha.46", @@ -49,7 +50,6 @@ "express": "^4.17.1", "format-json": "^1.0.3", "global": "^4.4.0", - "jest-emotion": "^10.0.32", "lodash": "^4.17.21", "paths.macro": "^3.0.1", "prop-types": "^15.7.2", diff --git a/jest.config.js b/jest.config.js index b0ddc913094d..84a2cd957af5 100644 --- a/jest.config.js +++ b/jest.config.js @@ -85,7 +85,11 @@ module.exports = { PREVIEW_URL: undefined, SNAPSHOT_OS: os.platform() === 'win32' ? 'windows' : 'posix', }, - snapshotSerializers: ['jest-emotion', 'enzyme-to-json/serializer', 'jest-serializer-html'], + snapshotSerializers: [ + '@emotion/jest/serializer', + 'enzyme-to-json/serializer', + 'jest-serializer-html', + ], coverageDirectory: 'coverage', setupFilesAfterEnv: ['./scripts/jest.init.ts'], coverageReporters: ['lcov'], diff --git a/lib/components/src/blocks/DocsPage.stories.tsx b/lib/components/src/blocks/DocsPage.stories.tsx index efbd4030a1b9..499a13fe6cb2 100644 --- a/lib/components/src/blocks/DocsPage.stories.tsx +++ b/lib/components/src/blocks/DocsPage.stories.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Global, css } from '@emotion/core'; +import { Global, css } from '@emotion/react'; import { Title, Subtitle, DocsPageWrapper } from './DocsPage'; import { ArgsTable, Source, Description } from './index'; diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-windows b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-windows index a9553da08453..11110ca9cd1d 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-windows +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-dev-windows @@ -466,8 +466,6 @@ Object { "options": Object { "docgenOptions": Object { "alias": Object { - "@emotion/core": "NODE_MODULES\\\\@emotion\\\\core", - "@emotion/styled": "NODE_MODULES\\\\@emotion\\\\styled", "@storybook/addons": "ROOT\\\\lib\\\\addons", "@storybook/api": "ROOT\\\\lib\\\\api", "@storybook/channel-postmessage": "ROOT\\\\lib\\\\channel-postmessage", @@ -481,7 +479,6 @@ Object { "@storybook/semver": "NODE_MODULES\\\\@storybook\\\\semver", "@storybook/store": "ROOT\\\\lib\\\\store", "@storybook/theming": "ROOT\\\\lib\\\\theming", - "emotion-theming": "NODE_MODULES\\\\emotion-theming", "react": "NODE_MODULES\\\\react", "react-dom": "NODE_MODULES\\\\react-dom", "vue$": "NODE_MODULES\\\\vue\\\\dist\\\\vue.esm-bundler.js", diff --git a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-windows b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-windows index 7dccbcf7871c..4b68a8843b48 100644 --- a/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-windows +++ b/lib/core-server/src/__snapshots__/vue-3-cli_preview-prod-windows @@ -465,8 +465,6 @@ Object { "options": Object { "docgenOptions": Object { "alias": Object { - "@emotion/core": "NODE_MODULES\\\\@emotion\\\\core", - "@emotion/styled": "NODE_MODULES\\\\@emotion\\\\styled", "@storybook/addons": "ROOT\\\\lib\\\\addons", "@storybook/api": "ROOT\\\\lib\\\\api", "@storybook/channel-postmessage": "ROOT\\\\lib\\\\channel-postmessage", @@ -480,7 +478,6 @@ Object { "@storybook/semver": "NODE_MODULES\\\\@storybook\\\\semver", "@storybook/store": "ROOT\\\\lib\\\\store", "@storybook/theming": "ROOT\\\\lib\\\\theming", - "emotion-theming": "NODE_MODULES\\\\emotion-theming", "react": "NODE_MODULES\\\\react", "react-dom": "NODE_MODULES\\\\react-dom", "vue$": "NODE_MODULES\\\\vue\\\\dist\\\\vue.esm-bundler.js", diff --git a/lib/theming/package.json b/lib/theming/package.json index 74fbd538e5dc..9885b2faf210 100644 --- a/lib/theming/package.json +++ b/lib/theming/package.json @@ -45,12 +45,11 @@ "regenerator-runtime": "^0.13.7" }, "devDependencies": { - "@emotion/core": "^10.3.1", - "@emotion/is-prop-valid": "^0.8.6", - "@emotion/styled": "^10.0.27", + "@emotion/is-prop-valid": "^1.1.2", + "@emotion/react": "^11.8.1", + "@emotion/styled": "^11.8.1", "@types/node": "^14.14.20 || ^16.0.0", "deep-object-diff": "^1.1.0", - "emotion-theming": "^10.0.27", "global": "^4.4.0", "memoizerific": "^1.11.3", "polished": "^4.0.5", diff --git a/lib/theming/src/animation.ts b/lib/theming/src/animation.ts index 800d274d26db..1eca9ab084ad 100644 --- a/lib/theming/src/animation.ts +++ b/lib/theming/src/animation.ts @@ -1,4 +1,4 @@ -import { css, keyframes, Keyframes, SerializedStyles } from '@emotion/core'; +import { css, keyframes, Keyframes, SerializedStyles } from '@emotion/react'; export const easing = { rubber: 'cubic-bezier(0.175, 0.885, 0.335, 1.05)', diff --git a/lib/theming/src/index.ts b/lib/theming/src/index.ts index 02a23b7dc204..8a94d2cacde2 100644 --- a/lib/theming/src/index.ts +++ b/lib/theming/src/index.ts @@ -1,20 +1,26 @@ // eslint-disable-next-line @typescript-eslint/triple-slash-reference /// -import emotionStyled, { CreateStyled } from '@emotion/styled'; - -import { Theme } from './types'; +import emotionStyled from '@emotion/styled'; export type { StyledComponent } from '@emotion/styled'; -export { Global, keyframes, css, jsx, ClassNames } from '@emotion/core'; -export type { CSSObject, Keyframes } from '@emotion/core'; - -export const styled = emotionStyled as CreateStyled; +export { + Global, + keyframes, + css, + jsx, + ClassNames, + withTheme, + useTheme, + ThemeProvider, +} from '@emotion/react'; +export type { CSSObject, Keyframes } from '@emotion/react'; + +export const styled = emotionStyled; export * from './base'; export * from './types'; -export { withTheme, useTheme, ThemeProvider } from 'emotion-theming'; export { default as isPropValid } from '@emotion/is-prop-valid'; export { createGlobal, createReset } from './global'; diff --git a/package.json b/package.json index e380ab75c328..f6d630684f85 100644 --- a/package.json +++ b/package.json @@ -120,7 +120,8 @@ "@babel/preset-typescript": "^7.16.7", "@babel/runtime": "^7.17.2", "@compodoc/compodoc": "^1.1.18", - "@emotion/snapshot-serializer": "^0.8.2", + "@emotion/babel-plugin": "^11.7.2", + "@emotion/jest": "^11.8.0", "@linear/sdk": "^1.21.0", "@nicolo-ribaudo/chokidar-2": "^2.1.8", "@nrwl/cli": "12.3.4", @@ -215,7 +216,6 @@ "babel-loader": "^8.0.0", "babel-plugin-add-react-displayname": "^0.0.5", "babel-plugin-dynamic-import-node": "^2.3.3", - "babel-plugin-emotion": "^10.0.33", "babel-plugin-macros": "^3.0.1", "chalk": "^4.1.0", "chromatic": "^6.0.2", @@ -245,7 +245,6 @@ "http-server": "^0.12.3", "husky": "^4.3.7", "jest": "^26.6.3", - "jest-emotion": "^10.0.32", "jest-environment-jsdom": "^26.6.2", "jest-environment-jsdom-thirteen": "^1.0.1", "jest-enzyme": "^7.1.2", diff --git a/yarn.lock b/yarn.lock index 0f7928488f7f..88525043652d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1375,7 +1375,7 @@ __metadata: languageName: node linkType: hard -"@babel/plugin-syntax-jsx@npm:^7.0.0, @babel/plugin-syntax-jsx@npm:^7.16.7, @babel/plugin-syntax-jsx@npm:^7.2.0, @babel/plugin-syntax-jsx@npm:^7.8.3": +"@babel/plugin-syntax-jsx@npm:^7.0.0, @babel/plugin-syntax-jsx@npm:^7.12.13, @babel/plugin-syntax-jsx@npm:^7.16.7, @babel/plugin-syntax-jsx@npm:^7.2.0, @babel/plugin-syntax-jsx@npm:^7.8.3": version: 7.16.7 resolution: "@babel/plugin-syntax-jsx@npm:7.16.7" dependencies: @@ -2449,7 +2449,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.0, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.3.4, @babel/runtime@npm:^7.4.5, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2": +"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.0, @babel/runtime@npm:^7.12.0, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.14.8, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.17.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.3.4, @babel/runtime@npm:^7.4.5, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.9.2": version: 7.17.2 resolution: "@babel/runtime@npm:7.17.2" dependencies: @@ -2794,6 +2794,28 @@ __metadata: languageName: node linkType: hard +"@emotion/babel-plugin@npm:^11.7.1, @emotion/babel-plugin@npm:^11.7.2": + version: 11.7.2 + resolution: "@emotion/babel-plugin@npm:11.7.2" + dependencies: + "@babel/helper-module-imports": ^7.12.13 + "@babel/plugin-syntax-jsx": ^7.12.13 + "@babel/runtime": ^7.13.10 + "@emotion/hash": ^0.8.0 + "@emotion/memoize": ^0.7.5 + "@emotion/serialize": ^1.0.2 + babel-plugin-macros: ^2.6.1 + convert-source-map: ^1.5.0 + escape-string-regexp: ^4.0.0 + find-root: ^1.1.0 + source-map: ^0.5.7 + stylis: 4.0.13 + peerDependencies: + "@babel/core": ^7.0.0 + checksum: b22354b2880006144f32b0e753d7c1c969b9da03b769bed84b11d415f11fe75568f378c8aff67121896f9eab5cd41318b5b09d3bd7cfbc1b7f3a71172948c161 + languageName: node + linkType: hard + "@emotion/cache@npm:^10.0.27": version: 10.0.29 resolution: "@emotion/cache@npm:10.0.29" @@ -2806,7 +2828,20 @@ __metadata: languageName: node linkType: hard -"@emotion/core@npm:^10.1.1, @emotion/core@npm:^10.3.1": +"@emotion/cache@npm:^11.7.1": + version: 11.7.1 + resolution: "@emotion/cache@npm:11.7.1" + dependencies: + "@emotion/memoize": ^0.7.4 + "@emotion/sheet": ^1.1.0 + "@emotion/utils": ^1.0.0 + "@emotion/weak-memoize": ^0.2.5 + stylis: 4.0.13 + checksum: d7bf7827e683ba773a503fc9718effc66b1a0a069bd1c16546da178bc0e72e49706d66459e8d3ef13370f4a82e3078b9cf21991ceef6aecc1095e0afdfd737c6 + languageName: node + linkType: hard + +"@emotion/core@npm:^10.1.1": version: 10.3.1 resolution: "@emotion/core@npm:10.3.1" dependencies: @@ -2822,6 +2857,16 @@ __metadata: languageName: node linkType: hard +"@emotion/css-prettifier@npm:^1.0.1": + version: 1.0.1 + resolution: "@emotion/css-prettifier@npm:1.0.1" + dependencies: + "@emotion/memoize": ^0.7.4 + stylis: 4.0.13 + checksum: bb5490433ede97e344ec7b374308cbb793d271d9044565bb735e1adf8ad28e2376e837bb020d7d58772ffeaee3360bced225c8bbc92f8c64b5b91bc9a56490c4 + languageName: node + linkType: hard + "@emotion/css@npm:^10.0.27": version: 10.0.27 resolution: "@emotion/css@npm:10.0.27" @@ -2833,7 +2878,7 @@ __metadata: languageName: node linkType: hard -"@emotion/hash@npm:0.8.0": +"@emotion/hash@npm:0.8.0, @emotion/hash@npm:^0.8.0": version: 0.8.0 resolution: "@emotion/hash@npm:0.8.0" checksum: 706303d35d416217cd7eb0d36dbda4627bb8bdf4a32ea387e8dd99be11b8e0a998e10af21216e8a5fade518ad955ff06aa8890f20e694ce3a038ae7fc1000556 @@ -2849,6 +2894,36 @@ __metadata: languageName: node linkType: hard +"@emotion/is-prop-valid@npm:^1.1.2": + version: 1.1.2 + resolution: "@emotion/is-prop-valid@npm:1.1.2" + dependencies: + "@emotion/memoize": ^0.7.4 + checksum: 3e658290a9ece7f6149b84e13144e414d5d0535773f78dd15ffabb28ea4aa37346afbf9be178289ecb2a39ec49890a0199da1b86388393de7644f80598a12da6 + languageName: node + linkType: hard + +"@emotion/jest@npm:^11.8.0": + version: 11.8.0 + resolution: "@emotion/jest@npm:11.8.0" + dependencies: + "@babel/runtime": ^7.13.10 + "@emotion/css-prettifier": ^1.0.1 + chalk: ^4.1.0 + specificity: ^0.4.1 + stylis: 4.0.13 + peerDependencies: + "@types/jest": ^26.0.14 || ^27.0.0 + enzyme-to-json: ^3.2.1 + peerDependenciesMeta: + "@types/jest": + optional: true + enzyme-to-json: + optional: true + checksum: 7d4190c86ce3ebe430f50b12ad3a699ceef848038754067475d00a1d6ef0cddd340b05edde60d20db85305b02ad07f931e4230644efbafafe34e2f83405463cb + languageName: node + linkType: hard + "@emotion/memoize@npm:0.7.4": version: 0.7.4 resolution: "@emotion/memoize@npm:0.7.4" @@ -2856,6 +2931,37 @@ __metadata: languageName: node linkType: hard +"@emotion/memoize@npm:^0.7.4, @emotion/memoize@npm:^0.7.5": + version: 0.7.5 + resolution: "@emotion/memoize@npm:0.7.5" + checksum: 28d061ec9fb9b8c495d58b4e2dcc62207d75d4e8d8f4e6a0b42342d6e7c649d41461e807363d1a0a2c33d2235f6ee59dd6394fbec88b7da65e3d5852fc34387e + languageName: node + linkType: hard + +"@emotion/react@npm:^11.8.1": + version: 11.8.1 + resolution: "@emotion/react@npm:11.8.1" + dependencies: + "@babel/runtime": ^7.13.10 + "@emotion/babel-plugin": ^11.7.1 + "@emotion/cache": ^11.7.1 + "@emotion/serialize": ^1.0.2 + "@emotion/sheet": ^1.1.0 + "@emotion/utils": ^1.1.0 + "@emotion/weak-memoize": ^0.2.5 + hoist-non-react-statics: ^3.3.1 + peerDependencies: + "@babel/core": ^7.0.0 + react: ">=16.8.0" + peerDependenciesMeta: + "@babel/core": + optional: true + "@types/react": + optional: true + checksum: aa85bfae3ac14bb6e6f48de7f48d0daa449b83be0907f6e3df1fd22dfd6c9405d0ff39dbf508351b6b48020fe7e311e8ac4addc475f1a66373c71178d2013174 + languageName: node + linkType: hard + "@emotion/serialize@npm:^0.11.15, @emotion/serialize@npm:^0.11.16": version: 0.11.16 resolution: "@emotion/serialize@npm:0.11.16" @@ -2869,6 +2975,19 @@ __metadata: languageName: node linkType: hard +"@emotion/serialize@npm:^1.0.2": + version: 1.0.2 + resolution: "@emotion/serialize@npm:1.0.2" + 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 + checksum: b29dbf33c1801d2aa039d355fa87bb921a8dd4dcecd9ef8cea0c1d7796d39ea137c913824b3173c7d3acd65ff2bb8bc6912095690a266c79696f5528c1a1c509 + languageName: node + linkType: hard + "@emotion/sheet@npm:0.9.4": version: 0.9.4 resolution: "@emotion/sheet@npm:0.9.4" @@ -2876,13 +2995,10 @@ __metadata: languageName: node linkType: hard -"@emotion/snapshot-serializer@npm:^0.8.2": - version: 0.8.2 - resolution: "@emotion/snapshot-serializer@npm:0.8.2" - dependencies: - chalk: ^2.4.1 - css: ^2.2.1 - checksum: 26f5086c9d71e4754fe0a02dab25fd7486f43d4474240324032f4b551e2149899398f06046ed02df7970d5d121a5df42a2fc633861531dae98dc3fc420d444ad +"@emotion/sheet@npm:^1.1.0": + version: 1.1.0 + resolution: "@emotion/sheet@npm:1.1.0" + checksum: 5b13035550a08b5c94e24289eed44f1157cfbdc3465e6fe40c492dd113cc10270241f2d5e28b2ed95d4a6fd7b28e31b2d556a1f0fcd632f9e57fbb429870f2d1 languageName: node linkType: hard @@ -2914,6 +3030,28 @@ __metadata: languageName: node linkType: hard +"@emotion/styled@npm:^11.8.1": + version: 11.8.1 + resolution: "@emotion/styled@npm:11.8.1" + dependencies: + "@babel/runtime": ^7.13.10 + "@emotion/babel-plugin": ^11.7.1 + "@emotion/is-prop-valid": ^1.1.2 + "@emotion/serialize": ^1.0.2 + "@emotion/utils": ^1.1.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 + checksum: b8c9e917ac54454b6816b35c031b9368729393f62792e7498a26605c9349c6c16143ecfc0f99bd5eb0c503896811e39d12bc6c068061cd6b71db0992098b3589 + languageName: node + linkType: hard + "@emotion/stylis@npm:0.8.5, @emotion/stylis@npm:^0.8.4": version: 0.8.5 resolution: "@emotion/stylis@npm:0.8.5" @@ -2921,7 +3059,7 @@ __metadata: languageName: node linkType: hard -"@emotion/unitless@npm:0.7.5, @emotion/unitless@npm:^0.7.0, @emotion/unitless@npm:^0.7.4": +"@emotion/unitless@npm:0.7.5, @emotion/unitless@npm:^0.7.0, @emotion/unitless@npm:^0.7.4, @emotion/unitless@npm:^0.7.5": version: 0.7.5 resolution: "@emotion/unitless@npm:0.7.5" checksum: 4d0d94f53cb97b4481bbfa394953e1899a0b877644642ba9dd7247c27eb8c48e14e22aeb11411d7d9874685ad85dd5fb5b50eb78c6d8840eb56a84b92dcef2f4 @@ -2935,7 +3073,14 @@ __metadata: languageName: node linkType: hard -"@emotion/weak-memoize@npm:0.2.5": +"@emotion/utils@npm:^1.0.0, @emotion/utils@npm:^1.1.0": + version: 1.1.0 + resolution: "@emotion/utils@npm:1.1.0" + checksum: 4659bb4c447fa8c5303fae5cae829c22ce29ba0d9e0a8fb1f3f33b8bfd9304a435af327abccbf133040eeb1771a572fad3e68decd267e26459b8ea6ea1f2ba68 + languageName: node + linkType: hard + +"@emotion/weak-memoize@npm:0.2.5, @emotion/weak-memoize@npm:^0.2.5": version: 0.2.5 resolution: "@emotion/weak-memoize@npm:0.2.5" checksum: cabfaaecabbb407d323098afc0bb2dd2ec9aaea0672f8f2c54b84b99d5f8cc680356cf166583fd5593330ceef29f2c26554c2c65dff06c0a8f5f8c7da69d89f1 @@ -6359,8 +6504,8 @@ __metadata: "@babel/parser": ^7.12.11 "@babel/plugin-transform-react-jsx": ^7.12.12 "@babel/preset-env": ^7.12.11 - "@emotion/core": ^10.3.1 - "@emotion/styled": ^10.0.27 + "@emotion/react": ^11.8.1 + "@emotion/styled": ^11.8.1 "@jest/transform": ^26.6.2 "@mdx-js/react": ^1.6.22 "@storybook/addons": 6.5.0-alpha.46 @@ -6741,6 +6886,7 @@ __metadata: dependencies: "@angular/core": ^11.2.0 "@angular/platform-browser-dynamic": ^11.2.0 + "@emotion/jest": ^11.8.0 "@jest/transform": ^26.6.2 "@storybook/addon-docs": 6.5.0-alpha.46 "@storybook/addons": 6.5.0-alpha.46 @@ -6763,7 +6909,6 @@ __metadata: enzyme-to-json: ^3.6.1 glob: ^7.1.6 global: ^4.4.0 - jest-emotion: ^10.0.32 jest-preset-angular: ^8.3.2 jest-specific-snapshot: ^4.0.0 jest-vue-preprocessor: ^1.7.1 @@ -8254,7 +8399,8 @@ __metadata: "@compodoc/compodoc": ^1.1.18 "@cypress/skip-test": ^2.6.1 "@cypress/webpack-preprocessor": ^5.9.1 - "@emotion/snapshot-serializer": ^0.8.2 + "@emotion/babel-plugin": ^11.7.2 + "@emotion/jest": ^11.8.0 "@linear/sdk": ^1.21.0 "@nicolo-ribaudo/chokidar-2": ^2.1.8 "@nrwl/cli": 12.3.4 @@ -8349,7 +8495,6 @@ __metadata: babel-loader: ^8.0.0 babel-plugin-add-react-displayname: ^0.0.5 babel-plugin-dynamic-import-node: ^2.3.3 - babel-plugin-emotion: ^10.0.33 babel-plugin-macros: ^3.0.1 chalk: ^4.1.0 chromatic: ^6.0.2 @@ -8380,7 +8525,6 @@ __metadata: http-server: ^0.12.3 husky: ^4.3.7 jest: ^26.6.3 - jest-emotion: ^10.0.32 jest-environment-jsdom: ^26.6.2 jest-environment-jsdom-thirteen: ^1.0.1 jest-enzyme: ^7.1.2 @@ -8660,14 +8804,13 @@ __metadata: version: 0.0.0-use.local resolution: "@storybook/theming@workspace:lib/theming" dependencies: - "@emotion/core": ^10.3.1 - "@emotion/is-prop-valid": ^0.8.6 - "@emotion/styled": ^10.0.27 + "@emotion/is-prop-valid": ^1.1.2 + "@emotion/react": ^11.8.1 + "@emotion/styled": ^11.8.1 "@storybook/client-logger": 6.5.0-alpha.46 "@types/node": ^14.14.20 || ^16.0.0 core-js: ^3.8.2 deep-object-diff: ^1.1.0 - emotion-theming: ^10.0.27 global: ^4.4.0 memoizerific: ^1.11.3 polished: ^4.0.5 @@ -9819,13 +9962,6 @@ __metadata: languageName: node linkType: hard -"@types/jest@npm:^23.0.2": - version: 23.3.14 - resolution: "@types/jest@npm:23.3.14" - checksum: 174691a3e838e96a3fbda641c9c9ca811b3cc8d65f21a913eddf6aa75596f66758224ffe6cc95cf113d7d09c278130f08b5600036e218d8457ca9e0ffdc8bde0 - languageName: node - linkType: hard - "@types/jest@npm:^26.0.16": version: 26.0.24 resolution: "@types/jest@npm:26.0.24" @@ -13923,7 +14059,7 @@ __metadata: languageName: node linkType: hard -"babel-plugin-emotion@npm:^10.0.27, babel-plugin-emotion@npm:^10.0.33": +"babel-plugin-emotion@npm:^10.0.27": version: 10.2.2 resolution: "babel-plugin-emotion@npm:10.2.2" dependencies: @@ -14026,7 +14162,7 @@ __metadata: languageName: node linkType: hard -"babel-plugin-macros@npm:2.8.0, babel-plugin-macros@npm:^2.0.0, babel-plugin-macros@npm:^2.8.0": +"babel-plugin-macros@npm:2.8.0, babel-plugin-macros@npm:^2.0.0, babel-plugin-macros@npm:^2.6.1, babel-plugin-macros@npm:^2.8.0": version: 2.8.0 resolution: "babel-plugin-macros@npm:2.8.0" dependencies: @@ -18407,7 +18543,7 @@ __metadata: languageName: node linkType: hard -"css@npm:^2.0.0, css@npm:^2.1.0, css@npm:^2.2.1": +"css@npm:^2.0.0, css@npm:^2.1.0": version: 2.2.4 resolution: "css@npm:2.2.4" dependencies: @@ -24974,7 +25110,7 @@ __metadata: languageName: node linkType: hard -"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0": +"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1": version: 3.3.2 resolution: "hoist-non-react-statics@npm:3.3.2" dependencies: @@ -27725,18 +27861,6 @@ __metadata: languageName: node linkType: hard -"jest-emotion@npm:^10.0.32": - version: 10.0.32 - resolution: "jest-emotion@npm:10.0.32" - dependencies: - "@babel/runtime": ^7.5.5 - "@types/jest": ^23.0.2 - chalk: ^2.4.1 - css: ^2.2.1 - checksum: 45a133e48dbda6f6462e8e3c715398fdbf847eccfc08dcccb2e9decd7b8fa66b7404e56b0bc46e6d833d13fb0d75e0721745956693d854538d066e8de30fc850 - languageName: node - linkType: hard - "jest-environment-enzyme@npm:^7.1.2": version: 7.1.2 resolution: "jest-environment-enzyme@npm:7.1.2" @@ -33834,6 +33958,7 @@ __metadata: version: 0.0.0-use.local resolution: "official-storybook@workspace:examples/official-storybook" dependencies: + "@emotion/jest": ^11.8.0 "@packtracker/webpack-plugin": ^2.3.0 "@pmmmwh/react-refresh-webpack-plugin": ^0.5.3 "@storybook/addon-a11y": 6.5.0-alpha.46 @@ -33871,7 +33996,6 @@ __metadata: express: ^4.17.1 format-json: ^1.0.3 global: ^4.4.0 - jest-emotion: ^10.0.32 lodash: ^4.17.21 paths.macro: ^3.0.1 prop-types: ^15.7.2 @@ -41757,6 +41881,15 @@ __metadata: languageName: node linkType: hard +"specificity@npm:^0.4.1": + version: 0.4.1 + resolution: "specificity@npm:0.4.1" + bin: + specificity: ./bin/specificity + checksum: 5da85a05052b55e344cb0f5bce5d07cbabbbe8945da176a481589db5a13e9fbcfa879ceb075cf564b94e680fae0a2ab14ea55cc87496b86a6d5122545946d7c2 + languageName: node + linkType: hard + "speed-measure-webpack-plugin@npm:1.4.2": version: 1.4.2 resolution: "speed-measure-webpack-plugin@npm:1.4.2" @@ -42636,6 +42769,13 @@ __metadata: languageName: node linkType: hard +"stylis@npm:4.0.13": + version: 4.0.13 + resolution: "stylis@npm:4.0.13" + checksum: bd567c440b4f1acf8962b1b3aa7985c4e04d7badfe1e0f1c7ee2a60912de2718973850c524001a3d52f5fc9a0e3dcd204b8bd7e2d47d4934462e9f749fd9c7bc + languageName: node + linkType: hard + "stylis@npm:^3.5.0": version: 3.5.4 resolution: "stylis@npm:3.5.4" From c2b6cd02a85bcc7a20570d242563d31f97dd30f1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Wed, 9 Mar 2022 07:58:57 +0100 Subject: [PATCH 02/10] Copy over Emotion 10 styles --- lib/theming/src/emotion10types.ts | 264 ++++++++++++++++++++++++++++++ lib/theming/src/index.ts | 8 +- 2 files changed, 270 insertions(+), 2 deletions(-) create mode 100644 lib/theming/src/emotion10types.ts diff --git a/lib/theming/src/emotion10types.ts b/lib/theming/src/emotion10types.ts new file mode 100644 index 000000000000..8be57922c5f6 --- /dev/null +++ b/lib/theming/src/emotion10types.ts @@ -0,0 +1,264 @@ +import { Interpolation } from '@emotion/react'; + +type PropsOf> = + JSX.LibraryManagedAttributes>; + +type Omit = T extends any ? Pick> : never; +type Overwrapped = Pick>; + +type JSXInEl = JSX.IntrinsicElements; +type ReactClassPropKeys = keyof React.ClassAttributes; + +type WithTheme = P extends { theme: infer Theme } + ? P & { theme: Exclude } + : P & { theme: T }; + +interface StyledOptions { + label?: string; + shouldForwardProp?(propName: string): boolean; + target?: string; +} + +interface ComponentSelector { + __emotion_styles: any; +} + +export interface StyledComponent + extends React.FC & { theme?: Theme }>, + ComponentSelector { + /** + * @desc this method is type-unsafe + */ + withComponent( + tag: NewTag + ): StyledComponent; + withComponent>( + tag: Tag + ): StyledComponent, StyleProps, Theme>; +} + +interface CreateStyledComponentBaseThemeless { + < + StyleProps extends Omit, ReactClassPropKeys> = Omit< + InnerProps & ExtraProps, + ReactClassPropKeys + >, + Theme extends object = object + >( + ...styles: Array>> + ): StyledComponent; + < + StyleProps extends Omit, ReactClassPropKeys> = Omit< + InnerProps & ExtraProps, + ReactClassPropKeys + >, + Theme extends object = object + >( + template: TemplateStringsArray, + ...styles: Array>> + ): StyledComponent; +} + +interface CreateStyledComponentBaseThemed< + InnerProps, + ExtraProps, + StyledInstanceTheme extends object +> { + < + StyleProps extends Omit, ReactClassPropKeys> = Omit< + InnerProps & ExtraProps, + ReactClassPropKeys + > + >( + ...styles: Array>> + ): StyledComponent; + < + StyleProps extends Omit, ReactClassPropKeys> = Omit< + InnerProps & ExtraProps, + ReactClassPropKeys + > + >( + template: TemplateStringsArray, + ...styles: Array>> + ): StyledComponent; +} + +type CreateStyledComponentBase = + // this "reversed" condition checks if StyledInstanceTheme was already parametrized when using CreateStyled + object extends StyledInstanceTheme + ? CreateStyledComponentBaseThemeless + : CreateStyledComponentBaseThemed; + +type CreateStyledComponentIntrinsic = + CreateStyledComponentBase; +type CreateStyledComponentExtrinsic< + Tag extends React.ComponentType, + ExtraProps, + Theme extends object +> = CreateStyledComponentBase, ExtraProps, Theme>; + +interface StyledTags { + /** + * @desc + * HTML tags + */ + a: CreateStyledComponentIntrinsic<'a', {}, Theme>; + abbr: CreateStyledComponentIntrinsic<'abbr', {}, Theme>; + address: CreateStyledComponentIntrinsic<'address', {}, Theme>; + area: CreateStyledComponentIntrinsic<'area', {}, Theme>; + article: CreateStyledComponentIntrinsic<'article', {}, Theme>; + aside: CreateStyledComponentIntrinsic<'aside', {}, Theme>; + audio: CreateStyledComponentIntrinsic<'audio', {}, Theme>; + b: CreateStyledComponentIntrinsic<'b', {}, Theme>; + base: CreateStyledComponentIntrinsic<'base', {}, Theme>; + bdi: CreateStyledComponentIntrinsic<'bdi', {}, Theme>; + bdo: CreateStyledComponentIntrinsic<'bdo', {}, Theme>; + big: CreateStyledComponentIntrinsic<'big', {}, Theme>; + blockquote: CreateStyledComponentIntrinsic<'blockquote', {}, Theme>; + body: CreateStyledComponentIntrinsic<'body', {}, Theme>; + br: CreateStyledComponentIntrinsic<'br', {}, Theme>; + button: CreateStyledComponentIntrinsic<'button', {}, Theme>; + canvas: CreateStyledComponentIntrinsic<'canvas', {}, Theme>; + caption: CreateStyledComponentIntrinsic<'caption', {}, Theme>; + cite: CreateStyledComponentIntrinsic<'cite', {}, Theme>; + code: CreateStyledComponentIntrinsic<'code', {}, Theme>; + col: CreateStyledComponentIntrinsic<'col', {}, Theme>; + colgroup: CreateStyledComponentIntrinsic<'colgroup', {}, Theme>; + data: CreateStyledComponentIntrinsic<'data', {}, Theme>; + datalist: CreateStyledComponentIntrinsic<'datalist', {}, Theme>; + dd: CreateStyledComponentIntrinsic<'dd', {}, Theme>; + del: CreateStyledComponentIntrinsic<'del', {}, Theme>; + details: CreateStyledComponentIntrinsic<'details', {}, Theme>; + dfn: CreateStyledComponentIntrinsic<'dfn', {}, Theme>; + dialog: CreateStyledComponentIntrinsic<'dialog', {}, Theme>; + div: CreateStyledComponentIntrinsic<'div', {}, Theme>; + dl: CreateStyledComponentIntrinsic<'dl', {}, Theme>; + dt: CreateStyledComponentIntrinsic<'dt', {}, Theme>; + em: CreateStyledComponentIntrinsic<'em', {}, Theme>; + embed: CreateStyledComponentIntrinsic<'embed', {}, Theme>; + fieldset: CreateStyledComponentIntrinsic<'fieldset', {}, Theme>; + figcaption: CreateStyledComponentIntrinsic<'figcaption', {}, Theme>; + figure: CreateStyledComponentIntrinsic<'figure', {}, Theme>; + footer: CreateStyledComponentIntrinsic<'footer', {}, Theme>; + form: CreateStyledComponentIntrinsic<'form', {}, Theme>; + h1: CreateStyledComponentIntrinsic<'h1', {}, Theme>; + h2: CreateStyledComponentIntrinsic<'h2', {}, Theme>; + h3: CreateStyledComponentIntrinsic<'h3', {}, Theme>; + h4: CreateStyledComponentIntrinsic<'h4', {}, Theme>; + h5: CreateStyledComponentIntrinsic<'h5', {}, Theme>; + h6: CreateStyledComponentIntrinsic<'h6', {}, Theme>; + head: CreateStyledComponentIntrinsic<'head', {}, Theme>; + header: CreateStyledComponentIntrinsic<'header', {}, Theme>; + hgroup: CreateStyledComponentIntrinsic<'hgroup', {}, Theme>; + hr: CreateStyledComponentIntrinsic<'hr', {}, Theme>; + html: CreateStyledComponentIntrinsic<'html', {}, Theme>; + i: CreateStyledComponentIntrinsic<'i', {}, Theme>; + iframe: CreateStyledComponentIntrinsic<'iframe', {}, Theme>; + img: CreateStyledComponentIntrinsic<'img', {}, Theme>; + input: CreateStyledComponentIntrinsic<'input', {}, Theme>; + ins: CreateStyledComponentIntrinsic<'ins', {}, Theme>; + kbd: CreateStyledComponentIntrinsic<'kbd', {}, Theme>; + keygen: CreateStyledComponentIntrinsic<'keygen', {}, Theme>; + label: CreateStyledComponentIntrinsic<'label', {}, Theme>; + legend: CreateStyledComponentIntrinsic<'legend', {}, Theme>; + li: CreateStyledComponentIntrinsic<'li', {}, Theme>; + link: CreateStyledComponentIntrinsic<'link', {}, Theme>; + main: CreateStyledComponentIntrinsic<'main', {}, Theme>; + map: CreateStyledComponentIntrinsic<'map', {}, Theme>; + mark: CreateStyledComponentIntrinsic<'mark', {}, Theme>; + /** + * @desc + * marquee tag is not supported by @types/react + */ + // 'marquee': CreateStyledComponentIntrinsic<'marquee', {}, Theme>; + menu: CreateStyledComponentIntrinsic<'menu', {}, Theme>; + menuitem: CreateStyledComponentIntrinsic<'menuitem', {}, Theme>; + meta: CreateStyledComponentIntrinsic<'meta', {}, Theme>; + meter: CreateStyledComponentIntrinsic<'meter', {}, Theme>; + nav: CreateStyledComponentIntrinsic<'nav', {}, Theme>; + noscript: CreateStyledComponentIntrinsic<'noscript', {}, Theme>; + object: CreateStyledComponentIntrinsic<'object', {}, Theme>; + ol: CreateStyledComponentIntrinsic<'ol', {}, Theme>; + optgroup: CreateStyledComponentIntrinsic<'optgroup', {}, Theme>; + option: CreateStyledComponentIntrinsic<'option', {}, Theme>; + output: CreateStyledComponentIntrinsic<'output', {}, Theme>; + p: CreateStyledComponentIntrinsic<'p', {}, Theme>; + param: CreateStyledComponentIntrinsic<'param', {}, Theme>; + picture: CreateStyledComponentIntrinsic<'picture', {}, Theme>; + pre: CreateStyledComponentIntrinsic<'pre', {}, Theme>; + progress: CreateStyledComponentIntrinsic<'progress', {}, Theme>; + q: CreateStyledComponentIntrinsic<'q', {}, Theme>; + rp: CreateStyledComponentIntrinsic<'rp', {}, Theme>; + rt: CreateStyledComponentIntrinsic<'rt', {}, Theme>; + ruby: CreateStyledComponentIntrinsic<'ruby', {}, Theme>; + s: CreateStyledComponentIntrinsic<'s', {}, Theme>; + samp: CreateStyledComponentIntrinsic<'samp', {}, Theme>; + script: CreateStyledComponentIntrinsic<'script', {}, Theme>; + section: CreateStyledComponentIntrinsic<'section', {}, Theme>; + select: CreateStyledComponentIntrinsic<'select', {}, Theme>; + small: CreateStyledComponentIntrinsic<'small', {}, Theme>; + source: CreateStyledComponentIntrinsic<'source', {}, Theme>; + span: CreateStyledComponentIntrinsic<'span', {}, Theme>; + strong: CreateStyledComponentIntrinsic<'strong', {}, Theme>; + style: CreateStyledComponentIntrinsic<'style', {}, Theme>; + sub: CreateStyledComponentIntrinsic<'sub', {}, Theme>; + summary: CreateStyledComponentIntrinsic<'summary', {}, Theme>; + sup: CreateStyledComponentIntrinsic<'sup', {}, Theme>; + table: CreateStyledComponentIntrinsic<'table', {}, Theme>; + tbody: CreateStyledComponentIntrinsic<'tbody', {}, Theme>; + td: CreateStyledComponentIntrinsic<'td', {}, Theme>; + textarea: CreateStyledComponentIntrinsic<'textarea', {}, Theme>; + tfoot: CreateStyledComponentIntrinsic<'tfoot', {}, Theme>; + th: CreateStyledComponentIntrinsic<'th', {}, Theme>; + thead: CreateStyledComponentIntrinsic<'thead', {}, Theme>; + time: CreateStyledComponentIntrinsic<'time', {}, Theme>; + title: CreateStyledComponentIntrinsic<'title', {}, Theme>; + tr: CreateStyledComponentIntrinsic<'tr', {}, Theme>; + track: CreateStyledComponentIntrinsic<'track', {}, Theme>; + u: CreateStyledComponentIntrinsic<'u', {}, Theme>; + ul: CreateStyledComponentIntrinsic<'ul', {}, Theme>; + var: CreateStyledComponentIntrinsic<'var', {}, Theme>; + video: CreateStyledComponentIntrinsic<'video', {}, Theme>; + wbr: CreateStyledComponentIntrinsic<'wbr', {}, Theme>; + + /** + * @desc + * SVG tags + */ + circle: CreateStyledComponentIntrinsic<'circle', {}, Theme>; + clipPath: CreateStyledComponentIntrinsic<'clipPath', {}, Theme>; + defs: CreateStyledComponentIntrinsic<'defs', {}, Theme>; + ellipse: CreateStyledComponentIntrinsic<'ellipse', {}, Theme>; + foreignObject: CreateStyledComponentIntrinsic<'foreignObject', {}, Theme>; + g: CreateStyledComponentIntrinsic<'g', {}, Theme>; + image: CreateStyledComponentIntrinsic<'image', {}, Theme>; + line: CreateStyledComponentIntrinsic<'line', {}, Theme>; + linearGradient: CreateStyledComponentIntrinsic<'linearGradient', {}, Theme>; + mask: CreateStyledComponentIntrinsic<'mask', {}, Theme>; + path: CreateStyledComponentIntrinsic<'path', {}, Theme>; + pattern: CreateStyledComponentIntrinsic<'pattern', {}, Theme>; + polygon: CreateStyledComponentIntrinsic<'polygon', {}, Theme>; + polyline: CreateStyledComponentIntrinsic<'polyline', {}, Theme>; + radialGradient: CreateStyledComponentIntrinsic<'radialGradient', {}, Theme>; + rect: CreateStyledComponentIntrinsic<'rect', {}, Theme>; + stop: CreateStyledComponentIntrinsic<'stop', {}, Theme>; + svg: CreateStyledComponentIntrinsic<'svg', {}, Theme>; + text: CreateStyledComponentIntrinsic<'text', {}, Theme>; + tspan: CreateStyledComponentIntrinsic<'tspan', {}, Theme>; +} + +interface BaseCreateStyled { + , ExtraProps = {}>( + tag: Tag, + options?: StyledOptions + ): CreateStyledComponentExtrinsic; + + ( + tag: Tag, + options?: StyledOptions + ): CreateStyledComponentIntrinsic; +} + +export interface CreateStyled + extends BaseCreateStyled, + StyledTags {} diff --git a/lib/theming/src/index.ts b/lib/theming/src/index.ts index 8a94d2cacde2..4a852b72ef98 100644 --- a/lib/theming/src/index.ts +++ b/lib/theming/src/index.ts @@ -2,8 +2,12 @@ /// import emotionStyled from '@emotion/styled'; +import type { CreateStyled } from './emotion10types'; + +import { Theme } from './types'; + +export type { StyledComponent } from './emotion10types'; -export type { StyledComponent } from '@emotion/styled'; export { Global, keyframes, @@ -16,7 +20,7 @@ export { } from '@emotion/react'; export type { CSSObject, Keyframes } from '@emotion/react'; -export const styled = emotionStyled; +export const styled = emotionStyled as CreateStyled; export * from './base'; export * from './types'; From e9dfab403c1f5a44d3205b05d7b62779c5ffba58 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Fri, 18 Mar 2022 21:14:09 +0100 Subject: [PATCH 03/10] Fix types for theme-related APIs --- lib/components/src/controls/Object.tsx | 2 +- lib/theming/src/emotion10types.ts | 32 ++++++++++++++------------ lib/theming/src/index.ts | 23 +++++++++--------- lib/ui/src/containers/menu.tsx | 4 ++-- 4 files changed, 32 insertions(+), 29 deletions(-) diff --git a/lib/components/src/controls/Object.tsx b/lib/components/src/controls/Object.tsx index ff57f8ae79e6..b8c18b0c0155 100644 --- a/lib/components/src/controls/Object.tsx +++ b/lib/components/src/controls/Object.tsx @@ -244,7 +244,7 @@ const getCustomStyleFunction: (theme: Theme) => JsonTreeProps['getStyle'] = (the }); export const ObjectControl: FC = ({ name, value, onChange }) => { - const theme = useTheme(); + const theme = useTheme(); const data = useMemo(() => value && cloneDeep(value), [value]); const hasData = data !== null && data !== undefined; diff --git a/lib/theming/src/emotion10types.ts b/lib/theming/src/emotion10types.ts index 8be57922c5f6..6bb35d91fb51 100644 --- a/lib/theming/src/emotion10types.ts +++ b/lib/theming/src/emotion10types.ts @@ -1,9 +1,11 @@ import { Interpolation } from '@emotion/react'; -type PropsOf> = +export type PropsOf> = JSX.LibraryManagedAttributes>; -type Omit = T extends any ? Pick> : never; +export type AddOptionalTo = DistributiveOmit & Partial>>; + +type DistributiveOmit = T extends any ? Pick> : never; type Overwrapped = Pick>; type JSXInEl = JSX.IntrinsicElements; @@ -24,7 +26,7 @@ interface ComponentSelector { } export interface StyledComponent - extends React.FC & { theme?: Theme }>, + extends React.FC & { theme?: Theme }>, ComponentSelector { /** * @desc this method is type-unsafe @@ -39,19 +41,19 @@ export interface StyledComponent interface CreateStyledComponentBaseThemeless { < - StyleProps extends Omit, ReactClassPropKeys> = Omit< - InnerProps & ExtraProps, + StyleProps extends DistributiveOmit< + Overwrapped, ReactClassPropKeys - >, + > = DistributiveOmit, Theme extends object = object >( ...styles: Array>> ): StyledComponent; < - StyleProps extends Omit, ReactClassPropKeys> = Omit< - InnerProps & ExtraProps, + StyleProps extends DistributiveOmit< + Overwrapped, ReactClassPropKeys - >, + > = DistributiveOmit, Theme extends object = object >( template: TemplateStringsArray, @@ -65,18 +67,18 @@ interface CreateStyledComponentBaseThemed< StyledInstanceTheme extends object > { < - StyleProps extends Omit, ReactClassPropKeys> = Omit< - InnerProps & ExtraProps, + StyleProps extends DistributiveOmit< + Overwrapped, ReactClassPropKeys - > + > = DistributiveOmit >( ...styles: Array>> ): StyledComponent; < - StyleProps extends Omit, ReactClassPropKeys> = Omit< - InnerProps & ExtraProps, + StyleProps extends DistributiveOmit< + Overwrapped, ReactClassPropKeys - > + > = DistributiveOmit >( template: TemplateStringsArray, ...styles: Array>> diff --git a/lib/theming/src/index.ts b/lib/theming/src/index.ts index 4a852b72ef98..8f61edca75e8 100644 --- a/lib/theming/src/index.ts +++ b/lib/theming/src/index.ts @@ -2,24 +2,25 @@ /// import emotionStyled from '@emotion/styled'; -import type { CreateStyled } from './emotion10types'; +import * as emotionReact from '@emotion/react'; +import type { CreateStyled, PropsOf, AddOptionalTo } from './emotion10types'; import { Theme } from './types'; export type { StyledComponent } from './emotion10types'; -export { - Global, - keyframes, - css, - jsx, - ClassNames, - withTheme, - useTheme, - ThemeProvider, -} from '@emotion/react'; +export { keyframes, css, jsx, ClassNames, ThemeProvider } from '@emotion/react'; export type { CSSObject, Keyframes } from '@emotion/react'; +export const useTheme = emotionReact.useTheme as () => Theme; +export const withTheme = emotionReact.withTheme as >( + component: C +) => React.FC, 'theme'>>; + +export const Global = emotionReact.Global as (props: { + styles: emotionReact.Interpolation; +}) => React.ReactElement; + export const styled = emotionStyled as CreateStyled; export * from './base'; diff --git a/lib/ui/src/containers/menu.tsx b/lib/ui/src/containers/menu.tsx index b8fb479895a4..10adcea1141b 100644 --- a/lib/ui/src/containers/menu.tsx +++ b/lib/ui/src/containers/menu.tsx @@ -2,7 +2,7 @@ import React, { useMemo, FunctionComponent } from 'react'; import { Badge } from '@storybook/components'; import { API } from '@storybook/api'; -import { styled, useTheme, Theme } from '@storybook/theming'; +import { styled, useTheme } from '@storybook/theming'; import { shortcutToHumanString } from '@storybook/api/shortcut'; import { MenuItemIcon } from '../components/sidebar/Menu'; @@ -46,7 +46,7 @@ export const useMenu = ( showNav: boolean, enableShortcuts: boolean ) => { - const theme = useTheme(); + const theme = useTheme(); const shortcutKeys = api.getShortcutKeys(); const about = useMemo( From 18a8e84891eb9b4a149a8611c3739aeb9cd13de0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mateusz=20Burzy=C5=84ski?= Date: Fri, 18 Mar 2022 22:59:38 +0100 Subject: [PATCH 04/10] update snapshots --- .../src/__snapshots__/storyshots.test.ts.snap | 834 +++++++++--------- 1 file changed, 426 insertions(+), 408 deletions(-) diff --git a/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap b/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap index 3926326cf9aa..c17b8eb3be70 100644 --- a/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap +++ b/examples/react-ts/src/__snapshots__/storyshots.test.ts.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Storyshots Demo/AccountForm Standard 1`] = ` -.emotion-15 { +.emotion-0 { font-family: "Nunito Sans",-apple-system,".SFNSText-Regular","San Francisco",BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Helvetica,Arial,sans-serif; display: -webkit-box; display: -webkit-flex; @@ -20,7 +20,7 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = ` border-radius: 7px; } -.emotion-2 { +.emotion-1 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -30,30 +30,30 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = ` -ms-flex-align: center; align-items: center; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; + -webkit-justify-content: center; justify-content: center; } -.emotion-0 { +.emotion-2 { height: 40px; z-index: 10; margin-left: 32px; } -.emotion-1 { +.emotion-3 { height: 40px; z-index: 1; left: -32px; position: relative; } -.emotion-3 { +.emotion-4 { margin-top: 20px; text-align: center; } -.emotion-14 { +.emotion-5 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -63,26 +63,26 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = ` -ms-flex-align: flex-start; align-items: flex-start; -webkit-box-pack: center; - -webkit-justify-content: center; -ms-flex-pack: center; + -webkit-justify-content: center; justify-content: center; width: 350px; min-height: 189px; margin-top: 8px; } -.emotion-13 { +.emotion-6 { width: 100%; -webkit-align-self: flex-start; - -ms-flex-item-align: start; + -ms-flex-item-align: flex-start; align-self: flex-start; } -.emotion-13[aria-disabled="true"] { +.emotion-6[aria-disabled="true"] { opacity: 0.6; } -.emotion-6 { +.emotion-7 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -91,44 +91,45 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = ` -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: stretch; - -webkit-justify-content: stretch; -ms-flex-pack: stretch; + -webkit-justify-content: stretch; justify-content: stretch; margin-bottom: 10px; } -.emotion-4 { +.emotion-8 { font-size: 13px; font-weight: 500; margin-bottom: 6px; } -.emotion-5 { +.emotion-9 { font-size: 14px; color: #333333; padding: 10px 15px; border-radius: 4px; -webkit-appearance: none; -moz-appearance: none; + -ms-appearance: none; appearance: none; outline: none; border: 0 none; box-shadow: rgb(0 0 0 / 10%) 0px 0px 0px 1px inset; } -.emotion-5:focus { +.emotion-9:focus { box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; } -.emotion-5:active { +.emotion-9:active { box-shadow: rgb(30 167 253) 0px 0px 0px 1px inset; } -.emotion-5[aria-invalid="true"] { +.emotion-9[aria-invalid="true"] { box-shadow: rgb(255 68 0) 0px 0px 0px 1px inset; } -.emotion-12 { +.emotion-13 { -webkit-align-self: stretch; -ms-flex-item-align: stretch; align-self: stretch; @@ -138,17 +139,17 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = ` display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; - -ms-flex-pack: justify; justify-content: space-between; margin-top: 24px; } -.emotion-10 { +.emotion-14 { background-color: transparent; border: 0 none; outline: none; -webkit-appearance: none; -moz-appearance: none; + -ms-appearance: none; appearance: none; font-weight: 500; font-size: 12px; @@ -166,28 +167,29 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = ` box-shadow: rgb(30 167 253 / 10%) 0 0 0 1px inset; } -.emotion-10:focus { +.emotion-14:focus { -webkit-text-decoration: underline; text-decoration: underline; font-weight: 700; } -.emotion-10:active { +.emotion-14:active { -webkit-text-decoration: underline; text-decoration: underline; font-weight: 700; } -.emotion-10[aria-disabled="true"] { +.emotion-14[aria-disabled="true"] { cursor: default; } -.emotion-11 { +.emotion-15 { background-color: transparent; border: 0 none; outline: none; -webkit-appearance: none; -moz-appearance: none; + -ms-appearance: none; appearance: none; font-weight: 500; font-size: 12px; @@ -203,31 +205,31 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = ` color: #1EA7FD; } -.emotion-11:focus { +.emotion-15:focus { -webkit-text-decoration: underline; text-decoration: underline; font-weight: 700; } -.emotion-11:active { +.emotion-15:active { -webkit-text-decoration: underline; text-decoration: underline; font-weight: 700; } -.emotion-11[aria-disabled="true"] { +.emotion-15[aria-disabled="true"] { cursor: default; }
@@ -262,7 +264,7 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = ` @@ -281,26 +283,26 @@ exports[`Storyshots Demo/AccountForm Standard 1`] = `

Create an account to join the Storybook community