@calcom/atoms 2.7.2 → 2.8.1

package/src/troubleshooter/__tests__/store.test.ts

@@ -1,80 +0,0 @@
-import { beforeEach, describe, expect, it } from "vitest";
-import { useTroubleshooterStore } from "../store";
-
-describe("useTroubleshooterStore", () => {
-  beforeEach(() => {
-    window.history.replaceState({}, "", "/");
-    useTroubleshooterStore.setState({
-      isPlatform: false,
-      event: null,
-      selectedDate: null,
-      bypassCalendarCache: false,
-      calendarToColorMap: {},
-    });
-  });
-
-  it("setSelectedDate with null removes the query param", () => {
-    window.history.replaceState({}, "", "/?date=2024-06-17");
-    useTroubleshooterStore.getState().setSelectedDate(null);
-    expect(new URL(window.location.href).searchParams.get("date")).toBeNull();
-  });
-
-  it("setSelectedDate updates selectedDate and URL", () => {
-    useTroubleshooterStore.getState().setSelectedDate("2024-06-17");
-    expect(useTroubleshooterStore.getState().selectedDate).toBe("2024-06-17");
-    expect(new URL(window.location.href).searchParams.get("date")).toBe("2024-06-17");
-  });
-
-  it("setSelectedDate switches month on month boundary", () => {
-    useTroubleshooterStore.getState().setSelectedDate("2024-06-17");
-    useTroubleshooterStore.getState().setSelectedDate("2024-07-01");
-    expect(useTroubleshooterStore.getState().month).toBe("2024-07");
-    expect(new URL(window.location.href).searchParams.get("month")).toBe("2024-07");
-  });
-
-  it("addToSelectedDate from null falls back to 'today' and advances", () => {
-    useTroubleshooterStore.getState().addToSelectedDate(1);
-    const updated = useTroubleshooterStore.getState().selectedDate;
-    expect(updated).toMatch(/^\d{4}-\d{2}-\d{2}$/);
-  });
-
-  it("setEvent updates event and writes eventTypeId when not platform", () => {
-    useTroubleshooterStore.getState().setEvent({ id: 42, slug: "call", duration: 30 });
-    expect(useTroubleshooterStore.getState().event?.id).toBe(42);
-    expect(new URL(window.location.href).searchParams.get("eventTypeId")).toBe("42");
-  });
-
-  it("setEvent does not update the URL when isPlatform is true", () => {
-    useTroubleshooterStore.setState({ isPlatform: true });
-    useTroubleshooterStore.getState().setEvent({ id: 99, slug: "meeting", duration: 15 });
-    expect(new URL(window.location.href).searchParams.get("eventTypeId")).toBeNull();
-  });
-
-  it("setMonth sets month and removes the date query param", () => {
-    useTroubleshooterStore.getState().setSelectedDate("2024-06-17");
-    expect(new URL(window.location.href).searchParams.get("date")).toBe("2024-06-17");
-    useTroubleshooterStore.getState().setMonth("2024-09");
-    expect(useTroubleshooterStore.getState().month).toBe("2024-09");
-    expect(new URL(window.location.href).searchParams.get("date")).toBeNull();
-  });
-
-  it("initialize with isPlatform sets isPlatform and month", () => {
-    useTroubleshooterStore.getState().initialize({ month: "2024-11", isPlatform: true });
-    expect(useTroubleshooterStore.getState().isPlatform).toBe(true);
-    expect(useTroubleshooterStore.getState().month).toBe("2024-11");
-  });
-
-  it("setBypassCalendarCache toggles the flag", () => {
-    expect(useTroubleshooterStore.getState().bypassCalendarCache).toBe(false);
-    useTroubleshooterStore.getState().setBypassCalendarCache(true);
-    expect(useTroubleshooterStore.getState().bypassCalendarCache).toBe(true);
-  });
-
-  it("addToCalendarToColorMap adds color by calendarId, ignores undefined id", () => {
-    useTroubleshooterStore.getState().addToCalendarToColorMap("cal-1", "#ff0000");
-    expect(useTroubleshooterStore.getState().calendarToColorMap).toEqual({ "cal-1": "#ff0000" });
-
-    useTroubleshooterStore.getState().addToCalendarToColorMap(undefined, "#00ff00");
-    expect(useTroubleshooterStore.getState().calendarToColorMap).toEqual({ "cal-1": "#ff0000" });
-  });
-});

package/src/troubleshooter/components/calendar-toggle-container-component.tsx

@@ -1,148 +0,0 @@
-// @ts-nocheck — atoms wrapper over loose contracts + Radix prop-pick
-
-import { Badge } from "../../components/ui/badge";
-import { Button } from "../../components/ui/button";
-import { Switch } from "../../components/ui/switch";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { TroubleshooterListItemContainer } from "./troubleshooter-list-item-container";
-
-interface CalendarToggleItemProps {
-  title: string;
-  subtitle: string;
-  colorDot?: string;
-  status: "connected" | "not_found";
-  calendars?: {
-    active?: boolean;
-    name?: string;
-  }[];
-}
-function CalendarToggleItem(props: CalendarToggleItemProps) {
-  const badgeStatus = props.status === "connected" ? "green" : "orange";
-  const badgeText = props.status === "connected" ? "Connected" : "Not found";
-  return (
-    <TroubleshooterListItemContainer
-      title={props.title}
-      subtitle={props.subtitle}
-      prefixSlot={
-        <div
-          className="h-4 w-4 self-center rounded-[4px]"
-          style={{
-            backgroundColor: props.colorDot,
-          }}
-        />
-      }
-      suffixSlot={
-        <div>
-          <Badge variant={badgeStatus} withDot size="sm">
-            {badgeText}
-          </Badge>
-        </div>
-      }
-    >
-      <div className="[&>*]:text-emphasis flex flex-col gap-3">
-        {props.calendars?.map((calendar) => (
-          <label key={calendar.name} className="flex items-center gap-2">
-            <Switch checked={calendar.active} disabled />
-            <span className="text-sm">{calendar.name}</span>
-          </label>
-        ))}
-      </div>
-    </TroubleshooterListItemContainer>
-  );
-}
-
-function EmptyCalendarToggleItem({
-  installCalendarAction,
-}: {
-  installCalendarAction?: { href: string } | { onClick: () => void };
-}) {
-  const { t } = useLocale();
-
-  return (
-    <TroubleshooterListItemContainer
-      title={t("installed", { count: 0 })}
-      subtitle={t("please_install_a_calendar")}
-      prefixSlot={<div className="h-4 w-4 self-center rounded-[4px] bg-blue-500" />}
-      suffixSlot={
-        <div>
-          <Badge variant="orange" withDot size="sm">
-            {t("unavailable")}
-          </Badge>
-        </div>
-      }
-    >
-      {installCalendarAction && (
-        <div className="flex flex-col gap-3">
-          <Button color="secondary" className="justify-center gap-2" {...installCalendarAction}>
-            {t("install_calendar")}
-          </Button>
-        </div>
-      )}
-    </TroubleshooterListItemContainer>
-  );
-}
-
-interface ConnectedCalendarItem {
-  credentialId: number;
-  integration: {
-    name: string;
-  };
-  error?: {
-    message: string;
-  };
-  calendars?: {
-    primary: boolean | null;
-    isSelected: boolean;
-    name?: string;
-  }[];
-}
-
-interface CalendarToggleContainerComponentProps {
-  connectedCalendars: ConnectedCalendarItem[];
-  isLoading: boolean;
-  manageCalendarsAction?: { href: string } | { onClick: () => void };
-  installCalendarAction?: { href: string } | { onClick: () => void };
-}
-
-export function CalendarToggleContainerComponent({
-  connectedCalendars,
-  isLoading,
-  manageCalendarsAction,
-  installCalendarAction,
-}: CalendarToggleContainerComponentProps): JSX.Element {
-  const { t } = useLocale();
-  const hasConnectedCalendars = connectedCalendars.length > 0;
-
-  return (
-    <div className="flex flex-col stack-y-3">
-      <p className="text-sm font-medium leading-none">{t("calendars_were_checking_for_conflicts")}</p>
-      {hasConnectedCalendars && !isLoading ? (
-        <>
-          {connectedCalendars.map((calendar) => {
-            const foundPrimary = calendar.calendars?.find((item) => item.primary);
-            return (
-              <CalendarToggleItem
-                key={calendar.credentialId}
-                title={calendar.integration.name}
-                colorDot="#000000"
-                subtitle={foundPrimary?.name ?? t("nameless_calendar")}
-                status={calendar.error ? "not_found" : "connected"}
-                calendars={calendar.calendars?.map((item) => ({
-                  active: item.isSelected,
-                  name: item.name,
-                }))}
-              />
-            );
-          })}
-          {manageCalendarsAction && (
-            <Button color="secondary" className="justify-center gap-2" {...manageCalendarsAction}>
-              {t("manage_calendars")}
-            </Button>
-          )}
-        </>
-      ) : (
-        <EmptyCalendarToggleItem installCalendarAction={installCalendarAction} />
-      )}
-    </div>
-  );
-}

package/src/troubleshooter/components/event-schedule-item-component.tsx

@@ -1,33 +0,0 @@
-import type React from "react";
-import { Label } from "../../components/ui/label";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { TroubleshooterListItemHeader } from "./troubleshooter-list-item-container";
-
-interface ScheduleItem {
-  id: number;
-  name: string;
-}
-
-interface EventScheduleItemComponentProps {
-  schedule: ScheduleItem | null;
-  suffixSlot?: React.ReactNode;
-}
-
-export function EventScheduleItemComponent({
-  schedule,
-  suffixSlot,
-}: EventScheduleItemComponentProps): JSX.Element {
-  const { t } = useLocale();
-
-  return (
-    <div>
-      <Label> {t("availability_schedule")}</Label>
-      <TroubleshooterListItemHeader
-        className="group rounded-md border-b"
-        prefixSlot={<div className="w-4 rounded-[4px] bg-black" />}
-        title={schedule?.name ?? t("loading")}
-        suffixSlot={suffixSlot}
-      />
-    </div>
-  );
-}

package/src/troubleshooter/components/event-type-select-component.tsx

@@ -1,105 +0,0 @@
-import { startTransition, useEffect, useMemo } from "react";
-import { shallow } from "zustand/shallow";
-import { SelectField } from "../../components/ui/select";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { getQueryParam } from "../../vendor/query-param";
-import { useTroubleshooterStore } from "../store";
-
-interface EventTypeItem {
-  id: number;
-  title: string;
-  slug: string;
-  length: number;
-  username?: string | null;
-  team?: {
-    id: number;
-    name: string;
-  } | null;
-}
-
-interface EventTypeSelectComponentProps {
-  eventTypes: EventTypeItem[];
-  isPending?: boolean;
-}
-
-export function EventTypeSelectComponent({
-  eventTypes,
-  isPending,
-}: EventTypeSelectComponentProps): JSX.Element {
-  const { t } = useLocale();
-  const { event: selectedEventType, setEvent: setSelectedEventType } = useTroubleshooterStore(
-    (state) => ({
-      event: state.event,
-      setEvent: state.setEvent,
-    }),
-    shallow
-  );
-
-  const options = useMemo(() => {
-    if (!eventTypes) return [];
-    return eventTypes.map((e) => ({
-      label: e.title,
-      value: e.id.toString(),
-      id: e.id,
-      duration: e.length,
-    }));
-  }, [eventTypes]);
-
-  useEffect(() => {
-    if (!eventTypes || eventTypes.length === 0) return;
-
-    const selectedEventIdParam = getQueryParam("eventTypeId");
-    const eventTypeId = selectedEventIdParam ? parseInt(selectedEventIdParam, 10) : null;
-
-    if (selectedEventType?.id === eventTypeId) return;
-
-    if (eventTypeId && !isNaN(eventTypeId)) {
-      startTransition(() => {
-        const foundEventType = eventTypes.find((et) => et.id === eventTypeId);
-        if (foundEventType) {
-          setSelectedEventType({
-            id: foundEventType.id,
-            slug: foundEventType.slug,
-            duration: foundEventType.length,
-            teamId: foundEventType.team?.id ?? null,
-            username: foundEventType.username ?? null,
-          });
-          return;
-        }
-      });
-    }
-
-    if (!selectedEventType && !eventTypeId) {
-      const firstEvent = eventTypes[0];
-      setSelectedEventType({
-        id: firstEvent.id,
-        slug: firstEvent.slug,
-        duration: firstEvent.length,
-        teamId: firstEvent.team?.id ?? null,
-        username: firstEvent.username ?? null,
-      });
-    }
-  }, [eventTypes, selectedEventType, setSelectedEventType]);
-
-  return (
-    <SelectField
-      label={t("event_type")}
-      options={options}
-      isDisabled={isPending || options.length === 0}
-      value={options.find((option) => option.id === selectedEventType?.id) || options[0]}
-      onChange={(option: { id: number; label: string; value: string; duration: number } | null) => {
-        if (!option) return;
-        const foundEventType = eventTypes?.find((et) => et.id === option.id);
-        if (foundEventType) {
-          setSelectedEventType({
-            id: foundEventType.id,
-            slug: foundEventType.slug,
-            duration: foundEventType.length,
-            teamId: foundEventType.team?.id ?? null,
-            username: foundEventType.username ?? null,
-          });
-        }
-      }}
-    />
-  );
-}

package/src/troubleshooter/components/troubleshooter-list-item-container.tsx

@@ -1,42 +0,0 @@
-import type { PropsWithChildren } from "react";
-
-import { cn } from "../../lib/utils";
-
-interface TroubleshooterListItemContainerProps {
-  title: string;
-  subtitle?: string;
-  suffixSlot?: React.ReactNode;
-  prefixSlot?: React.ReactNode;
-  className?: string;
-}
-
-export function TroubleshooterListItemHeader({
-  prefixSlot,
-  title,
-  subtitle,
-  suffixSlot,
-  className,
-}: TroubleshooterListItemContainerProps) {
-  return (
-    <div className={cn("border-subtle flex max-w-full gap-3 border border-b-0 px-4 py-2", className)}>
-      {prefixSlot}
-      <div className="flex h-full max-w-full flex-1 flex-col flex-nowrap truncate text-sm leading-4">
-        <p className="font-medium">{title}</p>
-        {subtitle && <p className="font-normal">{subtitle}</p>}
-      </div>
-      {suffixSlot}
-    </div>
-  );
-}
-
-export function TroubleshooterListItemContainer({
-  children,
-  ...rest
-}: PropsWithChildren<TroubleshooterListItemContainerProps>) {
-  return (
-    <div className="[&>*:first-child]:rounded-t-md ">
-      <TroubleshooterListItemHeader {...rest} />
-      <div className="border-subtle flex flex-col stack-y-3 rounded-b-md border p-4">{children}</div>
-    </div>
-  );
-}

package/src/troubleshooter/index.ts

@@ -1 +0,0 @@
-export { TroubleshooterPlatformWrapper } from "./wrappers/troubleshooter-platform-wrapper";

package/src/troubleshooter/large-calendar/large-calendar.tsx

@@ -1,30 +0,0 @@
-import { CalendarViewPlatformWrapper } from "../../calendar-view/wrappers/calendar-view-platform-wrapper";
-import { useTroubleshooterStore } from "../store";
-
-type LargeCalendarProps = {
-  // Webapp callers still pass `extraDays`. Atoms's troubleshooter calendar
-  // derives the visible range from the store + CalendarViewPlatformWrapper
-  // and doesn't need it directly. Accept and ignore so consumers don't
-  // need to change.
-  extraDays?: number;
-};
-
-export const LargeCalendar = (_props: LargeCalendarProps = {}): JSX.Element | null => {
-  const event = useTroubleshooterStore((state) => state.event);
-
-  if (!event?.slug) return null;
-
-  if (event.teamId) {
-    return (
-      <CalendarViewPlatformWrapper isEventTypeView={true} teamId={event.teamId} eventSlug={event.slug} />
-    );
-  }
-
-  if (event.username) {
-    return (
-      <CalendarViewPlatformWrapper isEventTypeView={true} username={event.username} eventSlug={event.slug} />
-    );
-  }
-
-  return null;
-};

package/src/troubleshooter/sidebar/calendar-toggle-container.tsx

@@ -1,25 +0,0 @@
-// @ts-nocheck — atoms wrapper over loose contracts + Radix prop-pick
-
-import { useConnectedCalendars } from "../../hooks/use-connected-calendars";
-import { CalendarToggleContainerComponent } from "../components/calendar-toggle-container-component";
-
-interface CalendarToggleContainerProps {
-  onManageCalendarsClick?: () => void;
-  onInstallCalendarClick?: () => void;
-}
-
-export function CalendarToggleContainer({
-  onManageCalendarsClick,
-  onInstallCalendarClick,
-}: CalendarToggleContainerProps): JSX.Element {
-  const calendars = useConnectedCalendars({});
-
-  return (
-    <CalendarToggleContainerComponent
-      connectedCalendars={calendars.data?.connectedCalendars ?? []}
-      isLoading={calendars.isLoading}
-      {...(onManageCalendarsClick ? { manageCalendarsAction: { onClick: onManageCalendarsClick } } : {})}
-      {...(onInstallCalendarClick ? { installCalendarAction: { onClick: onInstallCalendarClick } } : {})}
-    />
-  );
-}

package/src/troubleshooter/sidebar/event-schedule-item.tsx

@@ -1,13 +0,0 @@
-import { useScheduleByEventSlug } from "../../hooks/use-schedule-by-event-slug";
-import { EventScheduleItemComponent } from "../components/event-schedule-item-component";
-import { useTroubleshooterStore } from "../store";
-
-export function EventScheduleItem(): JSX.Element {
-  const selectedEventType = useTroubleshooterStore((state) => state.event);
-
-  const { data: schedule } = useScheduleByEventSlug({
-    eventSlug: selectedEventType?.slug,
-  });
-
-  return <EventScheduleItemComponent schedule={schedule ?? null} />;
-}

package/src/troubleshooter/sidebar/event-type-select.tsx

@@ -1,8 +0,0 @@
-import { useEventTypesList } from "../../hooks/use-event-types-list";
-import { EventTypeSelectComponent } from "../components/event-type-select-component";
-
-export function EventTypeSelect(): JSX.Element {
-  const { data: eventTypes, isPending } = useEventTypesList({});
-
-  return <EventTypeSelectComponent eventTypes={eventTypes ?? []} isPending={isPending} />;
-}

package/src/troubleshooter/sidebar/troubleshooter-sidebar.tsx

@@ -1,48 +0,0 @@
-import type { ComponentType } from "react";
-import { Skeleton } from "../../components/ui/skeleton";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { CalendarToggleContainer } from "./calendar-toggle-container";
-import { EventScheduleItem } from "./event-schedule-item";
-import { EventTypeSelect as DefaultEventTypeSelect } from "./event-type-select";
-
-const SidebarHeading = ({ name }: { name: string }): JSX.Element => {
-  return (
-    <Skeleton title={name} as="p" className="max-w-36 min-h-4 truncate font-semibold" loadingClassName="ms-3">
-      {name}
-    </Skeleton>
-  );
-};
-
-interface TroubleshooterSidebarProps {
-  onManageCalendarsClick?: () => void;
-  onInstallCalendarClick?: () => void;
-  /**
-   * Component injection for the event-type selector. Atoms's default
-   * `<EventTypeSelect>` fetches via the platform `useEventTypesList` hook,
-   * which depends on `<CalProvider>` (`isInit`) and the API v2 endpoint —
-   * neither exists in the webapp. The webapp wrapper passes its own
-   * trpc-backed component here so the sidebar auto-selects an event in
-   * either consumer.
-   */
-  EventTypeSelect?: ComponentType;
-}
-
-export const TroubleshooterSidebar = ({
-  onManageCalendarsClick,
-  onInstallCalendarClick,
-  EventTypeSelect = DefaultEventTypeSelect,
-}: TroubleshooterSidebarProps): JSX.Element => {
-  const { t } = useLocale();
-
-  return (
-    <div className="relative z-10 hidden h-screen w-full flex-col gap-6 overflow-y-auto py-6 pl-4 pr-6 sm:flex md:pl-0">
-      <SidebarHeading name={t("troubleshooter")} />
-      <EventTypeSelect />
-      <EventScheduleItem />
-      <CalendarToggleContainer
-        onManageCalendarsClick={onManageCalendarsClick}
-        onInstallCalendarClick={onInstallCalendarClick}
-      />
-    </div>
-  );
-};

package/src/troubleshooter/store.ts

@@ -1,110 +0,0 @@
-import { useEffect } from "react";
-import { create } from "zustand";
-
-import dayjs from "../vendor/dayjs";
-import { getQueryParam, removeQueryParam, updateQueryParam } from "../vendor/query-param";
-
-type StoreInitializeType = {
-  month: string | null;
-  isPlatform?: boolean;
-};
-
-type EventType = {
-  id: number;
-  slug: string;
-  duration: number;
-  teamId?: number | null;
-  username?: string | null;
-};
-
-export type TroubleshooterStore = {
-  isPlatform: boolean;
-  event: EventType | null;
-  setEvent: (eventSlug: EventType) => void;
-  month: string | null;
-  setMonth: (month: string | null) => void;
-  selectedDate: string | null;
-  setSelectedDate: (date: string | null) => void;
-  addToSelectedDate: (days: number) => void;
-  initialize: (data: StoreInitializeType) => void;
-  calendarToColorMap: Record<string, string>;
-  addToCalendarToColorMap: (calendarId: string | undefined, color: string) => void;
-  bypassCalendarCache: boolean;
-  setBypassCalendarCache: (bypass: boolean) => void;
-};
-
-export const useTroubleshooterStore = create<TroubleshooterStore>((set, get) => ({
-  isPlatform: false,
-  selectedDate: getQueryParam("date") || null,
-  setSelectedDate: (selectedDate: string | null) => {
-    if (!selectedDate) {
-      removeQueryParam("date");
-      return;
-    }
-
-    const currentSelection = dayjs(get().selectedDate);
-    const newSelection = dayjs(selectedDate);
-    set({ selectedDate });
-    updateQueryParam("date", selectedDate ?? "");
-
-    if (newSelection.month() !== currentSelection.month()) {
-      set({ month: newSelection.format("YYYY-MM") });
-      updateQueryParam("month", newSelection.format("YYYY-MM"));
-    }
-  },
-  addToSelectedDate: (days: number) => {
-    const selectedDate = get().selectedDate;
-    const currentSelection = selectedDate ? dayjs(get().selectedDate) : dayjs();
-    const newSelection = currentSelection.add(days, "day");
-    const newSelectionFormatted = newSelection.format("YYYY-MM-DD");
-
-    if (newSelection.month() !== currentSelection.month()) {
-      set({ month: newSelection.format("YYYY-MM") });
-      updateQueryParam("month", newSelection.format("YYYY-MM"));
-    }
-
-    set({ selectedDate: newSelectionFormatted });
-    updateQueryParam("date", newSelectionFormatted);
-  },
-  event: null,
-  setEvent: (event: EventType) => {
-    set({ event });
-    if (!get().isPlatform) {
-      updateQueryParam("eventTypeId", event.id.toString());
-    }
-  },
-  month: getQueryParam("month") || getQueryParam("date") || dayjs().format("YYYY-MM"),
-  setMonth: (month: string | null) => {
-    set({ month });
-    updateQueryParam("month", month ?? "");
-    get().setSelectedDate(null);
-  },
-  initialize: ({ month, isPlatform }: StoreInitializeType) => {
-    if (isPlatform) {
-      set({ isPlatform: true });
-    }
-    if (month) {
-      set({ month });
-      updateQueryParam("month", month);
-    }
-  },
-  bypassCalendarCache: false,
-  setBypassCalendarCache: (bypass: boolean) => set({ bypassCalendarCache: bypass }),
-  calendarToColorMap: {},
-  addToCalendarToColorMap: (calendarId: string | undefined, color: string) => {
-    if (!calendarId) return;
-    const calendarToColorMap = get().calendarToColorMap;
-    calendarToColorMap[calendarId] = color;
-    set({ calendarToColorMap });
-  },
-}));
-
-export const useInitalizeTroubleshooterStore = ({ month, isPlatform }: StoreInitializeType) => {
-  const initializeStore = useTroubleshooterStore((state) => state.initialize);
-  useEffect(() => {
-    initializeStore({
-      month,
-      isPlatform,
-    });
-  }, [initializeStore, month, isPlatform]);
-};

package/src/troubleshooter/types.ts

@@ -1,10 +0,0 @@
-export interface TroubleshooterProps {
-  /**
-   * If month is NOT set as a prop on the component, we expect a query parameter
-   * called `month` to be present on the url. If that is missing, the component will
-   * default to the current month.
-   * @format YYYY-MM.
-   */
-  month: string | null;
-  selectedDate?: Date;
-}