UI: Upgrade to Emotion 11

.babelrc.js

@@ -47,7 +47,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,
@@ -81,7 +81,7 @@ module.exports = {
         '@babel/plugin-syntax-dynamic-import',
         ['@babel/plugin-proposal-class-properties', { loose: true }],
         'babel-plugin-macros',
-        ['emotion', { sourceMap: true, autoLabel: true }],
+        '@emotion',
         'babel-plugin-add-react-displayname',
       ],
       env: {
@@ -116,7 +116,7 @@ module.exports = {
         ],
       ],
       plugins: [
-        'emotion',
+        ['@emotion', { sourceMap: true, autoLabel: 'always' }],
         'babel-plugin-macros',
         '@babel/plugin-transform-arrow-functions',
         '@babel/plugin-transform-shorthand-properties',

addons/a11y/src/components/Report/Item.tsx

@@ -19,7 +19,7 @@ const Wrapper = styled.div<{}>(({ theme }) => ({
   },
 }));
 
-const Icon = styled<any, any>(Icons)(({ theme }) => ({
+const Icon = styled<any>(Icons)(({ theme }) => ({
   height: 10,
   width: 10,
   minWidth: 10,

addons/actions/src/components/ActionLogger/index.tsx

@@ -7,7 +7,7 @@ import { ActionBar, ScrollArea } from '@storybook/components';
 import { Action, InspectorContainer, Counter } from './style';
 import { ActionDisplay } from '../../models';
 
-export const Wrapper = styled(({ children, className }) => (
+export const Wrapper = styled(({ children, className }: any) => (
   <ScrollArea horizontal vertical className={className}>
     {children}
   </ScrollArea>

addons/docs/package.json

@@ -95,8 +95,8 @@
   "devDependencies": {
     "@angular/core": "^11.2.0",
     "@babel/core": "^7.12.10",
-    "@emotion/core": "^10.1.1",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/react": "^11.0.0",
+    "@emotion/styled": "^11.0.0",
     "@storybook/angular": "6.2.0-beta.13",
     "@storybook/react": "6.2.0-beta.13",
     "@storybook/vue": "6.2.0-beta.13",

addons/jest/src/components/Panel.tsx

@@ -42,7 +42,7 @@ const SuiteHead = styled.div({
   marginTop: 15,
 });
 
-const SuiteTotals = styled(({ result, className, width }) => (
+const SuiteTotals = styled(({ result, className, width }: any) => (
   <div className={className}>
     <Fragment>
       {width > 325 && result.assertionResults ? (

addons/jest/src/components/Result.tsx

@@ -29,7 +29,7 @@ const HeaderBar = styled.div<{ status: string }>(({ theme, status }) => ({
   },
 }));
 
-const Icon = styled<any, any>(Icons)(({ theme }) => ({
+const Icon = styled<any>(Icons)(({ theme }) => ({
   height: 10,
   width: 10,
   minWidth: 10,

addons/knobs/src/components/Panel.tsx

@@ -25,7 +25,7 @@ const getTimestamp = () => +new Date();
 
 export const DEFAULT_GROUP_ID = 'Other';
 
-const PanelWrapper = styled(({ children, className }) => (
+const PanelWrapper = styled(({ children, className }: any) => (
   <ScrollArea horizontal vertical className={className}>
     {children}
   </ScrollArea>

addons/knobs/src/components/types/Options.tsx

@@ -48,7 +48,7 @@ export interface OptionsTypeProps<T extends OptionsTypeKnobValue> extends KnobCo
   display: OptionsKnobOptionsDisplay;
 }
 
-const OptionsSelect = styled(ReactSelect)({
+const OptionsSelect = styled<any>(ReactSelect)({
   width: '100%',
   maxWidth: '300px',
   color: 'black',

addons/storyshots/storyshots-core/package.json

@@ -60,6 +60,7 @@
     "ts-dedent": "^2.0.0"
   },
   "devDependencies": {
+    "@emotion/jest": "11.0.0",
     "@angular/core": "^11.2.0",
     "@angular/platform-browser-dynamic": "^11.2.0",
     "@storybook/addon-docs": "6.2.0-beta.13",
@@ -70,7 +71,6 @@
     "babel-loader": "^8.2.2",
     "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",

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({

examples/official-storybook/package.json

@@ -13,6 +13,8 @@
     "storyshots-puppeteer": "yarn run build-storybook && yarn run do-storyshots-puppeteer"
   },
   "devDependencies": {
+
+    "@emotion/jest": "11.0.0",
     "@packtracker/webpack-plugin": "^2.3.0",
     "@pmmmwh/react-refresh-webpack-plugin": "^0.4.3",
     "@storybook/addon-a11y": "6.2.0-beta.13",
@@ -52,7 +54,6 @@
     "format-json": "^1.0.3",
     "global": "^4.4.0",
     "graphql": "^15.4.0",
-    "jest-emotion": "^10.0.32",
     "lodash": "^4.17.20",
     "paths.macro": "^3.0.1",
     "prop-types": "^15.7.2",

jest.config.js

@@ -82,7 +82,7 @@ module.exports = {
     DOCS_MODE: false,
     PREVIEW_URL: undefined,
   },
-  snapshotSerializers: ['jest-emotion', 'enzyme-to-json/serializer', 'jest-serializer-html'],
+  snapshotSerializers: ['@emotion/jest', 'enzyme-to-json/serializer', 'jest-serializer-html'],
   coverageDirectory: 'coverage',
   setupFilesAfterEnv: ['./scripts/jest.init.ts'],
   coverageReporters: ['lcov'],

lib/cli/package.json

@@ -18,13 +18,6 @@
   },
   "license": "MIT",
   "author": "Storybook Team",
-  "typesVersions": {
-    "<3.8": {
-      "*": [
-        "ts3.4/*"
-      ]
-    }
-  },
   "bin": {
     "getstorybook": "./bin/index.js",
     "sb": "./bin/index.js"

lib/codemod/package.json

@@ -19,13 +19,6 @@
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "jsnext:main": "src/index.js",
-  "typesVersions": {
-    "<3.8": {
-      "*": [
-        "ts3.4/*"
-      ]
-    }
-  },
   "files": [
     "dist/**/*",
     "README.md",

lib/components/src/bar/bar.tsx

@@ -35,7 +35,7 @@ const Side = styled.div<SideProps>(
 );
 Side.displayName = 'Side';
 
-export const Bar = styled(({ children, className }) => (
+export const Bar = styled(({ children, className }: any) => (
   <ScrollArea horizontal vertical={false} className={className}>
     {children}
   </ScrollArea>

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 '@storybook/theming';
 
 import { Title, Subtitle, DocsPageWrapper } from './DocsPage';
 import { ArgsTable, Source, Description } from './index';

lib/components/src/syntaxhighlighter/syntaxhighlighter.tsx

@@ -91,7 +91,7 @@ const Wrapper = styled.div<WrapperProps>(
       : {}
 );
 
-const Scroller = styled(({ children, className }) => (
+const Scroller = styled(({ children, className }: any) => (
   <ScrollArea horizontal vertical className={className}>
     {children}
   </ScrollArea>

lib/theming/package.json

@@ -36,13 +36,13 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@emotion/core": "^10.1.1",
-    "@emotion/is-prop-valid": "^0.8.6",
-    "@emotion/styled": "^10.0.27",
+    "@emotion/is-prop-valid": "^1.0.0",
+    "@emotion/react": "^11.0.0",
+    "@emotion/serialize": "^1.0.0",
+    "@emotion/styled": "^11.0.0",
     "@storybook/client-logger": "6.2.0-beta.13",
     "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",

lib/theming/paths.js

@@ -6,7 +6,6 @@ const resolve = resolveFrom.bind(null, __dirname);
 // These paths need to be aliased in the manager webpack config to ensure that all
 // code running inside the manager uses the *same* versions of each package.
 module.exports = {
-  '@emotion/core': dirname(resolve('@emotion/core/package.json')),
+  '@emotion/react': dirname(resolve('@emotion/react/package.json')),
   '@emotion/styled': dirname(resolve('@emotion/styled/package.json')),
-  'emotion-theming': dirname(resolve('emotion-theming/package.json')),
 };

lib/theming/src/animation.ts

@@ -1,4 +1,5 @@
-import { css, keyframes } from '@emotion/core';
+import { css, keyframes } from '@emotion/react';
+import { Keyframes, SerializedStyles } from '@emotion/serialize';
 
 export const easing = {
   rubber: 'cubic-bezier(0.175, 0.885, 0.335, 1.05)',
@@ -51,7 +52,16 @@ const hoverable = css`
   }
 `;
 
-export const animation = {
+interface Animation {
+  rotate360: Keyframes;
+  glow: Keyframes;
+  float: Keyframes;
+  jiggle: Keyframes;
+  inlineGlow: SerializedStyles;
+  hoverable: SerializedStyles;
+}
+
+export const animation: Animation = {
   rotate360,
   glow,
   float,

lib/theming/src/convert.ts

@@ -1,7 +1,7 @@
 import { opacify } from 'polished';
-
+import { Theme } from '@emotion/react';
 import { background, typography, color } from './base';
-import { Theme, Color, ThemeVars } from './types';
+import { Color, ThemeVars } from './types';
 import { easing, animation } from './animation';
 import { create as createSyntax, chromeLight, chromeDark } from './modules/syntax';
 import { getPreferredColorScheme } from './utils';

lib/theming/src/ensure.ts

@@ -1,10 +1,11 @@
 import { logger } from '@storybook/client-logger';
+import { Theme } from '@emotion/react';
 
 import { deletedDiff } from 'deep-object-diff';
 import dedent from 'ts-dedent';
 
 import light from './themes/light';
-import { Theme, ThemeVars } from './types';
+import { ThemeVars } from './types';
 import { convert } from './convert';
 
 export const ensure = (input: ThemeVars): Theme => {

lib/theming/src/index.ts

@@ -1,13 +1,11 @@
 import emotionStyled, { CreateStyled } from '@emotion/styled';
-import { Theme } from './types';
 
-export const styled = emotionStyled as CreateStyled<Theme>;
+export const styled = emotionStyled as CreateStyled;
 
 export * from './base';
 export * from './types';
 
-export * from '@emotion/core';
-export * from 'emotion-theming';
+export * from '@emotion/react';
 export { default as isPropValid } from '@emotion/is-prop-valid';
 
 export { createGlobal, createReset } from './global';

lib/theming/src/types.ts

@@ -54,35 +54,37 @@ export interface Brand {
   image: string | null | undefined;
 }
 
-export interface Theme {
-  color: Color;
-  background: Background;
-  typography: Typography;
-  animation: Animation;
-  easing: Easing;
-
-  input: {
-    border: string;
-    background: string;
-    color: string;
-    borderRadius: number;
-  };
-
-  // UI
-  layoutMargin: number;
-  appBorderColor: string;
-  appBorderRadius: number;
-
-  // Toolbar default/active colors
-  barTextColor: string;
-  barSelectedColor: string;
-  barBg: string;
-
-  brand: Brand;
-
-  code: {
-    [key: string]: string | object;
-  };
-
-  [key: string]: any;
+declare module '@emotion/react' {
+  export interface Theme {
+    color: Color;
+    background: Background;
+    typography: Typography;
+    animation: Animation;
+    easing: Easing;
+
+    input: {
+      border: string;
+      background: string;
+      color: string;
+      borderRadius: number;
+    };
+
+    // UI
+    layoutMargin: number;
+    appBorderColor: string;
+    appBorderRadius: number;
+
+    // Toolbar default/active colors
+    barTextColor: string;
+    barSelectedColor: string;
+    barBg: string;
+
+    brand: Brand;
+
+    code: {
+      [key: string]: string | object;
+    };
+
+    [key: string]: any;
+  }
 }

lib/ui/package.json

@@ -36,7 +36,7 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@emotion/core": "^10.1.1",
+    "@emotion/react": "^11.0.0",
     "@storybook/addons": "6.2.0-beta.13",
     "@storybook/api": "6.2.0-beta.13",
     "@storybook/channels": "6.2.0-beta.13",
@@ -51,7 +51,6 @@
     "core-js": "^3.8.2",
     "core-js-pure": "^3.8.2",
     "downshift": "^6.0.15",
-    "emotion-theming": "^10.0.27",
     "fuse.js": "^3.6.1",
     "global": "^4.4.0",
     "lodash": "^4.17.20",

lib/ui/src/components/notifications/NotificationItem.tsx

@@ -97,7 +97,7 @@ const ItemContent: FunctionComponent<Pick<State['notifications'][0], 'icon' | 'c
   </>
 );
 
-const DismissButtonWrapper = styled(IconButton)(({ theme }) => ({
+const DismissButtonWrapper = styled<any>(IconButton)(({ theme }) => ({
   height: '100%',
   display: 'flex',
   color: theme.base === 'light' ? 'rgba(255,255,255,0.7)' : ' #999999',

lib/ui/src/components/sidebar/Brand.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { styled, withTheme } from '@storybook/theming';
+import { styled, withTheme, Theme } from '@storybook/theming';
 
 import { StorybookLogo } from '@storybook/components';
 

lib/ui/src/components/sidebar/Search.tsx

@@ -347,7 +347,8 @@ export const Search = React.memo<{
                 className="search-field"
               >
                 <SearchIcon icon="search" />
-                <Input {...inputProps} />
+                {/* TODO: Fixme... */}
+                <Input {...(inputProps as any)} />
                 {enableShortcuts && <FocusKey>/</FocusKey>}
                 <ClearIcon icon="cross" onClick={() => clearSelection()} />
               </SearchField>