rl-core-front 0.3.0 → 0.4.0

package/src/components/ui/dialog.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { X } from "lucide-react";
+import { Maximize2, Minimize2, X } from "lucide-react";
 import * as React from "react";
 
 import { cn } from "#core/lib/utils";
@@ -26,28 +26,127 @@ const DialogOverlay = React.forwardRef<
 ));
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
 
+/**
+ * Escala de largura do Tailwind, em ordem. Ampliar anda dois degraus: `md` vira
+ * `xl`, `2xl` vira `4xl`. O modal cresce mantendo a proporção que já tinha, em
+ * vez de saltar para a tela inteira — um formulário de duas colunas esticado a
+ * 100% fica pior, não melhor. Um degrau só passava despercebido.
+ */
+const WIDTH_SCALE: readonly string[] = [
+  "max-w-3xs",
+  "max-w-2xs",
+  "max-w-xs",
+  "max-w-sm",
+  "max-w-md",
+  "max-w-lg",
+  "max-w-xl",
+  "max-w-2xl",
+  "max-w-3xl",
+  "max-w-4xl",
+  "max-w-5xl",
+  "max-w-6xl",
+  "max-w-7xl",
+];
+
+/** Largura de quem não declara nenhuma. */
+const DEFAULT_WIDTH = "max-w-lg";
+
+/** Quantos degraus o botão sobe de uma vez. */
+const EXPAND_STEPS = 2;
+
+/** Só para quem já está no topo da escala: daí não há degrau, resta a tela. */
+const FULL_WIDTH = "max-w-none";
+
+/**
+ * A largura do modal ampliado.
+ *
+ * Lê a **última** `max-w-*` do `className` porque é ela que o `tailwind-merge`
+ * deixa valer. Largura fora da escala (`max-w-[42rem]`) não tem degrau a subir:
+ * amplia para a tela toda.
+ */
+const expandedWidth = (className?: string): string => {
+  const declared = (className ?? "")
+    .split(/\s+/)
+    .filter((item) => item.startsWith("max-w-"));
+  const current = declared[declared.length - 1] ?? DEFAULT_WIDTH;
+  const index = WIDTH_SCALE.indexOf(current);
+  const last = WIDTH_SCALE.length - 1;
+
+  // Fora da escala não há degrau a subir, e chutar um da escala encolheria um
+  // `max-w-[90rem]`. Amplia para a tela, que é o que o botão promete.
+  if (index === -1 || index === last) {
+    return FULL_WIDTH;
+  }
+
+  // Perto do topo, dois degraus passariam do fim: para no último em vez de
+  // cair em tela cheia, que é justamente o salto que a escala evita.
+  return WIDTH_SCALE[Math.min(index + EXPAND_STEPS, last)];
+};
+
+export interface DialogContentProps
+  extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+  /**
+   * Botão de ampliar ao lado do fechar.
+   *
+   * Ligado por padrão: ampliar um degrau não atrapalha modal nenhum. Desligue
+   * com `expandable={false}` onde o tamanho é parte do desenho — confirmação
+   * curta, por exemplo, que esticada só fica com mais vazio.
+   */
+  expandable?: boolean;
+}
+
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => (
-  <DialogPortal>
-    <DialogOverlay />
-    <DialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-[calc(100%-2rem)] max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-card p-6 shadow-lg rounded-xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 max-h-[calc(100%-2rem)] overflow-y-auto",
-        className,
-      )}
-      {...props}
-    >
-      {children}
-      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring">
-        <X className="h-4 w-4" />
-        <span className="sr-only">Close</span>
-      </DialogPrimitive.Close>
-    </DialogPrimitive.Content>
-  </DialogPortal>
-));
+  DialogContentProps
+>(({ className, children, expandable = true, ...props }, ref) => {
+  // Reinicia a cada montagem: o Radix desmonta o conteúdo ao fechar, então
+  // reabrir traz o modal no tamanho normal — modal pequeno que volta ampliado
+  // surpreende quem o abriu.
+  const [expanded, setExpanded] = React.useState(false);
+
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "fixed left-[50%] top-[50%] z-50 grid translate-x-[-50%] translate-y-[-50%] gap-4 border border-border bg-card p-6 shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 overflow-y-auto",
+          "w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] rounded-xl",
+          DEFAULT_WIDTH,
+          className,
+          // Depois do `className`: é o que faz a largura ampliada vencer a que
+          // o chamador declarou, e só enquanto estiver ampliado.
+          expanded && expandedWidth(className),
+        )}
+        {...props}
+      >
+        {children}
+        <div className="absolute right-4 top-4 flex items-center gap-2">
+          {expandable && (
+            <button
+              type="button"
+              onClick={() => setExpanded((value) => !value)}
+              className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring"
+            >
+              {expanded ? (
+                <Minimize2 className="h-4 w-4" />
+              ) : (
+                <Maximize2 className="h-4 w-4" />
+              )}
+              <span className="sr-only">
+                {expanded ? "Restaurar" : "Ampliar"}
+              </span>
+            </button>
+          )}
+          <DialogPrimitive.Close className="rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring">
+            <X className="h-4 w-4" />
+            <span className="sr-only">Fechar</span>
+          </DialogPrimitive.Close>
+        </div>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+});
 DialogContent.displayName = DialogPrimitive.Content.displayName;
 
 /**

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

@@ -10,6 +10,7 @@ import { activeFilterCount } from "#core/_utils/filter";
 import { Button } from "#core/components/ui/button";
 import { FilterFieldControl } from "#core/components/ui/filter-field";
 import { FilterGroupBlock } from "#core/components/ui/filter-group";
+import { SegmentedControl } from "#core/components/ui/segmented-control";
 import { Separator } from "#core/components/ui/separator";
 import {
   Sheet,
@@ -29,6 +30,17 @@ export interface FilterSheetProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   filters: FiltersState;
+  /**
+   * Campos que a barra da listagem já controla — somem do modo simples para a
+   * mesma escolha não existir em dois lugares.
+   *
+   * Continuam no catálogo, e isso não é detalhe: é o catálogo que serializa o
+   * filtro (`buildFilter` percorre o schema). Tirá-los de lá faria o atalho da
+   * barra parar de filtrar, sem erro nenhum. O modo avançado também segue com
+   * todos: é a saída de emergência, e esconder campo ali tornaria ilegível um
+   * filtro salvo que o use.
+   */
+  hiddenFields?: string[];
 }
 
 /**
@@ -55,6 +67,7 @@ export function FilterSheet({
   open,
   onOpenChange,
   filters,
+  hiddenFields = [],
 }: FilterSheetProps): JSX.Element {
   const { t } = useI18n();
   const labelFor = useFieldLabel();
@@ -83,6 +96,21 @@ export function FilterSheet({
     }
   };
 
+  /**
+   * O que o painel não mostra, o painel não mexe.
+   *
+   * O desfecho de `/logs` é escolhido na barra e não aparece aqui dentro —
+   * então nem "Aplicar" nem "Limpar" podem desmarcá-lo. Filtrar por rota
+   * enquanto se olha o sucesso é somar uma condição à outra, não trocar de
+   * assunto.
+   */
+  const keepHidden = (): FilterValues =>
+    Object.fromEntries(
+      hiddenFields
+        .filter((field) => values[field])
+        .map((field) => [field, values[field]]),
+    );
+
   const apply = (): void => {
     filters.setMode(draftMode);
     if (draftMode === "advanced") {
@@ -90,18 +118,18 @@ export function FilterSheet({
         filters.setTree(draftTree);
       }
     } else {
-      filters.setValues(draft);
+      filters.setValues({ ...draft, ...keepHidden() });
     }
     onOpenChange(false);
   };
 
   const clear = (): void => {
-    setDraft({});
+    setDraft(keepHidden());
     setDraftTree(initialTree(schema));
     if (draftMode === "advanced") {
       filters.setTree(initialTree(schema));
     } else {
-      filters.setValues({});
+      filters.setValues(keepHidden());
     }
     onOpenChange(false);
   };
@@ -111,13 +139,17 @@ export function FilterSheet({
       ? draftTree
         ? countConditions(draftTree)
         : 0
-      : activeFilterCount(draft);
+      : activeFilterCount(draft, hiddenFields);
 
-  const modes: { id: FilterMode; label: string }[] = [
-    { id: "simple", label: t("filters.simple") },
-    { id: "advanced", label: t("filters.advanced") },
+  const modes = [
+    { value: "simple", label: t("filters.simple") },
+    { value: "advanced", label: t("filters.advanced") },
   ];
 
+  const visibleFields = schema.filter(
+    (field) => !hiddenFields.includes(field.field),
+  );
+
   return (
     <Sheet open={open} onOpenChange={onOpenChange}>
       <SheetContent
@@ -131,23 +163,13 @@ export function FilterSheet({
           </SheetDescription>
         </SheetHeader>
 
-        <div className="inline-flex overflow-hidden rounded-md border border-border">
-          {modes.map((item) => (
-            <button
-              key={item.id}
-              type="button"
-              onClick={() => switchMode(item.id)}
-              className={cn(
-                "px-3 py-1.5 text-sm transition-colors",
-                draftMode === item.id
-                  ? "bg-primary text-primary-foreground"
-                  : "hover:bg-accent",
-              )}
-            >
-              {item.label}
-            </button>
-          ))}
-        </div>
+        <SegmentedControl
+          fullWidth
+          label={t("filters.title")}
+          options={modes}
+          value={draftMode}
+          onValueChange={(value) => switchMode(value as FilterMode)}
+        />
 
         <SheetBody className="-mx-1 space-y-5 px-1">
           {loading && <Spinner className="mx-auto mt-8" />}
@@ -160,7 +182,7 @@ export function FilterSheet({
 
           {!loading && schema.length > 0 && draftMode === "simple" && (
             <>
-              {schema.map((field) => (
+              {visibleFields.map((field) => (
                 <FilterFieldControl
                   key={field.field}
                   field={field}

package/src/components/ui/index.ts

@@ -12,7 +12,6 @@ export * from "./date-range-picker";
 export * from "./dialog";
 export * from "./dropdown-menu";
 export * from "./field";
-export * from "./filter-chips";
 export * from "./filter-field";
 export * from "./filter-group";
 export * from "./filter-rule";
@@ -20,6 +19,7 @@ export * from "./filter-sheet";
 export * from "./input";
 export * from "./label";
 export * from "./row-actions";
+export * from "./segmented-control";
 export * from "./select";
 export * from "./separator";
 export * from "./sheet";

package/src/components/ui/segmented-control.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import * as React from "react";
+
+import { cn } from "#core/lib/utils";
+
+export interface SegmentedOption {
+  value: string;
+  label: string;
+}
+
+export interface SegmentedControlProps
+  extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+  options: SegmentedOption[];
+  value: string;
+  onValueChange: (value: string) => void;
+  /** Rótulo acessível do grupo — o que essas opções escolhem. */
+  label: string;
+  /**
+   * Ocupa a largura toda, com as opções dividindo o espaço em partes iguais.
+   *
+   * Para quando o controle é o cabeçalho de um bloco — duas opções encostadas à
+   * esquerda de um painel largo ficam tortas. Solto, ele mede pelo conteúdo.
+   */
+  fullWidth?: boolean;
+}
+
+/**
+ * Escolha única no formato das abas: uma opção acesa dentro de uma trilha.
+ *
+ * Tem a pele do `Tabs`, mas não é aba: aba troca de painel, isto escolhe um
+ * valor. Por isso são botões de alternância num `role="group"`, e não o
+ * `Tabs` do Radix — que emitiria `role="tablist"` com `aria-controls`
+ * apontando para um painel inexistente.
+ *
+ * Vale quando as opções cabem na linha e são poucas (até ~5). Passando disso,
+ * `Select` — trilha que quebra em duas linhas fica pior que uma lista.
+ */
+export const SegmentedControl = ({
+  options,
+  value,
+  onValueChange,
+  label,
+  fullWidth = false,
+  className,
+  ...props
+}: SegmentedControlProps): React.JSX.Element => (
+  <div
+    role="group"
+    aria-label={label}
+    className={cn(
+      "h-10 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      fullWidth ? "flex w-full" : "inline-flex",
+      className,
+    )}
+    {...props}
+  >
+    {options.map((option) => (
+      <button
+        key={option.value}
+        type="button"
+        aria-pressed={option.value === value}
+        onClick={() => onValueChange(option.value)}
+        className={cn(
+          "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          fullWidth && "flex-1",
+          option.value === value && "bg-card text-foreground shadow-sm",
+        )}
+      >
+        {option.label}
+      </button>
+    ))}
+  </div>
+);

package/src/contexts/brand-context.tsx

@@ -33,6 +33,18 @@ export interface Brand {
   logo?: ReactNode;
   /** Frase curta sob a logo na tela de login. Opcional. */
   tagline?: string;
+  /**
+   * Onde a marca fica na tela de login.
+   *
+   * - `"top"` (padrão): logo pequena acima do formulário, tudo num cartão só.
+   * - `"right"` / `"left"`: a marca ocupa metade da tela, com um divisor entre
+   *   ela e o formulário. É para logo grande — espremida no topo do cartão ela
+   *   sai ilegível, e aumentar o cartão para caber estragaria o formulário.
+   *
+   * Em tela estreita os dois lados viram empilhado com a marca em cima: meia
+   * tela de logo num celular não deixaria o formulário aparecer.
+   */
+  loginLayout?: "top" | "left" | "right";
 }
 
 /** O que os componentes do core consomem: sem opcionais, tudo já resolvido. */
@@ -41,6 +53,7 @@ export interface BrandContextType {
   mark: ReactNode;
   logo: ReactNode;
   tagline: string | null;
+  loginLayout: "top" | "left" | "right";
 }
 
 const BrandContext = createContext<BrandContextType | undefined>(undefined);
@@ -64,6 +77,7 @@ export function BrandProvider({
       mark,
       logo: brand?.logo ?? mark,
       tagline: brand?.tagline ?? null,
+      loginLayout: brand?.loginLayout ?? "top",
     };
   }, [brand, t]);
 
@@ -88,6 +102,7 @@ export function useBrand(): BrandContextType {
       mark: defaultMark,
       logo: defaultMark,
       tagline: null,
+      loginLayout: "top",
     }
   );
 }

package/src/contexts/i18n-context.tsx

@@ -14,9 +14,45 @@ import { en } from "#core/i18n/messages/en";
 import { pt } from "#core/i18n/messages/pt";
 
 export type Locale = "pt" | "en";
-const MESSAGES = { pt, en } as const;
 const STORAGE_KEY = "locale";
 
+/**
+ * Dicionário de um idioma: objeto aninhado de strings, como `i18n/messages`.
+ *
+ * O tipo é aberto de propósito — o projeto acrescenta as seções dele, e travar
+ * a forma aqui obrigaria o core a conhecer as chaves de quem o instala.
+ */
+export type Messages = Record<string, unknown>;
+
+/** Dicionário do projeto, por idioma. Cada um é opcional. */
+export type ProjectMessages = Partial<Record<Locale, Messages>>;
+
+/**
+ * Mescla o dicionário do projeto sobre o do core.
+ *
+ * É profundo porque as seções coincidem: um projeto que acrescenta
+ * `nav.tasks` não pode apagar o resto de `nav`, que é o que o shell usa. Em
+ * conflito, o projeto vence — é o que permite renomear "Logs" sem tocar no
+ * pacote.
+ */
+function deepMerge(base: Messages, override: Messages): Messages {
+  const result: Messages = { ...base };
+  for (const [key, value] of Object.entries(override)) {
+    const current = result[key];
+    const bothObjects =
+      current !== null &&
+      typeof current === "object" &&
+      !Array.isArray(current) &&
+      value !== null &&
+      typeof value === "object" &&
+      !Array.isArray(value);
+    result[key] = bothObjects
+      ? deepMerge(current as Messages, value as Messages)
+      : value;
+  }
+  return result;
+}
+
 export interface I18nContextType {
   locale: Locale;
   setLocale: (l: Locale) => void;
@@ -34,9 +70,35 @@ function resolve(obj: unknown, path: string): string | undefined {
   }, obj) as string | undefined;
 }
 
-export function I18nProvider({ children }: { children: React.ReactNode }): JSX.Element {
+export interface I18nProviderProps {
+  children: React.ReactNode;
+  /**
+   * Dicionário do projeto, mesclado sobre o do core (§14: o core não sabe os
+   * textos de quem o instala).
+   *
+   * ```tsx
+   * <I18nProvider messages={{ pt: { nav: { tasks: "Tarefas" } } }}>
+   * ```
+   */
+  messages?: ProjectMessages;
+}
+
+export function I18nProvider({
+  children,
+  messages,
+}: I18nProviderProps): JSX.Element {
   const [locale, setLocaleState] = useState<Locale>("pt");
 
+  // Mescla uma vez por dicionário, não a cada tradução: `t` roda em todo render
+  // de toda tela que usa texto.
+  const dictionary = useMemo(
+    () => ({
+      pt: messages?.pt ? deepMerge(pt, messages.pt) : (pt as Messages),
+      en: messages?.en ? deepMerge(en, messages.en) : (en as Messages),
+    }),
+    [messages],
+  );
+
   useEffect(() => {
     const saved = (localStorage.getItem(STORAGE_KEY) as Locale) || null;
     if (saved === "pt" || saved === "en") {setLocaleState(saved);}
@@ -50,15 +112,18 @@ export function I18nProvider({ children }: { children: React.ReactNode }): JSX.E
 
   const t = useCallback(
     (key: string, params?: Record<string, string | number>) => {
+      // Sem tradução no idioma corrente, cai no português; sem nenhuma, devolve
+      // a própria chave — é o que deixa `label: "Tarefas"` funcionar como texto
+      // cru em quem não quer cadastrar dicionário.
       const raw =
-        resolve(MESSAGES[locale], key) ?? resolve(MESSAGES.pt, key) ?? key;
+        resolve(dictionary[locale], key) ?? resolve(dictionary.pt, key) ?? key;
       if (!params) {return raw;}
       return Object.entries(params).reduce(
         (str, [k, v]) => str.replace(new RegExp(`\\{${k}\\}`, "g"), String(v)),
         raw,
       );
     },
-    [locale],
+    [locale, dictionary],
   );
 
   const value = useMemo(