From 9a927206bd59a35290e7696760809440fb8b0e45 Mon Sep 17 00:00:00 2001 From: Rajiv Sahal Date: Mon, 26 Jan 2026 17:58:35 +0530 Subject: [PATCH] feat: atoms enhancements (#27224) --- apps/web/modules/apps/components/AppList.tsx | 7 +- .../modules/bookings/components/Booker.tsx | 2 + .../modules/bookings/components/EventMeta.tsx | 29 ++-- .../components/event-meta/Members.tsx | 12 +- .../assignment/EventTeamAssignmentTab.tsx | 43 +++--- packages/features/bookings/Booker/types.ts | 6 +- .../atoms/booker/BookerPlatformWrapper.tsx | 141 +++++------------- packages/platform/atoms/booker/types.ts | 7 +- .../ConferencingAppsViewPlatformWrapper.tsx | 85 ++++++++--- .../EventTeamAssignmentTabPlatformWrapper.tsx | 4 +- packages/platform/atoms/index.ts | 1 + .../base/src/pages/conferencing-apps.tsx | 19 ++- 12 files changed, 186 insertions(+), 170 deletions(-) diff --git a/apps/web/modules/apps/components/AppList.tsx b/apps/web/modules/apps/components/AppList.tsx index efb85347ad..21ab554333 100644 --- a/apps/web/modules/apps/components/AppList.tsx +++ b/apps/web/modules/apps/components/AppList.tsx @@ -36,6 +36,8 @@ interface AppListProps { data: RouterOutputs["viewer"]["apps"]["integrations"]; handleDisconnect: HandleDisconnect; listClassName?: string; + appCardClassName?: string; + appCardMenuClassName?: string; defaultConferencingApp: RouterOutputs["viewer"]["apps"]["getUsersDefaultConferencingApp"]; handleUpdateUserDefaultConferencingApp: (params: UpdateUsersDefaultConferencingAppParams) => void; handleBulkUpdateDefaultLocation: (params: BulkUpdatParams) => void; @@ -51,6 +53,8 @@ export const AppList = ({ handleDisconnect, variant, listClassName, + appCardClassName, + appCardMenuClassName, defaultConferencingApp, handleUpdateUserDefaultConferencingApp, handleBulkUpdateDefaultLocation, @@ -85,6 +89,7 @@ export const AppList = ({ slug={item.slug} invalidCredential={item?.invalidCredentialIds ? item.invalidCredentialIds.length > 0 : false} credentialOwner={item?.credentialOwner} + className={appCardClassName} actions={ !item.credentialOwner?.readOnly ? (
@@ -92,7 +97,7 @@ export const AppList = ({ - + {/* Show Google Meet if it's not installed and either no apps filter is provided or it's in the apps filter */} {installedApps && !installedApps.find((app) => app.slug === GOOGLE_MEET) && @@ -247,17 +272,23 @@ export const ConferencingAppsViewPlatformWrapper = ({ }; return ( - + } + CTA={ + + } borderInShellHeader={true}> <>
} + customLoader={} success={({ data }) => { if (!data.items.length) { return ( @@ -267,13 +298,27 @@ export const ConferencingAppsViewPlatformWrapper = ({ category: t("conferencing").toLowerCase(), })} description={t("no_category_apps_description_conferencing")} - buttonRaw={} + buttonRaw={ + + } + className={customClassNames?.emptyScreenClassName} + iconWrapperClassName={customClassNames?.emptyScreenIconWrapperClassName} + iconClassName={customClassNames?.emptyScreenIconClassName} /> ); } return ( + props: Omit ) => { // todo: implement attributes for platform orgs for segment - return ; + return ; }; export default EventTeamAssignmentTabPlatformWrapper; diff --git a/packages/platform/atoms/index.ts b/packages/platform/atoms/index.ts index 6e601cf21d..3fa67f4325 100644 --- a/packages/platform/atoms/index.ts +++ b/packages/platform/atoms/index.ts @@ -32,6 +32,7 @@ export { EventTypePlatformWrapper as EventTypeSettings } from "./event-types/wra export type { EventSettingsFromRef } from "./event-types/wrappers/types"; export type { AvailabilitySettingsFormRef } from "./availability/types"; export { ConferencingAppsViewPlatformWrapper as ConferencingAppsSettings } from "./connect/conferencing-apps/ConferencingAppsViewPlatformWrapper"; +export type { ConferencingAppsCustomClassNames } from "./connect/conferencing-apps/ConferencingAppsViewPlatformWrapper"; export { StripeConnect } from "./connect/stripe/StripeConnect"; export { CreateEventTypePlatformWrapper as CreateEventType } from "./event-types/wrappers/CreateEventTypePlatformWrapper"; export { PaymentForm } from "./event-types/payments/PaymentForm"; diff --git a/packages/platform/examples/base/src/pages/conferencing-apps.tsx b/packages/platform/examples/base/src/pages/conferencing-apps.tsx index 7bec6014a2..e20dd71116 100644 --- a/packages/platform/examples/base/src/pages/conferencing-apps.tsx +++ b/packages/platform/examples/base/src/pages/conferencing-apps.tsx @@ -1,21 +1,32 @@ -import { Navbar } from "@/components/Navbar"; +import { type ConferencingAppsCustomClassNames, ConferencingAppsSettings } from "@calcom/atoms"; import { Inter } from "next/font/google"; import { usePathname } from "next/navigation"; - -import { ConferencingAppsSettings } from "@calcom/atoms"; +import { Navbar } from "@/components/Navbar"; const inter = Inter({ subsets: ["latin"] }); export default function ConferencingApps(props: { calUsername: string; calEmail: string }) { const pathname = usePathname(); const callbackUri = `${window.location.origin}${pathname}`; + const customClassNames: ConferencingAppsCustomClassNames = { + containerClassName: "bg-red-50 p-4 rounded-lg", + addButtonClassName: "bg-blue-600 hover:bg-blue-700 text-white", + addDropdownClassName: "bg-indigo-50 border-2 border-indigo-300", + appListClassName: "border-2 border-green-500", + appCardClassName: "bg-blue-50 border-b-2 border-blue-300", + appCardMenuClassName: "bg-pink-50 border-2 border-pink-300", + emptyScreenClassName: "bg-yellow-50 border-yellow-300", + emptyScreenIconWrapperClassName: "bg-purple-100", + emptyScreenIconClassName: "text-purple-600", + skeletonClassName: "bg-gray-300", + }; return (
- +
);