@calcom/atoms 2.8.0 → 2.8.2

package/src/calendar-view/scheduler/components/event/all-day-events.tsx

@@ -1,360 +0,0 @@
-"use client";
-
-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";
-import type { CalendarEvent } from "../../types/events";
-
-import { getStatusColorClass } from "./event";
-
-/**
- * Terminology
- * -----------
- * Span — one continuous all-day bar for a single event. May stretch across
- *        multiple day columns of the visible week (e.g. an 8-day Google
- *        Calendar busy block becomes a single span clipped to the view edges).
- * Lane — vertical stacking slot within the all-day row (0 = top). Overlapping
- *        spans get distinct lanes so neither hides the other; non-overlapping
- *        spans reuse the same lane.
- */
-
-export type AllDayEventSpan = {
-  event: CalendarEvent;
-  startCol: number;
-  endCol: number;
-  /** Fraction of the start column's day before the event begins (0 = column's left edge). */
-  startOffsetInDay: number;
-  /** Fraction of the end column's day after which the event ends (1 = column's right edge). */
-  endOffsetInDay: number;
-  /** Vertical lane (0 = top). Overlapping spans get distinct lanes so neither hides the other. */
-  lane: number;
-};
-
-// Per-lane height — fits the two stacked text lines (11px title + 10px time range)
-// with comfortable line-heights, matching the bar chrome used by Event.tsx.
-const LANE_HEIGHT_PX = 32;
-// Vertical gap between stacked lanes when overlapping events sit on top of each other.
-const LANE_GAP_PX = 2;
-// Top/bottom inset inside the row container so the first/last lane doesn't sit flush
-// against the row's border-b.
-const LANE_PADDING_PX = 4;
-const MS_PER_DAY = 24 * 60 * 60 * 1000;
-
-const clamp = (value: number, min: number, max: number) => Math.max(min, Math.min(max, value));
-
-export type UseAllDayEventSpansArgs = {
-  events: CalendarEvent[];
-  days: dayjs.Dayjs[];
-  timezone: string;
-};
-
-/**
- * Single source of truth for "does this event belong in the all-day bar?".
- * Used by both the all-day row (to include) and the time grid (to exclude),
- * so an event always renders in exactly one place. Pass `timezone` when the
- * caller already operates in a non-browser timezone (e.g. the all-day row).
- *
- * Returns true when either:
- *  1. `options.allDay` is set — caller forced the event into the all-day bar
- *     (e.g. a single-day Google Calendar OOO that runs 09:00–17:00 but should
- *     still display as a continuous bar at the top, not a 8h block in the grid).
- *  2. The event spans multiple calendar days in the given timezone (auto-detected).
- *
- * Examples:
- *  - 09:00–17:00 same day, no flag                → false (lives in time grid)
- *  - 09:00–17:00 same day, options.allDay = true  → true  (forced into all-day bar)
- *  - Mon 07:00 → Wed 08:00, no flag               → true  (multi-day, auto-detected)
- */
-export function isInAllDayBar(event: CalendarEvent, timezone?: string): boolean {
-  if (event.options?.allDay) return true;
-  const start = timezone ? dayjs(event.start).tz(timezone) : dayjs(event.start);
-  const end = timezone ? dayjs(event.end).tz(timezone) : dayjs(event.end);
-  return !start.isSame(end, "day");
-}
-
-/**
- * True when two half-open time ranges overlap (touching boundaries do not count
- * as overlapping).
- */
-export function isOverlapping(
-  aStart: dayjs.Dayjs,
-  aEnd: dayjs.Dayjs,
-  bStart: dayjs.Dayjs,
-  bEnd: dayjs.Dayjs
-): boolean {
-  return aStart.isBefore(bEnd) && aEnd.isAfter(bStart);
-}
-
-type LaneInterval = { start: number; end: number };
-
-/**
- * Greedy interval-to-lane assignment. Sorts intervals by start, then places each
- * one in the lowest lane whose previous occupant ends at or before this start
- * (touching boundaries are allowed to reuse the lane).
- *
- * Returns lane indices aligned to the original input order so callers can map
- * results back without tracking indices themselves.
- */
-export function assignLanes(intervals: LaneInterval[]): number[] {
-  const indexed = intervals.map((interval, i) => ({ interval, i }));
-  indexed.sort((a, b) => a.interval.start - b.interval.start);
-
-  const laneEnds: number[] = [];
-  const lanes = new Array<number>(intervals.length);
-
-  for (const { interval, i } of indexed) {
-    let assigned = laneEnds.findIndex((end) => end <= interval.start);
-    if (assigned === -1) {
-      assigned = laneEnds.length;
-      laneEnds.push(interval.end);
-    } else {
-      laneEnds[assigned] = interval.end;
-    }
-    lanes[i] = assigned;
-  }
-
-  return lanes;
-}
-
-/**
- * Computes which day columns each all-day event spans within the visible day grid.
- *
- * Day boundaries and event timestamps are normalized to the same `timezone` so
- * the overlap check is semantically aligned with the day columns the user sees.
- * Without this normalization, a UTC event near midnight would silently bleed
- * into the wrong local-tz column.
- */
-export function useAllDayEventSpans({ events, days, timezone }: UseAllDayEventSpansArgs): AllDayEventSpan[] {
-  // Precompute event boundaries in the viewer's timezone, and pick out events
-  // that belong in the all-day bar: anything explicitly flagged `options.allDay`
-  // OR anything that crosses a day boundary (multi-day busy block). Single-day
-  // events stay in the time grid.
-  const allDayEvents: { event: CalendarEvent; eventStart: dayjs.Dayjs; eventEnd: dayjs.Dayjs }[] = [];
-  for (const event of events) {
-    if (!isInAllDayBar(event, timezone)) continue;
-    const eventStart = dayjs(event.start).tz(timezone);
-    const eventEnd = dayjs(event.end).tz(timezone);
-    allDayEvents.push({ event, eventStart, eventEnd });
-  }
-  if (allDayEvents.length === 0) return [];
-
-  const firstDay = days[0];
-  const lastDay = days[days.length - 1];
-  if (!firstDay || !lastDay) return [];
-
-  // Precompute timezone-normalized day boundaries once so the inner event×day
-  // loop below is O(N+M) dayjs calls instead of O(N*M).
-  const tzDayStarts = days.map((d) => d.tz(timezone).startOf("day"));
-  const tzDayEnds = days.map((d) => d.tz(timezone).endOf("day"));
-  const viewStart = tzDayStarts[0];
-  const viewEnd = tzDayEnds[tzDayEnds.length - 1];
-
-  const spans: AllDayEventSpan[] = [];
-
-  for (const { event, eventStart, eventEnd } of allDayEvents) {
-    if (eventEnd.isBefore(viewStart) || eventStart.isAfter(viewEnd)) {
-      continue;
-    }
-
-    let startCol = -1;
-    let endCol = -1;
-
-    for (let i = 0; i < days.length; i++) {
-      if (isOverlapping(eventStart, eventEnd, tzDayStarts[i], tzDayEnds[i])) {
-        if (startCol === -1) startCol = i;
-        endCol = i;
-      }
-    }
-
-    if (startCol === -1) continue;
-
-    const startDiffMs = eventStart.diff(tzDayStarts[startCol]);
-    const endDiffMs = eventEnd.diff(tzDayStarts[endCol]);
-
-    // Negative when the event starts before the visible week — clamp pins the
-    // bar's left edge flush with the first column.
-    const startOffsetInDay = clamp(startDiffMs / MS_PER_DAY, 0, 1);
-    // > 1 when the event ends after the visible week — clamp pins the bar's
-    // right edge flush with the last column.
-    const endOffsetInDay = clamp(endDiffMs / MS_PER_DAY, 0, 1);
-
-    spans.push({ event, startCol, endCol, startOffsetInDay, endOffsetInDay, lane: 0 });
-  }
-
-  const lanes = assignLanes(
-    spans.map((span) => ({
-      start: span.startCol + span.startOffsetInDay,
-      end: span.endCol + span.endOffsetInDay,
-    }))
-  );
-  spans.forEach((span, i) => {
-    span.lane = lanes[i];
-  });
-
-  return spans;
-}
-
-type AllDayEventBarProps = {
-  span: AllDayEventSpan;
-  colCount: number;
-  timezone: string;
-};
-
-type AllDayEventBarViewModel = {
-  title: string;
-  timeRange: string;
-  dataTestId: string | undefined;
-  containerStyle: { left: string; width: string; top: number; height: number };
-  strip: { colorClass: string | undefined; backgroundColor: string | undefined } | null;
-};
-
-export function useAllDayEventBar({
-  span,
-  colCount,
-  timezone,
-}: AllDayEventBarProps): AllDayEventBarViewModel {
-  const { event, startCol, endCol, startOffsetInDay, endOffsetInDay, lane } = span;
-  const startPos = startCol + startOffsetInDay;
-  const endPos = endCol + endOffsetInDay;
-  const leftPercent = (startPos / colCount) * 100;
-  const widthPercent = ((endPos - startPos) / colCount) * 100;
-  const isMultiDay = startCol !== endCol;
-  const formatStr = isMultiDay ? "MMM D, HH:mm" : "HH:mm";
-  const timeRange = `${dayjs(event.start).tz(timezone).format(formatStr)} – ${dayjs(event.end)
-    .tz(timezone)
-    .format(formatStr)}`;
-
-  // Same color decision as Event.tsx: explicit options.color wins, otherwise
-  // derive a class from the booking status (ACCEPTED → green, PENDING → orange, …).
-  const colorClass = !event.options?.color ? getStatusColorClass(event.options?.status) : undefined;
-  const showStrip = Boolean(event.options?.color || colorClass);
-
-  return {
-    title: event.title,
-    timeRange,
-    dataTestId: event.options?.["data-test-id"],
-    containerStyle: {
-      left: `calc(${leftPercent}% + 2px)`,
-      width: `calc(${widthPercent}% - 4px)`,
-      top: LANE_PADDING_PX + lane * (LANE_HEIGHT_PX + LANE_GAP_PX),
-      height: LANE_HEIGHT_PX,
-    },
-    strip: showStrip ? { colorClass, backgroundColor: event.options?.color } : null,
-  };
-}
-
-function AllDayEventBar(props: AllDayEventBarProps) {
-  const { title, timeRange, dataTestId, containerStyle, strip } = useAllDayEventBar(props);
-
-  return (
-    <div
-      data-testid={dataTestId}
-      className="bg-subtle text-emphasis border-default absolute flex overflow-hidden rounded-[6px] border px-[6px] text-[11px] font-medium leading-tight"
-      style={containerStyle}
-    >
-      {strip && (
-        <div
-          data-testid="allday-color-strip"
-          className={cn("-ml-1.5 mr-1.5 h-full w-[3px] shrink-0", strip.colorClass)}
-          style={strip.backgroundColor ? { backgroundColor: strip.backgroundColor } : undefined}
-        />
-      )}
-      <div className="flex min-w-0 flex-1 flex-col justify-center">
-        <span className="truncate">{title}</span>
-        <span className="text-subtle truncate text-[10px]">{timeRange}</span>
-      </div>
-    </div>
-  );
-}
-
-type AllDayEventsProps = {
-  days: dayjs.Dayjs[];
-  showBorder: boolean;
-  borderColor: BorderColor;
-  timezone: string;
-};
-
-type DayColumnDividersProps = {
-  days: dayjs.Dayjs[];
-  borderColor: BorderColor;
-};
-
-function useDayColumnDividers({ days, borderColor }: DayColumnDividersProps) {
-  const dividerClass = borderColor === "subtle" ? "border-l-subtle border-l" : "border-l-default border-l";
-  const gridTemplateColumns = `repeat(${days.length}, 1fr)`;
-  const columns = days.map((day, i) => ({
-    key: day.toISOString(),
-    className: i > 0 ? dividerClass : "",
-  }));
-  return { gridTemplateColumns, columns };
-}
-
-function DayColumnDividers(props: DayColumnDividersProps) {
-  const { gridTemplateColumns, columns } = useDayColumnDividers(props);
-  return (
-    <div className="grid h-full auto-cols-fr" style={{ gridTemplateColumns }}>
-      {columns.map(({ key, className }) => (
-        <div key={key} className={className} />
-      ))}
-    </div>
-  );
-}
-
-type UseAllDayEventsContainerArgs = {
-  days: dayjs.Dayjs[];
-  timezone: string;
-};
-
-function useAllDayEventsContainer({ days, timezone }: UseAllDayEventsContainerArgs) {
-  const events = useCalendarStore((state) => state.events);
-  const spans = useAllDayEventSpans({ events, days, timezone });
-  const laneCount = spans.reduce((max, s) => Math.max(max, s.lane + 1), 0);
-  const containerHeight = LANE_PADDING_PX * 2 + laneCount * LANE_HEIGHT_PX + (laneCount - 1) * LANE_GAP_PX;
-  return { spans, containerHeight, isEmpty: spans.length === 0 };
-}
-
-/**
- * Renders all-day / multi-day events as continuous bars spanning across
- * day columns, similar to Google Calendar's all-day event row.
- */
-export function AllDayEvents({ days, showBorder, borderColor, timezone }: AllDayEventsProps) {
-  const { t } = useLocale();
-  const { spans, containerHeight, isEmpty } = useAllDayEventsContainer({ days, timezone });
-
-  if (isEmpty) return null;
-
-  return (
-    <div
-      className={cn(
-        "bg-default dark:bg-cal-muted flex border-b",
-        borderColor === "subtle" ? "border-b-subtle" : "border-b-default",
-        showBorder && (borderColor === "subtle" ? "border-r-subtle border-r" : "border-r-default border-r")
-      )}
-    >
-      <div
-        data-testid="allday-row-label"
-        className={cn(
-          "text-subtle flex w-16 shrink-0 items-center justify-center text-[10px]",
-          showBorder &&
-            (borderColor === "subtle"
-              ? "border-l-subtle border-r-subtle border-l border-r"
-              : "border-l-default border-r-default border-l border-r")
-        )}
-      >
-        {t("all_day")}
-      </div>
-      {/* Grid of day columns for all-day event bars */}
-      <div className="relative flex-auto" style={{ height: containerHeight }}>
-        <DayColumnDividers days={days} borderColor={borderColor} />
-        {/* All-day event bars overlaid on the grid */}
-        <div className="absolute inset-0 px-0.5">
-          {spans.map((span) => (
-            <AllDayEventBar key={span.event.id} span={span} colCount={days.length} timezone={timezone} />
-          ))}
-        </div>
-      </div>
-    </div>
-  );
-}

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

@@ -1,229 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-import { useMemo } from "react";
-import { shallow } from "zustand/shallow";
-import { cn } from "../../../../lib/utils";
-import type { Dayjs } from "../../../../vendor/dayjs";
-import dayjs from "../../../../vendor/dayjs";
-import { useTimePreferences } from "../../../../vendor/time-preferences";
-import { useCalendarStore } from "../../state/store";
-import type { CalendarAvailableTimeslots, OutOfOfficeRenderProps } from "../../types/state";
-import type { GridCellToDateProps } from "../../utils";
-import { gridCellToDateTime } from "../../utils";
-import { DefaultOutOfOfficeSlot } from "../default-out-of-office-slot";
-
-type EmptyCellProps = GridCellToDateProps & {
-  isDisabled?: boolean;
-  topOffsetMinutes?: number;
-};
-
-export function EmptyCell(props: EmptyCellProps) {
-  const cellToDate = gridCellToDateTime({
-    day: props.day,
-    gridCellIdx: props.gridCellIdx,
-    totalGridCells: props.totalGridCells,
-    selectionLength: props.selectionLength,
-    startHour: props.startHour,
-    timezone: props.timezone,
-  });
-
-  const minutesFromStart = (cellToDate.hour() - props.startHour) * 60 + cellToDate.minute();
-
-  return <Cell topOffsetMinutes={minutesFromStart} timeSlot={dayjs(cellToDate).tz(props.timezone)} />;
-}
-
-type AvailableCellProps = {
-  timezone: string;
-  availableSlots: CalendarAvailableTimeslots;
-  day: GridCellToDateProps["day"];
-  startHour: GridCellToDateProps["startHour"];
-  renderOutOfOffice?: (props: OutOfOfficeRenderProps) => ReactNode;
-};
-
-export function AvailableCellsForDay({
-  timezone,
-  availableSlots,
-  day,
-  startHour,
-  renderOutOfOffice,
-}: AvailableCellProps) {
-  const date = dayjs(day);
-  const dateFormatted = date.format("YYYY-MM-DD");
-  const slotsForToday = availableSlots && availableSlots[dateFormatted];
-
-  const slots = useMemo(() => {
-    const calculatedSlots: {
-      slot: CalendarAvailableTimeslots[string][number];
-      topOffsetMinutes: number;
-      firstSlot?: CalendarAvailableTimeslots[string][number];
-      timezone?: string;
-    }[] = [];
-
-    let firstSlotIndex = -1;
-    let lastSlotIndex = -1;
-    let areAllSlotsAway = true;
-    let startEndTimeDuration = 0;
-
-    slotsForToday?.forEach((slot, index) => {
-      const startTime = dayjs(slot.start).tz(timezone);
-      const topOffsetMinutes = (startTime.hour() - startHour) * 60 + startTime.minute();
-      calculatedSlots.push({ slot, topOffsetMinutes });
-
-      if (!slot.away) {
-        areAllSlotsAway = false;
-      } else {
-        if (firstSlotIndex === -1) {
-          firstSlotIndex = index;
-        }
-        lastSlotIndex = index;
-      }
-    });
-
-    if (areAllSlotsAway && firstSlotIndex !== -1) {
-      const firstSlot = slotsForToday[firstSlotIndex];
-      const lastSlot = slotsForToday[lastSlotIndex];
-      startEndTimeDuration = dayjs(lastSlot.end).diff(dayjs(firstSlot.start), "minutes");
-
-      if (firstSlot.toUser == null && !firstSlot.showNotePublicly) {
-        return null;
-      }
-
-      return {
-        slots: calculatedSlots,
-        startEndTimeDuration,
-        firstSlot,
-        timezone,
-      };
-    }
-
-    return { slots: calculatedSlots, startEndTimeDuration };
-  }, [slotsForToday, startHour, timezone]);
-
-  if (slots === null) return null;
-
-  if (slots.startEndTimeDuration) {
-    const { firstSlot, startEndTimeDuration } = slots;
-    const renderOOO = renderOutOfOffice ?? ((p: OutOfOfficeRenderProps) => <DefaultOutOfOfficeSlot {...p} />);
-    return (
-      <CustomCell
-        timeSlot={dayjs(firstSlot?.start).tz(slots.timezone)}
-        topOffsetMinutes={slots.slots[0]?.topOffsetMinutes}
-        startEndTimeDuration={startEndTimeDuration}
-      >
-        {renderOOO({
-          fromUser: firstSlot?.fromUser,
-          toUser: firstSlot?.toUser,
-          reason: firstSlot?.reason,
-          emoji: firstSlot?.emoji,
-          notes: firstSlot?.notes,
-          showNotePublicly: firstSlot?.showNotePublicly,
-          borderDashed: false,
-          date: dateFormatted,
-          className: "pb-0",
-        })}
-      </CustomCell>
-    );
-  }
-
-  return (
-    <>
-      {slots.slots.map((slot, index) => (
-        <Cell
-          key={index}
-          timeSlot={dayjs(slot.slot.start).tz(timezone)}
-          topOffsetMinutes={slot.topOffsetMinutes}
-        />
-      ))}
-    </>
-  );
-}
-
-type CellProps = {
-  isDisabled?: boolean;
-  topOffsetMinutes?: number;
-  timeSlot: Dayjs;
-};
-
-function Cell({ isDisabled, topOffsetMinutes, timeSlot }: CellProps) {
-  const { timeFormat } = useTimePreferences();
-
-  const { onEmptyCellClick, hoverEventDuration } = useCalendarStore(
-    (state) => ({
-      onEmptyCellClick: state.onEmptyCellClick,
-      hoverEventDuration: state.hoverEventDuration,
-    }),
-    shallow
-  );
-
-  return (
-    <div
-      className={cn(
-        "group flex w-[calc(100%-1px)] items-center justify-center",
-        isDisabled && "pointer-events-none",
-        !isDisabled && "bg-default dark:bg-cal-muted",
-        topOffsetMinutes && "absolute"
-      )}
-      data-disabled={isDisabled}
-      data-slot={timeSlot.toISOString()}
-      data-testid="calendar-empty-cell"
-      style={{
-        height: `calc(${hoverEventDuration}*var(--one-minute-height))`,
-        overflow: "visible",
-        top: topOffsetMinutes ? `calc(${topOffsetMinutes}*var(--one-minute-height))` : undefined,
-      }}
-      onClick={() => {
-        onEmptyCellClick?.(timeSlot.toDate());
-      }}
-    >
-      {!isDisabled && hoverEventDuration !== 0 && (
-        <div
-          className={cn(
-            "bg-brand-default hover:bg-brand-default text-brand dark:border-emphasis absolute hidden rounded-[4px] p-[6px] text-xs font-semibold leading-5 group-hover:flex group-hover:cursor-pointer",
-            hoverEventDuration && hoverEventDuration > 15 && "items-start pt-3",
-            hoverEventDuration && hoverEventDuration < 15 && "items-center"
-          )}
-          style={{
-            height: `calc(${hoverEventDuration}*var(--one-minute-height) - 2px)`,
-            zIndex: 80,
-            width: "calc(100% - 2px)",
-          }}
-        >
-          <div className="text-ellipsis leading-0">{timeSlot.format(timeFormat)}</div>
-        </div>
-      )}
-    </div>
-  );
-}
-
-function CustomCell({
-  timeSlot,
-  children,
-  topOffsetMinutes,
-  startEndTimeDuration,
-}: CellProps & { children: React.ReactNode; startEndTimeDuration?: number }) {
-  return (
-    <div
-      className={cn(
-        "bg-default dark:bg-cal-muted group absolute z-65 flex w-[calc(100%-1px)] items-center justify-center"
-      )}
-      data-slot={timeSlot.toISOString()}
-      style={{
-        top: topOffsetMinutes ? `calc(${topOffsetMinutes}*var(--one-minute-height))` : undefined,
-        overflow: "visible",
-      }}
-    >
-      <div
-        className={cn(
-          "dark:border-emphasis bg-default dark:bg-cal-muted cursor-pointer rounded-[4px] p-[6px] text-xs font-semibold dark:text-white"
-        )}
-        style={{
-          height: `calc(${startEndTimeDuration}*var(--one-minute-height) - 2px)`,
-          width: "calc(100% - 2px)",
-        }}
-      >
-        {children}
-      </div>
-    </div>
-  );
-}