chore: upgrade ibm-watson and other deps (#536)

* build: first pass at using vite to build

* chore: upgrade sass

* fix: upgrade a lot of deps

* chore: upgrade commitlint

* fix: update story to CSF format (with hooks)

* chore: upgrade add'l deps

* chore: remove unnecessary file

* chore: upgrade ibm-watson to v7

* fix: upgrade ibm-watson, update types, fix storybook

BREAKING CHANGE: Upgrade of ibm-watson changes some types

* fix: use `collectionIds` instead of `collection_ids` for fn param

* fix: show document fetch error

* chore: upgrade deps

* chore: remove unneeded core-js deps

* test: japanese PDF is only a single page

* chore: upgrade cypress

* chore: upgrade http-proxy-middleware

* build: generate types file

* build: don't rollup types, to keep breaking changes to a minimum

* build: revert baseUrl removal

.eslintignore

@@ -1,5 +1,3 @@
 **/node_modules
 **/build
-**/dist
-
-/packages/ibm-watson
+**/dist

.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 16
+      - name: Setup Node 20
         uses: actions/setup-node@v2
         with:
-          node-version: 16
+          node-version: 20
       - name: Install
         run: yarn install --immutable
       - name: Lint

.nvmrc

@@ -1 +1 @@
-16
+20

.prettierignore

@@ -1,6 +1,4 @@
 **/CHANGELOG.md
 
 **/build
-**/dist
-
-/packages/ibm-watson
+**/dist

.yarn/patches/react-scripts-npm-5.0.1-d06bd2d5ad → .yarn/patches/react-scripts-npm-5.0.1-d06bd2d5ad.patch

@@ -1,13 +1,5 @@
-diff --git a/.vscode/diff/vulsCount.txt b/.vscode/diff/vulsCount.txt
-new file mode 100644
-index 0000000000000000000000000000000000000000..c227083464fb9af8955c90d2924774ee50abb547
---- /dev/null
-+++ b/.vscode/diff/vulsCount.txt
-@@ -0,0 +1 @@
-+0
-\ No newline at end of file
 diff --git a/config/webpack.config.js b/config/webpack.config.js
-index e465d8e7a00ec889e9c4c29ba7812019f8319a41..60e754e0923304b717e42f80b92eab57d1136430 100644
+index e465d8e7a00ec889e9c4c29ba7812019f8319a41..34e7f4d5e3d768f4250b527434f28935be674efd 100644
 --- a/config/webpack.config.js
 +++ b/config/webpack.config.js
 @@ -37,6 +37,7 @@ const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'
@@ -33,6 +25,15 @@ index e465d8e7a00ec889e9c4c29ba7812019f8319a41..60e754e0923304b717e42f80b92eab57
        // This allows you to set a fallback for where webpack should look for modules.
        // We placed these paths second because we want `node_modules` to "win"
        // if there are any conflicts. This matches Node resolution mechanism.
+@@ -594,7 +603,7 @@ module.exports = function (webpackEnv) {
+               // its runtime that would otherwise be processed through "file" loader.
+               // Also exclude `html` and `json` extensions so they get processed
+               // by webpacks internal loaders.
+-              exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx)$/, /\.html$/, /\.json$/],
++              exclude: [/^$/, /\.(js|mjs|jsx|ts|tsx|cjs)$/, /\.html$/, /\.json$/],
+               type: 'asset/resource',
+             },
+             // ** STOP ** Are you adding a new loader?
 @@ -604,6 +613,9 @@ module.exports = function (webpackEnv) {
        ].filter(Boolean),
      },

.yarnrc.yml

@@ -2,10 +2,4 @@ nmMode: hardlinks-global
 
 nodeLinker: node-modules
 
-plugins:
-  - path: .yarn/plugins/@yarnpkg/plugin-typescript.cjs
-    spec: "@yarnpkg/plugin-typescript"
-  - path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
-    spec: "@yarnpkg/plugin-workspace-tools"
-
-yarnPath: .yarn/releases/yarn-3.2.3.cjs
+yarnPath: .yarn/releases/yarn-4.0.2.cjs

README.md

@@ -50,7 +50,7 @@ First, you will need to customize and improve your document retrieval project on
 
 - [git](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git)
 - [nvm](https://github.com/nvm-sh/nvm#installation-and-update)
-  - Set Node version to 16.x.x via `nvm install 16` and `nvm use 16` (also compatible with Node 18)
+  - Set Node version `nvm use` (uses value defined in `.nvmrc` file)
 - [yarn](https://yarnpkg.com/getting-started/install) or [npm](https://www.npmjs.com/get-npm)
 - On MacOS, install any waiting OS Software Updates and install Xcode Command Line Tools by running `xcode-select --install` in terminal.
 

docs/storybook/project.json

@@ -1 +1,61 @@
-{"generatedAt":1699403501009,"builder":{"name":"webpack5"},"hasCustomBabel":false,"hasCustomWebpack":true,"hasStaticDirs":true,"hasStorybookEslint":false,"refCount":0,"metaFramework":{"name":"CRA","packageName":"react-scripts","version":"5.0.1"},"monorepo":"Lerna","packageManager":{"type":"yarn","version":"3.2.3"},"storybookVersion":"6.5.12","language":"javascript","storybookPackages":{"@storybook/builder-webpack5":{"version":"6.5.12"},"@storybook/core":{"version":"6.5.12"},"@storybook/manager-webpack5":{"version":"6.5.12"},"@storybook/react":{"version":"6.5.12"},"@storybook/source-loader":{"version":"6.5.12"}},"framework":{"name":"react"},"addons":{"@storybook/preset-create-react-app":{"version":"4.1.2"},"@storybook/addon-actions":{"version":"6.5.12"},"@storybook/addon-docs":{"options":{"configureJSX":true},"version":"6.5.12"},"@storybook/addon-knobs":{"version":"6.4.0"}}}
+{
+  "generatedAt": 1699403501009,
+  "builder": {
+    "name": "webpack5"
+  },
+  "hasCustomBabel": false,
+  "hasCustomWebpack": true,
+  "hasStaticDirs": true,
+  "hasStorybookEslint": false,
+  "refCount": 0,
+  "metaFramework": {
+    "name": "CRA",
+    "packageName": "react-scripts",
+    "version": "5.0.1"
+  },
+  "monorepo": "Lerna",
+  "packageManager": {
+    "type": "yarn",
+    "version": "3.2.3"
+  },
+  "storybookVersion": "6.5.12",
+  "language": "javascript",
+  "storybookPackages": {
+    "@storybook/builder-webpack5": {
+      "version": "6.5.12"
+    },
+    "@storybook/core": {
+      "version": "6.5.12"
+    },
+    "@storybook/manager-webpack5": {
+      "version": "6.5.12"
+    },
+    "@storybook/react": {
+      "version": "6.5.12"
+    },
+    "@storybook/source-loader": {
+      "version": "6.5.12"
+    }
+  },
+  "framework": {
+    "name": "react"
+  },
+  "addons": {
+    "@storybook/preset-create-react-app": {
+      "version": "4.1.2"
+    },
+    "@storybook/addon-actions": {
+      "version": "6.5.12"
+    },
+    "@storybook/addon-docs": {
+      "options": {
+        "configureJSX": true
+      },
+      "version": "6.5.12"
+    },
+    "@storybook/addon-knobs": {
+      "version": "6.4.0"
+    }
+  },
+  "name": "docs-storybook"
+}

examples/discovery-search-app/cypress/e2e/pagination/pagination.cy.ts

@@ -22,9 +22,8 @@ describe('Pagination', () => {
 
     it('items per page has the correct options available', () => {
       itemsPerPageOptions.forEach(option => {
-        cy.findByLabelText(/^Items per page/)
-          .select(option)
-          .should('have.value', option);
+        cy.findByLabelText(/^Items per page/).select(option);
+        cy.findByLabelText(/^Items per page/).should('have.value', option);
       });
     });
   });
@@ -77,6 +76,7 @@ describe('Pagination', () => {
     describe('and we navigate to the last page of results', () => {
       beforeEach(() => {
         // click 'next' 5 times to get to end
+        // eslint-disable-next-line cypress/unsafe-to-chain-command
         cy.findByLabelText('Next page').click().click().click().click().click();
         cy.wait('@postQueryMultiPage');
       });

examples/discovery-search-app/cypress/support/e2e.ts

@@ -14,4 +14,4 @@
 // ***********************************************************
 
 // Import commands.ts using ES2015 syntax:
-import './commands.ts';
+import './commands';

examples/discovery-search-app/package.json

@@ -21,31 +21,35 @@
     "server:setup": "node ./scripts/setSdkUrl.js"
   },
   "dependencies": {
-    "@carbon/icons": "^10.5.0",
+    "@carbon/icons": "^10.48.3",
     "@ibm-watson/discovery-react-components": "workspace:*",
     "@ibm-watson/discovery-styles": "workspace:*",
-    "body-parser": "^1.19.0",
+    "body-parser": "^1.20.2",
     "carbon-components": "~10.46.0",
     "carbon-components-react": "~7.46.0",
     "carbon-icons": "^7.0.7",
-    "classnames": "^2.2.6",
-    "core-js": "^2.6.12",
+    "classnames": "^2.5.1",
     "cors": "^2.8.5",
-    "dotenv": "^16.0.3",
-    "express": "^4.17.1",
-    "http-proxy-middleware": "^0.20.0",
-    "ibm-watson": "^6.2.1",
-    "node-polyfill-webpack-plugin": "^2.0.1",
+    "dotenv": "^16.3.2",
+    "express": "^4.18.2",
+    "http-proxy-middleware": "^2.0.6",
+    "ibm-watson": "^8.0.0",
+    "node-polyfill-webpack-plugin": "^3.0.0",
     "proper-url-join": "^2.1.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "@testing-library/cypress": "^7.0.7",
-    "@types/proper-url-join": "^2",
+    "@types/proper-url-join": "^2.1.4",
     "cross-env": "^7.0.3",
-    "cypress": "^10.8.0",
+    "cypress": "^13.6.3",
     "react-scripts": "^5.0.1",
-    "start-server-and-test": "^1.14.0"
+    "start-server-and-test": "^2.0.3"
+  },
+  "jest": {
+    "moduleNameMapper": {
+      "^axios$": "axios/dist/node/axios.cjs"
+    }
   }
 }

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

@@ -150,7 +150,7 @@ function PreviewPage() {
   const {
     selectedResult: { document: selectedDocument },
     searchResponseStore: { data: searchResponse },
-    fetchDocumentsResponseStore: { data: fetchDocumentResponse, isLoading }
+    fetchDocumentsResponseStore: { data: fetchDocumentResponse, isLoading, isError, error }
   } = useContext(SearchContext);
   const { fetchDocuments, setSelectedResult } = useContext(SearchApi);
 
@@ -202,7 +202,9 @@ function PreviewPage() {
           tooltipAlignment="start"
         />
       </div>
-      {isLoading ? (
+      {isError ? (
+        <div>Unable to fetch document: {error.toString()}</div>
+      ) : isLoading ? (
         <Loading className={`${settings.prefix}--search-app__loading`} />
       ) : (
         <Tabs

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

@@ -1,6 +1,6 @@
 const path = require('path');
 const dotenv = require('dotenv');
-const proxy = require('http-proxy-middleware');
+const { createProxyMiddleware } = require('http-proxy-middleware');
 const { getAuthenticatorFromEnvironment } = require('ibm-watson/auth');
 const cors = require('cors');
 const bodyParser = require('body-parser');
@@ -36,7 +36,7 @@ if (process.env.REACT_APP_CYPRESS_MODE) {
     app.use(
       '/api',
       addAuthorization,
-      proxy({
+      createProxyMiddleware({
         target,
         secure: false,
         changeOrigin: true,

lerna.json

@@ -2,7 +2,6 @@
   "packages": ["packages/*"],
   "version": "4.9.0",
   "npmClient": "yarn",
-  "useWorkspaces": true,
   "command": {
     "publish": {
       "conventionalCommits": true,
@@ -12,5 +11,6 @@
       "message": "chore: publish %s [ci skip]",
       "ignoreChanges": ["examples/**"]
     }
-  }
+  },
+  "$schema": "node_modules/lerna/schemas/lerna-schema.json"
 }