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