BREAKING: Update to carbon 11, React 18 and React-router 6. (#4)

* BREAKING: Update to carbon 11, React 18 and React-router 6.

* Fix failing test

.gitignore

@@ -41,6 +41,7 @@ typings/
 
 # Optional npm cache directory
 .npm
+.yarn
 
 # Optional eslint cache
 .eslintcache

.yarnrc.yml

@@ -0,0 +1 @@
+nodeLinker: node-modules

jest-resolver.js

@@ -0,0 +1,33 @@
+module.exports = (path, options) => {
+  // Call the defaultResolver, so we leverage its cache, error handling, etc.
+  return options.defaultResolver(path, {
+    ...options,
+    // Use packageFilter to process parsed `package.json` before the resolution (see https://www.npmjs.com/package/resolve#resolveid-opts-cb)
+    packageFilter: (pkg) => {
+      // see https://github.com/microsoft/accessibility-insights-web/pull/5421#issuecomment-1109168149
+      // see https://github.com/uuidjs/uuid/pull/616
+      //
+      // jest-environment-jsdom 28+ tries to use browser exports instead of default exports,
+      // but uuid/react-colorful only offers an ESM browser export and not a CommonJS one. Jest does not yet
+      // support ESM modules natively, so this causes a Jest error related to trying to parse
+      // "export" syntax.
+      //
+      // This workaround prevents Jest from considering uuid's module-based exports at all;
+      // it falls back to uuid's CommonJS+node "main" property.
+      //
+      // Once we're able to migrate our Jest config to ESM and a browser crypto
+      // implementation is available for the browser+ESM version of uuid to use (eg, via
+      // https://github.com/jsdom/jsdom/pull/3352 or a similar polyfill), this can go away.
+      //
+      // How to test if this is needed anymore:
+      // - comment it out
+      // - run `yarn test`
+      // - if all the tests pass, it means the workaround is no longer needed
+      if (pkg.name === 'uuid') {
+        delete pkg['exports'];
+        delete pkg['module'];
+      }
+      return pkg;
+    },
+  });
+};

jest.config.json

@@ -7,14 +7,11 @@
   ],
   "moduleNameMapper": {
     "\\.(s?css)$": "identity-obj-proxy",
-    "^@carbon/icons-react/es/(.*)$": "@carbon/icons-react/lib/$1",
-    "^@carbon/charts": "identity-obj-proxy",
-    "^carbon-components-react/es/(.*)$": "carbon-components-react/lib/$1",
     "@openmrs/esm-framework": "@openmrs/esm-framework/mock",
     "lodash-es": "lodash"
   },
   "collectCoverageFrom": [
-    "**/src/**/*.tsx",
+    "**/packages/**/*.tsx",
     "!**/node_modules/**",
     "!**/vendor/**",
     "!**/src/**/*.test.*",
@@ -30,5 +27,10 @@
   },
   "setupFilesAfterEnv": [
     "<rootDir>/tools/setupTests.ts"
-  ]
+  ],
+  "testEnvironment": "jsdom",
+  "testEnvironmentOptions": {
+    "url": "http://localhost/"
+  },
+  "resolver": "<rootDir>/jest-resolver.js"
 }

package.json

@@ -23,20 +23,21 @@
   },
   "devDependencies": {
     "@babel/core": "^7.11.6",
+    "@carbon/colors": "^11.2.0",
+    "@carbon/react": "^1.8.0",
     "@jsenv/file-size-impact": "12.1.1",
     "@openmrs/esm-framework": "next",
     "@swc/core": "^1.2.165",
     "@swc/jest": "^0.2.20",
-    "@testing-library/dom": "^7.20.0",
-    "@testing-library/jest-dom": "^5.11.0",
-    "@testing-library/react": "^10.4.3",
-    "@testing-library/user-event": "^12.0.11",
-    "@types/carbon-components-react": "^7.10.9",
-    "@types/jest": "^25.2.3",
+    "@testing-library/dom": "^8.13.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.2.0",
+    "@testing-library/user-event": "^14.2.0",
+    "@types/jest": "^27.5.1",
     "@types/lodash-es": "^4.17.3",
-    "@types/react": "^16.14.5",
-    "@types/react-dom": "^16.9.12",
-    "@types/react-router-dom": "^5.1.7",
+    "@types/react": "^18.0.9",
+    "@types/react-dom": "^18.0.5",
+    "@types/react-router-dom": "^5.3.3",
     "@types/uuid": "^8.3.0",
     "@types/webpack-env": "^1.16.0",
     "@types/yup": "^0.29.11",
@@ -54,23 +55,22 @@
     "i18next": "^19.7.0",
     "i18next-parser": "^3.11.0",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^26.4.2",
-    "jest-cli": "^26.4.2",
+    "jest": "^28.1.0",
+    "jest-cli": "^28.1.0",
+    "jest-environment-jsdom": "^28.1.0",
     "lerna": "^3.20.2",
-    "openmrs": "next",
+    "openmrs": "^4.0.0-pre.1",
     "prettier": "^2.4.1",
     "pretty-quick": "^2.0.2",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^18.1.0",
+    "react-dom": "^18.1.0",
     "react-i18next": "^11.0.0",
-    "react-router-dom": "^5.0.0",
-    "rxjs": "^6.6.3",
+    "react-router-dom": "^6.3.0",
     "sass": "^1.29.0",
     "sass-loader": "^10.1.0",
     "turbo": "^1.2.2",
-    "typescript": "^4.0.3"
-  },
-  "resolutions": {
-    "**/@types/react": "^16.14.5"
+    "typedoc": "^0.22.15",
+    "typescript": "^4.0.3",
+    "webpack": "^5.74.0"
   }
 }

packages/esm-patient-flags-app/package.json

@@ -34,19 +34,14 @@
     "url": "https://github.com/palladiumkenya/kenyaemr-esm-core/issues"
   },
   "dependencies": {
-    "@carbon/charts-react": "^0.41.14",
-    "@carbon/icons-react": "^10.18.0",
-    "carbon-components-react": "^7.25.0",
-    "d3": "^5.16.0",
+    "@carbon/colors": "^11.2.0",
+    "@carbon/react": "^1.8.0",
     "lodash-es": "^4.17.15"
   },
   "peerDependencies": {
-    "@openmrs/esm-framework": "3.x",
-    "carbon-components": "10.x",
-    "carbon-icons": "7.x",
-    "react": "16.x",
+    "@openmrs/esm-framework": "4.x",
+    "react": "^18.1.0",
     "react-i18next": "11.x",
-    "react-router-dom": "5.x",
-    "rxjs": "6.x"
+    "react-router-dom": "6.x"
   }
 }

packages/esm-patient-flags-app/src/patient-flags/patient-flags.component.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tag } from 'carbon-components-react';
+import { Tag } from '@carbon/react';
 import { useTranslation } from 'react-i18next';
 import { usePatientFlags } from '../hooks/usePatientFlags';
 import styles from './patient-flags.scss';

packages/esm-patient-flags-app/src/patient-flags/patient-flags.scss

@@ -1,6 +1,6 @@
+@use '@carbon/styles/scss/spacing';
 @import '~@openmrs/esm-styleguide/src/vars';
-@import '~carbon-components/src/globals/scss/vars';
 
 .flagContainer {
-    margin: $spacing-05;
+    margin: spacing.$spacing-05;
 }

packages/esm-patient-flags-app/src/patient-flags/patient-flags.test.tsx

@@ -1,20 +1,22 @@
 import React from 'react';
 import { screen, render } from '@testing-library/react';
 import PatientFlags from './patient-flags.component';
-import * as mockUsePatientFlags from '../hooks/usePatientFlags';
+import { usePatientFlags } from '../hooks/usePatientFlags';
+
+const mockUsePatientFlags = usePatientFlags as jest.Mock;
+
+jest.mock('../hooks/usePatientFlags', () => {
+  const originalModule = jest.requireActual('../hooks/usePatientFlags');
+  return { ...originalModule, usePatientFlags: jest.fn() };
+});
 
 describe('<PatientFlags/>', () => {
   afterEach(() => {
     jest.resetAllMocks();
   });
 
   test('should display patient flags', () => {
-    spyOn(mockUsePatientFlags, 'usePatientFlags').and.returnValue({
-      isLoading: false,
-      patientFlags: ['hiv', 'cancer'],
-      error: null,
-    });
-
+    mockUsePatientFlags.mockReturnValue({ isLoading: false, patientFlags: ['hiv', 'cancer'], error: null });
     render(<PatientFlags patientUuid="some-patient-uuid" />);
     expect(screen.getByText(/^hiv$/i)).toBeInTheDocument();
     expect(screen.getByText(/^cancer$/i)).toBeInTheDocument();