refactor: remove React imports due to new jsx transform

.eslintrc.js

@@ -1,3 +1,5 @@
+process.env.ENABLE_NEW_JSX_TRANSFORM = 'true';
+
 const path = require('path');
 
 module.exports = {

packages/gatsby-theme-api-docs/src/components/description.js

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

packages/gatsby-theme-api-docs/src/components/resource-method.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { useReadResourceByResourcePath } from '../hooks/use-read-resource-by-resource-path';
 import reportError from '../utils/report-error';

packages/gatsby-theme-api-docs/src/components/resource/method/request-representation.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import SpacingsStack from '@commercetools-uikit/spacings-stack';
 import {

packages/gatsby-theme-api-docs/src/components/resource/method/request-response-examples.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import SpacingsStack from '@commercetools-uikit/spacings-stack';
 import { MultiCodeBlock, CodeBlock } from '@commercetools-docs/ui-kit';

packages/gatsby-theme-api-docs/src/components/resource/method/responses.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';

packages/gatsby-theme-api-docs/src/components/resource/method/scopes.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { designSystem } from '@commercetools-docs/ui-kit';

packages/gatsby-theme-api-docs/src/components/resource/method/url.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css } from '@emotion/react';

packages/gatsby-theme-api-docs/src/components/resource/resource-by-api-key.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { useReadResourceByResourcePath } from '../../hooks/use-read-resource-by-resource-path';
 import Resource from './resource';

packages/gatsby-theme-api-docs/src/components/resource/resource.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import SpacingsStack from '@commercetools-uikit/spacings-stack';
 import { FullWidthContainer } from '@commercetools-docs/gatsby-theme-docs';

packages/gatsby-theme-api-docs/src/components/type/enum.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { Markdown } from '@commercetools-docs/ui-kit';
 import SpacingsStack from '@commercetools-uikit/spacings-stack';
@@ -31,7 +31,7 @@ const Enum = ({
                 enumDescriptions.find((enumDesc) => enumDesc.name === value);
 
               return (
-                <React.Fragment key={value}>
+                <Fragment key={value}>
                   <Markdown.Dt>
                     <Markdown.InlineCode>{value}</Markdown.InlineCode>
                   </Markdown.Dt>
@@ -42,7 +42,7 @@ const Enum = ({
                       />
                     </Markdown.Dd>
                   )}
-                </React.Fragment>
+                </Fragment>
               );
             })}
         </Markdown.Dl>{' '}

packages/gatsby-theme-api-docs/src/components/type/examples.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import SpacingsStack from '@commercetools-uikit/spacings-stack';
 import { MultiCodeBlock, CodeBlock } from '@commercetools-docs/ui-kit';

packages/gatsby-theme-api-docs/src/components/type/properties/properties.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import Table from '../../table';
 import Rows from './rows/rows';

packages/gatsby-theme-api-docs/src/components/type/properties/regex-properties.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { Markdown, designSystem } from '@commercetools-docs/ui-kit';

packages/gatsby-theme-api-docs/src/components/type/properties/rows/description.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { Markdown, useISO310NumberFormatter } from '@commercetools-docs/ui-kit';
@@ -142,25 +142,25 @@ const Description = (props) => {
             Can be{' '}
             {props.property.enumeration.map((currentEnum, index) => {
               return index === props.property.enumeration.length - 1 ? (
-                <React.Fragment key={currentEnum}>
+                <Fragment key={currentEnum}>
                   or{' '}
                   <Markdown.InlineCode css={customCodeStyle}>
                     {generateAppropriatePrimitiveText(
                       props.property.type,
                       currentEnum
                     )}
                   </Markdown.InlineCode>
-                </React.Fragment>
+                </Fragment>
               ) : (
-                <React.Fragment key={currentEnum}>
+                <Fragment key={currentEnum}>
                   <Markdown.InlineCode css={customCodeStyle}>
                     {generateAppropriatePrimitiveText(
                       props.property.type,
                       currentEnum
                     )}
                   </Markdown.InlineCode>
                   ,{' '}
-                </React.Fragment>
+                </Fragment>
               );
             })}
             {'\u200B' /* zero-width space for the search crawler */}

packages/gatsby-theme-api-docs/src/components/type/properties/rows/rows.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import NameType from './name-type';
 import Description from './description';

packages/gatsby-theme-api-docs/src/components/type/type-by-api-key.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import ApiType from './type';
 import { useApiTypes } from '../../hooks/use-api-types';
 

packages/gatsby-theme-api-docs/src/components/type/type.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import {
   FullWidthContainer,

packages/gatsby-theme-api-docs/src/utils/render-type-as-link.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { Link } from '@commercetools-docs/gatsby-theme-docs';
 import { locationForType } from '../hooks/use-type-locations';
 

packages/gatsby-theme-api-docs/src/utils/report-error.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { ContentNotifications } from '@commercetools-docs/ui-kit';
 
 function reportError(errorMsg) {

packages/gatsby-theme-code-examples/src/code-example.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import {
   MultiCodeBlock,

packages/gatsby-theme-code-examples/src/multi-code-example.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { Children } from 'react';
 import PropTypes from 'prop-types';
 import {
   ContentNotifications,
@@ -13,7 +13,7 @@ function MultiCodeExample(props) {
   try {
     return (
       <MultiCodeBlock title={props.title} secondaryTheme={props.secondaryTheme}>
-        {React.Children.map(props.children, (child, index) => {
+        {Children.map(props.children, (child, index) => {
           if (!child.props || child.props.mdxType !== 'CodeExample') {
             throw new Error(
               `Children of <MultiLanguageCodeExamples> must be a <CodeExample> component and not "${

packages/gatsby-theme-constants/src/constant.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import {
   ContentNotifications,

packages/gatsby-theme-docs/gatsby-browser.js

@@ -11,7 +11,7 @@ import '@fontsource/roboto/latin-700.css';
 import '@fontsource/roboto-mono/latin-400.css';
 import '@fontsource/roboto-mono/latin-500.css';
 import '@fontsource/roboto-mono/latin-700.css';
-import React from 'react';
+
 import Prism from 'prism-react-renderer/prism';
 import { CacheProvider } from '@emotion/react';
 import { docsCache } from './utils/create-emotion-cache';

packages/gatsby-theme-docs/gatsby-ssr.js

@@ -3,7 +3,7 @@
  *
  * See: https://www.gatsbyjs.org/docs/ssr-apis/
  */
-import React from 'react';
+
 import { renderToString } from 'react-dom/server';
 import { withPrefix } from 'gatsby';
 import { createContentDigest } from 'gatsby-core-utils';

packages/gatsby-theme-docs/src/components/algolia-search.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { forwardRef, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { css, Global } from '@emotion/react';
 import { designSystem } from '@commercetools-docs/ui-kit';
@@ -223,12 +223,11 @@ const algoliaStyles = css`
   }
 `;
 
-const AlgoliaSearch = React.forwardRef((props, ref) => {
-  const [isSearchEnabled, setIsSearchEnabled] = React.useState(true);
-  const [hasErrorLoadingAlgolia, setHasErrorLoadingAlgolia] =
-    React.useState(false);
+const AlgoliaSearch = forwardRef((props, ref) => {
+  const [isSearchEnabled, setIsSearchEnabled] = useState(true);
+  const [hasErrorLoadingAlgolia, setHasErrorLoadingAlgolia] = useState(false);
 
-  React.useEffect(() => {
+  useEffect(() => {
     // https://github.com/algolia/docsearch/issues/352
     const isClient = typeof window !== 'undefined';
     if (isClient) {

packages/gatsby-theme-docs/src/components/anchor.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 /**

packages/gatsby-theme-docs/src/components/beta-flag.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { designSystem } from '@commercetools-docs/ui-kit';

packages/gatsby-theme-docs/src/components/burger-icon.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 
 const svgPaths = {

packages/gatsby-theme-docs/src/components/card.js

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

packages/gatsby-theme-docs/src/components/cards.js

@@ -1,14 +1,13 @@
-import React from 'react';
+import { Children, cloneElement, isValidElement } from 'react';
 import PropTypes from 'prop-types';
-import styled from '@emotion/styled';
 import { ContentNotifications, cardElements } from '@commercetools-docs/ui-kit';
 
 const Cards = (props) => {
   try {
     return (
       <cardElements.CardsContainer {...props} data-search-key="cards-container">
-        {React.Children.map(props.children, (child) => {
-          if (!React.isValidElement(child)) {
+        {Children.map(props.children, (child) => {
+          if (!isValidElement(child)) {
             throwErrorMessage(child);
           } else if (
             child.type.displayName === 'MDXCreateElement' &&
@@ -18,7 +17,7 @@ const Cards = (props) => {
             throwErrorMessage(child.props.mdxType);
           }
 
-          return React.cloneElement(
+          return cloneElement(
             child,
             {
               clickable: props.clickable,

packages/gatsby-theme-docs/src/components/child-sections-nav.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import {

packages/gatsby-theme-docs/src/components/content-pagination.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import { useStaticQuery, graphql, Link } from 'gatsby';
 import styled from '@emotion/styled';

packages/gatsby-theme-docs/src/components/content-pagination.spec.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 
 import { PurePagination } from './content-pagination';

packages/gatsby-theme-docs/src/components/error-boundary.js

@@ -1,8 +1,9 @@
 /* eslint-disable react/prop-types,class-methods-use-this */
-import React from 'react';
+
+import { Component } from 'react';
 import reportErrorToSentry from '../utils/report-error-to-sentry';
 
-class ErrorBoundary extends React.Component {
+class ErrorBoundary extends Component {
   static getDerivedStateFromError(/* error */) {
     // Update state so the next render will show the fallback UI.
     return { hasError: true };

packages/gatsby-theme-docs/src/components/global-navigation-link.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { css } from '@emotion/react';
 import { designSystem } from '@commercetools-docs/ui-kit';
 import Link from './link';

packages/gatsby-theme-docs/src/components/global-notification.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import SpacingsInline from '@commercetools-uikit/spacings-inline';

packages/gatsby-theme-docs/src/components/link.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import { cloneElement, isValidElement } from 'react';
 import PropTypes from 'prop-types';
 import { css } from '@emotion/react';
 import { Location } from '@reach/router';
@@ -136,11 +136,11 @@ const PureLink = (extendedProps) => {
       hrefObject.host
     )
   ) {
-    const linkWithIcon = React.isValidElement(props.children) ? (
+    const linkWithIcon = isValidElement(props.children) ? (
       // In case the children are a React element (e.g. <code>) we need to inject
       // the external link icon next to the actual text.
       // For this we assume that the React element's own child is plain text.
-      React.cloneElement(props.children, {
+      cloneElement(props.children, {
         children: (
           <InlineLink>
             <span css={getStylesFromProps({ noUnderline })}>

packages/gatsby-theme-docs/src/components/link.spec.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render } from '@testing-library/react';
 import {
   createMemorySource,

packages/gatsby-theme-docs/src/components/release-note-heading.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { designSystem } from '@commercetools-docs/ui-kit';
 

packages/gatsby-theme-docs/src/components/release-notes-filter-dates.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import { designSystem, IsoDateFormat } from '@commercetools-docs/ui-kit';
 import SpacingsStack from '@commercetools-uikit/spacings-stack';

packages/gatsby-theme-docs/src/components/release-notes-filter-topics.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import styled from '@emotion/styled';
 import SpacingsStack from '@commercetools-uikit/spacings-stack';
 import SpacingsInline from '@commercetools-uikit/spacings-inline';

packages/gatsby-theme-docs/src/components/release-notes-subscribe-links.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { withPrefix } from 'gatsby';
 import { css } from '@emotion/react';
 import SpacingsStack from '@commercetools-uikit/spacings-stack';

packages/gatsby-theme-docs/src/components/search-dialog.js

@@ -1,11 +1,11 @@
-import React from 'react';
+import { lazy, Suspense, useEffect, useRef } from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
 import { css, keyframes } from '@emotion/react';
 import { designSystem } from '@commercetools-docs/ui-kit';
 import SearchInput from './search-input';
 
-const AlgoliaSearch = React.lazy(() => import('./algolia-search'));
+const AlgoliaSearch = lazy(() => import('./algolia-search'));
 
 const searchInputId = 'search-bar';
 
@@ -122,9 +122,9 @@ const InputPlaceholder = () => (
 );
 
 const SearchDialog = (props) => {
-  const ref = React.useRef();
+  const ref = useRef();
   const { onClose } = props;
-  React.useEffect(() => {
+  useEffect(() => {
     const onKeyPress = (event) => {
       // Listen to "escape" key events to close the dialog
       if (event.key.toLowerCase() === 'escape') {
@@ -148,7 +148,7 @@ const SearchDialog = (props) => {
               event.stopPropagation();
             }}
           >
-            <React.Suspense fallback={<InputPlaceholder />}>
+            <Suspense fallback={<InputPlaceholder />}>
               <AlgoliaSearch searchInputId={searchInputId} ref={ref}>
                 <SearchInput
                   ref={ref}
@@ -157,7 +157,7 @@ const SearchDialog = (props) => {
                   onClose={props.onClose}
                 />
               </AlgoliaSearch>
-            </React.Suspense>
+            </Suspense>
           </Content>
         </Center>
       </div>

packages/gatsby-theme-docs/src/components/search-dialog.spec.js

@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, waitFor, fireEvent } from '@testing-library/react';
 import SearchDialog from './search-dialog';