Upgrade dependencies (#163) (modified, adapted to preset)

UnlyEd · Sep 8, 2020 · 1018d6f · 1018d6f
1 parent 1b01c9d
commit 1018d6f
Show file tree

Hide file tree

Showing 27 changed files with 1,395 additions and 1,227 deletions.
diff --git a/.eslintrc.yml b/.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:

diff --git a/.gitignore b/.gitignore
@@ -148,4 +148,4 @@ _site
 # Tmp files (cache, etc.)
 *.cache
 
-.vercel
+.vercel
diff --git a/cypress/integration/app/_sanity/domain.js b/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
   */

diff --git a/package.json b/package.json
@@ -61,25 +61,25 @@
     "@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",
@@ -88,12 +88,12 @@
     "emotion-theming": "10.0.27",
     "graphql": "15.0.0",
     "graphql-tag": "2.10.3",
-    "i18next": "19.4.4",
-    "i18next-locize-backend": "4.0.8",
+    "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"
   }
 }
diff --git a/src/components/assets/Logo.tsx b/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')};

diff --git a/src/components/doc/IntroductionSection.tsx b/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>

diff --git a/src/components/pageLayouts/DefaultLayout.tsx b/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,

diff --git a/src/components/pageLayouts/Nav.tsx b/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={''}

diff --git a/src/components/utils/Code.tsx b/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;
 }
 

diff --git a/src/pages/[locale]/examples/built-in-features/analytics.tsx b/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');
                       }}

diff --git a/src/pages/[locale]/examples/native-features/example-with-ssg-and-revalidate.tsx b/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,
   });
 };
 

diff --git a/src/types/Amplitude.ts b/src/types/Amplitude.ts
@@ -0,0 +1,3 @@
+import { Callback, LogReturn } from 'amplitude-js';
+
+export type LogEvent = (event: string, data?: any, callback?: Callback) => LogReturn;
diff --git a/src/types/CSSStyles.ts b/src/types/CSSStyles.ts
@@ -0,0 +1,6 @@
+import { GenericObject } from './GenericObject';
+
+/**
+ * Represents a CSS "styles" object.
+ */
+export type CSSStyles = GenericObject<string | number>;
diff --git a/src/types/GenericObject.ts b/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>;
diff --git a/src/types/data/Link.ts b/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;
 }
diff --git a/src/utils/analytics/amplitude.ts b/src/utils/analytics/amplitude.ts
@@ -69,6 +69,7 @@ export const getAmplitudeInstance = (props: GetAmplitudeInstanceProps): Amplitud
         Sentry.captureException(error);
         console.error(error); // eslint-disable-line no-console
       },
+      sameSite: 'Strict', // 'Strict' | 'Lax' | 'None' - See https://web.dev/samesite-cookies-explained/
     });
 
     // Disable analytics tracking entirely if the user has opted-out
@@ -141,6 +142,7 @@ export const sendWebVitals = (report: NextWebVitalsMetricsReport): void => {
         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

diff --git a/src/utils/assets/logo.ts b/src/utils/assets/logo.ts
@@ -1,5 +1,7 @@
 import map from 'lodash.map';
+
 import { Logo } from '../../types/data/Logo';
+import { GenericObject } from '../../types/GenericObject';
 
 export const SIZE_XS = 'xs';
 export const SIZE_SM = 'sm';
@@ -68,7 +70,7 @@ export const toPixels = (value: number | string): string => {
  * @param sizesMultipliers
  * @returns {object}
  */
-export const generateSizes = ({ baseWidth, baseHeight, sizesMultipliers = DEFAULT_SIZES_MULTIPLIERS }: { baseWidth: number; baseHeight: number; sizesMultipliers?: SizeMultiplier[] }): object => {
+export const generateSizes = ({ baseWidth, baseHeight, sizesMultipliers = DEFAULT_SIZES_MULTIPLIERS }: { baseWidth: number; baseHeight: number; sizesMultipliers?: SizeMultiplier[] }): GenericObject => {
   const sizes = {};
 
   map(sizesMultipliers, (sizeMultiplier) => {
-Original file line number
+Diff line change
@@ Expand Up / @@ -148,4 +148,4 @@ _site @@
     # Tmp files (cache, etc.)
     *.cache
-    .vercel
+    .vercel
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { Callback, LogReturn } from 'amplitude-js';

		export type LogEvent = (event: string, data?: any, callback?: Callback) => LogReturn;