@calcom/atoms 2.8.0 → 2.8.1

package/src/onboarding/onboarding-embed.tsx

@@ -1,266 +0,0 @@
-// @ts-nocheck — atoms wrapper/hook over loose contracts + Radix 1.x
-
-/**
- * PLATFORM GLUE — NOT ATOMS UI.
- *
- * OnboardingEmbed is Cal.com platform-specific OAuth flow glue, not a
- * UI componentry primitive. It renders a <Dialog> with an <iframe>
- * pointing at https://app.cal.com/oauth/... to authorize a Cal.com
- * account into the embedder's OAuth client. The actual onboarding UI
- * is hosted by Cal.com's webapp; atoms only opens the iframe.
- *
- * Kept inside @calcom/atoms for installation convenience (one package
- * for platform consumers) and because the existing examples + e2e
- * suite import it from "@calcom/atoms". A future extraction to a
- * dedicated platform-oauth package (e.g.
- * @calcom/platform-oauth-embed) is on the roadmap — when that lands,
- * the atoms export can re-export from there to preserve the surface.
- *
- * When evaluating what belongs in atoms, treat OnboardingEmbed as an
- * exception rather than a precedent: atoms-UI is primitives +
- * end-user views (Booker, AvailabilitySettings, ...) composed from
- * atoms primitives. OnboardingEmbed is neither.
- */
-"use client";
-
-import { useEffect, useState } from "react";
-import { Dialog, DialogContent, DialogTrigger } from "../components/ui/dialog";
-import { Spinner } from "../components/ui/icon";
-import { ContinueWithCalcomDark, ContinueWithCalcomLight } from "./continue-with-calcom";
-import type { OnboardingEmbedProps } from "./types";
-
-const DEFAULT_HOST = "https://app.cal.com";
-
-export function OnboardingEmbed({
-  oAuthClientId,
-  host = DEFAULT_HOST,
-  theme = "light",
-  user,
-  authorization,
-  onAuthorizationAllowed,
-  onError,
-  onAuthorizationDenied,
-  onClose,
-  trigger,
-}: OnboardingEmbedProps) {
-  const [open, setOpen] = useState(false);
-  const [iframeLoading, setIframeLoading] = useState(true);
-  const missingProps = validateProps({ oAuthClientId, authorization });
-  const redirectOnAuthorizationAllowed = !onAuthorizationAllowed;
-  const redirectOnAuthorizationDenied = !onAuthorizationDenied;
-
-  const iframeSrc = missingProps
-    ? ""
-    : buildOnboardingUrl({
-        host,
-        oAuthClientId,
-        theme,
-        email: user?.email,
-        name: user?.name,
-        username: user?.username,
-        scope: authorization.scope.join(" "),
-        redirectUri: authorization.redirectUri,
-        state: authorization.state,
-        codeChallenge: authorization.codeChallenge,
-      });
-
-  const [iframeSize, setIframeSize] = useState<{ width: number; height: number } | null>(null);
-
-  useEffect(() => {
-    if (missingProps) {
-      const message = `<OnboardingEmbed /> is missing required props: ${missingProps.join(", ")}`;
-      onError?.({ code: "INVALID_PROPS", message });
-      return;
-    }
-
-    const handler = (event: MessageEvent) => {
-      const isEventFromCalIframe = event.origin === host;
-      if (!isEventFromCalIframe) return;
-
-      if (event.data?.type === "onboarding:resize") {
-        setIframeSize({ width: event.data.width, height: event.data.height });
-        return;
-      }
-
-      if (event.data?.type === "authorization:allowed") {
-        if (event.data.state !== authorization.state) {
-          onError?.({ code: "STATE_MISMATCH", message: "State mismatch — possible CSRF attack" });
-          return;
-        }
-
-        if (redirectOnAuthorizationAllowed) {
-          window.location.href = buildRedirectUrl(authorization.redirectUri, {
-            code: event.data.code,
-            state: authorization.state,
-          });
-          return;
-        }
-
-        onAuthorizationAllowed({ code: event.data.code });
-        setOpen(false);
-      }
-
-      if (event.data?.type === "onboarding:error") {
-        if (redirectOnAuthorizationAllowed) {
-          window.location.href = buildRedirectUrl(authorization.redirectUri, {
-            error: event.data.code,
-            state: authorization.state,
-          });
-          return;
-        }
-
-        onError?.({ code: event.data.code, message: event.data.message });
-      }
-
-      if (event.data?.type === "authorization:denied") {
-        if (redirectOnAuthorizationDenied) {
-          window.location.href = buildRedirectUrl(authorization.redirectUri, {
-            error: "access_denied",
-            state: authorization.state,
-          });
-          return;
-        }
-
-        onAuthorizationDenied();
-        setOpen(false);
-      }
-
-      if (event.data?.type === "onboarding:close") {
-        onClose?.();
-        setOpen(false);
-      }
-    };
-
-    window.addEventListener("message", handler);
-    return () => window.removeEventListener("message", handler);
-  }, [
-    host,
-    missingProps,
-    redirectOnAuthorizationAllowed,
-    redirectOnAuthorizationDenied,
-    authorization,
-    onAuthorizationAllowed,
-    onError,
-    onAuthorizationDenied,
-    onClose,
-  ]);
-
-  if (missingProps) return null;
-
-  return (
-    <Dialog
-      open={open}
-      onOpenChange={(isOpen) => {
-        if (!isOpen) {
-          onClose?.();
-        } else {
-          setIframeLoading(true);
-          setIframeSize(null);
-        }
-        setOpen(isOpen);
-      }}
-    >
-      <DialogTrigger asChild>
-        {trigger || (
-          <button
-            type="button"
-            aria-label="Continue with Cal.com"
-            className="inline-flex cursor-pointer border-none bg-transparent p-0"
-          >
-            {theme === "dark" ? <ContinueWithCalcomDark /> : <ContinueWithCalcomLight />}
-          </button>
-        )}
-      </DialogTrigger>
-      <DialogContent
-        className="border-0 bg-transparent p-0 transition-all duration-200"
-        style={{
-          maxWidth: `${iframeSize?.width ?? 448}px`,
-          height: `${iframeSize?.height ?? 540}px`,
-          maxHeight: "80vh",
-        }}
-      >
-        <div className="relative h-full">
-          {iframeLoading && (
-            <div
-              className={`absolute inset-0 flex items-center justify-center rounded-2xl${theme === "dark" ? " dark" : ""}`}
-              // note(Lauris): use inline style instead of bg-[--cal-bg] because CSS variables from globals.css take a moment to resolve, causing a flash of white before the dark background appears
-              style={{ background: theme === "dark" ? "#0f0f0f" : "#ffffff" }}
-            >
-              <Spinner className="h-8 w-8" />
-            </div>
-          )}
-          <iframe
-            src={iframeSrc}
-            title="Cal.com Onboarding"
-            className="w-full h-full rounded-2xl border-none"
-            onLoad={() => setIframeLoading(false)}
-            sandbox="allow-scripts allow-forms allow-same-origin allow-popups allow-popups-to-escape-sandbox"
-          />
-        </div>
-      </DialogContent>
-    </Dialog>
-  );
-}
-
-function validateProps({
-  oAuthClientId,
-  authorization,
-}: Pick<OnboardingEmbedProps, "oAuthClientId" | "authorization">): string[] | null {
-  const missing: string[] = [];
-  if (!oAuthClientId) missing.push("oAuthClientId");
-  if (!authorization.redirectUri) missing.push("authorization.redirectUri");
-  if (!authorization.state) missing.push("authorization.state");
-  if (!authorization.scope?.length) missing.push("authorization.scope");
-  return missing.length > 0 ? missing : null;
-}
-
-function buildRedirectUrl(redirectUri: string, params: Record<string, string>): string {
-  const url = new URL(redirectUri);
-  for (const [key, value] of Object.entries(params)) {
-    url.searchParams.set(key, value);
-  }
-  return url.toString();
-}
-
-function buildOnboardingUrl({
-  host,
-  oAuthClientId,
-  theme,
-  email,
-  name,
-  username,
-  scope,
-  redirectUri,
-  state,
-  codeChallenge,
-}: {
-  host: string;
-  oAuthClientId: string;
-  theme: string;
-  email?: string;
-  name?: string;
-  username?: string;
-  scope: string;
-  redirectUri: string;
-  state: string;
-  codeChallenge?: string;
-}): string {
-  const params = new URLSearchParams({
-    client_id: oAuthClientId,
-    scope,
-    state,
-    theme,
-    redirect_uri: redirectUri,
-    onboardingEmbed: "true",
-  });
-
-  if (email) params.set("email", email);
-  if (name) params.set("name", name);
-  if (username) params.set("username", username);
-  if (codeChallenge) {
-    params.set("code_challenge", codeChallenge);
-    params.set("code_challenge_method", "S256");
-  }
-
-  return `${host}/api/onboarding-embed/verify?${params.toString()}`;
-}

package/src/onboarding/types.ts

@@ -1,38 +0,0 @@
-import type { ReactNode } from "react";
-
-import type { AtomOAuthScope } from "../contracts";
-
-export interface OnboardingEmbedProps {
-  oAuthClientId: string;
-  host?: string;
-  theme?: "light" | "dark";
-  user?: {
-    email?: string;
-    name?: string;
-    username?: string;
-  };
-  authorization: AuthorizationProps;
-  onAuthorizationAllowed?: (result: { code: string }) => void;
-  onError?: (error: OnboardingError) => void;
-  onAuthorizationDenied?: () => void;
-  onClose?: () => void;
-  trigger?: ReactNode;
-}
-
-export interface AuthorizationProps {
-  redirectUri: string;
-  scope: AtomOAuthScope[];
-  state: string;
-  codeChallenge?: string;
-}
-
-export interface OnboardingError {
-  code:
-    | "INVALID_PROPS"
-    | "SIGNUP_FAILED"
-    | "ONBOARDING_FAILED"
-    | "AUTHORIZATION_FAILED"
-    | "STATE_MISMATCH"
-    | "UNKNOWN";
-  message: string;
-}

package/src/router/index.ts

@@ -1 +0,0 @@
-export { Router } from "./router";

package/src/router/router.tsx

@@ -1,164 +0,0 @@
-// @ts-nocheck — atoms wrapper over loose contracts + Radix prop-pick
-import type { ReactElement } from "react";
-import React, { useState } from "react";
-import type { BookerPlatformWrapperAtomPropsForTeam } from "../booker/types";
-import { BookerEmbed } from "../booker-embed";
-
-const ALLOWED_REDIRECT_PROTOCOLS = new Set(["http:", "https:", "mailto:"]);
-
-function isAllowedRedirectScheme(value: string): boolean {
-  try {
-    const url = new URL(value.trim());
-    return ALLOWED_REDIRECT_PROTOCOLS.has(url.protocol);
-  } catch {
-    return false;
-  }
-}
-
-/**
- * Renders the Router component with predefined props.
- * Depending on the routing form either renders a custom message, redirects or display Booker embed atom.
- * formResponsesURLParams contains the answers to the questions fields defined in the form.
- * ```tsx
- * <Router
- *   formId="1a1a1a1a-2b2b-3c3c-4d4d-5e5e5e5e5e5e"
- *   formResponsesURLParams={new URLSearchParams({ Territory: "Europe" })}
- *   bookerProps={{
- *    customClassNames: { bookerWrapper: "dark" },
- *    bannerUrl: "https://i0.wp.com/mahala.co.uk/wp-content/uploads/2014/12/img_banner-thin_mountains.jpg?fit=800%2C258&ssl=1",
- *    onCreateBookingSuccess: (data) => console.log(data),
- *    onCreateBookingError: (err) => console.error(err)
- * />
- * ```
- */
-
-export const Router = React.memo(
-  ({
-    formId,
-    formResponsesURLParams,
-    onExternalRedirect,
-    onDisplayBookerEmbed,
-    renderMessage,
-    onSubmitFormStart,
-    onSubmitFormEnd,
-    renderLoader,
-    bookerProps,
-  }: {
-    formId: string;
-    formResponsesURLParams?: URLSearchParams;
-    onExternalRedirect?: () => void;
-    onDisplayBookerEmbed?: () => void;
-    onSubmitFormStart?: () => void;
-    onSubmitFormEnd?: () => void;
-    renderMessage?: (message?: string) => ReactElement | ReactElement[];
-    bookerProps?: Pick<
-      Partial<BookerPlatformWrapperAtomPropsForTeam>,
-      | "customClassNames"
-      | "bannerUrl"
-      | "onCreateBookingSuccess"
-      | "onCreateBookingError"
-      | "onCreateRecurringBookingSuccess"
-      | "onCreateRecurringBookingError"
-      | "onReserveSlotSuccess"
-      | "onReserveSlotError"
-      | "onDeleteSlotSuccess"
-      | "onDeleteSlotError"
-      | "view"
-      | "onDryRunSuccess"
-      | "hostsLimit"
-      | "metadata"
-      | "handleCreateBooking"
-      | "handleSlotReservation"
-      | "preventEventTypeRedirect"
-    >;
-    renderLoader?: (isLoading?: boolean) => ReactElement | ReactElement[];
-  }) => {
-    const [isLoading, setIsLoading] = useState<boolean>();
-    const [routerUrl, setRouterUrl] = useState<string>();
-    const [routingData, setRoutingData] = useState<{ message: string } | undefined>();
-    const [isError, setIsError] = useState<boolean>();
-
-    React.useEffect(() => {
-      if (!isLoading) {
-        setIsLoading(true);
-        setIsError(false);
-        setRoutingData(undefined);
-        setRouterUrl("");
-
-        const baseUrl = import.meta.env.VITE_BOOKER_EMBED_API_URL;
-        onSubmitFormStart?.();
-        fetch(`${baseUrl}/router/forms/${formId}/submit`, {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json",
-          },
-          body: formResponsesURLParams
-            ? JSON.stringify(Object.fromEntries(formResponsesURLParams))
-            : undefined,
-        })
-          .then(async (response) => {
-            const body:
-              | { status: string; data: string; redirect: true }
-              | { status: string; data: { message: string }; redirect: false } = await response.json();
-            if (body.redirect) {
-              setRouterUrl(body.data);
-            } else {
-              setRoutingData({ message: body.data?.message ?? "" });
-            }
-          })
-          .catch((err) => {
-            console.error(err);
-            setIsError(true);
-          })
-          .finally(() => {
-            setIsLoading(false);
-            onSubmitFormEnd?.();
-          });
-      }
-    }, []);
-
-    const isRedirect = !!routerUrl;
-
-    if (isLoading && renderLoader) {
-      return <>{renderLoader?.(isLoading)}</>;
-    }
-
-    if (isLoading || isError) {
-      return <></>;
-    }
-
-    if (!isLoading && isRedirect && routerUrl) {
-      const redirectParams = new URLSearchParams(routerUrl);
-      if (redirectParams.get("cal.action") === "eventTypeRedirectUrl") {
-        // display booker with redirect URL
-        onDisplayBookerEmbed?.();
-        return <BookerEmbed routingFormUrl={routerUrl} {...bookerProps} />;
-      } else if (redirectParams.get("cal.action") === "externalRedirectUrl") {
-        if (isAllowedRedirectScheme(routerUrl)) {
-          onExternalRedirect?.();
-          window.location.href = routerUrl.trim();
-        }
-        return <></>;
-      }
-    }
-
-    if (!isRedirect && routingData?.message) {
-      if (renderMessage) {
-        return <>{renderMessage(routingData?.message)}</>;
-      }
-      return (
-        <div className="mx-auto my-0 max-w-3xl md:my-24">
-          <div className="w-full max-w-4xl ltr:mr-2 rtl:ml-2">
-            <div className="text-default bg-default -mx-4 rounded-sm border border-neutral-200 p-4 py-6 sm:mx-0 sm:px-8">
-              <div>{routingData?.message}</div>
-            </div>
-          </div>
-        </div>
-      );
-    }
-
-    return <></>;
-  }
-);
-
-Router.displayName = "RouterAtom";

package/src/selected-calendars/index.ts

@@ -1 +0,0 @@
-export { SelectedCalendarsSettingsPlatformWrapper } from "./wrappers/selected-calendars-settings-platform-wrapper";

package/src/selected-calendars/selected-calendars-settings.tsx

@@ -1,7 +0,0 @@
-import type { ReactNode } from "react";
-
-import { cn } from "../lib/utils";
-
-export const SelectedCalendarsSettings = (props: { children: ReactNode; classNames?: string }) => {
-  return <div className={cn("border-subtle mt-6 rounded-lg border", props.classNames)}>{props.children}</div>;
-};