rl-core-front 0.15.6 → 0.16.0

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";

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";

package/src/contexts/jobs-context.tsx

@@ -0,0 +1,146 @@
+"use client";
+
+import type { JSX, ReactNode } from "react";
+import {
+  createContext,
+  useContext,
+  useEffect,
+  useMemo,
+  useState,
+  useSyncExternalStore,
+} from "react";
+
+import { api } from "#core/_services/api/axios.factory";
+import { JobDock } from "#core/components/job-dock";
+import {
+  JobCompletedData,
+  JobFailedData,
+  JobHandle,
+  JobProgressData,
+  JobsStore,
+  TrackedJob,
+} from "#core/contexts/jobs-store";
+import { useSocket } from "#core/contexts/socket-context";
+
+/** Eventos que a fila do backend empurra (ver `queue.constants.ts` do core). */
+const JOB_PROGRESS_EVENT = "job:progress";
+const JOB_COMPLETED_EVENT = "job:completed";
+const JOB_FAILED_EVENT = "job:failed";
+
+/** `GET /jobs/:id` — a mesma informação, para quem perdeu os eventos. */
+interface JobStatusResponse<TSummary> {
+  id: string;
+  state: "waiting" | "active" | "completed" | "failed" | "delayed" | "unknown";
+  progress: { percent: number; message?: string } | null;
+  summary: TSummary | null;
+  error: { code: string | null; message: string } | null;
+}
+
+export interface JobsContextType {
+  jobs: TrackedJob[];
+  start: <TSummary>(label: string) => JobHandle<TSummary>;
+  dismiss: (localId: string) => void;
+}
+
+const JobsContext = createContext<JobsContextType | undefined>(undefined);
+
+/**
+ * Os trabalhos em segundo plano que esta aba está acompanhando.
+ *
+ * Vive **no provider**, e não na tela — é isso que mantém o acompanhamento
+ * quando a pessoa navega para outra rota no meio de um upload. O painel
+ * (`JobDock`) é renderizado aqui pelo mesmo motivo.
+ *
+ * A regra mora na `JobsStore`, fora do React; aqui ficam só as três ligações
+ * com o mundo: os eventos do socket, a reconciliação por HTTP quando a conexão
+ * volta, e a leitura do estado pela tela.
+ */
+export function JobsProvider({ children }: { children: ReactNode }): JSX.Element {
+  const { on, status, reconnectCount } = useSocket();
+  // Instância estável pelo inicializador do `useState`, e não por um ref: ler
+  // `ref.current` durante o render é justamente o que as regras do React 19
+  // proíbem — e aqui a store precisa existir já no primeiro render, porque o
+  // `useSyncExternalStore` a assina.
+  const [store] = useState(() => new JobsStore());
+
+  const jobs = useSyncExternalStore(
+    store.subscribe,
+    store.getSnapshot,
+    // O servidor renderiza sem job nenhum: a lista só existe nesta aba.
+    store.getSnapshot,
+  );
+
+  useEffect(() => {
+    store.setOffline(status !== "connected");
+  }, [status, store]);
+
+  useEffect(() => {
+    const offProgress = on<JobProgressData>(JOB_PROGRESS_EVENT, store.onProgress);
+    const offCompleted = on<JobCompletedData>(
+      JOB_COMPLETED_EVENT,
+      store.onCompleted,
+    );
+    const offFailed = on<JobFailedData>(JOB_FAILED_EVENT, store.onFailed);
+
+    return () => {
+      offProgress();
+      offCompleted();
+      offFailed();
+    };
+  }, [on, store]);
+
+  /**
+   * Reconciliação a cada reconexão.
+   *
+   * O que passou enquanto o socket esteve fora não volta sozinho — e é
+   * justamente aí que está o job que terminou sem ninguém ver.
+   */
+  useEffect(() => {
+    if (reconnectCount === 0) {
+      return;
+    }
+
+    for (const jobId of store.pendingJobIds()) {
+      void api
+        .get<JobStatusResponse<unknown>>(`/jobs/${jobId}`)
+        .then(({ data }) =>
+          store.reconcile(
+            jobId,
+            data.state,
+            data.progress?.percent ?? null,
+            data.progress?.message ?? null,
+            data.summary,
+            data.error?.message ?? null,
+          ),
+        )
+        .catch(() => {
+          // Job expirado ou fora de alcance: o socket ainda pode trazer o fim,
+          // e derrubar a sessão por causa da consulta de apoio seria pior.
+        });
+    }
+  }, [reconnectCount, store]);
+
+  useEffect(() => () => store.destroy(), [store]);
+
+  const value = useMemo<JobsContextType>(
+    () => ({ jobs, start: store.start, dismiss: store.dismiss }),
+    [jobs, store],
+  );
+
+  return (
+    <JobsContext.Provider value={value}>
+      {children}
+      <JobDock />
+    </JobsContext.Provider>
+  );
+}
+
+export function useJobs(): JobsContextType {
+  const context = useContext(JobsContext);
+
+  if (!context) {
+    throw new Error("useJobs precisa estar dentro de <JobsProvider>");
+  }
+
+  return context;
+}