@calcom/atoms 2.7.2 → 2.8.1

package/src/components/ui/select.tsx

@@ -1,123 +0,0 @@
-// @ts-nocheck — Radix 1.x prop-pick narrowing drops className/children
-"use client";
-
-import type * as React from "react";
-import { useId } from "react";
-import type { ControlProps, GroupBase, Props as ReactSelectProps } from "react-select";
-import ReactSelect, { components as reactSelectComponents } from "react-select";
-import { cn } from "../../lib/utils";
-import { Label } from "./label";
-import { inputStyles } from "./text-field";
-
-const ControlWithTestId = <
-  Option,
-  IsMulti extends boolean,
-  Group extends GroupBase<Option> = GroupBase<Option>,
->(
-  controlProps: ControlProps<Option, IsMulti, Group>
-) => {
-  const dataTestId =
-    (controlProps.selectProps as { "data-testid"?: string })["data-testid"] ?? "select-control";
-  return (
-    <span data-testid={dataTestId}>
-      <reactSelectComponents.Control {...controlProps} />
-    </span>
-  );
-};
-
-export type SelectProps<
-  Option,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>,
-> = ReactSelectProps<Option, IsMulti, Group> & {
-  size?: "sm" | "md";
-  grow?: boolean;
-  innerClassNames?: {
-    input?: string;
-    option?: string;
-    control?: string;
-    singleValue?: string;
-    menu?: string;
-    menuList?: string;
-  };
-};
-
-export const Select = <
-  Option,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>,
->({
-  size = "md",
-  grow = true,
-  innerClassNames,
-  ...props
-}: SelectProps<Option, IsMulti, Group>) => {
-  return (
-    <ReactSelect<Option, IsMulti, Group>
-      menuPlacement="auto"
-      {...props}
-      components={{
-        Control: ControlWithTestId,
-        ...props.components,
-      }}
-      styles={{
-        control: (base) => ({
-          ...base,
-          minHeight: size === "sm" ? "28px" : "32px",
-          height: grow ? "auto" : size === "sm" ? "28px" : "32px",
-        }),
-        ...props.styles,
-      }}
-      classNames={{
-        input: () => cn("text-emphasis", innerClassNames?.input),
-        option: (state) =>
-          cn(
-            "bg-default flex cursor-pointer justify-between py-2 px-3 rounded-md text-default items-center",
-            state.isFocused && "bg-subtle",
-            state.isDisabled && "bg-cal-muted",
-            state.isSelected && "bg-emphasis text-default",
-            innerClassNames?.option
-          ),
-        placeholder: () => cn("text-muted"),
-        dropdownIndicator: () => cn("text-default w-4 h-4 flex items-center justify-center"),
-        control: () => cn(inputStyles({ size }), "flex items-center", innerClassNames?.control),
-        singleValue: () => cn("text-emphasis", innerClassNames?.singleValue),
-        menu: () =>
-          cn("bg-default border-subtle mt-1 rounded-md border p-1 text-sm shadow-md", innerClassNames?.menu),
-        menuList: () => cn("stack-y-px", innerClassNames?.menuList),
-        ...props.classNames,
-      }}
-    />
-  );
-};
-
-export const SelectField = <
-  Option,
-  IsMulti extends boolean = false,
-  Group extends GroupBase<Option> = GroupBase<Option>,
->(
-  props: {
-    required?: boolean;
-    name?: string;
-    containerClassName?: string;
-    label?: string;
-    labelProps?: React.ComponentProps<typeof Label>;
-    className?: string;
-    error?: string;
-  } & SelectProps<Option, IsMulti, Group>
-) => {
-  const { label, containerClassName, labelProps, className, error, ...passThrough } = props;
-  const id = useId();
-  return (
-    <div className={cn(containerClassName)}>
-      <div className={cn(className)}>
-        {label && (
-          <Label htmlFor={id} {...labelProps} className={cn(error && "text-error", labelProps?.className)}>
-            {label}
-          </Label>
-        )}
-      </div>
-      <Select<Option, IsMulti, Group> {...passThrough} />
-    </div>
-  );
-};

package/src/components/ui/settings-header.tsx

@@ -1,87 +0,0 @@
-"use client";
-
-import type React from "react";
-import { Suspense } from "react";
-
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { cn } from "../../lib/utils";
-import { Button } from "./button";
-import { Spinner } from "./icon";
-
-type HeaderPropsBase = {
-  children: React.ReactNode;
-  title?: string;
-  description?: string;
-  CTA?: React.ReactNode;
-  ctaClassName?: string;
-  borderInShellHeader?: boolean;
-};
-
-type HeaderPropsWithBackButton = HeaderPropsBase & {
-  backButton: true;
-  onBackButtonClick: () => void;
-};
-
-type HeaderPropsWithoutBackButton = HeaderPropsBase & {
-  backButton?: false;
-  onBackButtonClick?: never;
-};
-
-type HeaderProps = HeaderPropsWithBackButton | HeaderPropsWithoutBackButton;
-
-export default function SettingsHeader({
-  children,
-  title,
-  description,
-  CTA,
-  ctaClassName,
-  borderInShellHeader,
-  backButton,
-  onBackButtonClick,
-}: HeaderProps) {
-  const { t } = useLocale();
-
-  return (
-    <div>
-      <header
-        className={cn(
-          "border-subtle mx-auto flex justify-between",
-          borderInShellHeader && "rounded-t-lg border px-4 py-6 sm:px-6",
-          borderInShellHeader === undefined && "mb-8 border-b pb-8"
-        )}
-      >
-        <div className="flex w-full items-center justify-between gap-2">
-          <div className="flex items-center">
-            {backButton && onBackButtonClick && (
-              <Button
-                variant="icon"
-                size="sm"
-                color="minimal"
-                onClick={onBackButtonClick}
-                className="rounded-md ltr:mr-2 rtl:ml-2"
-                StartIcon="arrow-left"
-                aria-label={t("go_back")}
-              />
-            )}
-            <div>
-              {title ? (
-                <h1 className="font-heading text-emphasis mb-1 text-xl font-semibold leading-5 tracking-wide">
-                  {title}
-                </h1>
-              ) : (
-                <div className="bg-emphasis mb-1 h-5 w-24 animate-pulse rounded-lg" />
-              )}
-              {description ? (
-                <p className="text-default text-sm ltr:mr-4 rtl:ml-4">{description}</p>
-              ) : (
-                <div className="bg-emphasis h-5 w-32 animate-pulse rounded-lg" />
-              )}
-            </div>
-          </div>
-          <div className={cn("shrink-0", ctaClassName)}>{CTA}</div>
-        </div>
-      </header>
-      <Suspense fallback={<Spinner className="mx-auto my-5 animate-spin" />}>{children}</Suspense>
-    </div>
-  );
-}

package/src/components/ui/settings-toggle.tsx

@@ -1,123 +0,0 @@
-// @ts-nocheck — loose contract + Radix switch prop-pick
-"use client";
-
-import { useAutoAnimate } from "@formkit/auto-animate/react";
-import type { ReactNode } from "react";
-
-import { cn } from "../../lib/utils";
-import { Label } from "./label";
-import { Switch } from "./switch";
-
-type Props = {
-  children?: ReactNode;
-  title: string;
-  description?: string | ReactNode;
-  checked: boolean;
-  disabled?: boolean;
-  LockedIcon?: ReactNode;
-  Badge?: ReactNode;
-  onCheckedChange?: (checked: boolean) => void;
-  "data-testid"?: string;
-  tooltip?: string;
-  toggleSwitchAtTheEnd?: boolean;
-  childrenClassName?: string;
-  switchContainerClassName?: string;
-  labelClassName?: string;
-  descriptionClassName?: string;
-  noIndentation?: boolean;
-  hideSwitch?: boolean;
-};
-
-export function SettingsToggle({
-  checked,
-  onCheckedChange,
-  description,
-  LockedIcon,
-  Badge,
-  title,
-  children,
-  disabled,
-  tooltip,
-  toggleSwitchAtTheEnd = false,
-  childrenClassName,
-  switchContainerClassName,
-  labelClassName,
-  descriptionClassName,
-  noIndentation = false,
-  hideSwitch,
-  ...rest
-}: Props) {
-  const [animateRef] = useAutoAnimate<HTMLDivElement>();
-
-  return (
-    <div className="flex w-full flex-col stack-y-4 lg:flex-row lg:space-x-4 lg:stack-y-0">
-      <fieldset className="block w-full flex-col sm:flex">
-        {toggleSwitchAtTheEnd ? (
-          <div
-            className={cn(
-              "border-subtle flex justify-between space-x-3 rounded-lg border px-4 py-6 sm:px-6",
-              checked && children && "rounded-b-none",
-              switchContainerClassName
-            )}
-          >
-            <div>
-              <div className="flex items-center gap-x-2" data-testid={`${rest["data-testid"]}-title`}>
-                <Label
-                  className={cn("mt-0.5 text-base font-semibold leading-none", labelClassName)}
-                  htmlFor=""
-                >
-                  {title}
-                  {LockedIcon}
-                </Label>
-                {Badge && <div className="mb-2">{Badge}</div>}
-              </div>
-              {description && (
-                <p
-                  className={cn("text-default -mt-1.5 text-sm leading-normal", descriptionClassName)}
-                  data-testid={`${rest["data-testid"]}-description`}
-                >
-                  {description}
-                </p>
-              )}
-            </div>
-            {!hideSwitch && (
-              <div className="my-auto h-full">
-                <Switch
-                  data-testid={rest["data-testid"]}
-                  fitToHeight={true}
-                  checked={checked}
-                  onCheckedChange={onCheckedChange}
-                  disabled={disabled}
-                  tooltip={tooltip}
-                />
-              </div>
-            )}
-          </div>
-        ) : (
-          <div className="flex space-x-3">
-            <Switch
-              data-testid={rest["data-testid"]}
-              fitToHeight={true}
-              checked={checked}
-              onCheckedChange={onCheckedChange}
-              disabled={disabled}
-              tooltip={tooltip}
-            />
-            <div>
-              <Label className={cn("text-emphasis text-sm font-semibold leading-none", labelClassName)}>
-                {title} {Badge ? Badge : null}
-                {LockedIcon}
-              </Label>
-              {description && <p className="text-default -mt-1.5 text-sm leading-normal">{description}</p>}
-            </div>
-          </div>
-        )}
-        {children && (
-          <div className={cn(noIndentation ? "" : "lg:ml-14", childrenClassName)} ref={animateRef}>
-            {checked && <div className={cn(!toggleSwitchAtTheEnd && "mt-4")}>{children}</div>}
-          </div>
-        )}
-      </fieldset>
-    </div>
-  );
-}

package/src/components/ui/shell.tsx

@@ -1,47 +0,0 @@
-import type { Dispatch, ReactElement, ReactNode, SetStateAction } from "react";
-
-import { cn } from "../../lib/utils";
-
-type DrawerState = [isOpen: boolean, setDrawerOpen: Dispatch<SetStateAction<boolean>>];
-
-export type LayoutProps = {
-  centered?: boolean;
-  title?: string;
-  description?: string;
-  heading?: ReactNode;
-  subtitle?: ReactNode;
-  headerClassName?: string;
-  children: ReactNode;
-  CTA?: ReactNode;
-  large?: boolean;
-  MobileNavigationContainer?: ReactNode;
-  SidebarContainer?: ReactElement;
-  TopNavContainer?: ReactNode;
-  drawerState?: DrawerState;
-  HeadingLeftIcon?: ReactNode;
-  backPath?: string | boolean;
-  flexChildrenContainer?: boolean;
-  isPublic?: boolean;
-  withoutMain?: boolean;
-  actions?: JSX.Element;
-  beforeCTAactions?: JSX.Element;
-  afterHeading?: ReactNode;
-  smallHeading?: boolean;
-  isPlatformUser?: boolean;
-  disableSticky?: boolean;
-};
-
-export const Shell = (props: LayoutProps) => {
-  return (
-    <div className={cn(props.headerClassName, "flex flex-col px-10 py-4")}>
-      <div className="mb-6 flex items-center justify-between md:mb-6 md:mt-0 lg:mb-8">
-        <div className="flex flex-col gap-0.5">
-          <div>{props.heading}</div>
-          <div className="text-default text-sm">{props.subtitle}</div>
-        </div>
-        <div>{props.CTA}</div>
-      </div>
-      <div>{props.children}</div>
-    </div>
-  );
-};

package/src/components/ui/show-toast.tsx

@@ -1,11 +0,0 @@
-// @ts-nocheck — Radix 1.x prop-pick narrowing drops className/children
-import { toast } from "./use-toast";
-
-type ToastVariant = "success" | "warning" | "error";
-
-export function showToast(message: string, variant: ToastVariant = "success") {
-  return toast({
-    description: message,
-    variant: variant === "error" ? "destructive" : "default",
-  });
-}

package/src/components/ui/skeleton.tsx

@@ -1,112 +0,0 @@
-import type React from "react";
-
-import { useAtomsLocale as useLocale } from "../../hooks/use-atoms-locale";
-import { cn } from "../../lib/utils";
-
-type SkeletonBaseProps = {
-  className?: string;
-};
-
-interface SkeletonContainerProps {
-  as?: keyof JSX.IntrinsicElements;
-  children?: React.ReactNode;
-  className?: string;
-}
-
-type SkeletonLoaderProps = {
-  className: string;
-};
-
-const SkeletonAvatar: React.FC<SkeletonBaseProps> = ({ className }) => {
-  return <div className={cn(`bg-emphasis me-3 mt-1 rounded-full`, className)} />;
-};
-
-type SkeletonProps<T> = {
-  as: keyof JSX.IntrinsicElements | React.FC;
-  className?: string;
-  children: React.ReactNode;
-  loading?: boolean;
-  waitForTranslation?: boolean;
-  loadingClassName?: string;
-} & (T extends React.FC<infer P>
-  ? P
-  : T extends keyof JSX.IntrinsicElements
-    ? JSX.IntrinsicElements[T]
-    : never);
-
-const Skeleton = <T extends keyof JSX.IntrinsicElements | React.FC>({
-  as,
-  className = "",
-  children,
-  loading = false,
-  waitForTranslation = true,
-  loadingClassName = "",
-  ...rest
-}: SkeletonProps<T>) => {
-  const { isLocaleReady } = useLocale();
-  loading = (waitForTranslation ? !isLocaleReady : false) || loading;
-  const Component = as;
-  return (
-    <Component
-      className={cn(
-        loading
-          ? cn("font-size-0 bg-emphasis animate-pulse rounded-md text-transparent", loadingClassName)
-          : "",
-        className
-      )}
-      {...rest}
-    >
-      {children}
-    </Component>
-  );
-};
-
-const SkeletonText: React.FC<SkeletonBaseProps & { invisible?: boolean; style?: React.CSSProperties }> = ({
-  className = "",
-  invisible = false,
-  style,
-}) => {
-  return (
-    <span
-      style={style}
-      className={cn(
-        `font-size-0 bg-emphasis inline-block animate-pulse rounded-md empty:before:inline-block empty:before:content-['']`,
-        className,
-        invisible ? "invisible" : ""
-      )}
-    />
-  );
-};
-
-const SkeletonButton: React.FC<SkeletonBaseProps> = ({ className }) => {
-  return (
-    <SkeletonContainer>
-      <div className={cn(`bg-emphasis rounded-md`, className)} />
-    </SkeletonContainer>
-  );
-};
-
-const SkeletonContainer: React.FC<SkeletonContainerProps> = ({ children, as, className }) => {
-  const Component = as || "div";
-  return <Component className={cn("animate-pulse", className)}>{children}</Component>;
-};
-
-const SelectSkeletonLoader: React.FC<SkeletonLoaderProps> = ({ className }) => {
-  return (
-    <li
-      className={cn(
-        "border-subtle group flex w-full items-center justify-between rounded-sm border px-[10px] py-3",
-        className
-      )}
-    >
-      <div className="grow truncate text-sm">
-        <div className="flex justify-between">
-          <SkeletonText className="h-4 w-32" />
-          <SkeletonText className="h-4 w-4" />
-        </div>
-      </div>
-    </li>
-  );
-};
-
-export { Skeleton, SkeletonAvatar, SkeletonText, SkeletonButton, SkeletonContainer, SelectSkeletonLoader };

package/src/components/ui/switch.tsx

@@ -1,28 +0,0 @@
-// @ts-nocheck — Radix 1.x prop-pick narrowing drops className/children
-
-import * as SwitchPrimitives from "@radix-ui/react-switch";
-import * as React from "react";
-import { cn } from "../../lib/utils";
-
-const Switch = React.forwardRef<
-  React.ElementRef<typeof SwitchPrimitives.Root>,
-  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
->(({ className, ...props }, ref) => (
-  <SwitchPrimitives.Root
-    className={cn(
-      "focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary-default data-[state=unchecked]:bg-input peer inline-flex h-[24px] w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-      className
-    )}
-    {...props}
-    ref={ref}
-  >
-    <SwitchPrimitives.Thumb
-      className={cn(
-        "bg-background pointer-events-none block h-5 w-5 rounded-full shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
-      )}
-    />
-  </SwitchPrimitives.Root>
-));
-Switch.displayName = SwitchPrimitives.Root.displayName;
-
-export { Switch };