@boxcustodia/library 2.0.0-alpha.11 → 2.0.0-alpha.12

package/src/components/toast/toast.tsx

@@ -0,0 +1,411 @@
+import {
+  type ToastManagerAddOptions as BaseToastManagerAddOptions,
+  Toast,
+  type ToastObject,
+} from "@base-ui/react/toast";
+import { CircleCheck, CircleX, Info, TriangleAlert, X } from "lucide-react";
+import {
+  type ComponentProps,
+  type ComponentType,
+  type ReactNode,
+  useEffect,
+  useMemo,
+} from "react";
+import { cn } from "../../lib";
+import { Button } from "../button";
+
+// ─── Types ────────────────────────────────────────────────────────────────────
+
+export type ToastVariant = "default" | "success" | "error" | "warning" | "info";
+
+type ButtonProps = ComponentProps<typeof Button>;
+
+// ─── Variant configuration ────────────────────────────────────────────────────
+
+type VariantConfig = {
+  icon: ComponentType<{ className?: string }> | null;
+  ringClass: string;
+  titleClass: string;
+  bgClass: string;
+};
+
+const TOAST_VARIANT_CONFIG: Record<ToastVariant, VariantConfig> = {
+  default: {
+    icon: null,
+    ringClass: "ring-input",
+    titleClass: "",
+    bgClass: "",
+  },
+  success: {
+    icon: CircleCheck,
+    ringClass: "ring-success",
+    titleClass: "text-success",
+    bgClass: "bg-success/5",
+  },
+  error: {
+    icon: CircleX,
+    ringClass: "ring-error",
+    titleClass: "text-error",
+    bgClass: "bg-error/5",
+  },
+  warning: {
+    icon: TriangleAlert,
+    ringClass: "ring-warning",
+    titleClass: "text-warning",
+    bgClass: "bg-warning/5",
+  },
+  info: {
+    icon: Info,
+    ringClass: "ring-info",
+    titleClass: "text-info",
+    bgClass: "bg-info/5",
+  },
+};
+
+export function toastVariants({
+  variant = "default",
+}: {
+  variant?: ToastVariant;
+} = {}) {
+  return cn(
+    "rounded-xl ring-1 bg-clip-padding p-4 shadow-lg bg-background",
+    TOAST_VARIANT_CONFIG[variant].ringClass,
+  );
+}
+
+// ─── Option types ─────────────────────────────────────────────────────────────
+
+type ToastOptionsBase = {
+  variant?: ToastVariant;
+  content?: ReactNode;
+  actions?: ButtonProps[];
+  bump?: boolean;
+};
+
+export type ToastOptions<Data extends object = object> = ToastObject<Data> &
+  ToastOptionsBase;
+export type ToastManagerAddOptions<Data extends object = object> =
+  BaseToastManagerAddOptions<Data> & ToastOptionsBase;
+
+// ─── Manager wrapping ─────────────────────────────────────────────────────────
+
+function wrapManagerMethods<
+  T extends {
+    add: Function;
+    update: Function;
+    promise: Function;
+    close: Function;
+  },
+>(manager: T) {
+  return {
+    ...manager,
+
+    close: (id?: string) => manager.close(id),
+
+    add: (options: ToastManagerAddOptions<any>) => {
+      if (options.id) {
+        const toasts = (manager as any).toasts as
+          | Array<ToastObject<any>>
+          | undefined;
+
+        if (toasts) {
+          const existing = toasts.find((t) => t.id === options.id);
+
+          if (existing && existing.transitionStatus !== "ending") {
+            manager.update(options.id, { bump: false });
+            requestAnimationFrame(() => {
+              manager.update(options.id, {
+                bump: true,
+                ...(options.timeout !== undefined && {
+                  timeout: options.timeout,
+                }),
+              });
+            });
+            return options.id;
+          }
+
+          if (existing && existing.transitionStatus === "ending") {
+            return options.id;
+          }
+        }
+      }
+
+      return manager.add({ ...options });
+    },
+
+    update: (id: string, options: Partial<ToastManagerAddOptions<any>>) => {
+      return manager.update(id, { ...options });
+    },
+
+    promise: <T,>(
+      promise: Promise<T>,
+      options: {
+        loading: ToastManagerAddOptions<any>;
+        success:
+          | ToastManagerAddOptions<any>
+          | ((data: T) => ToastManagerAddOptions<any>);
+        error:
+          | ToastManagerAddOptions<any>
+          | ((error: Error) => ToastManagerAddOptions<any>);
+      },
+    ) => {
+      return manager.promise(promise, {
+        loading: { ...options.loading },
+        success:
+          typeof options.success === "function"
+            ? (data: T) => ({
+                ...(options.success as (d: T) => ToastManagerAddOptions<any>)(
+                  data,
+                ),
+              })
+            : { ...options.success },
+        error:
+          typeof options.error === "function"
+            ? (err: Error) => ({
+                ...(options.error as (e: Error) => ToastManagerAddOptions<any>)(
+                  err,
+                ),
+              })
+            : { ...options.error },
+      });
+    },
+  };
+}
+
+export function useToastManager() {
+  const manager = Toast.useToastManager();
+  return {
+    ...wrapManagerMethods(manager),
+    toasts: manager.toasts as ToastOptions<any>[],
+  };
+}
+
+export function createToastManager() {
+  return wrapManagerMethods(Toast.createToastManager());
+}
+
+// ─── Singleton + convenience API ─────────────────────────────────────────────
+
+// Captured by ToastManagerBridge on provider mount — points to the internal
+// Base UI manager so that toast.* calls update React state synchronously,
+// avoiding the extra async tick of the subscription-based external manager.
+let _activeManager: ReturnType<
+  typeof wrapManagerMethods<ReturnType<typeof Toast.useToastManager>>
+> | null = null;
+
+type ToastArg = string | Omit<ToastManagerAddOptions<any>, "variant">;
+
+function resolveArgs(
+  arg: ToastArg,
+): Omit<ToastManagerAddOptions<any>, "variant"> {
+  return typeof arg === "string" ? { title: arg } : arg;
+}
+
+/**
+ * Imperative toast API. Works anywhere — no hook needed.
+ *
+ * Requires `<ToastProvider>` somewhere in the tree (no extra props needed).
+ *
+ * @example
+ * ```ts
+ * toast("Notificación");                          // default variant
+ * toast.success("Guardado correctamente");
+ * toast.error({ title: "Error", description: "Algo salió mal" });
+ * toast.promise(saveData(), {
+ *   loading: { description: "Guardando..." },
+ *   success: () => ({ variant: "success", description: "Guardado!" }),
+ *   error:   (e) => ({ variant: "error",   description: e.message }),
+ * });
+ * ```
+ */
+export const toast = Object.assign(
+  (arg: ToastArg) => _activeManager?.add({ ...resolveArgs(arg) }),
+  {
+    success: (arg: ToastArg) =>
+      _activeManager?.add({ variant: "success", ...resolveArgs(arg) }),
+    error: (arg: ToastArg) =>
+      _activeManager?.add({ variant: "error", ...resolveArgs(arg) }),
+    warning: (arg: ToastArg) =>
+      _activeManager?.add({ variant: "warning", ...resolveArgs(arg) }),
+    info: (arg: ToastArg) =>
+      _activeManager?.add({ variant: "info", ...resolveArgs(arg) }),
+    promise: <T,>(
+      promise: Promise<T>,
+      options: {
+        loading: ToastManagerAddOptions<any>;
+        success:
+          | ToastManagerAddOptions<any>
+          | ((data: T) => ToastManagerAddOptions<any>);
+        error:
+          | ToastManagerAddOptions<any>
+          | ((error: Error) => ToastManagerAddOptions<any>);
+      },
+    ) => _activeManager?.promise(promise, options),
+  },
+);
+
+// ─── Provider ─────────────────────────────────────────────────────────────────
+
+export interface ToastProviderProps {
+  children: ReactNode;
+  /**
+   * External toast manager created with `createToastManager()`.
+   * Only needed for isolated instances (tests, microfrontends).
+   * The default `<ToastProvider>` (no props) is all you need for `toast.*` to work.
+   */
+  toastManager?: ReturnType<typeof Toast.createToastManager>;
+  /**
+   * Container element for the portal.
+   * @default document.body
+   */
+  container?: HTMLElement | null;
+}
+
+/**
+ * Captures the internal Base UI manager so that `toast.*` calls update
+ * React state synchronously, avoiding async subscription lag.
+ */
+function ToastManagerBridge() {
+  const manager = Toast.useToastManager();
+  const wrapped = useMemo(() => wrapManagerMethods(manager), [manager]);
+
+  // Set during render so it's available immediately on first interaction.
+  // Safe for a module-level singleton — does not trigger re-renders.
+  _activeManager = wrapped;
+
+  useEffect(
+    () => () => {
+      _activeManager = null;
+    },
+    [],
+  );
+
+  return null;
+}
+
+/**
+ * ToastProvider — wrap your app once to enable toast notifications.
+ *
+ * Toasts stack in the bottom-right corner with swipe-to-dismiss and expand-on-hover.
+ * Once mounted, call `toast.success()` / `toast.error()` etc. from anywhere.
+ *
+ * @example
+ * ```tsx
+ * // app.tsx — one-time setup, no extra props needed
+ * <ToastProvider>
+ *   <App />
+ * </ToastProvider>
+ *
+ * // Anywhere in the codebase
+ * import { toast } from "@boxcustodia/library";
+ * toast.success("Cambios guardados");
+ * toast.error({ title: "Error", description: "Algo salió mal" });
+ * ```
+ */
+export function ToastProvider({
+  children,
+  toastManager,
+  container,
+}: ToastProviderProps) {
+  return (
+    <Toast.Provider toastManager={toastManager}>
+      <ToastManagerBridge />
+      {children}
+      <Toast.Portal container={container}>
+        <Toast.Viewport className="fixed top-auto right-4 bottom-4 mx-auto flex w-[calc(100%-2rem)] sm:right-8 sm:bottom-8 sm:w-[340px]">
+          <ToastList />
+        </Toast.Viewport>
+      </Toast.Portal>
+    </Toast.Provider>
+  );
+}
+
+// ─── Internal render helpers ──────────────────────────────────────────────────
+
+function ToastList() {
+  const { toasts } = useToastManager();
+  return toasts.map((toast) => (
+    <Toast.Root
+      key={toast.id}
+      toast={toast}
+      data-slot="toast"
+      className={cn(
+        "absolute right-0 bottom-0 left-auto z-[calc(var(--z-toast)-var(--toast-index))] mr-0 h-[var(--height)] w-full origin-bottom select-none",
+        toastVariants({ variant: toast.variant }),
+        "[--gap:0.75rem] [--height:var(--toast-frontmost-height,var(--toast-height))] [--offset-y:calc(var(--toast-offset-y)*-1+calc(var(--toast-index)*var(--gap)*-1)+var(--toast-swipe-movement-y))] [--peek:0.75rem] [--scale:calc(max(0,1-(var(--toast-index)*0.1)))] [--shrink:calc(1-var(--scale))]",
+        "[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--toast-swipe-movement-y)-(var(--toast-index)*var(--peek))-(var(--shrink)*var(--height))))_scale(var(--scale))] [transition:transform_0.5s_cubic-bezier(0.22,1,0.36,1),opacity_0.5s,height_0.15s]",
+        "after:absolute after:top-full after:left-0 after:h-[calc(var(--gap)+1px)] after:w-full after:content-['']",
+        "data-[ending-style]:opacity-0 data-[expanded]:h-[var(--toast-height)] data-[expanded]:[transform:translateX(var(--toast-swipe-movement-x))_translateY(calc(var(--offset-y)))] data-[limited]:opacity-0 data-[starting-style]:[transform:translateY(150%)]",
+        "data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=down]:[transform:translateY(calc(var(--toast-swipe-movement-y)+150%))]",
+        "data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=left]:[transform:translateX(calc(var(--toast-swipe-movement-x)-150%))_translateY(var(--offset-y))]",
+        "data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))] data-[expanded]:data-[ending-style]:data-[swipe-direction=right]:[transform:translateX(calc(var(--toast-swipe-movement-x)+150%))_translateY(var(--offset-y))]",
+        "data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))] data-[expanded]:data-[ending-style]:data-[swipe-direction=up]:[transform:translateY(calc(var(--toast-swipe-movement-y)-150%))]",
+        "[&[data-ending-style]:not([data-limited]):not([data-swipe-direction])]:[transform:translateY(150%)]",
+        toast.bump && "animate-toast-bump",
+      )}
+    >
+      <ToastBackground variant={toast.variant} />
+      <Toast.Content className="isolate flex flex-col gap-1 transition-opacity [transition-duration:250ms] data-[behind]:pointer-events-none data-[behind]:opacity-0 data-[expanded]:pointer-events-auto data-[expanded]:opacity-100">
+        {toast.content ?? (
+          <div className="flex items-start gap-2">
+            <ToastIcon variant={toast.variant} />
+            <div className="flex flex-col gap-1 overflow-hidden">
+              <Toast.Title
+                data-slot="toast-title"
+                className={cn(
+                  "text-[0.975rem] leading-5 font-medium text-foreground",
+                  TOAST_VARIANT_CONFIG[toast.variant ?? "default"].titleClass,
+                )}
+              />
+              <Toast.Description
+                data-slot="toast-description"
+                className="text-[0.925rem] leading-5 text-muted-foreground"
+              />
+              {!!toast.actions?.length && (
+                <div className="mt-2 flex min-w-0 flex-nowrap gap-2 overflow-x-auto p-px">
+                  {toast.actions.map((actionProps, idx) => (
+                    <Button key={idx} {...actionProps} />
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+        <Toast.Close
+          className="absolute top-2 right-2 flex h-4 w-4 items-center justify-center rounded border-none bg-transparent text-current/50 hover:bg-foreground/10 hover:text-current"
+          aria-label="Close"
+        >
+          <X className="h-3 w-3" />
+        </Toast.Close>
+      </Toast.Content>
+    </Toast.Root>
+  ));
+}
+
+function ToastBackground({ variant }: { variant?: ToastVariant }) {
+  const bgClass = variant ? TOAST_VARIANT_CONFIG[variant].bgClass : "";
+  return (
+    <div
+      className={cn(
+        "absolute inset-0 rounded-[11px] bg-background/90",
+        bgClass,
+      )}
+    />
+  );
+}
+
+function ToastIcon({ variant }: { variant?: ToastVariant }) {
+  if (!variant || variant === "default") return null;
+  const { icon: Icon, titleClass } = TOAST_VARIANT_CONFIG[variant];
+  if (!Icon) return null;
+  return (
+    <Icon
+      data-slot="toast-icon"
+      className={cn("mt-0.5 h-4 w-4 shrink-0", titleClass)}
+    />
+  );
+}
+
+// ─── Primitive escape hatch ───────────────────────────────────────────────────
+
+export { Toast as ToastPrimitive };

package/src/components/tooltip/index.ts

@@ -0,0 +1 @@
+export * from "./tooltip";

package/src/components/tooltip/tooltip.stories.tsx

@@ -0,0 +1,226 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Info } from "lucide-react";
+import {
+  AlertDialogClose,
+  AlertDialogPopup,
+  AlertDialogRoot,
+  AlertDialogTrigger,
+  Button,
+  Tooltip,
+  TooltipArrow,
+  TooltipPopup,
+  TooltipPrimitive,
+  TooltipRoot,
+  TooltipTrigger,
+} from "../../components";
+
+/**
+ * Accessible tooltip built on Base UI. Shows supplementary information on hover or focus.
+ * Children become the trigger via Base UI's `render` prop — no wrapper element is added.
+ * Accepts `open`/`defaultOpen`/`onOpenChange` for controlled and uncontrolled usage.
+ *
+ * **Requires `<LibraryProvider>` at the app root.** It wires up `TooltipProvider` globally,
+ * enabling shared hover intent: once one tooltip opens, subsequent ones skip `delay` until
+ * the cursor leaves all triggers.
+ */
+const meta: Meta<typeof Tooltip> = {
+  title: "Components/Tooltip",
+  component: Tooltip,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    content: "Tooltip content",
+    children: (
+      <Button variant="outline">
+        <Info />
+        Hover me
+      </Button>
+    ),
+  },
+  argTypes: {
+    children: { control: false },
+    content: { control: "text" },
+    side: {
+      control: "select",
+      options: ["top", "bottom", "left", "right"],
+    },
+    align: {
+      control: "select",
+      options: ["start", "center", "end"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Tooltip>;
+
+export const Default: Story = {};
+
+/**
+ * All four `side` values side by side. The arrow and popup reposition automatically.
+ */
+export const Sides: Story = {
+  render: () => (
+    <div className="grid grid-cols-2 gap-x-12 gap-y-10 p-12">
+      {(["top", "right", "bottom", "left"] as const).map((side) => (
+        <Tooltip key={side} content={`side="${side}"`} side={side} defaultOpen>
+          <Button variant="outline" className="w-24">
+            {side}
+          </Button>
+        </Tooltip>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * All three `align` values with `side="right"` for clarity.
+ * `align` controls placement along the axis perpendicular to `side`.
+ */
+export const Align: Story = {
+  render: () => (
+    <div className="flex flex-col gap-2 py-8">
+      {(["start", "center", "end"] as const).map((align) => (
+        <Tooltip
+          key={align}
+          content={`align="${align}"`}
+          side="right"
+          align={align}
+          defaultOpen
+        >
+          <Button variant="outline" className="w-28 h-28">
+            {align}
+          </Button>
+        </Tooltip>
+      ))}
+    </div>
+  ),
+};
+
+/**
+ * `offset` controls the gap in pixels between the tooltip and the trigger. Default is `10`.
+ */
+export const Offset: Story = {
+  args: {
+    offset: 24,
+    defaultOpen: true,
+  },
+};
+
+/**
+ * `delay` sets how long (ms) the user must hover before the tooltip opens.
+ * `closeDelay` sets how long it stays visible after the cursor leaves.
+ * Both default to Base UI's built-in values (600ms open, 0ms close).
+ */
+export const Delay: Story = {
+  render: () => (
+    <div className="flex items-center gap-6">
+      <Tooltip content="Opens instantly" delay={0}>
+        <Button variant="outline">delay=0</Button>
+      </Tooltip>
+      <Tooltip content="Opens after 1s" delay={1000}>
+        <Button variant="outline">delay=1000</Button>
+      </Tooltip>
+      <Tooltip content="Stays open 1s after blur" closeDelay={1000}>
+        <Button variant="outline">closeDelay=1000</Button>
+      </Tooltip>
+    </div>
+  ),
+};
+
+/**
+ * `className` overrides the popup styles. `arrowClassName` accepts a `text-*` class
+ * to recolor the arrow — it uses `currentColor`, so `text-primary` turns the arrow primary.
+ */
+export const CustomColor: Story = {
+  args: {
+    content: "Custom color",
+    className: "bg-primary text-primary-foreground",
+    arrowClassName: "text-primary",
+    defaultOpen: true,
+  },
+};
+
+/**
+ * `defaultOpen` renders the tooltip open without external state.
+ * Use `open` + `onOpenChange` for fully controlled behavior.
+ */
+export const Controlled: Story = {
+  args: {
+    open: true,
+    content: "Always visible",
+  },
+};
+
+/**
+ * Direct composition with primitives for full structural control.
+ * `TooltipPrimitive` exposes every Base UI subcomponent not wrapped by the library.
+ *
+ * ```tsx
+ * <TooltipRoot>
+ *   <TooltipTrigger render={<Button />} />
+ *   <TooltipPrimitive.Portal>
+ *     <TooltipPrimitive.Positioner side="top" sideOffset={10}>
+ *       <TooltipPopup>
+ *         <TooltipArrow />
+ *         Custom content
+ *       </TooltipPopup>
+ *     </TooltipPrimitive.Positioner>
+ *   </TooltipPrimitive.Portal>
+ * </TooltipRoot>
+ * ```
+ */
+export const Primitive: Story = {
+  render: () => (
+    <TooltipRoot>
+      <TooltipTrigger
+        render={
+          <Button variant="outline">
+            <Info />
+            Primitives
+          </Button>
+        }
+      />
+      <TooltipPrimitive.Portal>
+        <TooltipPrimitive.Positioner side="top" sideOffset={10}>
+          <TooltipPopup>
+            <TooltipArrow />
+            Built with primitives
+          </TooltipPopup>
+        </TooltipPrimitive.Positioner>
+      </TooltipPrimitive.Portal>
+    </TooltipRoot>
+  ),
+};
+
+/**
+ * Tooltip + AlertDialog composed on the same trigger.
+ * Base UI's `render` prop chains both triggers into a single `<Button>` —
+ * hover shows the tooltip, click opens the dialog.
+ */
+export const WithAlertDialog: Story = {
+  render: () => (
+    <AlertDialogRoot>
+      <Tooltip content="Esta acción no se puede deshacer">
+        <AlertDialogTrigger
+          render={<Button variant="error">Eliminar</Button>}
+        />
+      </Tooltip>
+      <AlertDialogPopup>
+        <p className="font-semibold">¿Estás seguro?</p>
+        <p className="text-sm text-muted-foreground">
+          Esta acción no se puede deshacer.
+        </p>
+        <div className="flex justify-end gap-2">
+          <AlertDialogClose
+            render={<Button variant="secondary">Cancelar</Button>}
+          />
+          <AlertDialogClose
+            render={<Button variant="error">Eliminar</Button>}
+          />
+        </div>
+      </AlertDialogPopup>
+    </AlertDialogRoot>
+  ),
+};

package/src/components/tooltip/tooltip.test.tsx

@@ -0,0 +1,46 @@
+import { fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Button } from "../../components/button";
+import { Tooltip } from ".";
+
+describe("Tooltip component", () => {
+  const content = "Tooltip content";
+
+  it("should toggle the tooltip onFocus", async () => {
+    render(
+      <Tooltip content={content}>
+        <Button>Focus me</Button>
+      </Tooltip>,
+    );
+
+    const button = screen.getByText("Focus me");
+    fireEvent.focus(button);
+
+    const toooltip = screen.getByText(content);
+    expect(toooltip).toBeInTheDocument();
+
+    fireEvent.blur(button);
+    waitFor(() => {
+      expect(toooltip).not.toBeInTheDocument();
+    });
+  });
+
+  it("should toggle the tooltip onHover", async () => {
+    render(
+      <Tooltip content={content}>
+        <Button>Hover me</Button>
+      </Tooltip>,
+    );
+
+    const button = screen.getByText("Hover me");
+    fireEvent.mouseEnter(button);
+
+    const toooltip = screen.getByText(content);
+    expect(toooltip).toBeInTheDocument();
+
+    fireEvent.mouseLeave(button);
+    waitFor(() => {
+      expect(toooltip).not.toBeInTheDocument();
+    });
+  });
+});