@calcom/atoms 2.7.2 → 2.8.1

package/src/calendar-view/components/no-availability-dialog.tsx

@@ -1,74 +0,0 @@
-// @ts-nocheck — Radix 1.x prop-pick narrowing drops className/children on Dialog primitives
-"use client";
-
-import { useState } from "react";
-import { Button } from "../../components/ui/button";
-import { Dialog } from "../../components/ui/controlled-dialog";
-import {
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "../../components/ui/dialog";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-
-/**
- * Pure no-availability dialog. Business logic about *why* the month has
- * no availability (ROLLING/RANGE period limits) lives with the caller —
- * atoms just renders the dialog based on `description` and whether the
- * caller thinks a "view next month" button makes sense.
- */
-export const NoAvailabilityDialog = ({
-  month,
-  nextMonthButton,
-  description,
-  noFutureAvailability = false,
-}: {
-  month: string | null;
-  nextMonthButton: () => void;
-  description?: string;
-  /**
-   * When true the dialog treats the next month as unavailable too: the
-   * close button becomes primary and the "view next month" button is
-   * hidden.
-   */
-  noFutureAvailability?: boolean;
-}) => {
-  const { t } = useLocale();
-  const [isOpenDialog, setIsOpenDialog] = useState(true);
-
-  const closeDialog = () => setIsOpenDialog(false);
-
-  return (
-    <Dialog open={isOpenDialog} onOpenChange={(open) => setIsOpenDialog(open)}>
-      <DialogContent>
-        <DialogHeader>
-          <DialogTitle>{t("no_availability_in_month", { month })}</DialogTitle>
-          {description ? <DialogDescription>{description}</DialogDescription> : null}
-        </DialogHeader>
-        <DialogFooter>
-          <Button
-            color={noFutureAvailability ? "primary" : "secondary"}
-            onClick={closeDialog}
-            data-testid="close_dialog_button"
-          >
-            {t("close")}
-          </Button>
-          {!noFutureAvailability && (
-            <Button
-              color="primary"
-              onClick={nextMonthButton}
-              data-testid="view_next_month"
-              EndIcon="arrow-right"
-            >
-              {t("view_next_month")}
-            </Button>
-          )}
-        </DialogFooter>
-      </DialogContent>
-    </Dialog>
-  );
-};
-
-export default NoAvailabilityDialog;

package/src/calendar-view/event-type-calendar-view-component.tsx

@@ -1,152 +0,0 @@
-// @ts-nocheck — atoms wrapper over loose contracts + Radix prop-pick
-import { useMemo } from "react";
-import { shallow } from "zustand/shallow";
-import { formatUsername } from "../booker/booker-platform-wrapper";
-import { useBookerStoreContext, useInitializeBookerStoreContext } from "../booker/booker-store-provider";
-import { BookerSection } from "../booker/components/booker-section";
-import { Header } from "../booker/components/header";
-import { useAvailableTimeSlots } from "../booker/hooks/use-available-time-slots";
-import { useBookerLayout } from "../booker/hooks/use-booker-layout";
-import { useStableTimezone } from "../booker/hooks/use-stable-timezone";
-import { useTimesForSchedule } from "../booker/hooks/use-times-for-schedule";
-import type {
-  CalendarViewPlatformWrapperAtomPropsForIndividual,
-  CalendarViewPlatformWrapperAtomPropsForTeam,
-} from "../calendar-view/wrappers/calendar-view-platform-wrapper";
-import { AtomsWrapper } from "../components/atoms-wrapper";
-import { useAtomGetPublicEvent } from "../hooks/event-types/public/use-atom-get-public-event";
-import { useEventType } from "../hooks/event-types/public/use-event-type";
-import { useTeamEventType } from "../hooks/event-types/public/use-team-event-type";
-import { useAvailableSlots } from "../hooks/use-available-slots";
-import { getUsernameList } from "../vendor/get-username-list";
-import { useTimePreferences } from "../vendor/time-preferences";
-import { LargeCalendar } from "./components/large-calendar";
-
-export const EventTypeCalendarViewComponent = (
-  props:
-    | (CalendarViewPlatformWrapperAtomPropsForIndividual & {
-        teamId?: number;
-      })
-    | (CalendarViewPlatformWrapperAtomPropsForTeam & { username?: string | string[] })
-) => {
-  const isTeamEvent = !!props.teamId;
-  const teamId: number | undefined = props.teamId ? props.teamId : undefined;
-  const username = useMemo(() => {
-    if (props.username) {
-      return formatUsername(props.username);
-    }
-    return "";
-  }, [props.username]);
-
-  const { isPending } = useEventType(username, props.eventSlug, isTeamEvent);
-
-  const { isPending: isTeamPending } = useTeamEventType(teamId, props.eventSlug, isTeamEvent);
-
-  const selectedDuration = useBookerStoreContext((state) => state.selectedDuration);
-
-  const event = useAtomGetPublicEvent({
-    username,
-    eventSlug: props.eventSlug,
-    isTeamEvent: isTeamEvent,
-    teamId,
-    selectedDuration,
-  });
-
-  const bookerLayout = useBookerLayout(event.data?.profile?.bookerLayouts);
-
-  const selectedDate = useBookerStoreContext((state) => state.selectedDate);
-  const month = useBookerStoreContext((state) => state.month);
-  const [dayCount] = useBookerStoreContext((state) => [state.dayCount, state.setDayCount], shallow);
-
-  const [startTime, endTime] = useTimesForSchedule({
-    month,
-    dayCount,
-    selectedDate,
-    bookerLayout,
-  });
-
-  const { timezone: rawTimezone } = useTimePreferences();
-  const timezone = useStableTimezone(
-    rawTimezone,
-    event?.data?.restrictionScheduleId != null
-      ? { id: event.data.restrictionScheduleId, useBookerTimezone: event.data.useBookerTimezone }
-      : undefined
-  );
-  const isDynamic = useMemo(() => {
-    return getUsernameList(username ?? "").length > 1;
-  }, [username]);
-
-  const bookingData = useBookerStoreContext((state) => state.bookingData);
-
-  useInitializeBookerStoreContext({
-    ...props,
-    eventId: event?.data?.id,
-    layout: "week_view",
-    username,
-    bookingData,
-    isPlatform: true,
-    allowUpdatingUrlParams: false,
-  });
-
-  const schedule = useAvailableSlots({
-    usernameList: getUsernameList(username),
-    eventTypeId: event?.data?.id ?? 0,
-    startTime,
-    endTime,
-    timeZone: timezone,
-    duration: selectedDuration ?? undefined,
-    teamMemberEmail: undefined,
-    ...(isTeamEvent
-      ? {
-          isTeamEvent: isTeamEvent,
-          teamId: teamId,
-        }
-      : {}),
-    enabled:
-      Boolean(teamId || username) &&
-      Boolean(month) &&
-      Boolean(timezone) &&
-      (isTeamEvent ? !isTeamPending : !isPending) &&
-      Boolean(event?.data?.id),
-    orgSlug: undefined,
-    eventTypeSlug: isDynamic ? "dynamic" : props.eventSlug || "",
-  });
-
-  const selectedEventDuration = useBookerStoreContext((state) => state.selectedDuration);
-  const eventDuration = selectedEventDuration || event?.data?.length || 30;
-
-  const availableTimeSlots = useAvailableTimeSlots({ schedule: schedule.data, eventDuration });
-
-  return (
-    <AtomsWrapper>
-      <BookerSection
-        area="header"
-        className="bg-default dark:bg-muted sticky top-0 z-10 border-default ltr:border-l rtl:border-r"
-      >
-        <Header
-          isPlatform={true}
-          isCalendarView={true}
-          isMyLink={true}
-          eventSlug={props.eventSlug}
-          enabledLayouts={bookerLayout.bookerLayouts.enabledLayouts}
-          extraDays={7}
-          isMobile={false}
-          nextSlots={6}
-        />
-      </BookerSection>
-      <BookerSection
-        key="large-calendar"
-        area="main"
-        visible={true}
-        className="border-subtle sticky top-0 ml-[-1px] h-full md:border-l"
-      >
-        <LargeCalendar
-          extraDays={7}
-          availableTimeslots={availableTimeSlots}
-          isLoading={schedule.isPending}
-          event={event}
-        />
-      </BookerSection>
-    </AtomsWrapper>
-  );
-};

package/src/calendar-view/index.ts

@@ -1 +0,0 @@
-export { CalendarViewPlatformWrapper } from "./wrappers/calendar-view-platform-wrapper";

package/src/calendar-view/scheduler/components/calendar.tsx

@@ -1,231 +0,0 @@
-"use client";
-
-import type React from "react";
-import { useEffect, useMemo, useRef } from "react";
-
-import { cn } from "../../../lib/utils";
-import "../styles/styles.css";
-import { CalendarStoreContext, createCalendarStore, useCalendarStore } from "../state/store";
-import type { CalendarComponentProps } from "../types/state";
-import { getDaysBetweenDates, getHoursToDisplay } from "../utils";
-
-import { CurrentTime } from "./current-time";
-import { DateValues } from "./date-values";
-import { AllDayEvents } from "./event/all-day-events";
-import { AvailableCellsForDay, EmptyCell } from "./event/empty";
-import { EventList } from "./event/event-list";
-import { SchedulerColumns } from "./grid";
-import { SchedulerHeading } from "./heading/scheduler-heading";
-import { HorizontalLines } from "./horizontal-lines";
-import { Spinner } from "./spinner/spinner";
-import { VerticalLines } from "./vertical-lines";
-
-function CalendarInner(props: CalendarComponentProps) {
-  const container = useRef<HTMLDivElement | null>(null);
-  const containerNav = useRef<HTMLDivElement | null>(null);
-  const containerOffset = useRef<HTMLDivElement | null>(null);
-  const schedulerGrid = useRef<HTMLOListElement | null>(null);
-  const initialState = useCalendarStore((state) => state.initState);
-
-  const startDate = useCalendarStore((state) => state.startDate);
-  const endDate = useCalendarStore((state) => state.endDate);
-  const startHour = useCalendarStore((state) => state.startHour || 0);
-  const endHour = useCalendarStore((state) => state.endHour || 23);
-  const usersCellsStopsPerHour = useCalendarStore((state) => state.gridCellsPerHour || 4);
-  const availableTimeslots = useCalendarStore((state) => state.availableTimeslots);
-  const hideHeader = useCalendarStore((state) => state.hideHeader);
-  const timezone = useCalendarStore((state) => state.timezone);
-  const showBackgroundPattern = useCalendarStore((state) => state.showBackgroundPattern);
-  const showBorder = useCalendarStore((state) => state.showBorder ?? true);
-  const borderColor = useCalendarStore((state) => state.borderColor ?? "default");
-  const scrollToCurrentTime = useCalendarStore((state) => state.scrollToCurrentTime ?? true);
-  const updateCurrentTimeOnFocus = useCalendarStore((state) => state.updateCurrentTimeOnFocus ?? false);
-  const renderOutOfOffice = useCalendarStore((state) => state.renderOutOfOffice);
-
-  const days = useMemo(() => getDaysBetweenDates(startDate, endDate), [startDate, endDate]);
-
-  const hours = useMemo(
-    () => getHoursToDisplay(startHour || 0, endHour || 23, timezone),
-    [startHour, endHour, timezone]
-  );
-  const numberOfGridStopsPerDay = hours.length * usersCellsStopsPerHour;
-  const hourSize = 58;
-
-  useEffect(() => {
-    initialState(props);
-  }, [props, initialState]);
-
-  return (
-    <MobileNotSupported>
-      <div
-        className={cn("scheduler-wrapper flex h-full w-full flex-col")}
-        style={
-          {
-            "--one-minute-height": `calc(${hourSize}px/60)`,
-            "--gridDefaultSize": `${hourSize}px`,
-          } as React.CSSProperties
-        }
-      >
-        {hideHeader !== true && <SchedulerHeading />}
-        {props.isPending && <Spinner />}
-        <div
-          ref={container}
-          className="bg-default dark:bg-cal-muted relative isolate flex h-full flex-auto flex-col"
-        >
-          <div
-            style={{ width: "165%" }}
-            className="flex max-w-full flex-none flex-col sm:max-w-none md:max-w-full"
-          >
-            {/* Wrap day-header + all-day row in a single sticky container so they stack
-                naturally without needing to know DateValues' rendered height. */}
-            <div className="top-(--calendar-dates-sticky-offset,0px) z-80 sticky">
-              <DateValues
-                containerNavRef={containerNav}
-                days={days}
-                showBorder={showBorder}
-                borderColor={borderColor}
-              />
-              <AllDayEvents
-                days={days}
-                showBorder={showBorder}
-                borderColor={borderColor}
-                timezone={timezone}
-              />
-            </div>
-            <div className="relative flex flex-auto">
-              <CurrentTime
-                timezone={timezone}
-                scrollToCurrentTime={scrollToCurrentTime}
-                updateOnFocus={updateCurrentTimeOnFocus}
-              />
-              <div
-                className={cn(
-                  "bg-default dark:bg-cal-muted ring-muted sticky left-0 z-10 w-16 flex-none ring-1",
-                  showBorder &&
-                    (borderColor === "subtle"
-                      ? "border-subtle border-l border-r"
-                      : "border-default border-l border-r")
-                )}
-              />
-              <div
-                className="grid flex-auto grid-cols-1 grid-rows-1 [--disabled-gradient-background:#F8F9FB] [--disabled-gradient-foreground:#E6E7EB] dark:[--disabled-gradient-background:#262626] dark:[--disabled-gradient-foreground:#393939]"
-                style={
-                  showBackgroundPattern === false
-                    ? undefined
-                    : {
-                        backgroundColor: "var(--disabled-gradient-background)",
-                        background:
-                          "repeating-linear-gradient(-45deg, var(--disabled-gradient-background), var(--disabled-gradient-background) 2.5px, var(--disabled-gradient-foreground) 2.5px, var(--disabled-gradient-foreground) 5px)",
-                      }
-                }
-              >
-                <HorizontalLines
-                  hours={hours}
-                  numberOfGridStopsPerCell={usersCellsStopsPerHour}
-                  containerOffsetRef={containerOffset}
-                  borderColor={borderColor}
-                />
-                <VerticalLines days={days} borderColor={borderColor} />
-
-                <SchedulerColumns
-                  offsetHeight={containerOffset.current?.offsetHeight}
-                  gridStopsPerDay={numberOfGridStopsPerDay}
-                >
-                  {days.map((day, i) => {
-                    return (
-                      <li key={day.toISOString()} className="relative" style={{ gridColumnStart: i + 1 }}>
-                        <EventList day={day} />
-                      </li>
-                    );
-                  })}
-                </SchedulerColumns>
-
-                <SchedulerColumns
-                  ref={schedulerGrid}
-                  offsetHeight={containerOffset.current?.offsetHeight}
-                  gridStopsPerDay={numberOfGridStopsPerDay}
-                >
-                  <>
-                    {[...Array(days.length)].map((_, i) => (
-                      <li
-                        className="relative"
-                        key={i}
-                        style={{
-                          gridColumnStart: i + 1,
-                          gridRow: `1 / span ${numberOfGridStopsPerDay}`,
-                        }}
-                      >
-                        {availableTimeslots ? (
-                          <AvailableCellsForDay
-                            key={days[i].toISOString()}
-                            timezone={timezone}
-                            day={days[i]}
-                            startHour={startHour}
-                            availableSlots={availableTimeslots}
-                            renderOutOfOffice={renderOutOfOffice}
-                          />
-                        ) : (
-                          <>
-                            {[...Array(numberOfGridStopsPerDay)].map((_, j) => {
-                              const key = `${i}-${j}`;
-                              return (
-                                <EmptyCell
-                                  key={key}
-                                  day={days[i]}
-                                  gridCellIdx={j}
-                                  totalGridCells={numberOfGridStopsPerDay}
-                                  selectionLength={endHour - startHour}
-                                  startHour={startHour}
-                                  timezone={timezone}
-                                />
-                              );
-                            })}
-                          </>
-                        )}
-                      </li>
-                    ))}
-                  </>
-                </SchedulerColumns>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </MobileNotSupported>
-  );
-}
-
-export function Calendar(props: CalendarComponentProps) {
-  const storeRef = useRef<ReturnType<typeof createCalendarStore> | null>(null);
-
-  if (!storeRef.current) {
-    storeRef.current = createCalendarStore();
-    storeRef.current.getState().initState(props);
-  }
-
-  useEffect(() => {
-    if (storeRef.current) {
-      storeRef.current.getState().initState(props);
-    }
-  }, [props]);
-
-  return (
-    <CalendarStoreContext.Provider value={storeRef.current}>
-      <CalendarInner {...props} />
-    </CalendarStoreContext.Provider>
-  );
-}
-
-const MobileNotSupported = ({ children }: { children: React.ReactNode }) => {
-  return (
-    <>
-      <div className="flex h-full flex-col items-center justify-center sm:hidden">
-        <h1 className="text-2xl font-bold">Mobile not supported yet </h1>
-        <p className="text-subtle">Please use a desktop browser to view this page</p>
-      </div>
-      <div className="hidden h-full sm:block">{children}</div>
-    </>
-  );
-};
-
-export default Calendar;

package/src/calendar-view/scheduler/components/current-time/index.tsx

@@ -1,87 +0,0 @@
-"use client";
-
-import { useCallback, useEffect, useRef, useState } from "react";
-
-import dayjs from "../../../../vendor/dayjs";
-import { useTimePreferences } from "../../../../vendor/time-preferences";
-import { useCalendarStore } from "../../state/store";
-
-function calculateMinutesFromStart(startHour: number, currentHour: number, currentMinute: number) {
-  const startMinute = startHour * 60;
-  const currentMinuteOfDay = currentHour * 60 + currentMinute;
-  return currentMinuteOfDay - startMinute;
-}
-
-export function CurrentTime({
-  timezone,
-  scrollToCurrentTime = true,
-  updateOnFocus = false,
-}: {
-  timezone: string;
-  scrollToCurrentTime?: boolean;
-  updateOnFocus?: boolean;
-}) {
-  const { timeFormat } = useTimePreferences();
-  const currentTimeRef = useRef<HTMLDivElement>(null);
-  const [scrolledIntoView, setScrolledIntoView] = useState(false);
-  const [currentTimePos, setCurrentTimePos] = useState<number | null>(null);
-  const { startHour, endHour } = useCalendarStore((state) => ({
-    startHour: state.startHour || 0,
-    endHour: state.endHour || 23,
-  }));
-
-  const updateCurrentTimePosition = useCallback(() => {
-    const currentDateTime = dayjs().tz(timezone);
-    const currentHour = currentDateTime.hour();
-    const currentMinute = currentDateTime.minute();
-
-    if (currentHour > endHour || currentHour < startHour) {
-      setCurrentTimePos(null);
-      return;
-    }
-
-    const minutesFromStart = calculateMinutesFromStart(startHour, currentHour, currentMinute);
-    setCurrentTimePos(minutesFromStart);
-  }, [timezone, startHour, endHour]);
-
-  useEffect(() => {
-    updateCurrentTimePosition();
-
-    if (!scrollToCurrentTime || !currentTimeRef.current || scrolledIntoView) return;
-    setTimeout(() => {
-      currentTimeRef?.current?.scrollIntoView({ block: "center" });
-      setScrolledIntoView(true);
-    }, 100);
-  }, [updateCurrentTimePosition, scrolledIntoView, scrollToCurrentTime]);
-
-  useEffect(() => {
-    if (!updateOnFocus) return;
-
-    const handleVisibilityChange = () => {
-      if (document.visibilityState === "visible") {
-        updateCurrentTimePosition();
-      }
-    };
-
-    document.addEventListener("visibilitychange", handleVisibilityChange);
-    return () => {
-      document.removeEventListener("visibilitychange", handleVisibilityChange);
-    };
-  }, [updateOnFocus, updateCurrentTimePosition]);
-
-  return (
-    <div
-      ref={currentTimeRef}
-      className="absolute top-0 z-40 flex h-px items-center justify-center text-xs"
-      aria-hidden="true"
-      style={{
-        top: `calc(${currentTimePos}*var(--one-minute-height) + var(--calendar-offset-top))`,
-        zIndex: 70,
-      }}
-    >
-      <div className="w-16 pr-2 text-right">{dayjs().tz(timezone).format(timeFormat)}</div>
-      <div className="bg-inverted h-3 w-px" />
-      <div className="bg-inverted h-px w-screen" />
-    </div>
-  );
-}

package/src/calendar-view/scheduler/components/date-values/index.tsx

@@ -1,114 +0,0 @@
-"use client";
-
-import type React from "react";
-import { useAtomsLocale as useLocale } from "../../../../hooks/use-atoms-locale";
-import { cn } from "../../../../lib/utils";
-import dayjs from "../../../../vendor/dayjs";
-import { useCalendarStore } from "../../state/store";
-import type { BorderColor } from "../../types/common";
-
-type Props = {
-  showBorder: boolean;
-  borderColor: BorderColor;
-  days: dayjs.Dayjs[];
-  containerNavRef: React.RefObject<HTMLDivElement>;
-};
-
-export function DateValues({ showBorder, borderColor, days, containerNavRef }: Props) {
-  const { i18n } = useLocale();
-  const timezone = useCalendarStore((state) => state.timezone);
-  const showTimezone = useCalendarStore((state) => state.showTimezone ?? false);
-
-  const formatDate = (date: dayjs.Dayjs): string => {
-    return new Intl.DateTimeFormat(i18n.language, { weekday: "short" }).format(date.toDate());
-  };
-
-  const getTimezoneDisplay = () => {
-    if (!showTimezone || !timezone) return null;
-    try {
-      const timeRaw = dayjs().tz(timezone);
-      const utcOffsetInMinutes = timeRaw.utcOffset();
-
-      const offsetInHours = Math.abs(utcOffsetInMinutes / 60);
-      const sign = utcOffsetInMinutes < 0 ? "-" : "+";
-
-      if (utcOffsetInMinutes === 0) return "GMT";
-
-      const offsetFormatted = `${sign}${offsetInHours}`;
-      return `GMT ${offsetFormatted}`;
-    } catch {
-      return timezone.split("/").pop()?.replace(/_/g, " ") || timezone;
-    }
-  };
-
-  return (
-    <div
-      ref={containerNavRef}
-      className={cn(
-        "bg-default dark:bg-cal-muted top-(--calendar-dates-sticky-offset,0px) z-80 sticky flex-none border-b",
-        borderColor === "subtle" ? "border-b-subtle" : "border-b-default",
-        showBorder && (borderColor === "subtle" ? "border-r-subtle border-r" : "border-r-default border-r")
-      )}
-    >
-      <div className="text-subtle flex leading-6 sm:hidden" data-dayslength={days.length}>
-        {days.map((day) => {
-          const isToday = dayjs().isSame(day, "day");
-          return (
-            <button
-              key={day.toString()}
-              type="button"
-              className="flex flex-1 flex-col items-center pb-3 pt-2"
-            >
-              {day.format("dd")}{" "}
-              <span
-                className={cn(
-                  "text-emphasis mt-1 flex h-8 w-8 items-center justify-center font-medium",
-                  isToday && "bg-inverted text-inverted rounded-sm"
-                )}
-              >
-                {day.format("D")}
-              </span>
-            </button>
-          );
-        })}
-      </div>
-      <div className="text-subtle -mr-px hidden auto-cols-fr leading-6 sm:flex">
-        <div
-          className={cn(
-            "col-end-1 flex w-16 items-center justify-center",
-            showBorder &&
-              (borderColor === "subtle" ? "border-l-subtle border-l" : "border-l-default border-l")
-          )}
-        >
-          {showTimezone && timezone && (
-            <span className="text-muted text-xs font-medium">{getTimezoneDisplay()}</span>
-          )}
-        </div>
-        {days.map((day) => {
-          const isToday = dayjs().isSame(day, "day");
-          return (
-            <div
-              key={day.toString()}
-              className={cn(
-                "flex flex-1 items-center justify-center py-3 text-xs font-medium uppercase",
-                isToday && "text-default"
-              )}
-            >
-              <span>
-                {formatDate(day)}{" "}
-                <span
-                  className={cn(
-                    "items-center justify-center p-1",
-                    isToday && "bg-brand-default text-brand ml-1 rounded-md"
-                  )}
-                >
-                  {day.format("DD")}
-                </span>
-              </span>
-            </div>
-          );
-        })}
-      </div>
-    </div>
-  );
-}