.eslintrc.json

{
  "extends": ["next", "prettier", "plugin:@typescript-eslint/recommended"],
  "parser": "@typescript-eslint/parser",
  "plugins": ["@typescript-eslint"],
  "root": true,
  "rules": {
    "@typescript-eslint/ban-types": "off",
    "@typescript-eslint/no-namespace": "off",
    "no-restricted-syntax": [
      "error",
      {
        "selector": "CallExpression[callee.name=watch], MemberExpression[object.name=methods][property.name=watch]",
        "message": "\"watch\" re-render the whole form component. Use hook \"useWatch\" instead."
      },
      {
        "selector": "VariableDeclarator > ObjectPattern > Property[key.name=formState]",
        "message": "\"formState\" re-render the whole form component. Use hook \"useFormState\" instead."
      },
      {
        "selector": "VariableDeclarator[init.callee.name=useFormState][id.type=Identifier]",
        "message": "Use destructuring assignment for \"useFormState\". Example: \"const { isDirty } = useFormState()\". Returned formState is wrapped with Proxy to improve render performance and skip extra computation if specific state is not subscribed, so make sure you deconstruct or read it before render in order to enable the subscription. More info here https://react-hook-form.com/docs/useformstate#rules"
      },
      {
        "selector": "MemberExpression[object.name=control]",
        "message": "Do not access any of the properties inside this object directly. It's for internal usage only. More info here: https://react-hook-form.com/docs/useform/control"
      },
      {
        "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useWatch]",
        "message": "\"useWatch\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useWatch's logic to separate component."
      },
      {
        "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFieldArray]",
        "message": "\"useFieldArray\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFieldArray's logic to separate component."
      },
      {
        "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useController]",
        "message": "\"useController\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useController's logic to separate component."
      },
      {
        "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFormContext]",
        "message": "\"useFormContext\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFormContext's logic to separate component."
      },
      {
        "selector": "VariableDeclaration[declarations.0.init.callee.name=useForm] ~ VariableDeclaration[declarations.0.init.callee.name=useFormState]",
        "message": "\"useFormState\" in main form component (which use \"useForm\") will re-render the whole form component. Move your useFormState's logic to separate component."
      },
      {
        "selector": "CallExpression[callee.name=useForm][arguments.length=0], CallExpression[callee.name=useForm][arguments.length=1]:not(:has(Property[key.name=defaultValues]))",
        "message": "Pass object with \"defaultValues\" for correct \"formState\" behavior. More info here: https://react-hook-form.com/api/useform/formstate#main"
      },
      {
        "selector": "VariableDeclaration[declarations.0.init.callee.name=useState] ~ ReturnStatement JSXIdentifier[name=Controller]",
        "message": "Don't use \"Controller\" with \"useState\". Move you \"useState\" and another logic to separate component and wrap this component via Controller. Reason: This approach will rise wrong logic for handle input field. Example: \"src/components/form/text-input/form-text-input.tsx\""
      },
      {
        "selector": "VariableDeclaration[declarations.0.init.callee.name=useState] ~ VariableDeclaration[declarations.0.init.callee.name=useController], VariableDeclaration[declarations.0.init.callee.name=useController] ~ VariableDeclaration[declarations.0.init.callee.name=useState]",
        "message": "Don't use \"useController\" with \"useState\". Move you \"useState\" and another logic to separate component and wrap this component into another component with useController. Reason: This approach will rise wrong logic for handle input filed"
      },
      {
        "selector": "CallExpression[callee.name=useForm][arguments.length=1] Property[key.name=defaultValues][value.properties.length=0]",
        "message": "\"defaultValues\" can not be empty object for correct \"formState\" behavior. More info here: https://react-hook-form.com/api/useform/formstate#main"
      },
      {
        "selector": "MemberExpression[object.name=React][property.name=/^use/]",
        "message": "Use hooks without \"React\" prefix. For avoid using both import styles. Example: \"useEffect\" instead of \"React.useEffect\"."
      },
      {
        "selector": "CallExpression[callee.type=MemberExpression][callee.property.name=forEach]:has(AwaitExpression)",
        "message": "Do not use in forEach \"async\" code, because logic will not be awaited. use \"map\" with \"Promise.all\", for example \"await Promise.all(ARRAY_OF_ITEM.map(...))\" or use regular \"for\" loop."
      },
      {
        "selector": "ConditionalExpression[consequent.type=Literal][consequent.value=true][alternate.type=Literal][alternate.value=false]",
        "message": "Do not use \"condition ? true : false\". Simplify \"someVariable === 42 ? true : false \" to \"someVariable === 42\""
      },
      {
        "selector": "JSXElement[openingElement.name.property.name=Provider] JSXElement[openingElement.name.name]",
        "message": "Do not put your regular components inside Context \".Provider\". Create new component, for example ComponentProvider. Put Provider's logic to ComponentProvider. Render \"{children} instead of regular component. Wrap regular component via new ComponentProvider \". Example: \"src/services/auth/auth-provider\""
      },
      // {
      //   "selector": "Property[key.name=/^(padding|margin|paddingLeft|paddingRight|paddingTop|paddingBottom|paddingVertical|marginLeft|marginRight|marginTop|marginBottom|marginVertical|p|pt|pl|pb|pr|px|py|m|mt|mb|ml|mr|mx|my)$/][value.type=/^(Literal|UnaryExpression)$/]:not([value.value=\"0 !important\"]):not([value.value=\"0\"]):not([value.value=\"0 auto\"]):not([value.value=\"auto\"])",
      //   "message": "Use theme.spacing() instead of literal."
      // },
      {
        "selector": "CallExpression[callee.name=/^(useQuery|useInfiniteQuery)$/] Property[key.name=queryKey]:not(:has(Identifier[name=key]))",
        "message": "Use key created via createQueryKeys function instead of your solution"
      },
      {
        "selector": "CallExpression[callee.name=refresh]",
        "message": "Do not use refresh() function for update or change result in react-query. Use \"queryClient.resetQueries\" or pass new filter data to queryKey."
      }
    ],
    "no-restricted-imports": [
      "error",
      {
        "paths": [
          {
            "name": "@mui/material",
            "message": "Please use \"import ComponentName from '@mui/material/ComponentName'\" instead."
          },
          {
            "name": "@mui/icons-material",
            "message": "Please use \"import IconName from '@mui/icons-material/IconName'\" instead."
          }
        ]
      }
    ]
  }
}