@etus/ui 0.1.1 → 0.1.2

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

@@ -1,156 +0,0 @@
-// DragAndDrop/DragAndDrop.variants.ts
-import { cva, type VariantProps } from "class-variance-authority"
-
-// ============================================
-// DRAGGABLE VARIANTS
-// ============================================
-
-export const draggableVariants = cva(
-  [
-    "relative",
-    "touch-none",
-    "transition-shadow duration-200 ease-out",
-  ],
-  {
-    variants: {
-      isDragging: {
-        true: "opacity-50 cursor-grabbing",
-        false: "cursor-grab",
-      },
-      disabled: {
-        true: "cursor-not-allowed opacity-50",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      isDragging: false,
-      disabled: false,
-    },
-  }
-)
-
-export type DraggableVariantProps = VariantProps<typeof draggableVariants>
-
-// ============================================
-// DROPPABLE VARIANTS
-// ============================================
-
-export const droppableVariants = cva(
-  [
-    "relative",
-    "transition-all duration-200 ease-out",
-    "border-2 border-dashed border-transparent",
-  ],
-  {
-    variants: {
-      isOver: {
-        true: "border-primary bg-primary/5",
-        false: "",
-      },
-      disabled: {
-        true: "cursor-not-allowed opacity-50",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      isOver: false,
-      disabled: false,
-    },
-  }
-)
-
-export type DroppableVariantProps = VariantProps<typeof droppableVariants>
-
-// ============================================
-// SORTABLE ITEM VARIANTS
-// ============================================
-
-export const sortableItemVariants = cva(
-  [
-    "relative",
-    "touch-none",
-    "transition-all duration-200 ease-out",
-  ],
-  {
-    variants: {
-      isDragging: {
-        true: [
-          "opacity-50",
-          "cursor-grabbing",
-          "z-10",
-        ],
-        false: "",
-      },
-      isSorting: {
-        true: "",
-        false: "",
-      },
-      disabled: {
-        true: "cursor-not-allowed opacity-50",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      isDragging: false,
-      isSorting: false,
-      disabled: false,
-    },
-  }
-)
-
-export type SortableItemVariantProps = VariantProps<typeof sortableItemVariants>
-
-// ============================================
-// DRAG OVERLAY VARIANTS
-// ============================================
-
-export const dragOverlayVariants = cva(
-  [
-    "bg-background",
-    "shadow-lg",
-    "rounded-md",
-    "cursor-grabbing",
-    "transition-transform duration-200 ease-out",
-  ],
-  {
-    variants: {},
-    defaultVariants: {},
-  }
-)
-
-export type DragOverlayVariantProps = VariantProps<typeof dragOverlayVariants>
-
-// ============================================
-// DRAG HANDLE VARIANTS
-// ============================================
-
-export const dragHandleVariants = cva(
-  [
-    "flex items-center justify-center",
-    "p-2",
-    "text-muted-foreground",
-    "cursor-grab",
-    "touch-none",
-    "hover:text-foreground",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-    "transition-colors duration-200",
-  ],
-  {
-    variants: {
-      isDragging: {
-        true: "cursor-grabbing",
-        false: "",
-      },
-      disabled: {
-        true: "cursor-not-allowed opacity-50 pointer-events-none",
-        false: "",
-      },
-    },
-    defaultVariants: {
-      isDragging: false,
-      disabled: false,
-    },
-  }
-)
-
-export type DragHandleVariantProps = VariantProps<typeof dragHandleVariants>

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

@@ -1,284 +0,0 @@
-# DragAndDrop
-
-## Visão Geral
-
-O DragAndDrop e um conjunto de componentes utilitarios para implementar interacoes de arrastar e soltar. Fornece primitivos para criar interfaces de reordenacao, transferencia entre listas e zonas de soltar arquivos, construido sobre dnd-kit.
-
-### Classificacao Atomica
-- **Categoria**: Utilities / Organisms
-- **Subcategoria**: Interaction
-
-### Casos de Uso Comuns
-- Reordenacao de listas (Kanban, tasks)
-- Drag and drop entre colunas
-- Sortable grids e tabelas
-- File drop zones
-- Layout builders
-- Organizacao de conteudo
-
-### Relacao com Outros Componentes
-- **SortableList**: Lista reordenavel especializada
-- **FileDropzone**: Drop zone para arquivos
-- **DataTable**: Tabelas com linhas arrastáveis
-- **Tabs**: Abas reordenaveis
-
-## Design Specs
-
-### Subcomponentes
-
-- **DndContext**: Provider de contexto para drag and drop
-- **Draggable**: Torna elemento arrastavel
-- **Droppable**: Define zona de soltar
-- **DragOverlay**: Overlay durante arraste
-- **SortableContext**: Contexto para listas ordenaveis
-- **SortableItem**: Item ordenavel
-
-### Estados
-
-- **Idle**: Estado normal
-- **Dragging**: Elemento sendo arrastado
-- **Over**: Sobre zona de drop valida
-- **Disabled**: Drag desabilitado
-
-### Tokens de Design
-
-#### Cores
-- Drag handle: `text-muted-foreground`
-- Drop zone active: `border-primary`, `bg-primary/5`
-- Drop zone invalid: `border-destructive`
-- Overlay: `bg-background`, `shadow-lg`
-
-#### Espacamento
-- Handle: `p-2`
-- Drop indicator: `h-0.5` ou `w-0.5`
-
-#### Motion
-- Duration: `200ms`
-- Easing: `ease-out`
-
-## API
-
-### DndContext
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `onDragStart` | `(event: DragStartEvent) => void` | - | Callback inicio do arraste |
-| `onDragMove` | `(event: DragMoveEvent) => void` | - | Callback durante movimento |
-| `onDragOver` | `(event: DragOverEvent) => void` | - | Callback sobre zona de drop |
-| `onDragEnd` | `(event: DragEndEvent) => void` | - | Callback fim do arraste |
-| `onDragCancel` | `(event: DragCancelEvent) => void` | - | Callback cancelamento |
-| `sensors` | `SensorDescriptor[]` | - | Sensores de input |
-| `collisionDetection` | `CollisionDetection` | - | Algoritmo de colisao |
-| `modifiers` | `Modifiers` | - | Modificadores de movimento |
-
-### Draggable
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `id` | `string` | required | ID unico do draggable |
-| `data` | `Record<string, unknown>` | - | Dados associados |
-| `disabled` | `boolean` | `false` | Desabilita arraste |
-
-### Droppable
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `id` | `string` | required | ID unico do droppable |
-| `data` | `Record<string, unknown>` | - | Dados associados |
-| `disabled` | `boolean` | `false` | Desabilita drop |
-
-### Interfaces TypeScript
-
-```typescript
-import type {
-  DragStartEvent,
-  DragEndEvent,
-  DragOverEvent,
-  UniqueIdentifier
-} from "@dnd-kit/core"
-
-export interface DragAndDropContextProps {
-  onDragStart?: (event: DragStartEvent) => void
-  onDragEnd?: (event: DragEndEvent) => void
-  onDragOver?: (event: DragOverEvent) => void
-  children: React.ReactNode
-}
-
-export interface DraggableProps {
-  id: UniqueIdentifier
-  data?: Record<string, unknown>
-  disabled?: boolean
-  children: React.ReactNode | ((props: DraggableRenderProps) => React.ReactNode)
-}
-
-export interface DroppableProps {
-  id: UniqueIdentifier
-  data?: Record<string, unknown>
-  disabled?: boolean
-  children: React.ReactNode | ((props: DroppableRenderProps) => React.ReactNode)
-}
-
-export interface SortableItemProps {
-  id: UniqueIdentifier
-  children: React.ReactNode
-}
-```
-
-### Comparacao com Referencias
-
-| Design System | Caracteristicas |
-|---------------|-----------------|
-| **dnd-kit** | Biblioteca base com sensores |
-| **react-beautiful-dnd** | Animacoes fluidas (deprecated) |
-| **@hello-pangea/dnd** | Fork mantido de react-beautiful-dnd |
-| **react-dnd** | API flexivel com backends |
-| **Atlassian** | Pragmatic drag and drop |
-| **Framer Motion** | Layout animations |
-
-## Acessibilidade (A11y)
-
-### Atributos ARIA
-- `aria-roledescription="sortable"`: Descreve item ordenavel
-- `aria-describedby`: Instrucoes de uso
-- `aria-pressed`: Estado de arraste
-- `aria-disabled`: Elemento desabilitado
-
-### Navegacao por Teclado
-- `Space` / `Enter`: Inicia/finaliza arraste
-- `Arrow Keys`: Move item durante arraste
-- `Escape`: Cancela arraste
-- `Tab`: Navega entre items
-
-### Screen Reader Announcements
-- Anuncio ao iniciar arraste
-- Posicao atual durante movimento
-- Confirmacao ao soltar
-- Cancelamento
-
-### Conformidade WCAG
-- **Nivel alvo**: WCAG 2.1 AA
-- Live regions para anuncios
-- Focus management durante drag
-- Alternativa via teclado
-
-## Exemplos
-
-### Lista Ordenavel Basica
-
-```tsx
-import {
-  DndContext,
-  SortableContext,
-  SortableItem,
-  arrayMove
-} from "@etus/ui"
-
-export function SortableListDemo() {
-  const [items, setItems] = React.useState(["A", "B", "C"])
-
-  return (
-    <DndContext
-      onDragEnd={({ active, over }) => {
-        if (over && active.id !== over.id) {
-          setItems((items) => {
-            const oldIndex = items.indexOf(active.id)
-            const newIndex = items.indexOf(over.id)
-            return arrayMove(items, oldIndex, newIndex)
-          })
-        }
-      }}
-    >
-      <SortableContext items={items}>
-        {items.map((item) => (
-          <SortableItem key={item} id={item}>
-            <div className="p-4 border rounded">{item}</div>
-          </SortableItem>
-        ))}
-      </SortableContext>
-    </DndContext>
-  )
-}
-```
-
-### Kanban Board
-
-```tsx
-import { DndContext, Draggable, Droppable } from "@etus/ui"
-
-export function KanbanDemo() {
-  const [columns, setColumns] = React.useState({
-    todo: ["Task 1", "Task 2"],
-    doing: ["Task 3"],
-    done: ["Task 4"],
-  })
-
-  return (
-    <DndContext onDragEnd={handleDragEnd}>
-      <div className="flex gap-4">
-        {Object.entries(columns).map(([columnId, tasks]) => (
-          <Droppable key={columnId} id={columnId}>
-            <div className="p-4 bg-muted rounded w-64">
-              <h3 className="font-bold mb-4">{columnId}</h3>
-              {tasks.map((task) => (
-                <Draggable key={task} id={task}>
-                  <div className="p-2 bg-background rounded mb-2">
-                    {task}
-                  </div>
-                </Draggable>
-              ))}
-            </div>
-          </Droppable>
-        ))}
-      </div>
-    </DndContext>
-  )
-}
-```
-
-### Com Drag Handle
-
-```tsx
-import { SortableItem, DragHandle } from "@etus/ui"
-import { GripVerticalIcon } from "lucide-react"
-
-export function SortableWithHandle() {
-  return (
-    <SortableItem id={item.id}>
-      <div className="flex items-center gap-2 p-4 border rounded">
-        <DragHandle>
-          <GripVerticalIcon className="h-4 w-4 text-muted-foreground" />
-        </DragHandle>
-        <span>{item.name}</span>
-      </div>
-    </SortableItem>
-  )
-}
-```
-
-## Testes
-
-### Estrategias de Teste
-
-```typescript
-describe("DragAndDrop", () => {
-  it("renders draggable items", () => {})
-  it("handles drag start event", () => {})
-  it("reorders items on drop", () => {})
-  it("cancels drag on escape", () => {})
-  it("supports keyboard drag", () => {})
-})
-```
-
-## Roadmap / Features Futuras
-
-- Construido sobre @dnd-kit/core e @dnd-kit/sortable
-- Suporte a touch, mouse e keyboard
-- Collision detection customizavel
-- Animations via CSS transforms
-- Suporte a nested sortables
-
-## Referências
-
-- [dnd-kit Documentation](https://docs.dndkit.com/)
-- [WAI-ARIA Drag and Drop](https://www.w3.org/WAI/ARIA/apg/patterns/drag-and-drop/)
-- [Pragmatic Drag and Drop](https://atlassian.design/components/pragmatic-drag-and-drop/)

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

@@ -1,4 +0,0 @@
-// DragAndDrop/index.ts
-export * from './DragAndDrop'
-export type * from './DragAndDrop.types'
-export * from './DragAndDrop.variants'