From c153bc8c41a37847fc9578d0de680a617fd7b1eb Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Tue, 26 Aug 2025 13:38:33 +0000 Subject: [PATCH 1/7] feat: extract PanelCard from ChartCard for reusability - Create base PanelCard and PanelCardItem components in UI package - Refactor ChartCard to use PanelCard as foundation while keeping legend functionality - Add headerActions prop to PanelCard for extensibility - Maintain backward compatibility for existing ChartCard usage - Export PanelCard and PanelCardItem from UI card components Co-Authored-By: eunjae@cal.com --- .../insights/components/ChartCard.tsx | 55 +++------------ packages/ui/components/card/PanelCard.tsx | 69 +++++++++++++++++++ packages/ui/components/card/index.ts | 1 + 3 files changed, 78 insertions(+), 47 deletions(-) create mode 100644 packages/ui/components/card/PanelCard.tsx diff --git a/packages/features/insights/components/ChartCard.tsx b/packages/features/insights/components/ChartCard.tsx index 63ca947923dec9..613cb6e70ba07d 100644 --- a/packages/features/insights/components/ChartCard.tsx +++ b/packages/features/insights/components/ChartCard.tsx @@ -1,9 +1,9 @@ "use client"; -import { Fragment, type ReactNode } from "react"; +import { Fragment } from "react"; import classNames from "@calcom/ui/classNames"; -import { Button } from "@calcom/ui/components/button"; +import { PanelCard, PanelCardItem } from "@calcom/ui/components/card"; import { Tooltip } from "@calcom/ui/components/tooltip"; type LegendItem = { @@ -28,56 +28,17 @@ export function ChartCard({ legendSize?: LegendSize; children: React.ReactNode; }) { - return ( -
-
- {typeof title === "string" ? ( -

{title}

- ) : ( - title - )} -
- {legend && legend.length > 0 && } - {cta && ( - - )} -
-
-
- {subtitle && ( -

- {subtitle} -

- )} - {children} -
-
- ); -} + const legendComponent = legend && legend.length > 0 ? : null; -export function ChartCardItem({ - count, - className, - children, -}: { - count?: number | string; - className?: string; - children: ReactNode; -}) { return ( -
-
{children}
- {count !== undefined &&
{count}
} -
+ + {children} + ); } +export { PanelCardItem as ChartCardItem }; + function Legend({ items, size = "default" }: { items: LegendItem[]; size?: LegendSize }) { return (
diff --git a/packages/ui/components/card/PanelCard.tsx b/packages/ui/components/card/PanelCard.tsx new file mode 100644 index 00000000000000..cd74dc9a637c35 --- /dev/null +++ b/packages/ui/components/card/PanelCard.tsx @@ -0,0 +1,69 @@ +"use client"; + +import { type ReactNode } from "react"; + +import classNames from "@calcom/ui/classNames"; +import { Button } from "@calcom/ui/components/button"; + +export function PanelCard({ + title, + subtitle, + cta, + headerActions, + children, +}: { + title: string | React.ReactNode; + subtitle?: string; + cta?: { label: string; onClick: () => void }; + headerActions?: React.ReactNode; + children: React.ReactNode; +}) { + return ( +
+
+ {typeof title === "string" ? ( +

{title}

+ ) : ( + title + )} +
+ {headerActions} + {cta && ( + + )} +
+
+
+ {subtitle && ( +

+ {subtitle} +

+ )} + {children} +
+
+ ); +} + +export function PanelCardItem({ + count, + className, + children, +}: { + count?: number | string; + className?: string; + children: ReactNode; +}) { + return ( +
+
{children}
+ {count !== undefined &&
{count}
} +
+ ); +} diff --git a/packages/ui/components/card/index.ts b/packages/ui/components/card/index.ts index 3412abfa93b2d7..11d3b95aadb923 100644 --- a/packages/ui/components/card/index.ts +++ b/packages/ui/components/card/index.ts @@ -2,3 +2,4 @@ export { default as Card } from "./Card"; export type { BaseCardProps } from "./Card"; export { StepCard } from "./StepCard"; export { default as FormCard } from "./FormCard"; +export { PanelCard, PanelCardItem } from "./PanelCard"; From de418731eedaa00d2e009b9d4e6a548773f4144e Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Tue, 26 Aug 2025 13:38:58 +0000 Subject: [PATCH 2/7] chore: update yarn.lock after dependency resolution Co-Authored-By: eunjae@cal.com --- yarn.lock | 26 ++++++++++++++++++++++++++ 1 file changed, 26 insertions(+) diff --git a/yarn.lock b/yarn.lock index fdbc4dfd91b3c0..ef36aed2aca53d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3066,6 +3066,32 @@ __metadata: languageName: unknown linkType: soft +"@calcom/exchange2013calendar@workspace:packages/app-store/exchange2013calendar": + version: 0.0.0-use.local + resolution: "@calcom/exchange2013calendar@workspace:packages/app-store/exchange2013calendar" + dependencies: + "@calcom/lib": "*" + "@calcom/prisma": "*" + "@calcom/types": "*" + "@calcom/ui": "*" + ews-javascript-api: ^0.11.0 + react-hook-form: ^7.43.3 + languageName: unknown + linkType: soft + +"@calcom/exchange2016calendar@workspace:packages/app-store/exchange2016calendar": + version: 0.0.0-use.local + resolution: "@calcom/exchange2016calendar@workspace:packages/app-store/exchange2016calendar" + dependencies: + "@calcom/lib": "*" + "@calcom/prisma": "*" + "@calcom/types": "*" + "@calcom/ui": "*" + ews-javascript-api: ^0.11.0 + react-hook-form: ^7.43.3 + languageName: unknown + linkType: soft + "@calcom/exchangecalendar@workspace:packages/app-store/exchangecalendar": version: 0.0.0-use.local resolution: "@calcom/exchangecalendar@workspace:packages/app-store/exchangecalendar" From 29bbf05d56e2ddb340bc3bbb249aa16b9ef20d6f Mon Sep 17 00:00:00 2001 From: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Date: Tue, 26 Aug 2025 14:00:55 +0000 Subject: [PATCH 3/7] refactor: rename prop from actions to headerContent - Rename 'actions' prop to 'headerContent' in PanelCard component - Update ChartCard to use new 'headerContent' prop name - More accurate naming since content can be text or other elements, not just buttons Co-Authored-By: eunjae@cal.com --- packages/features/insights/components/ChartCard.tsx | 2 +- packages/ui/components/card/PanelCard.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/features/insights/components/ChartCard.tsx b/packages/features/insights/components/ChartCard.tsx index 613cb6e70ba07d..21ac4ae5881a98 100644 --- a/packages/features/insights/components/ChartCard.tsx +++ b/packages/features/insights/components/ChartCard.tsx @@ -31,7 +31,7 @@ export function ChartCard({ const legendComponent = legend && legend.length > 0 ? : null; return ( - + {children} ); diff --git a/packages/ui/components/card/PanelCard.tsx b/packages/ui/components/card/PanelCard.tsx index cd74dc9a637c35..6c8a3651815e82 100644 --- a/packages/ui/components/card/PanelCard.tsx +++ b/packages/ui/components/card/PanelCard.tsx @@ -9,13 +9,13 @@ export function PanelCard({ title, subtitle, cta, - headerActions, + headerContent, children, }: { title: string | React.ReactNode; subtitle?: string; cta?: { label: string; onClick: () => void }; - headerActions?: React.ReactNode; + headerContent?: React.ReactNode; children: React.ReactNode; }) { return ( @@ -27,7 +27,7 @@ export function PanelCard({ title )}
- {headerActions} + {headerContent} {cta && (
); } - -export function PanelCardItem({ - count, - className, - children, -}: { - count?: number | string; - className?: string; - children: ReactNode; -}) { - return ( -
-
{children}
- {count !== undefined &&
{count}
} -
- ); -} diff --git a/packages/ui/components/card/index.ts b/packages/ui/components/card/index.ts index 11d3b95aadb923..b733fadda4eef3 100644 --- a/packages/ui/components/card/index.ts +++ b/packages/ui/components/card/index.ts @@ -2,4 +2,4 @@ export { default as Card } from "./Card"; export type { BaseCardProps } from "./Card"; export { StepCard } from "./StepCard"; export { default as FormCard } from "./FormCard"; -export { PanelCard, PanelCardItem } from "./PanelCard"; +export { PanelCard } from "./PanelCard"; diff --git a/yarn.lock b/yarn.lock index ef36aed2aca53d..821eb65cf7d409 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2493,7 +2493,7 @@ __metadata: "@axiomhq/winston": ^1.2.0 "@calcom/platform-constants": "*" "@calcom/platform-enums": "*" - "@calcom/platform-libraries": "npm:@calcom/platform-libraries@0.0.333" + "@calcom/platform-libraries": "npm:@calcom/platform-libraries@0.0.321" "@calcom/platform-types": "*" "@calcom/platform-utils": "*" "@calcom/prisma": "*" @@ -3553,13 +3553,13 @@ __metadata: languageName: unknown linkType: soft -"@calcom/platform-libraries@npm:@calcom/platform-libraries@0.0.333": - version: 0.0.333 - resolution: "@calcom/platform-libraries@npm:0.0.333" +"@calcom/platform-libraries@npm:@calcom/platform-libraries@0.0.321": + version: 0.0.321 + resolution: "@calcom/platform-libraries@npm:0.0.321" dependencies: "@calcom/features": "*" "@calcom/lib": "*" - checksum: 321c792aeb36ec69b7a02756ac550736bd9a71e4544fcebd9ab625bc2132edd5bf3e86295af05d797ff82de0ec35f3954c7409543e4325b7cbbbb55ce786ef60 + checksum: 634b092311d9952d6ce1eec3a55fc18ab314d282d087ca7d9e9baf3f53f1e718e81d2b2cb6613f377d129c864290eb14f89770cfdd0c14e8968a34db093163f5 languageName: node linkType: hard @@ -4014,8 +4014,8 @@ __metadata: "@calcom/tsconfig": "*" "@calcom/types": "*" "@calcom/ui": "*" - "@daily-co/daily-js": ^0.83.1 - "@daily-co/daily-react": ^0.23.2 + "@daily-co/daily-js": ^0.76.0 + "@daily-co/daily-react": ^0.22.0 "@dub/analytics": ^0.0.27 "@dub/embed-core": ^0.0.10 "@dub/embed-react": ^0.0.10 @@ -4119,7 +4119,6 @@ __metadata: node-mocks-http: ^1.11.0 nodemailer: ^6.7.8 nuqs: ^1.20.0 - openid-client: 6.5.0 otplib: ^12.0.1 postcss: ^8.4.18 posthog-js: ^1.164.1 @@ -4619,22 +4618,22 @@ __metadata: languageName: node linkType: hard -"@daily-co/daily-js@npm:^0.83.1": - version: 0.83.1 - resolution: "@daily-co/daily-js@npm:0.83.1" +"@daily-co/daily-js@npm:^0.76.0": + version: 0.76.0 + resolution: "@daily-co/daily-js@npm:0.76.0" dependencies: "@babel/runtime": ^7.12.5 "@sentry/browser": ^8.33.1 bowser: ^2.8.1 dequal: ^2.0.3 events: ^3.1.0 - checksum: bbd3bca7b531aba1607e47f25e851e553f618072630218c07709f396003c831de370861edc82d25e6a97f04bf1cba19e7c1312adbba8e1d80051e711edbdcd48 + checksum: 3a7c144527800696b6b7fda6ddcb329b8a27d72ad234f6b0e3088389ec27406816319889d70d684ecb99c6d0efea0d53edeb0ecc0383ed6caaf2050763182ffe languageName: node linkType: hard -"@daily-co/daily-react@npm:^0.23.2": - version: 0.23.2 - resolution: "@daily-co/daily-react@npm:0.23.2" +"@daily-co/daily-react@npm:^0.22.0": + version: 0.22.0 + resolution: "@daily-co/daily-react@npm:0.22.0" dependencies: fast-deep-equal: ^3.1.3 lodash.throttle: ^4.1.1 @@ -4643,7 +4642,7 @@ __metadata: jotai: ^2 react: ^16.8 || ^17.0 || ^18.0 || ^19.0 react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 - checksum: ead01bb5b49e1756d901fed9a5011673d932b2697e0551eb7b9f26c6392bf8f495b60ba351bd9c4f867ec1d0eb9bce14dae682447493e1f4f643e434b59bb186 + checksum: c82e36b05fc905ad65cb9d16542790ce11b8ee43a8ec1eb081e8c74d8c12c7d14e1674f557028ed06ae49aef399117ba8278bbaa4f248d5aec2c2eb11e839e00 languageName: node linkType: hard @@ -21634,7 +21633,7 @@ __metadata: dependencies: "@changesets/changelog-github": ^0.5.1 "@changesets/cli": 2.29.4 - "@daily-co/daily-js": ^0.83.1 + "@daily-co/daily-js": ^0.76.0 "@evyweb/ioctopus": ^1.2.0 "@jetstreamapp/soql-parser-js": ^6.1.0 "@next/third-parties": ^14.2.5 From ee2b304387a4f8cdea42ecb8f6d9d323dfe82bd4 Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Tue, 26 Aug 2025 16:17:07 +0200 Subject: [PATCH 5/7] revert yarn.lock --- yarn.lock | 59 ++++++++++++++++--------------------------------------- 1 file changed, 17 insertions(+), 42 deletions(-) diff --git a/yarn.lock b/yarn.lock index 821eb65cf7d409..fdbc4dfd91b3c0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2493,7 +2493,7 @@ __metadata: "@axiomhq/winston": ^1.2.0 "@calcom/platform-constants": "*" "@calcom/platform-enums": "*" - "@calcom/platform-libraries": "npm:@calcom/platform-libraries@0.0.321" + "@calcom/platform-libraries": "npm:@calcom/platform-libraries@0.0.333" "@calcom/platform-types": "*" "@calcom/platform-utils": "*" "@calcom/prisma": "*" @@ -3066,32 +3066,6 @@ __metadata: languageName: unknown linkType: soft -"@calcom/exchange2013calendar@workspace:packages/app-store/exchange2013calendar": - version: 0.0.0-use.local - resolution: "@calcom/exchange2013calendar@workspace:packages/app-store/exchange2013calendar" - dependencies: - "@calcom/lib": "*" - "@calcom/prisma": "*" - "@calcom/types": "*" - "@calcom/ui": "*" - ews-javascript-api: ^0.11.0 - react-hook-form: ^7.43.3 - languageName: unknown - linkType: soft - -"@calcom/exchange2016calendar@workspace:packages/app-store/exchange2016calendar": - version: 0.0.0-use.local - resolution: "@calcom/exchange2016calendar@workspace:packages/app-store/exchange2016calendar" - dependencies: - "@calcom/lib": "*" - "@calcom/prisma": "*" - "@calcom/types": "*" - "@calcom/ui": "*" - ews-javascript-api: ^0.11.0 - react-hook-form: ^7.43.3 - languageName: unknown - linkType: soft - "@calcom/exchangecalendar@workspace:packages/app-store/exchangecalendar": version: 0.0.0-use.local resolution: "@calcom/exchangecalendar@workspace:packages/app-store/exchangecalendar" @@ -3553,13 +3527,13 @@ __metadata: languageName: unknown linkType: soft -"@calcom/platform-libraries@npm:@calcom/platform-libraries@0.0.321": - version: 0.0.321 - resolution: "@calcom/platform-libraries@npm:0.0.321" +"@calcom/platform-libraries@npm:@calcom/platform-libraries@0.0.333": + version: 0.0.333 + resolution: "@calcom/platform-libraries@npm:0.0.333" dependencies: "@calcom/features": "*" "@calcom/lib": "*" - checksum: 634b092311d9952d6ce1eec3a55fc18ab314d282d087ca7d9e9baf3f53f1e718e81d2b2cb6613f377d129c864290eb14f89770cfdd0c14e8968a34db093163f5 + checksum: 321c792aeb36ec69b7a02756ac550736bd9a71e4544fcebd9ab625bc2132edd5bf3e86295af05d797ff82de0ec35f3954c7409543e4325b7cbbbb55ce786ef60 languageName: node linkType: hard @@ -4014,8 +3988,8 @@ __metadata: "@calcom/tsconfig": "*" "@calcom/types": "*" "@calcom/ui": "*" - "@daily-co/daily-js": ^0.76.0 - "@daily-co/daily-react": ^0.22.0 + "@daily-co/daily-js": ^0.83.1 + "@daily-co/daily-react": ^0.23.2 "@dub/analytics": ^0.0.27 "@dub/embed-core": ^0.0.10 "@dub/embed-react": ^0.0.10 @@ -4119,6 +4093,7 @@ __metadata: node-mocks-http: ^1.11.0 nodemailer: ^6.7.8 nuqs: ^1.20.0 + openid-client: 6.5.0 otplib: ^12.0.1 postcss: ^8.4.18 posthog-js: ^1.164.1 @@ -4618,22 +4593,22 @@ __metadata: languageName: node linkType: hard -"@daily-co/daily-js@npm:^0.76.0": - version: 0.76.0 - resolution: "@daily-co/daily-js@npm:0.76.0" +"@daily-co/daily-js@npm:^0.83.1": + version: 0.83.1 + resolution: "@daily-co/daily-js@npm:0.83.1" dependencies: "@babel/runtime": ^7.12.5 "@sentry/browser": ^8.33.1 bowser: ^2.8.1 dequal: ^2.0.3 events: ^3.1.0 - checksum: 3a7c144527800696b6b7fda6ddcb329b8a27d72ad234f6b0e3088389ec27406816319889d70d684ecb99c6d0efea0d53edeb0ecc0383ed6caaf2050763182ffe + checksum: bbd3bca7b531aba1607e47f25e851e553f618072630218c07709f396003c831de370861edc82d25e6a97f04bf1cba19e7c1312adbba8e1d80051e711edbdcd48 languageName: node linkType: hard -"@daily-co/daily-react@npm:^0.22.0": - version: 0.22.0 - resolution: "@daily-co/daily-react@npm:0.22.0" +"@daily-co/daily-react@npm:^0.23.2": + version: 0.23.2 + resolution: "@daily-co/daily-react@npm:0.23.2" dependencies: fast-deep-equal: ^3.1.3 lodash.throttle: ^4.1.1 @@ -4642,7 +4617,7 @@ __metadata: jotai: ^2 react: ^16.8 || ^17.0 || ^18.0 || ^19.0 react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 - checksum: c82e36b05fc905ad65cb9d16542790ce11b8ee43a8ec1eb081e8c74d8c12c7d14e1674f557028ed06ae49aef399117ba8278bbaa4f248d5aec2c2eb11e839e00 + checksum: ead01bb5b49e1756d901fed9a5011673d932b2697e0551eb7b9f26c6392bf8f495b60ba351bd9c4f867ec1d0eb9bce14dae682447493e1f4f643e434b59bb186 languageName: node linkType: hard @@ -21633,7 +21608,7 @@ __metadata: dependencies: "@changesets/changelog-github": ^0.5.1 "@changesets/cli": 2.29.4 - "@daily-co/daily-js": ^0.76.0 + "@daily-co/daily-js": ^0.83.1 "@evyweb/ioctopus": ^1.2.0 "@jetstreamapp/soql-parser-js": ^6.1.0 "@next/third-parties": ^14.2.5 From c004169ef38b627f3f8565237097290ac04b0951 Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Tue, 26 Aug 2025 16:34:50 +0200 Subject: [PATCH 6/7] fix type error --- packages/features/insights/components/ChartCard.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/features/insights/components/ChartCard.tsx b/packages/features/insights/components/ChartCard.tsx index 31f55c7c0d4bcf..b32833ee482730 100644 --- a/packages/features/insights/components/ChartCard.tsx +++ b/packages/features/insights/components/ChartCard.tsx @@ -1,6 +1,6 @@ "use client"; -import { Fragment } from "react"; +import { Fragment, type ReactNode } from "react"; import classNames from "@calcom/ui/classNames"; import { PanelCard } from "@calcom/ui/components/card"; @@ -21,12 +21,12 @@ export function ChartCard({ legendSize, children, }: { - title: string | React.ReactNode; + title: string | ReactNode; subtitle?: string; cta?: { label: string; onClick: () => void }; legend?: Array; legendSize?: LegendSize; - children: React.ReactNode; + children: ReactNode; }) { const legendComponent = legend && legend.length > 0 ? : null; From c1f3205d60729b66df4a14257466f6e054164302 Mon Sep 17 00:00:00 2001 From: Eunjae Lee Date: Tue, 26 Aug 2025 17:01:46 +0200 Subject: [PATCH 7/7] type fix --- packages/ui/components/card/PanelCard.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ui/components/card/PanelCard.tsx b/packages/ui/components/card/PanelCard.tsx index 097e10c6dc5790..1339d7d949c2dc 100644 --- a/packages/ui/components/card/PanelCard.tsx +++ b/packages/ui/components/card/PanelCard.tsx @@ -1,4 +1,4 @@ -"use client"; +import type { ReactNode } from "react"; import { Button } from "@calcom/ui/components/button"; @@ -9,11 +9,11 @@ export function PanelCard({ headerContent, children, }: { - title: string | React.ReactNode; + title: string | ReactNode; subtitle?: string; cta?: { label: string; onClick: () => void }; - headerContent?: React.ReactNode; - children: React.ReactNode; + headerContent?: ReactNode; + children: ReactNode; }) { return (