@creezio/shell-ui 0.22.0

package/ui/pwa/client-error-reporter.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ * Remonte les exceptions client (erreurs non catchées + promesses rejetées)
+ * vers /api/client-log — indispensable pour diagnostiquer les crashs mobiles
+ * (« Application error: a client-side exception has occurred ») où la
+ * console navigateur n'est pas accessible.
+ */
+export function report(kind: string, message: string, stack?: string, digest?: string) {
+  try {
+    const body = JSON.stringify({
+      kind,
+      message,
+      stack,
+      digest,
+      url: typeof location !== "undefined" ? location.href : undefined,
+    });
+    if (typeof navigator !== "undefined" && navigator.sendBeacon) {
+      navigator.sendBeacon("/api/client-log", new Blob([body], { type: "application/json" }));
+    } else {
+      void fetch("/api/client-log", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body,
+        keepalive: true,
+      }).catch(() => {});
+    }
+  } catch {
+    /* le reporter ne doit jamais casser l'app */
+  }
+}
+
+export function ClientErrorReporter() {
+  useEffect(() => {
+    const onError = (e: ErrorEvent) => {
+      const stack =
+        e.error && typeof e.error.stack === "string" ? e.error.stack : undefined;
+      report(
+        "window.onerror",
+        `${e.message} @ ${e.filename || "?"}:${e.lineno || 0}:${e.colno || 0}`,
+        stack,
+      );
+    };
+    const onRejection = (e: PromiseRejectionEvent) => {
+      const reason = e.reason;
+      const message =
+        reason instanceof Error ? reason.message : String(reason ?? "(vide)");
+      const stack = reason instanceof Error ? reason.stack : undefined;
+      report("unhandledrejection", message, stack);
+    };
+    window.addEventListener("error", onError);
+    window.addEventListener("unhandledrejection", onRejection);
+    return () => {
+      window.removeEventListener("error", onError);
+      window.removeEventListener("unhandledrejection", onRejection);
+    };
+  }, []);
+
+  return null;
+}

package/ui/pwa/register-sw.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { useEffect } from "react";
+
+/**
+ * Enregistrement client du SW custom (`public/sw.js`).
+ * Pas de next-pwa : compatible Next 14 App Router + standalone Docker.
+ * Au boot : purge les vieux caches HTML (tf2-shell-v1) qui causaient
+ * des « Application error » après redeploy.
+ */
+export function RegisterServiceWorker() {
+  useEffect(() => {
+    if (typeof window === "undefined") return;
+    if (!("serviceWorker" in navigator)) return;
+    // Dev local : ne pas polluer le HMR
+    if (process.env.NODE_ENV !== "production") return;
+
+    let cancelled = false;
+
+    (async () => {
+      try {
+        const keys = await caches.keys();
+        await Promise.all(
+          keys
+            .filter((k) => k.startsWith("tf2-shell-") && k !== "tf2-shell-v2")
+            .map((k) => caches.delete(k)),
+        );
+      } catch {
+        /* ignore */
+      }
+      if (cancelled) return;
+
+      navigator.serviceWorker
+        .register("/sw.js", { scope: "/" })
+        .then((reg) => {
+          if (cancelled) return;
+          reg.update().catch(() => {});
+        })
+        .catch(() => {
+          /* silencieux : PWA optionnelle */
+        });
+    })();
+
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+
+  return null;
+}

package/ui/range-filters.tsx

@@ -0,0 +1,174 @@
+"use client";
+
+import { FormEvent, useEffect, useState, useTransition } from "react";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { Button } from "./primitives/button";
+import { Input } from "./primitives/input";
+
+/**
+ * Filtres comparateur prix (min/max) + plage de dates (dateFrom/dateTo).
+ * Application explicite via bouton (pas de debounce) pour éviter les allers-retours.
+ */
+export function RangeFilters({
+  priceMinKey = "priceMin",
+  priceMaxKey = "priceMax",
+  dateFromKey = "dateFrom",
+  dateToKey = "dateTo",
+  amountLabel = "Prix",
+  dateFromLabel = "Création du",
+  dateHint = "Filtre sur la date de création",
+  showAmount = true,
+  clearLabel = "Effacer montant/dates",
+}: {
+  priceMinKey?: string;
+  priceMaxKey?: string;
+  dateFromKey?: string;
+  dateToKey?: string;
+  /** Libellé commun aux deux bornes (Prix, Montant…). */
+  amountLabel?: string;
+  dateFromLabel?: string;
+  dateHint?: string;
+  /** Masque les bornes montant lorsque la page ne filtre que les dates. */
+  showAmount?: boolean;
+  clearLabel?: string;
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const params = useSearchParams();
+  const [, startTransition] = useTransition();
+
+  const [priceMin, setPriceMin] = useState(params.get(priceMinKey) || "");
+  const [priceMax, setPriceMax] = useState(params.get(priceMaxKey) || "");
+  const [dateFrom, setDateFrom] = useState(params.get(dateFromKey) || "");
+  const [dateTo, setDateTo] = useState(params.get(dateToKey) || "");
+
+  useEffect(() => {
+    setPriceMin(params.get(priceMinKey) || "");
+    setPriceMax(params.get(priceMaxKey) || "");
+    setDateFrom(params.get(dateFromKey) || "");
+    setDateTo(params.get(dateToKey) || "");
+  }, [params, priceMinKey, priceMaxKey, dateFromKey, dateToKey]);
+
+  function apply(e?: FormEvent) {
+    e?.preventDefault();
+    const next = new URLSearchParams(params.toString());
+    const setOrDel = (key: string, value: string) => {
+      const v = value.trim();
+      if (v) next.set(key, v);
+      else next.delete(key);
+    };
+    setOrDel(priceMinKey, priceMin);
+    setOrDel(priceMaxKey, priceMax);
+    setOrDel(dateFromKey, dateFrom);
+    setOrDel(dateToKey, dateTo);
+    next.delete("page");
+    next.delete("preset");
+    // Plage custom prioritaire : on retire le raccourci période
+    if (dateFrom.trim() || dateTo.trim()) next.delete("period");
+    const qs = next.toString();
+    const href = qs ? `${pathname}?${qs}` : pathname;
+    startTransition(() => {
+      router.push(href);
+      router.refresh();
+    });
+  }
+
+  function clearRanges() {
+    setPriceMin("");
+    setPriceMax("");
+    setDateFrom("");
+    setDateTo("");
+    const next = new URLSearchParams(params.toString());
+    [priceMinKey, priceMaxKey, dateFromKey, dateToKey, "preset"].forEach((k) =>
+      next.delete(k),
+    );
+    next.delete("page");
+    const qs = next.toString();
+    const href = qs ? `${pathname}?${qs}` : pathname;
+    startTransition(() => {
+      router.push(href);
+      router.refresh();
+    });
+  }
+
+  const hasAny =
+    Boolean(params.get(priceMinKey)) ||
+    Boolean(params.get(priceMaxKey)) ||
+    Boolean(params.get(dateFromKey)) ||
+    Boolean(params.get(dateToKey));
+
+  return (
+    <form
+      onSubmit={apply}
+      className="flex flex-wrap items-end gap-3 rounded-xl border border-slate-200 bg-white p-3 shadow-sm"
+    >
+      {showAmount ? (
+        <>
+          <div className="space-y-1">
+            <label className="text-[11px] font-medium uppercase tracking-wide text-slate-500">
+              {amountLabel} min
+            </label>
+            <Input
+              type="number"
+              inputMode="decimal"
+              step="1"
+              placeholder="ex. 300"
+              value={priceMin}
+              onChange={(e) => setPriceMin(e.target.value)}
+              className="w-28"
+            />
+          </div>
+          <div className="space-y-1">
+            <label className="text-[11px] font-medium uppercase tracking-wide text-slate-500">
+              {amountLabel} max
+            </label>
+            <Input
+              type="number"
+              inputMode="decimal"
+              step="1"
+              placeholder="ex. 800"
+              value={priceMax}
+              onChange={(e) => setPriceMax(e.target.value)}
+              className="w-28"
+            />
+          </div>
+        </>
+      ) : null}
+      <div className="space-y-1">
+        <label className="text-[11px] font-medium uppercase tracking-wide text-slate-500">
+          {dateFromLabel}
+        </label>
+        <Input
+          type="date"
+          value={dateFrom}
+          onChange={(e) => setDateFrom(e.target.value)}
+          className="w-40"
+          title={dateHint}
+        />
+      </div>
+      <div className="space-y-1">
+        <label className="text-[11px] font-medium uppercase tracking-wide text-slate-500">
+          au
+        </label>
+        <Input
+          type="date"
+          value={dateTo}
+          onChange={(e) => setDateTo(e.target.value)}
+          className="w-40"
+          title={dateHint}
+        />
+      </div>
+      <div className="flex flex-wrap gap-2">
+        <Button type="submit" size="sm">
+          Appliquer
+        </Button>
+        {hasAny ? (
+          <Button type="button" size="sm" variant="secondary" onClick={clearRanges}>
+            {clearLabel}
+          </Button>
+        ) : null}
+      </div>
+      <p className="w-full text-[11px] text-slate-400">{dateHint}</p>
+    </form>
+  );
+}

package/ui/search/global-search-config.ts

@@ -0,0 +1,32 @@
+export type GlobalSearchHit = {
+  index: string;
+  id: string;
+  title: string;
+  subtitle?: string;
+  href: string;
+};
+
+export type GlobalSearchConfig = {
+  placeholder?: string;
+  indexLabels?: Record<string, string>;
+  storageKey?: string;
+  /** Fetch hits for query - brand app decides Meili/fallback strategy. */
+  search: (query: string, signal?: AbortSignal) => Promise<GlobalSearchHit[]>;
+  /** Prefer catalogue soft-ctx when navigating to this href. */
+  preferCatalogueHref?: (href: string) => boolean;
+  /** Optional analytics. */
+  onTrack?: (event: string, payload?: Record<string, unknown>) => void;
+};
+
+let cfg: GlobalSearchConfig | null = null;
+
+export function configureGlobalSearch(next: GlobalSearchConfig): void {
+  cfg = next;
+}
+
+export function getGlobalSearchConfig(): GlobalSearchConfig {
+  if (!cfg?.search) {
+    throw new Error("@creezio/shell-ui: configureGlobalSearch() requis");
+  }
+  return cfg;
+}