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

package/src/components/dropzone/dropzone.tsx

@@ -0,0 +1,434 @@
+"use client";
+
+import { useRender } from "@base-ui/react/use-render";
+import { LucideIcon, UploadCloud, X } from "lucide-react";
+import {
+  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 = {
+  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;
+  renderAcceptedFile?: (file: File, removeItem: () => void) => ReactNode;
+  renderRejectedFile?: (file: File, removeItem: () => void) => ReactNode;
+  showRejected?: boolean;
+  className?: string;
+  icon?: LucideIcon;
+  iconSize?: number;
+  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 function Dropzone({
+  onFileAdd,
+  onFileRemove,
+  onFilesChange,
+  files,
+  maxFiles = 1,
+  allowedExtensions = [],
+  maxFileSize = 5 * 1024 * 1024,
+  multiple,
+  renderAcceptedFile,
+  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 = allowedExtensions.map(mimeToLabel).join(", ");
+
+  return (
+    <DropzoneRoot
+      onFileAdd={onFileAdd}
+      onFileRemove={onFileRemove}
+      files={files}
+      onFilesChange={onFilesChange}
+      maxFiles={maxFiles}
+      allowedExtensions={allowedExtensions}
+      maxFileSize={maxFileSize}
+      multiple={multiple}
+      className={cn("w-full", className)}
+      onError={onError}
+      {...props}
+    >
+      <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,
+            )}
+          >
+            <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>
+        }
+      />
+      <DropzoneContent className={classNames?.content}>
+        <DropzoneAcceptedFiles renderFile={renderAcceptedFile} />
+        {showRejected && (
+          <DropzoneRejectedFiles renderFile={renderRejectedFile} />
+        )}
+      </DropzoneContent>
+    </DropzoneRoot>
+  );
+}

package/src/components/dropzone/file-types.ts

@@ -0,0 +1,64 @@
+export const FileType = {
+  // Imágenes
+  JPEG: "image/jpeg",
+  JPG: "image/jpg",
+  PNG: "image/png",
+  GIF: "image/gif",
+  WEBP: "image/webp",
+  SVG: "image/svg+xml",
+
+  // Documentos
+  PDF: "application/pdf",
+  DOC: "application/msword",
+  DOCX: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+  XLS: "application/vnd.ms-excel",
+  XLSX: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+  PPT: "application/vnd.ms-powerpoint",
+  PPTX: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+
+  // Archivos de texto
+  TXT: "text/plain",
+  CSV: "text/csv",
+
+  // Archivos comprimidos
+  ZIP: "application/zip",
+  RAR: "application/x-rar-compressed",
+
+  // Audio
+  MP3: "audio/mpeg",
+  WAV: "audio/wav",
+
+  // Video
+  MP4: "video/mp4",
+  WEBM: "video/webm",
+
+  // Otros
+  JSON: "application/json",
+  XML: "application/xml",
+} as const;
+
+export type FileTypeValue = (typeof FileType)[keyof typeof FileType];
+
+// Grupos comunes de tipos de archivo
+export const FileTypeGroups: Record<string, FileTypeValue[]> = {
+  IMAGES: [
+    FileType.JPEG,
+    FileType.JPG,
+    FileType.PNG,
+    FileType.GIF,
+    FileType.WEBP,
+    FileType.SVG,
+  ],
+  DOCUMENTS: [
+    FileType.PDF,
+    FileType.DOC,
+    FileType.DOCX,
+    FileType.XLS,
+    FileType.XLSX,
+    FileType.PPT,
+    FileType.PPTX,
+  ],
+  COMPRESSED: [FileType.ZIP, FileType.RAR],
+  AUDIO: [FileType.MP3, FileType.WAV],
+  VIDEO: [FileType.MP4, FileType.WEBM],
+} as const;

package/src/components/dropzone/index.ts

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

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

@@ -0,0 +1,164 @@
+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 },
+  },
+};
+
+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>
+  ),
+};