rl-core-front 0.14.1 → 0.14.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.14.1",
+  "version": "0.14.2",
   "description": "Telas e componentes Next.js do core: login com 2FA, usuários, RBAC, auditoria, logs e listagens com filtro dinâmico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/components/ui/confirm-dialog.tsx

@@ -17,6 +17,15 @@ export interface ConfirmDialogProps {
   open: boolean;
   title: string;
   description?: string;
+  /**
+   * Segundo parágrafo, quando a consequência muda por tela.
+   *
+   * Separado da `description` porque a explicação do que a ação faz é a mesma
+   * em todo lugar, e o que acontece com o que depende do registro não é: numa
+   * tela a exclusão passa e o histórico se mantém, na outra ela é recusada
+   * enquanto houver algo em uso. Um texto único para as duas mentiria numa.
+   */
+  note?: string;
   confirmLabel: string;
   cancelLabel: string;
   /** Pinta o botão de confirmar como destrutivo (excluir, resetar). */
@@ -34,6 +43,7 @@ export function ConfirmDialog({
   open,
   title,
   description,
+  note,
   confirmLabel,
   cancelLabel,
   destructive = false,
@@ -48,9 +58,21 @@ export function ConfirmDialog({
       <DialogContent className="max-w-sm" expandable={false}>
         <DialogHeader>
           <DialogTitle>{title}</DialogTitle>
-          {description && <DialogDescription>{description}</DialogDescription>}
         </DialogHeader>
         <DialogForm onSubmit={onConfirm}>
+          {/* A explicação fica no corpo, e não no `DialogHeader`.
+              Ali dentro ela virava subtítulo: o `DialogContent` arranca o
+              cabeçalho para dividir a primeira linha com os botões de ampliar
+              e fechar, então a descrição era espremida numa coluna estreita ao
+              lado do X — enquanto o corpo do modal ficava vazio. Numa
+              confirmação a explicação **é** o conteúdo: ela precisa do corpo,
+              com respiro, para ser lida antes do clique. */}
+          {(description || note) && (
+            <div className="space-y-2 text-sm text-muted-foreground">
+              {description && <DialogDescription>{description}</DialogDescription>}
+              {note && <p>{note}</p>}
+            </div>
+          )}
           <DialogFooter className="gap-2">
             <Button type="button" variant="outline" onClick={onCancel}>
               {cancelLabel}

package/src/hooks/use-confirm.tsx

@@ -5,16 +5,32 @@ import { useCallback, useState } from "react";
 
 import { ConfirmDialog } from "#core/components/ui";
 import { useI18n } from "#core/contexts";
+import { RequestOperation, useRequest } from "#core/hooks/use-request";
 
 export interface ConfirmOptions {
   title: string;
   description?: string;
+  /** Segundo parágrafo — a consequência que muda por tela. */
+  note?: string;
   confirmLabel?: string;
   cancelLabel?: string;
   /** Ação sem volta (excluir, resetar 2FA) — pinta o botão de vermelho. */
   destructive?: boolean;
 }
 
+export interface ConfirmedActionOptions extends ConfirmOptions {
+  /**
+   * O que recarregar depois que a ação deu certo.
+   *
+   * Fica aqui e não no `.then()` de quem chamou porque `acting` só volta a
+   * `false` quando isto termina: sem esperar a recarga, a tabela destrava
+   * mostrando ainda a linha que acabou de ser excluída.
+   */
+  reload?: () => Promise<unknown> | unknown;
+  /** Toast de sucesso; `RequestOperation.Delete` dá o texto de exclusão. */
+  success?: RequestOperation | string;
+}
+
 interface Pending {
   options: ConfirmOptions;
   resolve: (confirmed: boolean) => void;
@@ -23,6 +39,18 @@ interface Pending {
 export interface UseConfirmResult {
   /** Aguarda a decisão do usuário: `true` confirmou, `false` cancelou. */
   confirm: (options: ConfirmOptions) => Promise<boolean>;
+  /**
+   * Pergunta, executa e recarrega — o ciclo inteiro numa chamada.
+   *
+   * `true` quando a ação rodou até o fim; `false` se o usuário desistiu ou se
+   * a requisição falhou (o toast de erro é do `useRequest`).
+   */
+  confirmAndRun: (
+    options: ConfirmedActionOptions,
+    action: () => Promise<unknown>,
+  ) => Promise<boolean>;
+  /** Enquanto a ação confirmada roda — para travar a tabela que ela muda. */
+  acting: boolean;
   /** Renderize no final da tela — é o modal em si. */
   confirmDialog: JSX.Element;
 }
@@ -34,9 +62,14 @@ export interface UseConfirmResult {
  *
  * A promise resolve quando o usuário decide — cancelar (ou fechar no `Esc`)
  * resolve `false`, então o fluxo de quem chamou não muda.
+ *
+ * Quando a resposta do "sim" é sempre a mesma — chamar o serviço, recarregar a
+ * listagem e travar a tela no meio —, use o `confirmAndRun`: é o passo que
+ * cada tela remontava à mão, e onde mora a armadilha do parágrafo seguinte.
  */
 export function useConfirm(): UseConfirmResult {
   const { t } = useI18n();
+  const { run, loading: acting } = useRequest();
   const [pending, setPending] = useState<Pending | null>(null);
 
   const confirm = useCallback(
@@ -53,11 +86,39 @@ export function useConfirm(): UseConfirmResult {
     [pending],
   );
 
+  const confirmAndRun = useCallback(
+    async (
+      options: ConfirmedActionOptions,
+      action: () => Promise<unknown>,
+    ): Promise<boolean> => {
+      if (!(await confirm(options))) {
+        return false;
+      }
+
+      const done = await run(action, { success: options.success });
+
+      // A falha do `run` é `null`, e só ela. `undefined` é o que uma rota 204
+      // resolve **em caso de sucesso** — e exclusão é justamente 204. Quem
+      // monta este passo na tela erra aqui: compara com `undefined`, lê o
+      // sucesso como erro e sai sem recarregar, e a linha some do banco sem
+      // sumir da tela.
+      if (done === null) {
+        return false;
+      }
+
+      await options.reload?.();
+
+      return true;
+    },
+    [confirm, run],
+  );
+
   const confirmDialog = (
     <ConfirmDialog
       open={!!pending}
       title={pending?.options.title ?? ""}
       description={pending?.options.description}
+      note={pending?.options.note}
       confirmLabel={pending?.options.confirmLabel ?? t("common.confirm")}
       cancelLabel={pending?.options.cancelLabel ?? t("common.cancel")}
       destructive={pending?.options.destructive}
@@ -66,5 +127,5 @@ export function useConfirm(): UseConfirmResult {
     />
   );
 
-  return { confirm, confirmDialog };
+  return { confirm, confirmAndRun, acting, confirmDialog };
 }

package/src/index.ts

@@ -72,7 +72,11 @@ export {
 // ---------------------------------------------------------------------------
 export type { UseColumnVisibilityResult } from "#core/hooks/use-column-visibility";
 export { useColumnVisibility } from "#core/hooks/use-column-visibility";
-export type { ConfirmOptions, UseConfirmResult } from "#core/hooks/use-confirm";
+export type {
+  ConfirmedActionOptions,
+  ConfirmOptions,
+  UseConfirmResult,
+} from "#core/hooks/use-confirm";
 export { useConfirm } from "#core/hooks/use-confirm";
 export type { UseFilterSchemaResult } from "#core/hooks/use-filter-schema";
 export { useFilterSchema } from "#core/hooks/use-filter-schema";