rl-core-front 0.14.2 → 0.14.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.14.2",
+  "version": "0.14.4",
   "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/input.tsx

@@ -4,22 +4,79 @@ import * as React from "react";
 
 import { cn } from "#core/lib/utils";
 
-const Input = React.forwardRef<
-  HTMLInputElement,
-  React.InputHTMLAttributes<HTMLInputElement>
->(({ className, type, ...props }, ref) => {
-  return (
-    <input
-      type={type}
-      className={cn(
-        "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
-        className,
-      )}
-      ref={ref}
-      {...props}
-    />
-  );
-});
+/**
+ * O `prefix` sai do tipo base de propósito: o React o declara como `string`
+ * porque existe um `prefix` de RDFa em todo elemento HTML — atributo que
+ * ninguém escreve num `<input>`, e cujo tipo impediria passar um ícone aqui.
+ */
+export interface InputProps
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix"> {
+  /**
+   * Marca fixa colada à esquerda do campo — `R$`, `@`, `https://`.
+   *
+   * Dentro da borda, e não num rótulo acima: a unidade é do valor, e lida
+   * longe dele ela vira decoração que some quando o formulário fica cheio. É
+   * também o que evita quem digita repetir a marca no próprio texto.
+   */
+  prefix?: React.ReactNode;
+  /** Mesma ideia à direita — `%`, `kg`, `/mês`. */
+  suffix?: React.ReactNode;
+}
+
+/** A marca não é campo: não recebe clique nem foco, e o cursor vai para o input. */
+const Affix = ({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}): React.JSX.Element => (
+  <span
+    aria-hidden
+    className={cn(
+      "pointer-events-none absolute inset-y-0 flex items-center text-sm text-muted-foreground",
+      className,
+    )}
+  >
+    {children}
+  </span>
+);
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, prefix, suffix, ...props }, ref) => {
+    const campo = (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
+          // Abre espaço para a marca em vez de deixar o texto passar por baixo
+          // dela. Largura fixa e não `w-auto`: a marca é curta por definição, e
+          // medir a real exigiria ler o DOM a cada render.
+          prefix && "pl-10",
+          suffix && "pr-10",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+
+    // Sem marca o `<input>` volta a ser o elemento raiz: envolver todo campo
+    // do produto num `div` mudaria a largura de quem já usa `Input` dentro de
+    // um flex, e a maioria não tem marca nenhuma.
+    if (!prefix && !suffix) {
+      return campo;
+    }
+
+    return (
+      <div className="relative w-full">
+        {prefix && <Affix className="left-3">{prefix}</Affix>}
+        {campo}
+        {suffix && <Affix className="right-3">{suffix}</Affix>}
+      </div>
+    );
+  },
+);
 Input.displayName = "Input";
 
 export { Input };

package/src/hooks/use-confirm.tsx

@@ -49,6 +49,19 @@ export interface UseConfirmResult {
     options: ConfirmedActionOptions,
     action: () => Promise<unknown>,
   ) => Promise<boolean>;
+  /**
+   * O caso mais comum, com os textos prontos: `Excluir “Cartão Inter”?` mais o
+   * aviso de que não há volta, o botão vermelho e o rótulo "Excluir".
+   *
+   * Existe para a tela não repetir cinco campos a cada lixeira — era o que
+   * fazia cada projeto embrulhar o `confirm` num hook próprio e acabar com
+   * duas perguntas de excluir diferentes no mesmo produto.
+   *
+   * O texto **não** menciona recuperação, mesmo onde a exclusão é lógica:
+   * lixeira por baixo é rede de segurança do dado, não promessa ao usuário, e
+   * prometer desfazer convida ao clique sem cuidado.
+   */
+  confirmDelete: (name: string, note?: string) => 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. */
@@ -86,6 +99,18 @@ export function useConfirm(): UseConfirmResult {
     [pending],
   );
 
+  const confirmDelete = useCallback(
+    (name: string, note?: string): Promise<boolean> =>
+      confirm({
+        title: t("common.deleteTitle", { name }),
+        description: t("common.deleteWarning"),
+        note,
+        confirmLabel: t("common.delete"),
+        destructive: true,
+      }),
+    [confirm, t],
+  );
+
   const confirmAndRun = useCallback(
     async (
       options: ConfirmedActionOptions,
@@ -127,5 +152,5 @@ export function useConfirm(): UseConfirmResult {
     />
   );
 
-  return { confirm, confirmAndRun, acting, confirmDialog };
+  return { confirm, confirmDelete, confirmAndRun, acting, confirmDialog };
 }

package/src/i18n/messages/en.ts

@@ -195,6 +195,9 @@ export const en: Messages = {
     cancel: "Cancel",
     edit: "Edit",
     delete: "Delete",
+    deleteTitle: "Delete “{name}”?",
+    deleteWarning:
+      "This action cannot be undone. The record leaves the lists and stops appearing in the system.",
     create: "Create",
     confirm: "Confirm",
     send: "Send",

package/src/i18n/messages/pt.ts

@@ -197,6 +197,9 @@ export const pt = {
     cancel: "Cancelar",
     edit: "Editar",
     delete: "Excluir",
+    deleteTitle: "Excluir “{name}”?",
+    deleteWarning:
+      "Esta ação não pode ser desfeita. O registro sai das listas e deixa de aparecer no sistema.",
     create: "Criar",
     confirm: "Confirmar",
     send: "Enviar",