@softize/opus 8.6.6

package/src/ui/components/patterns/confirm.tsx

@@ -0,0 +1,226 @@
+/**
+ * `dialog` — o trio imperativo (alert · confirm · prompt) em UMA linha.
+ *
+ *   await dialog.alert({ title: 'Sessão expirada', description: 'Você será desconectado.' })
+ *   if (await dialog.confirm({ title: 'Excluir a sessão?', variant: 'destructive' })) …
+ *   const nome = await dialog.prompt({ title: 'Nome do snapshot' })
+ *
+ * Mesma forma do `toast` (superfície imperativa + host no shell), com uma diferença: eles
+ * RESPONDEM — `alert` devolve `Promise<void>`, `confirm` `Promise<boolean>`, `prompt`
+ * `Promise<string | null>`. É o que tira as ~15 linhas de JSX que cada tela montava.
+ *
+ * Namespace `dialog` de propósito: `window.alert/confirm/prompt` são globais do browser, e
+ * um import esquecido cairia no nativo (cinza, sem tema) sem erro. `window.dialog` não
+ * existe — a família fica imune ao footgun. `confirm()` segue exportado como alias.
+ *
+ * Por baixo é o <AlertDialog>: `role="alertdialog"`, não fecha no clique fora, foco preso
+ * — a semântica que uma interrupção que EXIGE resposta pede. ESC/Cancelar resolve o "não"
+ * de cada tipo (void, `false`, `null`).
+ */
+
+import * as React from 'react'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogTitle,
+} from '../primitives/alert-dialog.tsx'
+import { Input } from '../primitives/input.tsx'
+
+/** Campos comuns aos três — o corpo (`body`) é o que o texto da `description` não expressa. */
+interface DialogBase {
+  title: React.ReactNode
+  description?: React.ReactNode
+  /** Ícone grande acima do título (o quadro do AlertDialogMedia). */
+  media?: React.ReactNode
+  /** Conteúdo próprio entre a descrição e os botões (lista, detalhe destacado). */
+  body?: React.ReactNode
+  /** Rótulo do botão que confirma. */
+  action?: string
+}
+
+/** `alert` — reconhecimento obrigatório, um botão só. */
+export interface AlertOptions extends DialogBase {}
+
+/** `confirm` — pergunta de sim/não. */
+export interface ConfirmOptions extends DialogBase {
+  cancel?: string
+  /** `destructive` pinta o botão de confirmar — o que apaga tem que parecer o que apaga. */
+  variant?: 'default' | 'destructive'
+}
+
+/** `prompt` — uma string livre. Form de verdade (campos, contrato) → ActionFormDialog. */
+export interface PromptOptions extends DialogBase {
+  cancel?: string
+  variant?: 'default' | 'destructive'
+  placeholder?: string
+  defaultValue?: string
+}
+
+type Pending =
+  | ({ kind: 'alert'; id: number; resolve: () => void } & AlertOptions)
+  | ({ kind: 'confirm'; id: number; resolve: (ok: boolean) => void } & ConfirmOptions)
+  | ({ kind: 'prompt'; id: number; resolve: (value: string | null) => void } & PromptOptions)
+
+let nextId = 0
+let listener: ((p: Pending) => void) | null = null
+
+/** Sem `<DialogHost />` montado, LANÇA em vez de deixar a promise pendurada (clique sem
+ *  efeito é o pior desfecho de uma interrupção que exige resposta). */
+function requireHost(fn: string): Error | null {
+  if (listener !== null) return null
+  return new Error(
+    `${fn} foi chamado sem <DialogHost /> montado — ponha o host no shell do app (ao lado do <Toaster />).`,
+  )
+}
+
+export const dialog = {
+  /** Avisa e espera o "OK". `Promise<void>` — só reconhecimento, sem decisão. */
+  alert(options: AlertOptions): Promise<void> {
+    const err = requireHost('dialog.alert()')
+    if (err !== null) return Promise.reject(err)
+    return new Promise<void>((resolve) => {
+      listener?.({ ...options, kind: 'alert', id: nextId++, resolve })
+    })
+  },
+  /** Pergunta sim/não. `Promise<boolean>` — fechar/ESC resolve `false`. */
+  confirm(options: ConfirmOptions): Promise<boolean> {
+    const err = requireHost('dialog.confirm()')
+    if (err !== null) return Promise.reject(err)
+    return new Promise<boolean>((resolve) => {
+      listener?.({ ...options, kind: 'confirm', id: nextId++, resolve })
+    })
+  },
+  /** Pede uma string. `Promise<string | null>` — fechar/ESC/Cancelar resolve `null`. */
+  prompt(options: PromptOptions): Promise<string | null> {
+    const err = requireHost('dialog.prompt()')
+    if (err !== null) return Promise.reject(err)
+    return new Promise<string | null>((resolve) => {
+      listener?.({ ...options, kind: 'prompt', id: nextId++, resolve })
+    })
+  },
+}
+
+/** Alias retrocompatível — `confirm()` é `dialog.confirm()`. */
+export function confirm(options: ConfirmOptions): Promise<boolean> {
+  return dialog.confirm(options)
+}
+
+/**
+ * O host — um por app, no shell. Enfileira: uma por vez (duas caixas empilhadas seriam
+ * ambíguas sobre qual clique respondeu o quê).
+ */
+export function DialogHost(): React.ReactElement {
+  const [queue, setQueue] = React.useState<Pending[]>([])
+  const current = queue[0]
+  const [text, setText] = React.useState('')
+
+  React.useEffect(() => {
+    listener = (p) => setQueue((q) => [...q, p])
+    return () => {
+      listener = null
+    }
+  }, [])
+
+  // Reseta o input quando a pergunta corrente troca (defaultValue do prompt, ou vazio).
+  React.useEffect(() => {
+    setText(current !== undefined && current.kind === 'prompt' ? (current.defaultValue ?? '') : '')
+  }, [current?.id]) // eslint-disable-line react-hooks/exhaustive-deps
+
+  // Resolve a pergunta `id` — e SÓ ela. A 2ª chamada pro mesmo id (clique + o fechamento
+  // que o Radix dispara em seguida) é inócua: a promise já resolveu e a fila já andou.
+  const drop = (id: number, apply: (p: Pending) => void): void => {
+    setQueue((q) => {
+      if (q[0]?.id !== id) return q
+      apply(q[0])
+      return q.slice(1)
+    })
+  }
+  // Fechar É responder "não" — o "não" de cada tipo.
+  const cancel = (p: Pending): void => {
+    if (p.kind === 'alert') p.resolve()
+    else if (p.kind === 'confirm') p.resolve(false)
+    else p.resolve(null)
+  }
+  const accept = (p: Pending, value: string): void => {
+    if (p.kind === 'alert') p.resolve()
+    else if (p.kind === 'confirm') p.resolve(true)
+    else p.resolve(value)
+  }
+
+  const variant = current !== undefined && current.kind !== 'alert' ? current.variant : undefined
+  const defaultAction = current?.kind === 'alert' ? 'OK' : 'Confirmar'
+
+  return (
+    <AlertDialog
+      open={current !== undefined}
+      onOpenChange={(open) => {
+        if (!open && current !== undefined) drop(current.id, cancel)
+      }}
+    >
+      {current !== undefined && (
+        <AlertDialogContent
+          data-slot="dialog"
+          data-kind={current.kind}
+          // Prompt: o foco vai pro input, não pro Cancelar (default do AlertDialog). Via
+          // querySelector (não ref) — o Input é function component sem forwardRef, e isto
+          // funciona igual em React 18 e 19.
+          onOpenAutoFocus={
+            current.kind === 'prompt'
+              ? (e) => {
+                  e.preventDefault()
+                  const root = (e.currentTarget as HTMLElement | null) ?? document
+                  const el = root.querySelector<HTMLInputElement>('[data-slot="input"]')
+                  el?.focus()
+                  el?.select()
+                }
+              : undefined
+          }
+        >
+          <AlertDialogHeader>
+            {current.media !== undefined && <AlertDialogMedia>{current.media}</AlertDialogMedia>}
+            <AlertDialogTitle>{current.title}</AlertDialogTitle>
+            {current.description !== undefined && (
+              <AlertDialogDescription>{current.description}</AlertDialogDescription>
+            )}
+          </AlertDialogHeader>
+          {current.body !== undefined && <div data-slot="dialog-body">{current.body}</div>}
+          {current.kind === 'prompt' && (
+            <Input
+              value={text}
+              placeholder={current.placeholder}
+              onChange={(e) => setText(e.target.value)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter') {
+                  e.preventDefault()
+                  drop(current.id, (p) => accept(p, text))
+                }
+              }}
+            />
+          )}
+          <AlertDialogFooter>
+            {current.kind !== 'alert' && (
+              <AlertDialogCancel onClick={() => drop(current.id, cancel)}>
+                {current.cancel ?? 'Cancelar'}
+              </AlertDialogCancel>
+            )}
+            <AlertDialogAction
+              variant={variant === 'destructive' ? 'destructive' : 'default'}
+              onClick={() => drop(current.id, (p) => accept(p, text))}
+            >
+              {current.action ?? defaultAction}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      )}
+    </AlertDialog>
+  )
+}
+
+/** Alias retrocompatível — `<ConfirmHost />` é `<DialogHost />`. */
+export const ConfirmHost = DialogHost

package/src/ui/components/patterns/data-state.tsx

@@ -0,0 +1,75 @@
+/**
+ * <DataState /> — o estado "carregando" da casa: o que mostrar ANTES do conteúdo chegar.
+ *
+ * Orquestra os estados de uma carga assíncrona (lista/fetch) num lugar só: erro (calmo, sem
+ * jargão na tela), carregando (Spinner centralizado), vazio (texto) e, por fim, o conteúdo.
+ * Dissolve o `error ? … : isLoading ? <Spinner/> : empty ? … : children` repetido em toda
+ * tela. NÃO confundir com "processando" (AÇÃO em andamento depois do clique) — isso é o
+ * `busy` do Button. Pra placeholder com forma de conteúdo, use Skeleton.
+ */
+import * as React from 'react'
+import { cn } from '../../lib/cn.ts'
+import { Spinner } from '../primitives/spinner.tsx'
+
+export interface DataStateProps {
+  /** Carregando (antes do conteúdo) — mostra o Spinner centralizado. */
+  loading?: boolean
+  /** Erro da carga. A mensagem técnica NÃO vai pra tela (passe `errorText` pra um aviso). */
+  error?: { message?: string } | null
+  /** Sem itens — mostra o `emptyText`. */
+  empty?: boolean
+  /** Texto do vazio (pt-BR, ex.: "Nenhum papel."). */
+  emptyText?: string
+  /** Aviso de erro (calmo, orientado ao usuário). Default: "Não foi possível carregar.". */
+  errorText?: string
+  /** Em TABELA: renderiza o estado como UMA linha (<tr><td colSpan>), não um bloco — pra
+   *  caber direto no <tbody>. Passe o nº de colunas da tabela. */
+  colSpan?: number
+  /** O conteúdo — renderizado só quando não há erro/carregando/vazio. */
+  children: React.ReactNode
+}
+
+/** Ordem: erro → carregando → vazio → conteúdo (espelha o ternário que substitui). */
+export function DataState({
+  loading = false,
+  error = null,
+  empty = false,
+  emptyText = 'Nada por aqui.',
+  errorText,
+  colSpan,
+  children,
+}: DataStateProps): React.ReactElement {
+  // Há conteúdo: passa direto (no modo tabela, são as <tr> dos itens).
+  if (!error && !loading && !empty) return <>{children}</>
+
+  // Modo TABELA: o estado vira UMA linha de largura cheia (<td colSpan>), pra caber no <tbody>.
+  if (colSpan !== undefined) {
+    return (
+      <tr>
+        <td
+          colSpan={colSpan}
+          className={cn('px-4 py-10 text-center text-sm', error ? 'text-destructive' : 'text-muted-foreground/60')}
+        >
+          {error ? (errorText ?? 'Não foi possível carregar.') : loading ? <Spinner className="mx-auto" /> : emptyText}
+        </td>
+      </tr>
+    )
+  }
+
+  // Modo BLOCO (default).
+  if (error) {
+    return (
+      <div className="rounded-lg border border-destructive/30 bg-destructive/5 px-4 py-3 text-center text-sm text-destructive">
+        {errorText ?? 'Não foi possível carregar.'}
+      </div>
+    )
+  }
+  if (loading) {
+    return (
+      <div className="py-10 text-center text-muted-foreground">
+        <Spinner className="mx-auto" />
+      </div>
+    )
+  }
+  return <p className="py-10 text-center text-sm text-muted-foreground/60">{emptyText}</p>
+}

package/src/ui/components/patterns/form-dialog.tsx

@@ -0,0 +1,64 @@
+/**
+ * <ActionFormDialog /> — o ActionForm dentro de um Dialog do Opus (o "modo modal").
+ *
+ * Wrapper fino: Dialog + DialogHeader/Title em volta do <ActionForm>. Fecha o dialog
+ * no sucesso (onOpenChange(false)) e o Cancelar fecha também. O ActionForm continua
+ * dono do <form>/submit (o botão de submit precisa estar DENTRO do form), por isso o
+ * corpo e o rodapé entram como SLOTS — DialogBody/DialogFooter injetados, renderizados
+ * pelo próprio form (fonte única do scroll e da faixa, sem string duplicada).
+ */
+
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from '../primitives/dialog.tsx'
+import { ActionForm, type ActionFormProps } from './form.tsx'
+
+export interface ActionFormDialogProps<TInput extends Record<string, unknown>, TData>
+  extends ActionFormProps<TInput, TData> {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  title: string
+  description?: string
+}
+
+export function ActionFormDialog<TInput extends Record<string, unknown>, TData>({
+  open,
+  onOpenChange,
+  title,
+  description,
+  onSuccess,
+  onCancel,
+  ...rest
+}: ActionFormDialogProps<TInput, TData>) {
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      {/* Header e rodapé FIXOS, só o CORPO (campos) scrolla — o "X" não rola junto e
+          forms longos não estouram a viewport. O content já é coluna flex com teto. */}
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>{title}</DialogTitle>
+          {description !== undefined && <DialogDescription>{description}</DialogDescription>}
+        </DialogHeader>
+        <ActionForm
+          {...rest}
+          className="min-h-0 flex-1"
+          // Slots injetados: o corpo vira DialogBody (rola), o rodapé vira DialogFooter (a
+          // faixa da casa — fonte única). Os botões seguem dentro do <form> do ActionForm.
+          body={(fields) => <DialogBody>{fields}</DialogBody>}
+          footer={(actions) => <DialogFooter>{actions}</DialogFooter>}
+          onSuccess={(d) => {
+            onSuccess?.(d)
+            onOpenChange(false)
+          }}
+          onCancel={onCancel ?? (() => onOpenChange(false))}
+        />
+      </DialogContent>
+    </Dialog>
+  )
+}