chore: restrict usage of variables shorther than 3 characters (#255)

* chore: restrict usage of variables shorther than 3 characters

* chore: change highlighting to warning

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,

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) => {

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: {

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": [