Switch to the new JSX transform (#991)

* Remove jsxRuntime pragmas

* Migrate to the  jsx automatic runtime - part 1

* Migrate to the jsx automatic runtime - part 2

* Fix TS errors by opting into the new jsx runtime in the root tsconfig

* Fix Storybook List bug

* Fix React not defined errors with shorthand fragments

This can be fixed by either keeping the React import or importing Fragment and using it directly. This commit applies the second option in Circuit components

* Use babel-jest instead of ts-jest

* Update snapshots

* Add types for @emotion/core/jsx-runtime

The types were added in Emotion 11, we can remove this when we upgrade. Until then, we're typing the module globally to silence TS and hopefully fix the build errors

.eslintrc.js

@@ -27,9 +27,8 @@ module.exports = require('@sumup/foundry/eslint')(
       {
         files: ['packages/circuit-ui/**/*'],
         rules: {
-          // The custom JSX pragma is required to make Emotion's css prop
-          // work with TypeScript.
-          'emotion/jsx-import': 'error',
+          // The automatic JSX runtime handles the React import. We will update the defaults in Foundry v5.
+          'react/react-in-jsx-scope': 'off',
         },
       },
       {

.storybook/components/BorderRadius.js

@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';

.storybook/components/BorderWidth.js

@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';

.storybook/components/IconSize.js

@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';

.storybook/components/Icons.js

@@ -13,12 +13,11 @@
  * limitations under the License.
  */
 
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+import { useState } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { ThemeProvider } from 'emotion-theming';
-import { keys, entries, includes, isEmpty, groupBy, sortBy } from 'lodash/fp';
+import { entries, includes, isEmpty, groupBy, sortBy } from 'lodash/fp';
 import { light } from '@sumup/design-tokens';
 import * as iconComponents from '@sumup/icons';
 import { icons } from '@sumup/icons/manifest.json';

.storybook/components/Image.js

@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { ThemeProvider } from 'emotion-theming';

.storybook/components/Intro.js

@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { ThemeProvider } from 'emotion-theming';

.storybook/components/Link.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import LinkTo from '@storybook/addon-links/react';
 import { css } from '@emotion/core';
 

.storybook/components/MediaQueriesTable.js

@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { withTheme, ThemeProvider } from 'emotion-theming';
 import { light } from '@sumup/design-tokens';
 

.storybook/components/Preview.js

@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { Canvas } from '@storybook/addon-docs/blocks';
 import { ThemeProvider } from 'emotion-theming';
 import { light } from '@sumup/design-tokens';

.storybook/components/Spacing.js

@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';

.storybook/components/Statuses.js

@@ -15,7 +15,6 @@
 
 /* eslint-disable react/prop-types, react/display-name */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 import { ThemeProvider } from 'emotion-theming';
 import { css } from '@emotion/core';

.storybook/components/Story.js

@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import { Story as StorybookStory } from '@storybook/addon-docs/blocks';
 
 import Preview from './Preview';

.storybook/components/Swatch.js

@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';

.storybook/components/Teaser.js

@@ -13,7 +13,6 @@
  * limitations under the License.
  */
 
-import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { ThemeProvider } from 'emotion-theming';

.storybook/components/Type.js

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import React, { Fragment, createElement } from 'react';
+import { Fragment, createElement } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';

.storybook/preview.js

@@ -1,5 +1,4 @@
-import React from 'react';
-import { addDecorator, addParameters } from '@storybook/react';
+import { addParameters } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { withPerformance } from 'storybook-addon-performance';
 import { ThemeProvider } from 'emotion-theming';

.storybook/util/theme.js

@@ -86,7 +86,7 @@ export const components = {
     size: TEXT_SIZE,
     css: italicStyles,
   }),
-  ul: withThemeProvider(List, { size: TEXT_SIZE }),
-  ol: withThemeProvider(List, { size: TEXT_SIZE, variant: 'ordered' }),
+  ul: withThemeProvider(List),
+  ol: withThemeProvider(List, { variant: 'ordered' }),
   a: withThemeProvider(Link, { size: TEXT_SIZE }),
 };

jest.config.base.js

@@ -14,25 +14,16 @@
  */
 
 module.exports = {
-  preset: 'ts-jest',
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json'],
   // HACK: See https://github.com/storybookjs/storybook/pull/9292
   moduleNameMapper: {
     'react-syntax-highlighter/dist/esm/(.*)':
       'react-syntax-highlighter/dist/cjs/$1',
   },
   transform: {
-    '^.+\\.(js|jsx)$': 'babel-jest',
-    '^.+\\.(ts|tsx)$': 'ts-jest',
+    '^.+\\.(js|jsx|ts|tsx)$': 'babel-jest',
     '^.+\\.(md|mdx)$': '<rootDir>/jest.mdxTransformer.js',
   },
   testPathIgnorePatterns: ['/node_modules/', '/dist/'],
   testURL: 'http://localhost',
-  globals: {
-    'ts-jest': {
-      tsconfig: {
-        jsx: 'react',
-      },
-    },
-  },
 };

package.json

@@ -75,7 +75,6 @@
     "react-dom": "^17.0.1",
     "storybook-addon-performance": "^0.15.1",
     "svgo": "^2.0.3",
-    "ts-jest": "^26.4.4",
     "typescript": "^4.0.5"
   }
 }

packages/circuit-ui/cli/migrate/__testfixtures__/as-prop.input.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { Heading, SubHeading, Text, Input } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/as-prop.output.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { Heading, SubHeading, Text, Input } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/badge-variant-enum.input.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { Badge } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/badge-variant-enum.output.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { Badge } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/body-variant-highlight.input.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { Body, Text } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/body-variant-highlight.output.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { Body, Text } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/button-size-giga.input.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { Button } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/button-size-giga.output.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { Button } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/button-variant-enum.input.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { Button, LoadingButton, Text } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/button-variant-enum.output.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { Button, LoadingButton, Text } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v2.input.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { ListView, SvgButton as SpecialButton } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v2.output.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { CardList, IconButton as SpecialButton } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v3.input.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import {
   Heading,

packages/circuit-ui/cli/migrate/__testfixtures__/component-names-v3.output.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import {
   Headline,

packages/circuit-ui/cli/migrate/__testfixtures__/component-static-properties.input.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Heading, CardList } from '@sumup/circuit-ui';
 
 const BaseHeading = () => <Heading size={Heading.KILO} />;

packages/circuit-ui/cli/migrate/__testfixtures__/component-static-properties.output.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Heading, CardList } from '@sumup/circuit-ui';
 
 const BaseHeading = () => <Heading size={'kilo'} />;

packages/circuit-ui/cli/migrate/__testfixtures__/exit-animations.input.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { LoadingButton } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/exit-animations.output.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { LoadingButton } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/inline-message-variant-enum.input.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { InlineMessage } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/inline-message-variant-enum.output.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { InlineMessage } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/input-deepref-prop.input.js

@@ -1,4 +1,4 @@
-import React, { useRef, Fragment } from 'react';
+import { useRef, Fragment } from 'react';
 import styled from '@emotion/styled';
 import { Input, TextArea } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/input-deepref-prop.output.js

@@ -1,4 +1,4 @@
-import React, { useRef, Fragment } from 'react';
+import { useRef, Fragment } from 'react';
 import styled from '@emotion/styled';
 import { Input, TextArea } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/input-styles-prop.input.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { Input, TextArea } from '@sumup/circuit-ui';

packages/circuit-ui/cli/migrate/__testfixtures__/input-styles-prop.output.js

@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { Input, TextArea } from '@sumup/circuit-ui';

packages/circuit-ui/cli/migrate/__testfixtures__/list-variant-enum.input.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { List, Text } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/list-variant-enum.output.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { List, Text } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/onchange-prop.input.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { RadioButton, Switch, Toggle } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/onchange-prop.output.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { RadioButton, Switch, Toggle } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/selector-props.input.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { Selector } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/selector-props.output.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { Selector } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/theme-grid-tera.input.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { Col } from '@sumup/circuit-ui';

packages/circuit-ui/cli/migrate/__testfixtures__/theme-grid-tera.output.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { css } from '@emotion/core';
 import { Col } from '@sumup/circuit-ui';

packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-1.input.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ThemeProvider } from 'emotion-theming';
 import { theme } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-1.output.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ThemeProvider } from 'emotion-theming';
 import { light } from '@sumup/design-tokens';
 

packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-2.input.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ThemeProvider } from 'emotion-theming';
 import { theme, Text } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/theme-to-design-tokens-2.output.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ThemeProvider } from 'emotion-theming';
 import { Text } from '@sumup/circuit-ui';
 import { light } from '@sumup/design-tokens';

packages/circuit-ui/cli/migrate/__testfixtures__/toggle-checked-prop.input.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { Toggle } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/toggle-checked-prop.output.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { Toggle } from '@sumup/circuit-ui';
 

packages/circuit-ui/cli/migrate/__testfixtures__/typography-sizes.input.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import {
   Heading,

packages/circuit-ui/cli/migrate/__testfixtures__/typography-sizes.output.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import {
   Heading,