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

package/src/components/dropzone/dropzone.tsx

@@ -1,91 +1,363 @@
-import { LucideIcon, UploadCloud } from "lucide-react";
-import { ComponentPropsWithoutRef, useMemo } from "react";
-import { cn } from "../../lib";
-import { FileTypeValue } from "./file-types";
+import { useRender } from "@base-ui/react/use-render";
+import { LucideIcon, UploadCloud, X } from "lucide-react";
 import {
-  UploadAcceptedFiles,
-  UploadContent,
-  UploadRejectedFiles,
-  UploadRoot,
-  UploadTrigger,
-} from "./upload-primitives";
-import { FileError } from "./use-dropzone";
+  type ComponentPropsWithoutRef,
+  createContext,
+  type ReactNode,
+  useContext,
+  useState,
+} from "react";
+import type { FileRejection } from "react-dropzone";
+import { useDropzone as useRDZ } from "react-dropzone";
+import { cn } from "../../lib";
+import { Button } from "../button";
+import type { FileTypeValue } from "./file-types";
+
+// --- Types ---
+
+export type FileErrorCode =
+  | "INVALID_EXTENSION"
+  | "FILE_TOO_LARGE"
+  | "MAX_FILES_EXCEEDED";
+
+export type FileError = {
+  file: File;
+  errorMessage: string;
+  errorCode: FileErrorCode;
+};
+
+// --- Helpers ---
+
+const RDZ_CODE_MAP: Record<string, FileErrorCode> = {
+  "file-too-large": "FILE_TOO_LARGE",
+  "too-many-files": "MAX_FILES_EXCEEDED",
+  "file-invalid-type": "INVALID_EXTENSION",
+};
+
+function mapRejections(rejections: FileRejection[]): [File[], FileError[]] {
+  const files: File[] = [];
+  const errors: FileError[] = [];
+  for (const { file, errors: rdzErrors } of rejections) {
+    files.push(file);
+    for (const err of rdzErrors) {
+      errors.push({
+        file,
+        errorMessage: err.message,
+        errorCode: RDZ_CODE_MAP[err.code] ?? "INVALID_EXTENSION",
+      });
+    }
+  }
+  return [files, errors];
+}
+
+function mimeToLabel(mime: string): string {
+  const sub = mime.split("/")[1] ?? mime;
+  const withoutPlus = sub.split("+")[0];
+  const parts = withoutPlus.split(".");
+  return parts[parts.length - 1] ?? withoutPlus;
+}
+
+// --- Context ---
+
+type DropzoneCtx = {
+  acceptedFiles: File[];
+  rejectedFiles: File[];
+  removeAccepted: (index: number) => void;
+  removeRejected: (index: number) => void;
+  isDragActive: boolean;
+  getRootProps: ReturnType<typeof useRDZ>["getRootProps"];
+  getInputProps: ReturnType<typeof useRDZ>["getInputProps"];
+  open: () => void;
+};
+
+const DropzoneContext = createContext<DropzoneCtx | null>(null);
+
+function useDropzoneCtx(): DropzoneCtx {
+  const ctx = useContext(DropzoneContext);
+  if (!ctx) throw new Error("useDropzoneCtx must be used within DropzoneRoot");
+  return ctx;
+}
+
+// --- DropzoneRoot ---
+
+export type DropzoneRootProps = {
+  onFileAdd?: (files: File[]) => void;
+  onFileRemove?: (index: number, type: "accepted" | "rejected") => void;
+  onFilesChange?: (files: File[]) => void;
+  files?: File[];
+  maxFiles?: number;
+  allowedExtensions?: FileTypeValue[];
+  maxFileSize?: number;
+  multiple?: boolean;
+  onError?: (errors: FileError[]) => void;
+  children?: ReactNode;
+} & Omit<ComponentPropsWithoutRef<"div">, "onDrop" | "onError">;
+
+export function DropzoneRoot({
+  onFileAdd,
+  onFileRemove,
+  onFilesChange,
+  files: controlledFiles,
+  maxFiles = 1,
+  allowedExtensions = [],
+  maxFileSize = 5 * 1024 * 1024,
+  multiple,
+  onError,
+  children,
+  className,
+  ...props
+}: DropzoneRootProps) {
+  const isControlled = controlledFiles !== undefined;
+  const [internalFiles, setInternalFiles] = useState<File[]>([]);
+  const [rejectedFiles, setRejectedFiles] = useState<File[]>([]);
+  const acceptedFiles = isControlled ? controlledFiles : internalFiles;
+
+  const updateFiles = (next: File[]) => {
+    if (!isControlled) setInternalFiles(next);
+    onFilesChange?.(next);
+  };
+
+  const accept =
+    allowedExtensions.length > 0
+      ? Object.fromEntries(allowedExtensions.map((mime) => [mime, []]))
+      : undefined;
+
+  const { getRootProps, getInputProps, isDragActive, open } = useRDZ({
+    onDrop(newAccepted, newRejections) {
+      const [newRejected, fileErrors] = mapRejections(newRejections);
+      updateFiles([...acceptedFiles, ...newAccepted]);
+      setRejectedFiles((prev) => [...prev, ...newRejected]);
+      onFileAdd?.(newAccepted);
+      if (fileErrors.length > 0) onError?.(fileErrors);
+    },
+    accept,
+    maxFiles,
+    maxSize: maxFileSize,
+    multiple: multiple ?? maxFiles > 1,
+    noClick: true,
+  });
+
+  const removeAccepted = (index: number) => {
+    updateFiles(acceptedFiles.filter((_, i) => i !== index));
+    onFileRemove?.(index, "accepted");
+  };
+
+  const removeRejected = (index: number) => {
+    setRejectedFiles((prev) => prev.filter((_, i) => i !== index));
+    onFileRemove?.(index, "rejected");
+  };
+
+  return (
+    <DropzoneContext.Provider
+      value={{
+        acceptedFiles,
+        rejectedFiles,
+        removeAccepted,
+        removeRejected,
+        isDragActive,
+        getRootProps,
+        getInputProps,
+        open,
+      }}
+    >
+      <div className={cn("w-full", className)} data-slot="dropzone" {...props}>
+        {children}
+      </div>
+    </DropzoneContext.Provider>
+  );
+}
+
+// --- DropzoneTrigger ---
+
+export type DropzoneTriggerProps = useRender.ComponentProps<"div">;
+
+export function DropzoneTrigger({
+  render,
+  className,
+  onClick,
+  children,
+  ...props
+}: DropzoneTriggerProps) {
+  const { getRootProps, getInputProps, isDragActive, open } = useDropzoneCtx();
+
+  const element = useRender({
+    defaultTagName: "div",
+    render,
+    props: {
+      ...(getRootProps() as ComponentPropsWithoutRef<"div">),
+      ...props,
+      className,
+      "data-slot": "dropzone-trigger",
+      "data-drag-active": isDragActive || undefined,
+      onClick: (event: React.MouseEvent<HTMLDivElement>) => {
+        open();
+        onClick?.(event);
+      },
+      children: render ? undefined : children,
+    },
+  });
+
+  return (
+    <>
+      {element}
+      <input
+        {...getInputProps()}
+        className="hidden"
+        data-slot="dropzone-input"
+      />
+    </>
+  );
+}
+
+// --- DropzoneContent ---
+
+export function DropzoneContent({
+  className,
+  ...props
+}: ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      className={cn("mt-2 space-y-2", className)}
+      data-slot="dropzone-content"
+      {...props}
+    />
+  );
+}
+
+// --- DropzoneItem ---
+
+export type DropzoneItemProps = ComponentPropsWithoutRef<"div"> & {
+  file: File;
+  onRemove: () => void;
+  renderIcon?: (file: File) => ReactNode;
+};
+
+export function DropzoneItem({
+  file,
+  onRemove,
+  className,
+  renderIcon,
+  ...props
+}: DropzoneItemProps) {
+  return (
+    <div
+      className={cn("flex items-center gap-2 mb-2", className)}
+      data-slot="dropzone-item"
+      {...props}
+    >
+      {renderIcon?.(file)}
+      {file.name}
+      <Button
+        variant="ghost"
+        size="icon"
+        type="button"
+        className="h-6 w-6"
+        onClick={onRemove}
+        data-slot="dropzone-item-remove"
+      >
+        <X />
+      </Button>
+    </div>
+  );
+}
+
+// --- DropzoneFilesList (internal) ---
+
+type DropzoneFilesListProps = {
+  files: File[];
+  onRemove: (index: number) => void;
+  renderFile?: (file: File, remove: () => void) => ReactNode;
+};
+
+function DropzoneFilesList({
+  files,
+  onRemove,
+  renderFile,
+}: DropzoneFilesListProps) {
+  if (files.length === 0) return null;
+  return (
+    <div className="mt-2 space-y-2">
+      {files.map((file, index) =>
+        renderFile ? (
+          // biome-ignore lint/suspicious/noArrayIndexKey: file name not unique
+          <div key={index}>{renderFile(file, () => onRemove(index))}</div>
+        ) : (
+          <DropzoneItem
+            // biome-ignore lint/suspicious/noArrayIndexKey: file name not unique
+            key={index}
+            file={file}
+            onRemove={() => onRemove(index)}
+          />
+        ),
+      )}
+    </div>
+  );
+}
+
+// --- DropzoneAcceptedFiles / DropzoneRejectedFiles ---
+
+export type DropzoneFilesProps = {
+  renderFile?: (file: File, remove: () => void) => ReactNode;
+};
+
+export function DropzoneAcceptedFiles(props: DropzoneFilesProps) {
+  const { acceptedFiles, removeAccepted } = useDropzoneCtx();
+  return (
+    <DropzoneFilesList
+      files={acceptedFiles}
+      onRemove={removeAccepted}
+      {...props}
+    />
+  );
+}
+
+export function DropzoneRejectedFiles(props: DropzoneFilesProps) {
+  const { rejectedFiles, removeRejected } = useDropzoneCtx();
+  return (
+    <DropzoneFilesList
+      files={rejectedFiles}
+      onRemove={removeRejected}
+      {...props}
+    />
+  );
+}
+
+// --- Dropzone (composite) ---
 
 export type DropzoneProps = {
-  /**
-   * Función que se ejecuta cuando se agregan archivos
-   */
   onFileAdd?: (files: File[]) => void;
-  /**
-   * Función que se ejecuta cuando se elimina un archivo
-   */
   onFileRemove?: (index: number, type: "accepted" | "rejected") => void;
-  /**
-   * Evento que captura cambios en lista de archivos
-   * @default () => {}
-   */
-  onChangeFiles?: (files: File[]) => void;
-  /**
-   * Lista de archivos
-   * @default []
-   */
+  onFilesChange?: (files: File[]) => void;
   files?: File[];
-  /**
-   * Número máximo de archivos permitidos
-   * @default 1
-   */
   maxFiles?: number;
-  /**
-   * Lista de extensiones permitidas (e.j. ["image/jpeg", "image/png"])
-   * @default []
-   */
   allowedExtensions?: FileTypeValue[];
-  /**
-   * Tamaño máximo de archivo en bytes
-   * @default 5MB
-   */
   maxFileSize?: number;
-  /**
-   * Permite seleccionar múltiples archivos
-   */
   multiple?: boolean;
-  /**
-   * Función para renderizar cada archivo aceptado
-   */
-  renderAcceptedFile?: (file: File, removeItem: () => void) => React.ReactNode;
-  /**
-   * Función para renderizar cada archivo rechazado
-   */
-  renderRejectedFile?: (file: File, removeItem: () => void) => React.ReactNode;
-  /**
-   * Mostrar archivos rechazados
-   * @default false
-   */
+  renderAcceptedFile?: (file: File, removeItem: () => void) => ReactNode;
+  renderRejectedFile?: (file: File, removeItem: () => void) => ReactNode;
   showRejected?: boolean;
-  /**
-   * Clase CSS para el contenedor
-   */
   className?: string;
-  /**
-   * Icono personalizado para el dropzone
-   * @default UploadCloud
-   */
   icon?: LucideIcon;
-  /**
-   * Tamaño del icono
-   * @default 40
-   */
   iconSize?: number;
-  /**
-   * Función que se ejecuta cuando se rechazan archivos
-   */
   onError?: (fileErrors: FileError[]) => void;
+  label?: string;
+  /** Styles applied to each internal slot. */
+  classNames?: {
+    /** Dashed drop area that contains the icon and label. */
+    trigger?: string;
+    /** Upload icon rendered inside the trigger. */
+    icon?: string;
+    /** Text container below the icon (label + meta lines). */
+    label?: string;
+    /** Wrapper around the accepted/rejected file lists. */
+    content?: string;
+  };
 } & Omit<ComponentPropsWithoutRef<"div">, "onDrop" | "onError">;
 
-export const Dropzone = ({
+export function Dropzone({
   onFileAdd,
   onFileRemove,
-  onChangeFiles = () => {},
+  onFilesChange,
   files,
   maxFiles = 1,
   allowedExtensions = [],
@@ -95,60 +367,66 @@ export const Dropzone = ({
   renderRejectedFile,
   showRejected = false,
   className,
+  classNames,
   icon: Icon = UploadCloud,
   iconSize = 40,
   onError,
+  label = "Arrastra y suelta archivos aquí o haz clic para seleccionar",
   ...props
-}: DropzoneProps) => {
-  const allowedLabels = useMemo(() => {
-    return allowedExtensions.map((ext) => ext.split("/")?.[1]).join(", ");
-  }, [allowedExtensions]);
+}: DropzoneProps) {
+  const allowedLabels = allowedExtensions.map(mimeToLabel).join(", ");
 
   return (
-    <UploadRoot
+    <DropzoneRoot
       onFileAdd={onFileAdd}
       onFileRemove={onFileRemove}
       files={files}
-      onChangeFiles={onChangeFiles}
+      onFilesChange={onFilesChange}
       maxFiles={maxFiles}
       allowedExtensions={allowedExtensions}
       maxFileSize={maxFileSize}
-      multiple={multiple ? true : undefined}
+      multiple={multiple}
       className={cn("w-full", className)}
       onError={onError}
       {...props}
     >
-      <UploadTrigger asChild>
-        <div
-          className={cn(
-            "w-full min-h-[150px] border-2 border-dashed rounded-lg border-muted p-4",
-            "hover:bg-muted/50 data-[drag-active=true]:border-primary data-[drag-active=true]:bg-primary/10",
-            "transition-colors flex flex-col items-center justify-center gap-4",
-            "pointer-events-auto",
-          )}
-        >
-          <Icon
-            className="text-muted-foreground pointer-events-none"
-            style={{ width: iconSize, height: iconSize }}
-          />
-          <div className="text-center text-muted-foreground pointer-events-none">
-            <p>Arrastra y suelta archivos aquí o haz clic para seleccionar</p>
-            {allowedExtensions.length > 0 && (
-              <p className="text-sm">Tipos permitidos: {allowedLabels}</p>
+      <DropzoneTrigger
+        render={
+          <div
+            className={cn(
+              "w-full min-h-[150px] border-2 border-dashed rounded-lg border-muted p-4",
+              "hover:bg-muted/50 data-[drag-active]:border-primary data-[drag-active]:bg-primary/10",
+              "transition-colors flex flex-col items-center justify-center gap-4 cursor-pointer",
+              classNames?.trigger,
             )}
-            <p className="text-sm">
-              Tamaño máximo: {Math.floor(maxFileSize / 1024 / 1024)}MB
-            </p>
+          >
+            <Icon
+              className={cn("text-muted-foreground", classNames?.icon)}
+              style={{ width: iconSize, height: iconSize }}
+            />
+            <div
+              className={cn(
+                "text-center text-muted-foreground",
+                classNames?.label,
+              )}
+            >
+              <p>{label}</p>
+              {allowedExtensions.length > 0 && (
+                <p className="text-sm">Tipos permitidos: {allowedLabels}</p>
+              )}
+              <p className="text-sm">
+                Tamaño máximo: {Math.floor(maxFileSize / 1024 / 1024)}MB
+              </p>
+            </div>
           </div>
-        </div>
-      </UploadTrigger>
-
-      <UploadContent>
-        <UploadAcceptedFiles renderFile={renderAcceptedFile} />
+        }
+      />
+      <DropzoneContent className={classNames?.content}>
+        <DropzoneAcceptedFiles renderFile={renderAcceptedFile} />
         {showRejected && (
-          <UploadRejectedFiles renderFile={renderRejectedFile} />
+          <DropzoneRejectedFiles renderFile={renderRejectedFile} />
         )}
-      </UploadContent>
-    </UploadRoot>
+      </DropzoneContent>
+    </DropzoneRoot>
   );
-};
+}

package/src/components/dropzone/index.ts

@@ -1,3 +1,2 @@
 export * from "./dropzone";
 export * from "./file-types";
-export * from "./upload-primitives";

package/src/components/empty/empty.stories.tsx

@@ -0,0 +1,165 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { MessageSquareMore, SearchX, UploadCloud } from "lucide-react";
+import {
+  Button,
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyRoot,
+  EmptyTitle,
+  Stack,
+} from "../../components";
+
+/**
+ * Composite para estados vacíos: sin resultados, sin datos, sin permisos, etc.
+ * `Empty` es el composite principal — acepta `icon`, `title`, `description` y
+ * `action`. `iconVariant="icon"` muestra el ícono dentro de un chip muted
+ * (`size-8`); el default muestra el ícono suelto a `size-12`.
+ * `action` se renderiza dentro de `EmptyContent`; `children` escapa al root
+ * directamente, útil para layouts que no encajan en el wrapper centrado.
+ * Para composición manual usá los primitives: `EmptyRoot`, `EmptyHeader`,
+ * `EmptyMedia`, `EmptyTitle`, `EmptyDescription`, `EmptyContent`.
+ * Para estilar partes internas usá `classNames`.
+ */
+const meta: Meta<typeof Empty> = {
+  title: "Components/Empty",
+  component: Empty,
+  args: {
+    title: "No hay datos",
+  },
+  argTypes: {
+    classNames: { control: false },
+  },
+  tags: ["beta"],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Empty>;
+
+export const Default: Story = {};
+
+/**
+ * `className` estila el root. `classNames` expone los slots `header`, `media`,
+ * `title`, `description` y `content`.
+ */
+export const WithClassNames: Story = {
+  args: {
+    icon: <SearchX />,
+    iconVariant: "icon",
+    title: "Sin resultados",
+    description: "Probá con otros filtros.",
+    action: <Button size="sm">Limpiar</Button>,
+    classNames: {
+      title: "text-base",
+      description: "italic",
+      media: "bg-primary/10 text-primary",
+    },
+  },
+};
+
+export const WithDescription: Story = {
+  args: {
+    description: "Intentá buscar con otros filtros o revisá más tarde.",
+  },
+};
+
+/**
+ * `iconVariant="icon"` envuelve el ícono en un chip `size-8` con fondo muted.
+ * Ideal para estados vacíos compactos (tablas, paneles). El default muestra
+ * el ícono suelto a `size-12` para páginas completas o secciones hero.
+ */
+export const IconVariant: Story = {
+  args: {
+    icon: <SearchX />,
+    iconVariant: "icon",
+    title: "Sin resultados",
+    description: "No encontramos coincidencias para tu búsqueda.",
+  },
+};
+
+export const WithAction: Story = {
+  args: {
+    icon: <MessageSquareMore />,
+    title: "No tenés mensajes",
+    description: "Cuando recibas uno aparecerá acá.",
+    action: (
+      <Stack>
+        <Button variant="outline">Importar</Button>
+        <Button>Crear nuevo</Button>
+      </Stack>
+    ),
+  },
+};
+
+/**
+ * `icon={null}` suprime el media. Útil para estados vacíos en tablas o
+ * contextos donde el ícono añade ruido visual innecesario.
+ */
+export const NoIcon: Story = {
+  args: {
+    icon: null,
+    title: "Tabla vacía",
+    description: "Agregá una fila para empezar.",
+    action: <Button size="sm">Agregar fila</Button>,
+  },
+};
+
+/**
+ * `children` se renderiza fuera de `EmptyContent`, directamente en `EmptyRoot`.
+ * Permite añadir elementos que no deben quedar dentro del wrapper centrado —
+ * por ejemplo un link de texto o un componente con ancho propio.
+ */
+export const WithChildren: Story = {
+  render: () => (
+    <Empty
+      icon={<UploadCloud />}
+      title="Sin archivos"
+      description="Subí tu primer archivo para empezar."
+      action={<Button>Subir archivo</Button>}
+    >
+      <p className="text-xs text-muted-foreground">
+        Formatos soportados: PDF, PNG, JPG — máx. 10 MB
+      </p>
+    </Empty>
+  ),
+};
+
+/**
+ * Composición manual con primitives. Usala cuando necesitás reordenar partes,
+ * agregar slots extra, o construir layouts que el composite no cubre.
+ *
+ * ```tsx
+ * <EmptyRoot>
+ *   <EmptyHeader>
+ *     <EmptyMedia variant="icon"><Icon /></EmptyMedia>
+ *     <EmptyTitle>Título</EmptyTitle>
+ *     <EmptyDescription>Descripción</EmptyDescription>
+ *   </EmptyHeader>
+ *   <EmptyContent>
+ *     <Button>Acción</Button>
+ *   </EmptyContent>
+ * </EmptyRoot>
+ * ```
+ */
+export const Primitive: Story = {
+  render: () => (
+    <EmptyRoot>
+      <EmptyHeader>
+        <EmptyMedia variant="icon">
+          <SearchX />
+        </EmptyMedia>
+        <EmptyTitle>Sin resultados</EmptyTitle>
+        <EmptyDescription>
+          No encontramos nada que coincida. Probá con{" "}
+          <a href="#">otros filtros</a>.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button variant="outline">Limpiar filtros</Button>
+      </EmptyContent>
+    </EmptyRoot>
+  ),
+};