diff --git a/packages/propel/package.json b/packages/propel/package.json index 648a630ac31..e023abeee03 100644 --- a/packages/propel/package.json +++ b/packages/propel/package.json @@ -33,14 +33,14 @@ "@plane/constants": "workspace:*", "@plane/hooks": "workspace:*", "@plane/types": "workspace:*", - "@plane/utils": "workspace:*", "@tanstack/react-table": "^8.21.3", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "lucide-react": "^0.469.0", "react": "^18.3.1", "react-dom": "^18.3.1", - "recharts": "^2.15.1" + "recharts": "^2.15.1", + "tailwind-merge": "^3.3.1" }, "devDependencies": { "@plane/eslint-config": "workspace:*", diff --git a/packages/propel/src/avatar/avatar.tsx b/packages/propel/src/avatar/avatar.tsx index 305b4033221..ec19dbf238c 100644 --- a/packages/propel/src/avatar/avatar.tsx +++ b/packages/propel/src/avatar/avatar.tsx @@ -1,7 +1,6 @@ import React from "react"; import { Avatar as AvatarPrimitive } from "@base-ui-components/react/avatar"; -// utils -import { cn } from "@plane/utils"; +import { cn } from "../utils/classname"; export type TAvatarSize = "sm" | "md" | "base" | "lg" | number; diff --git a/packages/propel/src/card/card.tsx b/packages/propel/src/card/card.tsx index f70e95cd4ea..a58ec95d2a9 100644 --- a/packages/propel/src/card/card.tsx +++ b/packages/propel/src/card/card.tsx @@ -1,5 +1,5 @@ import * as React from "react"; -import { cn } from "@plane/utils"; +import { cn } from "../utils/classname"; import { ECardDirection, ECardSpacing, diff --git a/packages/propel/src/charts/bar-chart/bar.tsx b/packages/propel/src/charts/bar-chart/bar.tsx index 49ccf3de794..558e73ad603 100644 --- a/packages/propel/src/charts/bar-chart/bar.tsx +++ b/packages/propel/src/charts/bar-chart/bar.tsx @@ -2,7 +2,7 @@ import React from "react"; // plane imports import { TBarChartShapeVariant, TBarItem, TChartData } from "@plane/types"; -import { cn } from "@plane/utils"; +import { cn } from "../../utils/classname"; // Constants const MIN_BAR_HEIGHT_FOR_INTERNAL_TEXT = 14; // Minimum height required to show text inside bar diff --git a/packages/propel/src/charts/components/legend.tsx b/packages/propel/src/charts/components/legend.tsx index 94ca2a2bfe9..8ca12f0459f 100644 --- a/packages/propel/src/charts/components/legend.tsx +++ b/packages/propel/src/charts/components/legend.tsx @@ -2,7 +2,7 @@ import React from "react"; import { LegendProps } from "recharts"; // plane imports import { TChartLegend } from "@plane/types"; -import { cn } from "@plane/utils"; +import { cn } from "../../utils/classname"; export const getLegendProps = (args: TChartLegend): LegendProps => { const { align, layout, verticalAlign } = args; diff --git a/packages/propel/src/charts/components/tooltip.tsx b/packages/propel/src/charts/components/tooltip.tsx index 44ed5177442..c978cd7e2d0 100644 --- a/packages/propel/src/charts/components/tooltip.tsx +++ b/packages/propel/src/charts/components/tooltip.tsx @@ -2,8 +2,7 @@ import React from "react"; import { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent"; // plane imports import { Card, ECardSpacing } from "../../card"; - -import { cn } from "@plane/utils"; +import { cn } from "../../utils/classname"; type Props = { active: boolean | undefined; diff --git a/packages/propel/src/charts/tree-map/map-content.tsx b/packages/propel/src/charts/tree-map/map-content.tsx index 0e4a6e2f352..1a79a8df20b 100644 --- a/packages/propel/src/charts/tree-map/map-content.tsx +++ b/packages/propel/src/charts/tree-map/map-content.tsx @@ -1,7 +1,7 @@ import React, { useMemo } from "react"; // plane imports import { TBottomSectionConfig, TContentVisibility, TTopSectionConfig } from "@plane/types"; -import { cn } from "@plane/utils"; +import { cn } from "../../utils/classname"; const LAYOUT = { PADDING: 2, diff --git a/packages/propel/src/charts/tree-map/root.tsx b/packages/propel/src/charts/tree-map/root.tsx index 7add4a6b6b7..1dc874f07cb 100644 --- a/packages/propel/src/charts/tree-map/root.tsx +++ b/packages/propel/src/charts/tree-map/root.tsx @@ -2,8 +2,8 @@ import React from "react"; import { Treemap, ResponsiveContainer, Tooltip } from "recharts"; // plane imports import { TreeMapChartProps } from "@plane/types"; -import { cn } from "@plane/utils"; // local imports +import { cn } from "../../utils/classname"; import { CustomTreeMapContent } from "./map-content"; import { TreeMapTooltip } from "./tooltip"; diff --git a/packages/propel/src/combobox/combobox.tsx b/packages/propel/src/combobox/combobox.tsx index b5b571f5bcc..7a132b9ac6c 100644 --- a/packages/propel/src/combobox/combobox.tsx +++ b/packages/propel/src/combobox/combobox.tsx @@ -1,7 +1,7 @@ import * as React from "react"; -import { cn } from "@plane/utils"; import { Command } from "../command/command"; import { Popover } from "../popover/root"; +import { cn } from "../utils/classname"; export interface ComboboxOption { value: unknown; diff --git a/packages/propel/src/command/command.tsx b/packages/propel/src/command/command.tsx index e691e3d76fc..25c977c3e98 100644 --- a/packages/propel/src/command/command.tsx +++ b/packages/propel/src/command/command.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import { Command as CommandPrimitive } from "cmdk"; import { SearchIcon } from "lucide-react"; -import { cn } from "@plane/utils"; +import { cn } from "../utils/classname"; function CommandComponent({ className, ...props }: React.ComponentProps) { return ; diff --git a/packages/propel/src/dialog/root.tsx b/packages/propel/src/dialog/root.tsx index f981c19fb5c..580e4359f0b 100644 --- a/packages/propel/src/dialog/root.tsx +++ b/packages/propel/src/dialog/root.tsx @@ -2,7 +2,7 @@ import * as React from "react"; import { Dialog as BaseDialog } from "@base-ui-components/react"; -import { cn } from "@plane/utils"; +import { cn } from "../utils/classname"; // enums diff --git a/packages/propel/src/menu/menu.tsx b/packages/propel/src/menu/menu.tsx index b67375e20a0..1510f6b8dcd 100644 --- a/packages/propel/src/menu/menu.tsx +++ b/packages/propel/src/menu/menu.tsx @@ -1,8 +1,7 @@ import * as React from "react"; import { Menu as BaseMenu } from "@base-ui-components/react/menu"; import { ChevronDown, ChevronRight, MoreHorizontal } from "lucide-react"; -// plane imports -import { cn } from "@plane/utils"; +import { cn } from "../utils/classname"; import { TMenuProps, TSubMenuProps, TMenuItemProps } from "./types"; // Context for main menu to communicate with submenus diff --git a/packages/propel/src/switch/root.tsx b/packages/propel/src/switch/root.tsx index 19a37b89608..d202a923521 100644 --- a/packages/propel/src/switch/root.tsx +++ b/packages/propel/src/switch/root.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { Switch as BaseSwitch } from "@base-ui-components/react/switch"; -import { cn } from "@plane/utils"; +import { cn } from "../utils/classname"; interface IToggleSwitchProps { value: boolean; diff --git a/packages/propel/src/table/core.tsx b/packages/propel/src/table/core.tsx index cb0156b562e..074bb7f3704 100644 --- a/packages/propel/src/table/core.tsx +++ b/packages/propel/src/table/core.tsx @@ -1,6 +1,6 @@ import * as React from "react"; -import { cn } from "@plane/utils"; +import { cn } from "../utils/classname"; const Table = React.forwardRef, React.ComponentPropsWithoutRef<"table">>( ({ className, ...props }, ref) => ( diff --git a/packages/propel/src/tabs/list.tsx b/packages/propel/src/tabs/list.tsx index 6155b10cebd..cdb177dbf57 100644 --- a/packages/propel/src/tabs/list.tsx +++ b/packages/propel/src/tabs/list.tsx @@ -2,7 +2,7 @@ import React, { FC } from "react"; import { Tabs as BaseTabs } from "@base-ui-components/react/tabs"; import { LucideProps } from "lucide-react"; // helpers -import { cn } from "@plane/utils"; +import { cn } from "../utils/classname"; export type TabListItem = { key: string; diff --git a/packages/propel/src/tabs/tabs.tsx b/packages/propel/src/tabs/tabs.tsx index ad40370cf33..3984ad6659f 100644 --- a/packages/propel/src/tabs/tabs.tsx +++ b/packages/propel/src/tabs/tabs.tsx @@ -1,9 +1,7 @@ import React, { FC, useEffect, useState } from "react"; import { Tabs as BaseTabs } from "@base-ui-components/react/tabs"; -// helpers import { useLocalStorage } from "@plane/hooks"; -import { cn } from "@plane/utils"; -// types +import { cn } from "../utils/classname"; import { TabList, TabListItem } from "./list"; export type TabContent = { diff --git a/packages/propel/src/tooltip/root.tsx b/packages/propel/src/tooltip/root.tsx index 3f71950f035..aeb6c52c039 100644 --- a/packages/propel/src/tooltip/root.tsx +++ b/packages/propel/src/tooltip/root.tsx @@ -1,6 +1,6 @@ import * as React from "react"; import { Tooltip as BaseTooltip } from "@base-ui-components/react/tooltip"; -import { cn } from "@plane/utils"; +import { cn } from "../utils/classname"; import { TPlacement, TSide, TAlign, convertPlacementToSideAndAlign } from "../utils/placement"; type ITooltipProps = { diff --git a/packages/propel/src/utils/classname.tsx b/packages/propel/src/utils/classname.tsx index 2daa71e6268..a0b59291248 100644 --- a/packages/propel/src/utils/classname.tsx +++ b/packages/propel/src/utils/classname.tsx @@ -1,3 +1,4 @@ -import { clsx, type ClassValue } from "clsx"; +import clsx, { type ClassValue } from "clsx"; +import { twMerge } from "tailwind-merge"; -export const cn = (...inputs: ClassValue[]) => clsx(inputs); +export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs)); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 36dc0088e3e..7d60c48e02b 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -961,9 +961,6 @@ importers: '@plane/types': specifier: workspace:* version: link:../types - '@plane/utils': - specifier: workspace:* - version: link:../utils '@tanstack/react-table': specifier: ^8.21.3 version: 8.21.3(react-dom@18.3.1(react@18.3.1))(react@18.3.1) @@ -985,6 +982,9 @@ importers: recharts: specifier: ^2.15.1 version: 2.15.4(react-dom@18.3.1(react@18.3.1))(react@18.3.1) + tailwind-merge: + specifier: ^3.3.1 + version: 3.3.1 devDependencies: '@plane/eslint-config': specifier: workspace:* @@ -7226,6 +7226,9 @@ packages: tailwind-merge@2.6.0: resolution: {integrity: sha512-P+Vu1qXfzediirmHOC3xKGAYeZtPcV9g76X+xg2FD4tYgR71ewMA35Y3sCz3zhiN/dwefRpJX0yBcgwi1fXNQA==} + tailwind-merge@3.3.1: + resolution: {integrity: sha512-gBXpgUm/3rp1lMZZrM/w7D8GKqshif0zAymAhbCyIt8KMe+0v9DQ7cdYLR4FHH/cKpdTXb+A/tKKU3eolfsI+g==} + tailwindcss-animate@1.0.7: resolution: {integrity: sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==} peerDependencies: @@ -14550,6 +14553,8 @@ snapshots: tailwind-merge@2.6.0: {} + tailwind-merge@3.3.1: {} + tailwindcss-animate@1.0.7(tailwindcss@3.4.17(ts-node@10.9.2(@swc/core@1.13.3(@swc/helpers@0.5.17))(@types/node@22.17.2)(typescript@5.8.3))): dependencies: tailwindcss: 3.4.17(ts-node@10.9.2(@swc/core@1.13.3(@swc/helpers@0.5.17))(@types/node@22.17.2)(typescript@5.8.3))