rl-core-front 0.15.4 → 0.15.6

package/src/components/ui/date-picker.tsx

@@ -6,12 +6,15 @@ import { useState } from "react";
 
 import {
   addMonths,
+  dayPlaceholder,
   formatDay,
   fromIsoDay,
   isSameDay,
   isSameMonth,
+  maskDay,
   monthGrid,
   monthLabel,
+  parseTypedDay,
   today,
   toIsoDay,
   weekdayLabels,
@@ -19,6 +22,7 @@ import {
 import { Button } from "#core/components/ui/button";
 import {
   Popover,
+  PopoverAnchor,
   PopoverContent,
   PopoverTrigger,
 } from "#core/components/ui/popover";
@@ -46,6 +50,10 @@ export interface DatePickerProps {
  * O valor continua sendo a string ISO do dia, e não `Date`: é o que o backend
  * grava (`char(10)`) e o que evita a viagem por fuso que transforma dia 1º às
  * 00:00 locais no dia 30 em UTC.
+ *
+ * O campo é **digitável**: `1108` já é 11 de agosto, e quem sabe a data não
+ * precisa navegar meses no calendário para dizê-la. O calendário continua ali,
+ * no ícone — é o caminho de quem procura o dia, não de quem já o conhece.
  */
 export function DatePicker({
   value,
@@ -56,15 +64,55 @@ export function DatePicker({
 }: DatePickerProps): JSX.Element {
   const { t, locale } = useI18n();
   const [open, setOpen] = useState(false);
+  /*
+    O que está sendo digitado, enquanto ainda não é uma data.
+
+    Sem este rascunho o campo teria de apagar cada tecla que não fecha um dia
+    válido — digitar `1` já voltaria para o valor gravado, e não haveria como
+    chegar ao `11`.
+  */
+  const [typed, setTyped] = useState<string | null>(null);
 
   const selected = fromIsoDay(value);
   const [month, setMonth] = useState<Date>(() => selected ?? today());
 
   const pickDay = (day: Date): void => {
     onChange(toIsoDay(day));
+    setTyped(null);
     setOpen(false);
   };
 
+  /**
+   * Cada tecla: a máscara põe as barras, e a data sai assim que existir.
+   *
+   * O ano em branco é o do dia que está no campo — ou o de hoje, quando não há
+   * nenhum. Campo esvaziado limpa o valor: apagar é uma escolha, não um
+   * rascunho pela metade.
+   */
+  const digitar = (raw: string): void => {
+    // O texto que estava lá antes: é ele que diz se a tecla foi um dígito novo
+    // ou um apagar — e o campo se comporta diferente nos dois casos.
+    const texto = maskDay(raw, locale, typed ?? (value ? formatDay(value, locale) : ""));
+    setTyped(texto);
+
+    if (texto === "") {
+      onChange(undefined);
+
+      return;
+    }
+
+    const iso = parseTypedDay(
+      texto,
+      locale,
+      (selected ?? today()).getFullYear(),
+    );
+
+    if (iso) {
+      onChange(iso);
+      setMonth(fromIsoDay(iso) ?? month);
+    }
+  };
+
   const dayClass = (day: Date): string => {
     if (selected && isSameDay(day, selected)) {
       return "bg-primary text-primary-foreground font-semibold";
@@ -77,16 +125,41 @@ export function DatePicker({
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger
-        disabled={disabled}
-        aria-label={label}
-        className="flex h-10 w-full items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors hover:border-ring focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50"
-      >
-        <span className={cn("truncate", !value && "text-muted-foreground")}>
-          {value ? formatDay(value, locale) : (placeholder ?? t("filters.selectDate"))}
-        </span>
-        <Calendar className="h-4 w-4 shrink-0 text-muted-foreground" />
-      </PopoverTrigger>
+      {/*
+        A âncora é a linha inteira, e não o ícone: presa ao botão, o painel
+        abriria alinhado a ele e com a largura dele — um calendário de 16px.
+      */}
+      <PopoverAnchor asChild>
+        <div
+          className={cn(
+            "flex h-10 w-full items-center rounded-md border border-input bg-transparent shadow-sm transition-colors hover:border-ring focus-within:ring-2 focus-within:ring-ring",
+            disabled && "cursor-not-allowed opacity-50",
+          )}
+        >
+          <input
+            aria-label={label}
+            value={typed ?? (value ? formatDay(value, locale) : "")}
+            disabled={disabled}
+            // Só dígitos, e o teclado do celular abre no numérico: a máscara é
+            // quem escreve as barras.
+            inputMode="numeric"
+            placeholder={placeholder ?? dayPlaceholder(locale)}
+            onChange={(event) => digitar(event.target.value)}
+            // Sai do campo e o rascunho some: `11/0` não é data, e deixá-lo
+            // escrito faria o campo mostrar uma coisa e o formulário guardar
+            // outra.
+            onBlur={() => setTyped(null)}
+            className="h-full w-full min-w-0 bg-transparent px-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed"
+          />
+          <PopoverTrigger
+            disabled={disabled}
+            aria-label={t("filters.openCalendar")}
+            className="flex h-full shrink-0 items-center px-3 text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed"
+          >
+            <Calendar className="h-4 w-4" />
+          </PopoverTrigger>
+        </div>
+      </PopoverAnchor>
 
       <PopoverContent
         // Largura do campo, e não fixa: o painel é a continuação dele, e
@@ -160,6 +233,7 @@ export function DatePicker({
               size="sm"
               onClick={() => {
                 onChange(undefined);
+                setTyped(null);
                 setOpen(false);
               }}
             >

package/src/components/ui/dialog.tsx

@@ -4,6 +4,7 @@ import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Expand, Shrink, X } from "lucide-react";
 import * as React from "react";
 
+import { Button, type ButtonProps } from "#core/components/ui/button";
 import {
   EXPAND_SHORTCUT_KEY,
   EXPAND_SHORTCUT_LABEL,
@@ -11,6 +12,25 @@ import {
 } from "#core/hooks/use-shortcut";
 import { cn } from "#core/lib/utils";
 
+/**
+ * Como pedir para fechar o modal **passando pela guarda**.
+ *
+ * O `Esc`, o clique fora e o `X` passam pelo `DialogContent`, que pergunta
+ * antes de descartar o que foi preenchido. O botão "Cancelar" mora na tela e
+ * chamava o `onClose` dela direto — mesma saída, sem a pergunta. Este contexto
+ * é o caminho que faltava: quem pede daqui recebe a mesma confirmação.
+ */
+const DialogCloseRequestContext = React.createContext<() => void>(() => {});
+
+/**
+ * Pede o fechamento do modal em que o componente está.
+ *
+ * Fora de um `DialogContent` não faz nada — nunca quebra, só não tem o que
+ * fechar.
+ */
+const useDialogCloseRequest = (): (() => void) =>
+  React.useContext(DialogCloseRequestContext);
+
 const Dialog = DialogPrimitive.Root;
 const DialogTrigger = DialogPrimitive.Trigger;
 const DialogPortal = DialogPrimitive.Portal;
@@ -248,6 +268,22 @@ const DialogContent = React.forwardRef<
     setConfirmandoSaida(true);
   };
 
+  /**
+   * A saída pedida de dentro do corpo — é o que o "Cancelar" usa.
+   *
+   * Sem evento para segurar: aqui o fechamento nem começa, ou é a pergunta que
+   * aparece, ou é o `Close` escondido que fecha de uma vez.
+   */
+  const pedirSaida = React.useCallback((): void => {
+    if (unsavedChanges) {
+      setConfirmandoSaida(true);
+
+      return;
+    }
+
+    fecharRef.current?.click();
+  }, [unsavedChanges]);
+
   // O cabeçalho sai da lista para dividir a primeira linha com os botões; o
   // resto segue na ordem em que o chamador escreveu.
   const items = React.Children.toArray(children);
@@ -338,7 +374,9 @@ const DialogContent = React.forwardRef<
             </DialogPrimitive.Close>
           </div>
         </div>
-        {body}
+        <DialogCloseRequestContext.Provider value={pedirSaida}>
+          {body}
+        </DialogCloseRequestContext.Provider>
 
         <DialogPrimitive.Close ref={fecharRef} className="hidden" tabIndex={-1} />
       </DialogPrimitive.Content>
@@ -467,8 +505,49 @@ const DialogDescription = React.forwardRef<
 ));
 DialogDescription.displayName = DialogPrimitive.Description.displayName;
 
+/**
+ * O "Cancelar" do rodapé — a mesma saída do `Esc`, com a mesma pergunta.
+ *
+ * Existe porque o botão que a tela escrevia à mão chamava o `onClose` dela
+ * direto: fechava sem perguntar nada, e o formulário preenchido ia junto.
+ * Aqui o fechamento é pedido ao modal, que decide se pergunta antes.
+ *
+ * O texto vem de fora — este arquivo não depende do provider de i18n, e passar
+ * a depender quebraria todo uso fora dele.
+ *
+ * ```tsx
+ * <DialogFooter>
+ *   <DialogCancel>{t("common.cancel")}</DialogCancel>
+ *   <Button type="submit">{t("common.save")}</Button>
+ * </DialogFooter>
+ * ```
+ */
+const DialogCancel = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant = "outline", type = "button", onClick, ...props }, ref) => {
+    const pedirSaida = useDialogCloseRequest();
+
+    return (
+      <Button
+        ref={ref}
+        type={type}
+        variant={variant}
+        onClick={(event) => {
+          onClick?.(event);
+
+          if (!event.defaultPrevented) {
+            pedirSaida();
+          }
+        }}
+        {...props}
+      />
+    );
+  },
+);
+DialogCancel.displayName = "DialogCancel";
+
 export {
   Dialog,
+  DialogCancel,
   DialogClose,
   DialogContent,
   DialogDescription,
@@ -479,4 +558,5 @@ export {
   DialogPortal,
   DialogTitle,
   DialogTrigger,
+  useDialogCloseRequest,
 };

package/src/components/ui/table.tsx

@@ -36,6 +36,27 @@ const TableBody = React.forwardRef<
 ));
 TableBody.displayName = "TableBody";
 
+/**
+ * A linha de fechamento da tabela: total, saldo, contagem.
+ *
+ * `tfoot` e não uma última linha do corpo: ela não é registro — não ordena
+ * junto, não entra na contagem e continua embaixo quando a ordenação muda.
+ */
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t border-border bg-muted/40 font-medium [&_tr]:border-0",
+      className,
+    )}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
   React.HTMLAttributes<HTMLTableRowElement>
@@ -90,4 +111,12 @@ const TableCell = React.forwardRef<
 ));
 TableCell.displayName = "TableCell";
 
-export { Table, TableBody, TableCell,TableHead, TableHeader, TableRow };
+export {
+  Table,
+  TableBody,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+};

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

@@ -15,11 +15,16 @@ export interface UseColumnVisibilityResult {
 /**
  * Persiste as colunas ocultas de uma tabela em localStorage (por storageKey).
  * Retorna a lista de ocultas + helpers para ler/salvar.
+ *
+ * `defaultHidden` é só o ponto de partida: vale enquanto ninguém tiver
+ * escolhido as colunas nesta tela. Depois da primeira escolha, a lista guardada
+ * é a verdade — inclusive quando ela mostra uma coluna que nasceu escondida.
  */
 export function useColumnVisibility(
   storageKey?: string,
+  defaultHidden: string[] = [],
 ): UseColumnVisibilityResult {
-  const [hiddenColumns, setHiddenColumns] = useState<string[]>([]);
+  const [hiddenColumns, setHiddenColumns] = useState<string[]>(defaultHidden);
 
   useEffect(() => {
     if (!storageKey) {return;}

package/src/hooks/use-table-view.ts

@@ -0,0 +1,54 @@
+"use client";
+
+import { useCallback, useEffect, useState } from "react";
+
+import { safeStorage } from "#core/_utils/storage";
+
+const STORAGE_PREFIX = "view:";
+
+/** Como a listagem se apresenta: em linhas ou em cartões. */
+export type TableView = "list" | "grid";
+
+export interface UseTableViewResult {
+  view: TableView;
+  setView: (next: TableView) => void;
+}
+
+/**
+ * Guarda em qual formato a pessoa deixou a listagem, por `storageKey`.
+ *
+ * Mesma ideia das colunas escondidas: é escolha de quem olha, não da tela, e
+ * refazê-la a cada visita transformaria o alternador num incômodo. Sem
+ * `storageKey` o formato dura só enquanto a tela estiver aberta — igual às
+ * colunas, que também só persistem quando a tabela tem chave.
+ */
+export function useTableView(
+  storageKey?: string,
+  defaultView: TableView = "list",
+): UseTableViewResult {
+  const [view, setStoredView] = useState<TableView>(defaultView);
+
+  useEffect(() => {
+    if (!storageKey) {
+      return;
+    }
+    const raw = safeStorage.get(`${STORAGE_PREFIX}${storageKey}`);
+
+    if (raw === "list" || raw === "grid") {
+      setStoredView(raw);
+    }
+  }, [storageKey]);
+
+  const setView = useCallback(
+    (next: TableView) => {
+      setStoredView(next);
+
+      if (storageKey) {
+        safeStorage.set(`${STORAGE_PREFIX}${storageKey}`, next);
+      }
+    },
+    [storageKey],
+  );
+
+  return { view, setView };
+}

package/src/i18n/messages/en.ts

@@ -165,8 +165,12 @@ export const en: Messages = {
     nextPage: "Next page",
     empty: "No records",
     emptyFiltered: "No records match this filter",
+    view: "List format",
+    viewList: "List",
+    viewGrid: "Cards",
     reorder: "Drag to reorder",
     reorderSorted: "Clear the column sorting to drag rows",
+    reorderGrouped: "Rows cannot be reordered while the list is grouped",
   },
   filters: {
     button: "Filters",
@@ -183,6 +187,7 @@ export const en: Messages = {
     toChip: "until",
     selectPeriod: "Select a period",
     selectDate: "Select a date",
+    openCalendar: "Open calendar",
     today: "Today",
     lastDays: "{days} days",
     previousMonth: "Previous month",

package/src/i18n/messages/pt.ts

@@ -167,9 +167,13 @@ export const pt = {
     nextPage: "Próxima página",
     empty: "Nenhum registro",
     emptyFiltered: "Nenhum registro para este filtro",
+    view: "Formato da listagem",
+    viewList: "Lista",
+    viewGrid: "Cartões",
     reorder: "Arraste para reordenar",
     reorderSorted:
       "Limpe a ordenação por coluna para arrastar as linhas",
+    reorderGrouped: "Não dá para reordenar com a lista dividida em seções",
   },
   filters: {
     button: "Filtros",
@@ -186,6 +190,7 @@ export const pt = {
     toChip: "até",
     selectPeriod: "Selecione o período",
     selectDate: "Selecione a data",
+    openCalendar: "Abrir calendário",
     today: "Hoje",
     lastDays: "{days} dias",
     previousMonth: "Mês anterior",

package/src/index.ts

@@ -110,6 +110,8 @@ export {
   EXPAND_SHORTCUT_LABEL,
   useShortcut,
 } from "#core/hooks/use-shortcut";
+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
 // pedir o toast padrão de criado/alterado/removido que o core já traduz.
 export { RequestOperation, useRequest } from "#core/hooks/use-request";