From 96ae1cfd58336c18933b38180e204bd9466330fb Mon Sep 17 00:00:00 2001 From: Aaryan Khandelwal Date: Tue, 17 Dec 2024 19:56:07 +0530 Subject: [PATCH] refactor: remove cn helper function from the editor package --- packages/editor/package.json | 2 - .../components/editors/editor-container.tsx | 4 +- .../src/core/components/menus/ai-menu.tsx | 4 +- .../menus/bubble-menu/alignment-selector.tsx | 4 +- .../menus/bubble-menu/color-selector.tsx | 3 +- .../menus/bubble-menu/link-selector.tsx | 4 +- .../menus/bubble-menu/node-selector.tsx | 4 +- .../components/menus/bubble-menu/root.tsx | 4 +- .../extensions/callout/color-selector.tsx | 4 +- .../core/extensions/callout/logo-selector.tsx | 4 +- .../extensions/code/code-block-node-view.tsx | 4 +- .../custom-image/components/image-block.tsx | 4 +- .../components/image-uploader.tsx | 4 +- .../components/toolbar/full-screen.tsx | 4 +- .../custom-image/components/toolbar/root.tsx | 4 +- .../extensions/mentions/mention-node-view.tsx | 4 +- .../extensions/mentions/mentions-list.tsx | 4 +- .../slash-commands/command-menu-item.tsx | 4 +- packages/editor/src/core/helpers/common.ts | 8 +--- packages/editor/src/core/props/props.tsx | 4 +- packages/editor/src/core/props/read-only.tsx | 4 +- packages/utils/package.json | 4 +- packages/utils/src/common.ts | 4 ++ packages/utils/src/index.ts | 1 + .../issue-layouts/kanban/block-reactions.tsx | 4 +- .../issues/issue-layouts/kanban/block.tsx | 6 ++- .../issues/issue-layouts/list/block.tsx | 6 ++- .../issues/issue-layouts/list/list-group.tsx | 5 ++- .../properties/all-properties.tsx | 7 +-- .../issues/issue-layouts/properties/cycle.tsx | 5 ++- .../issue-layouts/properties/member.tsx | 5 ++- .../issue-layouts/properties/modules.tsx | 5 ++- .../issues/issue-layouts/properties/state.tsx | 5 ++- .../workflow/add-state-transition.tsx | 4 +- web/core/components/common/access-field.tsx | 4 +- web/core/components/dropdowns/layout.tsx | 5 ++- .../components/dropdowns/member/avatar.tsx | 3 +- .../gantt-chart/chart/views/quarter.tsx | 4 +- .../gantt-chart/chart/views/week.tsx | 4 +- .../blockResizables/left-resizable.tsx | 4 +- .../blockResizables/right-resizable.tsx | 4 +- .../components/inbox/inbox-filter/root.tsx | 6 ++- .../issues/issue-layouts/list/list-group.tsx | 5 ++- .../components/modules/module-view-header.tsx | 5 +-- .../project/create/common-attributes.tsx | 5 ++- web/core/components/project/filters.tsx | 5 ++- .../loader/layouts/kanban-layout-loader.tsx | 4 +- .../ui/loader/layouts/list-layout-loader.tsx | 4 +- web/core/components/workspace/logo.tsx | 3 +- yarn.lock | 43 ++----------------- 50 files changed, 123 insertions(+), 131 deletions(-) create mode 100644 packages/utils/src/common.ts diff --git a/packages/editor/package.json b/packages/editor/package.json index 8f7295a0ede..9aa2f31d4dd 100644 --- a/packages/editor/package.json +++ b/packages/editor/package.json @@ -57,7 +57,6 @@ "@tiptap/starter-kit": "^2.1.13", "@tiptap/suggestion": "^2.0.13", "class-variance-authority": "^0.7.0", - "clsx": "^1.2.1", "highlight.js": "^11.8.0", "jsx-dom-cjs": "^8.0.3", "linkifyjs": "^4.1.3", @@ -66,7 +65,6 @@ "prosemirror-codemark": "^0.4.2", "prosemirror-utils": "^1.2.2", "react-moveable": "^0.54.2", - "tailwind-merge": "^1.14.0", "tippy.js": "^6.3.7", "tiptap-markdown": "^0.8.9", "uuid": "^10.0.0", diff --git a/packages/editor/src/core/components/editors/editor-container.tsx b/packages/editor/src/core/components/editors/editor-container.tsx index e070d7e45e5..d6563f7b085 100644 --- a/packages/editor/src/core/components/editors/editor-container.tsx +++ b/packages/editor/src/core/components/editors/editor-container.tsx @@ -1,9 +1,9 @@ import { FC, ReactNode } from "react"; import { Editor } from "@tiptap/react"; +// plane utils +import { cn } from "@plane/utils"; // constants import { DEFAULT_DISPLAY_CONFIG } from "@/constants/config"; -// helpers -import { cn } from "@/helpers/common"; // types import { TDisplayConfig } from "@/types"; diff --git a/packages/editor/src/core/components/menus/ai-menu.tsx b/packages/editor/src/core/components/menus/ai-menu.tsx index 43793fae35d..42b45509f72 100644 --- a/packages/editor/src/core/components/menus/ai-menu.tsx +++ b/packages/editor/src/core/components/menus/ai-menu.tsx @@ -1,7 +1,7 @@ import { useCallback, useEffect, useRef, useState } from "react"; import tippy, { Instance } from "tippy.js"; -// helpers -import { cn } from "@/helpers/common"; +// plane utils +import { cn } from "@plane/utils"; // types import { TAIHandler } from "@/types"; diff --git a/packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx index e3ccc6cf62b..24dfeceafdf 100644 --- a/packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx +++ b/packages/editor/src/core/components/menus/bubble-menu/alignment-selector.tsx @@ -1,9 +1,9 @@ import { Editor } from "@tiptap/core"; import { AlignCenter, AlignLeft, AlignRight, LucideIcon } from "lucide-react"; +// plane utils +import { cn } from "@plane/utils"; // components import { TextAlignItem } from "@/components/menus"; -// helpers -import { cn } from "@/helpers/common"; // types import { TEditorCommands } from "@/types"; diff --git a/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx index bc7f5a56f12..ba9278b675f 100644 --- a/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx +++ b/packages/editor/src/core/components/menus/bubble-menu/color-selector.tsx @@ -1,10 +1,11 @@ import { Dispatch, FC, SetStateAction } from "react"; import { Editor } from "@tiptap/react"; import { ALargeSmall, Ban } from "lucide-react"; +// plane utils +import { cn } from "@plane/utils"; // constants import { COLORS_LIST } from "@/constants/common"; // helpers -import { cn } from "@/helpers/common"; import { BackgroundColorItem, TextColorItem } from "../menu-items"; type Props = { diff --git a/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx index eaa20ed26bb..fe651fa4e15 100644 --- a/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx +++ b/packages/editor/src/core/components/menus/bubble-menu/link-selector.tsx @@ -1,8 +1,10 @@ import { Dispatch, FC, SetStateAction, useCallback, useEffect, useRef } from "react"; import { Editor } from "@tiptap/core"; import { Check, Link, Trash } from "lucide-react"; +// plane utils +import { cn } from "@plane/utils"; // helpers -import { cn, isValidHttpUrl } from "@/helpers/common"; +import { isValidHttpUrl } from "@/helpers/common"; import { setLinkEditor, unsetLinkEditor } from "@/helpers/editor-commands"; type Props = { diff --git a/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx b/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx index a121c48ef12..7d1378800c9 100644 --- a/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx +++ b/packages/editor/src/core/components/menus/bubble-menu/node-selector.tsx @@ -1,6 +1,8 @@ import { Dispatch, FC, SetStateAction } from "react"; import { Editor } from "@tiptap/react"; import { Check, ChevronDown } from "lucide-react"; +// plane utils +import { cn } from "@plane/utils"; // components import { BulletListItem, @@ -17,8 +19,6 @@ import { HeadingSixItem, EditorMenuItem, } from "@/components/menus"; -// helpers -import { cn } from "@/helpers/common"; // types import { TEditorCommands } from "@/types"; diff --git a/packages/editor/src/core/components/menus/bubble-menu/root.tsx b/packages/editor/src/core/components/menus/bubble-menu/root.tsx index 18079f089e1..4ed3709f408 100644 --- a/packages/editor/src/core/components/menus/bubble-menu/root.tsx +++ b/packages/editor/src/core/components/menus/bubble-menu/root.tsx @@ -1,5 +1,7 @@ import { FC, useEffect, useState } from "react"; import { BubbleMenu, BubbleMenuProps, Editor, isNodeSelection } from "@tiptap/react"; +// plane utils +import { cn } from "@plane/utils"; // components import { BoldItem, @@ -13,8 +15,6 @@ import { } from "@/components/menus"; // extensions import { isCellSelection } from "@/extensions/table/table/utilities/is-cell-selection"; -// helpers -import { cn } from "@/helpers/common"; // local components import { TextAlignmentSelector } from "./alignment-selector"; diff --git a/packages/editor/src/core/extensions/callout/color-selector.tsx b/packages/editor/src/core/extensions/callout/color-selector.tsx index 489b051666e..ddc3b879cf5 100644 --- a/packages/editor/src/core/extensions/callout/color-selector.tsx +++ b/packages/editor/src/core/extensions/callout/color-selector.tsx @@ -1,8 +1,8 @@ import { Ban, ChevronDown } from "lucide-react"; +// plane utils +import { cn } from "@plane/utils"; // constants import { COLORS_LIST } from "@/constants/common"; -// helpers -import { cn } from "@/helpers/common"; type Props = { disabled: boolean; diff --git a/packages/editor/src/core/extensions/callout/logo-selector.tsx b/packages/editor/src/core/extensions/callout/logo-selector.tsx index 4c78a2c0470..8ea47d50d0a 100644 --- a/packages/editor/src/core/extensions/callout/logo-selector.tsx +++ b/packages/editor/src/core/extensions/callout/logo-selector.tsx @@ -2,8 +2,8 @@ import { convertHexEmojiToDecimal } from "@plane/utils"; // plane ui import { EmojiIconPicker, EmojiIconPickerTypes, Logo, TEmojiLogoProps } from "@plane/ui"; -// helpers -import { cn } from "@/helpers/common"; +// plane utils +import { cn } from "@plane/utils"; // types import { TCalloutBlockAttributes } from "./types"; // utils diff --git a/packages/editor/src/core/extensions/code/code-block-node-view.tsx b/packages/editor/src/core/extensions/code/code-block-node-view.tsx index 8dbdb044f11..a06d839908a 100644 --- a/packages/editor/src/core/extensions/code/code-block-node-view.tsx +++ b/packages/editor/src/core/extensions/code/code-block-node-view.tsx @@ -8,8 +8,8 @@ import { common, createLowlight } from "lowlight"; import { CopyIcon, CheckIcon } from "lucide-react"; // ui import { Tooltip } from "@plane/ui"; -// helpers -import { cn } from "@/helpers/common"; +// plane utils +import { cn } from "@plane/utils"; // we just have ts support for now const lowlight = createLowlight(common); diff --git a/packages/editor/src/core/extensions/custom-image/components/image-block.tsx b/packages/editor/src/core/extensions/custom-image/components/image-block.tsx index b5b27e27185..89194aae0c3 100644 --- a/packages/editor/src/core/extensions/custom-image/components/image-block.tsx +++ b/packages/editor/src/core/extensions/custom-image/components/image-block.tsx @@ -1,9 +1,9 @@ import React, { useRef, useState, useCallback, useLayoutEffect, useEffect } from "react"; import { NodeSelection } from "@tiptap/pm/state"; +// plane utils +import { cn } from "@plane/utils"; // extensions import { CustoBaseImageNodeViewProps, ImageToolbarRoot } from "@/extensions/custom-image"; -// helpers -import { cn } from "@/helpers/common"; const MIN_SIZE = 100; diff --git a/packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx b/packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx index 8ad99bc4439..bcf78fe74b3 100644 --- a/packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx +++ b/packages/editor/src/core/extensions/custom-image/components/image-uploader.tsx @@ -1,7 +1,7 @@ import { ChangeEvent, useCallback, useEffect, useMemo, useRef } from "react"; import { ImageIcon } from "lucide-react"; -// helpers -import { cn } from "@/helpers/common"; +// plane utils +import { cn } from "@plane/utils"; // hooks import { useUploader, useDropZone, uploadFirstImageAndInsertRemaining } from "@/hooks/use-file-upload"; // extensions diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx index 38ea23c9925..92b5904fbf7 100644 --- a/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx +++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/full-screen.tsx @@ -1,7 +1,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react"; import { ExternalLink, Maximize, Minus, Plus, X } from "lucide-react"; -// helpers -import { cn } from "@/helpers/common"; +// plane utils +import { cn } from "@plane/utils"; type Props = { image: { diff --git a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx index d42d875cc93..3179db0d4cd 100644 --- a/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx +++ b/packages/editor/src/core/extensions/custom-image/components/toolbar/root.tsx @@ -1,6 +1,6 @@ import { useState } from "react"; -// helpers -import { cn } from "@/helpers/common"; +// plane utils +import { cn } from "@plane/utils"; // components import { ImageFullScreenAction } from "./full-screen"; diff --git a/packages/editor/src/core/extensions/mentions/mention-node-view.tsx b/packages/editor/src/core/extensions/mentions/mention-node-view.tsx index 5121eae4aff..0bf088ca588 100644 --- a/packages/editor/src/core/extensions/mentions/mention-node-view.tsx +++ b/packages/editor/src/core/extensions/mentions/mention-node-view.tsx @@ -5,8 +5,8 @@ // @ts-nocheck import { useEffect, useState } from "react"; import { NodeViewWrapper } from "@tiptap/react"; -// helpers -import { cn } from "@/helpers/common"; +// plane utils +import { cn } from "@plane/utils"; // types import { IMentionHighlight } from "@/types"; diff --git a/packages/editor/src/core/extensions/mentions/mentions-list.tsx b/packages/editor/src/core/extensions/mentions/mentions-list.tsx index 279567a203a..ed8d0ba4af3 100644 --- a/packages/editor/src/core/extensions/mentions/mentions-list.tsx +++ b/packages/editor/src/core/extensions/mentions/mentions-list.tsx @@ -5,8 +5,8 @@ import { Editor } from "@tiptap/react"; import { v4 as uuidv4 } from "uuid"; // ui import { Avatar } from "@plane/ui"; -// helpers -import { cn } from "@/helpers/common"; +// plane utils +import { cn } from "@plane/utils"; // types import { IMentionSuggestion } from "@/types"; diff --git a/packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx b/packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx index 3a03c3b6a70..bd8ce2aecdb 100644 --- a/packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx +++ b/packages/editor/src/core/extensions/slash-commands/command-menu-item.tsx @@ -1,5 +1,5 @@ -// helpers -import { cn } from "@/helpers/common"; +// plane utils +import { cn } from "@plane/utils"; // types import { ISlashCommandItem } from "@/types"; diff --git a/packages/editor/src/core/helpers/common.ts b/packages/editor/src/core/helpers/common.ts index 0fb32310d6a..8638d2c151d 100644 --- a/packages/editor/src/core/helpers/common.ts +++ b/packages/editor/src/core/helpers/common.ts @@ -1,6 +1,6 @@ import { EditorState, Selection } from "@tiptap/pm/state"; -import { clsx, type ClassValue } from "clsx"; -import { twMerge } from "tailwind-merge"; +// plane utils +import { cn } from "@plane/utils"; interface EditorClassNames { noBorder?: boolean; @@ -18,10 +18,6 @@ export const getEditorClassNames = ({ noBorder, borderOnFocus, containerClassNam containerClassName ); -export function cn(...inputs: ClassValue[]) { - return twMerge(clsx(inputs)); -} - // Helper function to find the parent node of a specific type export function findParentNodeOfType(selection: Selection, typeName: string) { let depth = selection.$anchor.depth; diff --git a/packages/editor/src/core/props/props.tsx b/packages/editor/src/core/props/props.tsx index 4bda3e51a2d..ee0b9e50007 100644 --- a/packages/editor/src/core/props/props.tsx +++ b/packages/editor/src/core/props/props.tsx @@ -1,6 +1,6 @@ import { EditorProps } from "@tiptap/pm/view"; -// helpers -import { cn } from "@/helpers/common"; +// plane utils +import { cn } from "@plane/utils"; export type TCoreEditorProps = { editorClassName: string; diff --git a/packages/editor/src/core/props/read-only.tsx b/packages/editor/src/core/props/read-only.tsx index aaa635a508f..ea5bf09f3a7 100644 --- a/packages/editor/src/core/props/read-only.tsx +++ b/packages/editor/src/core/props/read-only.tsx @@ -1,6 +1,6 @@ import { EditorProps } from "@tiptap/pm/view"; -// helpers -import { cn } from "@/helpers/common"; +// plane utils +import { cn } from "@plane/utils"; // props import { TCoreEditorProps } from "@/props"; diff --git a/packages/utils/package.json b/packages/utils/package.json index a0e0ecca141..69519e57042 100644 --- a/packages/utils/package.json +++ b/packages/utils/package.json @@ -15,8 +15,10 @@ "lint:errors": "eslint src --ext .ts,.tsx --quiet" }, "dependencies": { + "clsx": "^2.1.1", "isomorphic-dompurify": "^2.16.0", - "react": "^18.3.1" + "react": "^18.3.1", + "tailwind-merge": "^2.5.5" }, "devDependencies": { "@plane/eslint-config": "*", diff --git a/packages/utils/src/common.ts b/packages/utils/src/common.ts new file mode 100644 index 00000000000..a500a738583 --- /dev/null +++ b/packages/utils/src/common.ts @@ -0,0 +1,4 @@ +import { clsx, type ClassValue } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs)); diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts index 7e63eed7925..cf629534521 100644 --- a/packages/utils/src/index.ts +++ b/packages/utils/src/index.ts @@ -1,3 +1,4 @@ export * from "./color"; +export * from "./common"; export * from "./emoji"; export * from "./string"; diff --git a/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx b/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx index 241a087e781..a7ffd38ae85 100644 --- a/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx +++ b/space/core/components/issues/issue-layouts/kanban/block-reactions.tsx @@ -1,7 +1,7 @@ import { observer } from "mobx-react"; import { useParams } from "next/navigation"; -//plane -import { cn } from "@plane/editor"; +// plane utils +import { cn } from "@plane/utils"; // components import { IssueEmojiReactions, IssueVotes } from "@/components/issues/reactions"; // hooks diff --git a/space/core/components/issues/issue-layouts/kanban/block.tsx b/space/core/components/issues/issue-layouts/kanban/block.tsx index 7c246cc339f..1975963cc1a 100644 --- a/space/core/components/issues/issue-layouts/kanban/block.tsx +++ b/space/core/components/issues/issue-layouts/kanban/block.tsx @@ -4,10 +4,12 @@ import { MutableRefObject } from "react"; import { observer } from "mobx-react"; import Link from "next/link"; import { useParams, useSearchParams } from "next/navigation"; -// plane -import { cn } from "@plane/editor"; +// plane types import { IIssueDisplayProperties } from "@plane/types"; +// plane ui import { Tooltip } from "@plane/ui"; +// plane utils +import { cn } from "@plane/utils"; // components import { WithDisplayPropertiesHOC } from "@/components/issues/issue-layouts/with-display-properties-HOC"; // helpers diff --git a/space/core/components/issues/issue-layouts/list/block.tsx b/space/core/components/issues/issue-layouts/list/block.tsx index 39a298448ac..6d4fb0983f5 100644 --- a/space/core/components/issues/issue-layouts/list/block.tsx +++ b/space/core/components/issues/issue-layouts/list/block.tsx @@ -4,10 +4,12 @@ import { useRef } from "react"; import { observer } from "mobx-react"; import Link from "next/link"; import { useParams, useSearchParams } from "next/navigation"; -// types -import { cn } from "@plane/editor"; +// plane types import { IIssueDisplayProperties } from "@plane/types"; +// plane ui import { Tooltip } from "@plane/ui"; +// plane utils +import { cn } from "@plane/utils"; // helpers import { queryParamGenerator } from "@/helpers/query-param-generator"; // hooks diff --git a/space/core/components/issues/issue-layouts/list/list-group.tsx b/space/core/components/issues/issue-layouts/list/list-group.tsx index 742cfeef156..75d280d0d07 100644 --- a/space/core/components/issues/issue-layouts/list/list-group.tsx +++ b/space/core/components/issues/issue-layouts/list/list-group.tsx @@ -2,9 +2,10 @@ import { Fragment, MutableRefObject, forwardRef, useRef, useState } from "react"; import { observer } from "mobx-react"; -import { cn } from "@plane/editor"; -// plane +// plane types import { IGroupByColumn, TIssueGroupByOptions, IIssueDisplayProperties, TPaginationData, TLoader } from "@plane/types"; +// plane utils +import { cn } from "@plane/utils"; // hooks import { useIntersectionObserver } from "@/hooks/use-intersection-observer"; // diff --git a/space/core/components/issues/issue-layouts/properties/all-properties.tsx b/space/core/components/issues/issue-layouts/properties/all-properties.tsx index 3c596cb53c9..66e9ab2960c 100644 --- a/space/core/components/issues/issue-layouts/properties/all-properties.tsx +++ b/space/core/components/issues/issue-layouts/properties/all-properties.tsx @@ -2,11 +2,12 @@ import { observer } from "mobx-react"; import { Layers, Link, Paperclip } from "lucide-react"; -// types -import { cn } from "@plane/editor"; +// plane types import { IIssueDisplayProperties } from "@plane/types"; +// plane ui import { Tooltip } from "@plane/ui"; -// ui +// plane utils +import { cn } from "@plane/utils"; // components import { IssueBlockDate, diff --git a/space/core/components/issues/issue-layouts/properties/cycle.tsx b/space/core/components/issues/issue-layouts/properties/cycle.tsx index 52c10578978..1774781cd39 100644 --- a/space/core/components/issues/issue-layouts/properties/cycle.tsx +++ b/space/core/components/issues/issue-layouts/properties/cycle.tsx @@ -1,9 +1,10 @@ "use client"; import { observer } from "mobx-react"; -// ui -import { cn } from "@plane/editor"; +// plane ui import { ContrastIcon, Tooltip } from "@plane/ui"; +// plane utils +import { cn } from "@plane/utils"; //hooks import { useCycle } from "@/hooks/store/use-cycle"; diff --git a/space/core/components/issues/issue-layouts/properties/member.tsx b/space/core/components/issues/issue-layouts/properties/member.tsx index bac44d52322..9ae3314f180 100644 --- a/space/core/components/issues/issue-layouts/properties/member.tsx +++ b/space/core/components/issues/issue-layouts/properties/member.tsx @@ -3,9 +3,10 @@ import { observer } from "mobx-react"; // icons import { LucideIcon, Users } from "lucide-react"; -// ui -import { cn } from "@plane/editor"; +// plane ui import { Avatar, AvatarGroup } from "@plane/ui"; +// plane utils +import { cn } from "@plane/utils"; // hooks import { useMember } from "@/hooks/store/use-member"; // diff --git a/space/core/components/issues/issue-layouts/properties/modules.tsx b/space/core/components/issues/issue-layouts/properties/modules.tsx index eaa30d9908b..465f469c0b4 100644 --- a/space/core/components/issues/issue-layouts/properties/modules.tsx +++ b/space/core/components/issues/issue-layouts/properties/modules.tsx @@ -1,9 +1,10 @@ "use client"; import { observer } from "mobx-react"; -// planes -import { cn } from "@plane/editor"; +// plane ui import { DiceIcon, Tooltip } from "@plane/ui"; +// plane utils +import { cn } from "@plane/utils"; // hooks import { useModule } from "@/hooks/store/use-module"; diff --git a/space/core/components/issues/issue-layouts/properties/state.tsx b/space/core/components/issues/issue-layouts/properties/state.tsx index 56a09bcd99f..1d2d1c6fe87 100644 --- a/space/core/components/issues/issue-layouts/properties/state.tsx +++ b/space/core/components/issues/issue-layouts/properties/state.tsx @@ -1,9 +1,10 @@ "use client"; import { observer } from "mobx-react"; -// ui -import { cn } from "@plane/editor"; +// plane ui import { StateGroupIcon, Tooltip } from "@plane/ui"; +// plane utils +import { cn } from "@plane/utils"; //hooks import { useStates } from "@/hooks/store"; diff --git a/web/ce/components/workflow/add-state-transition.tsx b/web/ce/components/workflow/add-state-transition.tsx index 48ba6c02ab9..a22769ba254 100644 --- a/web/ce/components/workflow/add-state-transition.tsx +++ b/web/ce/components/workflow/add-state-transition.tsx @@ -1,6 +1,6 @@ import { Plus } from "lucide-react"; -// Plane -import { cn } from "@plane/editor"; +// plane utils +import { cn } from "@plane/utils"; type Props = { workspaceSlug: string; diff --git a/web/core/components/common/access-field.tsx b/web/core/components/common/access-field.tsx index dd7606a3aee..b619dde44fb 100644 --- a/web/core/components/common/access-field.tsx +++ b/web/core/components/common/access-field.tsx @@ -1,6 +1,8 @@ import { LucideIcon } from "lucide-react"; -import { cn } from "@plane/editor"; +// plane ui import { Tooltip } from "@plane/ui"; +// plane utils +import { cn } from "@plane/utils"; type Props = { onChange: (value: number) => void; diff --git a/web/core/components/dropdowns/layout.tsx b/web/core/components/dropdowns/layout.tsx index 7864d1849df..826475c69c4 100644 --- a/web/core/components/dropdowns/layout.tsx +++ b/web/core/components/dropdowns/layout.tsx @@ -1,9 +1,10 @@ import { useCallback, useMemo } from "react"; import { observer } from "mobx-react"; import { Check } from "lucide-react"; -// plane packages -import { cn } from "@plane/editor"; +// plane ui import { Dropdown } from "@plane/ui"; +// plane utils +import { cn } from "@plane/utils"; // constants import { EIssueLayoutTypes, ISSUE_LAYOUT_MAP } from "@/constants/issue"; diff --git a/web/core/components/dropdowns/member/avatar.tsx b/web/core/components/dropdowns/member/avatar.tsx index 9907de3599e..0b2189f6510 100644 --- a/web/core/components/dropdowns/member/avatar.tsx +++ b/web/core/components/dropdowns/member/avatar.tsx @@ -3,8 +3,9 @@ import { observer } from "mobx-react"; import { LucideIcon, Users } from "lucide-react"; // plane ui -import { cn } from "@plane/editor"; import { Avatar, AvatarGroup } from "@plane/ui"; +// plane utils +import { cn } from "@plane/utils"; // helpers import { getFileURL } from "@/helpers/file.helper"; // hooks diff --git a/web/core/components/gantt-chart/chart/views/quarter.tsx b/web/core/components/gantt-chart/chart/views/quarter.tsx index 421d0bdfec6..ee1a11c5733 100644 --- a/web/core/components/gantt-chart/chart/views/quarter.tsx +++ b/web/core/components/gantt-chart/chart/views/quarter.tsx @@ -1,7 +1,7 @@ import { FC } from "react"; import { observer } from "mobx-react"; -// Plane -import { cn } from "@plane/editor"; +// plane utils +import { cn } from "@plane/utils"; // hooks import { useTimeLineChartStore } from "@/hooks/use-timeline-chart"; // diff --git a/web/core/components/gantt-chart/chart/views/week.tsx b/web/core/components/gantt-chart/chart/views/week.tsx index 2096acbc2bc..7c38d97ee86 100644 --- a/web/core/components/gantt-chart/chart/views/week.tsx +++ b/web/core/components/gantt-chart/chart/views/week.tsx @@ -1,7 +1,7 @@ import { FC } from "react"; import { observer } from "mobx-react"; -// Plane -import { cn } from "@plane/editor"; +// plane utils +import { cn } from "@plane/utils"; // hooks import { useTimeLineChartStore } from "@/hooks/use-timeline-chart"; // diff --git a/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx b/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx index b5f0de5c157..99b96e786dc 100644 --- a/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx +++ b/web/core/components/gantt-chart/helpers/blockResizables/left-resizable.tsx @@ -1,7 +1,7 @@ import { useState } from "react"; import { observer } from "mobx-react"; -// Plane -import { cn } from "@plane/editor"; +// plane utils +import { cn } from "@plane/utils"; //helpers import { renderFormattedDate } from "@/helpers/date-time.helper"; //hooks diff --git a/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx b/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx index bb262875b59..8370a7630ae 100644 --- a/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx +++ b/web/core/components/gantt-chart/helpers/blockResizables/right-resizable.tsx @@ -1,7 +1,7 @@ import { useState } from "react"; import { observer } from "mobx-react"; -// Plane -import { cn } from "@plane/editor"; +// plane utils +import { cn } from "@plane/utils"; //helpers import { renderFormattedDate } from "@/helpers/date-time.helper"; //hooks diff --git a/web/core/components/inbox/inbox-filter/root.tsx b/web/core/components/inbox/inbox-filter/root.tsx index 04761033106..df4fcf69fb5 100644 --- a/web/core/components/inbox/inbox-filter/root.tsx +++ b/web/core/components/inbox/inbox-filter/root.tsx @@ -1,8 +1,10 @@ import { FC } from "react"; import { ChevronDown, ListFilter } from "lucide-react"; -// components -import { cn } from "@plane/editor"; +// plane ui import { getButtonStyling } from "@plane/ui"; +// plane utils +import { cn } from "@plane/utils"; +// components import { InboxIssueFilterSelection, InboxIssueOrderByDropdown } from "@/components/inbox/inbox-filter"; import { FiltersDropdown } from "@/components/issues"; import useSize from "@/hooks/use-window-size"; diff --git a/web/core/components/issues/issue-layouts/list/list-group.tsx b/web/core/components/issues/issue-layouts/list/list-group.tsx index 7e8f3d29128..ece6f1253dd 100644 --- a/web/core/components/issues/issue-layouts/list/list-group.tsx +++ b/web/core/components/issues/issue-layouts/list/list-group.tsx @@ -4,8 +4,7 @@ import { MutableRefObject, useEffect, useRef, useState } from "react"; import { combine } from "@atlaskit/pragmatic-drag-and-drop/combine"; import { dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter"; import { observer } from "mobx-react"; -import { cn } from "@plane/editor"; -// plane packages +// plane ui import { IGroupByColumn, TIssueMap, @@ -16,6 +15,8 @@ import { TIssueKanbanFilters, } from "@plane/types"; import { Row, setToast, TOAST_TYPE } from "@plane/ui"; +// plane utils +import { cn } from "@plane/utils"; // components import { ListLoaderItemRow } from "@/components/ui"; // constants diff --git a/web/core/components/modules/module-view-header.tsx b/web/core/components/modules/module-view-header.tsx index 592c1e80d7e..04403d2320a 100644 --- a/web/core/components/modules/module-view-header.tsx +++ b/web/core/components/modules/module-view-header.tsx @@ -3,10 +3,9 @@ import React, { FC, useCallback, useEffect, useRef, useState } from "react"; import { observer } from "mobx-react"; import { useParams } from "next/navigation"; -// icons import { ListFilter, Search, X } from "lucide-react"; -// editor -import { cn } from "@plane/editor"; +// plane utils +import { cn } from "@plane/utils"; // plane helpers import { useOutsideClickDetector } from "@plane/hooks"; // types diff --git a/web/core/components/project/create/common-attributes.tsx b/web/core/components/project/create/common-attributes.tsx index f753d0ae758..53da57d28d9 100644 --- a/web/core/components/project/create/common-attributes.tsx +++ b/web/core/components/project/create/common-attributes.tsx @@ -1,9 +1,10 @@ import { ChangeEvent } from "react"; import { Controller, useFormContext, UseFormSetValue } from "react-hook-form"; import { Info } from "lucide-react"; -import { cn } from "@plane/editor"; -// ui +// plane ui import { Input, TextArea, Tooltip } from "@plane/ui"; +// plane utils +import { cn } from "@plane/utils"; // constants import { ETabIndices } from "@/constants/tab-indices"; // helpers diff --git a/web/core/components/project/filters.tsx b/web/core/components/project/filters.tsx index 9434f79951f..2465bbc3693 100644 --- a/web/core/components/project/filters.tsx +++ b/web/core/components/project/filters.tsx @@ -2,9 +2,10 @@ import { useCallback } from "react"; import { observer } from "mobx-react"; import { useParams } from "next/navigation"; import { ListFilter } from "lucide-react"; -// types -import { cn } from "@plane/editor"; +// plane types import { TProjectFilters } from "@plane/types"; +// plane utils +import { cn } from "@plane/utils"; // components import { FiltersDropdown } from "@/components/issues"; import { ProjectFiltersSelection, ProjectOrderByDropdown } from "@/components/project"; diff --git a/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx b/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx index ebf92445e88..9cf250a1890 100644 --- a/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx +++ b/web/core/components/ui/loader/layouts/kanban-layout-loader.tsx @@ -1,7 +1,9 @@ import { forwardRef } from "react"; import range from "lodash/range"; -import { cn } from "@plane/editor"; +// plane ui import { ContentWrapper } from "@plane/ui"; +// plane utils +import { cn } from "@plane/utils"; export const KanbanIssueBlockLoader = forwardRef( ({ cardHeight = 100, shouldAnimate = true }, ref) => ( diff --git a/web/core/components/ui/loader/layouts/list-layout-loader.tsx b/web/core/components/ui/loader/layouts/list-layout-loader.tsx index 65d4d1565a2..fdcaf88984f 100644 --- a/web/core/components/ui/loader/layouts/list-layout-loader.tsx +++ b/web/core/components/ui/loader/layouts/list-layout-loader.tsx @@ -1,7 +1,9 @@ import { Fragment, forwardRef } from "react"; import range from "lodash/range"; -import { cn } from "@plane/editor"; +// plane ui import { Row } from "@plane/ui"; +// plane utils +import { cn } from "@plane/utils"; import { getRandomInt, getRandomLength } from "../utils"; export const ListLoaderItemRow = forwardRef< diff --git a/web/core/components/workspace/logo.tsx b/web/core/components/workspace/logo.tsx index 4407205e07f..460e076c5fc 100644 --- a/web/core/components/workspace/logo.tsx +++ b/web/core/components/workspace/logo.tsx @@ -1,5 +1,6 @@ +// plane utils +import { cn } from "@plane/utils"; // helpers -import { cn } from "@plane/editor"; import { getFileURL } from "@/helpers/file.helper"; type Props = { diff --git a/yarn.lock b/yarn.lock index 26849e4e990..ca19c7554ad 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5400,11 +5400,6 @@ clone@^2.1.2: resolved "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz" integrity sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w== -clsx@^1.2.1: - version "1.2.1" - resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz" - integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== - clsx@^2.0.0, clsx@^2.1.0, clsx@^2.1.1: version "2.1.1" resolved "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz" @@ -11271,16 +11266,7 @@ streamx@^2.15.0, streamx@^2.20.0: optionalDependencies: bare-events "^2.2.0" -"string-width-cjs@npm:string-width@^4.2.0": - version "4.2.3" - resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz" - integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== - dependencies: - emoji-regex "^8.0.0" - is-fullwidth-code-point "^3.0.0" - strip-ansi "^6.0.1" - -string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: +"string-width-cjs@npm:string-width@^4.2.0", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3: version "4.2.3" resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz" integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g== @@ -11368,14 +11354,7 @@ string_decoder@^1.1.1, string_decoder@^1.3.0: dependencies: safe-buffer "~5.2.0" -"strip-ansi-cjs@npm:strip-ansi@^6.0.1": - version "6.0.1" - resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz" - integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== - dependencies: - ansi-regex "^5.0.1" - -strip-ansi@^6.0.0, strip-ansi@^6.0.1: +"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1: version "6.0.1" resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz" integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A== @@ -11516,12 +11495,7 @@ tabbable@^6.0.0: resolved "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz" integrity sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew== -tailwind-merge@^1.14.0: - version "1.14.0" - resolved "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-1.14.0.tgz" - integrity sha512-3mFKyCo/MBcgyOTlrY8T7odzZFx+w+qKSMAmdFzRvqBfLlSigU6TZnlFHK0lkMwj9Bj8OYU+9yW9lmGuS0QEnQ== - -tailwind-merge@^2.0.0: +tailwind-merge@^2.0.0, tailwind-merge@^2.5.5: version "2.5.5" resolved "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-2.5.5.tgz" integrity sha512-0LXunzzAZzo0tEPxV3I297ffKZPlKDrjj7NXphC8V5ak9yHC5zRmxnOe2m/Rd/7ivsOMJe3JZ2JVocoDdQTRBA== @@ -12631,16 +12605,7 @@ word-wrap@^1.2.5: resolved "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz" integrity sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA== -"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0": - version "7.0.0" - resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz" - integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q== - dependencies: - ansi-styles "^4.0.0" - string-width "^4.1.0" - strip-ansi "^6.0.0" - -wrap-ansi@^7.0.0: +"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0: version "7.0.0" resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz" integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==