rl-core-front 0.15.6 → 0.16.1

package/src/components/ui/data-table.tsx

@@ -11,6 +11,8 @@ import {
   PaginationState,
   RowData,
   rowPaginationFeature,
+  rowSelectionFeature,
+  RowSelectionState,
   rowSortingFeature,
   sortFn_alphanumeric,
   sortFn_basic,
@@ -30,13 +32,14 @@ import {
   SlidersHorizontal,
 } from "lucide-react";
 import type { JSX, PointerEvent as ReactPointerEvent } from "react";
-import { Fragment, useMemo, useRef, useState } from "react";
+import { Fragment, useEffect, useMemo, useRef, useState } from "react";
 
 import { countConditions } from "#core/_utils/advanced-filter";
 import { activeFilterCount } from "#core/_utils/filter";
 import { pageRange } from "#core/_utils/page-range";
 import { Button } from "#core/components/ui/button";
 import { Card } from "#core/components/ui/card";
+import { Checkbox } from "#core/components/ui/checkbox";
 import {
   ColumnVisibilityModal,
   ColumnVisibilityOption,
@@ -62,6 +65,7 @@ import { cn } from "#core/lib/utils";
 
 export const dataTableFeatures = tableFeatures({
   columnVisibilityFeature,
+  rowSelectionFeature,
   rowSortingFeature,
   rowPaginationFeature,
   sortedRowModel: createSortedRowModel(),
@@ -75,6 +79,48 @@ export const dataTableFeatures = tableFeatures({
 
 export type DataTableFeatures = typeof dataTableFeatures;
 
+/**
+ * A coluna das caixas de seleção.
+ *
+ * Fora do componente porque ela não depende de nada dele além dos dois rótulos
+ * — e defini-la dentro faria uma coluna nova a cada render, que é o suficiente
+ * para o TanStack remontar a tabela e perder a seleção no meio do clique.
+ *
+ * A caixa do cabeçalho marca **a página**, e não a base: com paginação no
+ * servidor, "todas" seria uma promessa que a tabela não tem como cumprir — ela
+ * só tem em mãos a página atual.
+ */
+const selectionColumn = <T extends RowData>(
+  selectAllLabel: string,
+  selectRowLabel: string,
+): ColumnDef<DataTableFeatures, T, unknown> => ({
+  id: "select",
+  meta: { shrink: true },
+  enableHiding: false,
+  enableSorting: false,
+  header: ({ table }) => (
+    <Checkbox
+      aria-label={selectAllLabel}
+      checked={
+        table.getIsAllPageRowsSelected()
+          ? true
+          : table.getIsSomePageRowsSelected()
+            ? "indeterminate"
+            : false
+      }
+      onCheckedChange={(marcado) => table.toggleAllPageRowsSelected(marcado === true)}
+    />
+  ),
+  cell: ({ row }) => (
+    <Checkbox
+      aria-label={selectRowLabel}
+      checked={row.getIsSelected()}
+      disabled={!row.getCanSelect()}
+      onCheckedChange={(marcado) => row.toggleSelected(marcado === true)}
+    />
+  ),
+});
+
 interface DataTableProps<T extends RowData> {
   columns: ColumnDef<DataTableFeatures, T, unknown>[];
   data: T[];
@@ -103,6 +149,23 @@ interface DataTableProps<T extends RowData> {
   onSortingChange?: OnChangeFn<SortingState>;
   /** Habilita ordenação (padrão true). Desligue quando o backend ainda não ordena. */
   enableSorting?: boolean;
+  /**
+   * Liga a seleção de linhas — uma coluna de caixas antes das outras.
+   *
+   * A função existe para a linha que **não** pode entrar: numa fatura, a
+   * parcela já paga não se paga de novo. Desabilitar a caixa é melhor que
+   * escondê-la, porque a coluna continua alinhada e a linha continua contando
+   * como linha.
+   */
+  enableRowSelection?: boolean | ((row: T) => boolean);
+  /**
+   * O que está selecionado, a cada mudança.
+   *
+   * O `clear` vem junto de propósito: quem age sobre a seleção precisa desfazê-la
+   * depois — pagou as seis parcelas, as caixas têm de esvaziar. Guardar a função
+   * é mais simples que a tabela adivinhar quando a ação terminou.
+   */
+  onSelectionChange?: (rows: T[], clear: () => void) => void;
   /**
    * Filtros dinâmicos, como o `useListQuery` os devolve. Sem esta prop o botão
    * não aparece — listagem sem catálogo continua funcionando igual.
@@ -372,6 +435,8 @@ export function DataTable<T extends RowData>({
   sorting,
   onSortingChange,
   enableSorting = true,
+  enableRowSelection,
+  onSelectionChange,
   filters,
   hiddenFilterFields,
   emptyMessage,
@@ -453,15 +518,34 @@ export function DataTable<T extends RowData>({
     ? { pageIndex: 0, pageSize: Math.max(data.length, 1) }
     : internalPagination;
 
+  const [rowSelection, setRowSelection] = useState<RowSelectionState>({});
+
+  /*
+    A coluna das caixas entra na frente das outras, e só existe com a seleção
+    ligada: uma coluna a mais em toda tabela do sistema custaria 40px de largura
+    a telas que nunca vão selecionar nada.
+
+    `enableHiding: false` porque ela não é dado — esconder a caixa deixaria a
+    seleção ativa e invisível, que é o pior estado possível.
+  */
+  const colunas = useMemo(
+    () =>
+      enableRowSelection
+        ? [selectionColumn<T>(t("table.selectAll"), t("table.selectRow")), ...columns]
+        : columns,
+    [columns, enableRowSelection, t],
+  );
+
   const table = useTable({
     features: dataTableFeatures,
     data,
-    columns,
+    columns: colunas,
     getRowId: getRowId ? (row) => getRowId(row) : undefined,
     state: {
       columnVisibility,
       sorting: manualSorting ? sorting : internalSorting,
       pagination: manualPagination ? pagination : paginacaoLocal,
+      rowSelection,
     },
     onColumnVisibilityChange: (updater) => {
       const next =
@@ -472,6 +556,11 @@ export function DataTable<T extends RowData>({
           .map(([k]) => k),
       );
     },
+    onRowSelectionChange: setRowSelection,
+    enableRowSelection:
+      typeof enableRowSelection === "function"
+        ? (row: { original: T }) => enableRowSelection(row.original)
+        : enableRowSelection,
     onSortingChange: manualSorting ? onSortingChange : setInternalSorting,
     onPaginationChange: manualPagination
       ? onPaginationChange
@@ -482,6 +571,28 @@ export function DataTable<T extends RowData>({
     ...(manualPagination ? { rowCount: rowCount ?? 0 } : {}),
   });
 
+  /*
+    A tela é avisada num efeito, e não dentro do `onRowSelectionChange`.
+
+    O handler roda **antes** de o estado entrar, então ali a tabela ainda
+    responde a seleção antiga — e a tela receberia sempre uma seleção atrasada
+    em um clique, que é o tipo de erro que só aparece quando alguém confere o
+    total do que selecionou.
+  */
+  const selecionadas = table.getSelectedRowModel().rows.map((row) => row.original);
+  const avisar = useRef(onSelectionChange);
+
+  useEffect(() => {
+    avisar.current = onSelectionChange;
+  }, [onSelectionChange]);
+
+  useEffect(() => {
+    avisar.current?.(selecionadas as T[], () => setRowSelection({}));
+    // A dependência é o **estado** da seleção, e não a lista derivada: esta é
+    // um array novo a cada render, e o efeito rodaria sempre.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [rowSelection]);
+
   /*
     Linha de fechamento: existe só se alguma coluna visível declarar `footer`.
 

package/src/components/ui/image-upload.tsx

@@ -0,0 +1,329 @@
+"use client";
+
+import { ImagePlus, Link2, Trash2, Upload } from "lucide-react";
+import type { ChangeEvent, ClipboardEvent, DragEvent, JSX } from "react";
+import { useRef, useState } from "react";
+
+import { imagesService } from "#core/_services/images";
+import { uploadUrlOf } from "#core/_utils/upload-url";
+import { Button } from "#core/components/ui/button";
+import { Input } from "#core/components/ui/input";
+import { Spinner } from "#core/components/ui/spinner";
+import { useI18n } from "#core/contexts/i18n-context";
+import { useImageUpload } from "#core/hooks/use-image-upload";
+import { cn } from "#core/lib/utils";
+
+export interface ImageUploadProps {
+  /** Nome do perfil no servidor — é ele que decide tamanho, formato e limite. */
+  profile: string;
+  /** Caminho já enviado, ou `null`. Controlado, para casar com o formulário. */
+  value: string | null;
+  onChange: (path: string | null) => void;
+  /** Erro vindo do formulário; o do envio o componente mostra sozinho. */
+  error?: string;
+  disabled?: boolean;
+  /** Some com o campo de endereço — útil onde colar link não faz sentido. */
+  hideUrlField?: boolean;
+  className?: string;
+}
+
+/**
+ * Envia uma imagem e devolve o caminho dela.
+ *
+ * **Quatro formas de entregar a imagem**, e todas terminam no mesmo lugar:
+ * escolher o arquivo, arrastar e soltar, colar (⌘V) e colar o endereço — este
+ * último com o servidor baixando, convertendo e guardando como arquivo nosso.
+ * O que o resto do sistema vê é sempre um caminho.
+ *
+ * O componente **não decide formato nem tamanho**: ele pergunta o perfil ao
+ * servidor e obedece. É o que permite trocar 400×400 por 600×600 sem publicar
+ * interface, e o que mantém a listagem uniforme — quem cadastra não escolhe.
+ *
+ * O progresso aparece aqui, sobre a prévia, e também no painel do rodapé
+ * (`JobDock`), que sobrevive à navegação. Sem modal: o job dura um ou dois
+ * segundos, e cobrir o formulário esconderia os outros campos por causa de uma
+ * foto.
+ */
+export function ImageUpload({
+  profile,
+  value,
+  onChange,
+  error,
+  disabled = false,
+  hideUrlField = false,
+  className,
+}: ImageUploadProps): JSX.Element {
+  const { t } = useI18n();
+  const {
+    profile: info,
+    sending,
+    error: uploadError,
+    upload,
+    uploadFromUrl,
+    clearError,
+  } = useImageUpload(profile);
+
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [dragging, setDragging] = useState(false);
+  const [url, setUrl] = useState("");
+
+  const bloqueado = disabled || sending;
+  const mensagem = error ?? uploadError;
+
+  const receber = async (file?: File | null): Promise<void> => {
+    if (!file || bloqueado) {
+      return;
+    }
+
+    const path = await upload(file);
+
+    if (path) {
+      onChange(path);
+    }
+  };
+
+  const buscarEndereco = async (): Promise<void> => {
+    const endereco = url.trim();
+
+    if (endereco === "" || bloqueado) {
+      return;
+    }
+
+    const path = await uploadFromUrl(endereco);
+
+    if (path) {
+      onChange(path);
+      setUrl("");
+    }
+  };
+
+  const remover = async (): Promise<void> => {
+    if (!value || bloqueado) {
+      return;
+    }
+
+    // O arquivo sai do disco junto: caminho que ninguém mais referencia é
+    // exatamente o que a faxina não varre (a pasta definitiva não é varrida).
+    await imagesService.remove(profile, value).catch(() => undefined);
+    onChange(null);
+    clearError();
+  };
+
+  /**
+   * Colar é o gesto de quem acabou de copiar a imagem num site.
+   *
+   * Duas formas chegam pelo mesmo evento: a imagem em si (`files`) e o
+   * endereço dela como texto. Sem tratar isto, a pessoa cola e nada acontece.
+   */
+  const colar = (event: ClipboardEvent<HTMLDivElement>): void => {
+    const arquivo = event.clipboardData.files?.[0];
+
+    if (arquivo) {
+      event.preventDefault();
+      void receber(arquivo);
+      return;
+    }
+
+    const texto = event.clipboardData.getData("text").trim();
+
+    if (/^https?:\/\//i.test(texto)) {
+      event.preventDefault();
+      setUrl(texto);
+      void uploadFromUrl(texto).then((path) => {
+        if (path) {
+          onChange(path);
+        }
+      });
+    }
+  };
+
+  /**
+   * `preventDefault` no `dragover` não é detalhe: sem ele o navegador abre a
+   * imagem soltada numa aba e leva a pessoa embora do formulário preenchido.
+   */
+  const arrastar = (event: DragEvent<HTMLDivElement>, ativo: boolean): void => {
+    event.preventDefault();
+    event.stopPropagation();
+    setDragging(ativo && !bloqueado);
+  };
+
+  const soltar = (event: DragEvent<HTMLDivElement>): void => {
+    arrastar(event, false);
+    // Vários arquivos num campo de uma imagem: vale o primeiro, e o resto é
+    // ignorado em silêncio — recusar tudo seria pior para quem só errou a mira.
+    void receber(event.dataTransfer.files?.[0]);
+  };
+
+  /*
+   * A área de envio tem a proporção da caixa do perfil, e quadrado é o padrão
+   * enquanto ela não chegou: uma faixa larga para uma foto quadrada mostraria a
+   * imagem pequena no meio de um vazio, e o quadro pularia de forma quando o
+   * perfil respondesse.
+   */
+  const proporcao =
+    info?.height && info.width ? `${info.width} / ${info.height}` : "1 / 1";
+
+  return (
+    <div className={cn("flex flex-col gap-2", className)}>
+      {/*
+        A área inteira é o alvo do clique, e não só o link no meio dela: um
+        quadro tracejado desse tamanho *parece* clicável, e mirar um texto de
+        uma linha dentro dele é trabalho que a interface não precisava pedir.
+      */}
+      <div
+        role="button"
+        aria-label={t("image.choose")}
+        // `tabIndex` também serve ao `paste`: um `div` sem foco não recebe o
+        // evento de colar.
+        tabIndex={bloqueado ? -1 : 0}
+        onClick={() => !bloqueado && inputRef.current?.click()}
+        onKeyDown={(event) => {
+          // Alvo clicável tem de responder ao teclado como um botão responde.
+          if (event.key === "Enter" || event.key === " ") {
+            event.preventDefault();
+            if (!bloqueado) {
+              inputRef.current?.click();
+            }
+          }
+        }}
+        onPaste={colar}
+        onDragOver={(event) => arrastar(event, true)}
+        onDragLeave={(event) => arrastar(event, false)}
+        onDrop={soltar}
+        className={cn(
+          "relative flex w-full items-center justify-center overflow-hidden rounded-lg border border-dashed border-border bg-muted/40 outline-none transition-colors",
+          "focus-visible:ring-2 focus-visible:ring-ring",
+          dragging && "border-primary bg-primary/5",
+          bloqueado ? "cursor-default" : "cursor-pointer hover:border-primary/60",
+        )}
+        style={{ aspectRatio: proporcao }}
+      >
+        {value ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          <img
+            src={uploadUrlOf(value)}
+            alt=""
+            className="h-full w-full object-contain"
+          />
+        ) : (
+          <div className="flex flex-col items-center gap-2 p-4 text-center">
+            <ImagePlus className="h-8 w-8 text-muted-foreground/60" />
+            <p className="text-xs text-muted-foreground">
+              {t("image.empty")}{" "}
+              <button
+                type="button"
+                disabled={bloqueado}
+                // `stopPropagation` porque o container também abre o seletor:
+                // sem isto, o clique aqui contaria duas vezes e o diálogo do
+                // sistema abriria em dobro.
+                onClick={(event) => {
+                  event.stopPropagation();
+                  inputRef.current?.click();
+                }}
+                className="font-medium text-primary underline-offset-2 hover:underline disabled:opacity-60"
+              >
+                {t("image.choose")}
+              </button>
+            </p>
+            {info && (
+              <p className="text-[11px] text-muted-foreground/80">
+                {t("image.hint", {
+                  format: info.format.toUpperCase(),
+                  width: info.width,
+                })}
+              </p>
+            )}
+          </div>
+        )}
+
+        {/* O estado aparece onde a imagem vai ficar, e não num modal. */}
+        {sending && (
+          <div className="absolute inset-0 flex flex-col items-center justify-center gap-2 bg-background/70">
+            <Spinner className="h-5 w-5" />
+            <span className="text-xs text-muted-foreground">{t("image.sending")}</span>
+          </div>
+        )}
+
+        {value && !sending && (
+          <div className="absolute right-2 top-2 flex gap-1">
+            <Button
+              type="button"
+              size="icon"
+              variant="outline"
+              aria-label={t("image.replace")}
+              disabled={bloqueado}
+              onClick={(event) => {
+                event.stopPropagation();
+                inputRef.current?.click();
+              }}
+            >
+              <Upload className="h-4 w-4" />
+            </Button>
+            <Button
+              type="button"
+              size="icon"
+              variant="outline"
+              aria-label={t("image.remove")}
+              disabled={bloqueado}
+              // Sem segurar o clique aqui, remover a foto abriria o seletor
+              // logo depois — o pior efeito colateral possível para este botão.
+              onClick={(event) => {
+                event.stopPropagation();
+                void remover();
+              }}
+            >
+              <Trash2 className="h-4 w-4" />
+            </Button>
+          </div>
+        )}
+
+        <input
+          ref={inputRef}
+          type="file"
+          className="hidden"
+          // O `accept` vem do perfil: o que o servidor recusa não deveria nem
+          // aparecer no seletor.
+          accept={info?.accept.join(",")}
+          onChange={(event: ChangeEvent<HTMLInputElement>) => {
+            void receber(event.target.files?.[0]);
+            // Zerar o valor permite escolher o mesmo arquivo de novo depois de
+            // remover — sem isto, o `change` não dispara na segunda vez.
+            event.target.value = "";
+          }}
+        />
+      </div>
+
+      {!hideUrlField && (
+        <div className="flex items-center gap-2">
+          <Input
+            value={url}
+            disabled={bloqueado}
+            placeholder={t("image.urlLabel")}
+            onChange={(event) => setUrl(event.target.value)}
+            onKeyDown={(event) => {
+              if (event.key === "Enter") {
+                // Dentro de um formulário, Enter aqui submeteria o cadastro
+                // inteiro em vez de buscar a imagem.
+                event.preventDefault();
+                void buscarEndereco();
+              }
+            }}
+          />
+          <Button
+            type="button"
+            variant="outline"
+            size="sm"
+            className="shrink-0"
+            disabled={bloqueado || url.trim() === ""}
+            onClick={() => void buscarEndereco()}
+          >
+            <Link2 className="mr-1 h-3.5 w-3.5" />
+            {t("image.urlAction")}
+          </Button>
+        </div>
+      )}
+
+      {mensagem && <p className="text-xs text-destructive">{mensagem}</p>}
+    </div>
+  );
+}

package/src/components/ui/index.ts

@@ -20,6 +20,7 @@ export * from "./filter-field";
 export * from "./filter-group";
 export * from "./filter-rule";
 export * from "./filter-sheet";
+export * from "./image-upload";
 export * from "./input";
 export * from "./job-progress";
 export * from "./label";
@@ -34,5 +35,6 @@ export * from "./simple-select";
 export * from "./sonner";
 export * from "./spinner";
 export * from "./switch";
+export * from "./tab-shortcuts";
 export * from "./table";
 export * from "./tabs";

package/src/components/ui/tab-shortcuts.tsx

@@ -0,0 +1,77 @@
+"use client";
+
+import type { JSX } from "react";
+
+import { MAX_TAB_SHORTCUTS, useShortcut } from "#core/hooks/use-shortcut";
+
+export interface TabShortcutsProps {
+  /** Os valores das abas, na ordem em que aparecem. */
+  values: readonly string[];
+  onSelect: (value: string) => void;
+}
+
+/**
+ * O rótulo do atalho de uma aba, para a dica que a própria aba mostra.
+ *
+ * `⌥` no Mac e `Alt` no resto: é a mesma tecla física, mas ninguém procura
+ * "Alt" num teclado da Apple. Fora do navegador (SSR) responde `Alt`, que é o
+ * que o primeiro render precisa escrever — a correção vem no cliente.
+ */
+export const tabShortcutLabel = (index: number): string => {
+  const mac =
+    typeof navigator !== "undefined" && /Mac|iPhone|iPad/.test(navigator.platform);
+
+  return `${mac ? "⌥" : "Alt"} ${index + 1}`;
+};
+
+/**
+ * Um atalho, uma instância.
+ *
+ * O `useShortcut` aceita uma lista de teclas mas chama o handler sem dizer
+ * **qual** disparou. Com um componente por aba, cada instância fica com a sua
+ * tecla e a sua ação, e nenhum hook roda dentro de laço — que é o que a regra
+ * dos hooks proíbe.
+ */
+const TabShortcut = ({
+  digit,
+  value,
+  onSelect,
+}: {
+  digit: number;
+  value: string;
+  onSelect: (value: string) => void;
+}): null => {
+  /*
+    Por `code`, e não por `key`: no macOS o `Option` + número não produz o
+    número — `⌥1` chega como `¡` e `⌥2` como `™`. Declarado como "1", o atalho
+    funcionava no Windows e falhava no Mac, que é o pior desfecho possível.
+  */
+  useShortcut(`Digit${digit}`, () => onSelect(value), { alt: true, byCode: true });
+
+  return null;
+};
+
+/**
+ * `Alt` + `1..9` troca de aba. Não desenha nada.
+ *
+ * Com `Alt`, e não a tecla sozinha: os números precisam continuar sendo
+ * digitáveis, e o `1` sem modificador já é o atalho de abrir cadastro — dois
+ * donos para a mesma tecla é o conflito que só aparece na tela onde os dois
+ * existem.
+ *
+ * A ordem das abas é a fonte da numeração: passe a mesma lista que desenha os
+ * gatilhos, e não uma cópia. Duas fontes para a mesma ordem é o jeito garantido
+ * de `Alt + 3` abrir a aba errada no dia em que alguém reordenar a barra.
+ */
+export const TabShortcuts = ({ values, onSelect }: TabShortcutsProps): JSX.Element => (
+  <>
+    {values.slice(0, MAX_TAB_SHORTCUTS).map((value, index) => (
+      <TabShortcut
+        key={value}
+        digit={index + 1}
+        value={value}
+        onSelect={onSelect}
+      />
+    ))}
+  </>
+);

package/src/components/user-avatar.tsx

@@ -3,25 +3,19 @@
 import type { JSX } from "react";
 
 import { getInitials } from "#core/_utils/initials";
+import { uploadUrlOf } from "#core/_utils/upload-url";
 import { Avatar, AvatarFallback, AvatarImage } from "#core/components/ui";
 import { cn } from "#core/lib/utils";
 
 /**
- * A API guarda o avatar como caminho (`/uploads/avatars/<id>.webp`), servido
- * pela origem da API — que não é a da interface. Daí a necessidade de compor a
- * URL absoluta aqui, em um lugar só.
+ * Monta a URL absoluta do avatar.
+ *
+ * Segue exportado com este nome porque é assim que as telas o chamam, mas a
+ * composição mora em `uploadUrlOf`: avatar é só um caminho de upload entre
+ * outros, e duas cópias da mesma regra divergiriam no primeiro ajuste.
  */
-const API_ORIGIN = (process.env.NEXT_PUBLIC_API_BASE_URL ?? "").replace(
-  /\/api\/v1\/?$/,
-  "",
-);
-
-/** Monta a URL absoluta do avatar; caminho vazio devolve `undefined`. */
 export function avatarUrlOf(path?: string | null): string | undefined {
-  if (!path) {
-    return undefined;
-  }
-  return path.startsWith("http") ? path : `${API_ORIGIN}${path}`;
+  return uploadUrlOf(path);
 }
 
 export interface UserAvatarProps {

package/src/contexts/index.ts

@@ -3,5 +3,7 @@ export * from "./auth-context";
 export * from "./brand-context";
 export * from "./color-mode-context";
 export * from "./i18n-context";
+export * from "./jobs-context";
+export * from "./jobs-store";
 export * from "./socket-context";
 export * from "./toast-context";