chore: upgrade to emotion@11 (apache#1086)

superset-frontend/temporary_superset_ui/superset-ui/jest.config.js

@@ -58,5 +58,5 @@ module.exports = {
  testEnvironment: 'node',
  },
  ],
- snapshotSerializers: ['@emotion/jest/serializer'],
+ snapshotSerializers: ['@emotion/jest/enzyme-serializer'],
 };

superset-frontend/temporary_superset_ui/superset-ui/package.json

@@ -69,7 +69,8 @@
  "@babel/preset-typescript": "^7.12.7",
  "@babel/register": "^7.8.6",
  "@emotion/babel-preset-css-prop": "^11.2.0",
- "@emotion/jest": "^11.2.1",
+ "@emotion/jest": "^11.3.0",
+ "@storybook/preset-typescript": "^3.0.0",
  "@superset-ui/commit-config": "^0.0.9",
  "@types/enzyme": "^3.10.3",
  "@types/jest": "^26.0.4",
@@ -82,7 +83,6 @@
  "babel-jest": "^26.6.3",
  "babel-loader": "^8.2.2",
  "babel-plugin-dynamic-import-node": "^2.3.3",
- "babel-plugin-emotion": "^11.0.0",
  "babel-plugin-jsx-remove-data-test-id": "^2.1.3",
  "babel-plugin-lodash": "^3.3.4",
  "babel-plugin-typescript-to-proptypes": "^1.4.2",
@@ -140,7 +140,7 @@
  "@types/react-bootstrap/@types/react": "^16.14.2"
  },
  "engines": {
- "node": "^14.15.0",
+ "node": "14.x",
  "npm": "^7.5.4",
  "yarn": ">=1.13.0"
  },

superset-frontend/temporary_superset_ui/superset-ui/packages/generator-superset/generators/plugin-chart/templates/package.erb

@@ -26,8 +26,8 @@
  "access": "public"
  },
  "dependencies": {
- "@superset-ui/core": "^0.17.0",
- "@superset-ui/chart-controls": "^0.17.0"
+ "@superset-ui/core": "^0.17.40",
+ "@superset-ui/chart-controls": "^0.17.41"
  },
  "peerDependencies": {
  "react": "^16.13.1"

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-core/package.json

@@ -33,9 +33,8 @@
  "dependencies": {
  "@babel/runtime": "^7.1.2",
  "@emotion/cache": "^11.1.3",
- "@emotion/core": "^10.0.28",
  "@emotion/react": "^11.1.5",
- "@emotion/styled": "^10.0.27",
+ "@emotion/styled": "^11.3.0",
  "@types/d3-format": "^1.3.0",
  "@types/d3-interpolate": "^1.3.1",
  "@types/d3-scale": "^2.1.1",
@@ -51,7 +50,6 @@
  "d3-scale": "^3.0.0",
  "d3-time": "^1.0.10",
  "d3-time-format": "^2.2.0",
- "emotion-theming": "^10.0.27",
  "fetch-retry": "^4.0.1",
  "jed": "^1.1.1",
  "lodash": "^4.17.11",

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-core/src/chart-composition/legend/WithLegend.tsx

@@ -1,7 +1,5 @@
 import React, { CSSProperties, ReactNode, PureComponent } from 'react';
 import { ParentSize } from '@vx/responsive';
-// eslint-disable-next-line import/no-unresolved
-import { FlexDirectionProperty } from 'csstype';
 
 const defaultProps = {
  className: '',
@@ -38,7 +36,7 @@ const CHART_STYLE_BASE: CSSProperties = {
 class WithLegend extends PureComponent<Props, {}> {
  static defaultProps = defaultProps;
 
- getContainerDirection(): FlexDirectionProperty {
+ getContainerDirection(): CSSProperties['flexDirection'] {
  const { position } = this.props;
 
  if (position === 'left') {

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-core/src/style/index.ts → superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-core/src/style/index.tsx

@@ -16,17 +16,20 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import emotionStyled, { CreateStyled } from '@emotion/styled';
-import { useTheme as useThemeBasic } from 'emotion-theming';
+import emotionStyled from '@emotion/styled';
+import { useTheme as useThemeBasic } from '@emotion/react';
 import createCache from '@emotion/cache';
 
-export { ThemeProvider, withTheme } from 'emotion-theming';
-export { ClassNames, Global, InterpolationWithTheme, SerializedStyles } from '@emotion/core';
-export { CacheProvider, jsx, css } from '@emotion/react';
-export { createCache };
+export { ThemeProvider, CacheProvider as EmotionCacheProvider, withTheme } from '@emotion/react';
+export { default as createEmotionCache } from '@emotion/cache';
+
+declare module '@emotion/react' {
+ // eslint-disable-next-line @typescript-eslint/no-empty-interface
+ export interface Theme extends SupersetTheme {}
+}
 
 export function useTheme() {
- const theme = useThemeBasic<SupersetTheme>();
+ const theme = useThemeBasic();
  // in the case there is no theme, useTheme returns an empty object
  if (Object.keys(theme).length === 0 && theme.constructor === Object) {
  throw new Error(
@@ -36,6 +39,12 @@ export function useTheme() {
  return theme;
 }
 
+export const emotionCache = createCache({
+ key: 'superset',
+});
+
+export const styled = emotionStyled;
+
 const defaultTheme = {
  borderRadius: 4,
  colors: {
@@ -152,7 +161,4 @@ export interface SupersetThemeProps {
  theme: SupersetTheme;
 }
 
-export const styled: CreateStyled<SupersetTheme> = emotionStyled;
 export const supersetTheme = defaultTheme;
-
-export default styled;

superset-frontend/temporary_superset_ui/superset-ui/packages/superset-ui-core/test/style/index.test.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import styled, {
+import {
+ styled,
  supersetTheme,
  SupersetThemeProps,
  useTheme,
  ThemeProvider,
-} from '@superset-ui/core/src/style';
+ EmotionCacheProvider,
+ emotionCache,
+} from '@superset-ui/core';
 
 describe('@superset-ui/style package', () => {
  it('exports a theme', () => {
@@ -31,7 +34,9 @@ describe('@superset-ui/style package', () => {
  }
  mount(<ThemeUser />, {
  wrappingComponent: ({ children }) => (
- <ThemeProvider theme={supersetTheme}>{children}</ThemeProvider>
+ <EmotionCacheProvider value={emotionCache}>
+ <ThemeProvider theme={supersetTheme}>{children}</ThemeProvider>
+ </EmotionCacheProvider>
  ),
  });
  });

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-plugin-chart-time-table/package.json

@@ -33,7 +33,6 @@
  "@superset-ui/core": "0.17.40",
  "@types/d3-scale": "^2.0.2",
  "d3-scale": "^3.2.1",
- "emotion-theming": "^10.0.27",
  "moment": "^2.26.0",
  "mustache": "^4.0.1",
  "prop-types": "^15.7.2",

superset-frontend/temporary_superset_ui/superset-ui/plugins/legacy-preset-chart-big-number/src/BigNumber/BigNumber.tsx

@@ -94,8 +94,8 @@ class BigNumberVis extends React.PureComponent<BigNumberVisProps, {}> {
 
  static defaultProps = {
  className: '',
- formatNumber: (num: number) => String(num),
- formatTime: smartDateVerboseFormatter.formatFunc,
+ formatNumber: defaultNumberFormatter,
+ formatTime: smartDateVerboseFormatter,
  headerFontSize: PROPORTION.HEADER,
  mainColor: BRAND_COLOR,
  showTrendLine: false,

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/package.json

@@ -26,7 +26,6 @@
  "access": "public"
  },
  "dependencies": {
- "@emotion/core": "^10.0.28",
  "@superset-ui/chart-controls": "0.17.41",
  "@superset-ui/core": "0.17.40",
  "@types/d3-array": "^2.9.0",

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-table/tsconfig.json

@@ -12,7 +12,7 @@
  "include": [
  "src/**/*",
  "types/**/*",
- "../../types/**/*"
+ "../../types/**/*",
  ],
  "references": [
  {

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-word-cloud/package.json

@@ -34,7 +34,6 @@
  "@types/d3-scale": "^2.0.2",
  "d3-cloud": "^1.2.5",
  "d3-scale": "^3.0.1",
- "emotion-theming": "^10.0.27",
  "encodable": "^0.7.6"
  },
  "peerDependencies": {

superset-frontend/temporary_superset_ui/superset-ui/plugins/plugin-chart-choropleth-map/src/chart/components.ts → superset-frontend/temporary_superset_ui/superset-ui/temporary-plugins/plugin-chart-choropleth-map/src/chart/components.ts

@@ -1,3 +1,4 @@
+/// <reference types="@superset-ui/core/node_modules/@emotion/styled" />
 import { styled, supersetTheme } from '@superset-ui/core';
 
 export const PADDING = supersetTheme.gridUnit * 4;

superset-frontend/temporary_superset_ui/superset-ui/test/enzyme.tsx

@@ -18,7 +18,16 @@
  */
 import React, { ReactElement } from 'react';
 import { shallow as enzymeShallow, mount as enzymeMount } from 'enzyme';
-import { supersetTheme, ThemeProvider } from '@superset-ui/core';
+import {
+ EmotionCacheProvider,
+ createEmotionCache,
+ supersetTheme,
+ ThemeProvider,
+} from '@superset-ui/core';
+
+const emotionCache = createEmotionCache({
+ key: 'test',
+});
 
 type optionsType = {
  wrappingComponentProps?: any;
@@ -27,8 +36,12 @@ type optionsType = {
 };
 
 export function ProviderWrapper(props: any) {
- const { children, theme } = props;
- return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
+ const { children, theme = supersetTheme } = props;
+ return (
+ <EmotionCacheProvider value={emotionCache}>
+ <ThemeProvider theme={theme}>{children}</ThemeProvider>
+ </EmotionCacheProvider>
+ );
 }
 
 export function mount(component: ReactElement, options: optionsType = {}) {

superset-frontend/temporary_superset_ui/superset-ui/tsconfig.json

@@ -91,12 +91,6 @@
  {
  "path": "plugins/legacy-preset-chart-nvd3/test"
  },
- {
- "path": "plugins/plugin-chart-choropleth-map"
- },
- {
- "path": "plugins/plugin-chart-choropleth-map/test"
- },
  {
  "path": "plugins/plugin-chart-echarts"
  },

superset-frontend/temporary_superset_ui/superset-ui/tsconfig.options.json

@@ -26,6 +26,7 @@
  "skipLibCheck": true,
  "emitDeclarationOnly": true,
  "resolveJsonModule": true,
+ "types": ["@emotion/react/types/css-prop", "jest", "jsdom"],
  "typeRoots": [
  "./node_modules/@types"
  ]