rl-core-front 0.17.1 → 0.18.1

package/package.json

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

@@ -0,0 +1,36 @@
+"use client";
+
+import type { JSX, ReactNode } from "react";
+
+import { useAuth } from "#core/contexts/auth-context";
+
+export interface CanProps {
+  /** Uma chave, ou todas as da lista. */
+  permission?: string | string[];
+  /** Pelo menos uma destas. Combinado com `permission`, as duas condições valem. */
+  any?: string[];
+  /** O que aparece no lugar quando não pode. Ausente, nada. */
+  fallback?: ReactNode;
+  children: ReactNode;
+}
+
+/**
+ * Mostra os filhos só para quem tem a permissão.
+ *
+ * É o `hasPermission` do `useAuth` em forma de bloco: um interruptor que
+ * lança noutro módulo, um botão que só entrega 403 para quem não tem a chave.
+ * Esconder é cortesia — quem proíbe de verdade é o backend, e a chave aqui
+ * precisa ser a mesma que a rota exige, senão o bloco some para quem podia ou
+ * aparece para quem não pode.
+ *
+ * Sem chave nenhuma, mostra: é como a rota sem decorator.
+ */
+export function Can({ permission, any, fallback = null, children }: CanProps): JSX.Element {
+  const { hasAllPermissions, hasAnyPermission } = useAuth();
+  const all = permission === undefined ? [] : [permission].flat();
+  const allowed =
+    (all.length === 0 || hasAllPermissions(...all)) &&
+    (!any || any.length === 0 || hasAnyPermission(...any));
+
+  return <>{allowed ? children : fallback}</>;
+}

package/src/components/ui/index.ts

@@ -3,6 +3,7 @@ export * from "./alert";
 export * from "./avatar";
 export * from "./badge";
 export * from "./button";
+export * from "./can";
 export * from "./card";
 export * from "./checkbox";
 export * from "./column-visibility-modal";

package/src/features/rbac/rbac-screen.tsx

@@ -9,6 +9,7 @@ import {
   GroupsPanel,
   RolesPanel,
 } from "#core/features/rbac/panels";
+import { useTabState } from "#core/hooks/use-tab-state";
 
 /**
  * Controle de acesso, organizado pelo que se vem fazer aqui.
@@ -54,11 +55,16 @@ export function RbacScreen(): JSX.Element {
     },
   ].filter((tab) => tab.perm.some((code) => hasPermission(code)));
 
+  const { tab, setTab } = useTabState(
+    "rbac",
+    tabs.map((item) => item.value),
+  );
+
   return (
     <div>
       <h1 className="mb-4 text-3xl font-bold">{t("rbac.title")}</h1>
       {tabs.length > 0 && (
-        <Tabs defaultValue={tabs[0].value}>
+        <Tabs value={tab} onValueChange={setTab}>
           <TabsList>
             {tabs.map((tab) => (
               <TabsTrigger key={tab.value} value={tab.value}>

package/src/hooks/use-tab-state.ts

@@ -0,0 +1,100 @@
+"use client";
+
+import { useCallback, useEffect, useRef, useState } from "react";
+
+import { safeStorage } from "#core/_utils/storage";
+
+const STORAGE_PREFIX = "tab:";
+const QUERY_PARAM = "tab";
+
+export interface UseTabStateResult<T extends string> {
+  tab: T;
+  /**
+   * Recebe `string` porque é o que o `Tabs` e o `TabShortcuts` entregam; valor
+   * fora da lista é ignorado, para um link editado à mão não abrir aba nenhuma.
+   */
+  setTab: (next: string) => void;
+}
+
+const readFromUrl = (): string | null =>
+  new URLSearchParams(window.location.search).get(QUERY_PARAM);
+
+/** Troca só o `?tab=`, preservando o resto — o `?filter=` da listagem mora ao lado. */
+const writeToUrl = (value: string): void => {
+  const params = new URLSearchParams(window.location.search);
+  params.set(QUERY_PARAM, value);
+  window.history.replaceState(null, "", `${window.location.pathname}?${params.toString()}`);
+};
+
+/**
+ * Em qual aba a pessoa deixou a tela, por `storageKey`.
+ *
+ * Duas memórias, porque cada uma responde a uma pergunta diferente. A
+ * querystring (`?tab=`) faz o F5 voltar onde estava e transforma a aba em
+ * link compartilhável — o mesmo motivo do `?filter=` do `useFilters`. O
+ * `localStorage` cobre o que a URL não alcança: abrir a tela pelo menu amanhã
+ * e cair na última aba usada, e não na primeira.
+ *
+ * A URL manda quando as duas discordam: quem recebeu um link quer ver o que o
+ * link aponta, não a última aba de quem abriu.
+ *
+ * O espelho é `replaceState`, como no filtro: trocar de aba não é navegação, e
+ * empilhar histórico faria o "voltar" percorrer aba por aba antes de sair da
+ * tela.
+ *
+ * `tabs` é a lista do que existe: o que se lê da URL ou do storage e não está
+ * nela cai no padrão — uma aba que foi removida numa versão nova, ou um link
+ * digitado errado, abre a tela em vez de deixá-la vazia.
+ */
+export function useTabState<T extends string>(
+  storageKey: string,
+  tabs: readonly T[],
+  defaultTab: T = tabs[0],
+): UseTabStateResult<T> {
+  const [tab, setStoredTab] = useState<T>(defaultTab);
+
+  // Por `ref` porque a lista costuma nascer dentro do render (filtrada por
+  // permissão, por exemplo): como dependência, ela refaria a hidratação a cada
+  // render.
+  const known = useRef(tabs);
+
+  useEffect(() => {
+    known.current = tabs;
+  });
+
+  const isTab = useCallback((value: string | null): value is T => {
+    return value !== null && (known.current as readonly string[]).includes(value);
+  }, []);
+
+  // Hidrata uma vez, no cliente: no primeiro render do Next não há `window`,
+  // e ler ali faria o servidor e o navegador desenharem abas diferentes.
+  useEffect(() => {
+    const fromUrl = readFromUrl();
+    const fromStorage = safeStorage.get(`${STORAGE_PREFIX}${storageKey}`);
+    const resolved = isTab(fromUrl) ? fromUrl : isTab(fromStorage) ? fromStorage : defaultTab;
+
+    setStoredTab(resolved);
+
+    // A URL passa a dizer onde a tela está, venha a aba de onde vier — sem
+    // isso, copiar o link depois de cair na aba do storage levaria à padrão.
+    // Lista vazia (nenhuma aba permitida) não tem o que dizer.
+    if (resolved !== undefined && fromUrl !== resolved) {
+      writeToUrl(resolved);
+    }
+  }, [storageKey, defaultTab, isTab]);
+
+  const setTab = useCallback(
+    (next: string): void => {
+      if (!isTab(next)) {
+        return;
+      }
+
+      setStoredTab(next);
+      writeToUrl(next);
+      safeStorage.set(`${STORAGE_PREFIX}${storageKey}`, next);
+    },
+    [storageKey, isTab],
+  );
+
+  return { tab, setTab };
+}

package/src/index.ts

@@ -121,6 +121,8 @@ export {
   TAB_SHORTCUT_DIGITS,
   useShortcut,
 } from "#core/hooks/use-shortcut";
+export type { UseTabStateResult } from "#core/hooks/use-tab-state";
+export { useTabState } from "#core/hooks/use-tab-state";
 export type { TableView, UseTableViewResult } from "#core/hooks/use-table-view";
 export { useTableView } from "#core/hooks/use-table-view";
 // RequestOperation é enum (valor, não só tipo): sem ele o projeto não consegue