@etus/ui 0.1.1 → 0.1.3

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

@@ -1,188 +0,0 @@
-"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

@@ -1,47 +0,0 @@
-"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

@@ -1,46 +0,0 @@
-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

@@ -1,359 +0,0 @@
-# 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

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