@etus/ui 0.1.0 → 0.1.2

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

@@ -1,246 +0,0 @@
-# AssetManager
-
-## Visão Geral
-
-O AssetManager e um componente avancado para gerenciamento de arquivos e midias digitais. Permite upload, organizacao, busca e selecao de assets como imagens, documentos, videos e outros arquivos em uma interface unificada tipo file browser.
-
-### Classificacao Atomica
-- **Categoria**: Organisms
-- **Subcategoria**: Media / File Management
-
-### Casos de Uso Comuns
-- Biblioteca de midias para CMS
-- Galeria de imagens para selecao
-- Gerenciador de documentos
-- Asset picker para editores de conteudo
-- File browser para sistemas de arquivos
-- Organizacao de anexos
-
-### Relacao com Outros Componentes
-- **FileUpload**: Upload de novos arquivos
-- **FileDropzone**: Drag and drop de arquivos
-- **FilePreview**: Preview de arquivos selecionados
-- **Dialog**: Modal para visualizacao ampliada
-- **DataTable**: Listagem de arquivos em tabela
-
-## Design Specs
-
-### Subcomponentes
-
-- **AssetManager**: Container principal
-- **AssetManagerToolbar**: Barra de ferramentas (busca, filtros, views)
-- **AssetManagerGrid**: Visualizacao em grade de thumbnails
-- **AssetManagerList**: Visualizacao em lista
-- **AssetManagerItem**: Item individual de asset
-- **AssetManagerSidebar**: Painel lateral com detalhes
-- **AssetManagerUploader**: Area de upload integrada
-
-### Variantes de Visualizacao
-- **grid**: Grade de thumbnails (padrao)
-- **list**: Lista detalhada com colunas
-- **compact**: Grade compacta
-
-### Estados
-
-- **Default**: Estado normal de navegacao
-- **Selected**: Item(ns) selecionado(s)
-- **Uploading**: Upload em progresso
-- **Loading**: Carregando assets
-- **Empty**: Nenhum asset encontrado
-- **Error**: Erro de carregamento
-
-### Tokens de Design
-
-#### Cores
-- Background: `bg-background`
-- Item Selected: `bg-primary/10`, `ring-primary`
-- Hover: `bg-accent`
-- Toolbar: `bg-muted`
-
-#### Espacamento
-- Grid gap: `gap-4`
-- Item padding: `p-2`
-- Toolbar: `px-4`, `py-2`
-
-#### Tipografia
-- Filename: `text-sm`, `font-medium`
-- Metadata: `text-xs`, `text-muted-foreground`
-
-## API
-
-### Props
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `assets` | `Asset[]` | `[]` | Lista de assets a exibir |
-| `selectedIds` | `string[]` | `[]` | IDs dos assets selecionados |
-| `onSelect` | `(ids: string[]) => void` | - | Callback de selecao |
-| `onUpload` | `(files: File[]) => void` | - | Callback de upload |
-| `onDelete` | `(ids: string[]) => void` | - | Callback de exclusao |
-| `view` | `"grid" \| "list" \| "compact"` | `"grid"` | Modo de visualizacao |
-| `multiple` | `boolean` | `true` | Permite selecao multipla |
-| `accept` | `string` | - | Tipos de arquivo aceitos |
-| `maxSize` | `number` | - | Tamanho maximo em bytes |
-| `searchable` | `boolean` | `true` | Habilita busca |
-| `sortable` | `boolean` | `true` | Habilita ordenacao |
-| `loading` | `boolean` | `false` | Estado de carregamento |
-
-### Interfaces TypeScript
-
-```typescript
-export interface Asset {
-  id: string
-  name: string
-  url: string
-  thumbnailUrl?: string
-  type: string // MIME type
-  size: number
-  createdAt: Date
-  updatedAt: Date
-  metadata?: Record<string, unknown>
-}
-
-export interface AssetManagerProps {
-  assets: Asset[]
-  selectedIds?: string[]
-  onSelect?: (ids: string[]) => void
-  onUpload?: (files: File[]) => Promise<Asset[]>
-  onDelete?: (ids: string[]) => Promise<void>
-  view?: "grid" | "list" | "compact"
-  multiple?: boolean
-  accept?: string
-  maxSize?: number
-  searchable?: boolean
-  sortable?: boolean
-  loading?: boolean
-  className?: string
-}
-```
-
-### Comparacao com Referencias
-
-| Design System | Caracteristicas |
-|---------------|-----------------|
-| **Contentful** | Media library com tags e folders |
-| **Strapi** | Asset manager com crop e transformacoes |
-| **Sanity** | Media browser com filtros avancados |
-| **Cloudinary** | Widget de upload e transformacao |
-| **WordPress** | Media library com grid/list views |
-| **Figma** | Asset panel com organizacao |
-
-## Acessibilidade (A11y)
-
-### Atributos ARIA
-- `role="grid"` ou `role="listbox"`: Container de items
-- `role="gridcell"` ou `role="option"`: Cada item
-- `aria-selected`: Estado de selecao
-- `aria-multiselectable`: Indica selecao multipla
-- `aria-busy`: Durante carregamento
-
-### Navegacao por Teclado
-- `Arrow Keys`: Navega entre items
-- `Space`: Seleciona/deseleciona item
-- `Enter`: Abre preview do item
-- `Ctrl/Cmd + A`: Seleciona todos
-- `Delete`: Remove selecionados (com confirmacao)
-- `Escape`: Limpa selecao
-
-### Conformidade WCAG
-- **Nivel alvo**: WCAG 2.1 AA
-- Thumbnails com alt text
-- Focus visible em todos os items
-- Skip links para areas principais
-
-## Exemplos
-
-### Uso Basico
-
-```tsx
-import { AssetManager } from "@etus/ui"
-
-export function AssetManagerDemo() {
-  const [assets, setAssets] = React.useState<Asset[]>([])
-  const [selected, setSelected] = React.useState<string[]>([])
-
-  return (
-    <AssetManager
-      assets={assets}
-      selectedIds={selected}
-      onSelect={setSelected}
-      onUpload={async (files) => {
-        // Upload logic
-      }}
-    />
-  )
-}
-```
-
-### Com Filtros e Busca
-
-```tsx
-import { AssetManager } from "@etus/ui"
-
-export function FilteredAssetManager() {
-  return (
-    <AssetManager
-      assets={assets}
-      accept="image/*"
-      searchable
-      sortable
-    />
-  )
-}
-```
-
-### Como Picker em Dialog
-
-```tsx
-import { AssetManager, Dialog, DialogContent } from "@etus/ui"
-
-export function AssetPicker({ onSelect }) {
-  const [open, setOpen] = React.useState(false)
-
-  return (
-    <Dialog open={open} onOpenChange={setOpen}>
-      <DialogContent className="max-w-4xl h-[600px]">
-        <AssetManager
-          assets={assets}
-          onSelect={(ids) => {
-            onSelect(ids)
-            setOpen(false)
-          }}
-        />
-      </DialogContent>
-    </Dialog>
-  )
-}
-```
-
-## Testes
-
-### Estrategias de Teste
-
-```typescript
-describe("AssetManager", () => {
-  it("renders assets in grid view", () => {})
-  it("switches between views", () => {})
-  it("handles selection", () => {})
-  it("filters by search", () => {})
-  it("uploads files", () => {})
-  it("deletes selected assets", () => {})
-})
-```
-
-## Roadmap / Features Futuras
-
-- Virtualizacao recomendada para grandes listas
-- Lazy loading de thumbnails
-- Preview com zoom e navegacao
-- Suporte a drag and drop para reordenacao
-- Integracao com storage providers (S3, Cloudinary, etc.)
-
-## Referências
-
-- [Contentful Media Library](https://www.contentful.com/developers/docs/concepts/media/)
-- [Cloudinary Widget](https://cloudinary.com/documentation/upload_widget)
-- [WAI-ARIA Grid Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/grid/)

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

@@ -1,4 +0,0 @@
-// AssetManager exports
-export * from "./AssetManager"
-export type * from "./AssetManager.types"
-export * from "./AssetManager.variants"

package/src/components/advanced/CLAUDE.md

@@ -1,77 +0,0 @@
-# Advanced Components
-
-Complex interactive components that provide rich user experiences beyond basic UI primitives.
-
-## Purpose
-
-This category contains sophisticated, stateful components that:
-- Handle complex user interactions (drag-drop, file management, rich editing)
-- Manage internal state and side effects
-- Often integrate multiple primitive components
-- Require specialized UX patterns
-
-These are the "power user" components - used when simple primitives aren't enough.
-
-## Components (16)
-
-| Component | Phase | Description |
-|-----------|-------|-------------|
-| **Calendar** | P0 | Calendar view for date visualization |
-| **EventCalendar** | P0 | Event scheduling and calendar management |
-| **FileUpload** | P0 | File upload with progress tracking |
-| **FileDropzone** | P0 | Drag-and-drop file upload area |
-| **FilterBuilder** | P0 | Advanced filtering UI for data queries |
-| **Search** | P0 | Advanced search with suggestions |
-| **RichTextEditor** | P0 | WYSIWYG content editing |
-| **Command** | P1 | Command palette (keyboard-driven actions) |
-| **FilePreview** | P1 | File viewing (images, PDFs, documents) |
-| **DragAndDrop** | P1 | Generic drag-and-drop reordering |
-| **SortableList** | P1 | Sortable list with drag handles |
-| **AssetManager** | P2 | Digital asset management interface |
-| **VersionControl** | P2 | Content version history and comparison |
-| **MarkdownEditor** | P2 | Markdown editing with preview |
-| **Portal** | P2 | Render children outside DOM hierarchy |
-| **ErrorBoundary** | P2 | React error boundary with fallback UI |
-
-## Phase Distribution
-
-- **P0 (Essential)**: Calendar, EventCalendar, FileUpload, FileDropzone, FilterBuilder, Search, RichTextEditor
-- **P1 (Important)**: Command, FilePreview, DragAndDrop, SortableList
-- **P2 (Useful)**: AssetManager, VersionControl, MarkdownEditor, Portal, ErrorBoundary
-
-## Usage Patterns
-
-### File Management
-```
-FileDropzone → FileUpload → FilePreview → AssetManager
-```
-Combine these for complete file handling workflows.
-
-### Rich Content
-```
-RichTextEditor (WYSIWYG) | MarkdownEditor (technical)
-```
-Choose based on user technical proficiency.
-
-### Scheduling
-```
-Calendar (view only) | EventCalendar (interactive)
-```
-Calendar for display, EventCalendar for CRUD operations.
-
-## Key Dependencies
-
-- `@dnd-kit/*` - Drag-and-drop functionality
-- `@tiptap/*` or similar - Rich text editing
-- `date-fns` - Date manipulation for calendars
-
-## When to Use Advanced vs Other Categories
-
-| Need | Use |
-|------|-----|
-| Simple date input | `forms/DatePicker` |
-| Calendar display with events | `advanced/EventCalendar` |
-| Basic file input | `forms/` with native input |
-| Drag-drop upload + preview | `advanced/FileDropzone` + `FilePreview` |
-| Simple text | `forms/Textarea` |
-| Formatted content | `advanced/RichTextEditor` |