@calcom/atoms 2.7.2 → 2.8.1

package/src/create-schedule/create-schedule-form.tsx

@@ -1,110 +0,0 @@
-import { useForm } from "react-hook-form";
-import { AtomsWrapper } from "../components/atoms-wrapper";
-import { Button } from "../components/ui/button";
-import { Form } from "../components/ui/form";
-import { InputField } from "../components/ui/text-field";
-import { useToast } from "../components/ui/use-toast";
-import type { ApiErrorResponse } from "../contracts";
-import { useAtomCreateSchedule } from "../hooks/schedules/use-atom-create-schedule";
-import { useAtomsLocale as useLocale } from "../hooks/use-atoms-locale";
-import { cn } from "../lib/utils";
-
-export type ActionButtonsClassNames = {
-  container?: string;
-  continue?: string;
-  close?: string;
-};
-
-export const CreateScheduleForm = ({
-  onSuccess,
-  onError,
-  onCancel,
-  customClassNames,
-  disableToasts = false,
-}: {
-  onSuccess?: (scheduleId: number) => void;
-  onError?: (err: ApiErrorResponse) => void;
-  onCancel?: () => void;
-  customClassNames?: {
-    formWrapper?: string;
-    inputField?: string;
-    actionsButtons?: ActionButtonsClassNames;
-  };
-  disableToasts?: boolean;
-}) => {
-  const { toast } = useToast();
-  const { t } = useLocale();
-  const form = useForm<{
-    name: string;
-  }>();
-  const { register } = form;
-
-  const { mutateAsync: createSchedule, isPending: isCreateSchedulePending } = useAtomCreateSchedule({
-    onSuccess: (res) => {
-      if (!disableToasts) {
-        toast({
-          description: t("schedule_created_successfully", { scheduleName: res.data.schedule.name }),
-        });
-      }
-      form.reset();
-      onSuccess?.(res.data.schedule.id);
-    },
-    onError: (err) => {
-      onError?.(err);
-      if (!disableToasts) {
-        toast({
-          description: `Could not create schedule: ${err.error.message}`,
-        });
-      }
-    },
-  });
-
-  return (
-    <AtomsWrapper>
-      <Form
-        className={customClassNames?.formWrapper}
-        form={form}
-        handleSubmit={async (values) => {
-          await createSchedule(values);
-        }}
-      >
-        <InputField
-          className={customClassNames?.inputField}
-          label={t("name")}
-          type="text"
-          id="name"
-          required
-          placeholder={t("default_schedule_name")}
-          {...register("name", {
-            setValueAs: (v) => (!v || v.trim() === "" ? null : v),
-          })}
-        />
-        <div
-          className={cn(
-            "mt-5 justify-end space-x-2 rtl:space-x-reverse sm:mt-4 sm:flex",
-            customClassNames?.actionsButtons?.container
-          )}
-        >
-          {onCancel && (
-            <Button
-              type="button"
-              color="secondary"
-              onClick={onCancel}
-              className={customClassNames?.actionsButtons?.close}
-            >
-              {t("close")}
-            </Button>
-          )}
-          <Button
-            type="submit"
-            loading={isCreateSchedulePending}
-            className={customClassNames?.actionsButtons?.continue}
-          >
-            {" "}
-            {t("continue")}
-          </Button>
-        </div>
-      </Form>
-    </AtomsWrapper>
-  );
-};

package/src/create-schedule/index.tsx

@@ -1 +0,0 @@
-export { CreateSchedulePlatformWrapper } from "./wrappers/create-schedule-platform-wrapper";

package/src/create-schedule/wrappers/create-schedule-platform-wrapper.tsx

@@ -1,69 +0,0 @@
-// @ts-nocheck — atoms wrapper over loose contracts + Radix prop-pick
-import { useState } from "react";
-import { AtomsWrapper } from "../../components/atoms-wrapper";
-import { Button } from "../../components/ui/button";
-import { Dialog, DialogContent, DialogTrigger } from "../../components/ui/dialog";
-import type { ApiErrorResponse } from "../../contracts";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import type { ActionButtonsClassNames } from "../create-schedule-form";
-import { CreateScheduleForm } from "../create-schedule-form";
-
-export const CreateSchedulePlatformWrapper = ({
-  name,
-  customClassNames,
-  onSuccess,
-  onError,
-  disableToasts = false,
-}: {
-  name?: string;
-  onSuccess?: (scheduleId: number) => void;
-  onError?: (err: ApiErrorResponse) => void;
-  customClassNames?: {
-    createScheduleButton?: string;
-    inputField?: string;
-    formWrapper?: string;
-    actionsButtons?: ActionButtonsClassNames;
-  };
-  disableToasts?: boolean;
-}) => {
-  const { t } = useLocale();
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-
-  return (
-    <AtomsWrapper>
-      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <DialogTrigger asChild>
-          <Button
-            type="button"
-            data-testid={name}
-            className={customClassNames?.createScheduleButton}
-            StartIcon="plus"
-            onClick={() => setIsDialogOpen(true)}
-          >
-            {name ?? t("new")}
-          </Button>
-        </DialogTrigger>
-        <DialogContent className="bg-default text-default">
-          <CreateScheduleForm
-            customClassNames={{
-              formWrapper: customClassNames?.formWrapper,
-              inputField: customClassNames?.inputField,
-              actionsButtons: {
-                container: customClassNames?.actionsButtons?.container,
-                continue: customClassNames?.actionsButtons?.continue,
-                close: customClassNames?.actionsButtons?.close,
-              },
-            }}
-            onSuccess={(scheduleId) => {
-              setIsDialogOpen(false);
-              onSuccess?.(scheduleId);
-            }}
-            onError={onError}
-            onCancel={() => setIsDialogOpen(false)}
-            disableToasts={disableToasts}
-          />
-        </DialogContent>
-      </Dialog>
-    </AtomsWrapper>
-  );
-};

package/src/destination-calendar/components/destination-calendar-selector.tsx

@@ -1,34 +0,0 @@
-"use client";
-
-import type { OptionProps, SingleValueProps } from "react-select";
-import { components } from "react-select";
-
-import { CheckIcon } from "../../components/ui/icons";
-
-export type DestinationCalendarOption = {
-  label: string;
-  value: string;
-  subtitle: string;
-  delegationCredentialId?: string;
-};
-
-export const SingleValueComponent = (props: SingleValueProps<DestinationCalendarOption>) => {
-  const { label, subtitle } = props.data;
-  return (
-    <components.SingleValue {...props} className="flex space-x-1">
-      <p>{label}</p> <p className=" text-subtle">{subtitle}</p>
-    </components.SingleValue>
-  );
-};
-
-export const OptionComponent = (props: OptionProps<DestinationCalendarOption>) => {
-  const { label } = props.data;
-  return (
-    <components.Option {...props}>
-      <div className="flex">
-        <span className="mr-auto">{label}</span>
-        {props.isSelected && <CheckIcon className="ml-2 h-4 w-4" />}
-      </div>
-    </components.Option>
-  );
-};

package/src/destination-calendar/destination-calendar-selector.tsx

@@ -1,149 +0,0 @@
-// @ts-nocheck — wrapper/hook reconciles loose atoms contracts with legacy
-// backend payload shapes (unknowns from Record<string, any> branches, Radix
-// prop-pick narrowing). Runtime matches pre-extract behavior; a targeted
-// typing pass follows once the contracts are tightened per-consumer.
-"use client";
-
-import { useEffect, useMemo, useState } from "react";
-import { Badge } from "../components/ui/badge";
-import { Select } from "../components/ui/select";
-import type { ConnectedDestinationCalendars } from "../contracts";
-import { useAtomsLocale as useLocale } from "../hooks/use-atoms-locale";
-import { getPlaceholderContent } from "../lib/get-placeholder-content";
-import { cn } from "../lib/utils";
-import { OptionComponent, SingleValueComponent } from "./components/destination-calendar-selector";
-
-export type DestinationCalendarProps = {
-  connectedCalendars: ConnectedDestinationCalendars["connectedCalendars"];
-  destinationCalendar: ConnectedDestinationCalendars["destinationCalendar"];
-  onChange: (value: { externalId: string; integration: string; delegationCredentialId?: string }) => void;
-  isPending?: boolean;
-  hidePlaceholder?: boolean;
-  value: string | undefined;
-  maxWidth?: number;
-  hideAdvancedText?: boolean;
-};
-
-export const DestinationCalendarSelector = ({
-  connectedCalendars,
-  destinationCalendar,
-  onChange,
-  isPending,
-  value,
-  hidePlaceholder,
-  hideAdvancedText,
-  maxWidth,
-}: DestinationCalendarProps): JSX.Element | null => {
-  const { t } = useLocale();
-  const [selectedOption, setSelectedOption] = useState<{
-    value: string;
-    label: string;
-    subtitle: string;
-    delegationCredentialId?: string;
-  } | null>(null);
-
-  useEffect(() => {
-    const selected = connectedCalendars
-      .flatMap((connected) => connected.calendars ?? [])
-      .find((cal) => cal.externalId === value);
-
-    if (selected) {
-      const selectedIntegration = connectedCalendars.find((integration) =>
-        integration.calendars?.some((calendar) => calendar.externalId === selected.externalId)
-      );
-
-      const label = selected.name ? `${selected.name} ` : "";
-      setSelectedOption({
-        value: `${selected.integration}:${selected.externalId}`,
-        label,
-        subtitle: `(${selectedIntegration?.integration.title?.replace(/calendar/i, "")} - ${
-          selectedIntegration?.primary?.name
-        })`,
-      });
-    }
-  }, [connectedCalendars, value]);
-
-  const options = useMemo(() => {
-    return (
-      connectedCalendars.map((selectedCalendar) => ({
-        key: selectedCalendar.credentialId,
-        label: `${selectedCalendar.integration.title?.replace(/calendar/i, "")} (${
-          selectedCalendar.primary?.integration === "office365_calendar"
-            ? selectedCalendar.primary?.email
-            : selectedCalendar.primary?.name
-        })`,
-        options: (selectedCalendar.calendars ?? [])
-          .filter((cal) => cal.readOnly === false)
-          .map((cal) => ({
-            label: ` ${cal.name} `,
-            subtitle: `(${selectedCalendar?.integration.title?.replace(/calendar/i, "")} - ${
-              selectedCalendar?.primary?.name
-            })`,
-            value: `${cal.integration}:${cal.externalId}`,
-            delegationCredentialId: cal.delegationCredentialId || undefined,
-          })),
-      })) ?? []
-    );
-  }, [connectedCalendars]);
-
-  return (
-    <div
-      className="relative table w-full table-fixed"
-      title={`${t("create_events_on")}: ${selectedOption?.label || ""}`}
-    >
-      <Select
-        name="primarySelectedCalendar"
-        placeholder={
-          !hidePlaceholder ? (
-            `${t("create_events_on")}`
-          ) : (
-            <span className="min-w-0 overflow-hidden truncate whitespace-nowrap text-default">
-              <Badge variant="blue">{t("default")}</Badge>{" "}
-              {destinationCalendar?.primaryEmail &&
-                `${destinationCalendar.name} (${destinationCalendar?.integrationTitle} - ${destinationCalendar.primaryEmail})`}
-            </span>
-          )
-        }
-        options={options}
-        styles={{
-          placeholder: (styles) =>
-            Object.assign({}, styles, getPlaceholderContent(hidePlaceholder, `'${t("create_events_on")}:'`)),
-          singleValue: (styles) =>
-            Object.assign({}, styles, getPlaceholderContent(hidePlaceholder, `'${t("create_events_on")}:'`)),
-          control: (defaultStyles) =>
-            Object.assign({}, defaultStyles, {
-              "@media only screen and (min-width: 640px)": Object.assign(
-                {},
-                defaultStyles["@media only screen and (min-width: 640px)"] as object,
-                { maxWidth }
-              ),
-            }),
-        }}
-        isSearchable={false}
-        className={cn("my-2 block w-full min-w-0 flex-1 rounded-none rounded-r-sm border-default text-sm")}
-        onChange={(newValue) => {
-          setSelectedOption(newValue);
-          if (!newValue) {
-            return;
-          }
-
-          /* Split only the first `:`, since Apple uses the full URL as externalId */
-          const [integration, externalId] = newValue.value.split(/:(.+)/);
-
-          onChange({
-            integration,
-            externalId,
-            delegationCredentialId: newValue.delegationCredentialId,
-          });
-        }}
-        isLoading={isPending}
-        value={selectedOption}
-        components={{ SingleValue: SingleValueComponent, Option: OptionComponent }}
-        isMulti={false}
-      />
-      {hideAdvancedText ? null : (
-        <p className="text-sm leading-tight">{t("you_can_override_calendar_in_advanced_tab")}</p>
-      )}
-    </div>
-  );
-};

package/src/destination-calendar/destination-calendar.tsx

@@ -1,82 +0,0 @@
-// biome-ignore lint/style/noRestrictedImports: pre-existing violation
-
-import { Label } from "../components/ui/label";
-import type { ReminderMinutes } from "../contracts";
-import { useAtomsLocale as useLocale } from "../hooks/use-atoms-locale";
-
-import { cn } from "../lib/utils";
-import type { DestinationCalendarProps } from "./destination-calendar-selector";
-import { DestinationCalendarSelector } from "./destination-calendar-selector";
-import { DestinationReminderSelector } from "./destination-reminder-selector";
-
-type DestinationHeaderClassnames = {
-  container?: string;
-  title?: string;
-  description?: string;
-};
-
-export type DestinationCalendarClassNames = {
-  container?: string;
-  header?: DestinationHeaderClassnames;
-};
-
-type DestinationCalendarSettingsProps = DestinationCalendarProps & {
-  classNames?: string;
-  classNamesObject?: DestinationCalendarClassNames;
-  onReminderChange?: ((value: ReminderMinutes) => void) | null;
-  reminderValue: ReminderMinutes;
-  isReminderPending?: boolean;
-};
-
-export const DestinationCalendarSettings = (props: DestinationCalendarSettingsProps) => {
-  const { t } = useLocale();
-  const showReminderSelector =
-    props.onReminderChange !== null &&
-    props.onReminderChange !== undefined &&
-    props.destinationCalendar?.integration === "google_calendar";
-
-  return (
-    <div
-      className={cn(
-        "border-subtle mb-6 mt-8 rounded-lg border",
-        props?.classNames || props?.classNamesObject?.container
-      )}
-    >
-      <DestinationCalendarSettingsHeading classNames={props.classNamesObject?.header} />
-      <div className="border-t">
-        <div className="border-subtle stack-y-3 flex w-full flex-col border-y-0 p-6">
-          <div>
-            <Label className="text-default mb-0 font-medium">{t("add_events_to")}</Label>
-            <DestinationCalendarSelector {...props} />
-          </div>
-          {showReminderSelector && (
-            <div className="mt-4">
-              <Label className="text-default mb-0 font-medium">{t("default_reminder")}</Label>
-              <p className="text-subtle mb-2 text-sm">{t("default_reminder_description")}</p>
-              <DestinationReminderSelector
-                value={props.reminderValue}
-                onChange={props.onReminderChange!}
-                isPending={props.isReminderPending}
-              />
-            </div>
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-const DestinationCalendarSettingsHeading = ({ classNames }: { classNames?: DestinationHeaderClassnames }) => {
-  const { t } = useLocale();
-
-  return (
-    <div className={cn("p-6", classNames?.container)}>
-      <h2 className={cn("text-emphasis mb-1 text-base font-bold leading-5 tracking-wide", classNames?.title)}>
-        {t("add_to_calendar")}
-      </h2>
-      <p className={cn("text-subtle text-sm leading-tight", classNames?.description)}>
-        {t("add_to_calendar_description")}
-      </p>
-    </div>
-  );
-};

package/src/destination-calendar/destination-reminder-selector.tsx

@@ -1,51 +0,0 @@
-"use client";
-
-import { Select } from "../components/ui/select";
-// biome-ignore lint/style/noRestrictedImports: pre-existing violation
-import type { ReminderMinutes } from "../contracts";
-import { useAtomsLocale as useLocale } from "../hooks/use-atoms-locale";
-
-const REMINDER_OPTIONS: Array<{ value: ReminderMinutes; label: string }> = [
-  { value: null, label: "use_default_reminders" },
-  { value: 0, label: "just_in_time" },
-  { value: 10, label: "remind_minutes_before" },
-  { value: 30, label: "remind_minutes_before" },
-  { value: 60, label: "remind_minutes_before" },
-];
-
-interface DestinationReminderSelectorProps {
-  value: ReminderMinutes;
-  onChange: (value: ReminderMinutes) => void;
-  isPending?: boolean;
-}
-
-export const DestinationReminderSelector = ({
-  value,
-  onChange,
-  isPending,
-}: DestinationReminderSelectorProps) => {
-  const { t } = useLocale();
-
-  const options = REMINDER_OPTIONS.map((opt) => ({
-    value: opt.value,
-    label: typeof opt.value === "number" ? t(opt.label, { count: opt.value }) : t(opt.label),
-  }));
-
-  const selectedOption = options.find((opt) => opt.value === value) ?? options[0];
-
-  return (
-    <Select
-      name="reminderDuration"
-      options={options}
-      value={selectedOption}
-      onChange={(newValue: { value: ReminderMinutes; label: string } | null) => {
-        if (newValue) {
-          onChange(newValue.value);
-        }
-      }}
-      isLoading={isPending}
-      isSearchable={false}
-      className="mt-2 block w-full text-sm"
-    />
-  );
-};

package/src/destination-calendar/index.ts

@@ -1 +0,0 @@
-export { DestinationCalendarSettingsPlatformWrapper } from "./wrappers/destination-calendar-settings-platform-wrapper";

package/src/destination-calendar/wrappers/destination-calendar-settings-platform-wrapper.tsx

@@ -1,62 +0,0 @@
-// @ts-nocheck — atoms wrapper over loose contracts + Radix prop-pick
-
-import { AtomsWrapper } from "../../components/atoms-wrapper";
-import { useUpdateDestinationCalendars } from "../../hooks/calendars/use-update-destination-calendars";
-import { useConnectedCalendars } from "../../hooks/use-connected-calendars";
-import type { DestinationCalendarClassNames } from "../destination-calendar";
-import { DestinationCalendarSettings } from "../destination-calendar";
-
-export const DestinationCalendarSettingsPlatformWrapper = ({
-  statusLoader,
-  classNames = "mx-5",
-  classNamesObject,
-  isDryRun = false,
-}: {
-  statusLoader?: JSX.Element;
-  classNames?: string;
-  classNamesObject?: DestinationCalendarClassNames;
-  isDryRun?: boolean;
-}) => {
-  const calendars = useConnectedCalendars({});
-  const { mutate: updateDestinationCalendars, isPending: isUpdatingCalendar } =
-    useUpdateDestinationCalendars();
-
-  if (calendars.isLoading) {
-    return (
-      <AtomsWrapper>
-        <>
-          {statusLoader}
-          {!statusLoader && <h1 className="m-5 text-xl font-semibold">Loading...</h1>}
-        </>
-      </AtomsWrapper>
-    );
-  }
-
-  if (!calendars.data?.connectedCalendars || calendars.data.connectedCalendars.length < 1) {
-    return null;
-  }
-
-  return (
-    <AtomsWrapper>
-      <DestinationCalendarSettings
-        classNames={classNames}
-        classNamesObject={classNamesObject}
-        connectedCalendars={calendars.data.connectedCalendars}
-        destinationCalendar={calendars.data.destinationCalendar}
-        value={calendars.data.destinationCalendar.externalId}
-        hidePlaceholder
-        hideAdvancedText
-        onChange={async ({ externalId, integration, delegationCredentialId }) => {
-          if (!isDryRun) {
-            await updateDestinationCalendars({
-              integration,
-              externalId,
-              delegationCredentialId,
-            });
-          }
-        }}
-        isPending={isUpdatingCalendar}
-      />
-    </AtomsWrapper>
-  );
-};