feat: destination and connected calendars

Author: supalarry

packages/platform/atoms/calendar-settings/wrappers/CalendarSettingsPlatformWrapper.tsx

@@ -1,19 +1,19 @@
-import type { DestinationHeaderClassnames } from "destination-calendar/DestinationCalendar";
+import type { DestinationCalendarClassNames } from "destination-calendar/DestinationCalendar";
 
 import { DestinationCalendarSettingsPlatformWrapper } from "../../destination-calendar/index";
 import { SelectedCalendarsSettingsPlatformWrapper } from "../../selected-calendars/index";
 import type {
   CalendarRedirectUrls,
-  SelectedCalendarsHeaderClassnames,
+  SelectedCalendarsClassNames,
 } from "../../selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper";
 
 type CalendarSettingsPlatformWrapperProps = {
   classNames?: {
     calendarSettingsCustomClassnames?: string;
     destinationCalendarSettingsCustomClassnames?: string;
     selectedCalendarSettingsCustomClassnames?: string;
-    selectedCalendarSettingsHeaderClassNames?: SelectedCalendarsHeaderClassnames;
-    destinationCalendarSettingsHeaderClassNames?: DestinationHeaderClassnames;
+    selectedCalendarSettingsClassNames?: SelectedCalendarsClassNames;
+    destinationCalendarSettingsClassNames?: DestinationCalendarClassNames;
   };
   calendarRedirectUrls?: CalendarRedirectUrls;
   allowDelete?: boolean;
@@ -31,15 +31,15 @@ export const CalendarSettingsPlatformWrapper = ({
       <DestinationCalendarSettingsPlatformWrapper
         statusLoader={<></>}
         classNames={classNames?.destinationCalendarSettingsCustomClassnames}
-        headerClassNames={classNames?.destinationCalendarSettingsHeaderClassNames}
+        classNamesObject={classNames?.destinationCalendarSettingsClassNames}
         isDryRun={isDryRun}
       />
       <SelectedCalendarsSettingsPlatformWrapper
         classNames={classNames?.selectedCalendarSettingsCustomClassnames}
         calendarRedirectUrls={calendarRedirectUrls}
         allowDelete={allowDelete}
         isDryRun={isDryRun}
-        headerClassNames={classNames?.selectedCalendarSettingsHeaderClassNames}
+        classNamesObject={classNames?.selectedCalendarSettingsClassNames}
       />
     </div>
   );

packages/platform/atoms/destination-calendar/DestinationCalendar.tsx

@@ -5,19 +5,29 @@ import { cn } from "../src/lib/utils";
 import type { DestinationCalendarProps } from "./DestinationCalendarSelector";
 import { DestinationCalendarSelector } from "./DestinationCalendarSelector";
 
-export type DestinationHeaderClassnames = {
+type DestinationHeaderClassnames = {
+  container?: string;
   title?: string;
   description?: string;
 };
 
+export type DestinationCalendarClassNames = {
+  container?: string;
+  header?: DestinationHeaderClassnames;
+};
+
 export const DestinationCalendarSettings = (
-  props: DestinationCalendarProps & { classNames?: string; headerClassNames?: DestinationHeaderClassnames }
+  props: DestinationCalendarProps & { classNames?: string; classNamesObject?: DestinationCalendarClassNames }
 ) => {
   const { t } = useLocale();
 
   return (
-    <div className={cn("border-subtle mb-6 mt-8 rounded-lg border", props?.classNames)}>
-      <DestinationCalendarSettingsHeading classNames={props.headerClassNames} />
+    <div
+      className={cn(
+        "border-subtle mb-6 mt-8 rounded-lg border",
+        props?.classNames || props?.classNamesObject?.container
+      )}>
+      <DestinationCalendarSettingsHeading classNames={props.classNamesObject?.header} />
       <div className="border-t">
         <div className="border-subtle flex w-full flex-col space-y-3 border-y-0 p-6">
           <div>
@@ -34,7 +44,7 @@ const DestinationCalendarSettingsHeading = ({ classNames }: { classNames?: Desti
   const { t } = useLocale();
 
   return (
-    <div className="p-6">
+    <div className={cn("p-6", classNames?.container)}>
       <h2 className={cn("text-emphasis mb-1 text-base font-bold leading-5 tracking-wide", classNames?.title)}>
         {t("add_to_calendar")}
       </h2>

packages/platform/atoms/destination-calendar/wrappers/DestinationCalendarSettingsPlatformWrapper.tsx

@@ -1,18 +1,18 @@
 import { useUpdateDestinationCalendars } from "../../hooks/calendars/useUpdateDestinationCalendars";
 import { useConnectedCalendars } from "../../hooks/useConnectedCalendars";
 import { AtomsWrapper } from "../../src/components/atoms-wrapper";
-import type { DestinationHeaderClassnames } from "../DestinationCalendar";
+import type { DestinationCalendarClassNames } from "../DestinationCalendar";
 import { DestinationCalendarSettings } from "../DestinationCalendar";
 
 export const DestinationCalendarSettingsPlatformWrapper = ({
   statusLoader,
   classNames = "mx-5",
-  headerClassNames,
+  classNamesObject,
   isDryRun = false,
 }: {
   statusLoader?: JSX.Element;
   classNames?: string;
-  headerClassNames?: DestinationHeaderClassnames;
+  classNamesObject?: DestinationCalendarClassNames;
   isDryRun?: boolean;
 }) => {
   const calendars = useConnectedCalendars({});
@@ -38,7 +38,7 @@ export const DestinationCalendarSettingsPlatformWrapper = ({
     <AtomsWrapper>
       <DestinationCalendarSettings
         classNames={classNames}
-        headerClassNames={headerClassNames}
+        classNamesObject={classNamesObject}
         connectedCalendars={calendars.data.connectedCalendars}
         destinationCalendar={calendars.data.destinationCalendar}
         value={calendars.data.destinationCalendar.externalId}

packages/platform/atoms/selected-calendars/wrappers/SelectedCalendarsSettingsPlatformWrapper.tsx

@@ -30,9 +30,19 @@ export type CalendarRedirectUrls = {
   outlook?: string;
 };
 
+export type SelectedCalendarsClassNames = {
+  container?: string;
+  header?: {
+    container?: string;
+    title?: string;
+    description?: string;
+  };
+  noSelectedCalendarsMessage?: string;
+};
+
 type SelectedCalendarsSettingsPlatformWrapperProps = {
   classNames?: string;
-  headerClassNames?: SelectedCalendarsHeaderClassnames;
+  classNamesObject?: SelectedCalendarsClassNames;
   calendarRedirectUrls?: CalendarRedirectUrls;
   allowDelete?: boolean;
   isDryRun?: boolean;
@@ -43,7 +53,7 @@ export const SelectedCalendarsSettingsPlatformWrapper = ({
   calendarRedirectUrls,
   allowDelete,
   isDryRun,
-  headerClassNames,
+  classNamesObject,
 }: SelectedCalendarsSettingsPlatformWrapperProps) => {
   const { t } = useLocale();
   const query = useConnectedCalendars({});
@@ -58,21 +68,27 @@ export const SelectedCalendarsSettingsPlatformWrapper = ({
 
             if (!data.connectedCalendars.length) {
               return (
-                <SelectedCalendarsSettings classNames={classNames}>
+                <SelectedCalendarsSettings classNames={classNamesObject?.container || classNames}>
                   <SelectedCalendarsSettingsHeading
-                    classNames={headerClassNames}
+                    classNames={classNamesObject?.header}
                     calendarRedirectUrls={calendarRedirectUrls}
                     isDryRun={isDryRun}
                   />
-                  <h1 className="px-6 py-4 text-base leading-5">No connected calendars found.</h1>
+                  <h1
+                    className={cn(
+                      "px-6 py-4 text-base leading-5",
+                      classNamesObject?.noSelectedCalendarsMessage
+                    )}>
+                    No connected calendars found.
+                  </h1>
                 </SelectedCalendarsSettings>
               );
             }
 
             return (
-              <SelectedCalendarsSettings classNames={classNames}>
+              <SelectedCalendarsSettings classNames={classNamesObject?.container || classNames}>
                 <SelectedCalendarsSettingsHeading
-                  classNames={headerClassNames}
+                  classNames={classNamesObject?.header}
                   calendarRedirectUrls={calendarRedirectUrls}
                   isDryRun={isDryRun}
                 />
@@ -161,24 +177,23 @@ export const SelectedCalendarsSettingsPlatformWrapper = ({
   );
 };
 
-export type SelectedCalendarsHeaderClassnames = {
-  title?: string;
-  description?: string;
-};
-
 const SelectedCalendarsSettingsHeading = ({
   calendarRedirectUrls,
   isDryRun,
   classNames,
 }: {
   calendarRedirectUrls?: CalendarRedirectUrls;
   isDryRun?: boolean;
-  classNames?: SelectedCalendarsHeaderClassnames;
+  classNames?: {
+    container?: string;
+    title?: string;
+    description?: string;
+  };
 }) => {
   const { t } = useLocale();
 
   return (
-    <div className="border-subtle border-b p-6">
+    <div className={cn("border-subtle border-b p-6", classNames?.container)}>
       <div className="flex items-center justify-between">
         <div>
           <h4 className={cn("text-emphasis text-base font-semibold leading-5", classNames?.title)}>

packages/platform/examples/base/src/pages/calendars.tsx

@@ -10,7 +10,28 @@ export default function Calendars(props: { calUsername: string; calEmail: string
     <main className={`flex min-h-screen flex-col ${inter.className}`}>
       <Navbar username={props.calUsername} />
       <div>
-        <CalendarSettings allowDelete={true} />
+        <CalendarSettings
+          allowDelete={true}
+          classNames={{
+            destinationCalendarSettingsClassNames: {
+              container: "bg-red-200",
+              header: {
+                container: "bg-gray-200",
+                title: "text-green-500",
+                description: "text-red-500",
+              },
+            },
+            selectedCalendarSettingsClassNames: {
+              container: "bg-red-200 mx-5 mb-6",
+              header: {
+                container: "bg-gray-200",
+                title: "text-green-500",
+                description: "text-red-500",
+              },
+              noSelectedCalendarsMessage: "text-blue-500",
+            },
+          }}
+        />
       </div>
     </main>
   );