rl-core-front 0.19.1 → 0.19.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.19.1",
+  "version": "0.19.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/_utils/calc.ts

@@ -8,9 +8,12 @@
  * enquanto este parser recusa o que não entende em vez de tentar adivinhar.
  *
  * O que ele entende: `+ - * / %`, parênteses, sinal negativo, e número no
- * formato brasileiro (ponto de milhar, vírgula decimal).
+ * formato brasileiro (ponto de milhar, vírgula decimal) — com os dígitos
+ * soltos lidos em centavos, como o campo de dinheiro faz (`4250` é 42,50).
  */
 
+import { maskCurrencyBR } from "#core/_utils/format";
+
 /**
  * Por que a conta não fechou. É código e não frase pronta porque a mensagem é
  * texto de tela: quem traduz é o componente, com o dicionário de quem está
@@ -83,15 +86,99 @@ const SYMBOL_TO_GLYPH = new Map<string, string>(OPERATOR_GLYPHS);
 
 const SYMBOLS = "+-*/%()";
 
+/** O desenho de uma tecla: `*` vira `×`; o resto fica como é. */
+export const glyphOf = (symbol: string): string => SYMBOL_TO_GLYPH.get(symbol) ?? symbol;
+
+/** Um pedaço da conta: um número (e se ele é dinheiro ou não) ou um símbolo. */
+interface Run {
+  kind: "number" | "symbol";
+  text: string;
+  /** Só em número: quantidade ou porcentagem, e não dinheiro — ver `toNumber`. */
+  plain: boolean;
+}
+
 /**
- * A conta como se lê na tela: `120*2+10%` vira `120×2+10%`.
+ * A conta em pedaços, com cada número já sabendo se é dinheiro.
  *
- * Mora aqui, junto do que faz o caminho de volta, e não no componente: são a
- * mesma correspondência, e separadas elas saem de sincronia calada.
+ * É a mesma pergunta que o tokenizador faz — o que vem depois de `×`/`÷` e
+ * o que vem antes de `%` não é dinheiro —, respondida sobre o texto cru para
+ * o visor e a normalização usarem sem avaliar a conta (que pode estar pela
+ * metade). O que não é número nem símbolo é descartado.
+ */
+const splitRuns = (source: string): Run[] => {
+  const runs: Run[] = [];
+  let index = 0;
+
+  while (index < source.length) {
+    const character: string = source[index];
+
+    if (NUMBER_PART.test(character)) {
+      let end: number = index;
+      while (end < source.length && NUMBER_PART.test(source[end])) {
+        end += 1;
+      }
+      runs.push({ kind: "number", text: source.slice(index, end), plain: false });
+      index = end;
+      continue;
+    }
+
+    const symbol: string = GLYPH_TO_SYMBOL.get(character) ?? character;
+    if (SYMBOLS.includes(symbol)) {
+      runs.push({ kind: "symbol", text: symbol, plain: false });
+    }
+    index += 1;
+  }
+
+  runs.forEach((run, position) => {
+    if (run.kind !== "number") {
+      return;
+    }
+    const previous: Run | undefined = runs[position - 1];
+    const next: Run | undefined = runs[position + 1];
+
+    run.plain =
+      (previous?.kind === "symbol" && (previous.text === "*" || previous.text === "/")) ||
+      (next?.kind === "symbol" && next.text === "%");
+  });
+
+  return runs;
+};
+
+/**
+ * O texto do visor, como a pessoa o vê e edita, na forma que a conta lê.
+ *
+ * O visor é um campo de texto que mostra dinheiro formatado (`44,90`), e a
+ * pessoa digita, apaga e cola nele. O que sai daqui é a forma canônica: os
+ * símbolos em vez dos desenhos, o dinheiro só em dígitos (`4490` — a vírgula
+ * e o ponto são da máscara, e o que a pessoa digitou de ponto ou vírgula num
+ * valor em reais é descartado, como o campo faz), e a quantidade e a
+ * porcentagem como vieram, que ali `1,5` é literal.
+ */
+export const normalizeExpression = (display: string): string =>
+  splitRuns(display)
+    .map((run) =>
+      run.kind === "number" && !run.plain ? run.text.replace(/\D/g, "") : run.text,
+    )
+    .join("");
+
+/**
+ * A conta como se lê na tela: `4490*2+10%` vira `44,90×2+10%`.
+ *
+ * O dinheiro sai formatado como o campo o mostra — `4490` é 44,90 —, para
+ * a pessoa ver o mesmo que a conta vai ler; a quantidade e a porcentagem
+ * ficam como estão. Mora aqui, junto do que faz o caminho de volta
+ * (`normalizeExpression`), e não no componente: são a mesma correspondência,
+ * e separadas elas saem de sincronia calada.
  */
 export const toDisplayExpression = (source: string): string =>
-  Array.from(source)
-    .map((character) => SYMBOL_TO_GLYPH.get(character) ?? character)
+  splitRuns(source)
+    .map((run) => {
+      if (run.kind === "symbol") {
+        return SYMBOL_TO_GLYPH.get(run.text) ?? run.text;
+      }
+
+      return run.plain ? run.text : maskCurrencyBR(run.text);
+    })
     .join("");
 
 /**
@@ -109,14 +196,25 @@ export const isCalcCharacter = (character: string): boolean =>
 /**
  * Número brasileiro para `number`.
  *
- * A ambiguidade real é o ponto sozinho: `1.200` é mil e duzentos para quem
- * digita em reais, e 1,2 para o `Number`. A regra é a do país — havendo
- * vírgula, todo ponto é milhar; sem vírgula, o ponto ainda é milhar quando
- * separa exatamente três dígitos no fim, ou quando aparece mais de uma vez.
+ * **Dígitos soltos são centavos**, como no campo: quem digita `4250` no campo
+ * vê 42,50, e a calculadora lendo 4.250,00 era a mesma tecla dando dois
+ * valores. A vírgula, quando vem, manda — `42,50` é literal. Duas exceções,
+ * que são o que não é dinheiro (`plain`): a porcentagem (`10%` são dez por
+ * cento, não 0,10%) e o que vem depois de `×` ou `÷` — quantidade, não
+ * valor: `4250×3` são três de 42,50, e `100,00÷4` é dividir em quatro.
+ *
+ * O ponto sozinho é milhar: `1.200` é mil e duzentos para quem digita em
+ * reais, e 1,2 para o `Number`. A regra é a do país — havendo vírgula, todo
+ * ponto é milhar; sem vírgula, o ponto ainda é milhar quando separa exatamente
+ * três dígitos no fim, ou quando aparece mais de uma vez.
  */
-const toNumber = (raw: string): number => {
+const toNumber = (raw: string, plain: boolean): number => {
   let text: string = raw;
 
+  if (/^\d+$/.test(text) && !plain) {
+    return Number(text) / 100;
+  }
+
   if (text.includes(",")) {
     text = text.replace(/\./g, "").replace(/,/g, ".");
   } else if ((text.match(/\./g) ?? []).length > 1 || /\d\.\d{3}$/.test(text)) {
@@ -148,7 +246,13 @@ const tokenize = (source: string): Token[] => {
       while (end < source.length && NUMBER_PART.test(source[end])) {
         end += 1;
       }
-      tokens.push({ type: "number", value: toNumber(source.slice(index, end)) });
+      // O `%` logo depois, ou o `×`/`÷` logo antes, mudam a leitura do
+      // número — ver `toNumber`.
+      const previous: Token | undefined = tokens[tokens.length - 1];
+      const plain: boolean =
+        /^\s*%/.test(source.slice(end)) ||
+        (previous?.type === "*" || previous?.type === "/");
+      tokens.push({ type: "number", value: toNumber(source.slice(index, end), plain) });
       index = end;
       continue;
     }

package/src/components/ui/money-input.tsx

@@ -1,14 +1,16 @@
 "use client";
 
 import { Calculator, Delete } from "lucide-react";
-import type { JSX, KeyboardEvent } from "react";
+import type { ChangeEvent, JSX, KeyboardEvent } from "react";
 import { useRef, useState } from "react";
 
 import {
   CalcError,
   CalcErrorCode,
   evaluateExpression,
+  glyphOf,
   isCalcCharacter,
+  normalizeExpression,
   toDisplayExpression,
 } from "#core/_utils/calc";
 import {
@@ -61,7 +63,7 @@ type KeyRole = "digit" | "operator" | "aux";
 interface CalcKey {
   /**
    * O que a tecla acrescenta à conta — e também o seu desenho, passado pelo
-   * `toDisplayExpression`: a tecla do `*` mostra `×` sem que o glifo precise
+   * `toGlyphs`: a tecla do `*` mostra `×` sem que o glifo precise
    * ser escrito aqui de novo.
    */
   input?: string;
@@ -126,8 +128,15 @@ export const MoneyInput = ({
 }: MoneyInputProps): JSX.Element => {
   const { t } = useI18n();
   const [open, setOpen] = useState(false);
+  /*
+    A conta na forma canônica — símbolos, dinheiro só em dígitos (`4490`). O
+    visor mostra e edita a forma desenhada (`44,90`), e cada mudança volta
+    para cá por `normalizeExpression`: é o que deixa a pessoa digitar, apagar
+    e colar num campo formatado sem a máscara e o cursor brigarem.
+  */
   const [expression, setExpression] = useState("");
-  const panelRef = useRef<HTMLDivElement>(null);
+  const visorRef = useRef<HTMLInputElement>(null);
+  const display: string = toDisplayExpression(expression);
 
   /**
    * Traduz o erro do parser. O código vem do `calc.util`, que não conhece
@@ -165,24 +174,115 @@ export const MoneyInput = ({
     }
   })();
 
-  /** Abrir semeia a conta com o que já está no campo, para somar em cima. */
+  /**
+   * Abrir semeia a conta com o que já está no campo, para somar em cima.
+   *
+   * Em dígitos (`359`), e não no texto do campo (`3,59`): com a vírgula o
+   * número vira literal, e cada dígito digitado depois entrava como casa
+   * decimal a mais — `3,5922` arredondava de volta para 3,59, e o valor
+   * parecia travado. Em dígitos o visor mostra o mesmo 3,59, e digitar em
+   * cima empurra o valor como o campo faz.
+   */
   const handleOpenChange = (next: boolean): void => {
     if (next) {
-      setExpression(parseCurrencyBR(value) > 0 ? value : "");
+      const cents: number = Math.round(parseCurrencyBR(value) * 100);
+      setExpression(cents > 0 ? String(cents) : "");
     }
     setOpen(next);
   };
 
+  /**
+   * O visor como ficou depois de uma edição, e onde o cursor estava nele.
+   *
+   * O texto novo é normalizado e desenhado de novo — a máscara pode ter
+   * mudado de lugar (`449` é 4,49; `4490` é 44,90) —, e o cursor é posto
+   * com o mesmo número de caracteres "de verdade" (tudo que não é ponto,
+   * vírgula ou espaço) **à direita** dele. É o que faz digitar no meio de
+   * `44,90` cair onde a pessoa clicou, e não no fim.
+   *
+   * Contado do fim, e não do início, por causa do zero que a máscara põe na
+   * frente: `9` desenha `0,09`, e contando do início o cursor caía depois
+   * desse zero — o `8` seguinte entrava antes da vírgula, e `987` virava
+   * 80,79 em vez de 9,87.
+   */
+  const commit = (nextDisplay: string, caret: number): void => {
+    const significantAfter: number = Array.from(nextDisplay.slice(caret)).filter(
+      (character) => !/[.,\s]/.test(character),
+    ).length;
+    const raw: string = normalizeExpression(nextDisplay);
+    const redrawn: string = toDisplayExpression(raw);
+
+    let position: number = redrawn.length;
+    let seen = 0;
+    while (position > 0 && seen < significantAfter) {
+      if (!/[.,\s]/.test(redrawn[position - 1])) {
+        seen += 1;
+      }
+      position -= 1;
+    }
+
+    setExpression(raw);
+    // Depois do render, quando o campo já mostra o texto redesenhado.
+    requestAnimationFrame(() => {
+      visorRef.current?.focus();
+      visorRef.current?.setSelectionRange(position, position);
+    });
+  };
+
+  /** Onde a seleção está no visor — no fim, se o campo ainda não tem foco. */
+  const selection = (): [number, number] => [
+    visorRef.current?.selectionStart ?? display.length,
+    visorRef.current?.selectionEnd ?? display.length,
+  ];
+
+  /**
+   * A tecla escreve onde o cursor está — e por cima do que estiver
+   * selecionado, como qualquer campo de texto.
+   *
+   * O visor foi um texto fixo em que as teclas só acrescentavam no fim: para
+   * trocar o `500` do meio da conta era apagar até lá e digitar tudo de novo,
+   * e selecionar tudo e digitar acrescentava em vez de substituir.
+   */
+  const write = (text: string): void => {
+    const [start, end] = selection();
+
+    commit(display.slice(0, start) + text + display.slice(end), start + text.length);
+  };
+
+  /**
+   * O backspace da tecla: apaga a seleção, ou o caractere antes do cursor —
+   * pulando o ponto e a vírgula, que são da máscara e voltam sozinhos.
+   */
+  const erase = (): void => {
+    const [start, end] = selection();
+    let from: number = start;
+
+    if (start === end) {
+      while (from > 0 && /[.,]/.test(display[from - 1])) {
+        from -= 1;
+      }
+      from = Math.max(from - 1, 0);
+    }
+
+    commit(display.slice(0, from) + display.slice(end), from);
+  };
+
   const press = (key: CalcKey): void => {
     if (key.action === "clear") {
       setExpression("");
+      visorRef.current?.focus();
       return;
     }
     if (key.action === "backspace") {
-      setExpression((current) => current.slice(0, -1));
+      erase();
       return;
     }
-    setExpression((current) => current + (key.input ?? ""));
+    write(key.input ?? "");
+  };
+
+  /** O que foi digitado, apagado ou colado direto no visor. */
+  const handleVisorChange = (event: ChangeEvent<HTMLInputElement>): void => {
+    commit(event.target.value, event.target.selectionStart ?? event.target.value.length);
   };
 
   const apply = (): void => {
@@ -198,21 +298,16 @@ export const MoneyInput = ({
       event.target instanceof HTMLElement && event.target.tagName === "BUTTON";
 
     // Com o foco numa tecla, o Enter é o clique dela — mexer nisso quebraria
-    // quem navega por Tab.
+    // quem navega por Tab. No visor e no resto do painel, o Enter usa o valor.
     if (event.key === "Enter" && !onButton) {
       event.preventDefault();
       apply();
       return;
     }
-    if (event.key === "Backspace") {
+    // Fora do visor (numa tecla, por Tab), digitar ainda escreve na conta.
+    if (event.target !== visorRef.current && event.key.length === 1 && isCalcCharacter(event.key)) {
       event.preventDefault();
-      setExpression((current) => current.slice(0, -1));
-      return;
-    }
-    if (event.key.length === 1 && isCalcCharacter(event.key)) {
-      event.preventDefault();
-      // No teclado numérico o decimal é ponto; em reais, é vírgula.
-      setExpression((current) => current + (event.key === "." ? "," : event.key));
+      write(event.key);
     }
   };
 
@@ -252,28 +347,39 @@ export const MoneyInput = ({
       </PopoverAnchor>
 
       <PopoverContent
-        ref={panelRef}
         align="end"
         aria-label={t("calculator.title")}
         onKeyDown={handleKeyDown}
-        // O foco fica no painel, e não na primeira tecla: assim o Enter usa o
-        // valor em vez de apertar o "C".
+        // O foco vai para o visor, com o cursor no fim: é onde se digita, e é
+        // onde o Enter usa o valor em vez de apertar o "C".
         onOpenAutoFocus={(event) => {
           event.preventDefault();
-          panelRef.current?.focus();
+          const visor = visorRef.current;
+          visor?.focus();
+          visor?.setSelectionRange(visor.value.length, visor.value.length);
         }}
-        tabIndex={-1}
         className="w-72"
       >
+        {/*
+          O visor é a linha grande, e é editável: é nela que a pessoa clica
+          para trocar um número. O resultado fica embaixo, pequeno — é
+          consequência, não o que se mexe.
+        */}
         <div className="flex min-h-14 flex-col justify-between gap-1 rounded-md border border-border bg-muted/50 px-3 py-1.5 text-right">
-          <span className="min-h-5 break-all font-mono text-xs text-muted-foreground">
-            {toDisplayExpression(expression)}
-          </span>
+          <input
+            ref={visorRef}
+            value={display}
+            onChange={handleVisorChange}
+            aria-label={t("calculator.title")}
+            autoComplete="off"
+            spellCheck={false}
+            className="w-full bg-transparent text-right font-mono text-base font-medium tabular-nums outline-none"
+          />
           {outcome.message ? (
             <span className="break-words text-xs text-destructive">{outcome.message}</span>
           ) : (
-            <span className="break-all font-mono text-base font-medium tabular-nums">
-              {formatMoneyBR(outcome.value ?? 0)}
+            <span className="min-h-4 font-mono text-xs text-muted-foreground">
+              {expression ? `= ${formatMoneyBR(outcome.value ?? 0)}` : ""}
             </span>
           )}
         </div>
@@ -285,6 +391,9 @@ export const MoneyInput = ({
               type="button"
               variant={key.role === "aux" ? "outline" : "secondary"}
               aria-label={key.labelKey ? t(key.labelKey) : undefined}
+              // O clique não tira o foco do visor: é a seleção de lá que a
+              // tecla substitui, e o cursor de lá que ela avança.
+              onMouseDown={(event) => event.preventDefault()}
               onClick={() => press(key)}
               className={cn(
                 "h-8 px-0 font-mono text-sm",
@@ -292,7 +401,7 @@ export const MoneyInput = ({
                 key.role === "aux" && "text-muted-foreground",
               )}
             >
-              {key.label ?? (key.input ? toDisplayExpression(key.input) : <Delete />)}
+              {key.label ?? (key.input ? glyphOf(key.input) : <Delete />)}
             </Button>
           ))}
         </div>