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

* fix: lint related changes and packaging fixes

* adding color validations

admin/core/components/admin-sidebar/root.tsx

@@ -3,7 +3,7 @@
 import { FC, useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // components
 import { HelpSection, SidebarMenu, SidebarDropdown } from "@/components/admin-sidebar";
 // hooks

admin/package.json

@@ -14,9 +14,10 @@
   "dependencies": {
     "@headlessui/react": "^1.7.19",
     "@plane/constants": "*",
-    "@plane/helpers": "*",
+    "@plane/hooks": "*",
     "@plane/types": "*",
     "@plane/ui": "*",
+    "@plane/utils": "*",
     "@sentry/nextjs": "^8.32.0",
     "@tailwindcss/typography": "^0.5.9",
     "@types/lodash": "^4.17.0",
@@ -26,7 +27,7 @@
     "lucide-react": "^0.356.0",
     "mobx": "^6.12.0",
     "mobx-react": "^9.1.1",
-    "next": "^14.2.12",
+    "next": "^14.2.20",
     "next-themes": "^0.2.1",
     "postcss": "^8.4.38",
     "react": "^18.3.1",

packages/editor/package.json

@@ -27,6 +27,7 @@
     "dev": "tsup --watch",
     "check-types": "tsc --noEmit",
     "lint": "eslint src --ext .ts,.tsx",
+    "lint:errors": "eslint src --ext .ts,.tsx --quiet",
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "peerDependencies": {
@@ -36,8 +37,8 @@
   "dependencies": {
     "@floating-ui/react": "^0.26.4",
     "@hocuspocus/provider": "^2.13.5",
-    "@plane/helpers": "*",
     "@plane/ui": "*",
+    "@plane/utils": "*",
     "@tiptap/core": "^2.1.13",
     "@tiptap/extension-blockquote": "^2.1.13",
     "@tiptap/extension-character-count": "^2.6.5",

packages/editor/src/core/extensions/callout/logo-selector.tsx

@@ -1,5 +1,5 @@
 // plane helpers
-import { convertHexEmojiToDecimal } from "@plane/helpers";
+import { convertHexEmojiToDecimal } from "@plane/utils";
 // plane ui
 import { EmojiIconPicker, EmojiIconPickerTypes, Logo, TEmojiLogoProps } from "@plane/ui";
 // helpers

packages/editor/src/core/extensions/callout/utils.ts

@@ -1,5 +1,5 @@
 // plane helpers
-import { sanitizeHTML } from "@plane/helpers";
+import { sanitizeHTML } from "@plane/utils";
 // plane ui
 import { TEmojiLogoProps } from "@plane/ui";
 // types

packages/eslint-config/package.json

@@ -10,7 +10,7 @@
   "devDependencies": {
     "@typescript-eslint/eslint-plugin": "^8.6.0",
     "@typescript-eslint/parser": "^8.6.0",
-    "eslint": "8",
+    "eslint": "8.57.1",
     "eslint-config-next": "^14.1.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-config-turbo": "^1.12.4",

packages/helpers/helpers/emoji.helper.ts

@@ -1,22 +0,0 @@
-export const convertHexEmojiToDecimal = (emojiUnified: string): string => {
-  if (!emojiUnified) return "";
-
-  return emojiUnified
-    .toString()
-    .split("-")
-    .map((e) => parseInt(e, 16))
-    .join("-");
-};
-
-export const emojiCodeToUnicode = (emoji: string) => {
-  if (!emoji) return "";
-
-  // convert emoji code to unicode
-  const uniCodeEmoji = emoji
-    .toString()
-    .split("-")
-    .map((emoji) => parseInt(emoji, 10).toString(16))
-    .join("-");
-
-  return uniCodeEmoji;
-};

packages/helpers/helpers/index.ts

@@ -1,2 +0,0 @@
-export * from "./emoji.helper"
-export * from "./string.helper"

packages/helpers/index.ts

@@ -1,2 +0,0 @@
-export * from "./helpers";
-export * from "./hooks";

packages/hooks/.eslintignore

@@ -0,0 +1,3 @@
+build/*
+dist/*
+out/*

packages/hooks/.eslintrc.js

@@ -0,0 +1,9 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@plane/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};

packages/hooks/.prettierignore

@@ -0,0 +1,4 @@
+.turbo
+out/
+dist/
+build/

packages/hooks/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

packages/hooks/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "@plane/hooks",
+  "version": "0.24.0",
+  "description": "React hooks that are shared across multiple apps internally",
+  "private": true,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**"
+  ],
+  "scripts": {
+    "build": "tsup ./src/index.ts --format esm,cjs --dts --external react --minify",
+    "lint": "eslint . --ext .ts,.tsx",
+    "lint:errors": "eslint . --ext .ts,.tsx --quiet"
+  },
+  "dependencies": {
+    "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "@plane/eslint-config": "*",
+    "@types/node": "^22.5.4",
+    "@types/react": "^18.3.11",
+    "tsup": "^7.2.0",
+    "typescript": "^5.3.3"
+  }
+}

packages/hooks/tsconfig.json

@@ -4,6 +4,6 @@
     "jsx": "react",
     "lib": ["esnext", "dom"]
   },
-  "include": ["."],
+  "include": ["./src"],
   "exclude": ["dist", "build", "node_modules"]
 }

packages/ui/package.json

@@ -18,7 +18,8 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "postcss": "postcss styles/globals.css -o styles/output.css --watch",
-    "lint": "eslint src --ext .ts,.tsx"
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:errors": "eslint src --ext .ts,.tsx --quiet"
   },
   "peerDependencies": {
     "react": "^18.3.1",
@@ -31,7 +32,8 @@
     "@blueprintjs/popover2": "^1.13.3",
     "@headlessui/react": "^1.7.3",
     "@popperjs/core": "^2.11.8",
-    "@plane/helpers": "*",
+    "@plane/hooks": "*",
+    "@plane/utils": "*",
     "clsx": "^2.0.0",
     "emoji-picker-react": "^4.5.16",
     "lodash": "^4.17.21",

packages/ui/src/dropdown/multi-select.tsx

@@ -5,7 +5,7 @@ import { Combobox } from "@headlessui/react";
 // popper-js
 import { usePopper } from "react-popper";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // components
 import { DropdownButton } from "./common";
 import { DropdownOptions } from "./common/options";

packages/ui/src/dropdown/single-select.tsx

@@ -5,7 +5,7 @@ import { Combobox } from "@headlessui/react";
 // popper-js
 import { usePopper } from "react-popper";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // components
 import { DropdownButton } from "./common";
 import { DropdownOptions } from "./common/options";

packages/ui/src/dropdowns/context-menu/root.tsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // components
 import { ContextMenuItem } from "./item";
 // helpers

packages/ui/src/dropdowns/custom-menu.tsx

@@ -4,7 +4,7 @@ import { Menu } from "@headlessui/react";
 import { usePopper } from "react-popper";
 import { ChevronDown, MoreHorizontal } from "lucide-react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // hooks
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 // helpers

packages/ui/src/dropdowns/custom-search-select.tsx

@@ -4,7 +4,7 @@ import { Combobox } from "@headlessui/react";
 import { Check, ChevronDown, Info, Search } from "lucide-react";
 import { createPortal } from "react-dom";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // hooks
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 // helpers
@@ -97,10 +97,11 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                 <button
                   ref={setReferenceElement}
                   type="button"
-                  className={`flex w-full items-center justify-between gap-1 text-xs ${disabled
+                  className={`flex w-full items-center justify-between gap-1 text-xs ${
-                    ? "cursor-not-allowed text-custom-text-200"
+                    disabled
-                    : "cursor-pointer hover:bg-custom-background-80"
+                      ? "cursor-not-allowed text-custom-text-200"
-                    }  ${customButtonClassName}`}
+                      : "cursor-pointer hover:bg-custom-background-80"
+                  }  ${customButtonClassName}`}
                   onClick={toggleDropdown}
                 >
                   {customButton}
@@ -186,15 +187,13 @@ export const CustomSearchSelect = (props: ICustomSearchSelectProps) => {
                                   {selected && <Check className="h-3.5 w-3.5 flex-shrink-0" />}
                                   {option.tooltip && (
                                     <>
-                                      {
+                                      {typeof option.tooltip === "string" ? (
-                                        typeof option.tooltip === "string" ? (
+                                        <Tooltip tooltipContent={option.tooltip}>
-                                          <Tooltip tooltipContent={option.tooltip}>
+                                          <Info className="h-3.5 w-3.5 flex-shrink-0 cursor-pointer text-custom-text-200" />
-                                            <Info className="h-3.5 w-3.5 flex-shrink-0 cursor-pointer text-custom-text-200" />
+                                        </Tooltip>
-                                          </Tooltip>
+                                      ) : (
-                                        ) : (
+                                        option.tooltip
-                                            option.tooltip
+                                      )}
-                                        )
-                                      }
                                     </>
                                   )}
                                 </>

packages/ui/src/dropdowns/custom-select.tsx

@@ -3,7 +3,7 @@ import { usePopper } from "react-popper";
 import { Listbox } from "@headlessui/react";
 import { Check, ChevronDown } from "lucide-react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // hooks
 import { useDropdownKeyDown } from "../hooks/use-dropdown-key-down";
 // helpers

packages/ui/src/emoji/emoji-icon-picker-new.tsx

@@ -3,7 +3,7 @@ import { usePopper } from "react-popper";
 import { Popover, Tab } from "@headlessui/react";
 import EmojiPicker from "emoji-picker-react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // helpers
 import { cn } from "../../helpers";
 // hooks

packages/ui/src/emoji/emoji-icon-picker.tsx

@@ -3,7 +3,7 @@ import { usePopper } from "react-popper";
 import EmojiPicker from "emoji-picker-react";
 import { Popover, Tab } from "@headlessui/react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // components
 import { IconsList } from "./icons-list";
 // helpers

packages/ui/src/tabs/tabs.tsx

@@ -2,7 +2,7 @@ import React, { FC, Fragment } from "react";
 import { Tab } from "@headlessui/react";
 import { LucideProps } from "lucide-react";
 // helpers
-import { useLocalStorage } from "@plane/helpers";
+import { useLocalStorage } from "@plane/hooks";
 import { cn } from "../../helpers";
 
 type TabItem = {

packages/utils/.eslintignore

@@ -0,0 +1,3 @@
+build/*
+dist/*
+out/*

packages/utils/.eslintrc.js

@@ -0,0 +1,9 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@plane/eslint-config/library.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};

packages/utils/.prettierrc

@@ -0,0 +1,5 @@
+{
+  "printWidth": 120,
+  "tabWidth": 2,
+  "trailingComma": "es5"
+}

packages/utils/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@plane/helpers",
+  "name": "@plane/utils",
   "version": "0.24.0",
   "description": "Helper functions shared across multiple apps internally",
   "private": true,
@@ -10,16 +10,19 @@
     "dist/**"
   ],
   "scripts": {
-    "build": "tsup ./index.ts --format esm,cjs --dts --external react --minify"
+    "build": "tsup ./src/index.ts --format esm,cjs --dts --external react --minify",
-  },
+    "lint": "eslint . --ext .ts,.tsx",
-  "devDependencies": {
+    "lint:errors": "eslint . --ext .ts,.tsx --quiet"
-    "@types/node": "^22.5.4",
-    "@types/react": "^18.3.11",
-    "tsup": "^7.2.0",
-    "typescript": "^5.6.2"
   },
   "dependencies": {
     "isomorphic-dompurify": "^2.16.0",
     "react": "^18.3.1"
+  },
+  "devDependencies": {
+    "@plane/eslint-config": "*",
+    "@types/node": "^22.5.4",
+    "@types/react": "^18.3.11",
+    "tsup": "^7.2.0",
+    "typescript": "^5.3.3"
   }
 }

packages/utils/src/color.ts

@@ -0,0 +1,60 @@
+/**
+ * Represents an RGB color with numeric values for red, green, and blue components
+ * @typedef {Object} RGB
+ * @property {number} r - Red component (0-255)
+ * @property {number} g - Green component (0-255)
+ * @property {number} b - Blue component (0-255)
+ */
+export type RGB = { r: number; g: number; b: number };
+
+/**
+ * Validates and clamps color values to RGB range (0-255)
+ * @param {number} value - The color value to validate
+ * @returns {number} Clamped and floored value between 0-255
+ */
+export const validateColor = (value: number) => {
+  if (value < 0) return 0;
+  if (value > 255) return 255;
+  return Math.floor(value);
+};
+
+/**
+ * Converts a decimal color value to two-character hex
+ * @param {number} value - Decimal color value (0-255)
+ * @returns {string} Two-character hex value with leading zero if needed
+ */
+export const toHex = (value: number) => validateColor(value).toString(16).padStart(2, "0");
+
+/**
+ * Converts a hexadecimal color code to RGB values
+ * @param {string} hex - The hexadecimal color code (e.g., "#ff0000" for red)
+ * @returns {RGB} An object containing the RGB values
+ * @example
+ * hexToRgb("#ff0000") // returns { r: 255, g: 0, b: 0 }
+ * hexToRgb("#00ff00") // returns { r: 0, g: 255, b: 0 }
+ * hexToRgb("#0000ff") // returns { r: 0, g: 0, b: 255 }
+ */
+export const hexToRgb = (hex: string): RGB => {
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.trim());
+  return result
+    ? {
+        r: parseInt(result[1], 16),
+        g: parseInt(result[2], 16),
+        b: parseInt(result[3], 16),
+      }
+    : { r: 0, g: 0, b: 0 };
+};
+
+/**
+ * Converts RGB values to a hexadecimal color code
+ * @param {RGB} rgb - An object containing RGB values
+ * @param {number} rgb.r - Red component (0-255)
+ * @param {number} rgb.g - Green component (0-255)
+ * @param {number} rgb.b - Blue component (0-255)
+ * @returns {string} The hexadecimal color code (e.g., "#ff0000" for red)
+ * @example
+ * rgbToHex({ r: 255, g: 0, b: 0 }) // returns "#ff0000"
+ * rgbToHex({ r: 0, g: 255, b: 0 }) // returns "#00ff00"
+ * rgbToHex({ r: 0, g: 0, b: 255 }) // returns "#0000ff"
+ */
+export const rgbToHex = ({ r, g, b }: RGB): string => `#${toHex(r)}${toHex(g)}${toHex(b)}`;

packages/utils/src/emoji.ts

@@ -0,0 +1,40 @@
+/**
+ * Converts a hyphen-separated hexadecimal emoji code to its decimal representation
+ * @param {string} emojiUnified - The unified emoji code in hexadecimal format (e.g., "1f600" or "1f1e6-1f1e8")
+ * @returns {string} The decimal representation of the emoji code (e.g., "128512" or "127462-127464")
+ * @example
+ * convertHexEmojiToDecimal("1f600") // returns "128512"
+ * convertHexEmojiToDecimal("1f1e6-1f1e8") // returns "127462-127464"
+ * convertHexEmojiToDecimal("") // returns ""
+ */
+export const convertHexEmojiToDecimal = (emojiUnified: string): string => {
+  if (!emojiUnified) return "";
+
+  return emojiUnified
+    .toString()
+    .split("-")
+    .map((e) => parseInt(e, 16))
+    .join("-");
+};
+
+/**
+ * Converts a hyphen-separated decimal emoji code back to its hexadecimal representation
+ * @param {string} emoji - The emoji code in decimal format (e.g., "128512" or "127462-127464")
+ * @returns {string} The hexadecimal representation of the emoji code (e.g., "1f600" or "1f1e6-1f1e8")
+ * @example
+ * emojiCodeToUnicode("128512") // returns "1f600"
+ * emojiCodeToUnicode("127462-127464") // returns "1f1e6-1f1e8"
+ * emojiCodeToUnicode("") // returns ""
+ */
+export const emojiCodeToUnicode = (emoji: string): string => {
+  if (!emoji) return "";
+
+  // convert emoji code to unicode
+  const uniCodeEmoji = emoji
+    .toString()
+    .split("-")
+    .map((emoji) => parseInt(emoji, 10).toString(16))
+    .join("-");
+
+  return uniCodeEmoji;
+};

packages/utils/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./color";
+export * from "./emoji";
+export * from "./string";

packages/utils/src/string.ts

@@ -12,4 +12,4 @@ import DOMPurify from "isomorphic-dompurify";
 export const sanitizeHTML = (htmlString: string) => {
   const sanitizedText = DOMPurify.sanitize(htmlString, { ALLOWED_TAGS: [] }); // sanitize the string to remove all HTML tags
   return sanitizedText.trim(); // trim the string to remove leading and trailing whitespaces
-};
+};

packages/utils/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "@plane/typescript-config/react-library.json",
+  "compilerOptions": {
+    "jsx": "react",
+    "lib": ["esnext", "dom"]
+  },
+  "include": ["./src"],
+  "exclude": ["dist", "build", "node_modules"]
+}

space/package.json

@@ -34,7 +34,7 @@
     "mobx": "^6.10.0",
     "mobx-react": "^9.1.1",
     "mobx-utils": "^6.0.8",
-    "next": "^14.2.12",
+    "next": "^14.2.20",
     "next-themes": "^0.2.1",
     "nprogress": "^0.2.0",
     "react": "^18.3.1",

web/.prettierignore

@@ -1,6 +1,5 @@
 .next
-.vercel
+.turbo
-.tubro
 out/
-dis/
+dist/
 build/

web/app/[workspaceSlug]/(projects)/sidebar.tsx

@@ -2,7 +2,7 @@ import { FC, useEffect, useRef } from "react";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // components
 import {
   SidebarDropdown,

web/app/profile/sidebar.tsx

@@ -7,7 +7,7 @@ import { usePathname } from "next/navigation";
 // icons
 import { ChevronLeft, LogOut, MoveLeft, Plus, UserPlus } from "lucide-react";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // ui
 import { TOAST_TYPE, Tooltip, setToast } from "@plane/ui";
 // components

web/ce/components/issues/quick-add/root.tsx

@@ -2,7 +2,7 @@ import { FC, useEffect, useRef } from "react";
 import { observer } from "mobx-react";
 import { UseFormRegister, UseFormSetFocus } from "react-hook-form";
 // plane helpers
-import { useOutsideClickDetector } from "@plane/helpers";
+import { useOutsideClickDetector } from "@plane/hooks";
 // types
 import { TIssue } from "@plane/types";
 // components

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){
+          if (!isLastChild) {
-            blockedStates.push('reorder-below');
+            blockedStates.push("reorder-below");
           }
 
-          return attachInstruction(initialData,{
+          return attachInstruction(initialData, {
             input,
             element,
             currentLevel: 0,
             indentPerLevel: 0,
-            mode: isLastChild ? 'last-in-group' : 'standard',
+            mode: isLastChild ? "last-in-group" : "standard",
-            block: blockedStates
+            block: blockedStates,
-          })
+          });
         },
-        onDrag: ({source, self, location}) => {
+        onDrag: ({ source, self, location }) => {
-          const instruction = getInstructionFromPayload(self,source, 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 {
+  const { isLastChild, parentId, workspaceSlug, favorite, handleRemoveFromFavorites, handleDrop } = props;
-    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 }) =>{
+        getData: ({ input, element }) => {
-
+          const blockedStates: InstructionType[] = ["make-child"];
-          const blockedStates: InstructionType[] = ['make-child'];
+          if (!isLastChild) {
-          if(!isLastChild){
+            blockedStates.push("reorder-below");
-            blockedStates.push('reorder-below');
           }
 
-          return attachInstruction(initialData,{
+          return attachInstruction(initialData, {
             input,
             element,
             currentLevel: 1,
             indentPerLevel: 0,
-            mode: isLastChild ? 'last-in-group' : 'standard',
+            mode: isLastChild ? "last-in-group" : "standard",
-            block: blockedStates
+            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;
     }

web/package.json

@@ -30,9 +30,10 @@
     "@nivo/scatterplot": "^0.88.0",
     "@plane/constants": "*",
     "@plane/editor": "*",
-    "@plane/helpers": "*",
+    "@plane/hooks": "*",
     "@plane/types": "*",
     "@plane/ui": "*",
+    "@plane/utils": "*",
     "@popperjs/core": "^2.11.8",
     "@react-pdf/renderer": "^3.4.5",
     "@sentry/nextjs": "^8.32.0",
@@ -48,7 +49,7 @@
     "mobx": "^6.10.0",
     "mobx-react": "^9.1.1",
     "mobx-utils": "^6.0.8",
-    "next": "^14.2.12",
+    "next": "^14.2.20",
     "next-themes": "^0.2.1",
     "nprogress": "^0.2.0",
     "posthog-js": "^1.131.3",