chore(deps): update dependency eslint to v9 (#452)

* chore(deps): update dependency eslint to v9

* chore: migrate eslint to v9

* fix: dependency issues

* fix: unit tests not working

* chore: disable lint check for Image component that does not work in ci

* fix: lint issue

---------

Co-authored-by: homarr-renovate[bot] <158783068+homarr-renovate[bot]@users.noreply.github.com>
Co-authored-by: Meier Lukas <meierschlumpf@gmail.com>

packages/widgets/eslint.config.js

@@ -0,0 +1,5 @@
+import baseConfig from "@homarr/eslint-config/base";
+import reactConfig from "@homarr/eslint-config/react";
+
+/** @type {import('typescript-eslint').Config} */
+export default [...baseConfig, ...reactConfig];

packages/widgets/package.json

@@ -2,6 +2,7 @@
   "name": "@homarr/widgets",
   "private": true,
   "version": "0.1.0",
+  "type": "module",
   "exports": {
     ".": "./index.ts",
     "./errors": "./src/errors/component.tsx"
@@ -16,7 +17,7 @@
   "license": "MIT",
   "scripts": {
     "clean": "rm -rf .turbo node_modules",
-    "lint": "eslint .",
+    "lint": "eslint",
     "format": "prettier --check . --ignore-path ../../.gitignore",
     "typecheck": "tsc --noEmit"
   },
@@ -26,14 +27,9 @@
     "@homarr/tsconfig": "workspace:^0.1.0",
     "@types/prismjs": "^1.26.4",
     "@types/video.js": "^7.3.58",
-    "eslint": "^8.57.0",
+    "eslint": "^9.4.0",
     "typescript": "^5.4.5"
   },
-  "eslintConfig": {
-    "extends": [
-      "@homarr/eslint-config/base"
-    ]
-  },
   "prettier": "@homarr/prettier-config",
   "dependencies": {
     "@homarr/api": "workspace:^0.1.0",

packages/widgets/src/_inputs/widget-multiselect-input.tsx

@@ -20,7 +20,7 @@ export const WidgetMultiSelectInput = ({ property, kind, options }: CommonWidget
           ? option
           : {
               value: option.value,
-              label: translateIfNecessary(t, option.label)!,
+              label: translateIfNecessary(t, option.label) ?? option.value,
             },
       )}
       description={options.withDescription ? t("description") : undefined}

packages/widgets/src/_inputs/widget-select-input.tsx

@@ -36,7 +36,7 @@ export const WidgetSelectInput = ({ property, kind, options }: CommonWidgetInput
           ? option
           : {
               value: option.value,
-              label: translateIfNecessary(t, option.label)!,
+              label: translateIfNecessary(t, option.label) ?? option.value,
             },
       )}
       description={options.withDescription ? tWidget("description") : undefined}

packages/widgets/src/app/component.tsx

@@ -27,7 +27,7 @@ export default function AppWidget({ options, serverData, isEditMode, width, heig
     {
       initialData:
         // We need to check if the id's match because otherwise the same initialData for a changed id will be used
-        serverData?.app?.id === options.appId ? serverData?.app : undefined,
+        serverData?.app?.id === options.appId ? serverData.app : undefined,
       refetchOnMount: false,
       refetchOnWindowFocus: false,
       refetchOnReconnect: false,
@@ -54,12 +54,12 @@ export default function AppWidget({ options, serverData, isEditMode, width, heig
       ? [
           {
             id: `app-${options.appId}`,
-            title: app?.name,
-            description: app?.description ?? "",
-            icon: app?.iconUrl,
+            title: app.name,
+            description: app.description ?? "",
+            icon: app.iconUrl,
             group: "app",
             type: "link",
-            href: app?.href,
+            href: app.href,
             openInNewTab: options.openInNewTab,
           },
         ]

packages/widgets/src/modals/widget-edit-modal.tsx

@@ -62,6 +62,7 @@ export const WidgetEditModal = createModal<ModalProps<WidgetKind>>(({ actions, i
           {Object.entries(definition.options).map(([key, value]: [string, OptionsBuilderResult[string]]) => {
             const Input = getInputForType(value.type);
 
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
             if (!Input || value.shouldHide?.(form.values.options as never)) {
               return null;
             }

packages/widgets/src/notebook/notebook.tsx

@@ -303,7 +303,9 @@ export function Notebook({ options, isEditMode, boardId, itemId }: WidgetCompone
             <RichTextEditor.BulletList title={tControls("bulletList")} />
             <RichTextEditor.OrderedList title={tControls("orderedList")} />
             <TaskListToggle />
-            {(editor?.isActive("taskList") || editor?.isActive("bulletList") || editor?.isActive("orderedList")) && (
+            {(Boolean(editor?.isActive("taskList")) ||
+              Boolean(editor?.isActive("bulletList")) ||
+              Boolean(editor?.isActive("orderedList"))) && (
               <>
                 <ListIndentIncrease />
                 <ListIndentDecrease />
@@ -680,7 +682,7 @@ function ListIndentIncrease() {
   }, [editor, itemType]);
 
   editor?.on("selectionUpdate", ({ editor }) => {
-    setItemType(editor?.isActive("taskItem") ? "taskItem" : "listItem");
+    setItemType(editor.isActive("taskItem") ? "taskItem" : "listItem");
   });
 
   return (
@@ -704,7 +706,7 @@ function ListIndentDecrease() {
   }, [editor, itemType]);
 
   editor?.on("selectionUpdate", ({ editor }) => {
-    setItemType(editor?.isActive("taskItem") ? "taskItem" : "listItem");
+    setItemType(editor.isActive("taskItem") ? "taskItem" : "listItem");
   });
 
   return (

packages/widgets/src/widget-integration-select.tsx

@@ -98,6 +98,7 @@ export const WidgetIntegrationSelect = ({
                   if (event.key !== "Backspace") return;
 
                   event.preventDefault();
+                  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                   handleValueRemove(multiSelectValues[multiSelectValues.length - 1]!);
                 }}
               />