@etus/ui 0.1.0

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

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

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

@@ -0,0 +1,344 @@
+/* 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")
+    })
+  })
+})