From aef465415b1786b5f9abdcd6eb0254794319005b Mon Sep 17 00:00:00 2001 From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com> Date: Thu, 28 Aug 2025 18:39:27 +0530 Subject: [PATCH] [WEB-4748] chore: propel utils (#7662) * chore: tailwind merge added to propel * chore: classname utils updated * chore: utils import alias added * chore: code refactor * chore: code refactor * chore: code refactor * chore: code refactor * chore: code refactor --- packages/propel/package.json | 4 ++-- packages/propel/src/avatar/avatar.tsx | 3 +-- packages/propel/src/card/card.tsx | 2 +- packages/propel/src/charts/bar-chart/bar.tsx | 2 +- packages/propel/src/charts/components/legend.tsx | 2 +- packages/propel/src/charts/components/tooltip.tsx | 3 +-- packages/propel/src/charts/tree-map/map-content.tsx | 2 +- packages/propel/src/charts/tree-map/root.tsx | 2 +- packages/propel/src/combobox/combobox.tsx | 2 +- packages/propel/src/command/command.tsx | 2 +- packages/propel/src/dialog/root.tsx | 2 +- packages/propel/src/menu/menu.tsx | 3 +-- packages/propel/src/switch/root.tsx | 2 +- packages/propel/src/table/core.tsx | 2 +- packages/propel/src/tabs/list.tsx | 2 +- packages/propel/src/tabs/tabs.tsx | 4 +--- packages/propel/src/tooltip/root.tsx | 2 +- packages/propel/src/utils/classname.tsx | 5 +++-- pnpm-lock.yaml | 11 ++++++++--- 19 files changed, 29 insertions(+), 28 deletions(-) diff --git a/packages/propel/package.json b/packages/propel/package.json index 648a630ac..e023abeee 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 305b40332..ec19dbf23 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 f70e95cd4..a58ec95d2 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 49ccf3de7..558e73ad6 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 94ca2a2bf..8ca12f045 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 44ed51774..c978cd7e2 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 0e4a6e2f3..1a79a8df2 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 7add4a6b6..1dc874f07 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 b5b571f5b..7a132b9ac 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 e691e3d76..25c977c3e 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 f981c19fb..580e4359f 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 b67375e20..1510f6b8d 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 19a37b896..d202a9235 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 cb0156b56..074bb7f37 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 6155b10ce..cdb177dbf 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 ad40370cf..3984ad665 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 3f71950f0..aeb6c52c0 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 2daa71e62..a0b592912 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 36dc0088e..7d60c48e0 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))