chore(project): maintenance 2024-q1

.syncpackrc.json

@@ -20,7 +20,8 @@
         "codeceptjs",
         "codeceptjs**",
         "react-router",
-        "react-router-dom"
+        "react-router-dom",
+        "typescript"
       ],
       "packages": [
         "**"

configs/eslint-config-jwp/package.json

@@ -7,8 +7,8 @@
     "test": "exit 0"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^5.17.0",
-    "@typescript-eslint/parser": "^5.17.0",
+    "@typescript-eslint/eslint-plugin": "^7.1.1",
+    "@typescript-eslint/parser": "^7.1.1",
     "confusing-browser-globals": "^1.0.10",
     "eslint-plugin-import": "^2.23.4",
     "eslint-plugin-react": "^7.24.0",

configs/eslint-config-jwp/typescript.js

@@ -77,10 +77,6 @@ module.exports = {
     {
       files: ['*.ts', '*.tsx'],
       rules: {
-        // TypeScript 4.0 adds 'any' or 'unknown' type annotation on catch clause variables.
-        // We need to make sure error is of the type we are expecting
-        '@typescript-eslint/no-implicit-any-catch': 'error',
-
         // These are handled by TS
         '@typescript-eslint/no-explicit-any': ['warn', { ignoreRestArgs: true }],
         '@typescript-eslint/explicit-module-boundary-types': 'off',

package.json

@@ -40,16 +40,16 @@
     "@types/node": "^18.15.3",
     "csv-parse": "^5.4.0",
     "depcheck": "^1.4.3",
-    "eslint": "^7.31.0",
+    "eslint": "^8.57.0",
     "husky": "^6.0.0",
     "i18next-parser": "^8.0.0",
     "lint-staged": "^15.1.0",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.8.8",
     "read": "^2.1.0",
     "ts-node": "^10.9.1",
-    "typescript": "^4.3.4",
-    "vitest": "^0.34.6"
+    "typescript": "5.3.3",
+    "vitest": "^1.3.1"
   },
   "peerDependencies": {
     "eslint-config-jwp": "*"
@@ -59,7 +59,6 @@
     "codeceptjs/**/minimatch": "^3.0.5",
     "flat": "^5.0.1",
     "glob-parent": "^5.1.2",
-    "json5": "^2.2.2",
-    "vite": "^4.4.8"
+    "json5": "^2.2.2"
   }
 }

packages/common/package.json

@@ -30,7 +30,7 @@
     "jsdom": "^22.1.0",
     "timezone-mock": "^1.3.4",
     "vi-fetch": "^0.8.0",
-    "vitest": "^0.34.6"
+    "vitest": "^1.3.1"
   },
   "peerDependencies": {
     "@jwp/ott-testing": "*",

packages/hooks-react/package.json

@@ -24,7 +24,7 @@
     "@testing-library/react": "^14.0.0",
     "@types/jwplayer": "^8.2.13",
     "vi-fetch": "^0.8.0",
-    "vitest": "^0.34.6"
+    "vitest": "^1.3.1"
   },
   "peerDependencies": {
     "@jwp/ott-common": "*",

packages/ui-react/package.json

@@ -45,7 +45,7 @@
     "typescript-plugin-css-modules": "^5.0.2",
     "vi-fetch": "^0.8.0",
     "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^0.34.6"
+    "vitest": "^1.3.1"
   },
   "peerDependencies": {
     "@jwp/ott-common": "*",

packages/ui-react/src/components/Button/__snapshots__/Button.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<Button> > renders and matches snapshot 1`] = `
 <div>
   <button
-    class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296 "
+    class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
     type="button"
   >
     <span>

packages/ui-react/src/components/CheckoutForm/__snapshots__/CheckoutForm.test.tsx.snap

@@ -131,7 +131,7 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
                   class="_input_e16c1b"
                   id="text-field_1235_cardnumber"
                   name="cardNumber"
-                  pattern="\\\\d*"
+                  pattern="\\d*"
                   placeholder="1234 5678 9012 3456"
                   required=""
                   type="text"
@@ -163,7 +163,7 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
                     class="_input_e16c1b"
                     id="text-field_1235_cardexpiry"
                     name="cardExpiry"
-                    pattern="\\\\d*"
+                    pattern="\\d*"
                     placeholder="MM/YY"
                     required=""
                     type="text"
@@ -193,7 +193,7 @@ exports[`<CheckoutForm> > renders and matches snapshot 1`] = `
                     class="_input_e16c1b"
                     id="text-field_1235_cardcvc"
                     name="cardCVC"
-                    pattern="\\\\d*"
+                    pattern="\\d*"
                     placeholder="###"
                     required=""
                     type="text"

packages/ui-react/src/components/CreditCardCVCField/__snapshots__/CreditCardCVCField.test.tsx.snap

@@ -22,7 +22,7 @@ exports[`<CreditCardCVCField> > renders and matches snapshot 1`] = `
         class="_input_e16c1b"
         id="text-field_1235_cardcvc"
         name="cardCVC"
-        pattern="\\\\d*"
+        pattern="\\d*"
         placeholder="###"
         required=""
         type="text"

packages/ui-react/src/components/CreditCardExpiryField/__snapshots__/CreditCardExpiryField.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`<CreditCardExpiryField> > renders and matches snapshot 1`] = `
         class="_input_e16c1b"
         id="text-field_1235_cardexpiry"
         name="cardExpiry"
-        pattern="\\\\d*"
+        pattern="\\d*"
         placeholder="MM/YY"
         required=""
         type="text"

packages/ui-react/src/components/CreditCardNumberField/__snapshots__/CreditCardNumberField.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`<CreditCardNumberField> > renders and matches snapshot 1`] = `
         class="_input_e16c1b"
         id="text-field_1235_cardnumber"
         name="cardNumber"
-        pattern="\\\\d*"
+        pattern="\\d*"
         placeholder="1234 5678 9012 3456"
         required=""
         type="text"

packages/ui-react/src/components/Sidebar/__snapshots__/Sidebar.test.tsx.snap

@@ -40,7 +40,7 @@ exports[`<SideBar /> > renders sideBar closed 1`] = `
     >
       <a
         aria-current="page"
-        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296 "
+        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
         href="/"
       >
         <span>
@@ -91,7 +91,7 @@ exports[`<SideBar /> > renders sideBar opened 1`] = `
     >
       <a
         aria-current="page"
-        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296 "
+        class="_button_f8f296 _default_f8f296 _outlined_f8f296 _active_f8f296"
         href="/"
       >
         <span>

packages/ui-react/src/pages/User/__snapshots__/User.test.tsx.snap

@@ -15,7 +15,7 @@ exports[`User Component tests > Account Page 1`] = `
           <li>
             <a
               aria-current="page"
-              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296 "
+              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296"
               href="/u/my-account"
             >
               <div
@@ -312,7 +312,7 @@ exports[`User Component tests > Favorites Page 1`] = `
           <li>
             <a
               aria-current="page"
-              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296 "
+              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296"
               href="/u/favorites"
             >
               <div
@@ -591,7 +591,7 @@ exports[`User Component tests > Payments Page 1`] = `
           <li>
             <a
               aria-current="page"
-              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296 "
+              class="_button_f8f296 _button_e9c5ca _default_f8f296 _text_f8f296 _active_f8f296"
               href="/u/payments"
             >
               <div

platforms/web/.eslintrc.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  extends: ['jwp/react'],
+  env: {
+    node: true, // Enables recognition of Node.js global variables and scoping rules
+  },
+};

platforms/web/lighthouserc.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
   ci: {
     collect: {
       numberOfRuns: 3,

platforms/web/package.json

@@ -11,8 +11,8 @@
     "build": "vite build --mode ${MODE:=prod} && sh scripts/compressIni.sh build/public/.webapp.ini",
     "codecept-serve:desktop": "yarn codecept:desktop ; yarn serve-report:desktop",
     "codecept-serve:mobile": "yarn codecept:mobile ; yarn serve-report:mobile",
-    "codecept:desktop": "cd test-e2e && rm -rf \"./output/desktop\" && codeceptjs run-workers --suites ${WORKER_COUNT:=8} --config ./codecept.desktop.js",
-    "codecept:mobile": "cd test-e2e && rm -rf \"./output/mobile\" && codeceptjs run-workers --suites ${WORKER_COUNT:=8} --config ./codecept.mobile.js",
+    "codecept:desktop": "cd test-e2e && rm -rf \"./output/desktop\" && codeceptjs run-workers --suites ${WORKER_COUNT:=8} --config ./codecept.desktop.cjs",
+    "codecept:mobile": "cd test-e2e && rm -rf \"./output/mobile\" && codeceptjs run-workers --suites ${WORKER_COUNT:=8} --config ./codecept.mobile.cjs",
     "generate-pwa-assets": "pwa-assets-generator",
     "lint:ts": "tsc --pretty --noEmit -p ./ && tsc --pretty --noEmit -p ./test-e2e",
     "load-content-types": "npx ts-node ./scripts/content-types/load-content-types",
@@ -70,14 +70,14 @@
     "ts-node": "^10.9.1",
     "tsconfig-paths": "^4.1.0",
     "vi-fetch": "^0.8.0",
-    "vite": "^4.4.8",
+    "vite": "^5.1.5",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-html": "^3.2.0",
-    "vite-plugin-pwa": "^0.14.0",
+    "vite-plugin-html": "^3.2.2",
+    "vite-plugin-pwa": "^0.19.2",
     "vite-plugin-static-copy": "^0.17.0",
-    "vite-plugin-stylelint": "^4.3.0",
+    "vite-plugin-stylelint": "^5.3.1",
     "vite-plugin-svgr": "^4.2.0",
-    "vitest": "^0.34.6",
+    "vitest": "^1.3.1",
     "workbox-build": "^6.5.4",
     "workbox-window": "^6.5.4"
   },

platforms/web/vite.config.ts

@@ -157,5 +157,10 @@ export default ({ mode, command }: ConfigEnv): UserConfigExport => {
       setupFiles: ['test/vitest.setup.ts'],
       css: true,
     },
+    optimizeDeps: {
+      esbuildOptions: {
+        tsconfig: 'tsconfig.json',
+      },
+    },
   });
 };

tsconfig.base.json

@@ -13,7 +13,7 @@
     "forceConsistentCasingInFileNames": true,
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
-    "importsNotUsedAsValues": "error",
+    "verbatimModuleSyntax": false,
     // Ensure unused code is cleaned up
     "noUnusedParameters": true,
     "noUnusedLocals": true,