build: support Node 16 (#268)

* build: support Node 16

* ci: run using Node 16

* build: update/move dependencies, so build can finish

* fix: use useMemo to avoid re-renders

* test: set 'resetMocks' to false

Mimics react-scripts 3.x behavior

* fix: cleanup state on dismount

* chore: update testing-library deps, to fix failing test

Author: jhpedemonte

.github/dependabot.yml

@@ -4,3 +4,4 @@ updates:
     directory: '/'
     schedule:
       interval: 'daily'
+    open-pull-requests-limit: 10

.github/workflows/ci.yaml

@@ -20,10 +20,10 @@ jobs:
       # https://github.com/actions/checkout/issues/217 pulls all tags (needed for lerna to correctly version)
       - run: git fetch --depth=1 origin +refs/tags/*:refs/tags/*
       # https://github.com/actions/setup-node
-      - name: Setup Node 12
+      - name: Setup Node 16
         uses: actions/setup-node@v2
         with:
-          node-version: 12
+          node-version: 16
       - name: Install
         run: yarn install --immutable
       - name: Lint

.nvmrc

@@ -1 +1 @@
-lts/*
+16

examples/discovery-search-app/package.json

@@ -39,7 +39,7 @@
   },
   "devDependencies": {
     "cross-env": "^7.0.3",
-    "react-scripts": "^3.4.4"
+    "react-scripts": "^4.0.3"
   },
   "browserslist": {
     "production": [

examples/discovery-search-app/src/App.js

@@ -1,4 +1,4 @@
-import React, { useContext, useState, useEffect } from 'react';
+import React, { useContext, useState, useEffect, useMemo } from 'react';
 import cx from 'classnames';
 import DiscoveryV2 from 'ibm-watson/discovery/v2';
 import { NoAuthAuthenticator } from 'ibm-watson/auth';
@@ -23,12 +23,16 @@ import {
 
 const App = () => {
   // TODO: this is a dummy client to route requests to the server since CP4D doesn't support CORS
-  const authenticator = new NoAuthAuthenticator();
-  const searchClient = new DiscoveryV2({
-    url: `${window.location.href}api`,
-    version: '2019-01-01',
-    authenticator
-  });
+  const authenticator = useMemo(() => new NoAuthAuthenticator(), []);
+  const searchClient = useMemo(
+    () =>
+      new DiscoveryV2({
+        url: `${window.location.href}api`,
+        version: '2019-01-01',
+        authenticator
+      }),
+    [authenticator]
+  );
   const [projectId, setProjectId] = useState(process.env.REACT_APP_PROJECT_ID);
   const [isLoading, setIsLoading] = useState(false);
   const [isError, setIsError] = useState(false);

package.json

@@ -20,10 +20,10 @@
     "@commitlint/cli": "^11.0.0",
     "@commitlint/config-conventional": "^11.0.0",
     "@cypress/webpack-preprocessor": "^5.5.0",
-    "@testing-library/cypress": "^7.0.6",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.5.0",
-    "@testing-library/react-hooks": "^3.4.1",
+    "@testing-library/cypress": "^7.0.7",
+    "@testing-library/jest-dom": "^5.16.1",
+    "@testing-library/react": "^11.2.7",
+    "@testing-library/react-hooks": "^7.0.2",
     "@types/classnames": "^2.2.9",
     "@types/debounce": "^1.2.0",
     "@types/dompurify": "^0.0.33",
@@ -37,7 +37,6 @@
     "@types/react-virtualized": "^9.21.11",
     "@types/seedrandom": "^3.0.1",
     "@types/testing-library__cypress": "^5.0.8",
-    "@types/uuid": "^3.4.5",
     "@typescript-eslint/eslint-plugin": "^2.21.0",
     "@typescript-eslint/parser": "^2.21.0",
     "audit-ci": "^5.1.2",
@@ -69,9 +68,6 @@
     "lint-staged": "^9.2.5",
     "lorem-ipsum": "^2.0.3",
     "markdown-toc": "^1.2.0",
-    "marked": "^0.7.0",
-    "node-sass": "^4.12.0",
-    "node-sass-tilde-importer": "^1.0.2",
     "prettier": "^2.4.1",
     "proper-url-join": "^2.1.1",
     "raw-loader": "^4.0.2",

packages/discovery-react-components/package.json

@@ -40,7 +40,8 @@
     "pdfjs-dist": "^2.2.228",
     "react-error-boundary": "^1.2.5",
     "react-resize-detector": "^4.2.1",
-    "react-virtualized": "9.21.2"
+    "react-virtualized": "9.21.2",
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^3.1.5",
@@ -55,16 +56,21 @@
     "@storybook/react": "^5.3.21",
     "@storybook/source-loader": "^5.3.21",
     "@svgr/rollup": "^5.5.0",
+    "@types/marked": "^4",
     "@types/pdfjs-dist": "2.1.7",
+    "@types/uuid": "^8",
     "cross-env": "^7.0.3",
     "css-loader": "^3.4.2",
     "madge": "^5.0.1",
-    "react-scripts": "^3.4.4",
+    "marked": "^4.0.10",
+    "node-sass": "^6.0.1",
+    "react-scripts": "^4.0.3",
     "rollup": "^2.57.0",
     "rollup-plugin-string": "^3.0.0",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "^0.30.0",
-    "sass-loader": "^8.0.2"
+    "sass-loader": "^10.2.1",
+    "style-loader": "^1.3.0"
   },
   "peerDependencies": {
     "@carbon/icons": ">= 10.5.0 < 11",
@@ -84,6 +90,8 @@
     "access": "public"
   },
   "jest": {
+    "resetMocks": false,
+    "displayName": "Disco React Components (Unit)",
     "transformIgnorePatterns": [
       "/!node_modules\\/react-virtualized/"
     ],

packages/discovery-react-components/src/components/SearchFacets/SearchFacets.tsx

@@ -18,7 +18,7 @@ import {
   SelectedCollectionItems
 } from './utils/searchFacetInterfaces';
 import get from 'lodash/get';
-import uuid from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 import { CollectionFacets } from './components/CollectionFacets';
 import { FieldFacets } from './components/FieldFacets';
 import { DynamicFacets } from './components/DynamicFacets';
@@ -81,7 +81,7 @@ const SearchFacets: FC<SearchFacetsProps> = ({
   serverErrorMessage,
   onChange
 }) => {
-  const facetsId = id || `search-facets__${uuid.v4()}`;
+  const facetsId = id || `search-facets__${uuidv4()}`;
 
   const {
     searchResponseStore: {

packages/discovery-react-components/src/components/SearchInput/SearchInput.tsx

@@ -10,7 +10,7 @@ import { Search as CarbonSearchInput } from 'carbon-components-react';
 import ListBox from 'carbon-components-react/es/components/ListBox';
 import { SearchApi, SearchContext } from 'components/DiscoverySearch/DiscoverySearch';
 import useDebounce from 'utils/useDebounce';
-import uuid from 'uuid';
+import { v4 as uuidv4 } from 'uuid';
 import { Search16 } from '@carbon/icons-react';
 import DiscoveryV2 from 'ibm-watson/discovery/v2';
 import { useDeepCompareCallback } from 'utils/useDeepCompareMemoize';
@@ -85,7 +85,7 @@ const SearchInput: FC<SearchInputProps> = ({
 }) => {
   const mergedMessages = { ...defaultMessages, ...messages };
 
-  const inputId = id || `search-input__${uuid.v4()}`;
+  const inputId = id || `search-input__${uuidv4()}`;
   const autocompletionClassName = `${settings.prefix}--search-autocompletion`;
   const searchInputClassNames = [className, `${settings.prefix}--search-input--discovery`];
   const {
@@ -217,6 +217,12 @@ const SearchInput: FC<SearchInputProps> = ({
     }
   };
 
+  useEffect(() => {
+    return function cleanup() {
+      clearTimeout(focusTimeout);
+    };
+  });
+
   // onFocus for the carbon search component and the autocomplete dropdown
   const handleOnFocus = (): void => {
     // cancel the timeout set in handleOnBlur

packages/discovery-react-components/src/components/StructuredQuery/__stories__/StructuredQuery.stories.tsx

@@ -5,7 +5,7 @@ import { StoryWrapper, DummySearchClient } from 'utils/storybookUtils';
 import DiscoverySearch, { DiscoverySearchProps } from 'components/DiscoverySearch/DiscoverySearch';
 import StructuredQuery from '../StructuredQuery';
 import { defaultMessages } from '../messages';
-import marked from 'marked';
+import { marked } from 'marked';
 import defaultReadme from './default.md';
 import { createDummyResponsePromise } from 'utils/testingUtils';
 import DiscoveryV2 from 'ibm-watson/discovery/v2';
@@ -51,7 +51,7 @@ storiesOf('StructuredQuery', module)
     },
     {
       info: {
-        text: marked(defaultReadme)
+        text: marked.parse(defaultReadme)
       }
     }
   );