upgrade versions and fix linters (partially)

Co-authored-by: Min Kim <[email protected]>

build.js

@@ -1,5 +1,6 @@
 let esbuild = require("esbuild");
 const path = require("path");
+const { sassPlugin } = require("esbuild-sass-plugin");
 
 let entries = {
   contributions: "./static/js/src/contributions.js",
@@ -30,7 +31,7 @@ let entries = {
   utmInheritance: "./static/js/src/utm-inheritance.js",
   "kernel-form": "./static/js/src/kernel-form.js",
   "random-partner-logos": "./static/js/src/random-partner-logos.js",
-  "credEnterprisePurchasing": "./static/js/src/advantage/credentials/app.tsx",
+  credEnterprisePurchasing: "./static/js/src/advantage/credentials/app.tsx",
   activate: "./static/js/src/activate.js",
   "chiselled-chart": "./static/js/src/charts/chiselled-chart.js",
   tabbedContent: "./static/js/src/tabbed-content.js",
@@ -45,6 +46,7 @@ const captchaKey =
 
 for (const [key, value] of Object.entries(entries)) {
   const options = {
+    plugins: [sassPlugin()],
     entryPoints: [value],
     bundle: true,
     minify: isDev ? false : true,

eslint.config.mjs

@@ -0,0 +1,74 @@
+/** @type {import('eslint').Linter.FlatConfig[]} */
+import eslint from "@eslint/js";
+import reactPlugin from "eslint-plugin-react";
+import tsParser from '@typescript-eslint/parser'
+import tseslint from 'typescript-eslint';
+
+import globals from "globals";
+
+const config = [
+  eslint.configs.recommended.rules,
+  reactPlugin.configs.flat.recommended,
+  ...tseslint.configs.recommended,
+  {
+    // env: {
+    //   node: true,
+    //   browser: true,
+    //   es6: true,
+    //   jest: true,
+    // },
+    // extends: [
+    //   "eslint:recommended",
+    //   "plugin:react/recommended",
+    //   "plugin:@typescript-eslint/recommended",
+    // ],
+    languageOptions: {
+      ...reactPlugin.configs.flat.recommended.languageOptions,
+      globals: {
+        Atomics: "readonly",
+        SharedArrayBuffer: "readonly",
+        dataLayer: "readonly",
+        d3: "readonly",
+        topojson: "readonly",
+        ga: "readonly",
+        grecaptcha: "readonly",
+        serialize: "readonly",
+        ...globals.node,
+        ...globals.browser,
+        ...globals.jest,
+        ...globals.es2022
+      },
+      parser: tsParser,
+      parserOptions: {
+        ecmaVersion: 2018,
+        sourceType: "module",
+        project: "./tsconfig.json",
+        ecmaFeatures: {
+          jsx: true
+      }
+      },
+    },
+    // rules: {
+    //   semi: ["error", "always"],
+    //   "@typescript-eslint/explicit-module-boundary-types": "off",
+    //   "@typescript-eslint/no-empty-function": "off",
+    //   "@typescript-eslint/no-this-alias": "off",
+    //   "@typescript-eslint/no-var-requires": "off",
+    //   "@typescript-eslint/no-unused-vars": "off",
+    //   "no-prototype-builtins": "off",
+    // },
+    files: ["**/*.tsx"],
+    rules: {
+      semi: ["error", "always"],
+      "react/prop-types": "off",
+      "@typescript-eslint/explicit-module-boundary-types": "off",
+      "@typescript-eslint/no-empty-function": "off",
+      "@typescript-eslint/no-this-alias": "off",
+      "@typescript-eslint/no-var-requires": "off",
+      "@typescript-eslint/no-unused-vars": "off",
+      "no-prototype-builtins": "off",
+    },
+  },
+];
+
+export default config;

package.json

@@ -42,6 +42,7 @@
     "@babel/preset-react": "7.24.7",
     "@babel/preset-typescript": "7.16.7",
     "@cfaester/enzyme-adapter-react-18": "0.8.0",
+    "@eslint/js": "^9.7.0",
     "@playwright/test": "^1.40.0",
     "@sentry/types": "^8.19.0",
     "@testing-library/dom": "10.4.0",
@@ -50,6 +51,7 @@
     "@testing-library/react-hooks": "8.0.1",
     "@testing-library/user-event": "14.5.2",
     "@types/enzyme": "3.10.18",
+    "@types/eslint__js": "^8.42.3",
     "@types/jest": "29.5.12",
     "@types/lodash": "4.14.175",
     "@types/node": "^20.9.3",
@@ -63,7 +65,7 @@
     "concurrently": "8.2.0",
     "csstype": "3.0.8",
     "enzyme": "3.11.0",
-    "eslint": "7.32.0",
+    "eslint": "^9.7.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-react": "7.35.0",
     "fishery": "1.4.0",
@@ -78,29 +80,32 @@
     "stylelint-order": "4.1.0",
     "stylelint-prettier": "1.2.0",
     "stylelint-scss": "3.21.0",
+    "typescript-eslint": "^7.17.0",
     "watch-cli": "0.2.3"
   },
   "dependencies": {
     "@axe-core/playwright": "^4.8.5",
     "@canonical/cookie-policy": "^3.6.4",
     "@canonical/global-nav": "3.6.4",
     "@canonical/latest-news": "1.5.0",
-    "@canonical/react-components": "^0.38.0",
+    "@canonical/react-components": "^0.59.1",
     "@reduxjs/toolkit": "1.7.1",
     "@sentry/react": "^8.19.0",
     "@sentry/tracing": "^7.114.0",
     "@stripe/react-stripe-js": "2.7.3",
     "@stripe/stripe-js": "4.1.0",
     "@tanstack/react-query": "^5.51.11",
     "@tanstack/react-query-devtools": "^5.51.11",
-    "@types/react": "^18.3.3",
+    "@types/react": "^18.3.1",
     "autoprefixer": "10.4.1",
     "date-fns": "2.28.0",
     "date-fns-tz": "1.3.4",
     "dotenv": "^16.3.1",
     "esbuild": "0.23.0",
+    "esbuild-sass-plugin": "^3.3.1",
     "flickity": "^3.0.0",
     "formik": "2.4.6",
+    "globals": "^15.8.0",
     "intl-tel-input": "23.3.2",
     "postcss": "8.4.31",
     "postcss-cli": "8.3.1",
@@ -112,7 +117,7 @@
     "react-useportal": "1.0.16",
     "sass": "1.45.2",
     "smartquotes": "2.3.2",
-    "typescript": "5.5.4",
+    "typescript": "^5.5.4",
     "url-polyfill": "1.1.12",
     "url-search-params-polyfill": "8.1.1",
     "vanilla-framework": "4.14.0",

static/js/src/advantage/react/components/Subscriptions/SubscriptionDetails/DetailsTabs/DetailsTabs.test.tsx

@@ -12,7 +12,7 @@ import { EntitlementType } from "advantage/api/enum";
 import { getQueryClientWrapper } from "advantage/tests/utils";
 
 const mount = (Component: React.ReactElement) =>
-  enzymeMount(Component, {
+  enzymeMount(Component as JSX.Element, {
     wrappingComponent: getQueryClientWrapper(),
   });
 

static/js/src/advantage/react/components/Subscriptions/SubscriptionDetails/SubscriptionDetails.tsx

@@ -89,7 +89,8 @@ export const SubscriptionDetails = forwardRef<HTMLDivElement, Props>(
               <>
                 The {unitName} entitlement below will update to{" "}
                 <b>{subscription?.current_number_of_machines}</b> at the next
-                billing cycle on <b>{formatDate(nextCycleStart ?? "").toString()}</b>.
+                billing cycle on{" "}
+                <b>{formatDate(nextCycleStart ?? "").toString()}</b>.
               </>
             ),
           });

static/js/src/advantage/react/components/Subscriptions/SubscriptionList/ListCard/ListCard.tsx

@@ -169,14 +169,14 @@ const ListCard = ({
           <Col medium={3} size={4} small={1}>
             <p className="u-text--muted u-no-margin--bottom">Created</p>
             <span data-test="card-start-date">
-              {formatDate(subscription.start_date)}
+              {formatDate(subscription.start_date).toString()}
             </span>
           </Col>
           <Col medium={3} size={4} small={1}>
             <p className="u-text--muted u-no-margin--bottom">Expires</p>
             <span data-test="card-end-date">
               {subscription.end_date
-                ? formatDate(subscription.end_date)
+                ? formatDate(subscription.end_date).toString()
                 : "Never"}
             </span>
           </Col>

static/js/src/advantage/subscribe/checkout/components/Summary/Summary.test.tsx

@@ -42,7 +42,7 @@ describe("Summary", () => {
         data: undefined,
         isError: false,
         isSuccess: true,
-        error: undefined,
+        error: null,
         isFetching: false,
       };
     });
@@ -53,7 +53,7 @@ describe("Summary", () => {
         data: undefined,
         isError: false,
         isSuccess: true,
-        error: undefined,
+        error: null,
         isFetching: false,
       };
     });
@@ -106,7 +106,7 @@ describe("Summary", () => {
         },
         isError: false,
         isSuccess: true,
-        error: undefined,
+        error: null,
         isFetching: false,
       };
     });
@@ -147,7 +147,7 @@ describe("Summary", () => {
         },
         isError: false,
         isSuccess: true,
-        error: undefined,
+        error: null,
         isFetching: false,
       };
     });
@@ -190,7 +190,7 @@ describe("Summary", () => {
         },
         isError: true,
         isSuccess: true,
-        error: { message: "error" },
+        error: { name: "", message: "error" },
         isFetching: false,
       };
     });

tsconfig.json

@@ -21,7 +21,12 @@
     "skipLibCheck": true,
     "strict": true,
     "target": "es6",
-    "types": ["node", "jest"]
+    "types": ["node", "jest"],
   },
-  "include": ["static/js/src", "tests/setupTests.ts"]
+  "include": ["static/js/src", "tests/setupTests.ts"],
+  "paths": [
+    {
+      "*": ["types/*.d.ts"]
+    }
+  ]
 }