@calcom/atoms 2.8.0 → 2.8.2

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

@@ -1,137 +0,0 @@
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import { shallow } from "zustand/shallow";
-import { cn } from "../../../../lib/utils";
-import dayjs from "../../../../vendor/dayjs";
-import { useCalendarStore } from "../../state/store";
-import { calculateEventLayouts, createLayoutMap } from "../../utils/overlap";
-import { isInAllDayBar } from "./all-day-events";
-import { Event } from "./event";
-
-type Props = {
-  day: dayjs.Dayjs;
-};
-
-export function EventList({ day }: Props) {
-  const { startHour, events, eventOnClick, selectedBookingUid, timezone } = useCalendarStore(
-    (state) => ({
-      startHour: state.startHour,
-      events: state.events,
-      eventOnClick: state.onEventClick,
-      selectedBookingUid: state.selectedBookingUid,
-      timezone: state.timezone,
-    }),
-    shallow
-  );
-
-  const [hoveredEventId, setHoveredEventId] = useState<number | null>(null);
-
-  const dayEvents = useMemo(() => {
-    return events.filter((event) => {
-      // All-day-bar events render in AllDayEvents; exclude them here so the
-      // same event never shows in both the all-day row and the time grid.
-      return dayjs(event.start).isSame(day, "day") && !isInAllDayBar(event, timezone);
-    });
-  }, [events, day, timezone]);
-
-  const layoutMap = useMemo(() => {
-    const layouts = calculateEventLayouts(dayEvents);
-    return createLayoutMap(layouts);
-  }, [dayEvents]);
-
-  const eventCalculations = useMemo(() => {
-    return new Map(
-      dayEvents.map((event) => {
-        const eventStart = dayjs(event.start);
-        const eventEnd = dayjs(event.end);
-        const eventDuration = eventEnd.diff(eventStart, "minutes");
-        const eventStartHour = eventStart.hour();
-        const eventStartDiff = (eventStartHour - (startHour || 0)) * 60 + eventStart.minute();
-
-        return [
-          event.id,
-          {
-            eventStart,
-            eventDuration,
-            eventStartDiff,
-          },
-        ];
-      })
-    );
-  }, [dayEvents, startHour]);
-
-  const hoveredEventLayout = hoveredEventId ? layoutMap.get(hoveredEventId) : null;
-  const hoveredGroupIndex = hoveredEventLayout?.groupIndex ?? null;
-
-  const selectedEventId = useMemo(() => {
-    if (!selectedBookingUid) return undefined;
-    const matchingEvent = dayEvents.find((event) => event.options?.bookingUid === selectedBookingUid);
-    return matchingEvent?.id;
-  }, [dayEvents, selectedBookingUid]);
-
-  useEffect(() => {
-    if (selectedEventId === undefined) return;
-
-    requestAnimationFrame(() => {
-      const eventElement = document.querySelector(`[data-calendar-event-id="${selectedEventId}"]`);
-      if (eventElement) {
-        eventElement.scrollIntoView({
-          behavior: "smooth",
-          block: "nearest",
-        });
-      }
-    });
-  }, [selectedEventId]);
-
-  return (
-    <>
-      {dayEvents.map((event) => {
-        const layout = layoutMap.get(event.id);
-        if (!layout) return null;
-
-        const calc = eventCalculations.get(event.id);
-        if (!calc) return null;
-
-        const { eventStart, eventDuration, eventStartDiff } = calc;
-
-        const isHovered = hoveredEventId === event.id;
-        const isSelected = selectedEventId === event.id;
-        const isInHoveredGroup = hoveredGroupIndex !== null && layout.groupIndex === hoveredGroupIndex;
-        const zIndex = isHovered || isSelected ? 79 : layout.baseZIndex;
-
-        return (
-          <div
-            key={`${event.id}-${eventStart.toISOString()}`}
-            className={cn(
-              "absolute transition-all duration-100 ease-out",
-              event.options?.borderOnly && "pointer-events-none"
-            )}
-            data-testid={event.options?.["data-test-id"]}
-            data-calendar-event-id={event.id}
-            data-calendar-event-source={event.source}
-            onMouseEnter={() => setHoveredEventId(event.id)}
-            onMouseLeave={() => setHoveredEventId(null)}
-            style={{
-              left: `${layout.leftOffsetPercent}%`,
-              width: `${layout.widthPercent}%`,
-              zIndex,
-              top: `calc(${eventStartDiff}*var(--one-minute-height))`,
-              height: `max(15px, calc(${eventDuration}*var(--one-minute-height)))`,
-              transform: isHovered || isSelected ? "scale(1.02)" : "scale(1)",
-              opacity: hoveredGroupIndex !== null && !isHovered && isInHoveredGroup ? 0.6 : 1,
-            }}
-          >
-            <Event
-              event={event}
-              eventDuration={eventDuration}
-              onEventClick={eventOnClick}
-              isHovered={isHovered}
-              currentlySelectedEventId={selectedEventId}
-            />
-          </div>
-        );
-      })}
-    </>
-  );
-}

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

@@ -1,165 +0,0 @@
-// @ts-nocheck — Radix Tooltip className/side narrowing
-"use client";
-
-import { cva } from "class-variance-authority";
-import { Tooltip } from "../../../../components/ui/tooltip";
-import { cn } from "../../../../lib/utils";
-import dayjs from "../../../../vendor/dayjs";
-import type { BookingStatus, CalendarEvent } from "../../types/events";
-
-type EventProps = {
-  event: CalendarEvent;
-  currentlySelectedEventId?: number;
-  eventDuration: number;
-  onEventClick?: (event: CalendarEvent) => void;
-  disabled?: boolean;
-  isHovered?: boolean;
-};
-
-const eventClasses = cva(
-  "group flex h-full w-full overflow-hidden rounded-[6px] px-[6px] text-xs leading-5 border-default font-medium",
-  {
-    variants: {
-      status: {
-        ACCEPTED: "bg-subtle hover:bg-emphasis text-emphasis border-[1px] border-default",
-        PENDING: "bg-subtle text-subtle border-[1px] border-dashed border-default",
-        REJECTED: "bg-subtle border-[1px] border-dashed text-subtle line-through",
-        CANCELLED: "bg-subtle border-[1px] border-dashed text-subtle line-through",
-        AWAITING_HOST: "bg-subtle text-emphasis border-[1px] border-dashed border-default",
-      },
-      disabled: {
-        true: "hover:cursor-default",
-        false: "hover:cursor-pointer",
-      },
-      selected: {
-        true: "",
-        false: "",
-      },
-      borderOnly: {
-        true: "bg-transparent border-[1.5px] border-subtle border-dashed opacity-60",
-        false: "",
-      },
-    },
-  }
-);
-
-export const STATUS_COLOR_MAP: Record<BookingStatus, string> = {
-  ACCEPTED: "bg-green-500",
-  PENDING: "bg-orange-500",
-  REJECTED: "bg-red-500",
-  CANCELLED: "bg-red-500",
-  AWAITING_HOST: "bg-blue-500",
-};
-
-export const getStatusColorClass = (status?: BookingStatus): string | undefined => {
-  if (!status) return undefined;
-  return STATUS_COLOR_MAP[status];
-};
-
-export function Event({
-  event,
-  currentlySelectedEventId,
-  eventDuration,
-  disabled,
-  onEventClick,
-  isHovered = false,
-}: EventProps) {
-  const selected = currentlySelectedEventId === event.id;
-  const { options } = event;
-
-  const colorClass = !options?.color ? getStatusColorClass(options?.status) : undefined;
-
-  const Component = onEventClick ? "button" : "div";
-
-  const dayOfWeek = dayjs(event.start).day();
-  const tooltipSide = dayOfWeek >= 1 && dayOfWeek <= 4 ? "right" : "left";
-
-  const tooltipContent = (
-    <div className="flex min-w-[200px] max-w-[300px] flex-col gap-1 py-1">
-      <div className="flex items-start gap-2">
-        {(options?.color || colorClass) && (
-          <div
-            className={cn("mt-1 h-3 w-1 shrink-0 rounded-sm", colorClass)}
-            style={options?.color ? { backgroundColor: options.color } : undefined}
-          />
-        )}
-        <div className="flex-1">
-          <div className="font-semibold leading-tight">{event.title}</div>
-          {!event.options?.hideTime && (
-            <div className="text-inverted-muted mt-1 text-xs">
-              {dayjs(event.start).format("HH:mm")} - {dayjs(event.end).format("HH:mm")}
-            </div>
-          )}
-          {event.description && (
-            <div className="text-inverted-muted mt-1 text-xs leading-snug">{event.description}</div>
-          )}
-          {options?.status && options.status !== "ACCEPTED" && (
-            <div className="text-inverted-muted mt-1 text-xs capitalize">
-              {options.status.toLowerCase().replace("_", " ")}
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-
-  const displayType = eventDuration < 40 ? "single-line" : eventDuration < 45 ? "multi-line" : "full";
-
-  return (
-    <Tooltip content={tooltipContent} className="max-w-none" side={tooltipSide}>
-      <Component
-        data-booking-calendar-event="true"
-        onClick={() => onEventClick?.(event)}
-        {...(options?.bookingUid ? { "data-booking-uid": options.bookingUid } : {})}
-        className={cn(
-          eventClasses({
-            status: options?.status,
-            disabled,
-            selected,
-            borderOnly: options?.borderOnly ?? false,
-          }),
-          options?.className,
-          (isHovered || selected) && "ring-brand-default shadow-lg ring-2 ring-offset-0"
-        )}
-        style={{
-          transition: "all 100ms ease-out",
-        }}
-      >
-        {(options?.color || colorClass) && (
-          <div
-            className={cn("-ml-1.5 mr-1.5 h-full w-[3px] shrink-0", colorClass)}
-            style={options?.color ? { backgroundColor: options.color } : undefined}
-          />
-        )}
-        <div className={cn("flex w-full", displayType !== "single-line" && "flex-col py-1")}>
-          {displayType === "single-line" && (
-            <div
-              className={cn(
-                "flex w-full shrink-0 gap-2 overflow-hidden text-ellipsis whitespace-nowrap text-left leading-4",
-                "items-center"
-              )}
-            >
-              <span>{event.title}</span>
-              {!event.options?.hideTime && (
-                <p className="text-subtle mt-1 w-full whitespace-nowrap text-left text-[10px] leading-none">
-                  {dayjs(event.start).format("HH:mm")} - {dayjs(event.end).format("HH:mm")}
-                </p>
-              )}
-            </div>
-          )}
-          {displayType !== "single-line" && (
-            <p className={cn("shrink-0 whitespace-nowrap text-left leading-4")}>{event.title}</p>
-          )}
-          {displayType !== "single-line" && !event.options?.hideTime && (
-            <p className="text-subtle mt-1 whitespace-nowrap text-left text-[10px] leading-none">
-              {dayjs(event.start).format("HH:mm")} - {dayjs(event.end).format("HH:mm")}
-            </p>
-          )}
-          {displayType === "full" && event.description && (
-            <p className="text-subtle mt-1 text-left text-[10px] leading-none">{event.description}</p>
-          )}
-        </div>
-      </Component>
-    </Tooltip>
-  );
-}

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

@@ -1,4 +0,0 @@
-export { AllDayEvents, isInAllDayBar } from "./all-day-events";
-export { AvailableCellsForDay, EmptyCell } from "./empty";
-export { Event } from "./event";
-export { EventList } from "./event-list";

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

@@ -1,24 +0,0 @@
-import React from "react";
-
-type Props = {
-  offsetHeight: number | undefined;
-  gridStopsPerDay: number;
-  children: React.ReactNode;
-  zIndex?: number;
-};
-
-export const SchedulerColumns = React.forwardRef<HTMLOListElement, Props>(function SchedulerColumns(
-  { offsetHeight, gridStopsPerDay, children, zIndex },
-  ref
-) {
-  return (
-    <ol
-      ref={ref}
-      className="scheduler-grid-row-template col-start-1 col-end-2 row-start-1 grid auto-cols-auto text-[0px] scheduler-wrapper"
-      style={{ marginTop: offsetHeight || "var(--gridDefaultSize)", zIndex }}
-      data-gridstopsperday={gridStopsPerDay}
-    >
-      {children}
-    </ol>
-  );
-});

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

@@ -1 +0,0 @@
-export { SchedulerHeading } from "./scheduler-heading";

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

@@ -1,40 +0,0 @@
-"use client";
-
-import { Button } from "../../../../components/ui/button";
-import dayjs from "../../../../vendor/dayjs";
-import { useCalendarStore } from "../../state/store";
-
-export function SchedulerHeading() {
-  const { startDate, endDate, handleDateChange } = useCalendarStore((state) => ({
-    startDate: dayjs(state.startDate),
-    endDate: dayjs(state.endDate),
-    handleDateChange: state.handleDateChange,
-  }));
-
-  return (
-    <header className="flex flex-none flex-col justify-between py-4 sm:flex-row sm:items-center">
-      <h1 className="text-emphasis text-xl font-semibold">
-        {startDate.format("MMM DD")}-{endDate.format("DD")}
-        <span className="text-subtle">,{startDate.format("YYYY")}</span>
-      </h1>
-      <div className="flex items-center space-x-2 rtl:space-x-reverse">
-        <div className="inline-flex items-center">
-          <Button
-            StartIcon="chevron-left"
-            variant="icon"
-            color="secondary"
-            aria-label="Previous Week"
-            onClick={() => handleDateChange("DECREMENT")}
-          />
-          <Button
-            StartIcon="chevron-right"
-            variant="icon"
-            color="secondary"
-            aria-label="Next Week"
-            onClick={() => handleDateChange("INCREMENT")}
-          />
-        </div>
-      </div>
-    </header>
-  );
-}

package/src/calendar-view/scheduler/components/horizontal-lines/index.tsx

@@ -1,48 +0,0 @@
-"use client";
-
-import { useId } from "react";
-import { cn } from "../../../../lib/utils";
-import type dayjs from "../../../../vendor/dayjs";
-import { useTimePreferences } from "../../../../vendor/time-preferences";
-import type { BorderColor } from "../../types/common";
-
-export const HorizontalLines = ({
-  hours,
-  containerOffsetRef,
-  borderColor,
-}: {
-  hours: dayjs.Dayjs[];
-  numberOfGridStopsPerCell: number;
-  containerOffsetRef: React.RefObject<HTMLDivElement>;
-  borderColor: BorderColor;
-}) => {
-  const { timeFormat } = useTimePreferences();
-  const finalHour = hours[hours.length - 1].add(1, "hour").minute(0).format(timeFormat);
-  const id = useId();
-
-  return (
-    <div
-      className={cn(
-        "pointer-events-none relative z-60 col-start-1 col-end-2 row-start-1 grid divide-y",
-        borderColor === "subtle" ? "divide-subtle" : "divide-default"
-      )}
-      style={{
-        gridTemplateRows: `repeat(${hours.length}, minmax(var(--gridDefaultSize),1fr)`,
-      }}
-    >
-      <div className="row-end-1 h-(--calendar-offset-top)" ref={containerOffsetRef} />
-      {hours.map((hour) => (
-        <div key={`${id}-${hour.get("hour")}`}>
-          <div className="text-muted sticky left-0 z-20 -ml-14 -mt-2.5 w-14 pr-2 text-right text-xs leading-5 rtl:-mr-14">
-            {hour.minute(0).format(timeFormat)}
-          </div>
-        </div>
-      ))}
-      <div key={`${id}-${finalHour}`}>
-        <div className="text-muted sticky left-0 z-20 -ml-14 -mt-2.5 w-14 pr-2 text-right text-xs leading-5 rtl:-mr-14">
-          {finalHour}
-        </div>
-      </div>
-    </div>
-  );
-};

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

@@ -1,23 +0,0 @@
-import { cn } from "../../../../lib/utils";
-
-export const Spinner = ({ className }: { className?: string }) => (
-  <div
-    className={cn(
-      "fixed left-[calc(50%+calc(var(--booker-meta-width,0px)/2))] top-1/2 z-80 h-10 w-10 -translate-x-1/2 -translate-y-1/2",
-      className
-    )}
-  >
-    <svg className="h-10 w-10" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-      <title>Loading</title>
-      <path
-        className="fill-default"
-        d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
-        opacity=".25"
-      />
-      <path
-        className="animate-spinning fill-emphasis origin-center"
-        d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
-      />
-    </svg>
-  </div>
-);

package/src/calendar-view/scheduler/components/vertical-lines/index.tsx

@@ -1,40 +0,0 @@
-import { cn } from "../../../../lib/utils";
-import type dayjs from "../../../../vendor/dayjs";
-import type { BorderColor } from "../../types/common";
-
-export const VerticalLines = ({ days, borderColor }: { days: dayjs.Dayjs[]; borderColor: BorderColor }) => {
-  const isRTL = () => {
-    let userLanguage = "en";
-
-    if (typeof window !== "undefined" && typeof navigator !== "undefined") {
-      const userLocale = navigator.language;
-      userLanguage = new Intl.Locale(userLocale).language;
-    }
-    return ["ar", "he", "fa", "ur"].includes(userLanguage);
-  };
-
-  const direction = isRTL() ? "rtl" : "ltr";
-
-  return (
-    <div
-      className={cn(
-        "pointer-events-none relative z-60 col-start-1 col-end-2 row-start-1 grid auto-cols-auto grid-rows-1 divide-x",
-        borderColor === "subtle" ? "divide-subtle" : "divide-default"
-      )}
-      dir={direction}
-      style={{
-        direction: direction,
-      }}
-    >
-      {days.map((_, i) => (
-        <div
-          key={`Key_vertical_${i}`}
-          className="row-span-full"
-          style={{
-            gridColumnStart: isRTL() ? days.length - i : i + 1,
-          }}
-        />
-      ))}
-    </div>
-  );
-};

package/src/calendar-view/scheduler/state/__tests__/store.test.ts

@@ -1,147 +0,0 @@
-import { describe, expect, it, vi } from "vitest";
-import type { CalendarEvent, TimeRange } from "../../types/state";
-import { createCalendarStore } from "../store";
-
-const ev = (id: number, start: string, end: string): CalendarEvent =>
-  ({
-    id,
-    start: new Date(start),
-    end: new Date(end),
-    title: `Event ${id}`,
-  }) as CalendarEvent;
-
-describe("createCalendarStore", () => {
-  it("seeds defaults and allows setView/setStartDate/setEndDate/setEvents", () => {
-    const store = createCalendarStore();
-    const state = store.getState();
-    expect(state.view).toBe("week");
-    expect(state.gridCellsPerHour).toBe(4);
-    expect(state.events).toEqual([]);
-
-    store.getState().setView("day");
-    expect(store.getState().view).toBe("day");
-
-    const newStart = new Date("2024-06-17T00:00:00Z");
-    const newEnd = new Date("2024-06-23T00:00:00Z");
-    store.getState().setStartDate(newStart);
-    store.getState().setEndDate(newEnd);
-    expect(store.getState().startDate).toBe(newStart);
-    expect(store.getState().endDate).toBe(newEnd);
-
-    store.getState().setEvents([ev(1, "2024-06-17T10:00", "2024-06-17T11:00")]);
-    expect(store.getState().events).toHaveLength(1);
-  });
-
-  it("accepts initial overrides", () => {
-    const store = createCalendarStore({ view: "day", showTimezone: true });
-    expect(store.getState().view).toBe("day");
-    expect(store.getState().showTimezone).toBe(true);
-  });
-
-  it("setSelectedEvent stores the event", () => {
-    const store = createCalendarStore();
-    const event = ev(42, "2024-06-17T10:00", "2024-06-17T11:00");
-    store.getState().setSelectedEvent(event);
-    expect(store.getState().selectedEvent).toBe(event);
-  });
-
-  it("initState sorts events when sortEvents=true and merges blocking ranges", () => {
-    const store = createCalendarStore();
-    const later = ev(1, "2024-06-17T12:00", "2024-06-17T13:00");
-    const earlier = ev(2, "2024-06-17T09:00", "2024-06-17T10:00");
-    const blocking: TimeRange[] = [
-      { start: new Date("2024-06-17T14:00"), end: new Date("2024-06-17T15:00") },
-      { start: new Date("2024-06-17T14:30"), end: new Date("2024-06-17T16:00") },
-    ];
-    store.getState().initState({
-      events: [later, earlier],
-      sortEvents: true,
-      blockingDates: blocking,
-      selectedBookingUid: "abc",
-      view: "week",
-      startDate: new Date("2024-06-17"),
-      endDate: new Date("2024-06-23"),
-      startHour: 0,
-      endHour: 23,
-      gridCellsPerHour: 4,
-      timezone: "UTC",
-      showBackgroundPattern: true,
-      showBorder: true,
-      borderColor: "default",
-      showTimezone: false,
-    } as never);
-
-    const state = store.getState();
-    expect(state.events?.[0].id).toBe(2);
-    expect(state.blockingDates).toHaveLength(1);
-    expect(state.selectedBookingUid).toBe("abc");
-  });
-
-  it("initState leaves events unsorted when sortEvents is false", () => {
-    const store = createCalendarStore();
-    const later = ev(1, "2024-06-17T12:00", "2024-06-17T13:00");
-    const earlier = ev(2, "2024-06-17T09:00", "2024-06-17T10:00");
-    store.getState().initState({
-      events: [later, earlier],
-      sortEvents: false,
-      blockingDates: [],
-      view: "week",
-      startDate: new Date("2024-06-17"),
-      endDate: new Date("2024-06-23"),
-      startHour: 0,
-      endHour: 23,
-      gridCellsPerHour: 4,
-      timezone: "UTC",
-      showBackgroundPattern: true,
-      showBorder: true,
-      borderColor: "default",
-      showTimezone: false,
-    } as never);
-
-    expect(store.getState().events?.[0].id).toBe(1);
-  });
-
-  it("handleDateChange INCREMENT advances startDate/endDate and calls onDateChange", () => {
-    const onDateChange = vi.fn();
-    const store = createCalendarStore({
-      view: "week",
-      startDate: new Date("2024-06-17T00:00:00Z"),
-      endDate: new Date("2024-06-23T00:00:00Z"),
-      onDateChange,
-    } as never);
-    store.getState().handleDateChange("INCREMENT");
-    expect(onDateChange).toHaveBeenCalledTimes(1);
-    expect(store.getState().startDate.getTime()).toBeGreaterThan(new Date("2024-06-17T00:00:00Z").getTime());
-  });
-
-  it("handleDateChange DECREMENT rewinds dates", () => {
-    const onDateChange = vi.fn();
-    const store = createCalendarStore({
-      view: "week",
-      startDate: new Date("2024-06-17T00:00:00Z"),
-      endDate: new Date("2024-06-23T00:00:00Z"),
-      onDateChange,
-    } as never);
-    store.getState().handleDateChange("DECREMENT");
-    expect(onDateChange).toHaveBeenCalledTimes(1);
-    expect(store.getState().startDate.getTime()).toBeLessThan(new Date("2024-06-17T00:00:00Z").getTime());
-  });
-
-  it("handleDateChange INCREMENT respects maxDate boundary", () => {
-    const onDateChange = vi.fn();
-    const originalStart = new Date("2024-06-17T00:00:00Z");
-    const originalEnd = new Date("2024-06-23T00:00:00Z");
-    const store = createCalendarStore({
-      view: "week",
-      startDate: originalStart,
-      endDate: originalEnd,
-      maxDate: new Date("2024-06-24T00:00:00Z"),
-      onDateChange,
-    } as never);
-    store.getState().handleDateChange("INCREMENT");
-    // Should not advance because endDate would exceed maxDate
-    expect(store.getState().startDate).toBe(originalStart);
-    expect(store.getState().endDate).toBe(originalEnd);
-    expect(onDateChange).not.toHaveBeenCalled();
-  });
-});