From 2b78ee82c84b787061a7d8b601b39fa856ba9da9 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Fri, 22 Aug 2025 18:23:59 +0530 Subject: [PATCH 1/5] feat: add card component to propel package and update tooltip imports --- packages/propel/src/card/card.tsx | 41 +++++++++++++++++++++++++ packages/propel/src/card/helper.tsx | 36 ++++++++++++++++++++++ packages/propel/src/card/index.ts | 1 + packages/propel/src/seperator/index.tsx | 17 ++++++++++ 4 files changed, 95 insertions(+) create mode 100644 packages/propel/src/card/card.tsx create mode 100644 packages/propel/src/card/helper.tsx create mode 100644 packages/propel/src/card/index.ts create mode 100644 packages/propel/src/seperator/index.tsx diff --git a/packages/propel/src/card/card.tsx b/packages/propel/src/card/card.tsx new file mode 100644 index 00000000000..7f788d85a1b --- /dev/null +++ b/packages/propel/src/card/card.tsx @@ -0,0 +1,41 @@ +import * as React from "react"; +import { cn } from "@plane/utils"; +import { + ECardDirection, + ECardSpacing, + ECardVariant, + getCardStyle, + TCardDirection, + TCardSpacing, + TCardVariant, +} from "./helper"; + +export interface CardProps { + variant?: TCardVariant; + spacing?: TCardSpacing; + direction?: TCardDirection; + className?: string; + children: React.ReactNode; +} + +const Card = React.forwardRef((props, ref) => { + const { + variant = ECardVariant.WITH_SHADOW, + direction = ECardDirection.COLUMN, + className = "", + spacing = ECardSpacing.LG, + children, + ...rest + } = props; + + const style = getCardStyle(variant, spacing, direction); + return ( +
+ {children} +
+ ); +}); + +Card.displayName = "plane-ui-card"; + +export { Card, ECardVariant, ECardSpacing, ECardDirection }; diff --git a/packages/propel/src/card/helper.tsx b/packages/propel/src/card/helper.tsx new file mode 100644 index 00000000000..8b80d0d9330 --- /dev/null +++ b/packages/propel/src/card/helper.tsx @@ -0,0 +1,36 @@ +export enum ECardVariant { + WITHOUT_SHADOW = "without-shadow", + WITH_SHADOW = "with-shadow", +} +export enum ECardDirection { + ROW = "row", + COLUMN = "column", +} +export enum ECardSpacing { + SM = "sm", + LG = "lg", +} +export type TCardVariant = ECardVariant.WITHOUT_SHADOW | ECardVariant.WITH_SHADOW; +export type TCardDirection = ECardDirection.ROW | ECardDirection.COLUMN; +export type TCardSpacing = ECardSpacing.SM | ECardSpacing.LG; + +export interface ICardProperties { + [key: string]: string; +} + +const DEFAULT_STYLE = + "bg-custom-background-100 rounded-lg border-[0.5px] border-custom-border-200 w-full flex flex-col"; +export const containerStyle: ICardProperties = { + [ECardVariant.WITHOUT_SHADOW]: "", + [ECardVariant.WITH_SHADOW]: "hover:shadow-custom-shadow-4xl duration-300", +}; +export const spacings = { + [ECardSpacing.SM]: "p-4", + [ECardSpacing.LG]: "p-6", +}; +export const directions = { + [ECardDirection.ROW]: "flex-row space-x-3", + [ECardDirection.COLUMN]: "flex-col space-y-3", +}; +export const getCardStyle = (variant: TCardVariant, spacing: TCardSpacing, direction: TCardDirection) => + DEFAULT_STYLE + " " + directions[direction] + " " + containerStyle[variant] + " " + spacings[spacing]; diff --git a/packages/propel/src/card/index.ts b/packages/propel/src/card/index.ts new file mode 100644 index 00000000000..1d243e763f7 --- /dev/null +++ b/packages/propel/src/card/index.ts @@ -0,0 +1 @@ +export * from "./card"; diff --git a/packages/propel/src/seperator/index.tsx b/packages/propel/src/seperator/index.tsx new file mode 100644 index 00000000000..c9209159697 --- /dev/null +++ b/packages/propel/src/seperator/index.tsx @@ -0,0 +1,17 @@ +import * as React from "react"; +import { Separator as SeparatorPrimitive } from "@base-ui-components/react/separator"; +import { cn } from "@plane/utils"; + +export function Separator({ className, ...props }: React.ComponentProps) { + return ( + + ); +} + \ No newline at end of file From f831af6cda6c69af19c989eb34ec33f1ccfb81dc Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Fri, 22 Aug 2025 18:24:09 +0530 Subject: [PATCH 2/5] refactor: remove @plane/ui dependency and update tooltip imports to use local card component --- packages/propel/package.json | 6 +++--- packages/propel/src/charts/components/tooltip.tsx | 3 ++- packages/propel/src/charts/pie-chart/tooltip.tsx | 2 +- packages/propel/src/charts/tree-map/tooltip.tsx | 2 +- pnpm-lock.yaml | 3 --- 5 files changed, 7 insertions(+), 9 deletions(-) diff --git a/packages/propel/package.json b/packages/propel/package.json index 11e6921eb6a..aaef2ed207f 100644 --- a/packages/propel/package.json +++ b/packages/propel/package.json @@ -22,14 +22,14 @@ "./command": "./src/command/index.ts", "./combobox": "./src/combobox/index.ts", "./tooltip": "./src/tooltip/index.ts", - "./styles/fonts": "./src/styles/fonts/index.css" + "./styles/fonts": "./src/styles/fonts/index.css", + "./card": "./src/card/index.ts" }, "dependencies": { "@base-ui-components/react": "^1.0.0-beta.2", "@plane/constants": "workspace:*", "@plane/hooks": "workspace:*", "@plane/types": "workspace:*", - "@plane/ui": "workspace:*", "@plane/utils": "workspace:*", "@tanstack/react-table": "^8.21.3", "class-variance-authority": "^0.7.1", @@ -46,4 +46,4 @@ "@types/react-dom": "18.3.0", "typescript": "5.8.3" } -} +} \ No newline at end of file diff --git a/packages/propel/src/charts/components/tooltip.tsx b/packages/propel/src/charts/components/tooltip.tsx index 8931f7c718a..44ed5177442 100644 --- a/packages/propel/src/charts/components/tooltip.tsx +++ b/packages/propel/src/charts/components/tooltip.tsx @@ -1,7 +1,8 @@ import React from "react"; import { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent"; // plane imports -import { Card, ECardSpacing } from "@plane/ui"; +import { Card, ECardSpacing } from "../../card"; + import { cn } from "@plane/utils"; type Props = { diff --git a/packages/propel/src/charts/pie-chart/tooltip.tsx b/packages/propel/src/charts/pie-chart/tooltip.tsx index 0a4a157de6a..537c0594afd 100644 --- a/packages/propel/src/charts/pie-chart/tooltip.tsx +++ b/packages/propel/src/charts/pie-chart/tooltip.tsx @@ -1,7 +1,7 @@ import React from "react"; import { NameType, Payload, ValueType } from "recharts/types/component/DefaultTooltipContent"; // plane imports -import { Card, ECardSpacing } from "@plane/ui"; +import { Card, ECardSpacing } from "../../card"; type Props = { dotColor?: string; diff --git a/packages/propel/src/charts/tree-map/tooltip.tsx b/packages/propel/src/charts/tree-map/tooltip.tsx index 55c6e687ead..17d4893fe57 100644 --- a/packages/propel/src/charts/tree-map/tooltip.tsx +++ b/packages/propel/src/charts/tree-map/tooltip.tsx @@ -1,6 +1,6 @@ import React from "react"; // plane imports -import { Card, ECardSpacing } from "@plane/ui"; +import { Card, ECardSpacing } from "../../card"; interface TreeMapTooltipProps { active: boolean | undefined; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index abe64c2dfc0..557c2007ce0 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -961,9 +961,6 @@ importers: '@plane/types': specifier: workspace:* version: link:../types - '@plane/ui': - specifier: workspace:* - version: link:../ui '@plane/utils': specifier: workspace:* version: link:../utils From 980d0b84d612fb7950f026c3c1b24725c816f5a4 Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Fri, 22 Aug 2025 18:33:59 +0530 Subject: [PATCH 3/5] fix: lint --- packages/propel/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/propel/package.json b/packages/propel/package.json index aaef2ed207f..47bde3dd60a 100644 --- a/packages/propel/package.json +++ b/packages/propel/package.json @@ -46,4 +46,4 @@ "@types/react-dom": "18.3.0", "typescript": "5.8.3" } -} \ No newline at end of file +} From e3b2b6106d094a567f52f41cb3e3dabc1f9812dc Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Fri, 22 Aug 2025 18:56:48 +0530 Subject: [PATCH 4/5] refactor: update import from @plane/ui to @plane/utils in command component --- packages/propel/src/command/command.tsx | 2 +- packages/propel/src/seperator/index.tsx | 17 ----------------- packages/ui/src/card/card.tsx | 2 +- 3 files changed, 2 insertions(+), 19 deletions(-) delete mode 100644 packages/propel/src/seperator/index.tsx diff --git a/packages/propel/src/command/command.tsx b/packages/propel/src/command/command.tsx index 25969aada8d..86577142354 100644 --- a/packages/propel/src/command/command.tsx +++ b/packages/propel/src/command/command.tsx @@ -1,7 +1,7 @@ import { Command as CommandPrimitive } from "cmdk"; import { SearchIcon } from "lucide-react"; import * as React from "react"; -import { cn } from "@plane/ui"; +import { cn } from "@plane/utils"; function CommandComponent({ className, ...props }: React.ComponentProps) { return ; diff --git a/packages/propel/src/seperator/index.tsx b/packages/propel/src/seperator/index.tsx deleted file mode 100644 index c9209159697..00000000000 --- a/packages/propel/src/seperator/index.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import * as React from "react"; -import { Separator as SeparatorPrimitive } from "@base-ui-components/react/separator"; -import { cn } from "@plane/utils"; - -export function Separator({ className, ...props }: React.ComponentProps) { - return ( - - ); -} - \ No newline at end of file diff --git a/packages/ui/src/card/card.tsx b/packages/ui/src/card/card.tsx index 63ca5fb64e3..01ef9da6a0e 100644 --- a/packages/ui/src/card/card.tsx +++ b/packages/ui/src/card/card.tsx @@ -10,7 +10,7 @@ import { TCardVariant, } from "./helper"; -export interface CardProps { +export interface CardProps extends React.HTMLAttributes { variant?: TCardVariant; spacing?: TCardSpacing; direction?: TCardDirection; From 90a02325f8322b6b6325235a078c23e3cb2f51ae Mon Sep 17 00:00:00 2001 From: Jayash Tripathy <76092296+JayashTripathy@users.noreply.github.com> Date: Mon, 25 Aug 2025 20:14:47 +0530 Subject: [PATCH 5/5] refactor: extend CardProps interface to include HTML attributes for better flexibility --- packages/propel/src/card/card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/propel/src/card/card.tsx b/packages/propel/src/card/card.tsx index 7f788d85a1b..f70e95cd4ea 100644 --- a/packages/propel/src/card/card.tsx +++ b/packages/propel/src/card/card.tsx @@ -10,7 +10,7 @@ import { TCardVariant, } from "./helper"; -export interface CardProps { +export interface CardProps extends React.HTMLAttributes { variant?: TCardVariant; spacing?: TCardSpacing; direction?: TCardDirection;