chore: lint related changes and packaging fixes (#6163)

* fix: lint related changes and packaging fixes

* adding color validations

web/core/components/common/logo.tsx

@@ -2,6 +2,9 @@
 
 import { FC } from "react";
 import { Emoji } from "emoji-picker-react";
+// Due to some weird issue with the import order, the import of useFontFaceObserver
+// should be after the imported here rather than some below helper functions as it is in the original file
+// eslint-disable-next-line import/order
 import useFontFaceObserver from "use-font-face-observer";
 // types
 import { TLogoProps } from "@plane/types";

web/core/components/core/image-picker-popover.tsx

@@ -9,7 +9,7 @@ import { Control, Controller } from "react-hook-form";
 import useSWR from "swr";
 import { Tab, Popover } from "@headlessui/react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // plane types
 import { EFileAssetType } from "@plane/types/src/enums";
 // ui

web/core/components/cycles/archived-cycles/header.tsx

@@ -4,7 +4,7 @@ import { useParams } from "next/navigation";
 // icons
 import { ListFilter, Search, X } from "lucide-react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // types
 import type { TCycleFilters } from "@plane/types";
 // components

web/core/components/cycles/cycles-view-header.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 // icons
 import { ListFilter, Search, X } from "lucide-react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // types
 import { TCycleFilters } from "@plane/types";
 // components

web/core/components/gantt-chart/sidebar/gantt-dnd-HOC.tsx

@@ -5,7 +5,7 @@ import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { observer } from "mobx-react";
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 import { DropIndicator, TOAST_TYPE, setToast } from "@plane/ui";
 import { HIGHLIGHT_WITH_LINE, highlightIssueOnDrop } from "@/components/issues/issue-layouts/utils";
 

web/core/components/issues/issue-layouts/calendar/issue-block-root.tsx

@@ -3,7 +3,7 @@ import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { draggable } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { observer } from "mobx-react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // components
 import { CalendarIssueBlock } from "@/components/issues";
 import { useIssueDetail } from "@/hooks/store";

web/core/components/issues/issue-layouts/calendar/issue-block.tsx

@@ -6,7 +6,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { MoreHorizontal } from "lucide-react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // types
 import { TIssue } from "@plane/types";
 // ui

web/core/components/issues/issue-layouts/kanban/block.tsx

@@ -6,7 +6,7 @@ import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-d
 import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // types
 import { TIssue, IIssueDisplayProperties, IIssueMap } from "@plane/types";
 // ui

web/core/components/issues/issue-layouts/list/block-root.tsx

@@ -6,7 +6,7 @@ import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element
 import { attachInstruction, extractInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
 import { observer } from "mobx-react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // types
 import { IIssueDisplayProperties, TIssue, TIssueMap } from "@plane/types";
 // components

web/core/components/issues/issue-layouts/properties/labels.tsx

@@ -8,7 +8,7 @@ import { usePopper } from "react-popper";
 import { Check, ChevronDown, Search, Tags } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // types
 import { IIssueLabel } from "@plane/types";
 // ui

web/core/components/issues/issue-layouts/spreadsheet/issue-row.tsx

@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { ChevronRight, MoreHorizontal } from "lucide-react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // types
 import { IIssueDisplayProperties, TIssue } from "@plane/types";
 // ui

web/core/components/issues/select/label.tsx

@@ -5,7 +5,7 @@ import { usePopper } from "react-popper";
 import { Check, Component, Plus, Search, Tag } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // components
 import { IssueLabelsList } from "@/components/ui";
 // helpers

web/core/components/labels/label-block/label-item-block.tsx

@@ -3,7 +3,7 @@
 import { MutableRefObject, useRef, useState } from "react";
 import { LucideIcon, X } from "lucide-react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // types
 import { IIssueLabel } from "@plane/types";
 // ui

web/core/components/modules/archived-modules/header.tsx

@@ -4,7 +4,7 @@ import { useParams } from "next/navigation";
 // icons
 import { ListFilter, Search, X } from "lucide-react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // types
 import type { TModuleFilters } from "@plane/types";
 // components

web/core/components/modules/module-view-header.tsx

@@ -8,7 +8,7 @@ import { ListFilter, Search, X } from "lucide-react";
 // editor
 import { cn } from "@plane/editor";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // types
 import { TModuleFilters } from "@plane/types";
 // ui

web/core/components/pages/list/search-input.tsx

@@ -1,7 +1,7 @@
 import { FC, useState, useRef, useEffect } from "react";
 import { Search, X } from "lucide-react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // helpers
 import { cn } from "@/helpers/common.helper";
 

web/core/components/profile/sidebar.tsx

@@ -9,7 +9,7 @@ import { ChevronDown, Pencil } from "lucide-react";
 // headless ui
 import { Disclosure, Transition } from "@headlessui/react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // types
 import { IUserProfileProjectSegregation } from "@plane/types";
 // plane ui

web/core/components/project/header.tsx

@@ -5,7 +5,7 @@ import { observer } from "mobx-react";
 import { usePathname } from "next/navigation";
 import { Search, Briefcase, X } from "lucide-react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // ui
 import { Breadcrumbs, Button, Header } from "@plane/ui";
 // components

web/core/components/views/view-list-header.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 // icons
 import { ListFilter, Search, X } from "lucide-react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // helpers
 import { cn } from "@/helpers/common.helper";
 // hooks

web/core/components/workspace/sidebar/favorites/favorite-folder.tsx

@@ -2,7 +2,11 @@
 
 import { useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
-import { DragLocationHistory, ElementDragPayload, DropTargetRecord } from "@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types";
+import {
+  DragLocationHistory,
+  ElementDragPayload,
+  DropTargetRecord,
+} from "@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types";
 import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview";
 import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
@@ -15,7 +19,7 @@ import { PenSquare, Star, MoreHorizontal, ChevronRight, GripVertical } from "luc
 import { Disclosure, Transition } from "@headlessui/react";
 
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // ui
 import { IFavorite, InstructionType } from "@plane/types";
 import { CustomMenu, Tooltip, DropIndicator, FavoriteFolderIcon, DragHandle } from "@plane/ui";
@@ -34,7 +38,7 @@ type Props = {
   favorite: IFavorite;
   handleRemoveFromFavorites: (favorite: IFavorite) => void;
   handleRemoveFromFavoritesFolder: (favoriteId: string) => void;
-  handleDrop: (self: DropTargetRecord,source: ElementDragPayload, location: DragLocationHistory) => void;
+  handleDrop: (self: DropTargetRecord, source: ElementDragPayload, location: DragLocationHistory) => void;
 };
 
 export const FavoriteFolder: React.FC<Props> = (props) => {
@@ -65,7 +69,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
         element,
         getInitialData: () => initialData,
         onDragStart: () => setIsDragging(true),
-        onGenerateDragPreview: ({ nativeSetDragImage }) =>{
+        onGenerateDragPreview: ({ nativeSetDragImage }) => {
           setCustomNativeDragPreview({
             getOffset: pointerOutsideOfPreview({ x: "0px", y: "0px" }),
             render: ({ container }) => {
@@ -84,44 +88,42 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
           });
         },
         onDrop: () => {
-          setIsDragging(false)
+          setIsDragging(false);
         }, // canDrag: () => isDraggable,
       }),
       dropTargetForElements({
         element,
         canDrop: ({ source }) => getCanDrop(source, favorite, false),
-        getData: ({ input, element }) =>{
-
+        getData: ({ input, element }) => {
           const blockedStates: InstructionType[] = [];
-          if(!isLastChild){
-            blockedStates.push('reorder-below');
+          if (!isLastChild) {
+            blockedStates.push("reorder-below");
           }
 
-          return attachInstruction(initialData,{
+          return attachInstruction(initialData, {
             input,
             element,
             currentLevel: 0,
             indentPerLevel: 0,
-            mode: isLastChild ? 'last-in-group' : 'standard',
-            block: blockedStates
-          })
+            mode: isLastChild ? "last-in-group" : "standard",
+            block: blockedStates,
+          });
         },
-        onDrag: ({source, self, location}) => {
-          const instruction = getInstructionFromPayload(self,source, location);
+        onDrag: ({ source, self, location }) => {
+          const instruction = getInstructionFromPayload(self, source, location);
           setInstruction(instruction);
         },
         onDragLeave: () => {
           setInstruction(undefined);
         },
-        onDrop: ({ self, source, location})=>{
+        onDrop: ({ self, source, location }) => {
           setInstruction(undefined);
-          handleDrop(self, source,location);
-        }
+          handleDrop(self, source, location);
+        },
       })
     );
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [isDragging, favorite.id ]);
-
+  }, [isDragging, favorite.id]);
 
   useOutsideClickDetector(actionSectionRef, () => setIsMenuActive(false));
 
@@ -140,11 +142,11 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
             // id={`sidebar-${projectId}-${projectListType}`}
             className={cn("relative", {
               "bg-custom-sidebar-background-80 opacity-60": isDragging,
-              "border-[2px] border-custom-primary-100" : instruction === 'make-child'
+              "border-[2px] border-custom-primary-100": instruction === "make-child",
             })}
           >
             {/* draggable drop top indicator */}
-            <DropIndicator isVisible={instruction === "reorder-above"}/>
+            <DropIndicator isVisible={instruction === "reorder-above"} />
             <div
               className={cn(
                 "group/project-item relative w-full px-2 py-1.5 flex items-center rounded-md text-custom-sidebar-text-100 hover:bg-custom-sidebar-background-90",
@@ -283,7 +285,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
                     "px-2": !isSidebarCollapsed,
                   })}
                 >
-                  {orderBy(favorite.children,'sequence','desc').map((child,index) => (
+                  {orderBy(favorite.children, "sequence", "desc").map((child, index) => (
                     <FavoriteRoot
                       key={child.id}
                       workspaceSlug={workspaceSlug.toString()}
@@ -298,7 +300,7 @@ export const FavoriteFolder: React.FC<Props> = (props) => {
               </Transition>
             )}
             {/* draggable drop bottom indicator */}
-            { isLastChild && <DropIndicator isVisible={instruction === "reorder-below"} />}
+            {isLastChild && <DropIndicator isVisible={instruction === "reorder-below"} />}
           </div>
         )}
       </Disclosure>

web/core/components/workspace/sidebar/favorites/favorite-items/root.tsx

@@ -3,7 +3,11 @@
 import React, { FC, useEffect, useRef, useState } from "react";
 import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine";
 import { DropTargetRecord, DragLocationHistory } from "@atlaskit/pragmatic-drag-and-drop/dist/types/internal-types";
-import { draggable, dropTargetForElements, ElementDragPayload } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import {
+  draggable,
+  dropTargetForElements,
+  ElementDragPayload,
+} from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 import { pointerOutsideOfPreview } from "@atlaskit/pragmatic-drag-and-drop/element/pointer-outside-of-preview";
 import { setCustomNativeDragPreview } from "@atlaskit/pragmatic-drag-and-drop/element/set-custom-native-drag-preview";
 import { attachInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item";
@@ -11,7 +15,7 @@ import { attachInstruction } from "@atlaskit/pragmatic-drag-and-drop-hitbox/tree
 import { observer } from "mobx-react";
 // plane helpers
 import { createRoot } from "react-dom/client";
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // ui
 import { IFavorite, InstructionType } from "@plane/types";
 // components
@@ -26,8 +30,7 @@ import {
 import { useAppTheme } from "@/hooks/store";
 import { useFavoriteItemDetails } from "@/hooks/use-favorite-item-details";
 //helpers
-import { getCanDrop, getInstructionFromPayload} from "../favorites.helpers";
-
+import { getCanDrop, getInstructionFromPayload } from "../favorites.helpers";
 
 type Props = {
   isLastChild: boolean;
@@ -35,19 +38,12 @@ type Props = {
   workspaceSlug: string;
   favorite: IFavorite;
   handleRemoveFromFavorites: (favorite: IFavorite) => void;
-  handleDrop: (self: DropTargetRecord,source: ElementDragPayload, location: DragLocationHistory) => void;
+  handleDrop: (self: DropTargetRecord, source: ElementDragPayload, location: DragLocationHistory) => void;
 };
 
 export const FavoriteRoot: FC<Props> = observer((props) => {
   // props
-  const {
-    isLastChild,
-    parentId,
-    workspaceSlug,
-    favorite,
-    handleRemoveFromFavorites,
-    handleDrop,
-  } = props;
+  const { isLastChild, parentId, workspaceSlug, favorite, handleRemoveFromFavorites, handleDrop } = props;
   // store hooks
   const { sidebarCollapsed } = useAppTheme();
   const { itemLink, itemIcon, itemTitle } = useFavoriteItemDetails(workspaceSlug, favorite);
@@ -62,7 +58,6 @@ export const FavoriteRoot: FC<Props> = observer((props) => {
 
   const handleQuickAction = (value: boolean) => setIsMenuActive(value);
 
-
   // drag and drop
   useEffect(() => {
     const element = elementRef.current;
@@ -107,21 +102,20 @@ export const FavoriteRoot: FC<Props> = observer((props) => {
         onDragStart: () => {
           setIsDragging(true);
         },
-        getData: ({ input, element }) =>{
-
-          const blockedStates: InstructionType[] = ['make-child'];
-          if(!isLastChild){
-            blockedStates.push('reorder-below');
+        getData: ({ input, element }) => {
+          const blockedStates: InstructionType[] = ["make-child"];
+          if (!isLastChild) {
+            blockedStates.push("reorder-below");
           }
 
-          return attachInstruction(initialData,{
+          return attachInstruction(initialData, {
             input,
             element,
             currentLevel: 1,
             indentPerLevel: 0,
-            mode: isLastChild ? 'last-in-group' : 'standard',
-            block: blockedStates
-          })
+            mode: isLastChild ? "last-in-group" : "standard",
+            block: blockedStates,
+          });
         },
         onDrag: ({ self, source, location }) => {
           const instruction = getInstructionFromPayload(self, source, location);
@@ -130,9 +124,9 @@ export const FavoriteRoot: FC<Props> = observer((props) => {
         onDragLeave: () => {
           setInstruction(undefined);
         },
-        onDrop: ({  self, source, location }) => {
+        onDrop: ({ self, source, location }) => {
           setInstruction(undefined);
-          handleDrop(self,source,location)
+          handleDrop(self, source, location);
         },
       })
     );
@@ -143,7 +137,7 @@ export const FavoriteRoot: FC<Props> = observer((props) => {
 
   return (
     <>
-      <DropIndicator isVisible={instruction === "reorder-above"}/>
+      <DropIndicator isVisible={instruction === "reorder-above"} />
       <FavoriteItemWrapper elementRef={elementRef} isMenuActive={isMenuActive} sidebarCollapsed={sidebarCollapsed}>
         {!sidebarCollapsed && <FavoriteItemDragHandle isDragging={isDragging} sort_order={favorite.sort_order} />}
         <FavoriteItemTitle href={itemLink} icon={itemIcon} title={itemTitle} isSidebarCollapsed={!!sidebarCollapsed} />
@@ -157,7 +151,7 @@ export const FavoriteRoot: FC<Props> = observer((props) => {
           />
         )}
       </FavoriteItemWrapper>
-      { isLastChild && <DropIndicator isVisible={instruction === "reorder-below"} />}
+      {isLastChild && <DropIndicator isVisible={instruction === "reorder-below"} />}
     </>
   );
 });

web/core/components/workspace/sidebar/favorites/new-fav-folder.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import { useParams } from "next/navigation";
 import { Controller, SubmitHandler, useForm } from "react-hook-form";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // plane ui
 import { FavoriteFolderIcon, Input, setToast, TOAST_TYPE } from "@plane/ui";
 // hooks

web/core/components/workspace/sidebar/projects-list-item.tsx

@@ -24,7 +24,7 @@ import {
 } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // ui
 import {
   CustomMenu,
@@ -298,7 +298,7 @@ export const SidebarProjectsListItem: React.FC<Props> = observer((props) => {
     <>
       <PublishProjectModal isOpen={publishModalOpen} project={project} onClose={() => setPublishModal(false)} />
       <LeaveProjectModal project={project} isOpen={leaveProjectModalOpen} onClose={() => setLeaveProjectModal(false)} />
-      <Disclosure key={`${project.id}_${URLProjectId}`}  defaultOpen={isProjectListOpen} as="div">
+      <Disclosure key={`${project.id}_${URLProjectId}`} defaultOpen={isProjectListOpen} as="div">
         <div
           id={`sidebar-${projectId}-${projectListType}`}
           className={cn("relative", {

web/core/components/workspace/sidebar/workspace-menu.tsx

@@ -7,7 +7,7 @@ import { useParams, usePathname } from "next/navigation";
 import { ArchiveIcon, ChevronRight, MoreHorizontal, Settings } from "lucide-react";
 import { Disclosure, Transition } from "@headlessui/react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // ui
 import { CustomMenu, Tooltip } from "@plane/ui";
 // components

web/core/hooks/use-dropdown.ts

@@ -1,6 +1,6 @@
 import { useEffect } from "react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // hooks
 import { useDropdownKeyDown } from "@/hooks/use-dropdown-key-down";
 import { usePlatformOS } from "./use-platform-os";

web/core/hooks/use-dynamic-dropdown.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useEffect } from "react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 
 /**
  * Custom hook for dynamic dropdown position calculation.

web/core/store/workspace/index.ts

@@ -121,8 +121,6 @@ export class WorkspaceRootStore implements IWorkspaceRootStore {
         });
       });
       return workspaceResponse;
-    } catch (e) {
-      throw e;
     } finally {
       this.loader = false;
     }