fix: linting issues and rule changes (#5681)

* fix: lint config package updates * fix: tsconfig changes * fix: lint config setup * fix: lint errors and adding new rules * fix: lint errors * fix: ui and editor lints * fix: build error * fix: editor tsconfig * fix: lint errors * fix: types fixes --------- Co-authored-by: Anmol Singh Bhatia <anmolsinghbhatia@plane.so> Co-authored-by: Aaryan Khandelwal <aaryankhandu123@gmail.com>
2024-09-23 17:10:38 +05:30 · 2024-09-23 17:10:38 +05:30 · 83bfca6f2d
commit 83bfca6f2d
parent e143e0a051
75 changed files with 1583 additions and 2631 deletions
--- a/web/.eslintrc.js
+++ b/web/.eslintrc.js
@ -1,55 +1,9 @@
+/** @type {import("eslint").Linter.Config} */
 module.exports = {
  root: true,
-  extends: ["custom"],
+  extends: ["@plane/eslint-config/next.js"],
  parser: "@typescript-eslint/parser",
-  settings: {
-    "import/resolver": {
-      typescript: {},
-      node: {
-        moduleDirectory: ["node_modules", "."],
-      },
-    },
-    next: {
-      rootDir: ["."],
-    },
-  },
-  rules: {
-    "import/order": [
-      "error",
-      {
-        groups: ["builtin", "external", "internal", "parent", "sibling"],
-        pathGroups: [
-          {
-            pattern: "react",
-            group: "external",
-            position: "before",
-          },
-          {
-            pattern: "lucide-react",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@headlessui/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@plane/**",
-            group: "external",
-            position: "after",
-          },
-          {
-            pattern: "@/**",
-            group: "internal",
-          },
-        ],
-        pathGroupsExcludedImportTypes: ["builtin", "internal", "react"],
-        alphabetize: {
-          order: "asc",
-          caseInsensitive: true,
-        },
-      },
-    ],
+  parserOptions: {
+    project: true,
  },
 };
--- a/web/app/[workspaceSlug]/(projects)/sidebar.tsx
+++ b/web/app/[workspaceSlug]/(projects)/sidebar.tsx
@ -21,9 +21,7 @@ import useSize from "@/hooks/use-window-size";
 import { SidebarAppSwitcher } from "@/plane-web/components/sidebar";
 import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/user-permissions";

-export interface IAppSidebar {}
-
-export const AppSidebar: FC<IAppSidebar> = observer(() => {
+export const AppSidebar: FC = observer(() => {
  // store hooks
  const { allowPermissions } = useUserPermissions();
  const { toggleSidebar, sidebarCollapsed } = useAppTheme();
--- a/web/core/components/analytics/custom-analytics/select-bar.tsx
+++ b/web/core/components/analytics/custom-analytics/select-bar.tsx
@ -1,13 +1,14 @@
 import { observer } from "mobx-react";
 import { Control, Controller, UseFormSetValue } from "react-hook-form";
+// types
 import { IAnalyticsParams } from "@plane/types";
-// hooks
-import { SelectProject, SelectSegment, SelectXAxis, SelectYAxis } from "@/components/analytics";
-import { ANALYTICS_X_AXIS_VALUES } from "@/constants/analytics";
-import { useProject } from "@/hooks/store";
+// ui
 import { Row } from "@plane/ui";
 // components
-// types
+import { SelectProject, SelectSegment, SelectXAxis, SelectYAxis } from "@/components/analytics";
+import { ANALYTICS_X_AXIS_VALUES } from "@/constants/analytics";
+// hooks
+import { useProject } from "@/hooks/store";

 type Props = {
  control: Control<IAnalyticsParams, any>;
--- a/web/core/components/editor/lite-text-editor/lite-text-read-only-editor.tsx
+++ b/web/core/components/editor/lite-text-editor/lite-text-read-only-editor.tsx
@ -6,7 +6,7 @@ import { cn } from "@/helpers/common.helper";
 // hooks
 import { useMention, useUser } from "@/hooks/store";

-interface LiteTextReadOnlyEditorWrapperProps extends Omit<ILiteTextReadOnlyEditor, "mentionHandler"> {}
+type LiteTextReadOnlyEditorWrapperProps = Omit<ILiteTextReadOnlyEditor, "mentionHandler">;

 export const LiteTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, LiteTextReadOnlyEditorWrapperProps>(
  ({ ...props }, ref) => {
--- a/web/core/components/editor/rich-text-editor/rich-text-read-only-editor.tsx
+++ b/web/core/components/editor/rich-text-editor/rich-text-read-only-editor.tsx
@ -6,7 +6,7 @@ import { cn } from "@/helpers/common.helper";
 // hooks
 import { useMention } from "@/hooks/store";

-interface RichTextReadOnlyEditorWrapperProps extends Omit<IRichTextReadOnlyEditor, "mentionHandler"> {}
+type RichTextReadOnlyEditorWrapperProps = Omit<IRichTextReadOnlyEditor, "mentionHandler">;

 export const RichTextReadOnlyEditor = React.forwardRef<EditorReadOnlyRefApi, RichTextReadOnlyEditorWrapperProps>(
  ({ ...props }, ref) => {
--- a/web/core/components/issues/issue-detail/label/root.tsx
+++ b/web/core/components/issues/issue-detail/label/root.tsx
@ -10,6 +10,8 @@ import { useIssueDetail, useLabel, useProjectInbox, useUserPermissions } from "@
 // ui
 // types
 import { LabelList, LabelCreate, IssueLabelSelectRoot } from "./";
+// TODO: Fix this import statement, as core should not import from ee
+// eslint-disable-next-line import/order
 import { EUserPermissions, EUserPermissionsLevel } from "ee/constants/user-permissions";

 export type TIssueLabel = {
--- a/web/core/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/roots/cycle-root.tsx
@ -11,8 +11,6 @@ import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/u
 // components
 import { BaseKanBanRoot } from "../base-kanban-root";

-export interface ICycleKanBanLayout {}
-
 export const CycleKanBanLayout: React.FC = observer(() => {
  const { workspaceSlug, projectId, cycleId } = useParams();

--- a/web/core/components/issues/issue-layouts/kanban/roots/draft-issue-root.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/roots/draft-issue-root.tsx
@ -3,6 +3,4 @@ import { observer } from "mobx-react";
 import { DraftIssueQuickActions } from "@/components/issues";
 import { BaseKanBanRoot } from "../base-kanban-root";

-export interface IKanBanLayout {}
-
 export const DraftKanBanLayout: React.FC = observer(() => <BaseKanBanRoot QuickActions={DraftIssueQuickActions} />);
--- a/web/core/components/issues/issue-layouts/kanban/roots/module-root.tsx
+++ b/web/core/components/issues/issue-layouts/kanban/roots/module-root.tsx
@ -10,8 +10,6 @@ import { useIssues } from "@/hooks/store";
 // constants
 import { BaseKanBanRoot } from "../base-kanban-root";

-export interface IModuleKanBanLayout {}
-
 export const ModuleKanBanLayout: React.FC = observer(() => {
  const { workspaceSlug, projectId, moduleId } = useParams();

--- a/web/core/components/issues/issue-layouts/list/block-root.tsx
+++ b/web/core/components/issues/issue-layouts/list/block-root.tsx
@ -131,9 +131,7 @@ export const IssueBlockRoot: FC<Props> = observer((props) => {
        classNames={`relative ${isLastChild && !isExpanded ? "" : "border-b border-b-custom-border-200"}`}
        verticalOffset={100}
        defaultValue={shouldRenderByDefault || isIssueNew(issuesMap[issueId])}
-        placeholderChildren={
-          <ListLoaderItemRow shouldAnimate={false} renderForPlaceHolder={true} defaultPropertyCount={4} />
-        }
+        placeholderChildren={<ListLoaderItemRow shouldAnimate={false} renderForPlaceHolder defaultPropertyCount={4} />}
        shouldRecordHeights={isMobile}
      >
        <IssueBlock
--- a/web/core/components/issues/issue-layouts/list/roots/cycle-root.tsx
+++ b/web/core/components/issues/issue-layouts/list/roots/cycle-root.tsx
@ -11,8 +11,6 @@ import { EUserPermissions, EUserPermissionsLevel } from "@/plane-web/constants/u
 // types
 import { BaseListRoot } from "../base-list-root";

-export interface ICycleListLayout {}
-
 export const CycleListLayout: React.FC = observer(() => {
  const { workspaceSlug, projectId, cycleId } = useParams();
  // store
--- a/web/core/components/issues/issue-layouts/list/roots/module-root.tsx
+++ b/web/core/components/issues/issue-layouts/list/roots/module-root.tsx
@ -10,8 +10,6 @@ import { useIssues } from "@/hooks/store";
 // constants
 import { BaseListRoot } from "../base-list-root";

-export interface IModuleListLayout {}
-
 export const ModuleListLayout: React.FC = observer(() => {
  const { workspaceSlug, projectId, moduleId } = useParams();

--- a/web/core/components/project/form-loader.tsx
+++ b/web/core/components/project/form-loader.tsx
@ -4,9 +4,7 @@ import { FC } from "react";
 // components
 import { Loader } from "@plane/ui";

-export interface IProjectDetailsFormLoader {}
-
-export const ProjectDetailsFormLoader: FC<IProjectDetailsFormLoader> = () => (
+export const ProjectDetailsFormLoader: FC = () => (
  <>
    <div className="relative mt-6 h-44 w-full">
      <Loader>
--- a/web/package.json
+++ b/web/package.json
@ -7,7 +7,8 @@
    "develop": "next dev --port 3000",
    "build": "next build",
    "start": "next start",
-    "lint": "next lint",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:errors": "eslint . --ext .ts,.tsx --quiet",
    "export": "next export",
    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
  },
@ -76,10 +77,10 @@
    "@types/react-dom": "^18.2.18",
    "@types/uuid": "^8.3.4",
    "@types/zxcvbn": "^4.4.4",
-    "eslint-config-custom": "*",
+    "@plane/eslint-config": "*",
    "prettier": "^3.2.5",
    "tailwind-config-custom": "*",
-    "tsconfig": "*",
-    "typescript": "5.4.5"
+    "@plane/typescript-config": "*",
+    "typescript": "5.3.3"
  }
 }
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@ -1,11 +1,7 @@
 {
-  "extends": "tsconfig/nextjs.json",
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
-  "exclude": ["node_modules"],
+  "extends": "@plane/typescript-config/nextjs.json",
  "compilerOptions": {
    "baseUrl": ".",
-    "jsx": "preserve",
-    "esModuleInterop": true,
    "paths": {
      "@/*": ["core/*"],
      "@/helpers/*": ["helpers/*"],
@ -13,11 +9,9 @@
      "@/styles/*": ["styles/*"],
      "@/plane-web/*": ["ce/*"]
    },
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ],
+    "plugins": [{ "name": "next" }],
    "strictNullChecks": true
-  }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
 }
--- a/web/use-font-face-observer.d.ts
+++ b/web/use-font-face-observer.d.ts
@ -0,0 +1 @@
+declare module "use-font-face-observer";