@etus/ui 0.1.0

package/src/components/advanced/FileDropzone/FileDropzone.tsx

@@ -0,0 +1,188 @@
+"use client"
+
+import type { FileDropzoneProps } from "./FileDropzone.types"
+import type { DropEvent, FileRejection } from "react-dropzone"
+
+import { UploadCloudIcon } from "lucide-react"
+import * as React from "react"
+import { useDropzone } from "react-dropzone"
+
+import { cn } from "../../../lib/utils"
+import { fileDropzoneVariants } from "./FileDropzone.variants"
+
+/**
+ * FileDropzone - Drag and drop file upload component
+ *
+ * A flexible dropzone component built on react-dropzone that provides
+ * visual feedback during drag operations and supports file validation.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <FileDropzone onDrop={(files) => console.log(files)}>
+ *   <p>Drag files here or click to upload</p>
+ * </FileDropzone>
+ *
+ * // With validation
+ * <FileDropzone
+ *   accept={{ "image/*": [".png", ".jpg"] }}
+ *   maxSize={5 * 1024 * 1024}
+ *   maxFiles={5}
+ *   onDrop={(files) => handleFiles(files)}
+ *   onReject={(rejections) => handleErrors(rejections)}
+ * >
+ *   <p>Drop images here (max 5MB each)</p>
+ * </FileDropzone>
+ *
+ * // With render props for custom state handling
+ * <FileDropzone onDrop={handleDrop}>
+ *   {({ isDragActive, isDragReject }) => (
+ *     <div className={isDragActive ? "bg-blue-50" : ""}>
+ *       {isDragReject ? "Invalid file type" : "Drop files here"}
+ *     </div>
+ *   )}
+ * </FileDropzone>
+ * ```
+ */
+function FileDropzone({
+  accept,
+  children,
+  className,
+  disabled = false,
+  maxFiles,
+  maxSize,
+  minSize,
+  multiple = true,
+  noClick = false,
+  noDrag = false,
+  noKeyboard = false,
+  onDrop,
+  onReject,
+  variant = "default",
+  ...props
+}: FileDropzoneProps) {
+  const handleDrop = React.useCallback(
+    (
+      acceptedFiles: File[],
+      fileRejections: FileRejection[],
+      event: DropEvent
+    ) => {
+      onDrop?.(acceptedFiles, fileRejections, event)
+
+      if (fileRejections.length > 0) {
+        onReject?.(fileRejections)
+      }
+    },
+    [onDrop, onReject]
+  )
+
+  const {
+    acceptedFiles,
+    fileRejections,
+    getInputProps,
+    getRootProps,
+    isDragAccept,
+    isDragActive,
+    isDragReject,
+    isFileDialogActive,
+    isFocused,
+    open,
+  } = useDropzone({
+    accept,
+    disabled,
+    maxFiles,
+    maxSize,
+    minSize,
+    multiple,
+    noClick,
+    noDrag,
+    noKeyboard,
+    onDrop: handleDrop,
+    ...props,
+  })
+
+  const dropzoneState = {
+    acceptedFiles,
+    fileRejections,
+    isDragAccept,
+    isDragActive,
+    isDragReject,
+    isFileDialogActive,
+    isFocused,
+    open,
+  }
+
+  const renderContent = () => {
+    if (typeof children === "function") {
+      return children(dropzoneState)
+    }
+
+    if (children) {
+      return children
+    }
+
+    // Default content
+    return (
+      <>
+        <UploadCloudIcon
+          className={cn(
+            "size-10 mb-2",
+            isDragActive ? "text-primary" : "text-muted-foreground"
+          )}
+        />
+        <p className="text-sm font-medium">
+          {isDragActive
+            ? isDragReject
+              ? "File type not accepted"
+              : "Drop files here..."
+            : "Drag files here or click to upload"}
+        </p>
+        <p className="text-xs text-muted-foreground mt-1">
+          {maxSize !== undefined && `Max size: ${formatBytes(maxSize)}`}
+          {maxSize !== undefined && maxFiles !== undefined && " • "}
+          {maxFiles !== undefined && `Max ${String(maxFiles)} file${maxFiles > 1 ? "s" : ""}`}
+        </p>
+      </>
+    )
+  }
+
+  return (
+    <div
+      {...getRootProps({
+        className: cn(
+          fileDropzoneVariants({
+            variant,
+            isDragActive,
+            isDragReject,
+            disabled,
+          }),
+          className
+        ),
+        "data-slot": "file-dropzone",
+        "data-drag-active": isDragActive,
+        "data-drag-accept": isDragAccept,
+        "data-drag-reject": isDragReject,
+        "data-disabled": disabled,
+        "aria-disabled": disabled,
+      })}
+    >
+      <input {...getInputProps()} data-slot="file-dropzone-input" />
+      {renderContent()}
+    </div>
+  )
+}
+
+/**
+ * Format bytes to human readable string
+ */
+function formatBytes(bytes: number): string {
+  if (bytes === 0) return "0 B"
+  const k = 1024
+  const sizes = ["B", "KB", "MB", "GB"]
+  const i = Math.floor(Math.log(bytes) / Math.log(k))
+  return `${String(Number.parseFloat((bytes / Math.pow(k, i)).toFixed(1)))} ${sizes[i] ?? ""}`
+}
+
+FileDropzone.displayName = "FileDropzone"
+
+export { FileDropzone }

package/src/components/advanced/FileDropzone/FileDropzone.types.ts

@@ -0,0 +1,47 @@
+"use client"
+
+import type { DropEvent, DropzoneOptions, FileRejection, FileWithPath } from "react-dropzone"
+
+/**
+ * State object passed to render props children
+ */
+export interface DropzoneState {
+  /** Files that have been accepted */
+  acceptedFiles: readonly FileWithPath[]
+  /** Array of rejected files with their errors */
+  fileRejections: readonly FileRejection[]
+  /** Whether a valid file is being dragged over the dropzone */
+  isDragAccept: boolean
+  /** Whether any file is being dragged over the dropzone */
+  isDragActive: boolean
+  /** Whether an invalid file is being dragged over the dropzone */
+  isDragReject: boolean
+  /** Whether the file dialog is currently open */
+  isFileDialogActive: boolean
+  /** Whether the dropzone is focused */
+  isFocused: boolean
+  /** Function to programmatically open the file dialog */
+  open: () => void
+}
+
+/**
+ * Render function type for children prop
+ */
+export type DropzoneRenderFn = (state: DropzoneState) => React.ReactNode
+
+/**
+ * FileDropzone component props
+ */
+export interface FileDropzoneProps
+  extends Omit<DropzoneOptions, "onDrop" | "onDropAccepted" | "onDropRejected"> {
+  /** Content to render inside the dropzone */
+  children?: DropzoneRenderFn | React.ReactNode
+  /** Additional CSS classes */
+  className?: string
+  /** Callback when files are dropped/selected */
+  onDrop?: (acceptedFiles: File[], fileRejections: FileRejection[], event: DropEvent) => void
+  /** Callback when files are rejected */
+  onReject?: (rejections: FileRejection[]) => void
+  /** Visual variant of the dropzone */
+  variant?: "compact" | "default" | "image"
+}

package/src/components/advanced/FileDropzone/FileDropzone.variants.ts

@@ -0,0 +1,46 @@
+import { cva } from "class-variance-authority"
+
+export const fileDropzoneVariants = cva(
+  [
+    "flex flex-col items-center justify-center",
+    "border-2 border-dashed rounded-lg",
+    "transition-colors duration-200",
+    "cursor-pointer",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+  ],
+  {
+    variants: {
+      variant: {
+        default: "gap-2 p-8 bg-muted/50 border-muted-foreground/25",
+        compact: "gap-1 p-4 bg-muted/50 border-muted-foreground/25",
+        image: "gap-2 p-8 bg-muted/50 border-muted-foreground/25 aspect-video",
+      },
+      isDragActive: {
+        true: "border-primary bg-primary/5",
+        false: "",
+      },
+      isDragReject: {
+        true: "border-destructive bg-destructive/5",
+        false: "",
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed pointer-events-none",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      {
+        isDragActive: false,
+        isDragReject: false,
+        disabled: false,
+        className: "hover:border-primary hover:bg-primary/5",
+      },
+    ],
+    defaultVariants: {
+      variant: "default",
+      isDragActive: false,
+      isDragReject: false,
+      disabled: false,
+    },
+  }
+)

package/src/components/advanced/FileDropzone/README.md

@@ -0,0 +1,359 @@
+# FileDropzone
+
+## Visão Geral
+
+O FileDropzone e um componente para upload de arquivos via drag and drop. Oferece feedback visual durante o arraste, validacao de tipos e tamanhos, e suporte a uploads multiplos com preview integrado.
+
+### Classificacao Atomica
+- **Categoria**: Molecules
+- **Subcategoria**: Form / File Input
+
+### Casos de Uso Comuns
+- Upload de imagens em formularios
+- Anexo de documentos
+- Import de arquivos CSV/Excel
+- Upload de midias para posts
+- Submissao de arquivos em tarefas
+
+### Relacao com Outros Componentes
+- **FileUpload**: Componente de upload tradicional
+- **FilePreview**: Preview dos arquivos selecionados
+- **Progress**: Barra de progresso de upload
+- **Alert**: Mensagens de erro de validacao
+
+## Design Specs
+
+### Variantes
+- **default**: Dropzone padrao com borda tracejada
+- **compact**: Versao menor inline
+- **image**: Otimizada para imagens com preview
+
+### Estados
+
+- **Default**: Aguardando arquivos
+- **Hover**: Mouse sobre a zona
+- **Dragging**: Arquivo sendo arrastado
+- **Active**: Arquivo sobre a zona (pronto para soltar)
+- **Rejected**: Arquivo invalido sobre a zona
+- **Disabled**: Upload desabilitado
+- **Uploading**: Upload em progresso
+
+### Tokens de Design
+
+#### Cores
+- Border default: `border-dashed border-muted-foreground/25`
+- Border hover: `border-primary`
+- Border active: `border-primary`, `bg-primary/5`
+- Border rejected: `border-destructive`
+- Background: `bg-muted/50`
+
+#### Espacamento
+- Padding: `p-8` (default), `p-4` (compact)
+- Gap interno: `gap-2`
+
+#### Tipografia
+- Titulo: `text-sm`, `font-medium`
+- Descricao: `text-xs`, `text-muted-foreground`
+
+#### Bordas
+- Border: `border-2 border-dashed`
+- Radius: `rounded-lg`
+
+## API
+
+### Props
+
+| Prop | Tipo | Padrao | Descricao |
+|------|------|--------|-----------|
+| `onDrop` | `(files: File[]) => void` | - | Callback ao soltar arquivos |
+| `onReject` | `(rejections: FileRejection[]) => void` | - | Callback arquivos rejeitados |
+| `accept` | `Accept` | - | MIME types aceitos |
+| `maxSize` | `number` | - | Tamanho maximo em bytes |
+| `minSize` | `number` | `0` | Tamanho minimo em bytes |
+| `maxFiles` | `number` | `0` (unlimited) | Numero maximo de arquivos |
+| `multiple` | `boolean` | `true` | Permite multiplos arquivos |
+| `disabled` | `boolean` | `false` | Desabilita o componente |
+| `noClick` | `boolean` | `false` | Desabilita click para selecionar |
+| `noDrag` | `boolean` | `false` | Desabilita drag and drop |
+| `noKeyboard` | `boolean` | `false` | Desabilita navegacao por teclado |
+| `children` | `ReactNode \| RenderFn` | - | Conteudo da dropzone |
+
+### Interfaces TypeScript
+
+```typescript
+import type { DropzoneOptions, FileRejection } from "react-dropzone"
+
+export interface FileDropzoneProps extends DropzoneOptions {
+  className?: string
+  children?: React.ReactNode | ((state: DropzoneState) => React.ReactNode)
+}
+
+export interface DropzoneState {
+  isDragActive: boolean
+  isDragAccept: boolean
+  isDragReject: boolean
+  isFocused: boolean
+  isFileDialogActive: boolean
+  acceptedFiles: File[]
+  fileRejections: FileRejection[]
+  open: () => void
+}
+
+export interface Accept {
+  [key: string]: string[]
+}
+
+// Exemplo: { "image/*": [".png", ".jpg", ".jpeg"] }
+```
+
+### Comparacao com Referencias
+
+| Design System | Caracteristicas |
+|---------------|-----------------|
+| **react-dropzone** | Biblioteca base |
+| **Chakra UI** | FileUpload com preview |
+| **Ant Design** | Dragger com lista de arquivos |
+| **MUI** | Dropzone com integracao de form |
+| **Mantine** | Dropzone com idle/active states |
+| **Radix** | Sem componente nativo |
+
+## Acessibilidade (A11y)
+
+### Atributos ARIA
+- `role="button"`: Zona clicavel
+- `aria-disabled`: Quando desabilitado
+- `aria-describedby`: Instrucoes de uso
+- Input file com label acessivel
+
+### Navegacao por Teclado
+- `Tab`: Foca na dropzone
+- `Enter` / `Space`: Abre dialogo de arquivo
+- `Escape`: Cancela dialogo
+
+### Conformidade WCAG
+- **Nivel alvo**: WCAG 2.1 AA
+- Feedback visual claro de estados
+- Mensagens de erro descritivas
+- Focus visible
+
+## Exemplos
+
+### Uso Basico
+
+```tsx
+import { FileDropzone } from "@etus/ui"
+
+export function BasicDropzone() {
+  const handleDrop = (files: File[]) => {
+    console.log("Files dropped:", files)
+  }
+
+  return (
+    <FileDropzone onDrop={handleDrop}>
+      <div className="text-center">
+        <p>Drag and drop files here, or click to select</p>
+      </div>
+    </FileDropzone>
+  )
+}
+```
+
+### Com Validacao
+
+```tsx
+import { FileDropzone } from "@etus/ui"
+
+export function ValidatedDropzone() {
+  return (
+    <FileDropzone
+      accept={{
+        "image/*": [".png", ".jpg", ".jpeg", ".gif"],
+      }}
+      maxSize={5 * 1024 * 1024} // 5MB
+      maxFiles={5}
+      onDrop={(files) => console.log(files)}
+      onReject={(rejections) => {
+        rejections.forEach(({ file, errors }) => {
+          errors.forEach((error) => {
+            toast.error(`${file.name}: ${error.message}`)
+          })
+        })
+      }}
+    >
+      <div className="text-center">
+        <p>Drop images here (max 5MB each)</p>
+        <p className="text-xs text-muted-foreground">
+          PNG, JPG, GIF up to 5 files
+        </p>
+      </div>
+    </FileDropzone>
+  )
+}
+```
+
+### Com Render Props
+
+```tsx
+import { FileDropzone } from "@etus/ui"
+import { UploadCloudIcon } from "lucide-react"
+import { cn } from "@etus/ui"
+
+export function StyledDropzone() {
+  return (
+    <FileDropzone onDrop={handleDrop}>
+      {({ isDragActive, isDragAccept, isDragReject }) => (
+        <div
+          className={cn(
+            "flex flex-col items-center justify-center p-8 border-2 border-dashed rounded-lg transition-colors",
+            isDragActive && "border-primary bg-primary/5",
+            isDragReject && "border-destructive bg-destructive/5"
+          )}
+        >
+          <UploadCloudIcon
+            className={cn(
+              "h-10 w-10 mb-4",
+              isDragActive ? "text-primary" : "text-muted-foreground"
+            )}
+          />
+          <p className="font-medium">
+            {isDragActive
+              ? "Drop files here..."
+              : "Drag files here or click to upload"}
+          </p>
+        </div>
+      )}
+    </FileDropzone>
+  )
+}
+```
+
+### Com Preview
+
+```tsx
+import { FileDropzone, FilePreview } from "@etus/ui"
+
+export function DropzoneWithPreview() {
+  const [files, setFiles] = React.useState<File[]>([])
+
+  return (
+    <div className="space-y-4">
+      <FileDropzone
+        onDrop={(newFiles) => setFiles([...files, ...newFiles])}
+      >
+        <p>Drop files here</p>
+      </FileDropzone>
+
+      <div className="grid grid-cols-4 gap-2">
+        {files.map((file, index) => (
+          <FilePreview
+            key={index}
+            file={file}
+            onRemove={() => {
+              setFiles(files.filter((_, i) => i !== index))
+            }}
+          />
+        ))}
+      </div>
+    </div>
+  )
+}
+```
+
+### Image Dropzone
+
+```tsx
+import { FileDropzone } from "@etus/ui"
+import { ImageIcon } from "lucide-react"
+
+export function ImageDropzone() {
+  const [preview, setPreview] = React.useState<string | null>(null)
+
+  return (
+    <FileDropzone
+      accept={{ "image/*": [] }}
+      maxFiles={1}
+      onDrop={(files) => {
+        const file = files[0]
+        const reader = new FileReader()
+        reader.onload = () => setPreview(reader.result as string)
+        reader.readAsDataURL(file)
+      }}
+    >
+      {preview ? (
+        <img src={preview} alt="Preview" className="max-h-48 rounded" />
+      ) : (
+        <div className="flex flex-col items-center">
+          <ImageIcon className="h-10 w-10 text-muted-foreground" />
+          <p>Drop image here</p>
+        </div>
+      )}
+    </FileDropzone>
+  )
+}
+```
+
+## Testes
+
+### Estrategias de Teste
+
+```typescript
+describe("FileDropzone", () => {
+  it("renders dropzone", () => {})
+  it("accepts valid files", () => {})
+  it("rejects invalid files", () => {})
+  it("shows active state on drag", () => {})
+  it("opens file dialog on click", () => {})
+  it("handles keyboard navigation", () => {})
+})
+```
+
+### Exemplo de Teste
+
+```typescript
+import { render, screen, fireEvent } from "@testing-library/react"
+import { FileDropzone } from "./FileDropzone"
+
+describe("FileDropzone", () => {
+  it("calls onDrop with files", async () => {
+    const onDrop = vi.fn()
+    render(<FileDropzone onDrop={onDrop}>Drop here</FileDropzone>)
+
+    const file = new File(["content"], "test.txt", { type: "text/plain" })
+    const dropzone = screen.getByText("Drop here").parentElement
+
+    fireEvent.drop(dropzone!, {
+      dataTransfer: { files: [file] },
+    })
+
+    await waitFor(() => {
+      expect(onDrop).toHaveBeenCalledWith([file], [], expect.anything())
+    })
+  })
+
+  it("rejects files exceeding maxSize", async () => {
+    const onReject = vi.fn()
+    render(
+      <FileDropzone maxSize={100} onReject={onReject}>
+        Drop here
+      </FileDropzone>
+    )
+
+    const largeFile = new File(["x".repeat(200)], "large.txt")
+    // Simulate drop...
+  })
+})
+```
+
+## Roadmap / Features Futuras
+
+- Construido sobre react-dropzone
+- Suporte a validacao customizada
+- Preview via FileReader API
+- Integracao com form libraries
+- Considerar upload chunked para arquivos grandes
+
+## Referências
+
+- [react-dropzone](https://react-dropzone.js.org/)
+- [MDN File API](https://developer.mozilla.org/en-US/docs/Web/API/File_API)
+- [WCAG File Upload](https://www.w3.org/WAI/tutorials/forms/file-inputs/)

package/src/components/advanced/FileDropzone/index.ts

@@ -0,0 +1,7 @@
+export type {
+  DropzoneRenderFn,
+  DropzoneState,
+  FileDropzoneProps,
+} from "./FileDropzone.types"
+export { FileDropzone } from "./FileDropzone"
+export { fileDropzoneVariants } from "./FileDropzone.variants"