Upgrade deps for v2-mst-aptd-gcms-lcz-sty

.eslintrc.yml

@@ -81,14 +81,20 @@ rules: # See https://eslint.org/docs/rules
   linebreak-style:
     - error
     - unix
-  '@typescript-eslint/ban-ts-ignore': warn # ts-ignore are sometimes the only way to bypass a TS issue, we trust we will use them for good and not abuse them
+  '@typescript-eslint/ban-ts-comment': warn # ts-ignore are sometimes the only way to bypass a TS issue, we trust we will use them for good and not abuse them
   '@typescript-eslint/no-use-before-define': warn
   '@typescript-eslint/no-unused-vars':
     - warn
     -
       vars: 'all' # We don't want unused variables (noise) - XXX Note that this will be a duplicate of "no-unused-vars" rule
       args: 'none' # Sometimes it's useful to have unused arguments for later use, such as describing what args are available (DX)
       ignoreRestSiblings: true # Sometimes it's useful to have unused props for later use, such as describing what props are available (DX)
+  '@typescript-eslint/ban-types':
+    - error
+    -
+      extendDefaults: true
+      types:
+        '{}': false # Allow writing `type Props = {}` - See https://github.com/typescript-eslint/typescript-eslint/issues/2063#issuecomment-632833366
 overrides:
   - files: ['**/*.tsx']
     rules:

.gitignore

@@ -148,4 +148,4 @@ _site
 # Tmp files (cache, etc.)
 *.cache
 
-.vercel
+.vercel

cypress/integration/app/_sanity/domain.js

@@ -1,6 +1,10 @@
 const baseUrl = Cypress.config().baseUrl;
 
-describe('Sanity checks > Domain', () => {
+describe('Sanity checks > Domain', {
+  retries: {
+    runMode: 2, // Allows 2 retries (for a total of 3 attempts) to reduce the probability of failing the whole tests suite because Vercel hasn't finished to deploy yet (which makes Cypress fail by trying to test the Vercel "waiting page", instead of our app)
+  }
+}, () => {
   /*
   * Visits the home page before any test
   */

package.json

@@ -61,39 +61,39 @@
     "@amplitude/react-amplitude": "1.0.0",
     "@apollo/react-hooks": "3.1.5",
     "@apollo/react-ssr": "3.1.5",
-    "@emotion/core": "10.0.28",
+    "@emotion/core": "10.0.35",
     "@emotion/styled": "10.0.27",
-    "@fortawesome/fontawesome-svg-core": "1.2.28",
-    "@fortawesome/free-brands-svg-icons": "5.13.0",
-    "@fortawesome/free-regular-svg-icons": "5.13.0",
-    "@fortawesome/free-solid-svg-icons": "5.13.0",
-    "@fortawesome/react-fontawesome": "0.1.9",
-    "@sentry/browser": "5.15.5",
-    "@sentry/node": "5.15.5",
+    "@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",
     "@unly/universal-language-detector": "2.0.3",
     "@unly/utils": "1.0.3",
     "@unly/utils-simple-logger": "1.4.0",
-    "amplitude-js": "6.2.0",
-    "animate.css": "4.1.0",
+    "amplitude-js": "7.1.1",
+    "animate.css": "4.1.1",
     "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.0",
+    "bootstrap": "4.5.2",
     "classnames": "2.2.6",
     "cookieconsent": "3.1.1",
     "cookies": "0.8.0",
     "css-to-react-native": "3.0.0",
     "deepmerge": "4.2.2",
     "emotion-theming": "10.0.27",
-    "graphql": "15.0.0",
-    "graphql-tag": "2.10.3",
-    "i18next": "19.4.4",
-    "i18next-locize-backend": "4.0.8",
+    "graphql": "15.3.0",
+    "graphql-tag": "2.11.0",
+    "i18next": "19.7.0",
+    "i18next-locize-backend": "4.1.5",
     "js-cookie": "2.2.1",
     "json-stringify-safe": "5.0.1",
-    "locize-editor": "3.0.0",
-    "locize-lastused": "3.0.4",
+    "locize-editor": "3.0.2",
+    "locize-lastused": "3.0.9",
     "lodash.clonedeep": "4.5.0",
     "lodash.filter": "4.6.0",
     "lodash.find": "4.6.0",
@@ -109,30 +109,30 @@
     "lodash.some": "4.6.0",
     "lodash.startswith": "4.2.1",
     "lodash.xorby": "4.7.0",
-    "markdown-to-jsx": "6.11.4",
+    "markdown-to-jsx": "6.11.2",
     "next": "9.5.4-canary.4",
     "next-cookies": "2.0.3",
     "next-with-apollo": "5.0.1",
     "prop-types": "15.7.2",
-    "rc-tooltip": "4.0.3",
+    "rc-tooltip": "5.0.0",
     "react": "16.13.1",
     "react-apollo": "3.1.5",
-    "react-code-blocks": "0.0.7",
+    "react-code-blocks": "0.0.8",
     "react-dom": "16.13.1",
-    "react-i18next": "11.4.0",
+    "react-i18next": "11.7.2",
     "react-style-proptype": "3.2.2",
-    "reactstrap": "8.4.1",
+    "reactstrap": "8.5.1",
     "recompose": "0.30.0",
     "uuid": "8.3.0",
     "webfontloader": "1.6.28",
     "winston": "3.2.1"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "9.4.1",
+    "@next/bundle-analyzer": "9.5.3",
     "@svgr/cli": "5.4.0",
     "@types/amplitude-js": "5.11.0",
     "@types/cookies": "0.7.4",
-    "@types/jest": "25.2.2",
+    "@types/jest": "26.0.13",
     "@types/jest-expect-message": "1.0.2",
     "@types/js-cookie": "2.2.6",
     "@types/lodash.clonedeep": "4.5.6",
@@ -149,40 +149,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.0",
+    "@types/markdown-to-jsx": "6.11.2",
     "@types/popper.js": "1.11.0",
-    "@types/react": "16.9.35",
+    "@types/react": "16.9.49",
     "@types/react-test-renderer": "16.9.3",
-    "@types/reactstrap": "8.4.2",
+    "@types/reactstrap": "8.5.1",
     "@types/uuid": "8.3.0",
-    "@types/webfontloader": "1.6.30",
+    "@types/webfontloader": "1.6.32",
     "@types/webpack-env": "1.15.2",
-    "@typescript-eslint/eslint-plugin": "2.33.0",
-    "@typescript-eslint/parser": "2.33.0",
+    "@typescript-eslint/eslint-plugin": "4.1.0",
+    "@typescript-eslint/parser": "4.1.0",
     "@welldone-software/why-did-you-render": "4.2.2",
     "@zeit/next-source-maps": "0.0.4-canary.1",
-    "concurrently": "5.2.0",
+    "concurrently": "5.3.0",
     "cross-env": "7.0.2",
-    "cypress": "4.8.0",
+    "cypress": "5.1.0",
     "del-cli": "3.0.1",
     "dotenv": "8.2.0",
-    "eslint": "7.0.0",
-    "eslint-plugin-jest": "23.13.1",
-    "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-react": "7.20.0",
-    "eslint-plugin-react-hooks": "4.0.2",
-    "eslint-watch": "6.0.1",
-    "jest": "26.0.1",
+    "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-watch": "7.0.0",
+    "jest": "26.4.2",
     "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",
-    "ngrok": "3.2.7",
-    "node-mocks-http": "1.8.1",
+    "ngrok": "3.3.0",
+    "node-mocks-http": "1.9.0",
     "now": "19.1.0",
     "react-test-renderer": "16.13.1",
-    "ts-jest": "26.0.0",
-    "typescript": "3.9.2",
-    "version-bump-prompt": "6.0.3"
+    "ts-jest": "26.3.0",
+    "typescript": "4.0.2",
+    "version-bump-prompt": "6.1.0"
   }
 }

src/components/assets/GraphCMSAsset.tsx

@@ -9,6 +9,7 @@ import stylePropType from 'react-style-proptype';
 
 import GraphCMSAssetPropTypes from '../../propTypes/GraphCMSAssetPropTypes';
 import GraphCMSAssetTransformationsPropTypes from '../../propTypes/GraphCMSAssetTransformationsPropTypes';
+import { CSSStyles } from '../../types/CSSStyles';
 import { Asset } from '../../types/data/Asset';
 import { AssetTransformations } from '../../types/data/AssetTransformations';
 import { Link } from '../../types/data/Link';
@@ -176,13 +177,13 @@ type Props = {
   defaults?: Asset;
   override?: Asset;
   className?: string;
-  style?: object;
+  style?: CSSStyles;
   onClick?: () => void;
   linkOverride?: {
     id?: string;
     url?: string;
     target?: string;
-    style?: object;
+    style?: CSSStyles;
     classes?: string;
   };
   forcePNGOutput?: boolean;

src/components/assets/Logo.tsx

@@ -9,6 +9,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import stylePropType from 'react-style-proptype';
 
+import { CSSStyles } from '../../types/CSSStyles';
 import LogoPropTypes from '../../propTypes/LogoPropTypes';
 import { Link } from '../../types/data/Link';
 import { Logo as LogoType } from '../../types/data/Logo';
@@ -25,7 +26,7 @@ type Props = {
   override?: LogoType;
   sizesMultipliers?: SizeMultiplier[];
   className?: string;
-  style?: object;
+  style?: CSSStyles;
   link?: Link;
   onClick?: () => void;
 }
@@ -68,6 +69,7 @@ const Logo = (props: Props): JSX.Element => {
     sizesMultipliers,
   });
 
+  // @ts-ignore
   const StyledImage = styled.img`
     width: ${get(sizes, 'xs.width')};
     height: ${get(sizes, 'xs.height')};

src/components/doc/IntroductionSection.tsx

@@ -2,6 +2,7 @@
 import { css, jsx } from '@emotion/core';
 import React from 'react';
 import { Alert, Jumbotron } from 'reactstrap';
+import { LogEvent } from '../../types/Amplitude';
 
 import I18nLink from '../i18n/I18nLink';
 import ExternalLink from '../utils/ExternalLink';
@@ -10,7 +11,7 @@ type Props = {
   // XXX Beware when passing down the "logEvent", because it'll use the props attached from the <Amplitude> tag it comes from
   //  It's not an issue here, because we don't "supercharge" it with additional event/user properties
   //  But, if we had wanted to do so, we should have used a different <Amplitude> component here, and supercharge its properties
-  logEvent: Function;
+  logEvent: LogEvent;
 }
 
 /**
@@ -39,14 +40,14 @@ const IntroductionSection: React.FunctionComponent<Props> = (props): JSX.Element
 
       <ExternalLink
         href={'https://unlyed.github.io/next-right-now/concepts/presets'}
-        onClick={(): void => logEvent('open-what-is-preset-doc')}
+        onClick={(): number => logEvent('open-what-is-preset-doc')}
       >
         What is a preset?
       </ExternalLink>
       &nbsp;-&nbsp;
       <ExternalLink
         href={'https://unlyed.github.io/next-right-now/getting-started/select-preset'}
-        onClick={(): void => logEvent('open-see-all-presets-doc')}
+        onClick={(): number => logEvent('open-see-all-presets-doc')}
       >
         See all presets
       </ExternalLink>

src/components/pageLayouts/DefaultLayout.tsx

@@ -6,6 +6,7 @@ import classnames from 'classnames';
 import { NextRouter, useRouter } from 'next/router';
 import React, { useState } from 'react';
 import ErrorPage from '../../pages/_error';
+import { GenericObject } from '../../types/GenericObject';
 import { SoftPageProps } from '../../types/pageProps/SoftPageProps';
 import Sentry from '../../utils/monitoring/sentry';
 import DefaultErrorLayout from '../errors/DefaultErrorLayout';
@@ -63,7 +64,7 @@ const DefaultLayout: React.FunctionComponent<Props> = (props): JSX.Element => {
 
   return (
     <Amplitude
-      eventProperties={(inheritedProps): object => ({
+      eventProperties={(inheritedProps): GenericObject => ({
         ...inheritedProps,
         page: {
           ...inheritedProps.page,

src/components/pageLayouts/Nav.tsx

@@ -258,7 +258,7 @@ const Nav: React.FunctionComponent<Props> = () => {
                       href={`https://github.com/UnlyEd/next-right-now/tree/${process.env.NEXT_PUBLIC_NRN_PRESET}`}
                       target={'_blank'}
                       rel={'noopener'}
-                      onClick={() => {
+                      onClick={(): void => {
                         logEvent('open-github');
                       }}
                       title={''}

src/components/utils/Code.tsx

@@ -1,10 +1,14 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import React from 'react';
-import { CodeBlock, dracula } from 'react-code-blocks';
+import {
+  CodeBlock,
+  dracula,
+} from 'react-code-blocks';
+import { CSSStyles } from '../../types/CSSStyles';
 
 type Props = {
-  codeBlockStyle?: object;
+  codeBlockStyle?: CSSStyles;
   text: string;
 }
 

src/pages/[locale]/examples/built-in-features/analytics.tsx

@@ -148,6 +148,7 @@ const ExampleAnalyticsPage: NextPage<Props> = (props): JSX.Element => {
                     Sentry.captureException(error);
                     console.error(error); // eslint-disable-line no-console
                   },
+                  sameSite: 'Strict', // 'Strict' | 'Lax' | 'None' - See https://web.dev/samesite-cookies-explained/
                 });
 
                 amplitudeInstance.setVersionName(process.env.NEXT_PUBLIC_APP_VERSION); // e.g: 1.0.0
@@ -223,6 +224,7 @@ const ExampleAnalyticsPage: NextPage<Props> = (props): JSX.Element => {
 
             <Button
               onClick={(): void => {
+                // eslint-disable-next-line no-console
                 console.log('Button click');
                 logEvent('analytics-button-test-event');
               }}
@@ -238,6 +240,7 @@ const ExampleAnalyticsPage: NextPage<Props> = (props): JSX.Element => {
                   {({ logEvent }): JSX.Element => (
                     <Button
                       onClick={(): void => {
+                        // eslint-disable-next-line no-console
                         console.log('Button click');
                         logEvent('analytics-button-test-event');
                       }}

src/pages/[locale]/examples/native-features/example-with-ssg-and-revalidate.tsx

@@ -90,7 +90,7 @@ export const getStaticProps: GetStaticProps<SSGPageProps, CommonServerSideParams
       products, // XXX What's the best way to store page-specific variables coming from props? with "customer" it was different because it's injected in all pages
       builtAt: new Date().toISOString(),
     },
-    revalidate: regenerationDelay, // eslint-disable-line @typescript-eslint/camelcase
+    revalidate: regenerationDelay,
   });
 };
 

src/types/Amplitude.ts

@@ -0,0 +1,3 @@
+import { Callback, LogReturn } from 'amplitude-js';
+
+export type LogEvent = (event: string, data?: any, callback?: Callback) => LogReturn;

src/types/CSSStyles.ts

@@ -0,0 +1,6 @@
+import { GenericObject } from './GenericObject';
+
+/**
+ * Represents a CSS "styles" object.
+ */
+export type CSSStyles = GenericObject<string | number>;

src/types/GenericObject.ts

@@ -0,0 +1,9 @@
+/**
+ * Helper to avoid writing `Record<string, unknown>` everywhere you would usually use "object".
+ *
+ * @example (data: GenericObject) => void
+ * @example variables: GenericObject<string>
+ *
+ * @see https://github.com/typescript-eslint/typescript-eslint/issues/2063#issuecomment-632833366
+ */
+export type GenericObject<T = unknown> = Record<string, T>;

src/types/data/Link.ts

@@ -1,8 +1,10 @@
+import { CSSStyles } from '../CSSStyles';
+
 export type Link = {
   id?: string;
   url?: string;
   target?: string;
-  style?: string | object;
+  style?: string | CSSStyles;
   className?: string;
   classes?: string;
 }