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

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

@@ -1,36 +1,61 @@
-import { Meta, StoryObj } from "@storybook/react-vite";
+import type { 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";
+  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: "data entry/Dropzone",
+  title: "Components/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>,
+    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 },
   },
+  tags: ["beta"],
 };
 
 export default meta;
 type Story = StoryObj<typeof Dropzone>;
 
-export const Default: Story = {
+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: {
-    allowedExtensions: [...FileTypeGroups.IMAGES, FileType.PDF],
+    classNames: {
+      trigger: "border-primary bg-primary/5",
+      icon: "text-primary",
+      label: "text-primary",
+    },
   },
 };
 
@@ -59,60 +84,20 @@ export const MultipleFiles: Story = {
 };
 
 /**
- * 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`
+ * `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, // 2MB
+    maxFileSize: 2 * 1024 * 1024,
     allowedExtensions: [...FileTypeGroups.IMAGES, FileType.PDF],
     onError: (fileErrors: FileError[]) => {
-      console.log("Errores de archivos:", fileErrors);
       alert(
         fileErrors
-          .map(
-            ({ file, errorMessage, errorCode }) =>
-              `${file.name}: ${errorMessage} (${errorCode})`,
-          )
+          .map(({ file, errorCode }) => `${file.name}: ${errorCode}`)
           .join("\n"),
       );
     },
@@ -174,37 +159,33 @@ export const CustomFilePreview: Story = {
 };
 
 /**
- * El componente Dropzone está compuesto por los componentes primitivos UploadRoot, UploadTrigger, UploadContent, UploadAcceptedFiles y UploadRejectedFiles.
+ * Use primitives directly for full layout control. `DropzoneTrigger` with `render`
+ * turns any element into the drag target and click handler.
  *
- * Este ejemplo muestra como armar el componente Dropzone usando los componentes primitivos.
- *
- * ##### Estructura
  * ```tsx
- * <UploadRoot>
- *   <UploadTrigger>
- *   ...
- *   </UploadTrigger>
- *   <UploadContent>
- *     <UploadAcceptedFiles />
- *     <UploadRejectedFiles />
- *   </UploadContent>
- * </UploadRoot>
+ * <DropzoneRoot>
+ *   <DropzoneTrigger render={<Button>Upload</Button>} />
+ *   <DropzoneContent>
+ *     <DropzoneAcceptedFiles />
+ *     <DropzoneRejectedFiles />
+ *   </DropzoneContent>
+ * </DropzoneRoot>
  * ```
  */
-export const Primitives: Story = {
-  render: () => {
-    return (
-      <UploadRoot>
-        <UploadTrigger asChild>
+export const Primitive: Story = {
+  render: () => (
+    <DropzoneRoot>
+      <DropzoneTrigger
+        render={
           <Button>
             <Camera /> Upload
           </Button>
-        </UploadTrigger>
-        <UploadContent>
-          <UploadAcceptedFiles />
-          <UploadRejectedFiles />
-        </UploadContent>
-      </UploadRoot>
-    );
-  },
+        }
+      />
+      <DropzoneContent>
+        <DropzoneAcceptedFiles />
+        <DropzoneRejectedFiles />
+      </DropzoneContent>
+    </DropzoneRoot>
+  ),
 };