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>
2024-06-08 20:49:57 +02:00
parent d7ecdf5567
commit 1bae7352dc
117 changed files with 686 additions and 604 deletions
--- a/apps/nextjs/eslint.config.js
+++ b/apps/nextjs/eslint.config.js
@@ -0,0 +1,13 @@
+import baseConfig from "@homarr/eslint-config/base";
+import nextjsConfig from "@homarr/eslint-config/nextjs";
+import reactConfig from "@homarr/eslint-config/react";
+
+/** @type {import('typescript-eslint').Config} */
+export default [
+  {
+    ignores: [".next/**"],
+  },
+  ...baseConfig,
+  ...reactConfig,
+  ...nextjsConfig,
+];
--- a/apps/nextjs/next.config.mjs
+++ b/apps/nextjs/next.config.mjs
@@ -10,12 +10,10 @@ const config = {
  eslint: { ignoreDuringBuilds: true },
  typescript: { ignoreBuildErrors: true },
  webpack: (config) => {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-call, @typescript-eslint/no-unsafe-member-access
    config.module.rules.push({
      test: /\.node$/,
      loader: "node-loader",
    });
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
    return config;
  },
  experimental: {
--- a/apps/nextjs/package.json
+++ b/apps/nextjs/package.json
@@ -7,7 +7,7 @@
    "build": "pnpm with-env next build",
    "clean": "git clean -xdf .next .turbo node_modules",
    "dev": "pnpm with-env next dev",
-    "lint": "dotenv -v SKIP_ENV_VALIDATION=1 next lint",
+    "lint": "eslint",
    "format": "prettier --check . --ignore-path ../../.gitignore",
    "start": "pnpm with-env next start",
    "typecheck": "tsc --noEmit",
@@ -73,19 +73,11 @@
    "@types/react": "^18.3.3",
    "@types/react-dom": "^18.3.0",
    "concurrently": "^8.2.2",
-    "eslint": "^8.57.0",
+    "eslint": "^9.4.0",
    "node-loader": "^2.0.0",
    "prettier": "^3.3.1",
    "tsx": "4.14.0",
    "typescript": "^5.4.5"
  },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@homarr/eslint-config/base",
-      "@homarr/eslint-config/nextjs",
-      "@homarr/eslint-config/react"
-    ]
-  },
  "prettier": "@homarr/prettier-config"
 }
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_context.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_context.tsx
@@ -49,7 +49,6 @@ export const BoardProvider = ({

  useEffect(() => {
    setReadySections((previous) => previous.filter((id) => data.sections.some((section) => section.id === id)));
-    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [data.sections.length, setReadySections]);

  const markAsReady = useCallback((id: string) => {
--- a/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/(content)/_theme.tsx
@@ -33,6 +33,7 @@ export const generateColors = (hex: string) => {
  return rgbaColors.map((color) => {
    return (
      "#" +
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
      color
        .split("(")[1]!
        .replaceAll(" ", "")
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/group-access.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/group-access.tsx
@@ -81,6 +81,7 @@ export const GroupsForm = ({ board, initialPermissions, onCountChange }: FormPro
              {form.values.items.map((row, index) => (
                <BoardAccessSelectRow
                  key={row.itemId}
+                  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                  itemContent={<GroupItemContent group={groups.get(row.itemId)!} />}
                  permission={row.permission}
                  index={index}
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-access.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access/user-access.tsx
@@ -93,6 +93,7 @@ export const UsersForm = ({ board, initialPermissions, onCountChange }: FormProp
              {form.values.items.map((row, index) => (
                <BoardAccessSelectRow
                  key={row.itemId}
+                  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                  itemContent={<UserItemContent user={users.get(row.itemId)!} />}
                  permission={row.permission}
                  index={index}
--- a/apps/nextjs/src/app/[locale]/compose.tsx
+++ b/apps/nextjs/src/app/[locale]/compose.tsx
@@ -6,7 +6,6 @@ export const composeWrappers = (
  wrappers: React.FunctionComponent<PropsWithChildren>[],
 ): React.FunctionComponent<PropsWithChildren> => {
  return wrappers.reverse().reduce((Acc, Current): React.FunctionComponent<PropsWithChildren> => {
-    // eslint-disable-next-line react/display-name
    return (props) => (
      <Current>
        <Acc {...props} />
--- a/apps/nextjs/src/app/[locale]/manage/about/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/about/page.tsx
@@ -21,11 +21,11 @@ import { setStaticParamsLocale } from "next-international/server";

 import { getScopedI18n, getStaticParams } from "@homarr/translation/server";

+import { homarrLogoPath } from "~/components/layout/logo/homarr-logo";
 import { createMetaTitle } from "~/metadata";
 import { getPackageAttributesAsync } from "~/versions/package-reader";
 import contributorsData from "../../../../../../../static-data/contributors.json";
 import translatorsData from "../../../../../../../static-data/translators.json";
-import logo from "../../../../../public/logo/logo.png";
 import classes from "./about.module.css";

 export async function generateMetadata() {
@@ -50,7 +50,7 @@ export default async function AboutPage({ params: { locale } }: PageProps) {
    <div>
      <Center w="100%">
        <Group py="lg">
-          <Image src={logo} width={100} height={100} alt="" />
+          <Image src={homarrLogoPath} width={100} height={100} alt="" />
          <Stack gap={0}>
            <Title order={1} tt="uppercase">
              Homarr
--- a/apps/nextjs/src/app/[locale]/manage/boards/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/boards/page.tsx
@@ -83,7 +83,7 @@ const BoardCard = async ({ board }: BoardCardProps) => {
            {board.creator && (
              <Group gap="xs">
                <UserAvatar user={board.creator} size="sm" />
-                <Text>{board.creator?.name}</Text>
+                <Text>{board.creator.name}</Text>
              </Group>
            )}
          </Group>
--- a/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx
@@ -95,6 +95,7 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
            {secretsKinds.map((kind, index) => (
              <SecretCard
                key={kind}
+                // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
                secret={secretsMap.get(kind)!}
                onCancel={() =>
                  new Promise((res) => {
@@ -107,7 +108,7 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
                      children: t("integration.secrets.reset.message"),
                      onCancel: () => res(false),
                      onConfirm: () => {
-                        form.setFieldValue(`secrets.${index}.value`, secretsMap.get(kind)!.value ?? "");
+                        form.setFieldValue(`secrets.${index}.value`, secretsMap.get(kind)?.value ?? "");
                        res(true);
                      },
                    });
--- a/apps/nextjs/src/app/[locale]/manage/integrations/new/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/new/page.tsx
@@ -17,6 +17,7 @@ interface NewIntegrationPageProps {
 }

 export default async function IntegrationsNewPage({ searchParams }: NewIntegrationPageProps) {
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
  const result = z.enum([integrationKinds[0]!, ...integrationKinds.slice(1)]).safeParse(searchParams.kind);
  if (!result.success) {
    notFound();
--- a/apps/nextjs/src/app/[locale]/manage/integrations/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/integrations/page.tsx
@@ -82,6 +82,7 @@ const IntegrationList = async ({ integrations, activeTab }: IntegrationListProps

  const grouppedIntegrations = integrations.reduce(
    (acc, integration) => {
+      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
      if (!acc[integration.kind]) {
        acc[integration.kind] = [];
      }
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-avatar-form.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/_components/_profile-avatar-form.tsx
@@ -136,6 +136,6 @@ const fileToBase64Async = async (file: File): Promise<string> =>
  new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
-    reader.onload = () => resolve(reader.result?.toString() || "");
+    reader.onload = () => resolve(reader.result?.toString() ?? "");
    reader.onerror = reject;
  });
--- a/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/[userId]/general/page.tsx
@@ -35,7 +35,7 @@ export async function generateMetadata({ params }: Props) {
  const t = await getScopedI18n("management.page.user.edit");

  return {
-    title: createMetaTitle(t("metaTitle", { username: user?.name })),
+    title: createMetaTitle(t("metaTitle", { username: user.name })),
  };
 }

--- a/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/create/_components/create-user-stepper.tsx
@@ -71,7 +71,8 @@ export const UserCreateStepperComponent = () => {

  const allForms = useMemo(() => [generalForm, securityForm], [generalForm, securityForm]);

-  const isCurrentFormValid = allForms[active] ? (allForms[active]!.isValid satisfies () => boolean) : () => true;
+  const activeForm = allForms[active];
+  const isCurrentFormValid = activeForm ? activeForm.isValid : () => true;
  const canNavigateToNextStep = isCurrentFormValid();

  const controlledGoToNextStep = useCallback(async () => {
--- a/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/page.tsx
+++ b/apps/nextjs/src/app/[locale]/manage/users/groups/[id]/members/page.tsx
@@ -24,7 +24,8 @@ export default async function GroupsDetailPage({ params, searchParams }: GroupsD
  const group = await api.group.getById({ id: params.id });

  const filteredMembers = searchParams.search
-    ? group.members.filter((member) => member.name?.toLowerCase().includes(searchParams.search!.trim().toLowerCase()))
+    ? // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      group.members.filter((member) => member.name?.toLowerCase().includes(searchParams.search!.trim().toLowerCase()))
    : group.members;

  return (
--- a/apps/nextjs/src/components/board/items/item-actions.tsx
+++ b/apps/nextjs/src/components/board/items/item-actions.tsx
@@ -90,7 +90,6 @@ export const useItemActions = () => {
  const updateItemOptions = useCallback(
    ({ itemId, newOptions }: UpdateItemOptions) => {
      updateBoard((previous) => {
-        if (!previous) return previous;
        return {
          ...previous,
          sections: previous.sections.map((section) => {
@@ -117,7 +116,6 @@ export const useItemActions = () => {
  const updateItemAdvancedOptions = useCallback(
    ({ itemId, newAdvancedOptions }: UpdateItemAdvancedOptions) => {
      updateBoard((previous) => {
-        if (!previous) return previous;
        return {
          ...previous,
          sections: previous.sections.map((section) => {
@@ -144,7 +142,6 @@ export const useItemActions = () => {
  const updateItemIntegrations = useCallback(
    ({ itemId, newIntegrations }: UpdateItemIntegrations) => {
      updateBoard((previous) => {
-        if (!previous) return previous;
        return {
          ...previous,
          sections: previous.sections.map((section) => {
--- a/apps/nextjs/src/components/board/sections/category/category-actions.ts
+++ b/apps/nextjs/src/components/board/sections/category/category-actions.ts
@@ -37,6 +37,7 @@ export const useCategoryActions = () => {
        sections: [
          // Place sections before the new category
          ...previous.sections.filter(
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
            (section) => (section.kind === "category" || section.kind === "empty") && section.position < position,
          ),
          {
@@ -56,6 +57,7 @@ export const useCategoryActions = () => {
          ...previous.sections
            .filter(
              (section): section is CategorySection | EmptySection =>
+                // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
                (section.kind === "category" || section.kind === "empty") && section.position >= position,
            )
            .map((section) => ({
@@ -74,6 +76,7 @@ export const useCategoryActions = () => {
        const lastSection = previous.sections
          .filter(
            (section): section is CategorySection | EmptySection =>
+              // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
              section.kind === "empty" || section.kind === "category",
          )
          .sort((sectionA, sectionB) => sectionB.position - sectionA.position)
@@ -130,12 +133,13 @@ export const useCategoryActions = () => {
          (section): section is CategorySection => section.kind === "category" && section.id === id,
        );
        if (!currentCategory) return previous;
-        if (currentCategory?.position === 1 && direction === "up") return previous;
-        if (currentCategory?.position === previous.sections.length - 2 && direction === "down") return previous;
+        if (currentCategory.position === 1 && direction === "up") return previous;
+        if (currentCategory.position === previous.sections.length - 2 && direction === "down") return previous;

        return {
          ...previous,
          sections: previous.sections.map((section) => {
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
            if (section.kind !== "category" && section.kind !== "empty") return section;
            const offset = direction === "up" ? -2 : 2;
            // Move category and empty section
--- a/apps/nextjs/src/components/board/sections/content.tsx
+++ b/apps/nextjs/src/components/board/sections/content.tsx
@@ -1,6 +1,3 @@
-/* eslint-disable react/no-unknown-property */
-// Ignored because of gridstack attributes
-
 import type { RefObject } from "react";
 import { useEffect, useMemo, useRef } from "react";
 import { ActionIcon, Card, Menu } from "@mantine/core";
@@ -122,6 +119,7 @@ const BoardItemContent = ({ item, ...dimensions }: ItemContentProps) => {
          <Comp
            options={options as never}
            integrationIds={item.integrationIds}
+            // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
            serverData={serverData?.data as never}
            isEditMode={isEditMode}
            boardId={board.id}
--- a/apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts
+++ b/apps/nextjs/src/components/board/sections/gridstack/init-gridstack.ts
@@ -37,7 +37,7 @@ export const initializeGridstack = ({ section, refs, sectionColumnCount }: Initi
    `.grid-stack-${section.kind}[data-section-id='${section.id}']`,
  );
  const grid = newGrid.current;
-  if (!grid) return false;
+
  // Must be used to update the column count after the initialization
  grid.column(sectionColumnCount, "none");

--- a/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts
+++ b/apps/nextjs/src/components/board/sections/gridstack/use-gridstack.ts
@@ -54,15 +54,15 @@ export const useGridstack = ({ section, mainRef }: UseGridstackProps): UseGrista
  const onChange = useCallback(
    (changedNode: GridStackNode) => {
      const itemId = changedNode.el?.getAttribute("data-id");
-      if (!itemId) return;
+      if (!itemId || !changedNode.x || !changedNode.y || !changedNode.w || !changedNode.h) return;

      // Updates the react-query state
      moveAndResizeItem({
        itemId,
-        xOffset: changedNode.x!,
-        yOffset: changedNode.y!,
-        width: changedNode.w!,
-        height: changedNode.h!,
+        xOffset: changedNode.x,
+        yOffset: changedNode.y,
+        width: changedNode.w,
+        height: changedNode.h,
      });
    },
    [moveAndResizeItem],
@@ -70,16 +70,16 @@ export const useGridstack = ({ section, mainRef }: UseGridstackProps): UseGrista
  const onAdd = useCallback(
    (addedNode: GridStackNode) => {
      const itemId = addedNode.el?.getAttribute("data-id");
-      if (!itemId) return;
+      if (!itemId || !addedNode.x || !addedNode.y || !addedNode.w || !addedNode.h) return;

      // Updates the react-query state
      moveItemToSection({
        itemId,
        sectionId: section.id,
-        xOffset: addedNode.x!,
-        yOffset: addedNode.y!,
-        width: addedNode.w!,
-        height: addedNode.h!,
+        xOffset: addedNode.x,
+        yOffset: addedNode.y,
+        width: addedNode.w,
+        height: addedNode.h,
      });
    },
    [moveItemToSection, section.id],
@@ -121,7 +121,6 @@ export const useGridstack = ({ section, mainRef }: UseGridstackProps): UseGrista
    }

    // Only run this effect when the section items change
-    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [items.length, section.items.length, board.columnCount]);

  return {
--- a/apps/nextjs/src/components/layout/background.tsx
+++ b/apps/nextjs/src/components/layout/background.tsx
@@ -20,11 +20,11 @@ export const useOptionalBackgroundProps = (): Partial<AppShellProps> => {
  }

  return {
-    bg: `url(${board?.backgroundImageUrl})`,
+    bg: `url(${board.backgroundImageUrl})`,
    bgp: "center center",
-    bgsz: board?.backgroundImageSize ?? "cover",
-    bgr: board?.backgroundImageRepeat ?? "no-repeat",
-    bga: board?.backgroundImageAttachment ?? "fixed",
+    bgsz: board.backgroundImageSize,
+    bgr: board.backgroundImageRepeat,
+    bga: board.backgroundImageAttachment,
  };
 };

@@ -49,7 +49,7 @@ export const BoardBackgroundVideo = () => {
        height: "100vh",
        top: 0,
        left: 0,
-        objectFit: board.backgroundImageSize ?? "cover",
+        objectFit: board.backgroundImageSize,
      }}
    >
      <source src={board.backgroundImageUrl} type={`video/${videoFormat}`} />
--- a/apps/nextjs/src/components/layout/header/button.tsx
+++ b/apps/nextjs/src/components/layout/header/button.tsx
@@ -22,7 +22,6 @@ const headerButtonActionIconProps: ActionIconProps = {
  size: "lg",
 };

-// eslint-disable-next-line react/display-name
 export const HeaderButton = forwardRef<HTMLButtonElement, HeaderButtonProps>((props, ref) => {
  if ("href" in props) {
    return (
--- a/apps/nextjs/src/components/user-avatar-menu.tsx
+++ b/apps/nextjs/src/components/user-avatar-menu.tsx
@@ -72,7 +72,7 @@ export const UserAvatarMenu = ({ children }: UserAvatarMenuProps) => {
          <>
            <Menu.Item
              component={Link}
-              href={`/manage/users/${session.data?.user?.id}`}
+              href={`/manage/users/${session.data?.user.id}`}
              leftSection={<IconSettings size="1rem" />}
            >
              {t("preferences")}
--- a/apps/nextjs/src/components/user-avatar.tsx
+++ b/apps/nextjs/src/components/user-avatar.tsx
@@ -17,7 +17,8 @@ export const UserAvatar = async ({ size }: UserAvatarProps) => {

  if (!currentSession?.user) return <Avatar {...commonProps} />;
  if (currentSession.user.image)
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
    return <Avatar {...commonProps} src={currentSession.user.image} alt={currentSession.user.name!} />;

-  return <Avatar {...commonProps}>{currentSession.user.name!.substring(0, 2).toUpperCase()}</Avatar>;
+  return <Avatar {...commonProps}>{currentSession.user.name?.substring(0, 2).toUpperCase()}</Avatar>;
 };
--- a/apps/tasks/eslint.config.js
+++ b/apps/tasks/eslint.config.js
@@ -0,0 +1,9 @@
+import baseConfig from "@homarr/eslint-config/base";
+
+/** @type {import('typescript-eslint').Config} */
+export default [
+  {
+    ignores: ["build/**"],
+  },
+  ...baseConfig,
+];
--- a/apps/tasks/package.json
+++ b/apps/tasks/package.json
@@ -13,7 +13,7 @@
    "dev": "pnpm with-env tsx ./src/main.ts",
    "build": "esbuild src/main.ts --bundle --platform=node --outfile=tasks.cjs",
    "clean": "rm -rf .turbo node_modules",
-    "lint": "eslint .",
+    "lint": "eslint",
    "format": "prettier --check . --ignore-path ../../.gitignore",
    "typecheck": "tsc --noEmit",
    "with-env": "dotenv -e ../../.env --"
@@ -40,16 +40,10 @@
    "@types/node-cron": "^3.0.11",
    "@types/node": "^20.14.2",
    "dotenv-cli": "^7.4.2",
-    "eslint": "^8.57.0",
+    "eslint": "^9.4.0",
    "prettier": "^3.3.1",
    "tsx": "4.14.0",
    "typescript": "^5.4.5"
  },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@homarr/eslint-config/base"
-    ]
-  },
  "prettier": "@homarr/prettier-config"
 }
--- a/apps/websocket/eslint.config.js
+++ b/apps/websocket/eslint.config.js
@@ -0,0 +1,4 @@
+import baseConfig from "@homarr/eslint-config/base";
+
+/** @type {import('typescript-eslint').Config} */
+export default [...baseConfig];
--- a/apps/websocket/package.json
+++ b/apps/websocket/package.json
@@ -10,7 +10,7 @@
    "dev": "pnpm with-env tsx ./src/main.ts",
    "build": "esbuild src/main.ts --bundle --platform=node --outfile=wssServer.cjs --external:bcrypt --loader:.html=text --loader:.node=text",
    "clean": "rm -rf .turbo node_modules",
-    "lint": "eslint .",
+    "lint": "eslint",
    "format": "prettier --check . --ignore-path ../../.gitignore",
    "typecheck": "tsc --noEmit",
    "with-env": "dotenv -e ../../.env --"
@@ -32,15 +32,9 @@
    "@homarr/prettier-config": "workspace:^0.1.0",
    "@homarr/tsconfig": "workspace:^0.1.0",
    "@types/ws": "^8.5.10",
-    "eslint": "^8.57.0",
+    "eslint": "^9.4.0",
    "prettier": "^3.3.1",
    "typescript": "^5.4.5"
  },
-  "eslintConfig": {
-    "root": true,
-    "extends": [
-      "@homarr/eslint-config/base"
-    ]
-  },
  "prettier": "@homarr/prettier-config"
 }