[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

@@ -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:*",

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;
 

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,

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

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;

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;

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,

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";
 

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;

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<typeof CommandPrimitive>) {
   return <CommandPrimitive data-slot="command" className={cn("", className)} {...props} />;

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
 

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

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;

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.ComponentRef<"table">, React.ComponentPropsWithoutRef<"table">>(
   ({ className, ...props }, ref) => (

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;

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 = {

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 = {

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));

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))