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

package/src/components/timeline/timeline.stories.tsx

@@ -0,0 +1,84 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { Settings, UserCheck } from "lucide-react";
+import { Timeline } from ".";
+
+const meta: Meta<typeof Timeline> = {
+  title: "Data display/Timeline",
+  component: Timeline,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Timeline>;
+
+export const Default: Story = {
+  args: {
+    items: [
+      {
+        content: "First",
+        color: "green",
+      },
+      {
+        content: "Second",
+        icon: <UserCheck />,
+        status: "done",
+      },
+      {
+        content: "Third",
+        icon: <Settings />,
+        status: "pending",
+      },
+    ],
+  },
+};
+
+export const OnlyRight: Story = {
+  args: {
+    items: [
+      {
+        content: (
+          <div>
+            <time className="text-gray-400 text-sm">12/12/2022</time>
+            <p>Argentina Campeón Mundial</p>
+            <p>El dibu héroe de un país</p>
+            <p>Messi mejor jugador del mundo</p>
+            <p>Mejor país del mundo</p>
+          </div>
+        ),
+        status: "done",
+      },
+      {
+        content: (
+          <div>
+            <time className="text-gray-400 text-sm">10/12/2023</time>
+            <p>Milei electo</p>
+          </div>
+        ),
+        status: "done",
+      },
+      {
+        content: (
+          <div>
+            <time className="text-gray-400 text-sm">14/10/2024</time>
+            <p>Año de recuperación del país</p>
+          </div>
+        ),
+        status: "done",
+      },
+      {
+        content: (
+          <div>
+            <time className="text-gray-400 text-sm">1/1/2025</time>
+            <p>Nuevo año</p>
+          </div>
+        ),
+        status: "pending",
+      },
+    ],
+  },
+  render: (args) => (
+    <div className="w-[400px]">
+      <Timeline {...args} />
+    </div>
+  ),
+};

package/src/components/timeline/timeline.tsx

@@ -0,0 +1,147 @@
+import { HTMLProps, ReactNode } from "react";
+import { cn } from "../../lib";
+import { TimelineStatus } from "./timeline-status";
+
+interface ItemTimeline {
+  content?: ReactNode;
+  icon?: ReactNode;
+  status?: "done" | "pending" | "error";
+  color?: string;
+}
+
+interface TimelineProps {
+  items: ItemTimeline[];
+  itemsProps?: HTMLProps<HTMLDivElement>;
+  containerProps?: HTMLProps<HTMLUListElement>;
+  classNameContainer?: string;
+  classNameItem?: string;
+  classNameItemDot?: string;
+  classNameItemContainerDot?: string;
+  classNameItemContent?: string;
+}
+export const Timeline = ({
+  items,
+  classNameContainer,
+  containerProps,
+  ...itemsProps
+}: TimelineProps) => {
+  return (
+    <TimelineRoot className={classNameContainer} {...containerProps}>
+      {items.map((item: ItemTimeline, i) => (
+        <TimelineListItem
+          key={i}
+          icon={item.icon}
+          color={item.color}
+          status={item.status}
+          {...itemsProps}
+        >
+          {item.content}
+        </TimelineListItem>
+      ))}
+    </TimelineRoot>
+  );
+};
+
+export const TimelineRoot = (props: HTMLProps<HTMLUListElement>) => {
+  return (
+    <ul
+      data-slot="timeline"
+      {...props}
+      className={cn(
+        "relative flex justify-center flex-col border-input",
+        props.className,
+      )}
+    />
+  );
+};
+
+interface TimelineListItemProps extends HTMLProps<HTMLLIElement> {
+  icon?: ReactNode;
+  status?: "done" | "pending" | "error";
+  color?: string;
+  itemsProps?: HTMLProps<HTMLDivElement>;
+  classNameContainer?: string;
+  classNameItemDot?: string;
+  classNameItemContainerDot?: string;
+  classNameItemContent?: string;
+}
+export const TimelineListItem = ({
+  icon,
+  status,
+  color,
+  classNameItemDot,
+  classNameItemContainerDot,
+  classNameItemContent,
+  itemsProps,
+  children,
+  ...props
+}: TimelineListItemProps) => {
+  return (
+    <li
+      data-slot="timeline-item"
+      className={cn(
+        "rounded-lg w-full px-2 gap-1 grid hover:bg-muted transition-colors ease-in grid-cols-[minmax(auto,20px)_1fr]",
+        props.className,
+      )}
+      {...props}
+    >
+      <TimelineItemDot
+        icon={icon}
+        status={status}
+        color={color}
+        classNameDot={classNameItemDot}
+        classNameContainerDot={classNameItemContainerDot}
+      />
+      <TimelineItemContent className={classNameItemContent} {...itemsProps}>
+        {children}
+      </TimelineItemContent>
+    </li>
+  );
+};
+
+interface TimelineItemDotProps {
+  icon?: ReactNode;
+  status?: "done" | "pending" | "error";
+  color?: string;
+  classNameDot?: string;
+  classNameContainerDot?: string;
+}
+export const TimelineItemDot = ({
+  icon,
+  status = "pending",
+  color,
+  classNameDot,
+  classNameContainerDot,
+}: TimelineItemDotProps) => {
+  return (
+    <div
+      data-slot="timeline-item-dot"
+      className={cn(
+        "relative pb-6 last:after:hidden after:absolute after:top-0 after:bottom-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-gray-200",
+        classNameContainerDot,
+      )}
+    >
+      <div
+        data-slot="timeline-item-dot-icon"
+        className={cn(
+          "relative z-10 flex text-white items-center justify-center rounded-full left-1/2 -translate-x-1/2",
+          icon ? "aspect-square p-1.5 min-h-7 min-w-7 top-2" : "size-2 top-4",
+          classNameDot,
+        )}
+        style={{ backgroundColor: color || TimelineStatus?.[status] }}
+      >
+        {icon}
+      </div>
+    </div>
+  );
+};
+
+export const TimelineItemContent = (props: HTMLProps<HTMLDivElement>) => {
+  return (
+    <div
+      data-slot="timeline-item-content"
+      {...props}
+      className={cn("grow px-2 pb-4 pt-2", props.className)}
+    />
+  );
+};

package/src/components/toast/index.ts

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

package/src/components/toast/toast.stories.tsx

@@ -0,0 +1,392 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { LibraryProvider } from "../../providers";
+import { Button } from "../button";
+import {
+  createToastManager,
+  ToastProvider,
+  toast,
+  useToastManager,
+} from "./toast";
+
+/**
+ * Imperative toast notification system built on `@base-ui/react/toast`.
+ * Toasts stack in the bottom-right corner with enter/exit animations,
+ * swipe-to-dismiss, and expand-on-hover.
+ *
+ * ## Usage
+ *
+ * Call `toast` or `toast.*` from anywhere — components, services, stores, event handlers.
+ * A `string` renders as the prominent title; an object accepts:
+ *
+ * | Prop | Type | Description |
+ * |------|------|-------------|
+ * | `variant` | `"default" \| "success" \| "error" \| "warning" \| "info"` | Color and icon |
+ * | `title` | `string` | Primary text (`font-medium`) |
+ * | `description` | `string \| ReactNode` | Secondary text (muted) |
+ * | `content` | `ReactNode` | Replaces the entire toast layout |
+ * | `actions` | `ButtonProps[]` | Action buttons below the message |
+ * | `id` | `string` | Stable ID — prevents duplicates, triggers bump animation |
+ * | `timeout` | `number \| null` | Duration in ms. `null` = persistent |
+ *
+ * ```ts
+ * toast("Notification");                    // default — no variant or color
+ * toast.success("Changes saved");
+ * toast.error("Something went wrong");
+ * toast.warning({ title: "Warning", description: "File exceeds maximum size" });
+ * toast.info("Update available");
+ *
+ * toast.promise(saveData(), {
+ *   loading: { description: "Saving..." },
+ *   success: () => ({ variant: "success", description: "Saved" }),
+ *   error:   (e) => ({ variant: "error",   description: e.message }),
+ * });
+ * ```
+ *
+ * ## Setup
+ *
+ * **Requires `<LibraryProvider>` at the app root.** It includes `ToastProvider` automatically — no
+ * extra wrapping needed:
+ *
+ * ```tsx
+ * // app.tsx
+ * import { LibraryProvider } from "@boxcustodia/library";
+ *
+ * export function App() {
+ *   return (
+ *     <LibraryProvider>
+ *       <Router />
+ *     </LibraryProvider>
+ *   );
+ * }
+ * ```
+ */
+const meta: Meta<typeof ToastProvider> = {
+  title: "Components/Toast",
+  component: ToastProvider,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// ─── Basic ────────────────────────────────────────────────────────────────────
+
+export const Default: Story = {
+  render: () => (
+    <Button
+      variant="outline"
+      onClick={() => toast("Notification without variant.")}
+    >
+      Default
+    </Button>
+  ),
+};
+
+export const TitleOnly: Story = {
+  render: () => (
+    <Button variant="outline" onClick={() => toast({ title: "Title only" })}>
+      Title only
+    </Button>
+  ),
+};
+
+export const DescriptionOnly: Story = {
+  render: () => (
+    <Button
+      variant="outline"
+      onClick={() => toast({ description: "Description only, no title." })}
+    >
+      Description only
+    </Button>
+  ),
+};
+
+// ─── Variants ─────────────────────────────────────────────────────────────────
+
+export const Success: Story = {
+  render: () => (
+    <Button
+      variant="outline"
+      onClick={() => toast.success("Changes saved successfully.")}
+    >
+      Success
+    </Button>
+  ),
+};
+
+export const Error: Story = {
+  render: () => (
+    <Button
+      variant="outline"
+      onClick={() => toast.error("Could not complete the operation.")}
+    >
+      Error
+    </Button>
+  ),
+};
+
+export const Warning: Story = {
+  render: () => (
+    <Button
+      variant="outline"
+      onClick={() =>
+        toast.warning({
+          title: "Warning",
+          description: "File exceeds the maximum allowed size.",
+        })
+      }
+    >
+      Warning
+    </Button>
+  ),
+};
+
+export const Info: Story = {
+  render: () => (
+    <Button
+      variant="outline"
+      onClick={() =>
+        toast.info({
+          title: "Update available",
+          description: "v2.4.0 is ready to install.",
+        })
+      }
+    >
+      Info
+    </Button>
+  ),
+};
+
+// ─── Composition ──────────────────────────────────────────────────────────────
+
+/**
+ * `content` replaces the entire toast layout — useful for custom layouts,
+ * image previews, or any arbitrary JSX inside the toast container.
+ */
+export const CustomContent: Story = {
+  render: () => (
+    <Button
+      variant="outline"
+      onClick={() =>
+        toast.info({
+          content: (
+            <div className="flex flex-col gap-1 pr-6">
+              <span className="text-[0.975rem] font-medium leading-5">
+                Custom layout
+              </span>
+              <span className="text-[0.925rem] leading-5 text-muted-foreground">
+                Any JSX can go inside the toast.
+              </span>
+              <code className="mt-1 rounded bg-muted px-1.5 py-0.5 text-xs">
+                content: ReactNode
+              </code>
+            </div>
+          ),
+        })
+      }
+    >
+      Custom content
+    </Button>
+  ),
+};
+
+/**
+ * `actions` renders buttons below the message. Accepts the same API as `<Button>`.
+ * Useful for inline confirmations without opening a dialog.
+ *
+ * To dismiss the toast from an action, capture the ID returned by `add()` and call `remove(id)`:
+ *
+ * ```tsx
+ * const { add, close } = useToastManager();
+ *
+ * let id: string;
+ * id = add({
+ *   variant: "warning",
+ *   title: "Unsaved changes",
+ *   actions: [
+ *     { children: "Discard", onClick: () => close(id) },
+ *     { children: "Save",    onClick: () => { save(); close(id); } },
+ *   ],
+ * });
+ * ```
+ */
+export const WithActions: Story = {
+  render: () => {
+    const { add, close } = useToastManager();
+    return (
+      <Button
+        variant="outline"
+        onClick={() => {
+          let id: string;
+          id = add({
+            variant: "warning",
+            title: "Unsaved changes",
+            description: "They will be lost if you leave this page.",
+            actions: [
+              {
+                children: "Discard",
+                variant: "outline",
+                size: "sm",
+                onClick: () => close(id),
+              },
+              {
+                children: "Save",
+                variant: "default",
+                size: "sm",
+                onClick: () => close(id),
+              },
+            ],
+          });
+        }}
+      >
+        With actions
+      </Button>
+    );
+  },
+};
+
+/**
+ * `toast.promise()` handles all three promise states automatically:
+ * shows a loading toast while pending, then transitions to success or error on settle.
+ */
+const Deferred = globalThis.Promise;
+const NativeError = globalThis.Error;
+
+const mockPurchaseSuccess = () =>
+  new Deferred<{ message: string }>((resolve) =>
+    setTimeout(
+      () =>
+        resolve({
+          message:
+            "Order #4821 confirmed. A summary has been sent to your email.",
+        }),
+      2000,
+    ),
+  );
+
+const mockPurchaseError = () =>
+  new Deferred<{ message: string }>((_, reject) =>
+    setTimeout(
+      () => reject(new NativeError("Insufficient funds on the card.")),
+      2000,
+    ),
+  );
+
+export const PromiseToast: Story = {
+  render: () => (
+    <div className="flex gap-2">
+      <Button
+        variant="outline"
+        onClick={() =>
+          toast.promise(mockPurchaseSuccess(), {
+            loading: { description: "Processing payment..." },
+            success: (data: any) => ({
+              variant: "success",
+              title: "Purchase complete",
+              description: data.message,
+            }),
+            error: (err: Error) => ({
+              variant: "error",
+              title: "Payment failed",
+              description: err.message,
+            }),
+          })
+        }
+      >
+        Confirm purchase
+      </Button>
+      <Button
+        variant="outline"
+        onClick={() =>
+          toast.promise(mockPurchaseError(), {
+            loading: { description: "Processing payment..." },
+            success: (data: any) => ({
+              variant: "success",
+              title: "Purchase complete",
+              description: data.message,
+            }),
+            error: (err: Error) => ({
+              variant: "error",
+              title: "Payment failed",
+              description: err.message,
+            }),
+          })
+        }
+      >
+        Pay (insufficient funds)
+      </Button>
+    </div>
+  ),
+};
+
+// ─── Advanced ─────────────────────────────────────────────────────────────────
+
+/**
+ * `useToastManager()` exposes the full manager inside a component.
+ * Useful when you need access to `update()`, `toasts[]`, or `promise()` with local state.
+ * For most cases, the `toast.*` singleton is enough.
+ */
+export const WithHook: Story = {
+  render: () => {
+    const { add, toasts } = useToastManager();
+    return (
+      <div className="flex items-center gap-3">
+        <Button
+          variant="outline"
+          onClick={() =>
+            add({
+              variant: "info",
+              title: "From the hook",
+              description:
+                "useToastManager() gives full access to the manager.",
+            })
+          }
+        >
+          Add toast
+        </Button>
+        <span className="text-sm text-muted-foreground">
+          {toasts.length} active
+        </span>
+      </div>
+    );
+  },
+};
+
+/**
+ * `createToastManager()` creates an isolated manager instance — useful in tests
+ * or microfrontends that need a separate toast stack from the global singleton.
+ *
+ * ```tsx
+ * const myManager = createToastManager();
+ *
+ * <ToastProvider toastManager={myManager}>
+ *   <App />
+ * </ToastProvider>
+ *
+ * myManager.add({ variant: "success", title: "Isolated instance" });
+ * ```
+ */
+const isolatedManager = createToastManager();
+
+export const IsolatedManager: Story = {
+  decorators: [
+    (Story) => (
+      <LibraryProvider toastManager={isolatedManager}>
+        <Story />
+      </LibraryProvider>
+    ),
+  ],
+  render: () => (
+    <Button
+      variant="outline"
+      onClick={() =>
+        isolatedManager.add({
+          variant: "info",
+          title: "Isolated manager",
+          description: "Independent instance from the global singleton.",
+        })
+      }
+    >
+      Trigger isolated
+    </Button>
+  ),
+};

package/src/components/toast/toast.test.tsx

@@ -0,0 +1,50 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { ToastProvider, useToastManager } from "../toast";
+
+function ToastTrigger({
+  variant,
+  title,
+  description,
+}: {
+  variant?: string;
+  title?: string;
+  description?: string;
+}) {
+  const manager = useToastManager();
+  return (
+    <button
+      onClick={() =>
+        manager.add({ variant: variant as any, title, description })
+      }
+    >
+      Show toast
+    </button>
+  );
+}
+
+function renderWithProvider(ui: React.ReactNode) {
+  return render(<ToastProvider>{ui}</ToastProvider>);
+}
+
+describe("Toast component", () => {
+  it("should render description", async () => {
+    renderWithProvider(<ToastTrigger description="test" />);
+    await userEvent.click(screen.getByText("Show toast"));
+    expect(await screen.findByText("test")).toBeInTheDocument();
+  });
+
+  it("should render title", async () => {
+    renderWithProvider(<ToastTrigger title="title" description="test" />);
+    await userEvent.click(screen.getByText("Show toast"));
+    expect(await screen.findByText("title")).toBeInTheDocument();
+  });
+
+  it("should render with success variant ring", async () => {
+    renderWithProvider(<ToastTrigger variant="success" description="test" />);
+    await userEvent.click(screen.getByText("Show toast"));
+    const toast = await screen.findByRole("status");
+    expect(toast.className).toContain("ring-success");
+  });
+});