@calcom/atoms 2.8.0 → 2.8.2

package/src/components/ui/checked-team-select.tsx

@@ -1,225 +0,0 @@
-// @ts-nocheck — loose Host/SelectClassNames contracts + Radix prop-pick
-"use client";
-
-import { useAutoAnimate } from "@formkit/auto-animate/react";
-import { useState } from "react";
-import type { Options, Props } from "react-select";
-import {
-  PriorityDialog,
-  type PriorityDialogCustomClassNames,
-  WeightDialog,
-  type WeightDialogCustomClassNames,
-} from "../../event-types/components/host-edit-dialogs";
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { cn } from "../../lib/utils";
-import { getHostsFromOtherGroups } from "../../vendor/host-group-utils";
-import { Avatar } from "./avatar";
-import { Button } from "./button";
-import { Icon } from "./icon";
-import { Select } from "./select";
-import { Tooltip } from "./tooltip";
-
-export type CheckedSelectOption = {
-  avatar: string;
-  label: string;
-  value: string;
-  priority?: number;
-  weight?: number;
-  isFixed?: boolean;
-  disabled?: boolean;
-  defaultScheduleId?: number | null;
-  groupId: string | null;
-};
-
-export type CheckedTeamSelectCustomClassNames = {
-  hostsSelect?: {
-    select?: string;
-    innerClassNames?: Record<string, unknown>;
-  };
-  selectedHostList?: {
-    container?: string;
-    listItem?: {
-      container?: string;
-      avatar?: string;
-      name?: string;
-      changePriorityButton?: string;
-      changeWeightButton?: string;
-      removeButton?: string;
-    };
-  };
-  priorityDialog?: PriorityDialogCustomClassNames;
-  weightDialog?: WeightDialogCustomClassNames;
-};
-
-const getPriorityTextAndColor = (priority?: number) => {
-  switch (priority) {
-    case 0:
-      return { text: "lowest", color: "text-gray-300" };
-    case 1:
-      return { text: "low", color: "text-gray-400" };
-    case 2:
-      return { text: "medium", color: "text-gray-500" };
-    case 3:
-      return { text: "high", color: "text-gray-600" };
-    case 4:
-      return { text: "highest", color: "text-gray-700" };
-    default:
-      return { text: "medium", color: "text-gray-500" };
-  }
-};
-
-export const CheckedTeamSelect = ({
-  options = [],
-  value = [],
-  isRRWeightsEnabled,
-  customClassNames,
-  groupId,
-  isPlatform = false,
-  ...props
-}: Omit<Props<CheckedSelectOption, true>, "value" | "onChange"> & {
-  options?: Options<CheckedSelectOption>;
-  value?: readonly CheckedSelectOption[];
-  onChange: (value: readonly CheckedSelectOption[]) => void;
-  isRRWeightsEnabled?: boolean;
-  customClassNames?: CheckedTeamSelectCustomClassNames;
-  groupId: string | null;
-  isPlatform?: boolean;
-}) => {
-  const [priorityDialogOpen, setPriorityDialogOpen] = useState(false);
-  const [weightDialogOpen, setWeightDialogOpen] = useState(false);
-  const [currentOption, setCurrentOption] = useState(value[0] ?? null);
-
-  const { t } = useLocale();
-  const [animationRef] = useAutoAnimate<HTMLUListElement>();
-
-  const valueFromGroup = groupId ? value.filter((host) => host.groupId === groupId) : value;
-
-  const handleSelectChange = (newValue: readonly CheckedSelectOption[]) => {
-    const otherGroupsHosts = getHostsFromOtherGroups(value, groupId);
-    const newValueAllGroups = [...otherGroupsHosts, ...newValue.map((host) => ({ ...host, groupId }))];
-    props.onChange(newValueAllGroups);
-  };
-
-  return (
-    <>
-      <Select
-        {...props}
-        name={props.name}
-        placeholder={props.placeholder || t("select")}
-        isSearchable={true}
-        options={options}
-        value={valueFromGroup}
-        onChange={handleSelectChange}
-        isMulti
-        className={customClassNames?.hostsSelect?.select}
-        innerClassNames={{
-          ...customClassNames?.hostsSelect?.innerClassNames,
-          control: "rounded-md",
-        }}
-      />
-      <ul
-        className={cn(
-          "mb-4 mt-3 rounded-md",
-          valueFromGroup.length >= 1 && "border-subtle border",
-          customClassNames?.selectedHostList?.container
-        )}
-        ref={animationRef}
-      >
-        {valueFromGroup.map((option, index) => (
-          <li
-            key={option.value}
-            className={cn(
-              `flex px-3 py-2 ${index === valueFromGroup.length - 1 ? "" : "border-subtle border-b"}`,
-              customClassNames?.selectedHostList?.listItem?.container
-            )}
-          >
-            {!isPlatform && <Avatar size="sm" imageSrc={option.avatar} alt={option.label} />}
-            {isPlatform && (
-              <Icon
-                name="user"
-                className={cn("mt-0.5 h-4 w-4", customClassNames?.selectedHostList?.listItem?.avatar)}
-              />
-            )}
-            <p
-              className={cn(
-                "text-emphasis my-auto ms-3 text-sm",
-                customClassNames?.selectedHostList?.listItem?.name
-              )}
-            >
-              {option.label}
-            </p>
-            <div className="ml-auto flex items-center">
-              {option && !option.isFixed ? (
-                <>
-                  <Tooltip content={t("change_priority")}>
-                    <Button
-                      color="minimal"
-                      onClick={() => {
-                        setPriorityDialogOpen(true);
-                        setCurrentOption(option);
-                      }}
-                      className={cn(
-                        "mr-6 h-2 p-0 text-sm hover:bg-transparent",
-                        getPriorityTextAndColor(option.priority).color,
-                        customClassNames?.selectedHostList?.listItem?.changePriorityButton
-                      )}
-                    >
-                      {t(getPriorityTextAndColor(option.priority).text)}
-                    </Button>
-                  </Tooltip>
-                  {isRRWeightsEnabled ? (
-                    <Button
-                      color="minimal"
-                      className={cn(
-                        "mr-6 h-2 w-4 p-0 text-sm hover:bg-transparent",
-                        customClassNames?.selectedHostList?.listItem?.changeWeightButton
-                      )}
-                      onClick={() => {
-                        setWeightDialogOpen(true);
-                        setCurrentOption(option);
-                      }}
-                    >
-                      {option.weight ?? 100}%
-                    </Button>
-                  ) : null}
-                </>
-              ) : null}
-              <Icon
-                name="x"
-                onClick={() => props.onChange(value.filter((item) => item.value !== option.value))}
-                className={cn(
-                  "my-auto ml-2 h-4 w-4",
-                  customClassNames?.selectedHostList?.listItem?.removeButton
-                )}
-              />
-            </div>
-          </li>
-        ))}
-      </ul>
-      {currentOption && !currentOption.isFixed ? (
-        <>
-          <PriorityDialog
-            isPlatform={isPlatform}
-            isOpenDialog={priorityDialogOpen}
-            setIsOpenDialog={setPriorityDialogOpen}
-            option={currentOption}
-            options={options}
-            onChange={props.onChange}
-            customClassNames={customClassNames?.priorityDialog}
-          />
-          <WeightDialog
-            isPlatform={isPlatform}
-            isOpenDialog={weightDialogOpen}
-            setIsOpenDialog={setWeightDialogOpen}
-            option={currentOption}
-            options={options}
-            onChange={props.onChange}
-            customClassNames={customClassNames?.weightDialog}
-          />
-        </>
-      ) : null}
-    </>
-  );
-};
-
-export default CheckedTeamSelect;

package/src/components/ui/confirmation-dialog-content.tsx

@@ -1,82 +0,0 @@
-// @ts-nocheck — Radix 1.x prop-pick narrowing drops className/children
-import type { MouseEvent, PropsWithChildren, ReactElement } from "react";
-
-import { Button } from "./button";
-import { DialogContent, DialogDescription, DialogTitle } from "./dialog";
-import { AlertCircleIcon, CheckIcon } from "./icons";
-
-type ConfirmBtnType =
-  | { confirmBtn?: never; confirmBtnText?: string }
-  | { confirmBtnText?: never; confirmBtn?: ReactElement };
-
-export type ConfirmationDialogContentProps = {
-  cancelBtnText?: string;
-  isPending?: boolean;
-  loadingText?: string;
-  onConfirm?: (event: MouseEvent<HTMLElement>) => void;
-  onCancel?: (event: MouseEvent<HTMLElement>) => void;
-  title: string;
-  variety?: "danger" | "warning" | "success";
-} & ConfirmBtnType;
-
-export function ConfirmationDialogContent(props: PropsWithChildren<ConfirmationDialogContentProps>) {
-  const {
-    title,
-    variety,
-    confirmBtn,
-    confirmBtnText = "Confirm",
-    cancelBtnText = "Cancel",
-    loadingText = "Loading…",
-    isPending = false,
-    onConfirm,
-    onCancel,
-    children,
-  } = props;
-
-  return (
-    <DialogContent>
-      <div className="flex">
-        {variety && (
-          <div className="mt-0.5 ltr:mr-3">
-            {variety === "danger" && (
-              <div className="bg-error mx-auto rounded-full p-2 text-center">
-                <AlertCircleIcon className="h-5 w-5 text-red-600 dark:text-red-100" />
-              </div>
-            )}
-            {variety === "warning" && (
-              <div className="bg-attention mx-auto rounded-full p-2 text-center">
-                <AlertCircleIcon className="h-5 w-5 text-orange-600" />
-              </div>
-            )}
-            {variety === "success" && (
-              <div className="bg-cal-success mx-auto rounded-full p-2 text-center">
-                <CheckIcon className="h-5 w-5 text-green-600" />
-              </div>
-            )}
-          </div>
-        )}
-        <div className="w-full">
-          <DialogTitle className="font-heading text-emphasis mt-1 text-xl">{title}</DialogTitle>
-          <DialogDescription asChild>
-            <div className="text-subtle text-sm">{children}</div>
-          </DialogDescription>
-        </div>
-      </div>
-      <div className="my-5 flex flex-row-reverse gap-x-2 sm:my-8">
-        {confirmBtn ?? (
-          <Button
-            color="primary"
-            loading={isPending}
-            onClick={(e) => onConfirm?.(e)}
-            data-testid="dialog-confirmation"
-          >
-            {isPending ? loadingText : confirmBtnText}
-          </Button>
-        )}
-        <Button color="secondary" disabled={isPending} onClick={(e) => onCancel?.(e)}>
-          {cancelBtnText}
-        </Button>
-      </div>
-    </DialogContent>
-  );
-}

package/src/components/ui/controlled-dialog.tsx

@@ -1,30 +0,0 @@
-"use client";
-
-import type { ComponentProps } from "react";
-
-import { Dialog as BaseDialog } from "./dialog";
-
-type ControlledDialogProps = ComponentProps<typeof BaseDialog> & {
-  name?: string;
-  clearQueryParamsOnClose?: string[];
-  isPlatform?: boolean;
-};
-
-/**
- * atoms-local shim for @calcom/features/components/controlled-dialog. In the
- * original, the URL-param-driven "controlled" behavior runs only when
- * isPlatform is false. atoms is always platform, so this component simply
- * forwards to the raw Radix Dialog and drops the controlled-dialog-specific
- * props (name, clearQueryParamsOnClose, isPlatform).
- */
-export function Dialog(props: ControlledDialogProps) {
-  const {
-    name: _name,
-    clearQueryParamsOnClose: _clearQueryParamsOnClose,
-    isPlatform: _isPlatform,
-    ...rest
-  } = props;
-  return <BaseDialog {...rest} />;
-}
-
-export type { ControlledDialogProps as DialogProps };

package/src/components/ui/dialog.tsx

@@ -1,165 +0,0 @@
-/*
-In this file we can edit all the Primitives from radix-ui/react-dialog.
-The component prop-pick narrowing from @radix-ui/react-dialog@1.0.4's
-typings drops className/children at the TS level even though they work
-at runtime — the file is a passthrough wrapper so we silence TS here
-rather than cargo-culting casts on every spread.
-*/
-// @ts-nocheck
-import * as DialogPrimitives from "@radix-ui/react-dialog-atoms";
-import * as React from "react";
-import { useAtomsLocale } from "../../hooks/use-atoms-locale";
-import { cn } from "../../lib/utils";
-import { Button, type ButtonProps } from "./button";
-import { XIcon } from "./icons";
-
-const Dialog = DialogPrimitives.Root;
-
-const DialogTrigger = DialogPrimitives.Trigger;
-
-const DialogPortal = DialogPrimitives.Portal;
-
-type DialogCloseProps = {
-  "data-testid"?: string;
-  dialogCloseProps?: React.ComponentProps<typeof DialogPrimitives.Close>;
-  children?: React.ReactNode;
-  onClick?: (e: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-  disabled?: boolean;
-  color?: ButtonProps["color"];
-} & Omit<ButtonProps, "color">;
-
-const DialogClose = React.forwardRef<HTMLButtonElement, DialogCloseProps>(function DialogClose(props, ref) {
-  const { t } = useAtomsLocale();
-  const { className, children, color, dialogCloseProps, ...buttonProps } = props;
-  return (
-    <DialogPrimitives.Close asChild {...dialogCloseProps}>
-      <Button
-        ref={ref}
-        data-testid={props["data-testid"] || "dialog-rejection"}
-        color={color || "minimal"}
-        className={cn(color === "destructive" && "destructive", className)}
-        {...buttonProps}
-      >
-        {children ?? t("close")}
-      </Button>
-    </DialogPrimitives.Close>
-  );
-});
-
-const Portal = ({ children }: { children: React.ReactElement | React.ReactElement[] }) => {
-  return (
-    <DialogPrimitives.Portal className="calcom-atoms">
-      <div className="calcom-atoms">{children}</div>
-    </DialogPrimitives.Portal>
-  );
-};
-const Root = DialogPrimitives.Root;
-const Trigger = DialogPrimitives.Trigger;
-const Overlay = DialogPrimitives.Overlay;
-const Content = DialogPrimitives.Content;
-const Title = DialogPrimitives.Title;
-const Description = DialogPrimitives.Description;
-
-const Close = DialogPrimitives.Close;
-
-const DialogOverlay = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitives.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitives.Overlay>
->(({ className, ...props }, ref) => (
-  <DialogPrimitives.Overlay
-    ref={ref}
-    className={cn(
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80",
-      className
-    )}
-    {...props}
-  />
-));
-DialogOverlay.displayName = DialogPrimitives.Overlay.displayName;
-
-const DialogContent = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitives.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitives.Content>
->(({ className, children, ...props }, ref) => (
-  <>
-    <DialogPortal>
-      <div className="calcom-atoms">
-        <DialogOverlay />
-        <DialogPrimitives.Content
-          ref={ref}
-          className={cn(
-            "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg",
-            className
-          )}
-          {...props}
-        >
-          {children}
-          <DialogPrimitives.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
-            <XIcon className="h-4 w-4" />
-            <span className="sr-only">Close</span>
-          </DialogPrimitives.Close>
-        </DialogPrimitives.Content>
-      </div>
-    </DialogPortal>
-  </>
-));
-DialogContent.displayName = DialogPrimitives.Content.displayName;
-
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div className={cn("flex flex-col stack-y-1.5 text-center sm:text-left", className)} {...props} />
-);
-DialogHeader.displayName = "DialogHeader";
-
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-  <div
-    className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
-    {...props}
-  />
-);
-DialogFooter.displayName = "DialogFooter";
-
-const DialogTitle = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitives.Title>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitives.Title>
->(({ className, id, ...props }, ref) => (
-  <DialogPrimitives.Title
-    ref={ref}
-    id={id ?? "modal-title"}
-    className={cn("text-lg font-semibold leading-none tracking-tight", className)}
-    {...props}
-  />
-));
-DialogTitle.displayName = DialogPrimitives.Title.displayName;
-
-const DialogDescription = React.forwardRef<
-  React.ElementRef<typeof DialogPrimitives.Description>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitives.Description>
->(({ className, ...props }, ref) => (
-  <DialogPrimitives.Description
-    ref={ref}
-    className={cn("text-muted-foreground text-sm", className)}
-    {...props}
-  />
-));
-DialogDescription.displayName = DialogPrimitives.Description.displayName;
-
-export {
-  Dialog,
-  DialogPortal,
-  DialogOverlay,
-  DialogClose,
-  DialogTrigger,
-  DialogContent,
-  DialogHeader,
-  DialogFooter,
-  DialogTitle,
-  DialogDescription,
-  Portal,
-  Root,
-  Overlay,
-  Trigger,
-  Close,
-  Content,
-  Description,
-  Title,
-};

package/src/components/ui/disconnect-calendar-integration.tsx

@@ -1,52 +0,0 @@
-// @ts-nocheck — Radix 1.x prop-pick narrowing drops className/children
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { Button, type ButtonProps } from "./button";
-import { ConfirmationDialogContent } from "./confirmation-dialog-content";
-import { Dialog, DialogTrigger } from "./dialog";
-
-export const DisconnectIntegrationComponent = ({
-  label,
-  trashIcon,
-  isGlobal,
-  isModalOpen = false,
-  onModalOpen,
-  onDeletionConfirmation,
-  buttonProps,
-  disabled,
-}: {
-  label?: string;
-  trashIcon?: boolean;
-  isGlobal?: boolean;
-  isModalOpen: boolean;
-  onModalOpen: () => void;
-  onDeletionConfirmation: () => void;
-  buttonProps?: ButtonProps;
-  disabled?: boolean;
-}) => {
-  const { t } = useLocale();
-
-  return (
-    <Dialog open={isModalOpen} onOpenChange={onModalOpen}>
-      <DialogTrigger asChild>
-        <Button
-          color={buttonProps?.color || "destructive"}
-          StartIcon={!trashIcon ? undefined : "trash"}
-          size="base"
-          variant={trashIcon && !label ? "icon" : "button"}
-          disabled={isGlobal || disabled}
-          {...buttonProps}
-        >
-          {label}
-        </Button>
-      </DialogTrigger>
-      <ConfirmationDialogContent
-        variety="danger"
-        title={t("remove_app")}
-        confirmBtnText={t("yes_remove_app")}
-        onConfirm={onDeletionConfirmation}
-      >
-        <p className="mt-5">{t("are_you_sure_you_want_to_remove_this_app")}</p>
-      </ConfirmationDialogContent>
-    </Dialog>
-  );
-};

package/src/components/ui/divider.tsx

@@ -1,22 +0,0 @@
-import { cn } from "../../lib/utils";
-
-export function Divider({ className, ...props }: JSX.IntrinsicElements["hr"]) {
-  return <hr className={cn("border-subtle my-1", className)} {...props} />;
-}
-
-export function VerticalDivider({ className, ...props }: JSX.IntrinsicElements["svg"]) {
-  return (
-    <svg
-      className={cn("mx-3 text-muted", className)}
-      {...props}
-      width="2"
-      height="16"
-      viewBox="0 0 2 16"
-      ry="6"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <rect width="2" height="16" rx="1" fill="currentColor" />
-    </svg>
-  );
-}