@etus/ui 0.1.0

package/src/components/feedback/ConfirmModal/ConfirmModal.types.ts

@@ -0,0 +1,117 @@
+import type { ReactNode } from "react"
+
+/**
+ * ConfirmModal variant
+ * - default: Standard confirmation with primary button
+ * - destructive: Destructive action with visual emphasis
+ * - warning: Action requiring attention
+ */
+export type ConfirmModalVariant = "default" | "destructive" | "warning"
+
+/**
+ * ConfirmModal size
+ * - sm: Simple confirmations (max-w-sm)
+ * - md: Default size (max-w-md)
+ * - lg: Confirmations with more context (max-w-lg)
+ */
+export type ConfirmModalSize = "lg" | "md" | "sm"
+
+/**
+ * ConfirmModal component props
+ * Simplified wrapper over AlertDialog for confirmation dialogs
+ */
+export interface ConfirmModalProps {
+  /**
+   * Label for the cancel button
+   * @default "Cancelar"
+   */
+  cancelLabel?: string
+
+  /**
+   * Additional content below description
+   */
+  children?: ReactNode
+
+  /**
+   * Additional CSS classes for the content container
+   */
+  className?: string
+
+  /**
+   * Label for the confirm button
+   * @default "Confirmar"
+   */
+  confirmLabel?: string
+
+  /**
+   * Default open state for uncontrolled usage
+   * @default false
+   */
+  defaultOpen?: boolean
+
+  /**
+   * Modal description text
+   */
+  description?: string
+
+  /**
+   * Disabled state - disables buttons
+   * @default false
+   */
+  disabled?: boolean
+
+  /**
+   * Icon to display in the header
+   */
+  icon?: ReactNode
+
+  /**
+   * Loading state - disables buttons
+   * @default false
+   */
+  loading?: boolean
+
+  /**
+   * Callback when user cancels
+   */
+  onCancel?: () => void
+
+  /**
+   * Callback when user confirms
+   * Supports both sync and async operations
+   */
+  onConfirm?: () => Promise<void> | void
+
+  /**
+   * Callback when open state changes
+   */
+  onOpenChange?: (open: boolean) => void
+
+  /**
+   * Controlled open state
+   */
+  open?: boolean
+
+  /**
+   * Modal size
+   * @default "md"
+   */
+  size?: ConfirmModalSize
+
+  /**
+   * Modal title
+   * @default "Confirmar"
+   */
+  title?: string
+
+  /**
+   * Trigger element that opens the modal
+   */
+  trigger?: ReactNode
+
+  /**
+   * Visual variant
+   * @default "default"
+   */
+  variant?: ConfirmModalVariant
+}

package/src/components/feedback/ConfirmModal/README.md

@@ -0,0 +1,546 @@
+# ConfirmModal
+
+## Visão Geral
+
+O componente **ConfirmModal** e um wrapper simplificado sobre AlertDialog que fornece uma API declarativa para dialogos de confirmacao. Abstrai a complexidade dos subcomponentes AlertDialog em uma interface de props simples, ideal para confirmacoes rapidas e padronizadas.
+
+### Classificacao Atomica
+- **Categoria**: Molecules
+- **Subcategoria**: Feedback
+
+### Casos de Uso Comuns
+- Confirmacao de exclusao de itens
+- Confirmacao de acoes irreversiveis
+- Confirmacao de logout/saida
+- Confirmacao de descarte de alteracoes
+- Confirmacao de envio de formularios
+
+### Relacao com Outros Componentes
+- **AlertDialog**: Componente base usado internamente
+- **Dialog**: Para modais sem enfase em confirmacao
+- **DeleteDialog**: Variante especializada para exclusoes
+- **Button**: Trigger e acoes do modal
+
+## Design Specs
+
+### Variantes
+- **default**: Confirmacao padrao com botao primario
+- **destructive**: Confirmacao de acao destrutiva com enfase visual
+- **warning**: Confirmacao de acao que requer atencao
+
+### Tamanhos
+- **sm**: `max-w-sm` - Confirmacoes simples
+- **md**: `max-w-md` - Tamanho padrao
+- **lg**: `max-w-lg` - Confirmacoes com mais contexto
+
+### Estados
+- **Closed**: Modal oculto
+- **Open**: Modal visivel
+- **Loading**: Acao em andamento (botao desabilitado)
+- **Disabled**: Botoes desabilitados
+
+### Tokens de Design
+
+#### Cores
+Herda tokens do AlertDialog:
+- Background: `bg-background`
+- Overlay: `bg-black/50`
+- Destructive Action: `bg-destructive text-destructive-foreground`
+
+#### Espacamento
+- Padding: `p-6`
+- Gap: `gap-4`
+
+#### Tipografia
+- Title: `text-lg font-semibold`
+- Description: `text-sm text-muted-foreground`
+
+## API
+
+### Props
+
+| Prop | Tipo | Padrao | Descricao |
+|------|------|---------|-----------|
+| `open` | `boolean` | - | Estado aberto/fechado (controlado) |
+| `onOpenChange` | `(open: boolean) => void` | - | Callback de mudanca de estado |
+| `title` | `string` | `'Confirmar'` | Titulo do modal |
+| `description` | `string` | - | Texto descritivo |
+| `confirmLabel` | `string` | `'Confirmar'` | Label do botao de confirmacao |
+| `cancelLabel` | `string` | `'Cancelar'` | Label do botao de cancelamento |
+| `onConfirm` | `() => void \| Promise<void>` | - | Callback de confirmacao |
+| `onCancel` | `() => void` | - | Callback de cancelamento |
+| `variant` | `'default' \| 'destructive' \| 'warning'` | `'default'` | Estilo visual |
+| `loading` | `boolean` | `false` | Estado de carregamento |
+| `disabled` | `boolean` | `false` | Desabilita botoes |
+| `icon` | `ReactNode` | - | Icone no header |
+| `children` | `ReactNode` | - | Conteudo adicional |
+| `trigger` | `ReactNode` | - | Elemento que abre o modal |
+
+### Eventos
+| Evento | Payload | Descricao |
+|--------|---------|-----------|
+| `onConfirm` | `void` | Usuario confirmou a acao |
+| `onCancel` | `void` | Usuario cancelou |
+| `onOpenChange` | `boolean` | Estado de abertura mudou |
+
+### Interfaces TypeScript
+
+```typescript
+interface ConfirmModalProps {
+  // Estado
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  defaultOpen?: boolean
+
+  // Conteudo
+  title?: string
+  description?: string
+  icon?: React.ReactNode
+  children?: React.ReactNode
+
+  // Botoes
+  confirmLabel?: string
+  cancelLabel?: string
+  variant?: 'default' | 'destructive' | 'warning'
+
+  // Callbacks
+  onConfirm?: () => void | Promise<void>
+  onCancel?: () => void
+
+  // Estados
+  loading?: boolean
+  disabled?: boolean
+
+  // Trigger
+  trigger?: React.ReactNode
+
+  // Estilos
+  className?: string
+  size?: 'sm' | 'md' | 'lg'
+}
+```
+
+### Comparacao com Referencias
+
+| Design System | Wrapper Simplificado | Async Support | Variantes |
+|---------------|---------------------|---------------|-----------|
+| **ETUS** | Sim (ConfirmModal) | Sim | 3 |
+| Chakra UI | useDisclosure + Modal | Manual | via props |
+| MUI | Confirm Dialog | Manual | via props |
+| Ant Design | Modal.confirm() | Sim | 4 |
+| Mantine | modals.openConfirmModal() | Sim | via props |
+
+## Acessibilidade (A11y)
+
+### Atributos ARIA
+Herda do AlertDialog:
+- `role="alertdialog"`
+- `aria-modal="true"`
+- `aria-labelledby` (titulo)
+- `aria-describedby` (descricao)
+
+### Navegacao por Teclado
+- `Tab`: Navega entre botoes
+- `Enter`: Ativa botao focado
+- `Space`: Ativa botao focado
+- `Escape`: Nao fecha (comportamento alertdialog)
+
+### Tecnologias Assistivas
+- Titulo e descricao anunciados ao abrir
+- Botoes claramente rotulados
+- Estado de loading comunicado
+
+### Conformidade WCAG
+- Nivel alvo: WCAG 2.1 AA
+
+## Exemplos
+
+### Uso Basico
+
+```tsx
+import { useState } from 'react'
+import { ConfirmModal, Button } from '@etus/ui'
+
+function BasicConfirm() {
+  const [open, setOpen] = useState(false)
+
+  const handleConfirm = () => {
+    console.log('Confirmado!')
+    setOpen(false)
+  }
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Abrir</Button>
+
+      <ConfirmModal
+        open={open}
+        onOpenChange={setOpen}
+        title="Confirmar acao"
+        description="Voce tem certeza que deseja continuar?"
+        onConfirm={handleConfirm}
+      />
+    </>
+  )
+}
+```
+
+### Com Trigger Integrado
+
+```tsx
+import { ConfirmModal, Button } from '@etus/ui'
+
+function ConfirmWithTrigger() {
+  return (
+    <ConfirmModal
+      trigger={<Button>Excluir item</Button>}
+      title="Excluir item"
+      description="Esta acao nao pode ser desfeita."
+      confirmLabel="Excluir"
+      cancelLabel="Manter"
+      variant="destructive"
+      onConfirm={() => deleteItem()}
+    />
+  )
+}
+```
+
+### Variante Destructive
+
+```tsx
+import { ConfirmModal, Button } from '@etus/ui'
+import { Trash } from 'lucide-react'
+
+function DestructiveConfirm() {
+  return (
+    <ConfirmModal
+      trigger={<Button variant="destructive">Excluir conta</Button>}
+      title="Excluir conta permanentemente"
+      description="Todos os seus dados serao removidos. Esta acao e irreversivel."
+      icon={<Trash className="size-6 text-destructive" />}
+      confirmLabel="Sim, excluir minha conta"
+      cancelLabel="Cancelar"
+      variant="destructive"
+      onConfirm={async () => {
+        await deleteAccount()
+      }}
+    />
+  )
+}
+```
+
+### Com Loading Async
+
+```tsx
+import { useState } from 'react'
+import { ConfirmModal, Button } from '@etus/ui'
+
+function AsyncConfirm() {
+  const [open, setOpen] = useState(false)
+  const [loading, setLoading] = useState(false)
+
+  const handleConfirm = async () => {
+    setLoading(true)
+    try {
+      await performAsyncAction()
+      setOpen(false)
+    } finally {
+      setLoading(false)
+    }
+  }
+
+  return (
+    <>
+      <Button onClick={() => setOpen(true)}>Processar</Button>
+
+      <ConfirmModal
+        open={open}
+        onOpenChange={setOpen}
+        title="Processar dados"
+        description="Esta operacao pode levar alguns segundos."
+        confirmLabel={loading ? 'Processando...' : 'Confirmar'}
+        loading={loading}
+        onConfirm={handleConfirm}
+      />
+    </>
+  )
+}
+```
+
+### Variante Warning
+
+```tsx
+import { ConfirmModal, Button } from '@etus/ui'
+import { TriangleAlert } from 'lucide-react'
+
+function WarningConfirm() {
+  return (
+    <ConfirmModal
+      trigger={<Button variant="outline">Sair sem salvar</Button>}
+      title="Alteracoes nao salvas"
+      description="Voce tem alteracoes pendentes. Se sair agora, elas serao perdidas."
+      icon={<TriangleAlert className="size-6 text-amber-500" />}
+      confirmLabel="Sair sem salvar"
+      cancelLabel="Voltar e salvar"
+      variant="warning"
+      onConfirm={() => navigateAway()}
+    />
+  )
+}
+```
+
+### Com Conteudo Customizado
+
+```tsx
+import { ConfirmModal, Button, Input } from '@etus/ui'
+import { useState } from 'react'
+
+function ConfirmWithInput() {
+  const [confirmText, setConfirmText] = useState('')
+  const projectName = 'meu-projeto'
+
+  return (
+    <ConfirmModal
+      trigger={<Button variant="destructive">Excluir projeto</Button>}
+      title={`Excluir "${projectName}"`}
+      description={`Digite "${projectName}" para confirmar a exclusao.`}
+      confirmLabel="Excluir projeto"
+      variant="destructive"
+      disabled={confirmText !== projectName}
+      onConfirm={() => deleteProject()}
+    >
+      <Input
+        value={confirmText}
+        onChange={(e) => setConfirmText(e.target.value)}
+        placeholder={projectName}
+        className="mt-4"
+      />
+    </ConfirmModal>
+  )
+}
+```
+
+### Multiplas Confirmacoes
+
+```tsx
+import { ConfirmModal, Button } from '@etus/ui'
+
+function MultipleConfirms() {
+  return (
+    <div className="space-x-2">
+      <ConfirmModal
+        trigger={<Button variant="outline">Arquivar</Button>}
+        title="Arquivar item"
+        description="O item sera movido para os arquivados."
+        confirmLabel="Arquivar"
+        onConfirm={() => archiveItem()}
+      />
+
+      <ConfirmModal
+        trigger={<Button variant="outline">Duplicar</Button>}
+        title="Duplicar item"
+        description="Uma copia do item sera criada."
+        confirmLabel="Duplicar"
+        onConfirm={() => duplicateItem()}
+      />
+
+      <ConfirmModal
+        trigger={<Button variant="destructive">Excluir</Button>}
+        title="Excluir item"
+        description="Esta acao nao pode ser desfeita."
+        confirmLabel="Excluir"
+        variant="destructive"
+        onConfirm={() => deleteItem()}
+      />
+    </div>
+  )
+}
+```
+
+### Usando com React Hook Form
+
+```tsx
+import { useForm } from 'react-hook-form'
+import { ConfirmModal, Button, Form } from '@etus/ui'
+
+function FormWithConfirm() {
+  const form = useForm()
+  const [showConfirm, setShowConfirm] = useState(false)
+
+  const onSubmit = (data) => {
+    setShowConfirm(true)
+  }
+
+  const handleConfirm = async () => {
+    await submitToAPI(form.getValues())
+    setShowConfirm(false)
+    form.reset()
+  }
+
+  return (
+    <>
+      <Form {...form}>
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          {/* campos do form */}
+          <Button type="submit">Enviar</Button>
+        </form>
+      </Form>
+
+      <ConfirmModal
+        open={showConfirm}
+        onOpenChange={setShowConfirm}
+        title="Confirmar envio"
+        description="Deseja enviar o formulario?"
+        onConfirm={handleConfirm}
+      />
+    </>
+  )
+}
+```
+
+## Testes
+
+### Estrategias de Teste
+
+#### Testes Unitarios
+- Renderizacao com props basicas
+- Trigger abre o modal
+- Callbacks sao chamados corretamente
+- Estado loading desabilita botoes
+
+#### Testes de Integracao
+- Fluxo completo de confirmacao
+- Fluxo com async
+- Cancelamento fecha o modal
+
+### Exemplos de Codigo
+
+```typescript
+import { describe, it, expect, vi } from 'vitest'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import { ConfirmModal } from './ConfirmModal'
+
+describe('ConfirmModal', () => {
+  it('renders trigger and opens on click', async () => {
+    const user = userEvent.setup()
+
+    render(
+      <ConfirmModal
+        trigger={<button>Open</button>}
+        title="Confirm"
+        description="Are you sure?"
+      />
+    )
+
+    await user.click(screen.getByText('Open'))
+
+    expect(screen.getByText('Confirm')).toBeInTheDocument()
+    expect(screen.getByText('Are you sure?')).toBeInTheDocument()
+  })
+
+  it('calls onConfirm when confirm button is clicked', async () => {
+    const user = userEvent.setup()
+    const onConfirm = vi.fn()
+
+    render(
+      <ConfirmModal
+        open={true}
+        onOpenChange={() => {}}
+        title="Confirm"
+        onConfirm={onConfirm}
+        confirmLabel="Yes"
+      />
+    )
+
+    await user.click(screen.getByText('Yes'))
+
+    expect(onConfirm).toHaveBeenCalledTimes(1)
+  })
+
+  it('calls onCancel when cancel button is clicked', async () => {
+    const user = userEvent.setup()
+    const onCancel = vi.fn()
+
+    render(
+      <ConfirmModal
+        open={true}
+        onOpenChange={() => {}}
+        title="Confirm"
+        onCancel={onCancel}
+        cancelLabel="No"
+      />
+    )
+
+    await user.click(screen.getByText('No'))
+
+    expect(onCancel).toHaveBeenCalledTimes(1)
+  })
+
+  it('disables buttons when loading', () => {
+    render(
+      <ConfirmModal
+        open={true}
+        onOpenChange={() => {}}
+        title="Confirm"
+        loading={true}
+      />
+    )
+
+    expect(screen.getByText('Confirmar')).toBeDisabled()
+    expect(screen.getByText('Cancelar')).toBeDisabled()
+  })
+
+  it('applies destructive variant styles', () => {
+    render(
+      <ConfirmModal
+        open={true}
+        onOpenChange={() => {}}
+        title="Delete"
+        variant="destructive"
+        confirmLabel="Delete"
+      />
+    )
+
+    const confirmButton = screen.getByText('Delete')
+    expect(confirmButton).toHaveClass('bg-destructive')
+  })
+
+  it('handles async onConfirm', async () => {
+    const user = userEvent.setup()
+    const onConfirm = vi.fn(() => new Promise((r) => setTimeout(r, 100)))
+
+    render(
+      <ConfirmModal
+        open={true}
+        onOpenChange={() => {}}
+        title="Confirm"
+        onConfirm={onConfirm}
+      />
+    )
+
+    await user.click(screen.getByText('Confirmar'))
+
+    await waitFor(() => {
+      expect(onConfirm).toHaveBeenCalled()
+    })
+  })
+})
+```
+
+---
+
+## Roadmap / Features Futuras
+
+- Wrapper sobre AlertDialog para API simplificada
+- Suporta callbacks sync e async
+- Estado loading integrado
+- Variantes pre-definidas para casos comuns
+- Trigger opcional via prop
+
+## Referências
+
+- [AlertDialog](../AlertDialog/README.md) - Componente base
+- [Ant Design Modal.confirm](https://ant.design/components/modal#components-modal-demo-confirm)
+- [Mantine Confirm Modal](https://mantine.dev/others/modals/#confirm-modal)
+- [Chakra UI Confirmation Dialog](https://chakra-ui.com/docs/components/alert-dialog)

package/src/components/feedback/ConfirmModal/index.ts

@@ -0,0 +1,2 @@
+export type * from './ConfirmModal.types'
+export * from './ConfirmModal'