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

package/src/components/divider/divider.stories.tsx

@@ -0,0 +1,70 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { CatIcon, Github, PencilIcon } from "lucide-react";
+import { Button, Divider } from "../../components";
+
+const meta: Meta<typeof Divider> = {
+  title: "others/Divider",
+  component: Divider,
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Horizontal: Story = {
+  args: {
+    orientation: "horizontal",
+  },
+  decorators: [
+    (Story) => (
+      <div className="w-20 m-auto rounded flex flex-col items-center gap-2">
+        <Button size="icon">
+          <PencilIcon />
+        </Button>
+        <Story />
+        <Button size="icon">
+          <CatIcon />
+        </Button>
+        <Story />
+        <Button size="icon">
+          <Github />
+        </Button>
+      </div>
+    ),
+  ],
+};
+
+/**
+ * Para poder desplegar el componente `Divider` de manera vertical, se debe utilizar el atributo `orientation` con el valor `vertical`
+ * y setear una altura en el contenedor
+ *
+ * ```tsx
+ * <div className="h-16"> // <- Altura fija
+ *   <PencilIcon />
+ *   <Divider orientation="vertical" /> // <- vertical
+ *   <CatIcon />
+ * </div>
+ * ```
+ */
+
+export const Vertical: Story = {
+  args: {
+    orientation: "vertical",
+  },
+  decorators: [
+    (Story) => (
+      <div className="h-16 w-36 m-auto rounded flex items-center gap-2">
+        <Button size="icon">
+          <PencilIcon />
+        </Button>
+        <Story />
+        <Button size="icon">
+          <CatIcon />
+        </Button>
+        <Story />
+        <Button size="icon">
+          <Github />
+        </Button>
+      </div>
+    ),
+  ],
+};

package/src/components/divider/divider.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Divider } from "../../components";
+
+describe("Divider component", () => {
+  const testId = "divider";
+  it("should render correctly", () => {
+    render(<Divider data-testid={testId} />);
+    const divider = screen.getByTestId(testId);
+
+    expect(divider).toBeInTheDocument();
+    expect(divider).toHaveAttribute("aria-orientation", "horizontal");
+  });
+
+  it("should accept vertical orientation", () => {
+    render(<Divider orientation="vertical" data-testid={testId} />);
+    const divider = screen.getByTestId(testId);
+
+    expect(divider).toBeInTheDocument();
+    expect(divider).toHaveAttribute("aria-orientation", "vertical");
+  });
+});

package/src/components/divider/divider.tsx

@@ -0,0 +1,23 @@
+import { HTMLProps } from "react";
+import { cn } from "../../lib";
+
+type Props = {
+  orientation?: "horizontal" | "vertical";
+} & HTMLProps<HTMLHRElement>;
+
+export const Divider = (props: Props) => {
+  const { className, orientation = "horizontal" } = props;
+
+  return (
+    <hr
+      {...props}
+      aria-orientation={orientation}
+      className={cn(
+        "shrink-0 bg-input",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className,
+      )}
+      data-slot="divider"
+    />
+  );
+};

package/src/components/divider/index.ts

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

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

@@ -0,0 +1,210 @@
+import { Meta, StoryObj } from "@storybook/react-vite";
+import { Camera, File, FileArchive, ImageIcon, Trash } from "lucide-react";
+import React from "react";
+import { Button } from "../../components/button";
+import { Dropzone } from ".";
+import { FileType, FileTypeGroups, FileTypeValue } from "./file-types";
+import {
+  UploadAcceptedFiles,
+  UploadContent,
+  UploadRejectedFiles,
+  UploadRoot,
+  UploadTrigger,
+} from "./upload-primitives";
+import { FileError } from "./use-dropzone";
+
+const meta: Meta<typeof Dropzone> = {
+  title: "data entry/Dropzone",
+  component: Dropzone,
+  subcomponents: {
+    UploadRoot: UploadRoot as React.ComponentType<unknown>,
+    UploadTrigger: UploadTrigger as React.ComponentType<unknown>,
+    UploadContent: UploadContent as React.ComponentType<unknown>,
+    UploadAcceptedFiles: UploadAcceptedFiles as React.ComponentType<unknown>,
+    UploadRejectedFiles: UploadRejectedFiles as React.ComponentType<unknown>,
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Dropzone>;
+
+export const Default: Story = {
+  args: {
+    allowedExtensions: [...FileTypeGroups.IMAGES, FileType.PDF],
+  },
+};
+
+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],
+  },
+};
+
+/**
+ * El callback `onError` te permite manejar errores cuando se rechazan archivos durante la validación.
+ *
+ * ### Interfaz FileError
+ * ```typescript
+ * type FileError = {
+ *   file: File;           // El archivo que causó el error
+ *   errorMessage: string; // Mensaje de error genérico
+ *   errorCode: FileErrorCode; // Código para identificar el tipo de error
+ * };
+ * ```
+ *
+ * ### Códigos de Error Disponibles
+ * - `'INVALID_EXTENSION'`: El archivo no tiene una extensión permitida
+ * - `'FILE_TOO_LARGE'`: El archivo excede el tamaño máximo permitido
+ * - `'MAX_FILES_EXCEEDED'`: Se ha alcanzado el límite máximo de archivos
+ *
+ * ### Ejemplo de Uso
+ * ```typescript
+ * onError: (fileErrors) => {
+ *   fileErrors.forEach(({ file, errorCode }) => {
+ *     switch (errorCode) {
+ *       case 'INVALID_EXTENSION':
+ *         toast.error(`${file.name} no es un tipo válido`);
+ *         break;
+ *       case 'FILE_TOO_LARGE':
+ *         toast.error(`${file.name} es muy grande`);
+ *         break;
+ *       case 'MAX_FILES_EXCEEDED':
+ *         toast.error('Demasiados archivos');
+ *         break;
+ *     }
+ *   });
+ * };
+ * ```
+ *
+ * ### Notas Importantes
+ * - El `onError` se ejecuta automáticamente cada vez que `validateFiles` encuentra errores
+ * - Puedes acceder al archivo original para mostrar información personalizada
+ * - Los mensajes de error son genéricos, puedes crear los tuyos propios basándote en el `errorCode`
+ */
+export const WithErrorHandling: Story = {
+  args: {
+    multiple: true,
+    maxFiles: 2,
+    maxFileSize: 2 * 1024 * 1024, // 2MB
+    allowedExtensions: [...FileTypeGroups.IMAGES, FileType.PDF],
+    onError: (fileErrors: FileError[]) => {
+      console.log("Errores de archivos:", fileErrors);
+      alert(
+        fileErrors
+          .map(
+            ({ file, errorMessage, errorCode }) =>
+              `${file.name}: ${errorMessage} (${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>
+    ),
+  },
+};
+
+/**
+ * El componente Dropzone está compuesto por los componentes primitivos UploadRoot, UploadTrigger, UploadContent, UploadAcceptedFiles y UploadRejectedFiles.
+ *
+ * Este ejemplo muestra como armar el componente Dropzone usando los componentes primitivos.
+ *
+ * ##### Estructura
+ * ```tsx
+ * <UploadRoot>
+ *   <UploadTrigger>
+ *   ...
+ *   </UploadTrigger>
+ *   <UploadContent>
+ *     <UploadAcceptedFiles />
+ *     <UploadRejectedFiles />
+ *   </UploadContent>
+ * </UploadRoot>
+ * ```
+ */
+export const Primitives: Story = {
+  render: () => {
+    return (
+      <UploadRoot>
+        <UploadTrigger asChild>
+          <Button>
+            <Camera /> Upload
+          </Button>
+        </UploadTrigger>
+        <UploadContent>
+          <UploadAcceptedFiles />
+          <UploadRejectedFiles />
+        </UploadContent>
+      </UploadRoot>
+    );
+  },
+};

package/src/components/dropzone/dropzone.tsx

@@ -0,0 +1,154 @@
+import { LucideIcon, UploadCloud } from "lucide-react";
+import { ComponentPropsWithoutRef, useMemo } from "react";
+import { cn } from "../../lib";
+import { FileTypeValue } from "./file-types";
+import {
+  UploadAcceptedFiles,
+  UploadContent,
+  UploadRejectedFiles,
+  UploadRoot,
+  UploadTrigger,
+} from "./upload-primitives";
+import { FileError } from "./use-dropzone";
+
+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 []
+   */
+  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
+   */
+  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;
+} & Omit<ComponentPropsWithoutRef<"div">, "onDrop" | "onError">;
+
+export const Dropzone = ({
+  onFileAdd,
+  onFileRemove,
+  onChangeFiles = () => {},
+  files,
+  maxFiles = 1,
+  allowedExtensions = [],
+  maxFileSize = 5 * 1024 * 1024,
+  multiple,
+  renderAcceptedFile,
+  renderRejectedFile,
+  showRejected = false,
+  className,
+  icon: Icon = UploadCloud,
+  iconSize = 40,
+  onError,
+  ...props
+}: DropzoneProps) => {
+  const allowedLabels = useMemo(() => {
+    return allowedExtensions.map((ext) => ext.split("/")?.[1]).join(", ");
+  }, [allowedExtensions]);
+
+  return (
+    <UploadRoot
+      onFileAdd={onFileAdd}
+      onFileRemove={onFileRemove}
+      files={files}
+      onChangeFiles={onChangeFiles}
+      maxFiles={maxFiles}
+      allowedExtensions={allowedExtensions}
+      maxFileSize={maxFileSize}
+      multiple={multiple ? true : undefined}
+      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>
+            )}
+            <p className="text-sm">
+              Tamaño máximo: {Math.floor(maxFileSize / 1024 / 1024)}MB
+            </p>
+          </div>
+        </div>
+      </UploadTrigger>
+
+      <UploadContent>
+        <UploadAcceptedFiles renderFile={renderAcceptedFile} />
+        {showRejected && (
+          <UploadRejectedFiles renderFile={renderRejectedFile} />
+        )}
+      </UploadContent>
+    </UploadRoot>
+  );
+};

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,3 @@
+export * from "./dropzone";
+export * from "./file-types";
+export * from "./upload-primitives";