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

package/src/components/dropzone/upload-primitives.tsx

@@ -0,0 +1,310 @@
+import { Slot } from "@radix-ui/react-slot";
+import { useControllableState } from "@radix-ui/react-use-controllable-state";
+import { X } from "lucide-react";
+import React, {
+  ComponentPropsWithoutRef,
+  createContext,
+  ReactNode,
+  useContext,
+  useRef,
+  useState,
+} from "react";
+import { cn } from "../../lib";
+import { Button } from "../button";
+import { FileError, useDropzone } from "./use-dropzone";
+
+type UploadContextType = {
+  files: File[];
+  rejectedFiles: File[];
+  handleFileAdd: (files: File[]) => void;
+  handleFileRemove: (index: number, type: "accepted" | "rejected") => void;
+  inputProps: React.ComponentPropsWithoutRef<"input">;
+  isDragActive: boolean;
+  dropzoneProps: {
+    onDragOver: React.DragEventHandler<HTMLDivElement>;
+    onDragEnter: React.DragEventHandler<HTMLDivElement>;
+    onDragLeave: React.DragEventHandler<HTMLDivElement>;
+    onDrop: React.DragEventHandler<HTMLDivElement>;
+  };
+};
+
+const UploadContext = createContext<UploadContextType | null>(null);
+
+const useUploadContext = () => {
+  const context = useContext(UploadContext);
+  if (!context) {
+    throw new Error(
+      "useUploadContext must be used within a UploadContextProvider",
+    );
+  }
+  return context;
+};
+
+type UploadRootProps = {
+  onFileAdd?: (files: File[]) => void;
+  onFileRemove?: (index: number, type: "accepted" | "rejected") => void;
+  onChangeFiles?: (files: File[]) => void;
+  files?: File[];
+  maxFiles?: number;
+  allowedExtensions?: string[];
+  maxFileSize?: number;
+  multiple?: true;
+  className?: string;
+  children?: ReactNode;
+  onError?: (fileErrors: FileError[]) => void;
+};
+
+const UploadRoot = ({
+  onFileAdd,
+  onFileRemove,
+  onChangeFiles,
+  files: prop,
+  maxFiles = 1,
+  allowedExtensions = [],
+  maxFileSize = 5 * 1024 * 1024, // 5MB
+  multiple,
+  children,
+  onError,
+  ...props
+}: UploadRootProps) => {
+  const [files = [], setFiles] = useControllableState<File[]>({
+    defaultProp: [],
+    prop,
+    onChange: onChangeFiles,
+  });
+  const [rejectedFiles, setRejectedFiles] = useState<File[]>([]);
+  const { isDragActive, validateFiles, dropzoneProps } = useDropzone({
+    onDrop: (acceptedFiles, rejectedFiles) => {
+      setFiles([...files, ...acceptedFiles]);
+      setRejectedFiles((prevRejectedFiles) => [
+        ...prevRejectedFiles,
+        ...rejectedFiles,
+      ]);
+      onFileAdd?.(acceptedFiles);
+    },
+    allowedExtensions,
+    maxFileSize,
+    maxFiles,
+    onError,
+  });
+
+  const handleFileAdd = (newFiles: File[]) => {
+    const [rejected = [], accepted = []] = validateFiles(newFiles);
+
+    // Caso 1: Single file upload (maxFiles === 1 o !multiple)
+    if (maxFiles === 1 || !multiple) {
+      setFiles(accepted.slice(0, 1));
+      setRejectedFiles([...rejected, ...accepted.slice(1)]);
+      onFileAdd?.(accepted.slice(0, 1));
+      return;
+    }
+
+    // Caso 2: Multiple files upload
+    const availableSlots = maxFiles - files.length;
+    if (availableSlots <= 0) {
+      // No hay slots disponibles, todos van a rejected
+      setRejectedFiles((prevRejected) => [...prevRejected, ...accepted]);
+      onFileAdd?.([]);
+      return;
+    }
+
+    // Dividir los archivos aceptados entre los que caben y los que no
+    const acceptedFiles = accepted.slice(0, availableSlots);
+    const overflowFiles = accepted.slice(availableSlots);
+
+    // Actualizar estados
+    setFiles([...files, ...acceptedFiles]);
+    setRejectedFiles((prevRejected) => [
+      ...prevRejected,
+      ...rejected,
+      ...overflowFiles,
+    ]);
+
+    onFileAdd?.(acceptedFiles);
+  };
+
+  const handleFileRemove = (index: number, type: "accepted" | "rejected") => {
+    if (type === "accepted") {
+      setFiles(files.filter((_, i) => i !== index));
+    } else {
+      setRejectedFiles((prevRejectedFiles) =>
+        prevRejectedFiles.filter((_, i) => i !== index),
+      );
+    }
+    onFileRemove?.(index, type);
+  };
+
+  return (
+    <UploadContext.Provider
+      value={{
+        files,
+        rejectedFiles,
+        handleFileAdd,
+        handleFileRemove,
+        inputProps: {
+          accept: allowedExtensions.join(","),
+          multiple: multiple,
+        },
+        isDragActive,
+        dropzoneProps,
+      }}
+    >
+      <div {...props} data-slot="upload">
+        {children}
+      </div>
+    </UploadContext.Provider>
+  );
+};
+
+type UploadTriggerProps = {
+  asChild?: boolean;
+} & ComponentPropsWithoutRef<"button">;
+
+const UploadTrigger = ({ asChild, ...props }: UploadTriggerProps) => {
+  const { handleFileAdd, inputProps, dropzoneProps, isDragActive } =
+    useUploadContext();
+  const inputRef = useRef<HTMLInputElement>(null);
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <>
+      <Comp
+        data-slot="upload-trigger"
+        {...props}
+        {...(dropzoneProps as any)}
+        data-drag-active={isDragActive || false}
+        onClick={(e) => {
+          props.onClick?.(e);
+          inputRef.current?.click();
+        }}
+      />
+      <input
+        type="file"
+        className="hidden"
+        data-slot="upload-input"
+        {...inputProps}
+        ref={inputRef}
+        onChange={(e) => handleFileAdd(Array.from(e.target.files || []))}
+      />
+    </>
+  );
+};
+
+type UploadContentProps = ComponentPropsWithoutRef<"div"> & {
+  renderRejectedFile?: (file: File) => ReactNode;
+};
+
+const UploadContent = ({ className, ...props }: UploadContentProps) => {
+  return (
+    <div
+      {...props}
+      className={cn("mt-2 space-y-2", className)}
+      data-slot="upload-content"
+    />
+  );
+};
+
+type UploadFilesListProps = {
+  files: File[];
+  handleFileRemove: (index: number, type: "accepted" | "rejected") => void;
+  fileType: "accepted" | "rejected";
+  children?: ReactNode;
+  renderFile?: (file: File, removeItem: () => void) => ReactNode;
+};
+
+const UploadFilesList = ({
+  files,
+  handleFileRemove,
+  fileType,
+  children,
+  renderFile,
+  ...props
+}: UploadFilesListProps) => {
+  if (files.length === 0) return null;
+
+  return (
+    <div className="mt-2 space-y-2" {...props} data-slot="upload-files-list">
+      {children}
+      {files.map((file, index) => {
+        if (renderFile) {
+          return renderFile(file, () => handleFileRemove(index, fileType));
+        }
+        return (
+          <UploadItem
+            key={file.name}
+            file={file}
+            onRemove={() => handleFileRemove(index, fileType)}
+          />
+        );
+      })}
+    </div>
+  );
+};
+
+type UploadFilesProps = Omit<
+  UploadFilesListProps,
+  "fileType" | "handleFileRemove" | "files"
+>;
+
+export const UploadAcceptedFiles = (props: UploadFilesProps) => {
+  const { files, handleFileRemove } = useUploadContext();
+
+  return (
+    <UploadFilesList
+      data-slot="upload-accepted-files"
+      files={files}
+      handleFileRemove={handleFileRemove}
+      fileType="accepted"
+      {...props}
+    />
+  );
+};
+
+export const UploadRejectedFiles = (props: UploadFilesProps) => {
+  const { rejectedFiles, handleFileRemove } = useUploadContext();
+
+  return (
+    <UploadFilesList
+      data-slot="upload-rejected-files"
+      files={rejectedFiles}
+      handleFileRemove={handleFileRemove}
+      fileType="rejected"
+      {...props}
+    />
+  );
+};
+
+type UploadItemProps = ComponentPropsWithoutRef<"div"> & {
+  file: File;
+  onRemove: () => void;
+  renderIcon?: (file: File) => ReactNode;
+};
+
+const UploadItem = ({
+  file,
+  onRemove,
+  className,
+  renderIcon,
+  ...props
+}: UploadItemProps) => (
+  <div
+    className={cn("flex items-center gap-2 mb-2", className)}
+    {...props}
+    data-slot="upload-item"
+  >
+    {renderIcon?.(file)}
+    {file.name}
+    <Button
+      variant="ghost"
+      size="icon"
+      type="button"
+      className="h-6 w-6"
+      onClick={onRemove}
+      data-slot="upload-item-remove"
+    >
+      <X data-slot="upload-item-remove-icon" />
+    </Button>
+  </div>
+);
+
+export { UploadContent, UploadItem, UploadRoot, UploadTrigger };

package/src/components/dropzone/use-dropzone.ts

@@ -0,0 +1,122 @@
+import { useCallback, useState } from "react";
+
+export type FileErrorCode =
+  | "INVALID_EXTENSION"
+  | "FILE_TOO_LARGE"
+  | "MAX_FILES_EXCEEDED";
+
+export type FileError = {
+  file: File;
+  errorMessage: string;
+  errorCode: FileErrorCode;
+};
+
+type UseDropzoneProps = {
+  onDrop: (acceptedFiles: File[], rejectedFiles: File[]) => void;
+  onError?: (fileErrors: FileError[]) => void;
+  allowedExtensions?: string[];
+  maxFileSize?: number;
+  maxFiles?: number;
+};
+
+export const useDropzone = ({
+  onDrop,
+  onError,
+  allowedExtensions = [],
+  maxFileSize = 5 * 1024 * 1024,
+  maxFiles = Infinity,
+}: UseDropzoneProps) => {
+  const [isDragActive, setIsDragActive] = useState(false);
+
+  const handleDragOver = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+  }, []);
+
+  const handleDragEnter = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(true);
+  }, []);
+
+  const handleDragLeave = useCallback((e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setIsDragActive(false);
+  }, []);
+
+  const validateFiles = (files: File[]): [File[], File[], FileError[]] => {
+    const [rejected = [], accepted = [], fileErrors = []] = files.reduce(
+      (
+        [rejected, accepted, fileErrors]: [File[], File[], FileError[]],
+        file,
+      ) => {
+        if (
+          allowedExtensions.length > 0 &&
+          !allowedExtensions.includes(file.type)
+        ) {
+          rejected.push(file);
+          fileErrors.push({
+            file,
+            errorMessage: "Extensión no permitida",
+            errorCode: "INVALID_EXTENSION",
+          });
+          return [rejected, accepted, fileErrors];
+        }
+        if (file.size > maxFileSize) {
+          rejected.push(file);
+          fileErrors.push({
+            file,
+            errorMessage: "Archivo demasiado grande",
+            errorCode: "FILE_TOO_LARGE",
+          });
+          return [rejected, accepted, fileErrors];
+        }
+        if (maxFiles && maxFiles < accepted.length + 1) {
+          rejected.push(file);
+          fileErrors.push({
+            file,
+            errorMessage: "Límite de archivos excedido",
+            errorCode: "MAX_FILES_EXCEEDED",
+          });
+          return [rejected, accepted, fileErrors];
+        }
+        accepted.push(file);
+        return [rejected, accepted, fileErrors];
+      },
+      [[], [], []],
+    );
+
+    // Ejecutar onError si hay errores y el callback está definido
+    if (fileErrors.length > 0 && onError) {
+      onError(fileErrors);
+    }
+
+    return [rejected, accepted, fileErrors];
+  };
+
+  const handleDrop = useCallback(
+    (e: React.DragEvent<HTMLDivElement>) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setIsDragActive(false);
+
+      const newFiles = Array.from(e.dataTransfer.files);
+      const [rejected = [], accepted = []] = validateFiles(newFiles);
+
+      onDrop(accepted, rejected);
+    },
+    [allowedExtensions, maxFileSize, maxFiles, onDrop, onError],
+  );
+
+  return {
+    isDragActive,
+    validateFiles,
+    dropzoneProps: {
+      onDragOver: handleDragOver,
+      onDragEnter: handleDragEnter,
+      onDragLeave: handleDragLeave,
+      onDrop: handleDrop,
+    },
+  };
+};

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

@@ -0,0 +1,56 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { MessageSquareMore } from "lucide-react";
+import { Button, EmptyState, Stack } from "../../components";
+
+/**
+ * El componente EmptyState proporciona una interfaz visual para mostrar cuando no hay datos o contenido disponible.
+ *
+ * ### Características principales
+ * - Soporte para íconos personalizados
+ * - Título y descripción configurables
+ * - Capacidad de agregar acciones mediante children
+ */
+const meta: Meta<typeof EmptyState> = {
+  title: "others/EmptyState",
+  component: EmptyState,
+  args: {
+    title: "No hay resultados",
+    description: "Intenta buscar algo diferente",
+  },
+  argTypes: {
+    icon: {
+      control: false,
+    },
+    children: {
+      control: false,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof EmptyState>;
+
+/**
+ * Ejemplo básico del EmptyState con título y descripción
+ */
+export const Default: Story = {};
+
+/**
+ * Ejemplo con ícono personalizado y botones de acción.
+ * Demuestra cómo agregar interactividad al estado vacío.
+ */
+export const Actions: Story = {
+  render: () => (
+    <EmptyState
+      icon={<MessageSquareMore className="h-12 w-12" />}
+      title="No tienes mensajes"
+      description="Intenta crear uno nuevo"
+    >
+      <Stack>
+        <Button variant="outline">Importar</Button>
+        <Button>Crear nuevo</Button>
+      </Stack>
+    </EmptyState>
+  ),
+};

package/src/components/empty-state/empty-state.tsx

@@ -0,0 +1,39 @@
+import { FolderSearch } from "lucide-react";
+import { ComponentPropsWithoutRef, ReactNode } from "react";
+import { cn } from "../../lib";
+import { Heading } from "../heading";
+
+type Props = ComponentPropsWithoutRef<"div"> & {
+  icon?: ReactNode;
+  title?: ReactNode;
+  description?: ReactNode;
+};
+
+export const EmptyState = ({
+  icon = <FolderSearch className="w-12 h-12" />,
+  title = "No hay resultados",
+  description,
+  className,
+  children,
+  ...props
+}: Props) => (
+  <div
+    className={cn("flex flex-col gap-2 justify-center items-center", className)}
+    data-slot="empty-state"
+    {...props}
+  >
+    <div className="text-muted-foreground" data-slot="empty-state-icon">
+      {icon}
+    </div>
+    <Heading className="empty:hidden" data-slot="empty-state-title">
+      {title}
+    </Heading>
+    <p
+      className="py-1 text-sm text-center text-muted-foreground empty:hidden"
+      data-slot="empty-state-description"
+    >
+      {description}
+    </p>
+    {children}
+  </div>
+);

package/src/components/empty-state/index.ts

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