rl-core-front 0.4.0 → 0.5.0

package/src/hooks/use-column-visibility.ts

@@ -2,6 +2,8 @@
 
 import { useCallback, useEffect, useState } from "react";
 
+import { safeStorage } from "#core/_utils/storage";
+
 const STORAGE_PREFIX = "cols:";
 
 export interface UseColumnVisibilityResult {
@@ -20,10 +22,13 @@ export function useColumnVisibility(
   const [hiddenColumns, setHiddenColumns] = useState<string[]>([]);
 
   useEffect(() => {
-    if (!storageKey || typeof window === "undefined") {return;}
+    if (!storageKey) {return;}
+    const raw = safeStorage.get(`${STORAGE_PREFIX}${storageKey}`);
+    if (!raw) {return;}
     try {
-      const raw = window.localStorage.getItem(`${STORAGE_PREFIX}${storageKey}`);
-      if (raw) {setHiddenColumns(JSON.parse(raw));}
+      // O `try` que sobrou é do JSON: o acesso ao armazenamento já é seguro,
+      // mas o conteúdo pode estar corrompido por uma versão anterior da tela.
+      setHiddenColumns(JSON.parse(raw));
     } catch {
       setHiddenColumns([]);
     }
@@ -37,15 +42,11 @@ export function useColumnVisibility(
   const saveHiddenColumns = useCallback(
     (nextHidden: string[]) => {
       setHiddenColumns(nextHidden);
-      if (!storageKey || typeof window === "undefined") {return;}
-      try {
-        window.localStorage.setItem(
-          `${STORAGE_PREFIX}${storageKey}`,
-          JSON.stringify(nextHidden),
-        );
-      } catch {
-        /* ignore */
-      }
+      if (!storageKey) {return;}
+      safeStorage.set(
+        `${STORAGE_PREFIX}${storageKey}`,
+        JSON.stringify(nextHidden),
+      );
     },
     [storageKey],
   );

package/src/hooks/use-countdown.ts

@@ -0,0 +1,70 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export interface UseCountdownResult {
+  /** Segundos restantes, nunca negativo. */
+  remaining: number;
+  /** `mm:ss` pronto para exibir. */
+  formatted: string;
+  /** Chegou a zero. */
+  expired: boolean;
+}
+
+const format = (totalSeconds: number): string => {
+  const minutes = Math.floor(totalSeconds / 60);
+  const seconds = totalSeconds % 60;
+  return `${minutes}:${String(seconds).padStart(2, "0")}`;
+};
+
+/**
+ * Contagem regressiva em segundos.
+ *
+ * Conta pelo relógio, não somando ticks: um intervalo de 1s atrasa quando a aba
+ * fica em segundo plano, e o tempo iria derretendo. O instante-alvo é fixado
+ * uma vez, dentro do efeito, e cada tique só relê a diferença — voltar para a
+ * aba mostra o tempo real, não o que o timer conseguiu contar.
+ *
+ * `seconds` nulo (prazo ainda desconhecido) deixa o contador parado em zero sem
+ * marcar como expirado.
+ *
+ * O relógio é lido só no efeito e no callback do intervalo: `Date.now()` é
+ * impuro e durante o render produziria resultado instável a cada re-render.
+ */
+export function useCountdown(seconds: number | null): UseCountdownResult {
+  /*
+   * Guarda de que prazo veio a contagem. Sem isso, trocar `seconds` deixaria o
+   * valor do prazo anterior à mostra até o primeiro tique — e um zero herdado
+   * marcaria como expirado um contador que acabou de começar.
+   */
+  const [tick, setTick] = useState<{ source: number | null; value: number }>({
+    source: seconds,
+    value: seconds ?? 0,
+  });
+
+  useEffect(() => {
+    if (seconds === null) {
+      return;
+    }
+    const deadline = Date.now() + seconds * 1000;
+    const id = setInterval(
+      () =>
+        setTick({
+          source: seconds,
+          value: Math.max(0, Math.round((deadline - Date.now()) / 1000)),
+        }),
+      1000,
+    );
+    return () => clearInterval(id);
+  }, [seconds]);
+
+  // Enquanto o tique ainda é do prazo anterior, vale o prazo cheio recebido.
+  const remaining =
+    seconds === null ? 0 : tick.source === seconds ? tick.value : seconds;
+
+  return {
+    remaining,
+    formatted: format(remaining),
+    expired: seconds !== null && remaining === 0,
+  };
+}

package/src/hooks/use-request.ts

@@ -34,12 +34,24 @@ export interface RunOptions {
    * "Registro criado" (ex.: "Link de primeiro acesso enviado").
    */
   success?: RequestOperation | string;
+  /**
+   * Reage ao erro com o `errorCode` em mãos — para quando a tela precisa fazer
+   * algo além de mostrar a mensagem (ex.: voltar ao passo de credenciais
+   * quando a verificação de 2FA vence).
+   *
+   * Vem por callback e não pelo estado `errorCode` porque o estado só chega no
+   * render seguinte: quem lê logo depois do `await run(...)` pegaria o valor
+   * anterior.
+   */
+  onError?: (error: { code: string | null; message: string }) => void;
 }
 
 export interface UseRequestResult {
   run: <T>(fn: () => Promise<T>, options?: RunOptions) => Promise<T | null>;
   loading: boolean;
   error: string | null;
+  /** Código estável do último erro (`AppErrorCode` do backend), para render condicional. */
+  errorCode: string | null;
   setError: Dispatch<SetStateAction<string | null>>;
 }
 
@@ -53,6 +65,7 @@ export function useRequest(): UseRequestResult {
   const { notify } = useToast();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
+  const [errorCode, setErrorCode] = useState<string | null>(null);
 
   /**
    * Ordem de preferência da mensagem:
@@ -93,6 +106,7 @@ export function useRequest(): UseRequestResult {
     async <T>(fn: () => Promise<T>, options?: RunOptions): Promise<T | null> => {
       setLoading(true);
       setError(null);
+      setErrorCode(null);
       try {
         const result = await fn();
         if (options?.success) {
@@ -101,7 +115,12 @@ export function useRequest(): UseRequestResult {
         return result;
       } catch (e) {
         const err = e as AxiosError<ApiErrorBody>;
-        setError(messageFor(err.response?.data));
+        const body = err.response?.data;
+        const message = messageFor(body);
+        const code = body?.errorCode ?? null;
+        setError(message);
+        setErrorCode(code);
+        options?.onError?.({ code, message });
         return null;
       } finally {
         setLoading(false);
@@ -110,5 +129,5 @@ export function useRequest(): UseRequestResult {
     [messageFor, notify, successMessage],
   );
 
-  return { run, loading, error, setError };
+  return { run, loading, error, errorCode, setError };
 }

package/src/i18n/messages/en.ts

@@ -212,6 +212,10 @@ export const en: Messages = {
     loginSuccess: "Signed in successfully",
     twoFactorConfigured: "2FA configured successfully",
     codeSent: "Code sent to your email",
+    verificationExpired:
+      "Verification expired. Sign in again to continue — if you already scanned the QR code, it is still valid.",
+    expiresIn: "Time to confirm: {time}",
+    expiredHint: "Time is up. Sign in again to continue.",
   },
   recovery: {
     forgotTitle: "Recover password",
@@ -252,6 +256,8 @@ export const en: Messages = {
     phone: "Phone",
     email: "Email",
     roles: "Roles",
+    team: "Team",
+    selectTeam: "Select the team",
     status: "Status",
     active: "Active",
     inactive: "Inactive",
@@ -285,13 +291,25 @@ export const en: Messages = {
     avatarUpdated: "Profile photo updated",
     avatarRemoved: "Profile photo removed",
   },
-  rbac: { title: "Roles & Permissions" },
+  rbac: {
+    title: "Roles & Permissions",
+    manager: "Manager",
+    noManager: "No manager",
+  },
   validation: {
     required: "Required field",
     email: "Invalid email",
     passwordStrong: "Min. 8 chars with uppercase, lowercase, number and symbol",
     passwordsNotMatch: "Passwords do not match",
     codeShort: "Code too short",
+    rules: {
+      strength: "Password strength",
+      minLength: "At least {count} characters",
+      lowercase: "At least one lowercase letter",
+      uppercase: "At least one uppercase letter",
+      digit: "At least one number",
+      special: "At least one special character (!@#$...)",
+    },
   },
   errors: {
     unexpected: "Unexpected error",
@@ -303,6 +321,7 @@ export const en: Messages = {
       PASSWORD_REUSED:
         "This password has already been used. Choose one you have never used in this system.",
       TOO_MANY_REQUESTS: "Too many attempts. Wait a moment and try again.",
+      PENDING_TOKEN_EXPIRED: "Verification expired. Sign in again to continue.",
     },
   },
 };

package/src/i18n/messages/pt.ts

@@ -214,6 +214,10 @@ export const pt = {
     loginSuccess: "Login realizado com sucesso",
     twoFactorConfigured: "2FA configurado com sucesso",
     codeSent: "Código enviado para seu email",
+    verificationExpired:
+      "A verificação expirou. Entre novamente para continuar — se você já escaneou o QR code, ele continua valendo.",
+    expiresIn: "Tempo para confirmar: {time}",
+    expiredHint: "O tempo acabou. Entre novamente para continuar.",
   },
   recovery: {
     forgotTitle: "Recuperar senha",
@@ -254,6 +258,8 @@ export const pt = {
     phone: "Telefone",
     email: "Email",
     roles: "Papéis",
+    team: "Equipe",
+    selectTeam: "Selecione a equipe",
     status: "Status",
     active: "Ativo",
     inactive: "Inativo",
@@ -288,13 +294,27 @@ export const pt = {
     avatarUpdated: "Foto de perfil atualizada",
     avatarRemoved: "Foto de perfil removida",
   },
-  rbac: { title: "Papéis & Permissões" },
+  rbac: {
+    title: "Papéis & Permissões",
+    manager: "Gerente",
+    noManager: "Sem gerente",
+  },
   validation: {
     required: "Campo obrigatório",
     email: "Email inválido",
     passwordStrong:
       "Mín. 8 caracteres com maiúscula, minúscula, número e símbolo",
     passwordsNotMatch: "As senhas não conferem",
+    // Uma linha por exigência — é o que o PasswordRequirements lista enquanto
+    // a pessoa digita. Devem descrever a mesma coisa que `passwordStrong`.
+    rules: {
+      strength: "Força da senha",
+      minLength: "No mínimo {count} caracteres",
+      lowercase: "Pelo menos uma letra minúscula",
+      uppercase: "Pelo menos uma letra maiúscula",
+      digit: "Pelo menos um número",
+      special: "Pelo menos um caractere especial (!@#$...)",
+    },
     codeShort: "Código muito curto",
   },
   errors: {
@@ -311,6 +331,8 @@ export const pt = {
         "Esta senha já foi utilizada. Escolha uma senha que você ainda não usou neste sistema.",
       TOO_MANY_REQUESTS:
         "Muitas tentativas em pouco tempo. Aguarde um instante e tente de novo.",
+      PENDING_TOKEN_EXPIRED:
+        "A verificação expirou. Entre novamente para continuar.",
     },
   },
 };

package/src/index.ts

@@ -41,6 +41,9 @@ export {
 // ---------------------------------------------------------------------------
 export * from "#core/components/ui";
 export { cn } from "#core/lib/utils";
+// O projeto que criar tela com escopo de equipe monta o par de códigos com ele,
+// em vez de repetir os sufixos à mão.
+export { anyOrTeam } from "#core/_utils/permission";
 
 // ---------------------------------------------------------------------------
 // Hooks de listagem, requisição e filtro

package/src/styles/core.css

@@ -1,6 +1,6 @@
 /*
- * Design system do rl-core-front: tokens de cor, base do body, correção do
- * autofill e a barra de progresso do toast.
+ * Design system do rl-core-front: tipografia, tokens de cor, base do body,
+ * correção do autofill e a barra de progresso do toast.
  *
  * Um projeto que consome o pacote importa este arquivo no globals.css dele,
  * depois do `@import "tailwindcss"`:
@@ -10,6 +10,44 @@
  *   @import "rl-core-front/styles.css";
  */
 
+/*
+ * Poppins, hospedada no próprio pacote — sem CDN, sem requisição a terceiro e
+ * sem passo de instalação no projeto: quem importa este arquivo já recebe a
+ * fonte. Só o subset `latin`, que cobre português e inglês por inteiro; glifo
+ * fora dele cai no fallback da stack, que é o comportamento normal do browser.
+ *
+ * Não usamos `next/font` aqui de propósito. O pacote é publicado em
+ * código-fonte, e `next/font` é resolvido pelo build de QUEM INSTALA — a mesma
+ * armadilha do alias `@/` descrita no §4 do CLAUDE.md.
+ */
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url('./fonts/poppins-latin-400.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url('./fonts/poppins-latin-500.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url('./fonts/poppins-latin-600.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'Poppins';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url('./fonts/poppins-latin-700.woff2') format('woff2');
+}
 
 @layer base {
   :root {
@@ -20,6 +58,20 @@
      * escuro. É a causa raiz do input branco.
      */
     color-scheme: light;
+
+    /*
+     * Tipografia — o ponto de extensão da fonte. O core entrega Poppins; um
+     * projeto troca a família inteira redefinindo esta variável no globals.css
+     * dele, inclusive apontando para o que o `next/font` gerou:
+     *
+     *   :root { --font-sans: var(--font-geist), sans-serif; }
+     *
+     * Fica no `:root` e não é redeclarada no `.dark`: fonte não muda com tema.
+     */
+    --font-sans: 'Poppins', ui-sans-serif, system-ui, -apple-system,
+      'Segoe UI', sans-serif;
+    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
+
     --background: 210 20% 98%;
     --foreground: 222 47% 11%;
     --card: 0 0% 100%;
@@ -40,9 +92,32 @@
     --success-foreground: 0 0% 100%;
     --warning: 38 92% 50%;
     --warning-foreground: 0 0% 100%;
+
+    /*
+     * Versão legível como TEXTO. Verde e âmbar são claros por natureza: no tema
+     * claro, `--success`/`--warning` escritos sobre fundo branco dão ~2:1 de
+     * contraste, abaixo do mínimo de acessibilidade. Preenchimento continua
+     * usando a cor cheia; quem vira letra usa esta.
+     */
+    --success-strong: 142 72% 29%;
+    --warning-strong: 32 95% 30%;
     --border: 214 32% 91%;
     --input: 214 32% 91%;
     --ring: 211 80% 42%;
+
+    /*
+     * Trilha e pílula acesa dos controles segmentados (`Tabs` e
+     * `SegmentedControl`, que dividem a mesma pele).
+     *
+     * Existem como par próprio porque a regra que precisa valer é relativa: a
+     * pílula acesa tem que ser mais clara que a trilha em que ela está. Antes
+     * isto era `bg-muted` + `bg-card`, e no tema escuro a relação se invertia
+     * (trilha 18%, acesa 13%) — a opção selecionada ficava mais ESCURA que o
+     * fundo dela e só se distinguia pelo peso da fonte.
+     */
+    --track: 210 40% 94%;
+    --track-active: 0 0% 100%;
+
     --radius: 0.6rem;
   }
 
@@ -68,9 +143,17 @@
     --success-foreground: 0 0% 100%;
     --warning: 38 92% 55%;
     --warning-foreground: 213 30% 10%;
+
+    /* No escuro o problema se inverte: como texto, precisam clarear. */
+    --success-strong: 142 60% 62%;
+    --warning-strong: 38 92% 65%;
     --border: 213 20% 22%;
     --input: 213 20% 24%;
     --ring: 211 85% 60%;
+
+    /* Trilha abaixo do card (13%) e pílula acima dele: a acesa salta. */
+    --track: 213 25% 11%;
+    --track-active: 213 20% 24%;
   }
 }
 
@@ -80,7 +163,21 @@
   }
   body {
     @apply bg-background text-foreground;
+    font-family: var(--font-sans);
     font-feature-settings: 'rlig' 1, 'calt' 1;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+
+  /*
+   * Poppins é geométrica e larga: no tamanho de título, o espaçamento padrão
+   * abre demais. Fechar um pouco vale só do `xl` para cima — em texto corrido
+   * o mesmo ajuste prejudicaria a leitura.
+   */
+  h1,
+  h2,
+  h3 {
+    letter-spacing: -0.02em;
   }
 
   /*

package/tailwind-preset.ts

@@ -33,6 +33,15 @@ const preset: Omit<Config, 'content'> = {
       screens: { '2xl': '1400px' },
     },
     extend: {
+      /*
+       * Apontam para os tokens, e não para uma família fixa: é o que permite a
+       * um projeto trocar a fonte redefinindo `--font-sans` no CSS dele, sem
+       * tocar neste preset nem no pacote. Ver `styles/core.css`.
+       */
+      fontFamily: {
+        sans: ['var(--font-sans)'],
+        mono: ['var(--font-mono)'],
+      },
       colors: {
         border: 'hsl(var(--border))',
         input: 'hsl(var(--input))',
@@ -70,10 +79,18 @@ const preset: Omit<Config, 'content'> = {
         success: {
           DEFAULT: 'hsl(var(--success))',
           foreground: 'hsl(var(--success-foreground))',
+          /* `strong` é a variante para texto — ver core.css. */
+          strong: 'hsl(var(--success-strong))',
         },
         warning: {
           DEFAULT: 'hsl(var(--warning))',
           foreground: 'hsl(var(--warning-foreground))',
+          strong: 'hsl(var(--warning-strong))',
+        },
+        /* Trilha e pílula acesa dos controles segmentados — ver core.css. */
+        track: {
+          DEFAULT: 'hsl(var(--track))',
+          active: 'hsl(var(--track-active))',
         },
       },
       borderRadius: {