Remove usage of JSX pragma (/** @jsx jsx */) + add babel config + upd…

…ate React 16.13.1 > 17.0.1 + massive reformatting
UnlyEd · Oct 29, 2020 · a9df25e · a9df25e · github-actions · Oct 29, 2020
1 parent a5c140e
commit a9df25e
Show file tree

Hide file tree

Showing 81 changed files with 136 additions and 270 deletions.
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ['next/babel', '@emotion/babel-preset-css-prop'],
+};
diff --git a/package.json b/package.json
@@ -128,9 +128,9 @@
     "next-cookies": "2.0.3",
     "prop-types": "15.7.2",
     "rc-tooltip": "5.0.0",
-    "react": "16.13.1",
+    "react": "17.0.1",
     "react-code-blocks": "0.0.8",
-    "react-dom": "16.13.1",
+    "react-dom": "17.0.1",
     "react-i18next": "11.7.2",
     "reactstrap": "8.5.1",
     "recompose": "0.30.0",
@@ -139,6 +139,7 @@
     "winston": "3.2.1"
   },
   "devDependencies": {
+    "@emotion/babel-preset-css-prop": "10.0.27",
     "@next/bundle-analyzer": "9.5.3",
     "@svgr/cli": "5.4.0",
     "@types/amplitude-js": "5.11.0",

diff --git a/src/components/ComponentTemplate.tsx b/src/components/ComponentTemplate.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import React from 'react';
 
 import Text from './utils/Text';

diff --git a/src/components/animations/Loader.tsx b/src/components/animations/Loader.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import React from 'react';
 
 import AnimatedLoader from '../svg/AnimatedLoader';

diff --git a/src/components/appBootstrap/BrowserPageBootstrap.tsx b/src/components/appBootstrap/BrowserPageBootstrap.tsx
@@ -1,9 +1,7 @@
-/** @jsx jsx */
 import {
   Amplitude,
   AmplitudeProvider,
 } from '@amplitude/react-amplitude';
-import { jsx } from '@emotion/core';
 import * as Sentry from '@sentry/node';
 import { createLogger } from '@unly/utils-simple-logger';
 import { AmplitudeClient } from 'amplitude-js';

diff --git a/src/components/appBootstrap/MultiversalGlobalStyles.tsx b/src/components/appBootstrap/MultiversalGlobalStyles.tsx
@@ -1,8 +1,6 @@
-/** @jsx jsx */
 import {
   css,
   Global,
-  jsx,
 } from '@emotion/core';
 
 import {

diff --git a/src/components/appBootstrap/ServerPageBootstrap.tsx b/src/components/appBootstrap/ServerPageBootstrap.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import * as Sentry from '@sentry/node';
 import { createLogger } from '@unly/utils-simple-logger';
 import React from 'react';

diff --git a/src/components/assets/Logo.tsx b/src/components/assets/Logo.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import styled from '@emotion/styled';
 import classnames from 'classnames';
 import deepmerge from 'deepmerge';

diff --git a/src/components/data/AllProducts.tsx b/src/components/data/AllProducts.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import filter from 'lodash.filter';
 import React from 'react';
 
@@ -17,7 +15,7 @@ const AllProducts: React.FunctionComponent<Props> = (props) => {
   const productsDraft: AirtableRecord<Product>[] = filter(products, { fields: { status: 'DRAFT' } });
 
   return (
-    <>
+    <React.Fragment>
       <h2>Published products</h2>
 
       <Products
@@ -31,7 +29,7 @@ const AllProducts: React.FunctionComponent<Props> = (props) => {
       <Products
         products={productsDraft}
       />
-    </>
+    </React.Fragment>
   );
 };
 

diff --git a/src/components/data/ProductRow.tsx b/src/components/data/ProductRow.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import React from 'react';
 import {
   Col,

diff --git a/src/components/data/Products.tsx b/src/components/data/Products.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import map from 'lodash.map';
 import React from 'react';
 import { Container } from 'reactstrap';

diff --git a/src/components/doc/BuiltInFeaturesSection.tsx b/src/components/doc/BuiltInFeaturesSection.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import React from 'react';
 import {
   Alert,

diff --git a/src/components/doc/BuiltInFeaturesSidebar.tsx b/src/components/doc/BuiltInFeaturesSidebar.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import map from 'lodash.map';
 import {
   NextRouter,

diff --git a/src/components/doc/BuiltInUtilitiesSection.tsx b/src/components/doc/BuiltInUtilitiesSection.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import React from 'react';
 import {
   Button,

diff --git a/src/components/doc/BuiltInUtilitiesSidebar.tsx b/src/components/doc/BuiltInUtilitiesSidebar.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import map from 'lodash.map';
 import {
   NextRouter,

diff --git a/src/components/doc/DocPage.tsx b/src/components/doc/DocPage.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import React, { ReactNode } from 'react';
 
 type Props = {

diff --git a/src/components/doc/DocSection.tsx b/src/components/doc/DocSection.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import React, { ReactNode } from 'react';
 
 type Props = {

diff --git a/src/components/doc/ExternalFeaturesSection.tsx b/src/components/doc/ExternalFeaturesSection.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import React from 'react';
 import {
   Alert,

diff --git a/src/components/doc/IntroductionSection.tsx b/src/components/doc/IntroductionSection.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import React from 'react';
 import {
   Alert,

diff --git a/src/components/doc/NativeFeaturesSection.tsx b/src/components/doc/NativeFeaturesSection.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import React from 'react';
 import {
   Alert,

diff --git a/src/components/doc/NativeFeaturesSidebar.tsx b/src/components/doc/NativeFeaturesSidebar.tsx
@@ -1,5 +1,3 @@
-/** @jsx jsx */
-import { jsx } from '@emotion/core';
 import map from 'lodash.map';
 import {
   NextRouter,

diff --git a/src/components/doc/SidebarFooter.tsx b/src/components/doc/SidebarFooter.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -71,32 +67,32 @@ const SidebarFooter: React.FunctionComponent<Props> = (props): JSX.Element => {
     >
       {
         previousSectionHref && nextSectionHref && (
-          <>
+          <React.Fragment>
             <PreviousSectionLink previousSectionHref={previousSectionHref} />
             {' - '}
             <NextSectionLink nextSectionHref={nextSectionHref} />
             <HomePageLink />
-          </>
+          </React.Fragment>
         )
       }
 
       {
         !previousSectionHref && nextSectionHref && (
-          <>
+          <React.Fragment>
             <HomePageLink />
             {' - '}
             <NextSectionLink nextSectionHref={nextSectionHref} />
-          </>
+          </React.Fragment>
         )
       }
 
       {
         previousSectionHref && !nextSectionHref && (
-          <>
+          <React.Fragment>
             <PreviousSectionLink previousSectionHref={previousSectionHref} />
             {' - '}
             <HomePageLink />
-          </>
+          </React.Fragment>
         )
       }
     </div>

diff --git a/src/components/doc/SidebarToggle.tsx b/src/components/doc/SidebarToggle.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 

diff --git a/src/components/errors/DefaultErrorLayout.tsx b/src/components/errors/DefaultErrorLayout.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import * as Sentry from '@sentry/node';
 import * as React from 'react';
 import { Button } from 'reactstrap';

diff --git a/src/components/errors/ErrorDebug.tsx b/src/components/errors/ErrorDebug.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import * as React from 'react';
 
 type Props = {
@@ -63,11 +59,11 @@ const ErrorDebug = (props: Props): JSX.Element => {
 
         {
           context && (
-            <>
+            <React.Fragment>
               <b>Error additional context</b>:<br />
               <code>{stringifiedContext}</code>
               <hr />
-            </>
+            </React.Fragment>
           )
         }
 

diff --git a/src/components/i18n/I18nBtnChangeLocale.tsx b/src/components/i18n/I18nBtnChangeLocale.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import { useTheme } from 'emotion-theming';
 import startsWith from 'lodash.startswith';
 import {

diff --git a/src/components/pageLayouts/DefaultLayout.tsx b/src/components/pageLayouts/DefaultLayout.tsx
@@ -1,9 +1,7 @@
-/** @jsx jsx */
 import {
   Amplitude,
   LogOnMount,
 } from '@amplitude/react-amplitude';
-import { jsx } from '@emotion/core';
 import { createLogger } from '@unly/utils-simple-logger';
 import classnames from 'classnames';
 import {

diff --git a/src/components/pageLayouts/DefaultPageContainer.tsx b/src/components/pageLayouts/DefaultPageContainer.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import classnames from 'classnames';
 import { useTheme } from 'emotion-theming';
 import React from 'react';
@@ -132,13 +128,13 @@ const DefaultPageContainer: React.FunctionComponent<Props> = (props): JSX.Elemen
         <div className={classnames('sidebar-container')}>
           {
             isSidebarOpen ? (
-              <>
+              <React.Fragment>
                 <SidebarToggle
                   isSidebarOpen={isSidebarOpen}
                   setIsSidebarOpen={setIsSidebarOpen}
                 />
                 <Sidebar className={'sidebar'} />
-              </>
+              </React.Fragment>
             ) : (
               <SidebarToggle
                 isSidebarOpen={isSidebarOpen}

diff --git a/src/components/pageLayouts/Footer.tsx b/src/components/pageLayouts/Footer.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import { useTheme } from 'emotion-theming';
 import React from 'react';
 import { useTranslation } from 'react-i18next';

diff --git a/src/components/pageLayouts/Nav.tsx b/src/components/pageLayouts/Nav.tsx
@@ -1,9 +1,5 @@
-/** @jsx jsx */
 import { Amplitude } from '@amplitude/react-amplitude';
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classnames from 'classnames';
 import { useTheme } from 'emotion-theming';

diff --git a/src/components/pageLayouts/PreviewModeBanner.tsx b/src/components/pageLayouts/PreviewModeBanner.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   NextRouter,

diff --git a/src/components/pageLayouts/QuickPreviewLayout.tsx b/src/components/pageLayouts/QuickPreviewLayout.tsx
@@ -1,12 +1,8 @@
-/** @jsx jsx */
 import {
   Amplitude,
   LogOnMount,
 } from '@amplitude/react-amplitude';
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { createLogger } from '@unly/utils-simple-logger';
 import React from 'react';

diff --git a/src/components/rehydration/DisplayOnBrowserMount.tsx b/src/components/rehydration/DisplayOnBrowserMount.tsx
@@ -76,9 +76,9 @@ const DisplayOnBrowserMount: React.FunctionComponent<Props> = (props) => {
   }
 
   return (
-    <>
+    <React.Fragment>
       {children}
-    </>
+    </React.Fragment>
   );
 };
 

diff --git a/src/components/utils/Cards.tsx b/src/components/utils/Cards.tsx
@@ -1,8 +1,4 @@
-/** @jsx jsx */
-import {
-  css,
-  jsx,
-} from '@emotion/core';
+import { css } from '@emotion/core';
 import classnames from 'classnames';
 import React, { ReactNode } from 'react';
 import { CardDeck } from 'reactstrap';