chore: AtomsWrapper to scope css (#14490)

packages/platform/atoms/availability/wrappers/PlatformAvailabilitySettingsWrapper.tsx

@@ -6,6 +6,7 @@ import useClientSchedule from "../../hooks/useClientSchedule";
 import useDeleteSchedule from "../../hooks/useDeleteSchedule";
 import { useMe } from "../../hooks/useMe";
 import useUpdateSchedule from "../../hooks/useUpdateSchedule";
+import { AtomsWrapper } from "../../src/components/atoms-wrapper";
 import { useToast } from "../../src/components/ui/use-toast";
 import type { Schedule } from "../AvailabilitySettings";
 import type { CustomClassNames } from "../AvailabilitySettings";
@@ -88,39 +89,41 @@ export const PlatformAvailabilitySettingsWrapper = ({
   if (!userSchedule) return <div className="px-10 py-4 text-xl">No user schedule present</div>;
 
   return (
-    <AvailabilitySettings
-      handleDelete={() => {
-        userSchedule.id && handleDelete(userSchedule.id);
-      }}
-      handleSubmit={async (data) => {
-        userSchedule.id && handleUpdate(userSchedule.id, data);
-      }}
-      weekStart="Sunday"
-      timeFormat={timeFormat}
-      isLoading={isLoading}
-      schedule={{
-        name: userSchedule.name,
-        id: userSchedule.id,
-        isLastSchedule: userSchedule.isLastSchedule,
-        isDefault: userSchedule.isDefault,
-        workingHours: userSchedule.workingHours,
-        dateOverrides: userSchedule.dateOverrides,
-        timeZone: userSchedule.timeZone,
-        availability: userSchedule.availability,
-        schedule:
-          userSchedule.schedule.reduce(
-            (acc: Schedule[], avail: Schedule) => [
-              ...acc,
-              { ...avail, startTime: new Date(avail.startTime), endTime: new Date(avail.endTime) },
-            ],
-            [] as Schedule[]
-          ) || [],
-      }}
-      isDeleting={isDeletionInProgress}
-      isSaving={isSavingInProgress}
-      backPath=""
-      isPlatform={true}
-      customClassNames={customClassNames}
-    />
+    <AtomsWrapper>
+      <AvailabilitySettings
+        handleDelete={() => {
+          userSchedule.id && handleDelete(userSchedule.id);
+        }}
+        handleSubmit={async (data) => {
+          userSchedule.id && handleUpdate(userSchedule.id, data);
+        }}
+        weekStart="Sunday"
+        timeFormat={timeFormat}
+        isLoading={isLoading}
+        schedule={{
+          name: userSchedule.name,
+          id: userSchedule.id,
+          isLastSchedule: userSchedule.isLastSchedule,
+          isDefault: userSchedule.isDefault,
+          workingHours: userSchedule.workingHours,
+          dateOverrides: userSchedule.dateOverrides,
+          timeZone: userSchedule.timeZone,
+          availability: userSchedule.availability,
+          schedule:
+            userSchedule.schedule.reduce(
+              (acc: Schedule[], avail: Schedule) => [
+                ...acc,
+                { ...avail, startTime: new Date(avail.startTime), endTime: new Date(avail.endTime) },
+              ],
+              [] as Schedule[]
+            ) || [],
+        }}
+        isDeleting={isDeletionInProgress}
+        isSaving={isSavingInProgress}
+        backPath=""
+        isPlatform={true}
+        customClassNames={customClassNames}
+      />
+    </AtomsWrapper>
   );
 };

packages/platform/atoms/booker/BookerPlatformWrapper.tsx

@@ -32,6 +32,7 @@ import { useHandleBookEvent } from "../hooks/useHandleBookEvent";
 import { useMe } from "../hooks/useMe";
 import { usePublicEvent } from "../hooks/usePublicEvent";
 import { useSlots } from "../hooks/useSlots";
+import { AtomsWrapper } from "../src/components/atoms-wrapper";
 
 type BookerPlatformWrapperAtomProps = Omit<BookerProps, "entity"> & {
   rescheduleUid?: string;
@@ -229,86 +230,88 @@ export const BookerPlatformWrapper = (props: BookerPlatformWrapperAtomProps) =>
   });
 
   return (
-    <BookerComponent
-      eventSlug={props.eventSlug}
-      username={props.username}
-      entity={
-        event?.data?.entity ?? {
-          considerUnpublished: false,
-          orgSlug: undefined,
-          teamSlug: undefined,
-          name: undefined,
+    <AtomsWrapper>
+      <BookerComponent
+        eventSlug={props.eventSlug}
+        username={props.username}
+        entity={
+          event?.data?.entity ?? {
+            considerUnpublished: false,
+            orgSlug: undefined,
+            teamSlug: undefined,
+            name: undefined,
+          }
         }
-      }
-      rescheduleUid={props.rescheduleUid ?? null}
-      bookingUid={props.bookingUid ?? null}
-      isRedirect={false}
-      fromUserNameRedirected=""
-      hasSession={hasSession}
-      onGoBackInstantMeeting={function (): void {
-        throw new Error("Function not implemented.");
-      }}
-      onConnectNowInstantMeeting={function (): void {
-        throw new Error("Function not implemented.");
-      }}
-      onOverlayClickNoCalendar={function (): void {
-        throw new Error("Function not implemented.");
-      }}
-      onClickOverlayContinue={function (): void {
-        throw new Error("Function not implemented.");
-      }}
-      onOverlaySwitchStateChange={function (state: boolean): void {
-        throw new Error("Function not implemented.");
-      }}
-      extraOptions={{}}
-      bookings={{
-        handleBookEvent: () => {
-          handleBookEvent();
-          return;
-        },
-        expiryTime: undefined,
-        bookingForm: bookerForm.bookingForm,
-        bookerFormErrorRef: bookerForm.bookerFormErrorRef,
-        errors: {
-          hasDataErrors: isCreateBookingError || isCreateRecBookingError || isCreateInstantBookingError,
-          dataErrors: createBookingError || createRecBookingError || createInstantBookingError,
-        },
-        loadingStates: {
-          creatingBooking: creatingBooking,
-          creatingRecurringBooking: creatingRecBooking,
-          creatingInstantBooking: creatingInstantBooking,
-        },
-        instantVideoMeetingUrl: undefined,
-      }}
-      slots={slots}
-      calendars={{
-        overlayBusyDates: overlayBusyDates?.data,
-        isOverlayCalendarEnabled: false,
-        connectedCalendars: calendars?.connectedCalendars || [],
-        loadingConnectedCalendar: fetchingConnectedCalendars,
-        onToggleCalendar: () => {
-          return;
-        },
-      }}
-      verifyEmail={{
-        isEmailVerificationModalVisible: false,
-        setEmailVerificationModalVisible: () => {
-          return;
-        },
-        setVerifiedEmail: () => {
-          return;
-        },
-        handleVerifyEmail: () => {
-          return;
-        },
-        renderConfirmNotVerifyEmailButtonCond: true,
-      }}
-      bookerForm={bookerForm}
-      event={event}
-      schedule={schedule}
-      bookerLayout={bookerLayout}
-      verifyCode={undefined}
-      isPlatform
-    />
+        rescheduleUid={props.rescheduleUid ?? null}
+        bookingUid={props.bookingUid ?? null}
+        isRedirect={false}
+        fromUserNameRedirected=""
+        hasSession={hasSession}
+        onGoBackInstantMeeting={function (): void {
+          throw new Error("Function not implemented.");
+        }}
+        onConnectNowInstantMeeting={function (): void {
+          throw new Error("Function not implemented.");
+        }}
+        onOverlayClickNoCalendar={function (): void {
+          throw new Error("Function not implemented.");
+        }}
+        onClickOverlayContinue={function (): void {
+          throw new Error("Function not implemented.");
+        }}
+        onOverlaySwitchStateChange={function (state: boolean): void {
+          throw new Error("Function not implemented.");
+        }}
+        extraOptions={{}}
+        bookings={{
+          handleBookEvent: () => {
+            handleBookEvent();
+            return;
+          },
+          expiryTime: undefined,
+          bookingForm: bookerForm.bookingForm,
+          bookerFormErrorRef: bookerForm.bookerFormErrorRef,
+          errors: {
+            hasDataErrors: isCreateBookingError || isCreateRecBookingError || isCreateInstantBookingError,
+            dataErrors: createBookingError || createRecBookingError || createInstantBookingError,
+          },
+          loadingStates: {
+            creatingBooking: creatingBooking,
+            creatingRecurringBooking: creatingRecBooking,
+            creatingInstantBooking: creatingInstantBooking,
+          },
+          instantVideoMeetingUrl: undefined,
+        }}
+        slots={slots}
+        calendars={{
+          overlayBusyDates: overlayBusyDates?.data,
+          isOverlayCalendarEnabled: false,
+          connectedCalendars: calendars?.connectedCalendars || [],
+          loadingConnectedCalendar: fetchingConnectedCalendars,
+          onToggleCalendar: () => {
+            return;
+          },
+        }}
+        verifyEmail={{
+          isEmailVerificationModalVisible: false,
+          setEmailVerificationModalVisible: () => {
+            return;
+          },
+          setVerifiedEmail: () => {
+            return;
+          },
+          handleVerifyEmail: () => {
+            return;
+          },
+          renderConfirmNotVerifyEmailButtonCond: true,
+        }}
+        bookerForm={bookerForm}
+        event={event}
+        schedule={schedule}
+        bookerLayout={bookerLayout}
+        verifyCode={undefined}
+        isPlatform
+      />
+    </AtomsWrapper>
   );
 };

packages/platform/atoms/gcal-connect/GcalConnect.tsx

@@ -1,9 +1,10 @@
 import type { FC } from "react";
 
-import { Button, Icon } from "@calcom/ui";
+import { Button } from "@calcom/ui";
 
 import { useAtomsContext } from "../hooks/useAtomsContext";
 import { useGcal } from "../hooks/useGcal";
+import { AtomsWrapper } from "../src/components/atoms-wrapper";
 import { cn } from "../src/lib/utils";
 
 interface GcalConnectProps {
@@ -24,13 +25,15 @@ export const GcalConnect: FC<GcalConnectProps> = ({
   if (!isAuth || !checked) return <></>;
 
   return (
-    <Button
-      StartIcon="calendar-days"
-      color="primary"
-      disabled={!allowConnect}
-      className={cn("", className)}
-      onClick={() => redirectToGcalOAuth()}>
-      {allowConnect ? label : alreadyConnectedLabel}
-    </Button>
+    <AtomsWrapper>
+      <Button
+        StartIcon="calendar-days"
+        color="primary"
+        disabled={!allowConnect}
+        className={cn("", className)}
+        onClick={() => redirectToGcalOAuth()}>
+        {allowConnect ? label : alreadyConnectedLabel}
+      </Button>
+    </AtomsWrapper>
   );
 };

packages/platform/atoms/package.json

@@ -16,7 +16,11 @@
     "@types/react": "18.0.26",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^2.2.0",
+    "autoprefixer": "^10.4.19",
+    "postcss": "^8.4.38",
     "postcss-import": "^16.1.0",
+    "postcss-prefixer": "^3.0.0",
+    "postcss-prefixwrap": "1.46.0",
     "rollup-plugin-node-builtins": "^2.1.2",
     "typescript": "^4.9.4",
     "vite": "^5.0.10",

packages/platform/atoms/postcss.config.js

@@ -3,6 +3,7 @@ const config = {
     tailwindcss: {},
     autoprefixer: {},
     "postcss-import": {},
+    "postcss-prefixwrap": `.calcom-atoms`,
   },
 };
 

packages/platform/atoms/src/components/atoms-wrapper.tsx

@@ -0,0 +1,7 @@
+import type { ReactNode } from "react";
+
+import { CALCOM_ATOMS_WRAPPER_CLASS } from "../constants/styles";
+
+export const AtomsWrapper = ({ children }: { children: ReactNode }) => {
+  return <div className={`${CALCOM_ATOMS_WRAPPER_CLASS} m-0 w-auto p-0`}>{children}</div>;
+};

packages/platform/atoms/src/components/ui/toaster.tsx

@@ -1,3 +1,4 @@
+import { AtomsWrapper } from "../atoms-wrapper";
 import { Toast, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport } from "./toast";
 import { useToast } from "./use-toast";
 
@@ -5,20 +6,24 @@ export function Toaster() {
   const { toasts } = useToast();
 
   return (
-    <ToastProvider>
-      {toasts.map(function ({ id, title, description, action, ...props }) {
-        return (
-          <Toast key={id} {...props}>
-            <div className="grid gap-1">
-              {title && <ToastTitle>{title}</ToastTitle>}
-              {description && <ToastDescription>{description}</ToastDescription>}
-            </div>
-            {action}
-            <ToastClose />
-          </Toast>
-        );
-      })}
-      <ToastViewport />
-    </ToastProvider>
+    <AtomsWrapper>
+      <ToastProvider>
+        {toasts.map(function ({ id, title, description, action, ...props }) {
+          return (
+            <AtomsWrapper key={id}>
+              <Toast {...props}>
+                <div className="grid gap-1">
+                  {title && <ToastTitle>{title}</ToastTitle>}
+                  {description && <ToastDescription>{description}</ToastDescription>}
+                </div>
+                {action}
+                <ToastClose />
+              </Toast>
+            </AtomsWrapper>
+          );
+        })}
+        <ToastViewport />
+      </ToastProvider>
+    </AtomsWrapper>
   );
 }

packages/platform/atoms/src/constants/styles.ts

@@ -0,0 +1 @@
+export const CALCOM_ATOMS_WRAPPER_CLASS = "calcom-atoms";

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

@@ -40,7 +40,7 @@ export default function App({ Component, pageProps }: AppProps) {
     });
   }, []);
   return (
-    <div className={`${poppins.className}`}>
+    <div className={`${poppins.className} text-black`}>
       <CalProvider
         accessToken={accessToken}
         // eslint-disable-next-line turbo/no-undeclared-env-vars