From 92a8db718cee3b8dddc3d06548007f6d0ac1fc26 Mon Sep 17 00:00:00 2001
From: Meier Lukas <meierschlumpf@gmail.com>
Date: Wed, 20 Mar 2024 20:58:24 +0100
Subject: [PATCH] chore: restrict usage of variables shorther than 3 characters
 (#255)

* chore: restrict usage of variables shorther than 3 characters

* chore: change highlighting to warning
---
 .../src/app/[locale]/boards/[name]/settings/_access.tsx   | 8 ++++----
 .../src/app/[locale]/boards/[name]/settings/_colors.tsx   | 1 +
 apps/nextjs/src/components/board/sections/content.tsx     | 7 +++++--
 tooling/eslint/base.js                                    | 8 ++++++++
 4 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx
index 0d47e6bba..c64bc01fb 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_access.tsx
@@ -65,11 +65,11 @@ export const AccessSettingsContent = ({ board, initialPermissions }: Props) => {
   const { openModal } = useModalAction(UserSelectModal);
 
   const handleSubmit = useCallback(
-    (v: FormType) => {
+    (values: FormType) => {
       mutate(
         {
           id: board.id,
-          permissions: v.permissions,
+          permissions: values.permissions,
         },
         {
           onSuccess: () => {
@@ -250,8 +250,8 @@ export const UserSelectModal = createModal<InnerProps>(
     const t = useI18n();
     const { data: users } = clientApi.user.selectable.useQuery();
     const form = useForm<UserSelectFormType>();
-    const handleSubmit = (v: UserSelectFormType) => {
-      const currentUser = users?.find((user) => user.id === v.userId);
+    const handleSubmit = (values: UserSelectFormType) => {
+      const currentUser = users?.find((user) => user.id === values.userId);
       if (!currentUser) return;
       innerProps.onSelect({
         id: currentUser.id,
diff --git a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_colors.tsx b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_colors.tsx
index 6368a4801..99b314af6 100644
--- a/apps/nextjs/src/app/[locale]/boards/[name]/settings/_colors.tsx
+++ b/apps/nextjs/src/app/[locale]/boards/[name]/settings/_colors.tsx
@@ -45,6 +45,7 @@ export const ColorSettingsContent = ({ board }: Props) => {
   const theme = useMantineTheme();
   const { mutate: savePartialSettings, isPending } =
     useSavePartialSettingsMutation(board);
+
   return (
     <form
       onSubmit={form.onSubmit((values) => {
diff --git a/apps/nextjs/src/components/board/sections/content.tsx b/apps/nextjs/src/components/board/sections/content.tsx
index 9aafe8e7a..cbf344828 100644
--- a/apps/nextjs/src/components/board/sections/content.tsx
+++ b/apps/nextjs/src/components/board/sections/content.tsx
@@ -3,7 +3,7 @@
 
 import type { RefObject } from "react";
 import { useElementSize } from "@mantine/hooks";
-import cx from "clsx";
+import combineClasses from "clsx";
 import { useAtomValue } from "jotai";
 
 import { useConfirmModal, useModalAction } from "@homarr/modals";
@@ -60,7 +60,10 @@ export const SectionContent = ({ items, refs }: Props) => {
           >
             <Card
               ref={ref}
-              className={cx(classes.itemCard, "grid-stack-item-content")}
+              className={combineClasses(
+                classes.itemCard,
+                "grid-stack-item-content",
+              )}
               withBorder
               styles={{
                 root: {
diff --git a/tooling/eslint/base.js b/tooling/eslint/base.js
index b606b50fe..867d7cd45 100644
--- a/tooling/eslint/base.js
+++ b/tooling/eslint/base.js
@@ -17,6 +17,14 @@ const config = {
   },
   plugins: ["@typescript-eslint", "import"],
   rules: {
+    "id-length": [
+      "warn",
+      {
+        min: 3,
+        exceptions: ["_", "i", "z", "t", "id"], // _ for unused variables, i for index, z for zod, t for translation
+        properties: "never", // This allows for example the use of <Grid.Col span={{ sm: 12, md: 6 }}> as sm and md would be too short
+      },
+    ],
     "@typescript-eslint/prefer-nullish-coalescing": "off",
     "turbo/no-undeclared-env-vars": "off",
     "@typescript-eslint/no-unused-vars": [