Upgrade to Eslint v9

eslint.config.mjs

@@ -0,0 +1,115 @@
+import { fixupConfigRules, fixupPluginRules } from "@eslint/compat";
+import { FlatCompat } from "@eslint/eslintrc";
+import js from "@eslint/js";
+import typescriptEslint from "@typescript-eslint/eslint-plugin";
+import tsParser from "@typescript-eslint/parser";
+import i18Next from "eslint-plugin-i18next";
+import noRelativeImportPaths from "eslint-plugin-no-relative-import-paths";
+import globals from "globals";
+import path from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+export default [
+  {
+    ignores: [
+      "**/dist",
+      "**/public",
+      "**/lib",
+      "**/build",
+      "**/*.bs.js",
+      "**/*.gen.tsx",
+      "**/*.res",
+      "**/*.css",
+      "**/*.csv",
+      "**/Dockerfile",
+    ],
+  },
+  ...fixupConfigRules(
+    compat.extends(
+      "eslint:recommended",
+      "plugin:react-hooks/recommended",
+      "plugin:@typescript-eslint/eslint-recommended",
+      "plugin:@typescript-eslint/recommended",
+      "plugin:i18next/recommended",
+      "plugin:prettier/recommended",
+    ),
+  ),
+  {
+    plugins: {
+      "@typescript-eslint": fixupPluginRules(typescriptEslint),
+      i18next: fixupPluginRules(i18Next),
+      "no-relative-import-paths": noRelativeImportPaths,
+    },
+
+    languageOptions: {
+      globals: {
+        ...globals.browser,
+        ...globals.node,
+      },
+
+      parser: tsParser,
+      ecmaVersion: 12,
+      sourceType: "module",
+
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+
+    rules: {
+      "no-unused-vars": "off",
+
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        {
+          argsIgnorePattern: "^_",
+          varsIgnorePattern: "^_",
+          caughtErrorsIgnorePattern: "^_",
+        },
+      ],
+
+      "@typescript-eslint/no-explicit-any": "warn",
+      "react/react-in-jsx-scope": "off",
+
+      "i18next/no-literal-string": [
+        "warn",
+        {
+          mode: "jsx-only",
+
+          "jsx-attributes": {
+            include: ["label", "placeholder", "error", "title"],
+            exclude: [".*"],
+          },
+
+          callees: {
+            exclude: [".*"],
+          },
+        },
+      ],
+
+      "no-relative-import-paths/no-relative-import-paths": [
+        "error",
+        {
+          allowSameFolder: true,
+          prefix: "@",
+        },
+      ],
+    },
+  },
+];

package.json

@@ -128,6 +128,9 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@eslint/compat": "^1.2.5",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.18.0",
     "@julr/vite-plugin-validate-env": "^1.1.1",
     "@tailwindcss/container-queries": "^0.1.1",
     "@tailwindcss/forms": "^0.5.9",
@@ -145,21 +148,22 @@
     "@types/react-dom": "^18.3.1",
     "@types/react-google-recaptcha": "^2.1.9",
     "@types/uuid": "^10.0.0",
-    "@typescript-eslint/eslint-plugin": "^7.18.0",
+    "@typescript-eslint/eslint-plugin": "^8.21.0",
+    "@typescript-eslint/parser": "^8.21.0",
     "autoprefixer": "^10.4.20",
     "cypress-localstorage-commands": "^2.2.6",
     "cypress-split": "^1.24.5",
     "dompurify": "^3.1.7",
     "dotenv": "^16.4.5",
-    "eslint": "^8.57.1",
+    "eslint": "^9.18.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-i18next": "^6.1.0",
-    "eslint-plugin-mdx": "^3.1.5",
     "eslint-plugin-no-relative-import-paths": "^1.6.1",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.2",
     "eslint-plugin-react-hooks": "^5.0.0",
     "glob": "^11.0.0",
+    "globals": "^15.14.0",
     "husky": "^9.1.7",
     "jsdom": "^25.0.1",
     "lint-staged": "^15.2.10",

src/CAREUI/interactive/SlideOver.tsx

@@ -68,7 +68,6 @@ export default function SlideOver({
       <Dialog
         as="div"
         className="relative z-30"
-        // eslint-disable-next-line @typescript-eslint/no-empty-function
         onClose={closeOnBackdropClick ? setOpen : () => {}}
       >
         <TransitionChild
@@ -117,7 +116,7 @@ export default function SlideOver({
                     className="flex h-8 w-8 items-center justify-center rounded-lg text-2xl hover:bg-black/20"
                     onClick={() => {
                       setOpen(false);
-                      onCloseClick && onCloseClick();
+                      if (onCloseClick) onCloseClick();
                     }}
                   >
                     <CareIcon icon="l-arrow-left" />

src/Locale/update_locale.js

@@ -1,4 +1,3 @@
-/* eslint-disable no-undef */
 import {
   existsSync,
   mkdirSync,
@@ -61,7 +60,7 @@ function getAllJSONFiles(folderName) {
   dir.forEach((file) => {
     try {
       files[file] = JSON.parse(readFile(`./${folderName}/${file}`));
-    } catch (e) {
+    } catch (_e) {
       throw new Error(`Cannot parse ${file} file!`);
     }
   });

src/Utils/useSegmentedRecorder.ts

@@ -41,15 +41,15 @@ const useSegmentedRecording = () => {
     }
 
     if (isRecording) {
-      recorder.state === "inactive" && recorder.start(bufferInterval);
+      if (recorder.state === "inactive") recorder.start(bufferInterval);
     } else {
       if (restart) {
         setIsRecording(true);
       } else {
         recorder?.stream?.getTracks()?.forEach((i) => i?.stop());
         recorder.stop();
       }
-      recorder.state === "recording" && recorder.stop();
+      if (recorder.state === "recording") recorder.stop();
     }
 
     // Obtain the audio when ready.
@@ -104,7 +104,7 @@ const useSegmentedRecording = () => {
       setRecorder(newRecorder);
       setMicrophoneAccess(true);
       setIsRecording(true);
-    } catch (error) {
+    } catch (_error) {
       setMicrophoneAccess(false);
       throw new Error("Microphone access denied");
     }

src/components/Common/DateInputV2.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { Popover, PopoverButton, PopoverPanel } from "@headlessui/react";
 import { t } from "i18next";
 import { MutableRefObject, useEffect, useRef, useState } from "react";

src/components/Common/ExcelFIleDragAndDrop.tsx

@@ -47,7 +47,7 @@ export default function ExcelFileDragAndDrop({
   const closeModal = () => {
     setSelectedFile(undefined);
     setFileData([]);
-    onClose && onClose();
+    if (onClose) onClose();
   };
 
   const onSelectFile = (file: Blob) => {
@@ -96,7 +96,7 @@ export default function ExcelFileDragAndDrop({
       setParsedData(parsedData);
       setValidData(ParsedDataWithOutErrors);
       if (ParsedDataWithOutErrors.length !== 0) {
-        setIsValid && setIsValid(true);
+        if (setIsValid) setIsValid(true);
       }
     }
   }, [fileData]);
@@ -197,7 +197,7 @@ export default function ExcelFileDragAndDrop({
                 setFileData([]);
                 setErrors([]);
                 setValidData([]);
-                setIsValid && setIsValid(false);
+                if (setIsValid) setIsValid(false);
                 dragProps.setDragOver(false);
                 dragProps.setFileDropError("");
               }}

src/components/Common/UpdatableApp.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-unused-expressions */
 import { Popover, Transition } from "@headlessui/react";
 import { ReactNode, useEffect, useState } from "react";
 

src/components/Files/AudioCaptureDialog.tsx

@@ -88,12 +88,12 @@ export default function AudioCaptureDialog(props: AudioCaptureDialogProps) {
             ? "PERMISSION_DENIED"
             : "WAITING_TO_RECORD",
         );
-      } catch (error) {
+      } catch (_error) {
         setStatus(null);
       }
     };
 
-    show && checkMicPermission();
+    if (show) checkMicPermission();
 
     return () => {
       setStatus(null);

src/components/Resource/ResourceCreate.tsx

@@ -85,7 +85,7 @@ export default function ResourceCreate(props: ResourceProps) {
           const phoneNumber = parsePhoneNumber(val);
           if (
             !phoneNumber ||
-            !PhoneNumberValidator()(phoneNumber) === undefined ||
+            PhoneNumberValidator()(phoneNumber) === undefined ||
             !phonePreg(String(phoneNumber))
           ) {
             return false;

src/components/ui/textarea.tsx

@@ -2,23 +2,21 @@ import * as React from "react";
 
 import { cn } from "@/lib/utils";
 
-export interface TextareaProps
-  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
-
-const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
-    return (
-      <textarea
-        className={cn(
-          "flex min-h-[80px] w-full rounded-md border border-gray-400/75 bg-white px-3 py-1 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:border-primary-500 focus-visible:outline-none focus-visible:ring-primary-500 md:text-sm disabled:opacity-50",
-          className,
-        )}
-        ref={ref}
-        {...props}
-      />
-    );
-  },
-);
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.TextareaHTMLAttributes<HTMLTextAreaElement>
+>(({ className, ...props }, ref) => {
+  return (
+    <textarea
+      className={cn(
+        "flex min-h-[80px] w-full rounded-md border border-gray-400/75 bg-white px-3 py-1 text-base shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:border-primary-500 focus-visible:outline-none focus-visible:ring-primary-500 md:text-sm disabled:opacity-50",
+        className,
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});
 Textarea.displayName = "Textarea";
 
 export { Textarea };