[WEB-5135] refactor: update sites ESLint configuration and refactor imports to use type imports

apps/space/.eslintrc.js

@@ -1,4 +1,18 @@
 module.exports = {
   root: true,
   extends: ["@plane/eslint-config/next.js"],
+  rules: {
+    "no-duplicate-imports": "off",
+    "import/no-duplicates": ["error", { "prefer-inline": false }],
+    "import/consistent-type-specifier-style": ["error", "prefer-top-level"],
+    "@typescript-eslint/no-import-type-side-effects": "error",
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        prefer: "type-imports",
+        fixStyle: "separate-type-imports",
+        disallowTypeAnnotations: false,
+      },
+    ],
+  },
 };

apps/space/app/[workspaceSlug]/[projectId]/page.ts

@@ -1,7 +1,7 @@
 import { notFound, redirect } from "next/navigation";
 // plane imports
 import { SitesProjectPublishService } from "@plane/services";
-import { TProjectPublishSettings } from "@plane/types";
+import type { TProjectPublishSettings } from "@plane/types";
 
 const publishService = new SitesProjectPublishService();
 

apps/space/app/layout.tsx

@@ -1,4 +1,4 @@
-import { Metadata } from "next";
+import type { Metadata } from "next";
 // helpers
 import { SPACE_BASE_PATH } from "@plane/constants";
 // styles

apps/space/app/provider.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC, ReactNode } from "react";
+import type { ReactNode, FC } from "react";
 import { ThemeProvider } from "next-themes";
 // components
 import { TranslationProvider } from "@plane/i18n";

apps/space/ce/components/editor/embeds/mentions/root.tsx

@@ -1,4 +1,4 @@
 // plane editor
-import { TMentionComponentProps } from "@plane/editor";
+import type { TMentionComponentProps } from "@plane/editor";
 
 export const EditorAdditionalMentionsRoot: React.FC<TMentionComponentProps> = () => null;

apps/space/ce/hooks/use-editor-flagging.ts

@@ -1,5 +1,5 @@
 // editor
-import { TExtensions } from "@plane/editor";
+import type { TExtensions } from "@plane/editor";
 
 export type TEditorFlaggingHookReturnType = {
   document: {
@@ -19,7 +19,7 @@
 /**
  * @description extensions disabled in various editors
  */
 export const useEditorFlagging = (anchor: string): TEditorFlaggingHookReturnType => ({
   document: {
     disabled: [],
     flagged: [],

apps/space/core/components/account/auth-forms/auth-banner.tsx

@@ -1,9 +1,9 @@
 "use client";
 
-import { FC } from "react";
+import type { FC } from "react";
 import { Info, X } from "lucide-react";
 // helpers
-import { TAuthErrorInfo } from "@/helpers/authentication.helper";
+import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
 
 type TAuthBanner = {
   bannerData: TAuthErrorInfo | undefined;

apps/space/core/components/account/auth-forms/auth-header.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC } from "react";
+import type { FC } from "react";
 // helpers
 import { EAuthModes } from "@/types/auth";
 

apps/space/core/components/account/auth-forms/auth-root.tsx

@@ -1,23 +1,20 @@
 "use client";
 
-import React, { FC, useEffect, useState } from "react";
+import type { FC } from "react";
+import React, { useEffect, useState } from "react";
 import { observer } from "mobx-react";
 import Image from "next/image";
 import { useSearchParams } from "next/navigation";
 import { useTheme } from "next-themes";
 // plane imports
 import { API_BASE_URL } from "@plane/constants";
 import { SitesAuthService } from "@plane/services";
-import { IEmailCheckData } from "@plane/types";
+import type { IEmailCheckData } from "@plane/types";
 import { OAuthOptions } from "@plane/ui";
 // components
 // helpers
-import {
-  EAuthenticationErrorCodes,
-  EErrorAlertType,
-  TAuthErrorInfo,
-  authErrorHandler,
-} from "@/helpers/authentication.helper";
+import type { TAuthErrorInfo } from "@/helpers/authentication.helper";
+import { EErrorAlertType, authErrorHandler, EAuthenticationErrorCodes } from "@/helpers/authentication.helper";
 // hooks
 import { useInstance } from "@/hooks/store/use-instance";
 // types

apps/space/core/components/account/auth-forms/email.tsx

@@ -1,12 +1,13 @@
 "use client";
 
-import { FC, FormEvent, useMemo, useRef, useState } from "react";
+import type { FC, FormEvent } from "react";
+import { useMemo, useRef, useState } from "react";
 import { observer } from "mobx-react";
 // icons
 import { CircleAlert, XCircle } from "lucide-react";
 // types
 import { Button } from "@plane/propel/button";
-import { IEmailCheckData } from "@plane/types";
+import type { IEmailCheckData } from "@plane/types";
 // ui
 import { Input, Spinner } from "@plane/ui";
 // helpers

apps/space/core/components/account/terms-and-conditions.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import React, { FC } from "react";
+import type { FC } from "react";
+import React from "react";
 import Link from "next/link";
 
 type Props = {

apps/space/core/components/common/powered-by.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC } from "react";
+import type { FC } from "react";
 import { WEBSITE_URL } from "@plane/constants";
 // assets
 import { PlaneLogo } from "@plane/propel/icons";

apps/space/core/components/common/project-logo.tsx

@@ -1,5 +1,5 @@
 // types
-import { TLogoProps } from "@plane/types";
+import type { TLogoProps } from "@plane/types";
 // helpers
 import { cn } from "@plane/utils";
 

apps/space/core/components/editor/embeds/mentions/root.tsx

@@ -1,5 +1,5 @@
 // plane editor
-import { TMentionComponentProps } from "@plane/editor";
+import type { TMentionComponentProps } from "@plane/editor";
 // plane web components
 import { EditorAdditionalMentionsRoot } from "@/plane-web/components/editor";
 // local components

apps/space/core/components/editor/lite-text-editor.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 // plane imports
-import { type EditorRefApi, type ILiteTextEditorProps, LiteTextEditorWithRef, type TFileHandler } from "@plane/editor";
+import { LiteTextEditorWithRef } from "@plane/editor";
+import type { EditorRefApi, ILiteTextEditorProps, TFileHandler } from "@plane/editor";
 import type { MakeOptional } from "@plane/types";
 import { cn, isCommentEmpty } from "@plane/utils";
 // helpers

apps/space/core/components/editor/rich-text-editor.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef } from "react";
 // plane imports
-import { type EditorRefApi, type IRichTextEditorProps, RichTextEditorWithRef, type TFileHandler } from "@plane/editor";
+import { RichTextEditorWithRef } from "@plane/editor";
+import type { EditorRefApi, IRichTextEditorProps, TFileHandler } from "@plane/editor";
 import type { MakeOptional } from "@plane/types";
 // helpers
 import { getEditorFileHandlers } from "@/helpers/editor.helper";

apps/space/core/components/editor/toolbar.tsx

@@ -2,7 +2,8 @@
 
 import React, { useEffect, useState, useCallback } from "react";
 // plane imports
-import { TOOLBAR_ITEMS, type ToolbarMenuItem, type EditorRefApi } from "@plane/editor";
+import { TOOLBAR_ITEMS } from "@plane/editor";
+import type { ToolbarMenuItem, EditorRefApi } from "@plane/editor";
 import { Button } from "@plane/propel/button";
 import { Tooltip } from "@plane/propel/tooltip";
 import { cn } from "@plane/utils";

apps/space/core/components/instance/instance-failure-view.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { FC } from "react";
+import type { FC } from "react";
 import Image from "next/image";
 import { useTheme } from "next-themes";
 import { Button } from "@plane/propel/button";

apps/space/core/components/issues/filters/applied-filters/filters-list.tsx

@@ -4,7 +4,7 @@ import { observer } from "mobx-react";
 import { X } from "lucide-react";
 // types
 import { useTranslation } from "@plane/i18n";
-import { TFilters } from "@/types/issue";
+import type { TFilters } from "@/types/issue";
 // components
 import { AppliedPriorityFilters } from "./priority";
 import { AppliedStateFilters } from "./state";

apps/space/core/components/issues/filters/applied-filters/label.tsx

@@ -2,7 +2,7 @@
 
 import { X } from "lucide-react";
 // types
-import { IIssueLabel } from "@/types/issue";
+import type { IIssueLabel } from "@/types/issue";
 
 type Props = {
   handleRemove: (val: string) => void;

apps/space/core/components/issues/filters/applied-filters/priority.tsx

@@ -1,7 +1,8 @@
 "use client";
 
 import { X } from "lucide-react";
-import { PriorityIcon, type TIssuePriorities } from "@plane/propel/icons";
+import { PriorityIcon } from "@plane/propel/icons";
+import type { TIssuePriorities } from "@plane/propel/icons";
 
 type Props = {
   handleRemove: (val: string) => void;

apps/space/core/components/issues/filters/applied-filters/root.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { FC, useCallback } from "react";
+import type { FC } from "react";
+import { useCallback } from "react";
 import { cloneDeep } from "lodash-es";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
@@ -26,7 +27,7 @@
   const activeLayout = issueFilters?.display_filters?.layout || undefined;
   const userFilters = issueFilters?.filters || {};
 
   const appliedFilters: any = {};
   Object.entries(userFilters).forEach(([key, value]) => {
     if (!value) return;
     if (Array.isArray(value) && value.length === 0) return;
@@ -94,7 +95,7 @@
     <div className="border-b border-custom-border-200 bg-custom-background-100 p-4">
       <AppliedFiltersList
         appliedFilters={appliedFilters || {}}
         handleRemoveFilter={handleFilters as any}
         handleRemoveAllFilters={handleRemoveAllFilters}
       />
     </div>

apps/space/core/components/issues/filters/helpers/dropdown.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { Fragment, useState } from "react";
-import { Placement } from "@popperjs/core";
+import type { Placement } from "@popperjs/core";
 import { usePopper } from "react-popper";
 import { Popover, Transition } from "@headlessui/react";
 // ui

apps/space/core/components/issues/filters/root.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { FC, useCallback } from "react";
+import type { FC } from "react";
+import { useCallback } from "react";
 import { cloneDeep } from "lodash-es";
 import { observer } from "mobx-react";
 import { useRouter } from "next/navigation";
@@ -14,7 +15,7 @@
 // hooks
 import { useIssueFilter } from "@/hooks/store/use-issue-filter";
 // types
-import { TIssueQueryFilters } from "@/types/issue";
+import type { TIssueQueryFilters } from "@/types/issue";
 
 type IssueFiltersDropdownProps = {
   anchor: string;
@@ -62,7 +63,7 @@
       <FiltersDropdown title="Filters" placement="bottom-end">
         <FilterSelection
           filters={issueFilters?.filters ?? {}}
           handleFilters={handleFilters as any}
           layoutDisplayFiltersOptions={activeLayout ? ISSUE_DISPLAY_FILTERS_BY_LAYOUT?.[activeLayout]?.filters : []}
         />
       </FiltersDropdown>

apps/space/core/components/issues/issue-layouts/kanban/base-kanban-root.tsx

@@ -4,7 +4,7 @@ import { useCallback, useMemo, useRef } from "react";
 import { debounce } from "lodash-es";
 import { observer } from "mobx-react";
 // types
-import { IIssueDisplayProperties } from "@plane/types";
+import type { IIssueDisplayProperties } from "@plane/types";
 // components
 import { IssueLayoutHOC } from "@/components/issues/issue-layouts/issue-layout-HOC";
 // hooks

apps/space/core/components/issues/issue-layouts/kanban/block.tsx

@@ -1,12 +1,12 @@
 "use client";
 
-import { MutableRefObject } from "react";
+import type { MutableRefObject } from "react";
 import { observer } from "mobx-react";
 import Link from "next/link";
 import { useParams, useSearchParams } from "next/navigation";
 // plane types
 import { Tooltip } from "@plane/propel/tooltip";
-import { IIssueDisplayProperties } from "@plane/types";
+import type { IIssueDisplayProperties } from "@plane/types";
 // plane ui
 // plane utils
 import { cn } from "@plane/utils";
@@ -18,7 +18,7 @@ import { queryParamGenerator } from "@/helpers/query-param-generator";
 import { usePublish } from "@/hooks/store/publish";
 import { useIssueDetails } from "@/hooks/store/use-issue-details";
 //
-import { IIssue } from "@/types/issue";
+import type { IIssue } from "@/types/issue";
 import { IssueProperties } from "../properties/all-properties";
 import { getIssueBlockId } from "../utils";
 import { BlockReactions } from "./block-reactions";

apps/space/core/components/issues/issue-layouts/kanban/blocks-list.tsx

@@ -1,7 +1,7 @@
-import { MutableRefObject } from "react";
+import type { MutableRefObject } from "react";
 import { observer } from "mobx-react";
 //types
-import { IIssueDisplayProperties } from "@plane/types";
+import type { IIssueDisplayProperties } from "@plane/types";
 // components
 import { KanbanIssueBlock } from "./block";
 

apps/space/core/components/issues/issue-layouts/kanban/default.tsx

@@ -1,8 +1,8 @@
-import { MutableRefObject } from "react";
+import type { MutableRefObject } from "react";
 import { isNil } from "lodash-es";
 import { observer } from "mobx-react";
 // types
-import {
+import type {
   GroupByColumnTypes,
   IGroupByColumn,
   TGroupedIssues,
@@ -98,7 +98,7 @@
                 <div className="sticky top-0 z-[2] w-full flex-shrink-0 bg-custom-background-90 py-1">
                   <HeaderGroupByCard
                     groupBy={groupBy}
                     icon={subList.icon as any}
                     title={subList.name}
                     count={getGroupIssueCount(subList.id, undefined, false) ?? 0}
                   />

apps/space/core/components/issues/issue-layouts/kanban/headers/group-by-card.tsx

@@ -1,10 +1,11 @@
 "use client";
 
-import React, { FC } from "react";
+import type { FC } from "react";
+import React from "react";
 import { observer } from "mobx-react";
 import { Circle } from "lucide-react";
 // types
-import { TIssueGroupByOptions } from "@plane/types";
+import type { TIssueGroupByOptions } from "@plane/types";
 
 interface IHeaderGroupByCard {
   groupBy: TIssueGroupByOptions | undefined;

apps/space/core/components/issues/issue-layouts/kanban/headers/sub-group-by-card.tsx

@@ -1,4 +1,5 @@
-import React, { FC } from "react";
+import type { FC } from "react";
+import React from "react";
 import { observer } from "mobx-react";
 import { Circle, ChevronDown, ChevronUp } from "lucide-react";
 // mobx

apps/space/core/components/issues/issue-layouts/kanban/kanban-group.tsx

@@ -1,6 +1,7 @@
 "use client";
 
-import { MutableRefObject, forwardRef, useCallback, useRef, useState } from "react";
+import type { MutableRefObject } from "react";
+import { forwardRef, useCallback, useRef, useState } from "react";
 import { observer } from "mobx-react";
 //types
 import type {

apps/space/core/components/issues/issue-layouts/kanban/swimlanes.tsx

@@ -1,7 +1,8 @@
-import { MutableRefObject, useState } from "react";
+import type { MutableRefObject } from "react";
+import { useState } from "react";
 import { observer } from "mobx-react";
 // types
-import {
+import type {
   GroupByColumnTypes,
   IGroupByColumn,
   TGroupedIssues,
@@ -265,7 +266,7 @@
         <div className="sticky top-[50px] z-[3] py-1 flex w-full items-center bg-custom-background-100 border-y-[0.5px] border-custom-border-200">
           <div className="sticky left-0 flex-shrink-0">
             <HeaderSubGroupByCard
               icon={group.icon as any}
               title={group.name || ""}
               count={issueCount}
               isExpanded={isExpanded}

apps/space/core/components/issues/issue-layouts/list/base-list-root.tsx

@@ -1,7 +1,7 @@
 import { useCallback, useMemo } from "react";
 import { observer } from "mobx-react";
 // types
-import { IIssueDisplayProperties, TGroupedIssues } from "@plane/types";
+import type { IIssueDisplayProperties, TGroupedIssues } from "@plane/types";
 // constants
 // components
 import { IssueLayoutHOC } from "@/components/issues/issue-layouts/issue-layout-HOC";

apps/space/core/components/issues/issue-layouts/list/block.tsx

@@ -6,7 +6,7 @@ import Link from "next/link";
 import { useParams, useSearchParams } from "next/navigation";
 // plane types
 import { Tooltip } from "@plane/propel/tooltip";
-import { IIssueDisplayProperties } from "@plane/types";
+import type { IIssueDisplayProperties } from "@plane/types";
 // plane ui
 // plane utils
 import { cn } from "@plane/utils";

apps/space/core/components/issues/issue-layouts/list/blocks-list.tsx

@@ -1,6 +1,6 @@
-import { FC, MutableRefObject } from "react";
+import type { FC, MutableRefObject } from "react";
 // types
-import { IIssueDisplayProperties } from "@plane/types";
+import type { IIssueDisplayProperties } from "@plane/types";
 import { IssueBlock } from "./block";
 
 interface Props {

apps/space/core/components/issues/issue-layouts/list/default.tsx

@@ -1,7 +1,7 @@
 import { useRef } from "react";
 import { observer } from "mobx-react";
 // types
-import {
+import type {
   GroupByColumnTypes,
   TGroupedIssues,
   IIssueDisplayProperties,