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

package/src/components/dropzone/dropzone.stories.tsx

@@ -0,0 +1,190 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { Camera, File, FileArchive, ImageIcon, Trash } from "lucide-react";
+import { Button } from "../../components/button";
+import {
+  Dropzone,
+  DropzoneAcceptedFiles,
+  DropzoneContent,
+  DropzoneRejectedFiles,
+  DropzoneRoot,
+  DropzoneTrigger,
+  type FileError,
+} from ".";
+import { FileType, FileTypeGroups, type FileTypeValue } from "./file-types";
+
+/**
+ * Drag-and-drop file uploader built on react-dropzone. Supports controlled and uncontrolled
+ * file state, MIME type filtering, size limits, and custom file item rendering via render props.
+ *
+ * Compose with primitives (`DropzoneRoot`, `DropzoneTrigger`, `DropzoneContent`,
+ * `DropzoneAcceptedFiles`, `DropzoneRejectedFiles`) for full layout control.
+ */
+const meta: Meta<typeof Dropzone> = {
+  title: "Components/Dropzone",
+  component: Dropzone,
+  subcomponents: {
+    DropzoneRoot: DropzoneRoot as React.ComponentType<unknown>,
+    DropzoneTrigger: DropzoneTrigger as React.ComponentType<unknown>,
+    DropzoneContent: DropzoneContent as React.ComponentType<unknown>,
+    DropzoneAcceptedFiles:
+      DropzoneAcceptedFiles as React.ComponentType<unknown>,
+    DropzoneRejectedFiles:
+      DropzoneRejectedFiles as React.ComponentType<unknown>,
+  },
+  args: {
+    allowedExtensions: [...FileTypeGroups.IMAGES, FileType.PDF],
+  },
+  argTypes: {
+    classNames: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Dropzone>;
+
+export const Default: Story = {};
+
+/**
+ * `className` styles the outer wrapper. `classNames` exposes the `trigger`,
+ * `icon`, `label`, and `content` slots for fine-grained tweaks.
+ */
+export const WithClassNames: Story = {
+  args: {
+    classNames: {
+      trigger: "border-primary bg-primary/5",
+      icon: "text-primary",
+      label: "text-primary",
+    },
+  },
+};
+
+export const WithCustomIcon: Story = {
+  args: {
+    allowedExtensions: FileTypeGroups.IMAGES,
+    icon: ImageIcon,
+    iconSize: 48,
+  },
+};
+
+export const FileUploader: Story = {
+  args: {
+    allowedExtensions: [FileType.PDF, FileType.ZIP],
+    icon: FileArchive,
+    iconSize: 48,
+  },
+};
+
+export const MultipleFiles: Story = {
+  args: {
+    multiple: true,
+    maxFiles: 3,
+    allowedExtensions: [...FileTypeGroups.IMAGES, FileType.PDF],
+  },
+};
+
+/**
+ * `onError` fires with a `FileError[]` whenever files are rejected. Each entry
+ * includes `errorCode` (`INVALID_EXTENSION`, `FILE_TOO_LARGE`, `MAX_FILES_EXCEEDED`)
+ * for granular error handling.
+ */
+export const WithErrorHandling: Story = {
+  args: {
+    multiple: true,
+    maxFiles: 2,
+    maxFileSize: 2 * 1024 * 1024,
+    allowedExtensions: [...FileTypeGroups.IMAGES, FileType.PDF],
+    onError: (fileErrors: FileError[]) => {
+      alert(
+        fileErrors
+          .map(({ file, errorCode }) => `${file.name}: ${errorCode}`)
+          .join("\n"),
+      );
+    },
+  },
+};
+
+export const CustomFilePreview: Story = {
+  args: {
+    multiple: true,
+    allowedExtensions: [...FileTypeGroups.IMAGES, FileType.PDF],
+    showRejected: true,
+    renderAcceptedFile: (file, removeItem) => (
+      <div className="flex items-center gap-2 p-2 bg-muted rounded-lg">
+        {FileTypeGroups.IMAGES.includes(file.type as FileTypeValue) ? (
+          <img
+            src={URL.createObjectURL(file)}
+            alt={file.name}
+            className="h-12 w-12 rounded object-cover"
+          />
+        ) : (
+          <File className="h-12 w-12" />
+        )}
+        <div className="flex flex-col">
+          <span className="font-medium">{file.name}</span>
+          <span className="text-sm text-muted-foreground">
+            {Math.round(file.size / 1024)}KB
+          </span>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="ml-auto"
+          onClick={removeItem}
+        >
+          <Trash className="h-4 w-4" />
+        </Button>
+      </div>
+    ),
+    renderRejectedFile: (file, removeItem) => (
+      <div className="flex items-center gap-2 p-2 bg-destructive/10 rounded-lg">
+        <File className="h-12 w-12" />
+        <div className="flex flex-col">
+          <span className="font-medium">{file.name}</span>
+          <span className="text-sm text-muted-foreground">
+            Archivo rechazado
+          </span>
+        </div>
+        <Button
+          variant="ghost"
+          size="icon"
+          className="ml-auto"
+          onClick={removeItem}
+        >
+          <Trash className="h-4 w-4" />
+        </Button>
+      </div>
+    ),
+  },
+};
+
+/**
+ * Use primitives directly for full layout control. `DropzoneTrigger` with `render`
+ * turns any element into the drag target and click handler.
+ *
+ * ```tsx
+ * <DropzoneRoot>
+ *   <DropzoneTrigger render={<Button>Upload</Button>} />
+ *   <DropzoneContent>
+ *     <DropzoneAcceptedFiles />
+ *     <DropzoneRejectedFiles />
+ *   </DropzoneContent>
+ * </DropzoneRoot>
+ * ```
+ */
+export const Primitive: Story = {
+  render: () => (
+    <DropzoneRoot>
+      <DropzoneTrigger
+        render={
+          <Button>
+            <Camera /> Upload
+          </Button>
+        }
+      />
+      <DropzoneContent>
+        <DropzoneAcceptedFiles />
+        <DropzoneRejectedFiles />
+      </DropzoneContent>
+    </DropzoneRoot>
+  ),
+};

package/src/components/dropzone/dropzone.test.tsx

@@ -0,0 +1,353 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import {
+  Dropzone,
+  DropzoneAcceptedFiles,
+  DropzoneContent,
+  DropzoneItem,
+  DropzoneRejectedFiles,
+  DropzoneRoot,
+  DropzoneTrigger,
+} from "../../components";
+
+// ─── Primitives ───────────────────────────────────────────────────────────────
+
+describe("DropzoneRoot", () => {
+  it("renders with data-slot dropzone", () => {
+    render(<DropzoneRoot />);
+    expect(
+      document.querySelector('[data-slot="dropzone"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("applies className to root div", () => {
+    render(<DropzoneRoot className="custom-root" />);
+    expect(document.querySelector('[data-slot="dropzone"]')).toHaveClass(
+      "custom-root",
+    );
+  });
+
+  it("renders children", () => {
+    render(
+      <DropzoneRoot>
+        <span>Child</span>
+      </DropzoneRoot>,
+    );
+    expect(screen.getByText("Child")).toBeInTheDocument();
+  });
+
+  it("throws when DropzoneTrigger used outside DropzoneRoot", () => {
+    const spy = vi.spyOn(console, "error").mockImplementation(() => {});
+    expect(() => render(<DropzoneTrigger />)).toThrow(
+      "useDropzoneCtx must be used within DropzoneRoot",
+    );
+    spy.mockRestore();
+  });
+});
+
+describe("DropzoneTrigger", () => {
+  it("renders with data-slot dropzone-trigger", () => {
+    render(
+      <DropzoneRoot>
+        <DropzoneTrigger />
+      </DropzoneRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="dropzone-trigger"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("renders hidden input with data-slot dropzone-input", () => {
+    render(
+      <DropzoneRoot>
+        <DropzoneTrigger />
+      </DropzoneRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="dropzone-input"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+describe("DropzoneContent", () => {
+  it("renders with data-slot dropzone-content", () => {
+    render(
+      <DropzoneRoot>
+        <DropzoneContent />
+      </DropzoneRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="dropzone-content"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("applies className", () => {
+    render(
+      <DropzoneRoot>
+        <DropzoneContent className="custom-content" />
+      </DropzoneRoot>,
+    );
+    expect(
+      document.querySelector('[data-slot="dropzone-content"]'),
+    ).toHaveClass("custom-content");
+  });
+});
+
+describe("DropzoneItem", () => {
+  const file = new File(["content"], "test.pdf", { type: "application/pdf" });
+
+  it("renders with data-slot dropzone-item", () => {
+    render(<DropzoneItem file={file} onRemove={vi.fn()} />);
+    expect(
+      document.querySelector('[data-slot="dropzone-item"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("shows file name", () => {
+    render(<DropzoneItem file={file} onRemove={vi.fn()} />);
+    expect(screen.getByText("test.pdf")).toBeInTheDocument();
+  });
+
+  it("remove button has data-slot dropzone-item-remove", () => {
+    render(<DropzoneItem file={file} onRemove={vi.fn()} />);
+    expect(
+      document.querySelector('[data-slot="dropzone-item-remove"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("fires onRemove when remove button clicked", async () => {
+    const onRemove = vi.fn();
+    render(<DropzoneItem file={file} onRemove={onRemove} />);
+    await userEvent.click(
+      document.querySelector('[data-slot="dropzone-item-remove"]')!,
+    );
+    expect(onRemove).toHaveBeenCalledTimes(1);
+  });
+
+  it("renders custom icon via renderIcon prop", () => {
+    render(
+      <DropzoneItem
+        file={file}
+        onRemove={vi.fn()}
+        renderIcon={() => <span data-testid="custom-icon">Icon</span>}
+      />,
+    );
+    expect(screen.getByTestId("custom-icon")).toBeInTheDocument();
+  });
+
+  it("applies className", () => {
+    render(
+      <DropzoneItem file={file} onRemove={vi.fn()} className="custom-item" />,
+    );
+    expect(document.querySelector('[data-slot="dropzone-item"]')).toHaveClass(
+      "custom-item",
+    );
+  });
+});
+
+// ─── DropzoneAcceptedFiles ───────────────────────────────────────────────────
+
+describe("DropzoneAcceptedFiles", () => {
+  const file1 = new File(["a"], "file1.pdf", { type: "application/pdf" });
+  const file2 = new File(["b"], "file2.png", { type: "image/png" });
+
+  it("renders nothing when no files", () => {
+    const { container } = render(
+      <DropzoneRoot>
+        <DropzoneAcceptedFiles />
+      </DropzoneRoot>,
+    );
+    expect(container.querySelector('[data-slot="dropzone-item"]')).toBeNull();
+  });
+
+  it("renders accepted files from controlled files prop", () => {
+    render(
+      <DropzoneRoot files={[file1, file2]}>
+        <DropzoneAcceptedFiles />
+      </DropzoneRoot>,
+    );
+    expect(screen.getByText("file1.pdf")).toBeInTheDocument();
+    expect(screen.getByText("file2.png")).toBeInTheDocument();
+  });
+
+  it("calls onFileRemove with index and accepted type on remove", async () => {
+    const onFileRemove = vi.fn();
+    render(
+      <DropzoneRoot files={[file1]} onFileRemove={onFileRemove}>
+        <DropzoneAcceptedFiles />
+      </DropzoneRoot>,
+    );
+    await userEvent.click(
+      document.querySelector('[data-slot="dropzone-item-remove"]')!,
+    );
+    expect(onFileRemove).toHaveBeenCalledWith(0, "accepted");
+  });
+
+  it("calls onFilesChange with empty array after removing last file", async () => {
+    const onFilesChange = vi.fn();
+    render(
+      <DropzoneRoot files={[file1]} onFilesChange={onFilesChange}>
+        <DropzoneAcceptedFiles />
+      </DropzoneRoot>,
+    );
+    await userEvent.click(
+      document.querySelector('[data-slot="dropzone-item-remove"]')!,
+    );
+    expect(onFilesChange).toHaveBeenCalledWith([]);
+  });
+
+  it("renders custom file via renderFile prop", () => {
+    render(
+      <DropzoneRoot files={[file1]}>
+        <DropzoneAcceptedFiles
+          renderFile={(f) => <div data-testid="custom-file">{f.name}</div>}
+        />
+      </DropzoneRoot>,
+    );
+    expect(screen.getByTestId("custom-file")).toBeInTheDocument();
+    expect(screen.getByText("file1.pdf")).toBeInTheDocument();
+  });
+});
+
+// ─── Composite ───────────────────────────────────────────────────────────────
+
+describe("Dropzone composite", () => {
+  it("renders without crash", () => {
+    render(<Dropzone />);
+  });
+
+  it("renders trigger with data-slot dropzone-trigger", () => {
+    render(<Dropzone />);
+    expect(
+      document.querySelector('[data-slot="dropzone-trigger"]'),
+    ).toBeInTheDocument();
+  });
+
+  it("shows default label text", () => {
+    render(<Dropzone />);
+    expect(
+      screen.getByText(
+        "Arrastra y suelta archivos aquí o haz clic para seleccionar",
+      ),
+    ).toBeInTheDocument();
+  });
+
+  it("shows custom label text", () => {
+    render(<Dropzone label="Drop files here" />);
+    expect(screen.getByText("Drop files here")).toBeInTheDocument();
+  });
+
+  it("shows max file size in MB", () => {
+    render(<Dropzone maxFileSize={10 * 1024 * 1024} />);
+    expect(screen.getByText("Tamaño máximo: 10MB")).toBeInTheDocument();
+  });
+
+  it("shows allowed extensions when provided", () => {
+    render(<Dropzone allowedExtensions={["image/png", "image/jpeg"]} />);
+    expect(screen.getByText(/Tipos permitidos/)).toBeInTheDocument();
+  });
+
+  it("does not show rejected section when showRejected is false", () => {
+    render(<Dropzone showRejected={false} />);
+    // No rejected items in DOM since showRejected=false (default)
+    expect(
+      document.querySelectorAll('[data-slot="dropzone-item"]'),
+    ).toHaveLength(0);
+  });
+
+  it("applies classNames.trigger to trigger element", () => {
+    render(<Dropzone classNames={{ trigger: "custom-trigger-class" }} />);
+    expect(
+      document.querySelector('[data-slot="dropzone-trigger"]'),
+    ).toHaveClass("custom-trigger-class");
+  });
+
+  it("renders accepted files when files prop provided", () => {
+    const file = new File(["x"], "photo.png", { type: "image/png" });
+    render(<Dropzone files={[file]} />);
+    expect(screen.getByText("photo.png")).toBeInTheDocument();
+  });
+
+  it("shows rejected files section when showRejected is true", () => {
+    render(<Dropzone showRejected />);
+    // DropzoneRejectedFiles mounts — no rejected files yet, renders null inside
+    expect(
+      document.querySelector('[data-slot="dropzone-trigger"]'),
+    ).toBeInTheDocument();
+  });
+});
+
+// ─── DropzoneTrigger onClick ──────────────────────────────────────────────────
+
+describe("DropzoneTrigger custom onClick", () => {
+  it("calls custom onClick when trigger is clicked", async () => {
+    const onClick = vi.fn();
+    render(
+      <DropzoneRoot>
+        <DropzoneTrigger onClick={onClick}>
+          <span>Click me</span>
+        </DropzoneTrigger>
+      </DropzoneRoot>,
+    );
+
+    await userEvent.click(
+      document.querySelector('[data-slot="dropzone-trigger"]')!,
+    );
+
+    expect(onClick).toHaveBeenCalledOnce();
+  });
+});
+
+// ─── DropzoneRejectedFiles ────────────────────────────────────────────────────
+
+describe("DropzoneRejectedFiles", () => {
+  it("renders null when no rejected files", () => {
+    const { container } = render(
+      <DropzoneRoot>
+        <DropzoneRejectedFiles />
+      </DropzoneRoot>,
+    );
+    expect(container.querySelector('[data-slot="dropzone-item"]')).toBeNull();
+  });
+
+  it("renders custom file via renderFile prop when files exist", () => {
+    const file = new File(["x"], "bad.txt", { type: "text/plain" });
+    // Inject rejected files via the accepted slot to test the renderFile branch
+    // (DropzoneRejectedFiles uses same DropzoneFilesList as DropzoneAcceptedFiles)
+    render(
+      <DropzoneRoot files={[file]}>
+        <DropzoneAcceptedFiles
+          renderFile={(f, remove) => (
+            <div data-testid="rendered-file">
+              {f.name}
+              <button type="button" onClick={remove}>
+                Remove
+              </button>
+            </div>
+          )}
+        />
+      </DropzoneRoot>,
+    );
+    expect(screen.getByTestId("rendered-file")).toBeInTheDocument();
+    expect(screen.getByText("bad.txt")).toBeInTheDocument();
+  });
+
+  it("renderFile remove callback fires onRemove", async () => {
+    const onFileRemove = vi.fn();
+    const file = new File(["x"], "file.txt", { type: "text/plain" });
+    render(
+      <DropzoneRoot files={[file]} onFileRemove={onFileRemove}>
+        <DropzoneAcceptedFiles
+          renderFile={(f, remove) => (
+            <button type="button" data-testid="remove-btn" onClick={remove}>
+              Remove {f.name}
+            </button>
+          )}
+        />
+      </DropzoneRoot>,
+    );
+    await userEvent.click(screen.getByTestId("remove-btn"));
+    expect(onFileRemove).toHaveBeenCalledWith(0, "accepted");
+  });
+});