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

package/src/components/date-picker/use-date-input.ts

@@ -0,0 +1,125 @@
+import { ChangeEvent, KeyboardEvent, useEffect, useRef, useState } from "react";
+import {
+  DateMaskContext,
+  formatDate,
+  maskDateInput,
+  parseInputToDate,
+} from "./date-picker.utils";
+
+type UseDateInputOptions = {
+  date: Date | null;
+  onDateChange: (value: Date | null) => void;
+  disabledDate?: (date: Date) => boolean;
+};
+
+type UseDateInputResult = {
+  inputValue: string;
+  handleChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  handleBlur: () => void;
+  handleKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void;
+  clear: () => void;
+  setFromExternalDate: (date: Date | null) => void;
+};
+
+export const useDateInput = (
+  options: UseDateInputOptions,
+): UseDateInputResult => {
+  const { date, onDateChange, disabledDate } = options;
+
+  const [inputValue, setInputValue] = useState<string>("");
+  const lastKeyRef = useRef<string | null>(null);
+  const previousValueRef = useRef<string>("");
+
+  useEffect(() => {
+    const formatted = formatDate(date ?? null);
+    setInputValue(formatted);
+    previousValueRef.current = formatted;
+  }, [date]);
+
+  const commitInputValue = () => {
+    const current = inputValue.trim();
+
+    if (!current) {
+      onDateChange(null);
+      setInputValue("");
+      previousValueRef.current = "";
+      return;
+    }
+
+    const nextDate = parseInputToDate(current);
+
+    if (!nextDate) {
+      onDateChange(null);
+      setInputValue("");
+      previousValueRef.current = "";
+      return;
+    }
+
+    if (disabledDate?.(nextDate)) {
+      const fallback = formatDate(date ?? null);
+      setInputValue(fallback);
+      previousValueRef.current = fallback;
+      return;
+    }
+
+    onDateChange(nextDate);
+    const formatted = formatDate(nextDate);
+    setInputValue(formatted);
+    previousValueRef.current = formatted;
+  };
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const raw = event.target.value;
+    const context: DateMaskContext = {
+      lastKey: lastKeyRef.current,
+      previousValue: previousValueRef.current,
+    };
+
+    const masked = maskDateInput(raw, context);
+    setInputValue(masked);
+    previousValueRef.current = masked;
+  };
+
+  const handleBlur = () => {
+    commitInputValue();
+  };
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    lastKeyRef.current = event.key;
+
+    if (event.key === "Enter") {
+      event.preventDefault();
+      commitInputValue();
+      return;
+    }
+
+    if (event.key === "Escape") {
+      event.preventDefault();
+      const formatted = formatDate(date ?? null);
+      setInputValue(formatted);
+      previousValueRef.current = formatted;
+    }
+  };
+
+  const clear = () => {
+    onDateChange(null);
+    setInputValue("");
+    previousValueRef.current = "";
+  };
+
+  const setFromExternalDate = (next: Date | null) => {
+    onDateChange(next);
+    const formatted = formatDate(next ?? null);
+    setInputValue(formatted);
+    previousValueRef.current = formatted;
+  };
+
+  return {
+    inputValue,
+    handleChange,
+    handleBlur,
+    handleKeyDown,
+    clear,
+    setFromExternalDate,
+  };
+};

package/src/components/dialog/dialog.stories.tsx

@@ -0,0 +1,171 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { action } from "storybook/actions";
+import {
+  Button,
+  Dialog,
+  DialogClose,
+  DialogFooter,
+  DialogHeader,
+  DialogPopup,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+  Input,
+  Label,
+  Tooltip,
+} from "../../components";
+
+/**
+ * General-purpose dialog for displaying content that requires user attention
+ * or interaction — forms, detail views, confirmations with custom layouts.
+ *
+ * Use `open` + `onOpenChange` for programmatic control when there is no static trigger.
+ * For anything beyond the standard layout, drop down to the exported primitives.
+ */
+const meta: Meta<typeof Dialog> = {
+  title: "Components/Dialog",
+  component: Dialog,
+  parameters: {
+    layout: "centered",
+  },
+  args: {
+    trigger: <Button variant="outline">Open dialog</Button>,
+    title: "Dialog title",
+    description:
+      "Supporting text that provides more context about this dialog.",
+    onOpenChange: action("onOpenChange"),
+  },
+  argTypes: {
+    trigger: { control: false },
+    title: { control: "text" },
+    description: { control: "text" },
+    hideClose: { control: "boolean" },
+    footer: { control: false },
+    children: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Dialog>;
+
+export const Default: Story = {};
+
+/**
+ * The primary use case: a dialog containing a form.
+ * `children` renders between the description and the footer.
+ */
+export const WithForm: Story = {
+  args: {
+    trigger: <Button variant="outline">Edit profile</Button>,
+    title: "Edit profile",
+    description: "Update your account details below.",
+    footer: (
+      <>
+        <DialogClose>
+          <Button variant="secondary">Cancel</Button>
+        </DialogClose>
+        <Button type="submit">Save changes</Button>
+      </>
+    ),
+    children: (
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-col gap-1.5">
+          <Label htmlFor="name">Name</Label>
+          <Input id="name" defaultValue="Franco Baigorria" />
+        </div>
+        <div className="flex flex-col gap-1.5">
+          <Label htmlFor="email">Email</Label>
+          <Input id="email" defaultValue="franco@example.com" />
+        </div>
+      </div>
+    ),
+  },
+};
+
+/**
+ * Use `hideClose` when el dismiss lo manejás vos desde el footer.
+ */
+export const HideClose: Story = {
+  args: {
+    trigger: <Button variant="outline">Open</Button>,
+    title: "No close button",
+    description:
+      "The ✕ button is hidden. Dismiss via the footer or backdrop click.",
+    hideClose: true,
+    footer: (
+      <DialogClose>
+        <Button variant="secondary">Dismiss</Button>
+      </DialogClose>
+    ),
+  },
+};
+
+/**
+ * Use `open` and `onOpenChange` when the dialog is triggered programmatically —
+ * from a table row action, a keyboard shortcut, or a side-effect — without a
+ * static trigger element rendered next to the content.
+ */
+export const Controlled: Story = {
+  render: (args) => (
+    <div className="flex items-center gap-4">
+      <Dialog {...args} />
+      <span className="text-sm text-muted-foreground">
+        State managed externally
+      </span>
+    </div>
+  ),
+  args: {
+    trigger: <Button variant="outline">Open (controlled)</Button>,
+    title: "Controlled dialog",
+    description:
+      "This dialog's open state is managed by the parent. Useful for programmatic flows.",
+  },
+};
+
+/**
+ * Pass a `<Tooltip>` as the `trigger` to show a tooltip on hover and open the dialog
+ * on click — both bound to the same DOM element, no wrapper added.
+ */
+export const WithTooltip: Story = {
+  args: {
+    trigger: (
+      <Tooltip content="Manage account settings">
+        <Button variant="outline">Settings</Button>
+      </Tooltip>
+    ),
+    title: "Account settings",
+    description: "Manage your preferences and security options.",
+  },
+};
+
+/**
+ * Direct composition with primitives for full structural control.
+ * Use this when the composite layout doesn't fit — multi-step flows,
+ * scrollable panels, or anything with a non-standard structure.
+ */
+export const Primitive: Story = {
+  render: () => (
+    <DialogRoot>
+      <DialogTrigger>
+        <Button variant="outline">Open</Button>
+      </DialogTrigger>
+      <DialogPopup>
+        <DialogHeader>
+          <DialogTitle>Built with primitives</DialogTitle>
+        </DialogHeader>
+        <div className="flex flex-col gap-4">
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="prim-email">Email</Label>
+            <Input id="prim-email" defaultValue="franco@example.com" />
+          </div>
+        </div>
+        <DialogFooter>
+          <DialogClose>
+            <Button variant="secondary">Cancel</Button>
+          </DialogClose>
+          <Button>Save</Button>
+        </DialogFooter>
+      </DialogPopup>
+    </DialogRoot>
+  ),
+};

package/src/components/dialog/dialog.test.tsx

@@ -0,0 +1,68 @@
+import { render, waitFor } from "@testing-library/react";
+import { ComponentProps } from "react";
+import { describe, expect, it } from "vitest";
+import {
+  DialogClose,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogPopup,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+} from "../../components";
+import { click } from "../../utils";
+
+describe("Dialog component", () => {
+  const setup = (
+    dialogProps?: Omit<ComponentProps<typeof DialogRoot>, "ref">,
+  ) =>
+    render(
+      <DialogRoot {...dialogProps}>
+        <DialogTrigger render={<button>Trigger</button>} />
+        <DialogPopup>
+          <DialogHeader>
+            <DialogTitle>Title</DialogTitle>
+            <DialogDescription>Description</DialogDescription>
+          </DialogHeader>
+          <DialogFooter>
+            <DialogClose render={<button>Cancelar</button>} />
+          </DialogFooter>
+        </DialogPopup>
+      </DialogRoot>,
+    );
+
+  it("should render correctly", () => setup());
+
+  it("should show dialog on trigger click", async () => {
+    const { getByText } = setup();
+
+    click(getByText("Trigger"));
+
+    await waitFor(() => {
+      expect(getByText("Title")).toBeInTheDocument();
+      expect(getByText("Description")).toBeInTheDocument();
+    });
+  });
+
+  it("should close dialog on close button click", async () => {
+    const { getByText, queryByText } = setup();
+
+    click(getByText("Trigger"));
+
+    await waitFor(() => expect(getByText("Cancelar")).toBeInTheDocument());
+
+    click(getByText("Cancelar"));
+
+    await waitFor(() => {
+      expect(queryByText("Title")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should be controlled by open prop", () => {
+    const { getByText } = setup({ open: true });
+
+    expect(getByText("Title")).toBeInTheDocument();
+    expect(getByText("Description")).toBeInTheDocument();
+  });
+});

package/src/components/dialog/dialog.tsx

@@ -0,0 +1,277 @@
+import { Dialog as DialogBase } from "@base-ui/react/dialog";
+import { X } from "lucide-react";
+import type { HTMLAttributes, ReactElement, ReactNode } from "react";
+import { cn } from "../../lib";
+import { Button } from "../button";
+
+// ── Primitives ────────────────────────────────────────────────────────────────
+
+/** Context root. Holds open state and wraps all dialog parts. */
+export function DialogRoot(props: DialogBase.Root.Props) {
+  return <DialogBase.Root {...props} />;
+}
+
+/**
+ * Renders as its `render` element (defaults to `<button>`).
+ * Composes cleanly with `<Tooltip>` and other Base UI triggers on the same DOM element.
+ */
+export function DialogTrigger({
+  className,
+  ...props
+}: DialogBase.Trigger.Props) {
+  return (
+    <DialogBase.Trigger
+      data-slot="dialog-trigger"
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+/** Semi-transparent overlay rendered behind the popup. */
+export function DialogBackdrop({
+  className,
+  ...props
+}: DialogBase.Backdrop.Props) {
+  return (
+    <DialogBase.Backdrop
+      data-slot="dialog-backdrop"
+      forceRender
+      className={cn(
+        "fixed inset-0 z-overlay bg-black/50",
+        "transition-opacity duration-200",
+        "data-starting-style:opacity-0 data-ending-style:opacity-0",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Full-screen container that centers the popup. */
+export function DialogViewport({
+  className,
+  ...props
+}: DialogBase.Viewport.Props) {
+  return (
+    <DialogBase.Viewport
+      data-slot="dialog-viewport"
+      className={cn(
+        "fixed inset-0 z-overlay flex items-center justify-center p-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/**
+ * Dialog content container. Includes Portal, Backdrop and Viewport internally.
+ * Pass `portalProps` to configure the portal (e.g. a custom `container`).
+ * Pass `closeProps` to customise the close button.
+ */
+export function DialogPopup({
+  className,
+  children,
+  hideClose,
+  closeProps,
+  portalProps,
+  ...props
+}: DialogBase.Popup.Props & {
+  hideClose?: boolean;
+  closeProps?: DialogBase.Close.Props;
+  portalProps?: DialogBase.Portal.Props;
+}) {
+  return (
+    <DialogBase.Portal {...portalProps}>
+      <DialogBackdrop />
+      <DialogViewport>
+        <DialogBase.Popup
+          data-slot="dialog-popup"
+          className={cn(
+            "relative flex w-full max-w-lg flex-col gap-4 rounded-lg border bg-background p-6 shadow-lg",
+            "transition-[scale,opacity] duration-200 ease-out",
+            "data-starting-style:scale-95 data-starting-style:opacity-0",
+            "data-ending-style:scale-95 data-ending-style:opacity-0",
+            className,
+          )}
+          {...props}
+        >
+          {children}
+          {!hideClose && (
+            <DialogBase.Close
+              aria-label="Close"
+              className="absolute right-2 top-2"
+              render={<Button size="icon" variant="ghost" />}
+              {...closeProps}
+            >
+              <X className="size-4" />
+            </DialogBase.Close>
+          )}
+        </DialogBase.Popup>
+      </DialogViewport>
+    </DialogBase.Portal>
+  );
+}
+
+/** Closes the dialog and merges an optional `onClick` into the `render` element. */
+export function DialogClose({ className, ...props }: DialogBase.Close.Props) {
+  return (
+    <DialogBase.Close
+      data-slot="dialog-close"
+      className={cn(className)}
+      {...props}
+    />
+  );
+}
+
+/** Accessible title rendered as `<h2>`. Required for a11y. */
+export function DialogTitle({ className, ...props }: DialogBase.Title.Props) {
+  return (
+    <DialogBase.Title
+      data-slot="dialog-title"
+      className={cn(
+        "text-lg font-semibold leading-none tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Supplementary description rendered below the title. */
+export function DialogDescription({
+  className,
+  ...props
+}: DialogBase.Description.Props) {
+  return (
+    <DialogBase.Description
+      data-slot="dialog-description"
+      className={cn("text-sm text-muted-foreground", className)}
+      {...props}
+    />
+  );
+}
+
+/** Layout wrapper for title and description. */
+export function DialogHeader({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+/** Layout wrapper for action buttons. */
+export function DialogFooter({
+  className,
+  ...props
+}: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+// ── Composite ─────────────────────────────────────────────────────────────────
+
+export type DialogProps = Omit<DialogBase.Root.Props, "children"> & {
+  /** Element that opens the dialog on click. Passed as Base UI `render` prop — no DOM wrapper added. */
+  trigger?: ReactElement;
+  /** Dialog heading. */
+  title?: ReactNode;
+  /** Supporting text rendered below the title. */
+  description?: ReactNode;
+  /** Body content rendered between the description and the footer. */
+  children?: ReactNode;
+  /** Content rendered inside the footer wrapper. */
+  footer?: ReactNode;
+  /** Called when the dialog closes. */
+  onClose?: () => void;
+  /** Hides the close (×) button inside the popup. */
+  hideClose?: boolean;
+  /** Props forwarded to the close button primitive. */
+  closeProps?: DialogBase.Close.Props;
+  /** Props forwarded to the portal. */
+  portalProps?: DialogBase.Portal.Props;
+  /** Additional className forwarded to the popup panel. */
+  className?: string;
+};
+
+/**
+ * General-purpose dialog with optional trigger, title, description, body, and footer.
+ *
+ * The `trigger` prop uses Base UI's `render` prop — no wrapper element is added —
+ * making it composable with `<Tooltip>` at the primitive level.
+ * For full structural control, use the exported primitives directly.
+ *
+ * @example
+ * ```tsx
+ * <Dialog
+ *   trigger={<Button>Open settings</Button>}
+ *   title="Settings"
+ *   description="Manage your account preferences."
+ *   footer={<Button onClick={handleSave}>Save</Button>}
+ * >
+ *   <SettingsForm />
+ * </Dialog>
+ * ```
+ */
+export function Dialog({
+  trigger,
+  title,
+  description,
+  children,
+  footer,
+  onClose,
+  hideClose,
+  closeProps,
+  portalProps,
+  className,
+  onOpenChange,
+  ...props
+}: DialogProps) {
+  return (
+    <DialogRoot
+      onOpenChange={(open, event) => {
+        if (!open) onClose?.();
+        onOpenChange?.(open, event);
+      }}
+      {...props}
+    >
+      {trigger && <DialogTrigger render={trigger} />}
+      <DialogPopup
+        className={className}
+        hideClose={hideClose}
+        closeProps={closeProps}
+        portalProps={portalProps}
+      >
+        {(title || description) && (
+          <DialogHeader>
+            {title && <DialogTitle>{title}</DialogTitle>}
+            {description && (
+              <DialogDescription>{description}</DialogDescription>
+            )}
+          </DialogHeader>
+        )}
+        {children}
+        {footer && <DialogFooter>{footer}</DialogFooter>}
+      </DialogPopup>
+    </DialogRoot>
+  );
+}
+
+// ── Primitive escape hatch ────────────────────────────────────────────────────
+
+export { DialogBase as DialogPrimitive };

package/src/components/dialog/index.ts

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