@calcom/atoms 2.7.2 → 2.8.1

package/src/calendar-view/scheduler/utils/__tests__/utils.test.ts

@@ -1,133 +0,0 @@
-import { describe, expect, it } from "vitest";
-import dayjs from "../../../../vendor/dayjs";
-import type { TimeRange } from "../../types/state";
-import {
-  calculateHourSizeInPx,
-  getDaysBetweenDates,
-  getHoursToDisplay,
-  gridCellToDateTime,
-  mergeOverlappingDateRanges,
-  weekdayDates,
-} from "../index";
-
-describe("weekdayDates", () => {
-  it("rewinds to the requested weekStart and returns an inclusive range", () => {
-    // 2024-06-12 is a Wednesday (day === 3). Rewinding to Sunday (0) lands on 2024-06-09.
-    const { startDate, endDate } = weekdayDates(0, new Date("2024-06-12T00:00:00Z"));
-    expect(startDate.getUTCDay()).toBe(0);
-    expect(endDate.getTime() - startDate.getTime()).toBe(6 * 24 * 60 * 60 * 1000);
-  });
-
-  it("accepts a custom length", () => {
-    const { startDate, endDate } = weekdayDates(1, new Date("2024-06-17T00:00:00Z"), 13);
-    expect(endDate.getTime() - startDate.getTime()).toBe(13 * 24 * 60 * 60 * 1000);
-  });
-});
-
-describe("gridCellToDateTime", () => {
-  it("returns the day start when gridCellIdx is 0 and startHour is 0", () => {
-    const cell = gridCellToDateTime({
-      day: dayjs("2024-06-12T00:00:00Z").utc(),
-      gridCellIdx: 0,
-      totalGridCells: 4,
-      selectionLength: 3,
-      startHour: 0,
-      timezone: "UTC",
-    });
-    expect(cell.hour()).toBe(0);
-    expect(cell.minute()).toBe(0);
-  });
-
-  it("advances to the next hour when selectionLength + gridCellIdx cross an hour boundary", () => {
-    const cell = gridCellToDateTime({
-      day: dayjs("2024-06-12T00:00:00Z").utc(),
-      gridCellIdx: 1,
-      totalGridCells: 2,
-      selectionLength: 1,
-      startHour: 9,
-      timezone: "UTC",
-    });
-    expect(cell.hour()).toBe(10);
-  });
-});
-
-describe("getDaysBetweenDates", () => {
-  it("returns day-long range between two dates capped at 7 days", () => {
-    const dates = getDaysBetweenDates(new Date("2024-06-10T00:00:00Z"), new Date("2024-06-20T00:00:00Z"));
-    expect(dates).toHaveLength(7);
-    expect(dates[0].format("YYYY-MM-DD")).toBe(dayjs("2024-06-10").format("YYYY-MM-DD"));
-  });
-
-  it("returns a single-day array when from === to", () => {
-    const dates = getDaysBetweenDates(new Date("2024-06-10T00:00:00Z"), new Date("2024-06-10T00:00:00Z"));
-    expect(dates).toHaveLength(1);
-  });
-});
-
-describe("getHoursToDisplay", () => {
-  it("returns inclusive hour range for UTC", () => {
-    const hours = getHoursToDisplay(8, 12, "UTC");
-    expect(hours).toHaveLength(5);
-    expect(hours[0].hour()).toBe(8);
-    expect(hours[hours.length - 1].hour()).toBe(12);
-  });
-
-  it("returns single hour when start === end", () => {
-    const hours = getHoursToDisplay(10, 10, "UTC");
-    expect(hours).toHaveLength(1);
-    expect(hours[0].hour()).toBe(10);
-  });
-});
-
-describe("mergeOverlappingDateRanges", () => {
-  it("merges overlapping ranges", () => {
-    const ranges: TimeRange[] = [
-      { start: new Date("2024-06-10T09:00"), end: new Date("2024-06-10T10:00") },
-      { start: new Date("2024-06-10T09:30"), end: new Date("2024-06-10T11:00") },
-    ];
-    const merged = mergeOverlappingDateRanges(ranges);
-    expect(merged).toHaveLength(1);
-    expect(merged[0].end.getTime()).toBe(new Date("2024-06-10T11:00").getTime());
-  });
-
-  it("leaves non-overlapping ranges intact", () => {
-    const ranges: TimeRange[] = [
-      { start: new Date("2024-06-10T09:00"), end: new Date("2024-06-10T10:00") },
-      { start: new Date("2024-06-10T11:00"), end: new Date("2024-06-10T12:00") },
-    ];
-    const merged = mergeOverlappingDateRanges(ranges);
-    expect(merged).toHaveLength(2);
-  });
-
-  it("sorts by start time before merging", () => {
-    const ranges: TimeRange[] = [
-      { start: new Date("2024-06-10T11:00"), end: new Date("2024-06-10T12:00") },
-      { start: new Date("2024-06-10T09:00"), end: new Date("2024-06-10T10:00") },
-    ];
-    const merged = mergeOverlappingDateRanges(ranges);
-    expect(merged).toHaveLength(2);
-    expect(merged[0].start.getTime()).toBe(new Date("2024-06-10T09:00").getTime());
-  });
-
-  it("returns empty array for empty input", () => {
-    expect(mergeOverlappingDateRanges([])).toEqual([]);
-  });
-});
-
-describe("calculateHourSizeInPx", () => {
-  it("computes px per hour using window height and grid offset", () => {
-    // jsdom provides window; default innerHeight is 768.
-    const mockElement = {
-      getBoundingClientRect: () => ({ top: 100 }),
-    } as unknown as HTMLOListElement;
-    const px = calculateHourSizeInPx(mockElement, 9, 17);
-    expect(px).toBeGreaterThan(0);
-  });
-
-  it("uses default offset when grid element is null", () => {
-    const px = calculateHourSizeInPx(null, 9, 17);
-    expect(px).toBeGreaterThan(0);
-    // Should not be NaN or Infinity
-    expect(Number.isFinite(px)).toBe(true);
-  });
-});

package/src/calendar-view/scheduler/utils/index.ts

@@ -1,100 +0,0 @@
-import dayjs from "../../../vendor/dayjs";
-import type { TimeRange } from "../types/state";
-
-export function weekdayDates(weekStart = 0, startDate: Date, length = 6) {
-  const tmpStartDate = startDate;
-  while (tmpStartDate.getDay() !== weekStart) {
-    tmpStartDate.setDate(tmpStartDate.getDate() - 1);
-  }
-  return {
-    startDate: tmpStartDate,
-    endDate: new Date(tmpStartDate.getTime() + length * 24 * 60 * 60 * 1000),
-  };
-}
-
-export type GridCellToDateProps = {
-  day: dayjs.Dayjs;
-  gridCellIdx: number;
-  totalGridCells: number;
-  selectionLength: number;
-  startHour: number;
-  timezone: string;
-};
-
-export function gridCellToDateTime({
-  day,
-  gridCellIdx,
-  totalGridCells,
-  selectionLength,
-  startHour,
-  timezone,
-}: GridCellToDateProps) {
-  const minutesInSelection = (selectionLength + 1) * 60;
-  const minutesPerCell = minutesInSelection / totalGridCells;
-  const minutesIntoSelection = minutesPerCell * gridCellIdx;
-
-  const cellDateTime = dayjs(day)
-    .tz(timezone)
-    .startOf("day")
-    .add(minutesIntoSelection, "minutes")
-    .add(startHour, "hours");
-  return cellDateTime;
-}
-
-export function getDaysBetweenDates(dateFrom: Date, dateTo: Date) {
-  const dates = [];
-  let startDate = dayjs(dateFrom).hour(0).minute(0).second(0).millisecond(0);
-
-  dates.push(startDate);
-  const endDate = dayjs(dateTo).hour(0).minute(0).second(0).millisecond(0);
-
-  while (startDate.isBefore(endDate)) {
-    dates.push(startDate.add(1, "day"));
-    startDate = startDate.add(1, "day");
-  }
-
-  return dates.slice(0, 7);
-}
-
-export function getHoursToDisplay(startHour: number, endHour: number, timezone?: string) {
-  const dates = [];
-  let startDate = dayjs("1970-01-01").tz(timezone).hour(startHour);
-  dates.push(startDate);
-  const endDate = dayjs("1970-01-01").tz(timezone).hour(endHour);
-  while (startDate.isBefore(endDate)) {
-    dates.push(startDate.add(1, "hour"));
-    startDate = startDate.add(1, "hour");
-  }
-  return dates;
-}
-
-export function mergeOverlappingDateRanges(dateRanges: TimeRange[]) {
-  dateRanges.sort((a, b) => {
-    return a.start.getTime() - b.start.getTime();
-  });
-  const mergedDateRanges: TimeRange[] = [];
-  for (let i = 0; i < dateRanges.length; i++) {
-    if (mergedDateRanges.length === 0) {
-      mergedDateRanges.push(dateRanges[i]);
-    } else {
-      const lastMergedDateRange = mergedDateRanges[mergedDateRanges.length - 1];
-      const currentDateRange = dateRanges[i];
-      if (lastMergedDateRange.end.getTime() >= currentDateRange.start.getTime()) {
-        lastMergedDateRange.end = currentDateRange.end;
-      } else {
-        mergedDateRanges.push(currentDateRange);
-      }
-    }
-  }
-  return mergedDateRanges;
-}
-
-export function calculateHourSizeInPx(
-  gridElementRef: HTMLOListElement | null,
-  startHour: number,
-  endHour: number
-) {
-  const gapOnBottom = 50;
-  const offsetFromTop = gridElementRef?.getBoundingClientRect().top ?? 65;
-  return (window.innerHeight - offsetFromTop - gapOnBottom) / (endHour - startHour);
-}

package/src/calendar-view/scheduler/utils/overlap.ts

@@ -1,175 +0,0 @@
-import dayjs from "../../../vendor/dayjs";
-import type { CalendarEvent } from "../types/events";
-
-export interface OverlapLayoutConfig {
-  baseZIndex?: number;
-  safetyMarginPercent?: number;
-  minWidthPercent?: number;
-  curveExponent?: number;
-}
-
-export interface EventLayout {
-  event: CalendarEvent;
-  leftOffsetPercent: number;
-  widthPercent: number;
-  baseZIndex: number;
-  groupIndex: number;
-  indexInGroup: number;
-}
-
-const DEFAULT_CONFIG: Required<OverlapLayoutConfig> = {
-  baseZIndex: 60,
-  safetyMarginPercent: 0.5,
-  minWidthPercent: 25,
-  curveExponent: 1.3,
-};
-
-function calculateVariableWidths(
-  groupSize: number,
-  minWidthPercent: number,
-  curveExponent: number
-): number[] {
-  if (groupSize <= 1) return [100];
-
-  let wFirst: number;
-  let wLast: number;
-
-  if (groupSize === 2) {
-    wFirst = 80;
-    wLast = 50;
-  } else if (groupSize === 3) {
-    wFirst = 55;
-    wLast = 33;
-  } else if (groupSize === 4) {
-    wFirst = 40;
-    wLast = 25;
-  } else {
-    wFirst = Math.max(30, 40 - 3 * (groupSize - 4));
-    wLast = minWidthPercent;
-  }
-
-  const widths: number[] = [];
-  for (let i = 0; i < groupSize; i++) {
-    const t = groupSize > 1 ? i / (groupSize - 1) : 0;
-    const easedT = (1 - t) ** curveExponent;
-    const width = wLast + (wFirst - wLast) * easedT;
-    widths.push(Math.max(minWidthPercent, width));
-  }
-
-  return widths;
-}
-
-function round3(value: number): number {
-  return Number(value.toFixed(3));
-}
-
-function floor3(value: number): number {
-  return Math.floor(value * 1000) / 1000;
-}
-
-export function sortEvents(events: CalendarEvent[]): CalendarEvent[] {
-  return [...events].sort((a, b) => {
-    const startA = dayjs(a.start);
-    const startB = dayjs(b.start);
-    const startDiff = startA.diff(startB);
-
-    if (startDiff !== 0) return startDiff;
-
-    const endA = dayjs(a.end);
-    const endB = dayjs(b.end);
-    return endB.diff(endA);
-  });
-}
-
-export function buildOverlapGroups(sortedEvents: CalendarEvent[]): CalendarEvent[][] {
-  if (sortedEvents.length === 0) return [];
-
-  const groups: CalendarEvent[][] = [];
-  let currentGroup: CalendarEvent[] = [sortedEvents[0]];
-  let currentGroupEnd = dayjs(sortedEvents[0].end);
-
-  for (let i = 1; i < sortedEvents.length; i++) {
-    const event = sortedEvents[i];
-    const eventStart = dayjs(event.start);
-    const eventEnd = dayjs(event.end);
-
-    if (eventStart.isBefore(currentGroupEnd)) {
-      currentGroup.push(event);
-      if (eventEnd.isAfter(currentGroupEnd)) {
-        currentGroupEnd = eventEnd;
-      }
-    } else {
-      groups.push(currentGroup);
-      currentGroup = [event];
-      currentGroupEnd = eventEnd;
-    }
-  }
-
-  groups.push(currentGroup);
-  return groups;
-}
-
-export function calculateEventLayouts(
-  events: CalendarEvent[],
-  config: OverlapLayoutConfig = {}
-): EventLayout[] {
-  const { baseZIndex, safetyMarginPercent, minWidthPercent, curveExponent } = {
-    ...DEFAULT_CONFIG,
-    ...config,
-  };
-
-  const sortedEvents = sortEvents(events);
-  const groups = buildOverlapGroups(sortedEvents);
-
-  const layouts: EventLayout[] = [];
-
-  groups.forEach((group, groupIndex) => {
-    const groupSize = group.length;
-    const widths = calculateVariableWidths(groupSize, minWidthPercent, curveExponent);
-    const Rmax = 100 - safetyMarginPercent;
-
-    if (groupSize === 1) {
-      const width = floor3(Math.min(widths[0], Rmax));
-      layouts.push({
-        event: group[0],
-        leftOffsetPercent: 0,
-        widthPercent: width,
-        baseZIndex: baseZIndex,
-        groupIndex,
-        indexInGroup: 0,
-      });
-    } else {
-      const Rmin = widths[0];
-
-      group.forEach((event, indexInGroup) => {
-        const t = indexInGroup / (groupSize - 1);
-        const ri = Rmin + (Rmax - Rmin) * t;
-        const leftRaw = ri - widths[indexInGroup];
-        const left = round3(leftRaw);
-
-        const maxWidthCap = Rmax - left;
-        const widthCap = Math.min(widths[indexInGroup], maxWidthCap);
-        const width = floor3(Math.max(0, widthCap));
-
-        layouts.push({
-          event,
-          leftOffsetPercent: left,
-          widthPercent: width,
-          baseZIndex: baseZIndex + indexInGroup,
-          groupIndex,
-          indexInGroup,
-        });
-      });
-    }
-  });
-
-  return layouts;
-}
-
-export function createLayoutMap(layouts: EventLayout[]): Map<number, EventLayout> {
-  const map = new Map<number, EventLayout>();
-  layouts.forEach((layout) => {
-    map.set(layout.event.id, layout);
-  });
-  return map;
-}

package/src/calendar-view/wrappers/calendar-view-platform-wrapper.tsx

@@ -1,41 +0,0 @@
-import { BookerStoreProvider } from "../../booker/booker-store-provider";
-
-import { CalendarViewComponent } from "../calendar-view-component";
-import { EventTypeCalendarViewComponent } from "../event-type-calendar-view-component";
-
-export type CalendarViewPlatformWrapperAtomPropsForIndividual = {
-  username: string | string[];
-  eventSlug: string;
-};
-
-export type CalendarViewPlatformWrapperAtomPropsForTeam = {
-  teamId: number;
-  eventSlug: string;
-};
-
-type EventTypeCalendarViewProps = { isEventTypeView: true } & (
-  | (CalendarViewPlatformWrapperAtomPropsForIndividual & { teamId?: number })
-  | (CalendarViewPlatformWrapperAtomPropsForTeam & { username?: string | string[] })
-);
-
-type CalendarViewComponentProps = {
-  isEventTypeView?: false;
-};
-
-type CalendarViewProps = EventTypeCalendarViewProps | CalendarViewComponentProps;
-
-const CalendarViewPlatformWrapperComponent = (props: CalendarViewProps) => {
-  if (!props.isEventTypeView) {
-    return <CalendarViewComponent />;
-  }
-
-  return <EventTypeCalendarViewComponent {...props} />;
-};
-
-export const CalendarViewPlatformWrapper = (props: CalendarViewProps) => {
-  return (
-    <BookerStoreProvider>
-      <CalendarViewPlatformWrapperComponent {...props} />
-    </BookerStoreProvider>
-  );
-};

package/src/components/atoms-wrapper.tsx

@@ -1,22 +0,0 @@
-import type { ReactNode } from "react";
-import { CALCOM_ATOMS_WRAPPER_CLASS } from "../constants/styles";
-import { useAtomsContext } from "../hooks/use-atoms-context";
-import { cn } from "../lib/utils";
-
-export const AtomsWrapper = ({
-  children,
-  customClassName,
-}: {
-  children: ReactNode;
-  customClassName?: string;
-}) => {
-  const { options } = useAtomsContext();
-  return (
-    <div
-      dir={options?.readingDirection ?? "ltr"}
-      className={cn(`${CALCOM_ATOMS_WRAPPER_CLASS} m-0 w-auto bg-transparent p-0`, customClassName)}
-    >
-      {children}
-    </div>
-  );
-};

package/src/components/ui/address-input.tsx

@@ -1,36 +0,0 @@
-import type { ChangeEvent } from "react";
-
-import { cn } from "../../lib/utils";
-import { Icon } from "./icon";
-import { Input } from "./text-field";
-
-export type AddressInputProps = {
-  value: string;
-  id?: string;
-  placeholder?: string;
-  required?: boolean;
-  onChange: (val: string) => void;
-  className?: string;
-  disabled?: boolean;
-};
-
-export function AddressInput({ value, onChange, ...rest }: AddressInputProps) {
-  return (
-    <div className="relative flex items-center">
-      <Icon
-        name="map-pin"
-        className="text-muted absolute left-0.5 ml-3 h-4 w-4 -translate-y-1/2"
-        style={{ top: "44%" }}
-      />
-      <Input
-        {...rest}
-        autoComplete="address-line1"
-        value={value}
-        onChange={(e: ChangeEvent<HTMLInputElement>) => {
-          onChange(e.target.value);
-        }}
-        className={cn("pl-10", rest?.className)}
-      />
-    </div>
-  );
-}

package/src/components/ui/alert.tsx

@@ -1,67 +0,0 @@
-import { cva } from "class-variance-authority";
-import type { ComponentType, ReactNode, SVGProps } from "react";
-import { forwardRef } from "react";
-
-import { cn } from "../../lib/utils";
-import { AlertCircleIcon, CircleXIcon, InfoIcon, TriangleAlertIcon } from "./icons";
-
-export const alertStyles = cva("rounded-[10px] p-3", {
-  variants: {
-    severity: {
-      neutral: "bg-default border-subtle border text-default",
-      info: "bg-semantic-info-subtle text-semantic-info",
-      warning: "bg-semantic-attention-subtle text-semantic-attention",
-      error: "bg-semantic-error-subtle text-semantic-error",
-    },
-  },
-  defaultVariants: {
-    severity: "neutral",
-  },
-});
-
-export interface AlertProps {
-  title?: ReactNode;
-  message?: ReactNode;
-  actions?: ReactNode;
-  className?: string;
-  iconClassName?: string;
-  severity: "warning" | "error" | "info" | "neutral";
-  CustomIcon?: ComponentType<SVGProps<SVGSVGElement>>;
-  customIconColor?: string;
-}
-
-const severityIcons: Record<AlertProps["severity"], ComponentType<SVGProps<SVGSVGElement>>> = {
-  error: CircleXIcon,
-  warning: TriangleAlertIcon,
-  info: InfoIcon,
-  neutral: AlertCircleIcon,
-};
-
-export const Alert = forwardRef<HTMLDivElement, AlertProps>((props, ref) => {
-  const { severity, iconClassName, CustomIcon, customIconColor } = props;
-  const IconComponent = CustomIcon ?? severityIcons[severity];
-
-  return (
-    <div data-testid="alert" ref={ref} className={alertStyles({ severity, className: props.className })}>
-      <div className="relative flex md:flex-row">
-        <div className={cn("mr-2 shrink-0", props.title ? "" : "mt-0.5")}>
-          <IconComponent
-            aria-hidden="true"
-            className={cn("h-4 w-4", iconClassName, CustomIcon ? (customIconColor ?? "text-default") : "")}
-          />
-        </div>
-        <div className="flex grow flex-col sm:flex-row">
-          <div className="stack-y-1 ltr:ml-3 rtl:mr-3">
-            {props.title && <h3 className="text-sm font-medium leading-none">{props.title}</h3>}
-            {props.message && <div className="text-sm leading-5">{props.message}</div>}
-          </div>
-          {props.actions && (
-            <div className="ml-auto mt-auto text-sm sm:mt-0 md:relative">{props.actions}</div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-});
-
-Alert.displayName = "Alert";

package/src/components/ui/app-list-card.tsx

@@ -1,94 +0,0 @@
-"use client";
-
-import type { ReactNode } from "react";
-
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { cn } from "../../lib/utils";
-import { Badge } from "./badge";
-import { AlertCircleIcon } from "./icons";
-
-type ShouldHighlight =
-  | {
-      slug: string;
-      shouldHighlight: true;
-    }
-  | {
-      shouldHighlight?: never;
-      slug?: never;
-    };
-
-export type AppCardClassNames = {
-  container: string;
-  title?: string;
-  description?: string;
-};
-
-export type AppListCardProps = {
-  logo?: string;
-  title: string;
-  description: string;
-  actions?: ReactNode;
-  isDefault?: boolean;
-  isTemplate?: boolean;
-  invalidCredential?: boolean;
-  children?: ReactNode;
-  className?: string;
-  classNameObject?: AppCardClassNames;
-} & ShouldHighlight;
-
-export const AppListCard = (props: AppListCardProps & { highlight?: boolean }) => {
-  const { t } = useLocale();
-  const {
-    logo,
-    title,
-    description,
-    actions,
-    isDefault,
-    isTemplate,
-    invalidCredential,
-    children,
-    className,
-    classNameObject,
-    highlight,
-  } = props;
-
-  return (
-    <div
-      className={cn(highlight && "dark:bg-cal-muted bg-yellow-100", className || classNameObject?.container)}
-    >
-      <div className="flex items-start gap-x-3 px-4 py-4 sm:px-6">
-        {logo ? (
-          <img
-            className={cn(logo.includes("-dark") && "dark:invert", "h-10 w-10 shrink-0")}
-            src={logo}
-            alt={`${title} logo`}
-          />
-        ) : null}
-        <div className="flex min-w-0 grow flex-col gap-y-1">
-          <div className="flex items-center gap-x-2">
-            <h3 className={cn("text-emphasis truncate text-sm font-semibold", classNameObject?.title)}>
-              {title}
-            </h3>
-            <div className="flex shrink-0 items-center gap-x-2">
-              {isDefault && <Badge variant="green">{t("default")}</Badge>}
-              {isTemplate && <Badge variant="red">Template</Badge>}
-            </div>
-          </div>
-          <p className={cn("whitespace-normal wrap-break-word", classNameObject?.description)}>
-            {description}
-          </p>
-          {invalidCredential && (
-            <div className="flex gap-x-2 pt-2">
-              <AlertCircleIcon className="h-8 w-8 shrink-0 text-red-500 sm:h-4 sm:w-4" />
-              <p className="whitespace-pre-wrap wrap-break-word text-red-500">
-                {t("invalid_credential", { appName: title })}
-              </p>
-            </div>
-          )}
-        </div>
-        {actions && <div className="shrink-0">{actions}</div>}
-      </div>
-      <div className="w-full">{children}</div>
-    </div>
-  );
-};