Chore: Update ESlint rules of client code (#27427)

Co-authored-by: Guilherme Gazzo <guilhermegazzo@gmail.com>

apps/meteor/.storybook/decorators.tsx

-import { DecoratorFunction } from '@storybook/addons';
-import React, { ReactElement } from 'react';
+import type { DecoratorFunction } from '@storybook/addons';
+import type { ReactElement } from 'react';
+import React from 'react';
 
 import ModalContextMock from '../client/stories/contexts/ModalContextMock';
 import QueryClientProviderMock from '../client/stories/contexts/QueryClientProviderMock';

apps/meteor/client/.eslintrc.json

 {
   "root": true,
-  "extends": [
-    "@rocket.chat/eslint-config/original",
-    "prettier"
-  ],
+  "extends": ["@rocket.chat/eslint-config/original", "prettier"],
   "parser": "@babel/eslint-parser",
-  "plugins": [
-    "react",
-    "react-hooks",
-    "prettier",
-    "testing-library",
-    "anti-trojan-source"
-  ],
+  "plugins": ["react", "react-hooks", "prettier", "testing-library", "anti-trojan-source"],
   "rules": {
     "import/named": "error",
     "import/order": [
       "error",
       {
         "newlines-between": "always",
-        "groups": [
-          "builtin",
-          "external",
-          "internal",
-          [
-            "parent",
-            "sibling",
-            "index"
-          ]
-        ],
+        "groups": ["builtin", "external", "internal", ["parent", "sibling", "index"]],
         "alphabetize": {
           "order": "asc"
         }
       }
     ],
-    "jsx-quotes": [
-      "error",
-      "prefer-single"
-    ],
+    "jsx-quotes": ["error", "prefer-single"],
     "new-cap": [
       "error",
       {
-        "capIsNewExceptions": [
-          "HTML.Comment",
-          "HTML.Raw",
-          "HTML.DIV",
-          "SHA256"
-        ]
+        "capIsNewExceptions": ["HTML.Comment", "HTML.Raw", "HTML.DIV", "SHA256"]
       }
     ],
     "prefer-arrow-callback": [
@@ -59,10 +33,7 @@
     "react/jsx-uses-react": "error",
     "react/jsx-uses-vars": "error",
     "react/jsx-no-undef": "error",
-    "react/jsx-fragments": [
-      "error",
-      "syntax"
-    ],
+    "react/jsx-fragments": ["error", "syntax"],
     "react/no-multi-comp": "error",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": [
@@ -76,11 +47,7 @@
   "settings": {
     "import/resolver": {
       "node": {
-        "extensions": [
-          ".js",
-          ".ts",
-          ".tsx"
-        ]
+        "extensions": [".js", ".ts", ".tsx"]
       }
     },
     "react": {
@@ -93,81 +60,74 @@
   },
   "overrides": [
     {
-      "files": [
-        "**/*.ts",
-        "**/*.tsx"
-      ],
-      "extends": [
-        "plugin:@typescript-eslint/recommended",
-        "plugin:@typescript-eslint/eslint-recommended",
-        "@rocket.chat/eslint-config/original",
-        "prettier"
-      ],
-      "parser": "@typescript-eslint/parser",
-      "plugins": [
-        "@typescript-eslint",
-        "react",
-        "react-hooks",
-        "prettier"
-      ],
+      "files": ["**/*.ts", "**/*.tsx"],
+      "extends": ["@rocket.chat/eslint-config"],
+      "plugins": ["react", "react-hooks"],
       "rules": {
-        "@typescript-eslint/ban-types": "warn",
-				"@typescript-eslint/ban-ts-comment": "warn",
-        "@typescript-eslint/explicit-function-return-type": "warn",
-        "@typescript-eslint/indent": "off",
-        "@typescript-eslint/no-extra-parens": "off",
-        "@typescript-eslint/no-explicit-any": "off",
-        "@typescript-eslint/no-unused-vars": [
+        "@typescript-eslint/naming-convention": [
           "error",
           {
-            "argsIgnorePattern": "^_"
+            "selector": ["function", "parameter", "variable"],
+            "modifiers": ["destructured"],
+            "format": null
+          },
+          {
+            "selector": ["variable"],
+            "format": ["camelCase", "UPPER_CASE", "PascalCase"],
+            "leadingUnderscore": "allowSingleOrDouble"
+          },
+          {
+            "selector": ["function"],
+            "format": ["camelCase", "PascalCase"],
+            "leadingUnderscore": "allowSingleOrDouble"
+          },
+          {
+            "selector": ["parameter"],
+            "format": ["PascalCase"],
+            "filter": {
+              "regex": "Component$",
+              "match": true
+            }
+          },
+          {
+            "selector": ["parameter"],
+            "format": ["camelCase"],
+            "leadingUnderscore": "allow"
+          },
+          {
+            "selector": ["parameter"],
+            "format": ["camelCase"],
+            "modifiers": ["unused"],
+            "leadingUnderscore": "require"
+          },
+          {
+            "selector": ["interface"],
+            "format": ["PascalCase"],
+            "custom": {
+              "regex": "^I[A-Z]",
+              "match": true
+            }
           }
         ],
-        "@typescript-eslint/prefer-optional-chain": "warn",
-        "func-call-spacing": "off",
-        "indent": "off",
+        "@typescript-eslint/no-extra-parens": "off",
         "import/order": [
           "error",
           {
             "newlines-between": "always",
-            "groups": [
-              "builtin",
-              "external",
-              "internal",
-              [
-                "parent",
-                "sibling",
-                "index"
-              ]
-            ],
+            "groups": ["builtin", "external", "internal", ["parent", "sibling", "index"]],
             "alphabetize": {
               "order": "asc"
             }
           }
         ],
-        "jsx-quotes": [
-          "error",
-          "prefer-single"
-        ],
         "new-cap": [
           "error",
           {
-            "capIsNewExceptions": [
-              "HTML.Comment",
-              "HTML.Raw",
-              "HTML.DIV",
-              "SHA256"
-            ]
+            "capIsNewExceptions": ["HTML.Comment", "HTML.Raw", "HTML.DIV", "SHA256"]
           }
         ],
 				"no-empty-function": "off",
         "no-extra-parens": "off",
-				"no-redeclare": "off",
-        "no-spaced-func": "off",
-				"no-undef": "off",
-        "no-unused-vars": "off",
-        "no-useless-constructor": "off",
-        "no-use-before-define": "off",
         "prefer-arrow-callback": [
           "error",
           {
@@ -179,10 +139,7 @@
         "react/jsx-uses-react": "error",
         "react/jsx-uses-vars": "error",
         "react/jsx-no-undef": "error",
-        "react/jsx-fragments": [
-          "error",
-          "syntax"
-        ],
+        "react/jsx-fragments": ["error", "syntax"],
         "react/no-multi-comp": "error",
         "react-hooks/rules-of-hooks": "error",
         "react-hooks/exhaustive-deps": [
@@ -190,8 +147,7 @@
           {
             "additionalHooks": "(useComponentDidUpdate)"
           }
-        ],
-        "anti-trojan-source/no-bidi": "error"
+        ]
       },
       "env": {
         "browser": true,
@@ -200,11 +156,7 @@
       "settings": {
         "import/resolver": {
           "node": {
-            "extensions": [
-              ".js",
-              ".ts",
-              ".tsx"
-            ]
+            "extensions": [".js", ".ts", ".tsx"]
           }
         },
         "react": {
@@ -213,27 +165,15 @@
       }
     },
     {
-      "files": [
-        "**/*.stories.js",
-        "**/*.stories.jsx",
-        "**/*.stories.ts",
-        "**/*.stories.tsx"
-      ],
+      "files": ["**/*.stories.js", "**/*.stories.jsx", "**/*.stories.ts", "**/*.stories.tsx"],
       "rules": {
         "react/display-name": "off",
         "react/no-multi-comp": "off"
       }
     },
     {
-      "files": [
-        "**/*.tests.js",
-        "**/*.tests.ts",
-        "**/*.spec.ts",
-        "**/*.spec.tsx"
-      ],
-      "extends": [
-        "plugin:testing-library/react"
-      ],
+      "files": ["**/*.tests.js", "**/*.tests.ts", "**/*.spec.ts", "**/*.spec.tsx"],
+      "extends": ["plugin:testing-library/react"],
       "rules": {
         "testing-library/no-await-sync-events": "warn",
         "testing-library/no-manual-cleanup": "warn",
@@ -245,10 +185,7 @@
       }
     },
     {
-      "files": [
-        "**/*.stories.ts",
-        "**/*.stories.tsx"
-      ],
+      "files": ["**/*.stories.ts", "**/*.stories.tsx"],
       "rules": {
         "@typescript-eslint/explicit-function-return-type": "off",
         "@typescript-eslint/explicit-module-boundary-types": "off"

apps/meteor/client/UIKit/hooks/useUIKitHandleAction.tsx

@@ -3,7 +3,7 @@ import { UIKitIncomingInteractionContainerType } from '@rocket.chat/apps-engine/
 // import { Banner, Icon } from '@rocket.chat/fuselage';
 // import { kitContext, UiKitBanner as renderUiKitBannerBlocks } from '@rocket.chat/fuselage-ui-kit';
 // import React, { Context, FC, useMemo } from 'react';
-import { UiKitPayload, UIKitActionEvent } from '@rocket.chat/core-typings';
+import type { UiKitPayload, UIKitActionEvent } from '@rocket.chat/core-typings';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 // import { UIKitIncomingInteractionContainerType } from '@rocket.chat/apps-engine/definition/uikit/UIKitIncomingInteractionContainer';
 

apps/meteor/client/UIKit/hooks/useUIKitHandleClose.tsx

-import { UIKitInteractionType } from '@rocket.chat/apps-engine/definition/uikit';
+import type { UIKitInteractionType } from '@rocket.chat/apps-engine/definition/uikit';
 /* eslint-disable new-cap */
 // import { Banner, Icon } from '@rocket.chat/fuselage';
 // import { kitContext, UiKitBanner as renderUiKitBannerBlocks } from '@rocket.chat/fuselage-ui-kit';
 // import React, { Context, FC, useMemo } from 'react';
-import { UiKitPayload } from '@rocket.chat/core-typings';
+import type { UiKitPayload } from '@rocket.chat/core-typings';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useToastMessageDispatch } from '@rocket.chat/ui-contexts';
 // import { UIKitIncomingInteractionContainerType } from '@rocket.chat/apps-engine/definition/uikit/UIKitIncomingInteractionContainer';

apps/meteor/client/UIKit/hooks/useUIKitStateManager.tsx

-import { isErrorType, UIKitUserInteractionResult, UiKitPayload } from '@rocket.chat/core-typings';
+import type { UIKitUserInteractionResult, UiKitPayload } from '@rocket.chat/core-typings';
+import { isErrorType } from '@rocket.chat/core-typings';
 import { useSafely } from '@rocket.chat/fuselage-hooks';
 import { useEffect, useState } from 'react';
 

apps/meteor/client/components/AdministrationList/AdministrationList.tsx

 import { OptionDivider } from '@rocket.chat/fuselage';
-import React, { FC, Fragment } from 'react';
+import type { FC } from 'react';
+import React, { Fragment } from 'react';
 
-import { AccountBoxItem, IAppAccountBoxItem, isAppAccountBoxItem } from '../../../app/ui-utils/client/lib/AccountBox';
+import type { AccountBoxItem, IAppAccountBoxItem } from '../../../app/ui-utils/client/lib/AccountBox';
+import { isAppAccountBoxItem } from '../../../app/ui-utils/client/lib/AccountBox';
 import AdministrationModelList from './AdministrationModelList';
 import AppsModelList from './AppsModelList';
 import AuditModelList from './AuditModelList';

apps/meteor/client/components/AdministrationList/AdministrationModelList.tsx

 import { OptionTitle } from '@rocket.chat/fuselage';
 import { useTranslation, useRoute } from '@rocket.chat/ui-contexts';
 import { FlowRouter } from 'meteor/kadira:flow-router';
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 import { userHasAllPermission } from '../../../app/authorization/client';
 import { SideNav } from '../../../app/ui-utils/client';
-import { AccountBoxItem } from '../../../app/ui-utils/client/lib/AccountBox';
+import type { AccountBoxItem } from '../../../app/ui-utils/client/lib/AccountBox';
 import { getUpgradeTabLabel, isFullyFeature } from '../../../lib/upgradeTab';
 import { useUpgradeTabParams } from '../../views/hooks/useUpgradeTabParams';
 import Emoji from '../Emoji';

apps/meteor/client/components/AdministrationList/AppsModelList.tsx

 import { OptionTitle } from '@rocket.chat/fuselage';
 import { useTranslation, useRoute } from '@rocket.chat/ui-contexts';
-import React, { ReactElement } from 'react';
+import type { ReactElement } from 'react';
+import React from 'react';
 
 import { triggerActionButtonAction } from '../../../app/ui-message/client/ActionManager';
-import { IAppAccountBoxItem } from '../../../app/ui-utils/client/lib/AccountBox';
+import type { IAppAccountBoxItem } from '../../../app/ui-utils/client/lib/AccountBox';
 import ListItem from '../Sidebar/ListItem';
 
 type AppsModelListProps = {

apps/meteor/client/components/AdministrationList/AuditModelList.tsx

 import { OptionTitle } from '@rocket.chat/fuselage';
 import { useRoute, useTranslation } from '@rocket.chat/ui-contexts';
-import React, { FC } from 'react';
+import type { FC } from 'react';
+import React from 'react';
 
 import ListItem from '../Sidebar/ListItem';
 

apps/meteor/client/components/AutoCompleteAgent.tsx

 import { PaginatedSelectFiltered } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import React, { memo, ReactElement, useMemo, useState } from 'react';
+import type { ReactElement } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 
 import { useRecordList } from '../hooks/lists/useRecordList';
 import { AsyncStatePhase } from '../lib/asyncState';

apps/meteor/client/components/AutoCompleteAgentWithoutExtension.tsx

-import { ILivechatAgent } from '@rocket.chat/core-typings';
+import type { ILivechatAgent } from '@rocket.chat/core-typings';
 import { PaginatedSelectFiltered } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
-import React, { FC, memo, useMemo, useState } from 'react';
+import type { FC } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 
 import { useRecordList } from '../hooks/lists/useRecordList';
 import { AsyncStatePhase } from '../lib/asyncState';

apps/meteor/client/components/AutoCompleteDepartment.tsx

 import { PaginatedSelectFiltered } from '@rocket.chat/fuselage';
 import { useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React, { memo, ReactElement, useMemo, useState } from 'react';
+import type { ReactElement } from 'react';
+import React, { memo, useMemo, useState } from 'react';
 
 import { useRecordList } from '../hooks/lists/useRecordList';
 import { AsyncStatePhase } from '../hooks/useAsyncState';

apps/meteor/client/components/Backdrop.tsx

 import { Modal } from '@rocket.chat/fuselage';
-import React, { ComponentProps, ReactElement } from 'react';
+import type { ComponentProps, ReactElement } from 'react';
+import React from 'react';
 
 type BackdropProps = ComponentProps<typeof Modal.Backdrop>;
 

apps/meteor/client/components/BurgerMenu/BurgerBadge.stories.tsx

 import { Box } from '@rocket.chat/fuselage';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import React, { ReactElement } from 'react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ReactElement } from 'react';
+import React from 'react';
 
 import BurgerBadge from './BurgerBadge';
 

apps/meteor/client/components/BurgerMenu/BurgerBadge.tsx

 import { css } from '@rocket.chat/css-in-js';
 import { Box, Badge } from '@rocket.chat/fuselage';
-import React, { ReactElement } from 'react';
+import type { ReactElement } from 'react';
+import React from 'react';
 
 const BurgerBadge = ({ children }: { children?: unknown }): ReactElement => (
 	<Box

apps/meteor/client/components/BurgerMenu/BurgerIcon.stories.tsx

-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
 import { useAutoSequence } from '../../stories/hooks/useAutoSequence';

apps/meteor/client/components/BurgerMenu/BurgerIcon.tsx

 import { usePrefersReducedMotion } from '@rocket.chat/fuselage-hooks';
-import React, { ReactElement, ReactNode } from 'react';
+import type { ReactElement, ReactNode } from 'react';
+import React from 'react';
 
 import Line from './Line';
 import Wrapper from './Wrapper';

apps/meteor/client/components/BurgerMenu/BurgerMenu.tsx

 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 import { useLayout, useSession } from '@rocket.chat/ui-contexts';
-import React, { memo, ReactElement } from 'react';
+import type { ReactElement } from 'react';
+import React, { memo } from 'react';
 
 import { useEmbeddedLayout } from '../../hooks/useEmbeddedLayout';
 import BurgerMenuButton from './BurgerMenuButton';

apps/meteor/client/components/BurgerMenu/BurgerMenuButton.stories.tsx

 import { action } from '@storybook/addon-actions';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
+import type { ComponentMeta, ComponentStory } from '@storybook/react';
 import React from 'react';
 
 import { useAutoSequence } from '../../stories/hooks/useAutoSequence';

apps/meteor/client/components/BurgerMenu/BurgerMenuButton.tsx

 import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import { useTranslation } from '@rocket.chat/ui-contexts';
-import React, { ReactElement } from 'react';
+import type { ReactElement } from 'react';
+import React from 'react';
 
 import BurgerBadge from './BurgerBadge';
 import BurgerIcon from './BurgerIcon';