[UICAL-268, UICAL-228, UICAL-269, UICAL-220, UICAL-270] Convert to react-final-form-arrays, stripes-types, react 18

jest.config.js

@@ -1,12 +1,12 @@
 const { join } = require('path');
 
-/** @type {import('ts-jest/dist/types').InitialOptionsTsJest} */
+/** @type {import('ts-jest/dist/types').JestConfigWithTsJest} */
 module.exports = {
   testEnvironment: 'jsdom',
 
   preset: 'ts-jest',
   transform: {
-    '^.+\\.(t|j)sx?$': 'ts-jest'
+    '^.+\\.(t|j)sx?$': ['ts-jest', { tsconfig: 'src/tsconfig.json' }]
   },
   transformIgnorePatterns: ['node_modules/(?!@folio|ky)'],
 
@@ -37,11 +37,5 @@ module.exports = {
     uuid: require.resolve('uuid')
   },
 
-  slowTestThreshold: 10,
-
-  globals: {
-    'ts-jest': {
-      tsconfig: 'src/tsconfig.json'
-    }
-  }
+  slowTestThreshold: 10
 };

package.json

@@ -110,60 +110,51 @@
     "formatjs-compile": "formatjs compile-folder --ast --format simple ./translations/ui-calendar ./translations/ui-calendar/compiled"
   },
   "devDependencies": {
-    "@folio/eslint-config-stripes": "^6.3.0",
-    "@folio/stripes": "^8.0.0",
-    "@folio/stripes-cli": "^2.6.0",
-    "@folio/stripes-components": "^11.0.0",
-    "@folio/stripes-core": "^9.0.0",
-    "@folio/stripes-final-form": "^7.0.0",
-    "@folio/stripes-form": "^8.0.0",
-    "@folio/stripes-smart-components": "^8.0.0",
-    "@folio/stripes-testing": "^4.2.0",
-    "@formatjs/cli": "^6.1.3",
-    "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^12.1.5",
-    "@testing-library/react-hooks": "^8.0.1",
-    "@testing-library/user-event": "^14.4.3",
-    "@types/jest": "^28.1.6",
-    "@types/memoizee": "^0.4.8",
-    "@types/react-router-dom": "^5.2.0",
-    "@typescript-eslint/eslint-plugin": "^5.33.0",
-    "@typescript-eslint/parser": "^5.33.0",
-    "babel-polyfill": "^6.26.0",
-    "element-is-visible": "^1.0.0",
-    "eslint": "^7.32.0",
+    "@folio/eslint-config-stripes": "^7.0.0",
+    "@folio/stripes": "^9.0.0",
+    "@folio/stripes-cli": "^3.0.0",
+    "@formatjs/cli": "^6.2.0",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.5.1",
+    "@types/jest": "^29.5.5",
+    "@types/react": "^18.2.22",
+    "@typescript-eslint/eslint-plugin": "^6.7.2",
+    "@typescript-eslint/parser": "^6.7.2",
+    "eslint": "^8.49.0",
     "eslint-import-resolver-webpack": "^0.13.2",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^28.1.3",
-    "jest-environment-jsdom": "^28.1.3",
-    "jest-junit": "^14.0.0",
-    "localforage": "^1.10.0",
-    "prettier": "^2.7.0",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-intl": "^6.4.4",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "jest-junit": "^16.0.0",
+    "prettier": "^3.0.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-intl": "^6.4.7",
     "react-router-dom": "^5.2.0",
-    "ts-jest": "^28.0.7",
-    "typescript": "^4.7.4"
+    "ts-jest": "^29.1.1",
+    "typescript": "^5.2.2"
   },
   "dependencies": {
     "@types/memoizee": "^0.4.8",
-    "@types/react-router-dom": "^5.2.0",
-    "classnames": "^2.3.1",
-    "dayjs": "^1.11.2",
-    "dom-helpers": "^5.2.1",
-    "dotenv": "^16.0.3",
-    "fuzzysort": "^2.0.1",
-    "history": "^4.9.0",
+    "@types/react-router-dom": "^5.3.3",
+    "classnames": "^2.3.2",
+    "dayjs": "^1.11.10",
+    "final-form": "^4.20.10",
+    "final-form-arrays": "^3.1.0",
+    "fuzzysort": "^2.0.4",
+    "history": "^5.3.0",
     "ky": "^0.31.1",
     "memoizee": "^0.4.15",
+    "react-final-form": "^6.5.9",
+    "react-final-form-arrays": "^3.1.4",
     "utility-types": "^3.10.0"
   },
   "peerDependencies": {
-    "@folio/stripes": "^8.0.0",
+    "@folio/stripes": "^9.0.0",
     "final-form": "^4.20.7",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.0.2",
+    "react-dom": "^18.0.2",
     "react-final-form": "^6.5.9",
     "react-intl": "^6.4.4",
     "react-query": "^3.39.2",

src/components/Calendar.tsx

@@ -59,7 +59,7 @@ export default function Calendar(props: Props) {
       className={css.calendar}
       style={
         {
-          '--num-main-cal-rows': displayDates.length / 7
+          '--num-main-cal-rows': displayDates.length / 7,
         } as CSSPropertiesWithVars
       }
     >