Deps - Upgrade v2-mst-aptd-gcms-lcz-sty packages (January 2021)

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

babel.config.js

@@ -1,3 +1,24 @@
+/**
+ * Babel configuration for Next.js
+ *
+ * The official documentation uses a ".babelrc" file, but we prefer using "babel.config.js" for better documentation support.
+ *
+ * @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/_examples/files.spec.js

@@ -1,8 +1,7 @@
 /// <reference types="Cypress" />
 
-/// JSON fixture file can be loaded directly using
+// JSON fixture file can be loaded directly using
 // the built-in JavaScript bundler
-// @ts-ignore
 const requiredExample = require('../../fixtures/example')
 
 context('Files', () => {

cypress/_examples/utilities.spec.js

@@ -58,7 +58,7 @@ context('Utilities', () => {
     })
     expect(matching, 'comments').to.be.false
 
-    // ** matches against all downstream path segments
+    // matches against all downstream path segments
     matching = Cypress.minimatch('/foo/bar/baz/123/quux?a=b&c=2', '/foo/**', {
       matchBase: true,
     })

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/plugins/index.js

@@ -1,18 +1,3 @@
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
-
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
-
-/// <reference types="cypress" />
-
 module.exports = (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config

cypress/support/commands.js

@@ -1,14 +1,12 @@
-// ***********************************************
+import { CYPRESS_WINDOW_NS } from '../../src/utils/testing/cypress';
+
 // This example commands.js shows you how to
 // create various custom commands and overwrite
 // existing commands.
 //
 // For more comprehensive examples of custom
 // commands please read more here:
 // https://on.cypress.io/custom-commands
-// ***********************************************
-
-import { CYPRESS_WINDOW_NS } from '../../src/utils/testing/cypress';
 
 /**
  * Prepare DOM aliases by fetching the customer data from the browser window and aliasing them for later use.

cypress/support/index.js

@@ -1,4 +1,6 @@
-// ***********************************************************
+import '@cypress/react/support';
+import './commands';
+
 // This example support/index.js is processed and
 // loaded automatically before your test files.
 //
@@ -11,11 +13,8 @@
 //
 // You can read more here:
 // https://on.cypress.io/configuration
-// ***********************************************************
 
 // See https://dev.to/cuichenli/how-do-i-setup-my-nextjs-development-environment-2kao
-import 'cypress-react-unit-test/support';
-import './commands';
 
 // See https://docs.cypress.io/api/events/catalog-of-events.html#Uncaught-Exceptions
 Cypress.on('uncaught:exception', (err, runnable) => {

jest.config.js

@@ -4,11 +4,11 @@ module.exports = {
   testEnvironment: 'node',
   globals: {
     // XXX we must specify a custom tsconfig for tests because we need the typescript transform
-    //  to transform jsx into js rather than leaving it jsx such as the next build requires.  you
-    //  can see this setting in tsconfig.jest.json -> "jsx": "react"
+    //  to transform jsx into js rather than leaving it jsx such as the next build requires.
+    //  You can see this setting in tsconfig.jest.json -> "jsx": "react"
     //  See https://github.com/vercel/next.js/issues/8663
     'ts-jest': {
-      tsConfig: 'tsconfig.jest.json',
+      tsconfig: 'tsconfig.jest.json',
     },
   },
   modulePathIgnorePatterns: [

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,40 @@
     "@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",
+    "append-query": "2.1.0",
+    "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": "15.4.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 +145,35 @@
     "lodash.some": "4.6.0",
     "lodash.startswith": "4.2.1",
     "lodash.xorby": "4.7.0",
-    "markdown-to-jsx": "6.11.2",
-    "next": "10.0.0",
+    "markdown-to-jsx": "7.1.1",
+    "next": "10.0.3",
     "next-cookies": "2.0.3",
-    "next-with-apollo": "5.0.1",
+    "next-with-apollo": "5.1.0",
     "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 +192,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';