@etus/ui 0.1.1 → 0.1.3

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

@@ -1,330 +0,0 @@
-# EventCalendar
-
-## Visão Geral
-
-O EventCalendar e um componente avancado para visualizacao e gerenciamento de eventos em formato de calendario. Suporta visualizacoes de mes, semana e dia, criacao/edicao de eventos via drag and drop, e integracao com sistemas de agendamento.
-
-### Classificacao Atomica
-- **Categoria**: Organisms
-- **Subcategoria**: Scheduling / Time Management
-
-### Casos de Uso Comuns
-- Calendario de agendamentos
-- Planejamento de reunioes
-- Gestao de recursos e salas
-- Timeline de projetos
-- Calendario de disponibilidade
-- Agenda pessoal/corporativa
-
-### Relacao com Outros Componentes
-- **Calendar**: Componente base de selecao de datas
-- **Dialog**: Modal para criacao/edicao de eventos
-- **Popover**: Preview rapido de eventos
-- **Badge**: Indicadores de categoria/status
-
-## Design Specs
-
-### Subcomponentes
-
-- **EventCalendar**: Container principal
-- **EventCalendarHeader**: Navegacao e controles
-- **EventCalendarMonth**: Visualizacao mensal
-- **EventCalendarWeek**: Visualizacao semanal
-- **EventCalendarDay**: Visualizacao diaria
-- **EventCalendarEvent**: Renderizacao de evento
-- **EventCalendarToolbar**: Filtros e acoes
-
-### Visualizacoes
-- **month**: Grade mensal com eventos empilhados
-- **week**: Semana com slots de hora
-- **day**: Dia unico com timeline detalhada
-- **agenda**: Lista de eventos por data
-
-### Estados
-
-- **Default**: Visualizacao normal
-- **Loading**: Carregando eventos
-- **Editing**: Editando evento
-- **Creating**: Criando novo evento
-- **Dragging**: Arrastando evento
-
-### Tokens de Design
-
-#### Cores
-- Background: `bg-background`
-- Today: `bg-primary/10`
-- Weekend: `bg-muted/50`
-- Event categories: Cores semanticas variaveis
-
-#### Espacamento
-- Cell padding: `p-1`
-- Event margin: `m-0.5`
-- Header height: `h-12`
-
-#### Tipografia
-- Day number: `text-sm`
-- Event title: `text-xs`, `font-medium`
-- Time: `text-xs`, `text-muted-foreground`
-
-## API
-
-### Props
-
-| Prop | Tipo | Padrao | Descricao |
-|------|------|--------|-----------|
-| `events` | `CalendarEvent[]` | `[]` | Lista de eventos |
-| `view` | `"month" \| "week" \| "day" \| "agenda"` | `"month"` | Visualizacao atual |
-| `date` | `Date` | `new Date()` | Data em foco |
-| `onDateChange` | `(date: Date) => void` | - | Callback mudanca de data |
-| `onViewChange` | `(view: View) => void` | - | Callback mudanca de view |
-| `onEventClick` | `(event: CalendarEvent) => void` | - | Callback click em evento |
-| `onEventCreate` | `(slot: TimeSlot) => void` | - | Callback criar evento |
-| `onEventUpdate` | `(event: CalendarEvent) => void` | - | Callback atualizar evento |
-| `onEventDelete` | `(id: string) => void` | - | Callback deletar evento |
-| `editable` | `boolean` | `true` | Permite edicao |
-| `selectable` | `boolean` | `true` | Permite selecao de slots |
-| `weekStartsOn` | `0 \| 1` | `0` | Primeiro dia da semana |
-| `minTime` | `string` | `"00:00"` | Hora minima exibida |
-| `maxTime` | `string` | `"24:00"` | Hora maxima exibida |
-
-### Interfaces TypeScript
-
-```typescript
-export interface CalendarEvent {
-  id: string
-  title: string
-  start: Date
-  end: Date
-  allDay?: boolean
-  color?: string
-  category?: string
-  description?: string
-  location?: string
-  recurring?: RecurrenceRule
-  metadata?: Record<string, unknown>
-}
-
-export interface TimeSlot {
-  start: Date
-  end: Date
-  allDay?: boolean
-}
-
-export interface RecurrenceRule {
-  frequency: "daily" | "weekly" | "monthly" | "yearly"
-  interval?: number
-  until?: Date
-  count?: number
-  byDay?: number[]
-}
-
-export interface EventCalendarProps {
-  events: CalendarEvent[]
-  view?: "month" | "week" | "day" | "agenda"
-  date?: Date
-  onDateChange?: (date: Date) => void
-  onViewChange?: (view: string) => void
-  onEventClick?: (event: CalendarEvent) => void
-  onEventCreate?: (slot: TimeSlot) => void
-  onEventUpdate?: (event: CalendarEvent, changes: Partial<CalendarEvent>) => void
-  onEventDelete?: (id: string) => void
-  editable?: boolean
-  selectable?: boolean
-  className?: string
-}
-```
-
-### Comparacao com Referencias
-
-| Design System | Caracteristicas |
-|---------------|-----------------|
-| **FullCalendar** | Biblioteca completa de calendario |
-| **react-big-calendar** | Inspiracao para layout |
-| **Google Calendar** | UX de referencia |
-| **Outlook** | Scheduling features |
-| **Cal.com** | Booking integration |
-| **Calendly** | Time slot selection |
-
-## Acessibilidade (A11y)
-
-### Atributos ARIA
-- `role="grid"`: Estrutura de calendario
-- `role="gridcell"`: Celulas de dias
-- `aria-label`: Descricao de datas e eventos
-- `aria-selected`: Data/evento selecionado
-- `aria-current="date"`: Data atual
-
-### Navegacao por Teclado
-- `Arrow Keys`: Navega entre datas
-- `Enter`: Seleciona data/abre evento
-- `Tab`: Navega entre eventos
-- `Page Up/Down`: Mes/semana anterior/proxima
-- `Home`: Inicio do periodo
-- `End`: Fim do periodo
-
-### Conformidade WCAG
-- **Nivel alvo**: WCAG 2.1 AA
-- Anuncios de eventos para screen readers
-- Contraste em indicadores de eventos
-- Focus visible em todos elementos interativos
-
-## Exemplos
-
-### Uso Basico
-
-```tsx
-import { EventCalendar } from "@etus/ui"
-
-export function CalendarDemo() {
-  const [events, setEvents] = React.useState<CalendarEvent[]>([
-    {
-      id: "1",
-      title: "Team Meeting",
-      start: new Date(2024, 0, 15, 10, 0),
-      end: new Date(2024, 0, 15, 11, 0),
-    },
-  ])
-
-  return (
-    <EventCalendar
-      events={events}
-      onEventClick={(event) => console.log("Clicked:", event)}
-    />
-  )
-}
-```
-
-### Com Criacao de Eventos
-
-```tsx
-import { EventCalendar, Dialog, DialogContent } from "@etus/ui"
-
-export function EditableCalendar() {
-  const [events, setEvents] = React.useState([])
-  const [creating, setCreating] = React.useState(null)
-
-  return (
-    <>
-      <EventCalendar
-        events={events}
-        selectable
-        onEventCreate={(slot) => setCreating(slot)}
-        onEventUpdate={(event, changes) => {
-          setEvents(events.map(e =>
-            e.id === event.id ? { ...e, ...changes } : e
-          ))
-        }}
-      />
-      <Dialog open={!!creating} onOpenChange={() => setCreating(null)}>
-        <DialogContent>
-          <EventForm
-            slot={creating}
-            onSubmit={(event) => {
-              setEvents([...events, event])
-              setCreating(null)
-            }}
-          />
-        </DialogContent>
-      </Dialog>
-    </>
-  )
-}
-```
-
-### Visualizacao Semanal
-
-```tsx
-import { EventCalendar } from "@etus/ui"
-
-export function WeekView() {
-  return (
-    <EventCalendar
-      events={events}
-      view="week"
-      minTime="08:00"
-      maxTime="18:00"
-    />
-  )
-}
-```
-
-### Com Drag and Drop
-
-```tsx
-import { EventCalendar } from "@etus/ui"
-
-export function DraggableEvents() {
-  const handleEventDrop = (event, newStart, newEnd) => {
-    updateEvent(event.id, { start: newStart, end: newEnd })
-  }
-
-  return (
-    <EventCalendar
-      events={events}
-      editable
-      onEventUpdate={(event, changes) => {
-        // Chamado apos drag and drop
-        updateEvent(event.id, changes)
-      }}
-    />
-  )
-}
-```
-
-### Com Categorias
-
-```tsx
-import { EventCalendar } from "@etus/ui"
-
-const categories = {
-  meeting: { color: "blue", label: "Meetings" },
-  deadline: { color: "red", label: "Deadlines" },
-  personal: { color: "green", label: "Personal" },
-}
-
-export function CategorizedCalendar() {
-  const events = [
-    { id: "1", title: "Sprint Review", category: "meeting", ... },
-    { id: "2", title: "Project Due", category: "deadline", ... },
-  ]
-
-  return (
-    <EventCalendar
-      events={events.map(e => ({
-        ...e,
-        color: categories[e.category]?.color
-      }))}
-    />
-  )
-}
-```
-
-## Testes
-
-### Estrategias de Teste
-
-```typescript
-describe("EventCalendar", () => {
-  it("renders events on correct dates", () => {})
-  it("navigates between months", () => {})
-  it("switches between views", () => {})
-  it("handles event click", () => {})
-  it("creates event on slot selection", () => {})
-  it("drags event to new time", () => {})
-})
-```
-
-## Roadmap / Features Futuras
-
-- Considerar virtualizacao para muitos eventos
-- Suporte a timezone via date-fns-tz
-- Eventos recorrentes expandidos no client
-- Collision detection para empilhamento
-- Responsive: stack weeks em mobile
-
-## Referências
-
-- [FullCalendar](https://fullcalendar.io/)
-- [react-big-calendar](https://jquense.github.io/react-big-calendar/)
-- [WAI-ARIA Date Picker](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/examples/datepicker-dialog/)
-- [Google Calendar Design](https://calendar.google.com/)

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

@@ -1,35 +0,0 @@
-export type {
-  CalendarEvent,
-  EventCalendarAgendaProps,
-  EventCalendarDayProps,
-  EventCalendarEventProps,
-  EventCalendarHeaderProps,
-  EventCalendarMonthProps,
-  EventCalendarProps,
-  EventCalendarView,
-  EventCalendarWeekProps,
-  RecurrenceRule,
-  TimeSlot,
-} from "./EventCalendar.types"
-
-export {
-  EventCalendar,
-  EventCalendarAgenda,
-  EventCalendarDay,
-  EventCalendarEvent,
-  EventCalendarHeader,
-  EventCalendarMonth,
-  EventCalendarWeek,
-} from "./EventCalendar"
-
-export {
-  eventCalendarAgendaItemVariants,
-  eventCalendarCellVariants,
-  eventCalendarDayNumberVariants,
-  eventCalendarEventVariants,
-  eventCalendarHeaderVariants,
-  eventCalendarTimeSlotVariants,
-  eventCalendarVariants,
-  eventCalendarViewButtonVariants,
-  getEventVariant,
-} from "./EventCalendar.variants"

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

@@ -1,344 +0,0 @@
-/* eslint-disable @typescript-eslint/no-non-null-assertion -- Test file patterns */
-import { render, screen } from "@testing-library/react"
-import userEvent from "@testing-library/user-event"
-import { describe, expect, it, vi } from "vitest"
-
-import { FileDropzone } from "./FileDropzone"
-
-/**
- * Helper to get the dropzone element by its data-slot attribute
- */
-function getDropzone() {
-  return document.querySelector('[data-slot="file-dropzone"]')
-}
-
-describe("FileDropzone", () => {
-  describe("Rendering", () => {
-    it("renders dropzone with default content", () => {
-      render(<FileDropzone onDrop={vi.fn()} />)
-
-      expect(
-        screen.getByText(/drag files here or click to upload/i)
-      ).toBeInTheDocument()
-    })
-
-    it("renders custom children", () => {
-      render(
-        <FileDropzone onDrop={vi.fn()}>
-          <p>Custom content</p>
-        </FileDropzone>
-      )
-
-      expect(screen.getByText("Custom content")).toBeInTheDocument()
-    })
-
-    it("renders with render props", () => {
-      render(
-        <FileDropzone onDrop={vi.fn()}>
-          {({ isDragActive }) => (
-            <p>{isDragActive ? "Drop here" : "Drag files"}</p>
-          )}
-        </FileDropzone>
-      )
-
-      expect(screen.getByText("Drag files")).toBeInTheDocument()
-    })
-
-    it("renders with className", () => {
-      render(
-        <FileDropzone className="custom-class" onDrop={vi.fn()}>
-          <span>Content</span>
-        </FileDropzone>
-      )
-
-      const dropzone = getDropzone()
-      expect(dropzone).toHaveClass("custom-class")
-    })
-
-    it("renders compact variant", () => {
-      render(
-        <FileDropzone variant="compact" onDrop={vi.fn()}>
-          <span>Content</span>
-        </FileDropzone>
-      )
-
-      const dropzone = getDropzone()
-      expect(dropzone).toHaveClass("p-4")
-    })
-
-    it("renders image variant", () => {
-      render(
-        <FileDropzone variant="image" onDrop={vi.fn()}>
-          <span>Content</span>
-        </FileDropzone>
-      )
-
-      const dropzone = getDropzone()
-      expect(dropzone).toHaveClass("aspect-video")
-    })
-  })
-
-  describe("File Input", () => {
-    it("has hidden file input", () => {
-      render(<FileDropzone onDrop={vi.fn()}>Drop here</FileDropzone>)
-
-      const input = document.querySelector('input[type="file"]')
-      expect(input).toBeInTheDocument()
-    })
-
-    it("opens file dialog on click", async () => {
-      const user = userEvent.setup()
-      render(
-        <FileDropzone onDrop={vi.fn()}>
-          <span>Click me</span>
-        </FileDropzone>
-      )
-
-      const dropzone = getDropzone()
-      expect(dropzone).toBeInTheDocument()
-
-      // Verify input has proper type
-      const input = document.querySelector('input[type="file"]')
-      expect(input).toHaveAttribute("type", "file")
-
-      // Click should trigger focus on dropzone
-      await user.click(dropzone!)
-    })
-
-    it("supports multiple files", () => {
-      render(
-        <FileDropzone multiple onDrop={vi.fn()}>
-          Drop here
-        </FileDropzone>
-      )
-
-      const input = document.querySelector('input[type="file"]')
-      expect(input).toHaveAttribute("multiple")
-    })
-
-    it("supports single file", () => {
-      render(
-        <FileDropzone multiple={false} onDrop={vi.fn()}>
-          Drop here
-        </FileDropzone>
-      )
-
-      const input = document.querySelector('input[type="file"]')
-      expect(input).not.toHaveAttribute("multiple")
-    })
-  })
-
-  describe("States", () => {
-    it("applies disabled state", () => {
-      render(
-        <FileDropzone disabled onDrop={vi.fn()}>
-          <span>Disabled</span>
-        </FileDropzone>
-      )
-
-      const dropzone = getDropzone()
-      expect(dropzone).toHaveAttribute("data-disabled", "true")
-    })
-
-    it("disables interaction when disabled", () => {
-      render(
-        <FileDropzone disabled onDrop={vi.fn()}>
-          <span>Disabled</span>
-        </FileDropzone>
-      )
-
-      // react-dropzone handles disabled at container level, not input
-      const dropzone = getDropzone()
-      expect(dropzone).toHaveAttribute("aria-disabled", "true")
-      expect(dropzone).toHaveClass("pointer-events-none")
-    })
-
-    it("has data-slot attribute", () => {
-      render(
-        <FileDropzone onDrop={vi.fn()}>
-          <span>Content</span>
-        </FileDropzone>
-      )
-
-      const dropzone = getDropzone()
-      expect(dropzone).toHaveAttribute("data-slot", "file-dropzone")
-    })
-
-    it("has proper aria attributes when disabled", () => {
-      render(
-        <FileDropzone disabled onDrop={vi.fn()}>
-          <span>Disabled</span>
-        </FileDropzone>
-      )
-
-      const dropzone = getDropzone()
-      expect(dropzone).toHaveAttribute("aria-disabled", "true")
-    })
-
-    it("has drag state data attributes", () => {
-      render(
-        <FileDropzone onDrop={vi.fn()}>
-          <span>Drop here</span>
-        </FileDropzone>
-      )
-
-      const dropzone = getDropzone()
-      expect(dropzone).toHaveAttribute("data-drag-active", "false")
-      expect(dropzone).toHaveAttribute("data-drag-accept", "false")
-      expect(dropzone).toHaveAttribute("data-drag-reject", "false")
-    })
-  })
-
-  describe("Keyboard Navigation", () => {
-    it("can be focused via tab", async () => {
-      const user = userEvent.setup()
-      render(
-        <FileDropzone onDrop={vi.fn()}>
-          <span>Focus me</span>
-        </FileDropzone>
-      )
-
-      await user.tab()
-
-      const dropzone = getDropzone()
-      expect(dropzone).toHaveFocus()
-    })
-
-    it("is focusable when not disabled", () => {
-      render(
-        <FileDropzone onDrop={vi.fn()}>
-          <span>Content</span>
-        </FileDropzone>
-      )
-
-      const dropzone = getDropzone()
-      expect(dropzone).toHaveAttribute("tabindex", "0")
-    })
-
-    it("respects noKeyboard prop", () => {
-      render(
-        <FileDropzone noKeyboard onDrop={vi.fn()}>
-          <span>No keyboard</span>
-        </FileDropzone>
-      )
-
-      const input = document.querySelector('input[type="file"]')
-      expect(input).toHaveAttribute("tabindex", "-1")
-    })
-  })
-
-  describe("Props", () => {
-    it("disables click when noClick is true", () => {
-      render(
-        <FileDropzone noClick onDrop={vi.fn()}>
-          <span>No click</span>
-        </FileDropzone>
-      )
-
-      // Component should still render
-      expect(screen.getByText("No click")).toBeInTheDocument()
-    })
-
-    it("disables drag when noDrag is true", () => {
-      render(
-        <FileDropzone noDrag onDrop={vi.fn()}>
-          <span>No drag</span>
-        </FileDropzone>
-      )
-
-      expect(screen.getByText("No drag")).toBeInTheDocument()
-    })
-
-    it("shows max size in default content", () => {
-      render(<FileDropzone maxSize={5 * 1024 * 1024} onDrop={vi.fn()} />)
-
-      expect(screen.getByText(/max size: 5 mb/i)).toBeInTheDocument()
-    })
-
-    it("shows max files in default content", () => {
-      render(<FileDropzone maxFiles={3} onDrop={vi.fn()} />)
-
-      expect(screen.getByText(/max 3 files/i)).toBeInTheDocument()
-    })
-
-    it("shows singular file text for maxFiles=1", () => {
-      render(<FileDropzone maxFiles={1} onDrop={vi.fn()} />)
-
-      expect(screen.getByText(/max 1 file$/i)).toBeInTheDocument()
-    })
-  })
-
-  describe("Render Props", () => {
-    it("provides dropzone state to children function", () => {
-      render(
-        <FileDropzone onDrop={vi.fn()}>
-          {(state) => (
-            <div data-testid="state-container">
-              <span data-testid="drag-active">
-                {state.isDragActive ? "yes" : "no"}
-              </span>
-              <span data-testid="drag-accept">
-                {state.isDragAccept ? "yes" : "no"}
-              </span>
-              <span data-testid="drag-reject">
-                {state.isDragReject ? "yes" : "no"}
-              </span>
-              <span data-testid="focused">
-                {state.isFocused ? "yes" : "no"}
-              </span>
-            </div>
-          )}
-        </FileDropzone>
-      )
-
-      // Initial state should show no drag activity
-      expect(screen.getByTestId("drag-active")).toHaveTextContent("no")
-      expect(screen.getByTestId("drag-accept")).toHaveTextContent("no")
-      expect(screen.getByTestId("drag-reject")).toHaveTextContent("no")
-    })
-
-    it("provides open function to children", () => {
-      const _openMock = vi.fn()
-
-      render(
-        <FileDropzone onDrop={vi.fn()}>
-          {(state) => (
-            <button type="button" onClick={state.open}>
-              Open Dialog
-            </button>
-          )}
-        </FileDropzone>
-      )
-
-      expect(screen.getByText("Open Dialog")).toBeInTheDocument()
-    })
-
-    it("provides accepted files array", () => {
-      render(
-        <FileDropzone onDrop={vi.fn()}>
-          {(state) => (
-            <span data-testid="accepted-count">
-              {state.acceptedFiles.length}
-            </span>
-          )}
-        </FileDropzone>
-      )
-
-      expect(screen.getByTestId("accepted-count")).toHaveTextContent("0")
-    })
-
-    it("provides file rejections array", () => {
-      render(
-        <FileDropzone onDrop={vi.fn()}>
-          {(state) => (
-            <span data-testid="rejection-count">
-              {state.fileRejections.length}
-            </span>
-          )}
-        </FileDropzone>
-      )
-
-      expect(screen.getByTestId("rejection-count")).toHaveTextContent("0")
-    })
-  })
-})