Merge pull request #286 from DigitalSlideArchive/lint-pkg-upgrades

marySalvi · web-flow · commit 82ffd7513db6 · 2025-01-16T15:25:24.000-05:00
Lint pkg upgrades
diff --git a/client/.eslintrc.cjs b/client/.eslintrc.cjs
diff --git a/client/eslint.config.mjs b/client/eslint.config.mjs
@@ -0,0 +1,28 @@
+import eslint from '@eslint/js';
+import eslintConfigPrettier from 'eslint-config-prettier';
+import eslintPluginVue from 'eslint-plugin-vue';
+import globals from 'globals';
+import typescriptEslint from 'typescript-eslint';
+
+export default typescriptEslint.config(
+    { ignores: ['*.d.ts', '.yarn/**', '.gitignore', '.pnp.*'] },
+    {
+    extends: [
+        eslint.configs.recommended,
+      ...typescriptEslint.configs.recommended,
+      ...eslintPluginVue.configs['flat/recommended'],
+    ],
+    files: ['**/*.{ts,tsx,vue,js,jsx,cjs,mjs,cts,mts}'],
+
+    languageOptions: {
+        globals: globals.browser,
+        ecmaVersion: 'latest',
+        sourceType: "module",
+
+        parserOptions: {
+            parser: "@typescript-eslint/parser",
+        },
+    },
+},
+eslintConfigPrettier
+);
diff --git a/client/package.json b/client/package.json
@@ -6,7 +6,7 @@
   "type": "module",
   "scripts": {
     "lint:tsc": "vue-tsc --noEmit",
-    "lint:check": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore --fix ",
+    "lint:check": "eslint . --fix ",
     "lint:format": "prettier src  --write",
     "lint": "npm-run-all lint:tsc lint:check lint:format",
     "dev": "NODE_ENV=development vite --port 8080",
@@ -15,27 +15,31 @@
     "build": "npm-run-all build:clean build:compile"
   },
   "dependencies": {
-    "eslint-config-prettier": "^9.1.0",
     "remixicon": "^3.6.0",
     "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@typescript-eslint/eslint-plugin": "^7.4.0",
-    "@typescript-eslint/parser": "^7.4.0",
+    "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^9.17.0",
+    "@typescript-eslint/eslint-plugin": "^8.19.1",
+    "@typescript-eslint/parser": "^8.19.1",
     "@vitejs/plugin-vue": "^4.2.3",
     "autoprefixer": "^10.4.16",
     "daisyui": "^4.0.7",
-    "eslint": "^8.56.0",
-    "eslint-plugin-vue": "^9.19.2",
+    "eslint": "^9.17.0",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-plugin-vue": "^9.32.0",
+    "globals": "^15.14.0",
     "npm-run-all": "^4.1.5",
     "postcss": "^8.4.31",
     "prettier": "^3.1.1",
     "rimraf": "^5.0.5",
     "tailwindcss": "^3.3.5",
     "typescript": "^5.3.3",
+    "typescript-eslint": "^8.19.1",
     "vite": "^4.5.5",
-    "vue-eslint-parser": "^9.4.2",
-    "vue-tsc": "^1.8.5"
+    "vue-eslint-parser": "^9.4.3",
+    "vue-tsc": "^2.2.0"
   },
   "packageManager": "yarn@4.5.1+sha256.dc2e45a77f87a9c2a76708d098ab54ca0cfdd5ec2cf7d9e3c1f24bf786a2383c",
   "dependenciesMeta": {
diff --git a/client/src/HomePage.vue b/client/src/HomePage.vue
@@ -125,7 +125,7 @@ onMounted(() => {
             </div>
             <div class="flex items-center space-y-0.5">
               <a class="btn btn-ghost btn-square btn-sm">
-                <i class="ri-side-bar-line text-lg text-neutral"></i>
+                <i class="ri-side-bar-line text-lg text-neutral" />
               </a>
             </div>
           </div>
@@ -152,8 +152,8 @@ onMounted(() => {
             :modal-id="'inputDirectory'"
             :title="'Input Directory'"
             @update-image-list="
-              ((redactionStateFlags.showImageTable = true),
-              (redactionStateFlags.redactionComplete = false))
+              (redactionStateFlags.showImageTable = true),
+                (redactionStateFlags.redactionComplete = false)
             "
           />
           <FileBrowser
@@ -186,7 +186,7 @@ onMounted(() => {
             <h2 class="font-bold text-xl text-center">
               Missing Redaction Rules
             </h2>
-            <div class="divider my-1"></div>
+            <div class="divider my-1" />
             <p class="indent-8 font-medium">
               One or more images are missing redaction rules. If you continue
               these images will not be redacted.
@@ -230,7 +230,7 @@ onMounted(() => {
               class="progress progress-primary"
               :value="progress.count"
               :max="progress.max"
-            ></progress>
+            />
           </div>
         </div>
       </div>
@@ -253,7 +253,7 @@ onMounted(() => {
             class="btn btn-xs btn-ghost"
             @click="redactionStateFlags.redactionSnackbar = false"
           >
-            <i class="ri-close-line"></i>
+            <i class="ri-close-line" />
           </button>
         </div>
       </div>
diff --git a/client/src/components/FileBrowser.vue b/client/src/components/FileBrowser.vue
@@ -1,6 +1,14 @@
 <script setup lang="ts">
 import { ref, onMounted, onBeforeUnmount } from "vue";
-import { selectedDirectories, updateDirectories, directoryData, loadingData, calculateVisibleItems, visibleImages, remainingImages } from "../store/directoryStore";
+import {
+  selectedDirectories,
+  updateDirectories,
+  directoryData,
+  loadingData,
+  calculateVisibleItems,
+  visibleImages,
+  remainingImages,
+} from "../store/directoryStore";
 import { updateTableData } from "../store/imageStore";
 
 const props = defineProps({
@@ -24,9 +32,18 @@ const closeModal = () => {
 
 const updateSelectedDirectories = (path: string) => {
   selectedDirectories.value[props.modalId] = path;
-  localStorage.setItem('inputDirectory', selectedDirectories.value.inputDirectory);
-  localStorage.setItem('outputDirectory', selectedDirectories.value.outputDirectory);
-  localStorage.setItem('rulesetDirectory', selectedDirectories.value.rulesetDirectory);
+  localStorage.setItem(
+    "inputDirectory",
+    selectedDirectories.value.inputDirectory,
+  );
+  localStorage.setItem(
+    "outputDirectory",
+    selectedDirectories.value.outputDirectory,
+  );
+  localStorage.setItem(
+    "rulesetDirectory",
+    selectedDirectories.value.rulesetDirectory,
+  );
 };
 
 onMounted(() => {
@@ -52,17 +69,17 @@ onBeforeUnmount(() => {
               class="btn btn-primary float-right text-white uppercase"
               type="button"
               @click="
-                ($emit('update-image-list'),
-                closeModal(),
-                title !== 'Output Directory'
-                  ? updateTableData({
-                      directory: selectedDirectories.inputDirectory,
-                      rules: selectedDirectories.rulesetDirectory,
-                      limit: 50,
-                      offset: 0,
-                      update: false,
-                    })
-                  : '')
+                $emit('update-image-list'),
+                  closeModal(),
+                  title !== 'Output Directory'
+                    ? updateTableData({
+                        directory: selectedDirectories.inputDirectory,
+                        rules: selectedDirectories.rulesetDirectory,
+                        limit: 50,
+                        offset: 0,
+                        update: false,
+                      })
+                    : ''
               "
             >
               Select
@@ -84,8 +101,8 @@ onBeforeUnmount(() => {
                   v-else
                   class="text-blue-700"
                   @click="
-                    (updateDirectories(ancestor.path),
-                    updateSelectedDirectories(ancestor.path))
+                    updateDirectories(ancestor.path),
+                      updateSelectedDirectories(ancestor.path)
                   "
                 >
                   {{ ancestor.name ? ancestor.name : "/" }}
@@ -94,10 +111,7 @@ onBeforeUnmount(() => {
             </ul>
           </div>
         </div>
-        <div
-          v-if="loadingData"
-          class="text-center"
-        >
+        <div v-if="loadingData" class="text-center">
           <span class="loading loading-spinner text-primary"></span>
           <span class="ml-2 italic font-light align-top"
             >Collecting Directory Data</span
@@ -165,17 +179,17 @@ onBeforeUnmount(() => {
     <form method="dialog" class="modal-backdrop w-screen h-screen absolute">
       <button
         @click="
-          ($emit('update-image-list'),
-          closeModal(),
-          title !== 'Output Directory'
-            ? updateTableData({
-                directory: selectedDirectories.inputDirectory,
-                rules: selectedDirectories.rulesetDirectory,
-                limit: 50,
-                offset: 0,
-                update: false,
-              })
-            : '')
+          $emit('update-image-list'),
+            closeModal(),
+            title !== 'Output Directory'
+              ? updateTableData({
+                  directory: selectedDirectories.inputDirectory,
+                  rules: selectedDirectories.rulesetDirectory,
+                  limit: 50,
+                  offset: 0,
+                  update: false,
+                })
+              : ''
         "
       >
         close
diff --git a/client/src/components/ImageDataTable.vue b/client/src/components/ImageDataTable.vue
@@ -12,7 +12,7 @@ defineProps({
 </script>
 <template>
   <div v-if="!usedColumns" class="m-auto flex justify-center">
-    Loading.. <span class="loading loading-bars loading-md"></span>
+    Loading.. <span class="loading loading-bars loading-md" />
   </div>
   <table
     v-if="usedColumns"
@@ -50,7 +50,7 @@ defineProps({
             class="tooltip tooltip-right"
             :data-tip="`${image.missing_tags.length} tag(s) missing redaction rules.`"
           >
-            <i class="ri-error-warning-fill text-red-600 text-xl"></i>
+            <i class="ri-error-warning-fill text-red-600 text-xl" />
             <div v-for="(obj, pos) in image.missing_tags" :key="pos">
               <span v-for="(value, key) in obj" :key="key">
                 {{ key }}: {{ value }}
@@ -63,7 +63,7 @@ defineProps({
             class="tooltip tooltip-right"
             :data-tip="`No missing redaction rules.`"
           >
-            <i class="ri-checkbox-circle-fill text-green-600 text-xl"></i>
+            <i class="ri-checkbox-circle-fill text-green-600 text-xl" />
           </div>
         </td>
         <template v-for="tag in usedColumns" :key="tag">
diff --git a/client/src/components/InfiniteScroller.vue b/client/src/components/InfiniteScroller.vue
@@ -26,8 +26,8 @@ onMounted(() => {
     ref="infiniteScroller"
     class="card rounded max-h-[calc(100vh-50px)] max-w-[calc(100vw-425px)] overflow-auto customScroll"
   >
-    <slot></slot>
-    <div ref="endOfTable"></div>
+    <slot />
+    <div ref="endOfTable" />
   </div>
 </template>
 <style scoped>
diff --git a/client/src/components/MenuSteps.vue b/client/src/components/MenuSteps.vue
@@ -33,14 +33,16 @@ const props = defineProps({
 });
 
 const openModal = () => {
-  props.stepTitle.includes("Input")
-    ? (props.inputModal.modal.showModal(),
-      updateDirectories(selectedDirectories.value.inputDirectory))
-    : props.stepTitle.includes("Output")
-      ? (props.outputModal.modal.showModal(),
-        updateDirectories(selectedDirectories.value.outputDirectory))
-      : (props.rulesetModal.modal.showModal(),
-        updateDirectories(selectedDirectories.value.rulesetDirectory));
+  if (props.stepTitle.includes("Input")) {
+    props.inputModal.modal.showModal();
+    updateDirectories(selectedDirectories.value.inputDirectory);
+  } else if (props.stepTitle.includes("Output")) {
+    props.outputModal.modal.showModal();
+    updateDirectories(selectedDirectories.value.outputDirectory);
+  } else {
+    props.rulesetModal.modal.showModal();
+    updateDirectories(selectedDirectories.value.rulesetDirectory);
+  }
 };
 
 const clearRuleset = () => {
@@ -84,7 +86,7 @@ const clearRuleset = () => {
         </div>
       </div>
       <button class="btn btn-ghost btn-square btn-sm" @click="openModal">
-        <i class="ri-folder-open-fill text-secondary text-lg"></i>
+        <i class="ri-folder-open-fill text-secondary text-lg" />
       </button>
     </div>
     <div
@@ -118,7 +120,7 @@ const clearRuleset = () => {
           data-tip="Clear selected rules"
           @click="clearRuleset"
         >
-          <i class="ri-close-circle-fill text-secondary text-lg"></i>
+          <i class="ri-close-circle-fill text-secondary text-lg" />
         </button>
       </div>
       <div
diff --git a/client/src/shims-vue.d.ts b/client/src/shims-vue.d.ts
@@ -0,0 +1,4 @@
+declare module "*.vue" {
+  import Vue from "vue";
+  export default Vue;
+}
diff --git a/client/src/store/directoryStore.ts b/client/src/store/directoryStore.ts
@@ -68,7 +68,8 @@ export const calculateVisibleItems = () => {
     const listHeight = ref(0);
     const visibleItems = ref(0);
     // Determine the height of each list item
-    const listItemHeight = listItems && listItems[0] ? listItems[0].clientHeight : 0;
+    const listItemHeight =
+      listItems && listItems[0] ? listItems[0].clientHeight : 0;
 
     directoryData.value.childrenImages.forEach(() => {
       listHeight.value += listItemHeight;
diff --git a/client/src/store/imageStore.ts b/client/src/store/imageStore.ts
@@ -26,7 +26,7 @@ export const useRedactionPlan = reactive({
       if (response.body) {
         const reader = response.body.getReader();
         const chunks = [];
-        // eslint-disable-next-line no-constant-condition
+
         while (true) {
           const { done, value } = await reader.read();
           if (done) break;
diff --git a/client/tailwind.config.js b/client/tailwind.config.js
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-require-imports */
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./index.html", "./src/**/*.{vue,js,ts}"],
@@ -34,7 +35,7 @@ module.exports = {
     themes: [
       {
         light: {
-          // eslint-disable-next-line @typescript-eslint/no-var-requires
+
           ...require("daisyui/src/theming/themes")["light"],
 
           primary: "#5A387C",
diff --git a/client/yarn.lock b/client/yarn.lock
