@calcom/atoms 2.8.0 → 2.8.1

package/src/components/ui/use-toast.ts

@@ -1,187 +0,0 @@
-// Inspired by react-hot-toast library
-import * as React from "react";
-
-import type { ToastActionElement, ToastProps } from "./toast";
-
-const TOAST_LIMIT = 1;
-const TOAST_REMOVE_DELAY = 1000000;
-
-type ToasterToast = ToastProps & {
-  id: string;
-  title?: React.ReactNode;
-  description?: React.ReactNode;
-  action?: ToastActionElement;
-};
-
-const actionTypes = {
-  ADD_TOAST: "ADD_TOAST",
-  UPDATE_TOAST: "UPDATE_TOAST",
-  DISMISS_TOAST: "DISMISS_TOAST",
-  REMOVE_TOAST: "REMOVE_TOAST",
-} as const;
-
-let count = 0;
-
-function genId() {
-  count = (count + 1) % Number.MAX_SAFE_INTEGER;
-  return count.toString();
-}
-
-type ActionType = typeof actionTypes;
-
-type Action =
-  | {
-      type: ActionType["ADD_TOAST"];
-      toast: ToasterToast;
-    }
-  | {
-      type: ActionType["UPDATE_TOAST"];
-      toast: Partial<ToasterToast>;
-    }
-  | {
-      type: ActionType["DISMISS_TOAST"];
-      toastId?: ToasterToast["id"];
-    }
-  | {
-      type: ActionType["REMOVE_TOAST"];
-      toastId?: ToasterToast["id"];
-    };
-
-interface State {
-  toasts: ToasterToast[];
-}
-
-const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
-
-const addToRemoveQueue = (toastId: string) => {
-  if (toastTimeouts.has(toastId)) {
-    return;
-  }
-
-  const timeout = setTimeout(() => {
-    toastTimeouts.delete(toastId);
-    dispatch({
-      type: "REMOVE_TOAST",
-      toastId: toastId,
-    });
-  }, TOAST_REMOVE_DELAY);
-
-  toastTimeouts.set(toastId, timeout);
-};
-
-export const reducer = (state: State, action: Action): State => {
-  switch (action.type) {
-    case "ADD_TOAST":
-      return {
-        ...state,
-        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
-      };
-
-    case "UPDATE_TOAST":
-      return {
-        ...state,
-        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
-      };
-
-    case "DISMISS_TOAST": {
-      const { toastId } = action;
-
-      // ! Side effects ! - This could be extracted into a dismissToast() action,
-      // but I'll keep it here for simplicity
-      if (toastId) {
-        addToRemoveQueue(toastId);
-      } else {
-        state.toasts.forEach((toast) => {
-          addToRemoveQueue(toast.id);
-        });
-      }
-
-      return {
-        ...state,
-        toasts: state.toasts.map((t) =>
-          t.id === toastId || toastId === undefined
-            ? {
-                ...t,
-                open: false,
-              }
-            : t
-        ),
-      };
-    }
-    case "REMOVE_TOAST":
-      if (action.toastId === undefined) {
-        return {
-          ...state,
-          toasts: [],
-        };
-      }
-      return {
-        ...state,
-        toasts: state.toasts.filter((t) => t.id !== action.toastId),
-      };
-  }
-};
-
-const listeners: Array<(state: State) => void> = [];
-
-let memoryState: State = { toasts: [] };
-
-function dispatch(action: Action) {
-  memoryState = reducer(memoryState, action);
-  listeners.forEach((listener) => {
-    listener(memoryState);
-  });
-}
-
-type Toast = Omit<ToasterToast, "id">;
-
-function toast({ ...props }: Toast) {
-  const id = genId();
-
-  const update = (props: ToasterToast) =>
-    dispatch({
-      type: "UPDATE_TOAST",
-      toast: { ...props, id },
-    });
-  const dismiss = () => dispatch({ type: "DISMISS_TOAST", toastId: id });
-
-  dispatch({
-    type: "ADD_TOAST",
-    toast: {
-      ...props,
-      id,
-      open: true,
-      onOpenChange: (open) => {
-        if (!open) dismiss();
-      },
-    },
-  });
-
-  return {
-    id: id,
-    dismiss,
-    update,
-  };
-}
-
-function useToast() {
-  const [state, setState] = React.useState<State>(memoryState);
-
-  React.useEffect(() => {
-    listeners.push(setState);
-    return () => {
-      const index = listeners.indexOf(setState);
-      if (index > -1) {
-        listeners.splice(index, 1);
-      }
-    };
-  }, [state]);
-
-  return {
-    ...state,
-    toast,
-    dismiss: (toastId?: string) => dispatch({ type: "DISMISS_TOAST", toastId }),
-  };
-}
-
-export { useToast, toast };

package/src/components/ui/user-avatar-group-with-org.tsx

@@ -1,45 +0,0 @@
-// @ts-nocheck — loose user/team contract
-
-import { useIsEmbed } from "../../booker/hooks/embed-stubs";
-import { getPlaceholderAvatar, getUserAvatarUrl } from "../../vendor/avatar-url";
-import { getBookerBaseUrlSync } from "../../vendor/booker-url";
-import { AvatarGroup, type AvatarGroupProps } from "./avatar-group";
-
-type UserAvatarProps = Omit<AvatarGroupProps, "items"> & {
-  users: Array<{
-    name?: string | null;
-    username?: string | null;
-    avatarUrl?: string | null;
-    bookerUrl: string;
-  }>;
-  organization: {
-    slug?: string | null;
-    name?: string | null;
-    logoUrl?: string | null;
-  };
-  disableHref?: boolean;
-};
-
-export function UserAvatarGroupWithOrg(props: UserAvatarProps) {
-  const { users, organization, disableHref = false, ...rest } = props;
-  const isEmbed = useIsEmbed();
-
-  const items = [
-    {
-      // We don't want booker to be able to see the list of other users or teams inside the embed.
-      href: isEmbed || disableHref ? null : getBookerBaseUrlSync(organization.slug),
-      image: getPlaceholderAvatar(organization.logoUrl, organization.name),
-      alt: organization.name || undefined,
-      title: organization.name || undefined,
-    },
-  ].concat(
-    users.map((user) => ({
-      href: disableHref ? null : `${user.bookerUrl}/${user.username}?redirect=false`,
-      image: getUserAvatarUrl(user),
-      alt: user.name || undefined,
-      title: user.name || user.username || "",
-    }))
-  );
-
-  return <AvatarGroup {...rest} items={items} />;
-}

package/src/connect/apple/apple-connect.tsx

@@ -1,197 +0,0 @@
-// @ts-nocheck — atoms wrapper/hook over loose contracts + Radix 1.x
-"use client";
-
-import type { FC } from "react";
-import { useState } from "react";
-import { useForm } from "react-hook-form";
-import { AtomsWrapper } from "../../components/atoms-wrapper";
-import { Button } from "../../components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "../../components/ui/dialog";
-import { Form } from "../../components/ui/form";
-import { PasswordField, TextField } from "../../components/ui/text-field";
-import { useToast } from "../../components/ui/use-toast";
-import { SUCCESS_STATUS } from "../../constants/api";
-import { useCheck } from "../../hooks/connect/use-check";
-import { useSaveCalendarCredentials } from "../../hooks/connect/use-connect";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { cn } from "../../lib/utils";
-import type { OAuthConnectProps } from "../o-auth-connect";
-import { ConnectedCalendarsTooltip } from "../o-auth-connect";
-
-export const AppleConnect: FC<Partial<Omit<OAuthConnectProps, "redir">>> = ({
-  label,
-  alreadyConnectedLabel,
-  loadingLabel,
-  className,
-  initialData,
-  isMultiCalendar = false,
-  tooltip,
-  tooltipSide = "bottom",
-  isClickable,
-  onSuccess,
-  isDryRun = false,
-}) => {
-  const { t } = useLocale();
-  const form = useForm({
-    defaultValues: {
-      username: "",
-      password: "",
-    },
-  });
-  const { toast } = useToast();
-  const { allowConnect, checked, refetch } = useCheck({
-    calendar: "apple",
-    initialData,
-  });
-
-  const [isDialogOpen, setIsDialogOpen] = useState(false);
-  let displayedLabel = label || t("apple_connect_atom_label");
-
-  const { mutate: saveCredentials, isPending: isSaving } = useSaveCalendarCredentials({
-    onSuccess: (res) => {
-      if (res.status === SUCCESS_STATUS) {
-        form.reset();
-        setIsDialogOpen(false);
-        refetch();
-        toast({
-          description: "Calendar credentials added successfully",
-        });
-        onSuccess?.();
-      }
-    },
-    onError: (err) => {
-      toast({
-        description: `Error: ${err}`,
-      });
-    },
-  });
-
-  const isChecking = !checked;
-  const isDisabled = isChecking || !allowConnect;
-
-  if (isChecking) {
-    displayedLabel = loadingLabel || t("apple_connect_atom_loading_label");
-  } else if (!allowConnect) {
-    displayedLabel = alreadyConnectedLabel || t("apple_connect_atom_already_connected_label");
-  }
-
-  return (
-    <AtomsWrapper>
-      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
-        <DialogTrigger asChild>
-          <>
-            {isMultiCalendar && (
-              <Button
-                StartIcon="calendar-days"
-                color="primary"
-                disabled={isClickable ? false : isChecking}
-                tooltip={tooltip ? tooltip : <ConnectedCalendarsTooltip calendarInstance="apple" />}
-                tooltipSide={tooltipSide}
-                tooltipOffset={10}
-                tooltipClassName="p-0 text-inherit bg-inherit"
-                className={cn("", !isDisabled && "cursor-pointer", "border-none md:rounded-md", className)}
-                onClick={() => setIsDialogOpen(true)}
-              >
-                {displayedLabel}
-              </Button>
-            )}
-            {!isMultiCalendar && (
-              <Button
-                StartIcon="calendar-days"
-                color="primary"
-                disabled={isDisabled}
-                className={cn(
-                  "",
-                  isDisabled && "cursor-not-allowed",
-                  !isDisabled && "cursor-pointer",
-                  "border-none md:rounded-md",
-                  className
-                )}
-                onClick={() => setIsDialogOpen(true)}
-              >
-                {displayedLabel}
-              </Button>
-            )}
-          </>
-        </DialogTrigger>
-        <DialogContent className="bg-default text-default">
-          <DialogHeader>
-            <DialogTitle>Connect to Apple Server</DialogTitle>
-            <DialogDescription>
-              Generate an app specific password to use with Cal.com at{" "}
-              <span className="font-bold">https://appleid.apple.com/account/manage</span>. Your credentials
-              will be stored and encrypted.
-            </DialogDescription>
-          </DialogHeader>
-          <Form
-            form={form}
-            handleSubmit={async (values) => {
-              const { username, password } = values;
-
-              if (isDryRun) {
-                form.reset();
-                setIsDialogOpen(false);
-                toast({
-                  description: "Calendar credentials added successfully",
-                });
-                onSuccess?.();
-              } else {
-                await saveCredentials({ calendar: "apple", username, password });
-              }
-            }}
-          >
-            <fieldset
-              className="stack-y-4"
-              disabled={form.formState.isSubmitting}
-              data-testid="apple-calendar-form"
-            >
-              <TextField
-                required
-                type="text"
-                {...form.register("username")}
-                label="Apple ID"
-                placeholder="appleid@domain.com"
-                data-testid="apple-calendar-email"
-              />
-              <PasswordField
-                required
-                {...form.register("password")}
-                label="Password"
-                placeholder="•••••••••••••"
-                autoComplete="password"
-                data-testid="apple-calendar-password"
-              />
-            </fieldset>
-            <div className="mt-5 justify-end space-x-2 rtl:space-x-reverse sm:mt-4 sm:flex">
-              <Button
-                disabled={isSaving}
-                type="button"
-                color="secondary"
-                className="md:rounded-md"
-                onClick={() => setIsDialogOpen(false)}
-              >
-                Cancel
-              </Button>
-              <Button
-                disabled={isSaving}
-                type="submit"
-                className="border-none md:rounded-md"
-                loading={form.formState.isSubmitting}
-                data-testid="apple-calendar-login-button"
-              >
-                Save
-              </Button>
-            </div>
-          </Form>
-        </DialogContent>
-      </Dialog>
-    </AtomsWrapper>
-  );
-};

package/src/connect/components/disconnect-integration-modal.tsx

@@ -1,51 +0,0 @@
-import { ConfirmationDialogContent } from "../../components/ui/confirmation-dialog-content";
-import { Dialog } from "../../components/ui/controlled-dialog";
-import type { AtomApp as App } from "../../contracts";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-
-export type RemoveAppParams = {
-  credentialId: number;
-  app?: App["slug"];
-  teamId?: number;
-  callback: () => void;
-};
-
-interface DisconnectIntegrationModalProps {
-  credentialId: number | null;
-  isOpen: boolean;
-  handleModelClose: () => void;
-  teamId?: number;
-  handleRemoveApp: (params: RemoveAppParams) => void;
-  app?: App["slug"] | null;
-  isPlatform?: boolean;
-}
-
-export default function DisconnectIntegrationModal({
-  credentialId,
-  app,
-  isOpen,
-  handleModelClose,
-  teamId,
-  handleRemoveApp,
-  isPlatform = false,
-}: DisconnectIntegrationModalProps) {
-  const { t } = useLocale();
-  return (
-    <Dialog isPlatform={isPlatform} open={isOpen} onOpenChange={handleModelClose}>
-      <ConfirmationDialogContent
-        variety="danger"
-        title={t("remove_app")}
-        confirmBtnText={t("yes_remove_app")}
-        onConfirm={() => {
-          if (isPlatform && app && credentialId) {
-            handleRemoveApp({ credentialId, app, teamId, callback: () => handleModelClose() });
-          } else if (credentialId) {
-            handleRemoveApp({ credentialId, teamId, callback: () => handleModelClose() });
-          }
-        }}
-      >
-        <p className="mt-5">{t("are_you_sure_you_want_to_remove_this_app")}</p>
-      </ConfirmationDialogContent>
-    </Dialog>
-  );
-}

package/src/connect/components/office365-account-dialog.tsx

@@ -1,48 +0,0 @@
-// @ts-nocheck — atoms wrapper over loose contracts + Radix prop-pick
-import { Button } from "../../components/ui/button";
-import { Dialog, type DialogProps } from "../../components/ui/controlled-dialog";
-import { DialogContent } from "../../components/ui/dialog";
-
-/**
- * Pre-connection dialog warning about Microsoft work/school account
- * requirements. Ported from @calcom/app-store/office365video/components;
- * atoms locals replace the features/ controlled-dialog + @calcom/ui
- * primitives.
- */
-export function AccountDialog(
-  props: DialogProps & {
-    handleSubmit: () => void;
-  }
-) {
-  return (
-    <Dialog
-      isPlatform={props.isPlatform}
-      name="Account check"
-      open={props.open}
-      onOpenChange={props.onOpenChange}
-    >
-      <DialogContent>
-        <div className="flex flex-col gap-4">
-          <div>
-            <h2 className="text-lg font-semibold">
-              Connecting with MS Teams requires a work/school Microsoft account.
-            </h2>
-            <p className="text-subtle mt-1 text-sm">
-              If you continue with a personal account you will receive an error
-            </p>
-          </div>
-          <div className="flex flex-row-reverse gap-2">
-            <Button type="button" onClick={props.handleSubmit}>
-              Continue
-            </Button>
-            <Button type="button" color="secondary" tabIndex={-1} onClick={() => props.onOpenChange?.(false)}>
-              Cancel
-            </Button>
-          </div>
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-export default AccountDialog;