Deps - Upgrade to Emotion v11 (from v10) [BREAKING CHANGES]

.eslintrc.yml

@@ -15,6 +15,7 @@ plugins:
   - jest
   - react
   - react-hooks
+  - '@emotion'
 parser: '@typescript-eslint/parser'
 parserOptions:
   project: ./tsconfig.json
@@ -95,6 +96,11 @@ rules: # See https://eslint.org/docs/rules
       extendDefaults: true
       types:
         '{}': false # Allow writing `type Props = {}` - See https://github.com/typescript-eslint/typescript-eslint/issues/2063#issuecomment-632833366
+
+  # Emotion rules - See https://github.com/emotion-js/emotion/tree/master/packages/eslint-plugin
+  # Emotion 11 - See https://emotion.sh/docs/emotion-11
+  '@emotion/pkg-renaming': error
+
 overrides:
   - files: ['**/*.tsx']
     rules:

.github/workflows/deploy-vercel-staging.yml

@@ -398,7 +398,7 @@ jobs:
       # On E2E failure, add a comment to the PR with additional information, if there is an open PR for the current branch
       - name: Comment PR (E2E failure)
         uses: peter-evans/create-or-update-comment@v1 # See https://github.com/peter-evans/create-or-update-comment
-        if: fromJson(steps.restore-variable.outputs.variables).GITHUB_PULL_REQUEST_ID && success()
+        if: fromJson(steps.restore-variable.outputs.variables).GITHUB_PULL_REQUEST_ID && failure()
         with:
           token: ${{ secrets.GITHUB_TOKEN }}
           issue-number: ${{ fromJson(steps.restore-variable.outputs.variables).GITHUB_PULL_REQUEST_ID }}

babel.config.js

@@ -5,8 +5,20 @@
  *
  * @see https://nextjs.org/docs/advanced-features/customizing-babel-config Official doc reference v10
  * @see https://github.com/vercel/next.js/blob/canary/packages/next/build/babel/preset.ts You can take a look at this file to learn about the presets included by next/babel.
+ * @see https://emotion.sh/docs/css-prop##babel-preset Configuring Emotion 11
  * @example https://github.com/vercel/next.js/tree/canary/examples/with-custom-babel-config Next.js official example of customizing Babel
  */
 module.exports = {
-  presets: ['next/babel', '@emotion/babel-preset-css-prop'],
+  presets: [
+    [
+      "next/babel",
+      {
+        "preset-react": {
+          "runtime": "automatic",
+          "importSource": "@emotion/react"
+        }
+      }
+    ]
+  ],
+  plugins: ["@emotion/babel-plugin"],
 };

cypress/tsconfig.json

@@ -6,7 +6,6 @@
   "exclude": [],
   "compilerOptions": {
     "baseUrl": ".",
-    "jsx": "react",
     "types": [
       "cypress"
     ],

package.json

@@ -91,8 +91,8 @@
   },
   "dependencies": {
     "@amplitude/react-amplitude": "1.0.0",
-    "@emotion/core": "10.0.35",
-    "@emotion/styled": "10.0.27",
+    "@emotion/react": "11.1.4",
+    "@emotion/styled": "11.0.0",
     "@fortawesome/fontawesome-svg-core": "1.2.32",
     "@fortawesome/free-brands-svg-icons": "5.15.1",
     "@fortawesome/free-regular-svg-icons": "5.15.1",
@@ -113,7 +113,6 @@
     "css-to-react-native": "3.0.0",
     "csstype": "3.0.6",
     "deepmerge": "4.2.2",
-    "emotion-theming": "10.0.27",
     "flatted": "3.1.0",
     "i18next": "19.8.4",
     "i18next-locize-backend": "4.1.8",
@@ -160,7 +159,7 @@
   },
   "devDependencies": {
     "@cypress/react": "4.16.3",
-    "@emotion/babel-preset-css-prop": "10.0.27",
+    "@emotion/eslint-plugin": "11.0.0",
     "@next/bundle-analyzer": "10.0.5",
     "@svgr/cli": "5.5.0",
     "@types/amplitude-js": "7.0.0",

src/components/ComponentTemplate.tsx

@@ -1,26 +1,22 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React from 'react';
 
-import Text from './utils/Text';
-
 type Props = {}
 
 /**
  * This component is a template meant to be duplicated to quickly get started with new React components.
  */
 const ComponentTemplate: React.FunctionComponent<Props> = (props): JSX.Element => {
   return (
-    <Text
+    <div
       css={css`
         margin: 30px;
-    `}
-    >
-      {`
-        This component is a template meant to be duplicated to quickly get started with new React components.
-
-        Feel free to adapt it at your convenience
       `}
-    </Text>
+    >
+      This component is a template meant to be duplicated to quickly get started with new React components.<br />
+      <br />
+      Feel free to adapt it at your convenience
+    </div>
   );
 };
 

src/components/animations/Loader.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React from 'react';
 
 import AnimatedLoader from '../svg/AnimatedLoader';

src/components/appBootstrap/BrowserPageBootstrap.tsx

@@ -5,7 +5,7 @@ import {
 import * as Sentry from '@sentry/node';
 import { createLogger } from '@unly/utils-simple-logger';
 import { AmplitudeClient } from 'amplitude-js';
-import { useTheme } from 'emotion-theming';
+import { useTheme } from '@emotion/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import useCustomer from '../../hooks/useCustomer';
@@ -76,7 +76,7 @@ const BrowserPageBootstrap = (props: BrowserPageBootstrapProps): JSX.Element =>
     cookiesManager,
     userSession,
   };
-  const theme = useTheme<CustomerTheme>();
+  const theme = useTheme();
   const isCypressRunning = detectCypress();
   const isLightHouseRunning = detectLightHouse();
 

src/components/appBootstrap/MultiversalAppBootstrap.tsx

@@ -1,7 +1,7 @@
 import * as Sentry from '@sentry/node';
 import { isBrowser } from '@unly/utils';
 import { createLogger } from '@unly/utils-simple-logger';
-import { ThemeProvider } from 'emotion-theming';
+import { ThemeProvider } from '@emotion/react';
 import { i18n } from 'i18next';
 import find from 'lodash.find';
 import includes from 'lodash.includes';

src/components/appBootstrap/MultiversalGlobalStyles.tsx

@@ -1,7 +1,7 @@
 import {
   css,
   Global,
-} from '@emotion/core';
+} from '@emotion/react';
 import React from 'react';
 import { NRN_DEFAULT_FALLBACK_FONTS } from '../../constants';
 import { CustomerTheme } from '../../types/data/CustomerTheme';

src/components/data/ProductRow.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React from 'react';
 import {
   Col,

src/components/data/Products.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import map from 'lodash.map';
 import React from 'react';
 import { Container } from 'reactstrap';

src/components/doc/DocPage.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React, { ReactNode } from 'react';
 
 type Props = {

src/components/doc/DocSection.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React, { ReactNode } from 'react';
 
 type Props = {

src/components/doc/IntroductionSection.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React from 'react';
 import {
   Alert,

src/components/doc/SidebarFooter.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 import { useTranslation } from 'react-i18next';

src/components/doc/SidebarToggle.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import React from 'react';
 

src/components/errors/DefaultErrorLayout.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import * as Sentry from '@sentry/node';
 import * as React from 'react';
 import { Button } from 'reactstrap';

src/components/errors/ErrorDebug.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import * as React from 'react';
 import { Fragment } from 'react';
 

src/components/pageLayouts/DefaultPageContainer.tsx

@@ -1,6 +1,6 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme } from 'emotion-theming';
+import { useTheme } from '@emotion/react';
 import React from 'react';
 import { Container } from 'reactstrap';
 

src/components/pageLayouts/Footer.tsx

@@ -1,5 +1,5 @@
-import { css } from '@emotion/core';
-import { useTheme } from 'emotion-theming';
+import { css } from '@emotion/react';
+import { useTheme } from '@emotion/react';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -28,7 +28,7 @@ const Footer: React.FunctionComponent<Props> = (props) => {
   const customer: Customer = useCustomer();
   const { availableLanguages } = customer;
   const shouldDisplayI18nButton = availableLanguages?.length > 1;
-  const theme = useTheme<CustomerTheme>();
+  const theme = useTheme();
   const {
     backgroundColor,
     onBackgroundColor,

src/components/pageLayouts/Nav.tsx

@@ -1,8 +1,8 @@
 import { Amplitude } from '@amplitude/react-amplitude';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import classnames from 'classnames';
-import { useTheme } from 'emotion-theming';
+import { useTheme } from '@emotion/react';
 import kebabCase from 'lodash.kebabcase';
 import map from 'lodash.map';
 import {
@@ -46,7 +46,7 @@ type Props = {};
 const Nav: React.FunctionComponent<Props> = () => {
   const { t } = useTranslation();
   const router: NextRouter = useRouter();
-  const theme = useTheme<CustomerTheme>();
+  const theme = useTheme();
   const { primaryColor, logo: logoAirtable } = theme;
   const logo: AirtableAttachment = logoAirtable;
   const { locale }: I18n = useI18n();

src/components/pageLayouts/PreviewModeBanner.tsx

@@ -1,6 +1,6 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { useTheme } from 'emotion-theming';
+import { useTheme } from '@emotion/react';
 import {
   NextRouter,
   useRouter,
@@ -61,7 +61,7 @@ const PreviewModeBanner: React.FunctionComponent<Props> = (props): JSX.Element =
   const { t } = useTranslation();
   const {
     secondaryColor, secondaryColorVariant1, onSecondaryColor,
-  } = useTheme<CustomerTheme>();
+  } = useTheme();
 
   if (process.env.NEXT_PUBLIC_APP_STAGE === 'production') {
     return null;

src/components/pageLayouts/QuickPreviewBanner.tsx

@@ -1,7 +1,7 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { createLogger } from '@unly/utils-simple-logger';
-import { useTheme } from 'emotion-theming';
+import { useTheme } from '@emotion/react';
 import {
   NextRouter,
   useRouter,
@@ -45,7 +45,7 @@ const QuickPreviewBanner: React.FunctionComponent<Props> = (props): JSX.Element
   } = props;
   const {
     secondaryColor, secondaryColorVariant1, onSecondaryColor,
-  } = useTheme<CustomerTheme>();
+  } = useTheme();
   const { t } = useTranslation();
   const router: NextRouter = useRouter();
   const customer: Customer = useCustomer();

src/components/pageLayouts/QuickPreviewLayout.tsx

@@ -2,7 +2,7 @@ import {
   Amplitude,
   LogOnMount,
 } from '@amplitude/react-amplitude';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { createLogger } from '@unly/utils-simple-logger';
 import React from 'react';
 import { Container } from 'reactstrap';

src/components/svg/AnimatedTextBubble.tsx

@@ -1,14 +1,19 @@
-import { css } from '@emotion/core';
-import { useTheme } from 'emotion-theming';
+import {
+  css,
+  useTheme,
+} from '@emotion/react';
 import React from 'react';
 
-import { Theme } from '../../types/data/Theme';
-
 const AnimatedTextBubble = props => {
-  const theme: Theme = useTheme();
+  const theme = useTheme();
   const { surfaceColor } = theme;
   return (
-    <div style={{ width: '100%', marginLeft: '20px' }}>
+    <div
+      style={{
+        width: '100%',
+        marginLeft: '20px',
+      }}
+    >
       <svg
         viewBox="0 0 33 21" width="50px" {...props}
         css={css`
@@ -20,7 +25,7 @@ const AnimatedTextBubble = props => {
               transform: translateY(-4px);
             }
             30% {
-             transform: translateY(0px);
+              transform: translateY(0px);
             }
             100% {
               transform: translateY(0px);

src/components/utils/Btn.tsx

@@ -1,6 +1,6 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import classnames from 'classnames';
-import { useTheme } from 'emotion-theming';
+import { useTheme } from '@emotion/react';
 import React, { ReactNode } from 'react';
 import { CustomerTheme } from '../../types/data/CustomerTheme';
 import { ReactButtonProps } from '../../types/react/ReactButtonProps';
@@ -35,7 +35,7 @@ const Btn: React.FunctionComponent<Props> = (props): JSX.Element => {
     transparent,
     ...rest
   } = props;
-  const customerTheme = useTheme<CustomerTheme>();
+  const customerTheme = useTheme();
   const {
     color,
     backgroundColor,

src/components/utils/Buttons.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React, { Fragment } from 'react';
 import { Row } from 'reactstrap';
 import Btn from './Btn';

src/components/utils/Cards.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import classnames from 'classnames';
 import React, { ReactNode } from 'react';
 import { CardDeck } from 'reactstrap';

src/components/utils/CircleBtn.tsx

@@ -1,5 +1,5 @@
-import { css } from '@emotion/core';
-import { useTheme } from 'emotion-theming';
+import { css } from '@emotion/react';
+import { useTheme } from '@emotion/react';
 import React from 'react';
 import { CustomerTheme } from '../../types/data/CustomerTheme';
 import { ReactDivProps } from '../../types/react/ReactDivProps';
@@ -32,7 +32,7 @@ const CircleBtn: React.FunctionComponent<Props> = (props): JSX.Element => {
     transparent,
     ...rest
   } = props;
-  const customerTheme = useTheme<CustomerTheme>();
+  const customerTheme = useTheme();
   const {
     color,
     backgroundColor,

src/components/utils/EllipsisText.tsx

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React, { ReactNode } from 'react';
 
 type Props = {