rl-core-front 0.13.0 → 0.14.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "rl-core-front",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Telas e componentes Next.js do core: login com 2FA, usu\u00e1rios, RBAC, auditoria, logs e listagens com filtro din\u00e2mico",
   "author": "Rodrigo Liberti",
   "license": "MIT",

package/src/_utils/breadcrumb-trail.ts

@@ -0,0 +1,65 @@
+/** Um degrau da migalha. Sem `href` quando não há para onde ir. */
+export interface BreadcrumbStep {
+  label: string;
+  href?: string;
+}
+
+/** O que a migalha precisa saber de um item de menu. */
+export interface BreadcrumbNavItem {
+  label: string;
+  href?: string;
+  children?: BreadcrumbNavItem[];
+}
+
+/**
+ * A trilha do caminho atual, lida do **menu** e não da URL.
+ *
+ * A URL é onde a tela mora; o menu é onde a pessoa acha que está. Os dois
+ * combinam na maioria das telas e divergem justamente nas reorganizadas: uma
+ * tela em `Cadastros › Funkos` pode morar em `/funkos/catalogos`, e a migalha
+ * por URL mostrava "funkos › catalogos" — dois nomes que não estão em lugar
+ * nenhum do menu.
+ *
+ * Rota fora do menu (link direto, detalhe de um registro) cai nos segmentos da
+ * URL: melhor um nome cru do que nenhum rastro.
+ *
+ * Grupo que só abre e fecha entra sem `href` — vira texto, e não link para uma
+ * rota que não existe.
+ */
+export const breadcrumbTrail = (
+  pathname: string,
+  navItems: readonly BreadcrumbNavItem[] | undefined,
+  segmentLabels: Record<string, string> = {},
+): BreadcrumbStep[] => {
+  const fromMenu = findInMenu(pathname, navItems ?? []);
+  if (fromMenu) {
+    return fromMenu;
+  }
+
+  const segments = pathname.split("/").filter(Boolean);
+  return segments.map((segment, index) => ({
+    label: segmentLabels[segment] ?? capitalize(segment),
+    href: "/" + segments.slice(0, index + 1).join("/"),
+  }));
+};
+
+/** Busca em profundidade: o primeiro item com o `href` pedido ganha. */
+const findInMenu = (
+  pathname: string,
+  items: readonly BreadcrumbNavItem[],
+): BreadcrumbStep[] | null => {
+  for (const item of items) {
+    if (item.href === pathname) {
+      return [{ label: item.label, href: item.href }];
+    }
+
+    const below = findInMenu(pathname, item.children ?? []);
+    if (below) {
+      return [{ label: item.label, href: item.href }, ...below];
+    }
+  }
+  return null;
+};
+
+const capitalize = (text: string): string =>
+  text.charAt(0).toUpperCase() + text.slice(1);

package/src/components/app-shell.tsx

@@ -557,7 +557,7 @@ export function AppShell({
         )}
       >
         <div className="p-4 md:p-8">
-          {!routeBlocked && <Breadcrumbs />}
+          {!routeBlocked && <Breadcrumbs navItems={navItems} />}
           {routeBlocked ? (forbidden ?? <ForbiddenScreen />) : children}
         </div>
       </main>

package/src/components/breadcrumbs.tsx

@@ -4,8 +4,18 @@ import { ChevronRight, Home } from "lucide-react";
 import { usePathname, useRouter } from "next/navigation";
 import type { JSX } from "react";
 
+import {
+  type BreadcrumbNavItem,
+  breadcrumbTrail,
+} from "#core/_utils/breadcrumb-trail";
 import { useI18n } from "#core/contexts";
 
+/**
+ * Rótulo das telas do próprio core — o projeto não precisa cadastrá-las.
+ *
+ * Vale só para o caminho de exceção: tela que está no menu tem o rótulo do
+ * menu, que é o que a pessoa acabou de clicar.
+ */
 const SEGMENT_LABELS: Record<string, string> = {
   dashboard: "nav.dashboard",
   usuarios: "nav.users",
@@ -14,17 +24,17 @@ const SEGMENT_LABELS: Record<string, string> = {
   perfil: "nav.profile",
 };
 
-export function Breadcrumbs(): JSX.Element {
+export interface BreadcrumbsProps {
+  /** O mesmo menu do `AppShell`: é dele que sai a trilha. */
+  navItems?: BreadcrumbNavItem[];
+}
+
+export function Breadcrumbs({ navItems }: BreadcrumbsProps): JSX.Element {
   const pathname = usePathname();
   const router = useRouter();
   const { t } = useI18n();
 
-  const segments = pathname.split("/").filter(Boolean);
-  const crumbs = segments.map((seg, i) => ({
-    label: SEGMENT_LABELS[seg] ? t(SEGMENT_LABELS[seg]) : seg,
-    href: "/" + segments.slice(0, i + 1).join("/"),
-    isLast: i === segments.length - 1,
-  }));
+  const trail = breadcrumbTrail(pathname, navItems, SEGMENT_LABELS);
 
   return (
     <nav className="mb-4 flex items-center gap-1.5 text-sm text-muted-foreground">
@@ -35,21 +45,32 @@ export function Breadcrumbs(): JSX.Element {
         <Home className="h-4 w-4" />
         {t("nav.home")}
       </button>
-      {crumbs.map((c) => (
-        <span key={c.href} className="flex items-center gap-1.5">
-          <ChevronRight className="h-4 w-4 text-muted-foreground/50" />
-          {c.isLast ? (
-            <span className="font-semibold text-foreground">{c.label}</span>
-          ) : (
-            <button
-              onClick={() => router.push(c.href)}
-              className="transition-colors hover:text-foreground"
-            >
-              {c.label}
-            </button>
-          )}
-        </span>
-      ))}
+      {trail.map((step, index) => {
+        const isLast = index === trail.length - 1;
+        return (
+          <span key={`${step.href ?? step.label}`} className="flex items-center gap-1.5">
+            <ChevronRight className="h-4 w-4 text-muted-foreground/50" />
+            {isLast || !step.href ? (
+              // Sem `href` é grupo do menu: abre e fecha, não navega. Virar
+              // botão aqui prometia uma tela que não existe.
+              <span
+                className={
+                  isLast ? "font-semibold text-foreground" : undefined
+                }
+              >
+                {t(step.label)}
+              </span>
+            ) : (
+              <button
+                onClick={() => router.push(step.href as string)}
+                className="transition-colors hover:text-foreground"
+              >
+                {t(step.label)}
+              </button>
+            )}
+          </span>
+        );
+      })}
     </nav>
   );
 }

package/src/components/ui/filter-field.tsx

@@ -4,6 +4,7 @@ import type { JSX } from "react";
 
 import type { FilterDraftValue, FilterField } from "#core/_utils/filter";
 import { Checkbox } from "#core/components/ui/checkbox";
+import { Combobox } from "#core/components/ui/combobox";
 import { DateRangePicker } from "#core/components/ui/date-range-picker";
 import { Input } from "#core/components/ui/input";
 import { Label } from "#core/components/ui/label";
@@ -99,6 +100,42 @@ export function FilterFieldControl({
       });
     };
 
+    /*
+     * `SELECT` é lista de registro, e lista de registro não tem tamanho: as
+     * linhas de uma coleção são trinta e as coleções, cem. Em caixas de marcar,
+     * dois campos desses tomavam o painel inteiro e o resto do filtro ficava
+     * abaixo da dobra. O `Combobox` ocupa uma linha, traz busca e mostra o que
+     * foi escolhido em etiquetas.
+     *
+     * `ENUM` fica como está: é conjunto fechado e curto — status, tipo de
+     * aquisição —, e ali ver as opções todas de uma vez vale mais do que
+     * economizar duas linhas.
+     */
+    if (field.type === "SELECT") {
+      return (
+        <div className="space-y-2">
+          <span className="text-sm font-medium">{label}</span>
+          {field.options?.length ? (
+            <Combobox
+              multiple
+              clearable
+              options={field.options.map((option) => ({
+                id: option.value,
+                name: option.label,
+              }))}
+              value={selected}
+              onChange={(values) => onChange({ values })}
+              placeholder={t("filters.all")}
+            />
+          ) : (
+            <p className="text-sm text-muted-foreground">
+              {t("filters.noOptions")}
+            </p>
+          )}
+        </div>
+      );
+    }
+
     return (
       <fieldset className="space-y-2">
         <legend className="text-sm font-medium">{label}</legend>