@boxcustodia/library 2.0.0-alpha.2 → 2.0.0-alpha.20

package/src/components/empty/empty.test.tsx

@@ -0,0 +1,220 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyRoot,
+  EmptyTitle,
+} from "../../components";
+
+describe("EmptyRoot", () => {
+  it("renders with data-slot='empty'", () => {
+    render(<EmptyRoot />);
+    expect(document.querySelector('[data-slot="empty"]')).toBeInTheDocument();
+  });
+
+  it("renders children", () => {
+    render(
+      <EmptyRoot>
+        <span>child</span>
+      </EmptyRoot>,
+    );
+    expect(screen.getByText("child")).toBeInTheDocument();
+  });
+
+  it("forwards className", () => {
+    render(<EmptyRoot className="custom-root" />);
+    expect(document.querySelector('[data-slot="empty"]')).toHaveClass(
+      "custom-root",
+    );
+  });
+});
+
+describe("EmptyHeader", () => {
+  it("renders with data-slot='empty-header'", () => {
+    render(<EmptyHeader />);
+    expect(
+      document.querySelector('[data-slot="empty-header"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("EmptyMedia", () => {
+  it("renders with data-slot='empty-media'", () => {
+    render(<EmptyMedia />);
+    expect(
+      document.querySelector('[data-slot="empty-media"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("applies default variant", () => {
+    render(<EmptyMedia />);
+    const el = document.querySelector('[data-slot="empty-media"]');
+    expect(el).toHaveAttribute("data-variant", "default");
+    expect(el).toHaveClass("bg-transparent");
+  });
+
+  it("applies icon variant", () => {
+    render(<EmptyMedia variant="icon" />);
+    const el = document.querySelector('[data-slot="empty-media"]');
+    expect(el).toHaveAttribute("data-variant", "icon");
+    expect(el).toHaveClass("rounded-lg");
+  });
+
+  it("forwards className", () => {
+    render(<EmptyMedia className="media-cls" />);
+    expect(document.querySelector('[data-slot="empty-media"]')).toHaveClass(
+      "media-cls",
+    );
+  });
+});
+
+describe("EmptyTitle", () => {
+  it("renders with data-slot='empty-title'", () => {
+    render(<EmptyTitle>Title</EmptyTitle>);
+    expect(
+      document.querySelector('[data-slot="empty-title"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("EmptyDescription", () => {
+  it("renders with data-slot='empty-description'", () => {
+    render(<EmptyDescription>Desc</EmptyDescription>);
+    expect(
+      document.querySelector('[data-slot="empty-description"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("EmptyContent", () => {
+  it("renders with data-slot='empty-content'", () => {
+    render(<EmptyContent />);
+    expect(
+      document.querySelector('[data-slot="empty-content"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("Empty composite", () => {
+  it("renders root with data-slot='empty'", () => {
+    render(<Empty />);
+    expect(document.querySelector('[data-slot="empty"]')).toBeInTheDocument();
+  });
+
+  it("renders default title 'No hay datos'", () => {
+    render(<Empty />);
+    expect(screen.getByText("No hay datos")).toBeInTheDocument();
+  });
+
+  it("renders default icon (media slot present)", () => {
+    render(<Empty />);
+    expect(
+      document.querySelector('[data-slot="empty-media"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("renders custom title", () => {
+    render(<Empty title="Sin resultados" />);
+    expect(screen.getByText("Sin resultados")).toBeInTheDocument();
+  });
+
+  it("hides title when title is empty string", () => {
+    render(<Empty title="" />);
+    expect(
+      document.querySelector('[data-slot="empty-title"]'),
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders description when provided", () => {
+    render(<Empty description="Probá con otro filtro" />);
+    expect(screen.getByText("Probá con otro filtro")).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="empty-description"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("hides description when not provided", () => {
+    render(<Empty />);
+    expect(
+      document.querySelector('[data-slot="empty-description"]'),
+    ).not.toBeInTheDocument();
+  });
+
+  it("renders action inside empty-content when provided", () => {
+    render(<Empty action={<button type="button">Crear</button>} />);
+    expect(screen.getByRole("button", { name: "Crear" })).toBeInTheDocument();
+    expect(
+      document.querySelector('[data-slot="empty-content"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("hides empty-content when action is absent", () => {
+    render(<Empty />);
+    expect(
+      document.querySelector('[data-slot="empty-content"]'),
+    ).not.toBeInTheDocument();
+  });
+
+  it("hides media when icon is null", () => {
+    render(<Empty icon={null} />);
+    expect(
+      document.querySelector('[data-slot="empty-media"]'),
+    ).not.toBeInTheDocument();
+  });
+
+  it("applies iconVariant='icon' to media slot", () => {
+    render(<Empty iconVariant="icon" />);
+    expect(document.querySelector('[data-slot="empty-media"]')).toHaveAttribute(
+      "data-variant",
+      "icon",
+    );
+  });
+
+  it("renders children alongside default slots", () => {
+    render(<Empty>extra content</Empty>);
+    expect(screen.getByText("extra content")).toBeInTheDocument();
+  });
+
+  it("forwards className to root slot", () => {
+    render(<Empty className="root-custom" />);
+    expect(document.querySelector('[data-slot="empty"]')).toHaveClass(
+      "root-custom",
+    );
+  });
+
+  it("applies classNames to all slots", () => {
+    render(
+      <Empty
+        title="T"
+        description="D"
+        action={<span>A</span>}
+        classNames={{
+          header: "cls-header",
+          media: "cls-media",
+          title: "cls-title",
+          description: "cls-desc",
+          content: "cls-content",
+        }}
+      />,
+    );
+    expect(document.querySelector('[data-slot="empty-header"]')).toHaveClass(
+      "cls-header",
+    );
+    expect(document.querySelector('[data-slot="empty-media"]')).toHaveClass(
+      "cls-media",
+    );
+    expect(document.querySelector('[data-slot="empty-title"]')).toHaveClass(
+      "cls-title",
+    );
+    expect(
+      document.querySelector('[data-slot="empty-description"]'),
+    ).toHaveClass("cls-desc");
+    expect(document.querySelector('[data-slot="empty-content"]')).toHaveClass(
+      "cls-content",
+    );
+  });
+});

package/src/components/empty/empty.tsx

@@ -0,0 +1,158 @@
+"use client";
+
+import { cva, type VariantProps } from "class-variance-authority";
+import { Inbox } from "lucide-react";
+import { type ComponentProps, type ReactNode } from "react";
+import { cn } from "../../lib";
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-transparent text-muted-foreground [&_.lucide:not([class*='size-'])]:size-12",
+        icon: "size-8 rounded-lg bg-muted text-foreground [&_.lucide:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export function EmptyRoot({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl p-6 text-center text-balance",
+        className,
+      )}
+      data-slot="empty"
+      {...props}
+    />
+  );
+}
+
+export function EmptyHeader({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex max-w-sm flex-col items-center gap-2", className)}
+      data-slot="empty-header"
+      {...props}
+    />
+  );
+}
+
+export function EmptyMedia({
+  className,
+  variant,
+  ...props
+}: ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      className={cn(emptyMediaVariants({ variant }), className)}
+      data-slot="empty-media"
+      data-variant={variant ?? "default"}
+      {...props}
+    />
+  );
+}
+
+export function EmptyTitle({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn(
+        "cn-font-heading text-sm font-medium tracking-tight",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export function EmptyDescription({
+  className,
+  ...props
+}: ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      data-slot="empty-description"
+      {...props}
+    />
+  );
+}
+
+export function EmptyContent({ className, ...props }: ComponentProps<"div">) {
+  return (
+    <div
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5",
+        className,
+      )}
+      data-slot="empty-content"
+      {...props}
+    />
+  );
+}
+
+interface EmptyProps extends Omit<ComponentProps<typeof EmptyRoot>, "title"> {
+  icon?: ReactNode;
+  iconVariant?: VariantProps<typeof emptyMediaVariants>["variant"];
+  title?: ReactNode;
+  description?: ReactNode;
+  action?: ReactNode;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Wrapper around media, title and description. */
+    header?: string;
+    /** Box that frames the icon (chip when `iconVariant="icon"`). */
+    media?: string;
+    /** Title text. */
+    title?: string;
+    /** Description text below the title. */
+    description?: string;
+    /** Wrapper around the `action` slot. */
+    content?: string;
+  };
+}
+
+export function Empty({
+  icon = <Inbox />,
+  iconVariant = "default",
+  title = "No hay datos",
+  description,
+  action,
+  children,
+  classNames,
+  ...props
+}: EmptyProps) {
+  return (
+    <EmptyRoot {...props}>
+      <EmptyHeader className={classNames?.header}>
+        {icon && (
+          <EmptyMedia variant={iconVariant} className={classNames?.media}>
+            {icon}
+          </EmptyMedia>
+        )}
+        {title && (
+          <EmptyTitle className={classNames?.title}>{title}</EmptyTitle>
+        )}
+        {description && (
+          <EmptyDescription className={classNames?.description}>
+            {description}
+          </EmptyDescription>
+        )}
+      </EmptyHeader>
+      {action != null && (
+        <EmptyContent className={classNames?.content}>{action}</EmptyContent>
+      )}
+      {children}
+    </EmptyRoot>
+  );
+}

package/src/components/empty/index.ts

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