Deps - Upgrade packages (January 2021) (#241) (modified)

.babelrc

@@ -0,0 +1,16 @@
+{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-react": {
+          "runtime": "automatic",
+          "importSource": "@emotion/react"
+        }
+      }
+    ]
+  ],
+  "plugins": [
+    "@emotion/babel-plugin"
+  ]
+}

.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:

cypress/config-customer-ci-cd.json

@@ -5,5 +5,6 @@
   "screenshotsFolder": "cypress/screenshots/customer",
   "videosFolder": "cypress/videos/customer",
   "env": {},
-  "ignoreTestFiles": "*.md"
+  "ignoreTestFiles": "*.md",
+  "experimentalComponentTesting": true
 }

cypress/config-customer1.json

@@ -4,5 +4,6 @@
   "screenshotsFolder": "cypress/screenshots/customer1",
   "videosFolder": "cypress/videos/customer1",
   "env": {},
-  "ignoreTestFiles": "*.md"
+  "ignoreTestFiles": "*.md",
+  "experimentalComponentTesting": true
 }

cypress/config-customer2.json

@@ -4,5 +4,6 @@
   "screenshotsFolder": "cypress/screenshots/customer2",
   "videosFolder": "cypress/videos/customer2",
   "env": {},
-  "ignoreTestFiles": "*.md"
+  "ignoreTestFiles": "*.md",
+  "experimentalComponentTesting": true
 }

cypress/support/index.js

@@ -14,7 +14,7 @@
 // ***********************************************************
 
 // See https://dev.to/cuichenli/how-do-i-setup-my-nextjs-development-environment-2kao
-import 'cypress-react-unit-test/support';
+import '@cypress/react/support';
 import './commands';
 
 // See https://docs.cypress.io/api/events/catalog-of-events.html#Uncaught-Exceptions

next-env.d.ts

@@ -1,2 +1,3 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="@emotion/react/types/css-prop" />

package.json

@@ -8,7 +8,7 @@
     "build:profiler": ". ./scripts/populate-git-env.sh && next build --profile --debug",
     "analyse:bundle": "yarn analyse:bundle:production",
     "analyse:bundle:development": "ANALYZE_BUNDLE=true yarn start",
-    "analyse:bundle:production": "ANALYZE_BUNDLE=true next build",
+    "analyse:bundle:production": ". ./scripts/populate-git-env.sh && ANALYZE_BUNDLE=true next build",
     "analyse:unused": "next-unused",
     "svg": "npx svgr -d src/svg src/svg --ext tsx --template src/utils/svg/svgTemplate.ts",
     "deploy": "yarn deploy:customer1",
@@ -93,41 +93,41 @@
     "@amplitude/react-amplitude": "1.0.0",
     "@apollo/react-hooks": "3.1.5",
     "@apollo/react-ssr": "3.1.5",
-    "@emotion/core": "10.0.35",
-    "@emotion/styled": "10.0.27",
-    "@fortawesome/fontawesome-svg-core": "1.2.30",
-    "@fortawesome/free-brands-svg-icons": "5.14.0",
-    "@fortawesome/free-regular-svg-icons": "5.14.0",
-    "@fortawesome/free-solid-svg-icons": "5.14.0",
-    "@fortawesome/react-fontawesome": "0.1.11",
-    "@sentry/browser": "5.22.3",
-    "@sentry/node": "5.22.3",
+    "@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",
+    "@fortawesome/free-solid-svg-icons": "5.15.1",
+    "@fortawesome/react-fontawesome": "0.1.14",
+    "@sentry/browser": "5.29.2",
+    "@sentry/node": "5.29.2",
     "@unly/universal-language-detector": "2.0.3",
     "@unly/utils": "1.0.3",
     "@unly/utils-simple-logger": "1.4.0",
-    "amplitude-js": "7.1.1",
+    "amplitude-js": "7.4.0",
     "animate.css": "4.1.1",
     "append-query": "2.1.0",
     "apollo-boost": "0.4.9",
     "apollo-cache-inmemory": "1.6.6",
     "apollo-client": "2.6.10",
     "apollo-link-http": "1.5.17",
-    "bootstrap": "4.5.2",
+    "bootstrap": "4.5.3",
     "classnames": "2.2.6",
     "cookieconsent": "3.1.1",
     "cookies": "0.8.0",
     "css-to-react-native": "3.0.0",
-    "csstype": "3.0.3",
+    "csstype": "3.0.6",
     "deepmerge": "4.2.2",
     "emotion-theming": "10.0.27",
     "graphql": "15.3.0",
     "graphql-tag": "2.11.0",
-    "i18next": "19.7.0",
-    "i18next-locize-backend": "4.1.5",
+    "i18next": "19.8.4",
+    "i18next-locize-backend": "4.1.8",
     "js-cookie": "2.2.1",
     "json-stringify-safe": "5.0.1",
-    "locize-editor": "3.0.2",
-    "locize-lastused": "3.0.9",
+    "locize-editor": "3.1.1",
+    "locize-lastused": "3.0.10",
     "lodash.clonedeep": "4.5.0",
     "lodash.filter": "4.6.0",
     "lodash.find": "4.6.0",
@@ -146,34 +146,35 @@
     "lodash.some": "4.6.0",
     "lodash.startswith": "4.2.1",
     "lodash.xorby": "4.7.0",
-    "markdown-to-jsx": "6.11.2",
+    "markdown-to-jsx": "7.1.1",
     "next": "10.0.0",
     "next-cookies": "2.0.3",
     "next-with-apollo": "5.0.1",
     "prop-types": "15.7.2",
-    "rc-tooltip": "5.0.0",
+    "rc-tooltip": "5.0.1",
     "react": "17.0.1",
     "react-apollo": "3.1.5",
     "react-code-blocks": "0.0.8",
     "react-dom": "17.0.1",
-    "react-i18next": "11.7.2",
+    "react-i18next": "11.8.5",
     "react-style-proptype": "3.2.2",
-    "reactstrap": "8.5.1",
+    "reactstrap": "8.8.1",
     "recompose": "0.30.0",
     "tinycolor2": "1.4.2",
-    "type-fest": "0.16.0",
-    "uuid": "8.3.0",
+    "type-fest": "0.20.2",
+    "uuid": "8.3.2",
     "webfontloader": "1.6.28",
-    "winston": "3.2.1"
+    "winston": "3.3.3"
   },
   "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",
-    "@types/cookies": "0.7.4",
-    "@types/jest": "26.0.13",
-    "@types/jest-expect-message": "1.0.2",
+    "@cypress/react": "4.16.3",
+    "@emotion/eslint-plugin": "11.0.0",
+    "@next/bundle-analyzer": "10.0.5",
+    "@svgr/cli": "5.5.0",
+    "@types/amplitude-js": "7.0.0",
+    "@types/cookies": "0.7.6",
+    "@types/jest": "26.0.20",
+    "@types/jest-expect-message": "1.0.3",
     "@types/js-cookie": "2.2.6",
     "@types/lodash.clonedeep": "4.5.6",
     "@types/lodash.find": "4.6.6",
@@ -192,43 +193,40 @@
     "@types/lodash.some": "4.6.6",
     "@types/lodash.startswith": "4.2.6",
     "@types/lodash.xorby": "4.7.6",
-    "@types/markdown-to-jsx": "6.11.2",
     "@types/popper.js": "1.11.0",
-    "@types/react": "16.9.49",
-    "@types/react-test-renderer": "16.9.3",
-    "@types/reactstrap": "8.5.1",
+    "@types/react": "17.0.0",
+    "@types/react-test-renderer": "17.0.0",
     "@types/uuid": "8.3.0",
     "@types/webfontloader": "1.6.32",
-    "@types/webpack-env": "1.15.2",
-    "@typescript-eslint/eslint-plugin": "4.1.0",
-    "@typescript-eslint/parser": "4.1.0",
-    "@welldone-software/why-did-you-render": "4.2.2",
+    "@types/webpack-env": "1.16.0",
+    "@typescript-eslint/eslint-plugin": "4.12.0",
+    "@typescript-eslint/parser": "4.12.0",
+    "@welldone-software/why-did-you-render": "6.0.5",
     "@zeit/next-source-maps": "0.0.4-canary.1",
     "concurrently": "5.3.0",
-    "cross-env": "7.0.2",
+    "cross-env": "7.0.3",
     "current-git-branch": "1.1.0",
-    "cypress": "6.0.1",
-    "cypress-react-unit-test": "4.17.1",
+    "cypress": "6.2.1",
     "del-cli": "3.0.1",
     "dotenv": "8.2.0",
-    "eslint": "7.8.1",
-    "eslint-plugin-jest": "24.0.0",
-    "eslint-plugin-jsx-a11y": "6.3.1",
-    "eslint-plugin-react": "7.20.6",
-    "eslint-plugin-react-hooks": "4.1.0",
+    "eslint": "7.17.0",
+    "eslint-plugin-jest": "24.1.3",
+    "eslint-plugin-jsx-a11y": "6.4.1",
+    "eslint-plugin-react": "7.22.0",
+    "eslint-plugin-react-hooks": "4.2.0",
     "eslint-watch": "7.0.0",
-    "jest": "26.4.2",
+    "jest": "26.6.3",
     "jest-expect-message": "1.0.2",
     "jest-extended": "0.11.5",
     "jest-runner-groups": "2.0.1",
-    "jest-to-match-shape-of": "1.3.0",
+    "jest-to-match-shape-of": "1.3.1",
     "next-unused": "0.0.3",
-    "ngrok": "3.3.0",
+    "ngrok": "3.4.0",
     "node-mocks-http": "1.9.0",
     "open-cli": "6.0.1",
-    "react-test-renderer": "16.13.1",
-    "ts-jest": "26.3.0",
-    "typescript": "4.0.2",
-    "vercel": "21.0.0"
+    "react-test-renderer": "17.0.1",
+    "ts-jest": "26.4.4",
+    "typescript": "4.1.3",
+    "vercel": "21.0.1"
   }
 }

src/components/ComponentTemplate.tsx

@@ -1,6 +1,5 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React from 'react';
-
 import Text from './utils/Text';
 
 type Props = {}

src/components/animations/Loader.tsx

@@ -1,6 +1,5 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React from 'react';
-
 import AnimatedLoader from '../svg/AnimatedLoader';
 
 type Props = {}

src/components/appBootstrap/BrowserPageBootstrap.tsx

@@ -2,10 +2,10 @@ import {
   Amplitude,
   AmplitudeProvider,
 } from '@amplitude/react-amplitude';
+import { useTheme } from '@emotion/react';
 import * as Sentry from '@sentry/node';
 import { createLogger } from '@unly/utils-simple-logger';
 import { AmplitudeClient } from 'amplitude-js';
-import { useTheme } from 'emotion-theming';
 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 { ThemeProvider } from '@emotion/react';
 import * as Sentry from '@sentry/node';
 import { isBrowser } from '@unly/utils';
 import { createLogger } from '@unly/utils-simple-logger';
-import { ThemeProvider } from 'emotion-theming';
 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/appBootstrap/ServerPageBootstrap.tsx

@@ -1,7 +1,6 @@
 import * as Sentry from '@sentry/node';
 import { createLogger } from '@unly/utils-simple-logger';
 import React from 'react';
-
 import { userSessionContext } from '../../stores/userSessionContext';
 import { MultiversalAppBootstrapPageProps } from '../../types/nextjs/MultiversalAppBootstrapPageProps';
 import { MultiversalAppBootstrapProps } from '../../types/nextjs/MultiversalAppBootstrapProps';

src/components/assets/Logo.tsx

@@ -6,7 +6,6 @@ import PropTypes from 'prop-types';
 // eslint-disable-next-line no-unused-vars,@typescript-eslint/no-unused-vars
 import React from 'react';
 import stylePropType from 'react-style-proptype';
-
 import LogoPropTypes from '../../propTypes/LogoPropTypes';
 import { CSSStyles } from '../../types/CSSStyles';
 import { Asset } from '../../types/data/Asset';

src/components/data/ProductRow.tsx

@@ -1,10 +1,9 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import React from 'react';
 import {
   Col,
   Row,
 } from 'reactstrap';
-
 import { Asset } from '../../types/data/Asset';
 import { Product } from '../../types/data/Product';
 import GraphCMSAsset from '../assets/GraphCMSAsset';

src/components/data/Products.tsx

@@ -1,8 +1,7 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import map from 'lodash.map';
 import React from 'react';
 import { Container } from 'reactstrap';
-
 import { Product } from '../../types/data/Product';
 import ProductRow from './ProductRow';
 

src/components/doc/BuiltInFeaturesSection.tsx

@@ -1,14 +1,12 @@
 import React from 'react';
 import {
   Alert,
-  Button,
   Card,
   CardBody,
   CardSubtitle,
   CardText,
   CardTitle,
 } from 'reactstrap';
-
 import I18nLink from '../i18n/I18nLink';
 import Btn from '../utils/Btn';
 import Cards from '../utils/Cards';

src/components/doc/BuiltInFeaturesSidebar.tsx

@@ -9,7 +9,6 @@ import {
   NavItem,
   NavLink,
 } from 'reactstrap';
-
 import { SidebarLink } from '../../types/SidebarLink';
 import I18nLink from '../i18n/I18nLink';
 import { SidebarProps } from '../pageLayouts/DefaultLayout';

src/components/doc/BuiltInUtilitiesSection.tsx

@@ -1,13 +1,11 @@
 import React from 'react';
 import {
-  Button,
   Card,
   CardBody,
   CardSubtitle,
   CardText,
   CardTitle,
 } from 'reactstrap';
-
 import I18nLink from '../i18n/I18nLink';
 import Btn from '../utils/Btn';
 import Cards from '../utils/Cards';

src/components/doc/BuiltInUtilitiesSidebar.tsx

@@ -9,7 +9,6 @@ import {
   NavItem,
   NavLink,
 } from 'reactstrap';
-
 import { SidebarLink } from '../../types/SidebarLink';
 import I18nLink from '../i18n/I18nLink';
 import { SidebarProps } from '../pageLayouts/DefaultLayout';