@nivaro/react 0.3.36 → 0.3.38

package/dist/shared/components/item-edit/FormTour.js

@@ -0,0 +1,279 @@
+import { jsxs as b, jsx as p, Fragment as B } from "react/jsx-runtime";
+import { useQueryClient as O, useQuery as T } from "@tanstack/react-query";
+import { Compass as W, X as D } from "lucide-react";
+import { useState as v, useEffect as k, useCallback as F, useId as j, useRef as z, useLayoutEffect as H, useMemo as R } from "react";
+import { createPortal as Q } from "react-dom";
+import { useNivaroClient as P } from "../../context.js";
+import { get as X, patch as G } from "../../lib/commands.js";
+import { cn as V } from "../../lib/utils.js";
+const I = 280, Y = 4;
+function J(e) {
+  return e.length <= 1 ? e[0] ?? "" : `${e.slice(0, -1).join(", ")} and ${e[e.length - 1]}`;
+}
+function ce(e, t) {
+  const i = /* @__PURE__ */ new Map();
+  for (const n of e) {
+    if (n.type !== "section" && n.type !== "tab" && n.type !== "metadata") continue;
+    const x = (t[n.key] ?? []).filter((r) => !r.hidden), c = x.map((r) => (r.label || r.field).trim()).filter(Boolean), u = x.filter((r) => r.required).length, g = n.content_tone === "divider" ? "" : (n.content ?? "").trim();
+    let f;
+    if (g) f = g.length > I ? `${g.slice(0, I - 1).trimEnd()}…` : g;
+    else if (n.type === "metadata") f = "Facts about the record itself: who made it and when.";
+    else if (c.length === 0) f = "Nothing to fill in here yet.";
+    else {
+      const r = c.slice(0, Y), w = c.length - r.length;
+      f = c.length === 1 ? `One field: ${r[0]}.` : `${c.length} fields: ${w > 0 ? `${r.join(", ")} and ${w} more` : J(r)}.`;
+    }
+    i.set(n.key, { key: n.key, title: n.label || "Section", body: f, required: u });
+  }
+  return i;
+}
+function U(e) {
+  if (!e) return [];
+  const t = [];
+  for (const i of e.querySelectorAll("[data-section-key], [data-read-section]")) {
+    if (i.hidden || i.closest("[hidden]") || i.classList.contains("hidden")) continue;
+    const n = i.getAttribute("data-section-key") ?? i.getAttribute("data-read-section");
+    n && !t.includes(n) && t.push(n);
+  }
+  return t;
+}
+function Z(e, t) {
+  if (!e) return null;
+  const i = typeof CSS < "u" && CSS.escape ? CSS.escape(t) : t.replace(/["\\]/g, "\\$&");
+  return e.querySelector(`[data-section-key="${i}"], [data-read-section="${i}"]`);
+}
+const K = (e, t) => `nvr:form-tour:${e}:${t}`;
+function _(e) {
+  try {
+    return localStorage.getItem(e) === "1";
+  } catch {
+    return !1;
+  }
+}
+const ee = () => {
+  try {
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch {
+    return !1;
+  }
+};
+function ue(e) {
+  const { layoutId: t, userId: i, enabled: n } = e, x = P(), c = O(), u = t != null ? K(i, t) : "", [g, f] = v(() => u ? _(u) : !1);
+  k(() => f(u ? _(u) : !1), [u]);
+  const { data: r, isSuccess: w } = T({
+    queryKey: ["form-tours-done", i],
+    queryFn: () => x.request(X("/auth/me")).then((l) => {
+      var y, m;
+      const N = (m = (y = l == null ? void 0 : l.data) == null ? void 0 : y.preferences) == null ? void 0 : m.form_tours_done;
+      return Array.isArray(N) ? N.filter((S) => Number.isInteger(S)) : [];
+    }),
+    enabled: n && t != null && !g,
+    staleTime: 5 * 6e4
+  }), a = g || t != null && !!(r != null && r.includes(t)), $ = F(() => {
+    if (t != null) {
+      f(!0);
+      try {
+        localStorage.setItem(K(i, t), "1");
+      } catch {
+      }
+      c.setQueryData(
+        ["form-tours-done", i],
+        (l) => l != null && l.includes(t) ? l : [...l ?? [], t]
+      ), x.request(G("/users/me/preferences", { form_tour_done: t })).catch(() => {
+      });
+    }
+  }, [x, c, t, i]);
+  return { seen: a, known: g || w, markSeen: $ };
+}
+function fe({ onClick: e }) {
+  return /* @__PURE__ */ b(
+    "button",
+    {
+      type: "button",
+      "data-form-tour-button": "",
+      "data-tip": "A short walk through this form",
+      onClick: e,
+      className: "inline-flex h-6 items-center gap-1 rounded px-2 text-[11.5px] font-medium text-slate-500 transition-colors hover:bg-muted hover:text-slate-800 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-600 dark:text-muted-foreground dark:hover:text-foreground dark:focus-visible:ring-sky-300",
+      children: [
+        /* @__PURE__ */ p(W, { className: "h-3.5 w-3.5", "aria-hidden": "true" }),
+        "Tour"
+      ]
+    }
+  );
+}
+const te = 320, M = 10;
+function me({
+  rootRef: e,
+  steps: t,
+  formName: i,
+  onClose: n
+}) {
+  const x = j(), c = z(null), [u, g] = v(null);
+  k(() => {
+    g(U(e.current).filter((o) => t.has(o)));
+  }, []);
+  const f = u ?? [], [r, w] = v(0), [a, $] = v(null), [l, N] = v(
+    () => typeof window < "u" && window.innerWidth < 640
+  ), y = f[r], m = y ? t.get(y) : void 0;
+  k(() => {
+    u && u.length === 0 && n(!1);
+  }, [u, n]), H(() => {
+    if (!y) return;
+    const o = Z(e.current, y);
+    if (!o) return;
+    const s = o.getBoundingClientRect().height > window.innerHeight * 0.6;
+    o.scrollIntoView({
+      block: s ? "start" : "center",
+      behavior: ee() ? "auto" : "smooth"
+    });
+    let d = 0;
+    const h = () => {
+      cancelAnimationFrame(d), d = requestAnimationFrame(() => {
+        const A = o.getBoundingClientRect();
+        $({ top: A.top, left: A.left, width: A.width, height: A.height }), N(window.innerWidth < 640);
+      });
+    };
+    return h(), window.addEventListener("scroll", h, !0), window.addEventListener("resize", h), () => {
+      cancelAnimationFrame(d), window.removeEventListener("scroll", h, !0), window.removeEventListener("resize", h);
+    };
+  }, [y, e]);
+  const S = !!m;
+  k(() => {
+    var s;
+    if (!S) return;
+    const o = document.activeElement;
+    return (s = c.current) == null || s.focus({ preventScroll: !0 }), () => {
+      var d;
+      return (d = o == null ? void 0 : o.focus) == null ? void 0 : d.call(o, { preventScroll: !0 });
+    };
+  }, [S]);
+  const q = r >= f.length - 1, E = F(() => {
+    q ? n(!0) : w((o) => o + 1);
+  }, [q, n]), L = F(() => w((o) => Math.max(0, o - 1)), []);
+  k(() => {
+    const o = (s) => {
+      var h;
+      const d = document.activeElement;
+      d && d !== document.body && !((h = c.current) != null && h.contains(d)) || (s.key === "Escape" ? (s.preventDefault(), n(!1)) : s.key === "ArrowRight" && !s.altKey && !s.metaKey && !s.ctrlKey ? E() : s.key === "ArrowLeft" && !s.altKey && !s.metaKey && !s.ctrlKey && L());
+    };
+    return window.addEventListener("keydown", o), () => window.removeEventListener("keydown", o);
+  }, [E, L, n]);
+  const C = R(() => {
+    if (!a || l || typeof window > "u") return null;
+    const o = window.innerWidth, s = window.innerHeight, d = Math.min(Math.max(12, a.left + 16), o - te - 12), h = a.top + Math.min(a.height, 52) + M;
+    return h + 200 < s ? { top: Math.max(12, h), left: d } : a.top - M - 200 > 0 ? { bottom: s - a.top + M, left: d } : { top: 12, left: d };
+  }, [a, l]);
+  return !m || typeof document > "u" ? null : Q(
+    /* @__PURE__ */ b(B, { children: [
+      a && /* @__PURE__ */ p(
+        "div",
+        {
+          "aria-hidden": "true",
+          "data-form-tour-ring": "",
+          className: "pointer-events-none fixed z-[70] rounded-xl ring-2 ring-nvr-cyan ring-offset-2 ring-offset-white transition-[top,left,width,height] duration-200 motion-reduce:transition-none dark:ring-offset-background",
+          style: {
+            top: a.top,
+            left: a.left,
+            width: a.width,
+            height: Math.min(a.height, window.innerHeight - Math.max(0, a.top) + 8)
+          }
+        }
+      ),
+      /* @__PURE__ */ b(
+        "div",
+        {
+          ref: c,
+          role: "dialog",
+          "aria-modal": "false",
+          "aria-labelledby": x,
+          tabIndex: -1,
+          "data-form-tour": "",
+          "data-form-tour-step": m.key,
+          className: V(
+            "fixed z-[71] rounded-xl border border-slate-200 bg-white p-4 shadow-lg outline-none dark:border-border dark:bg-card",
+            l ? "inset-x-3 bottom-3" : "w-[320px]"
+          ),
+          style: l || !C ? void 0 : C,
+          children: [
+            /* @__PURE__ */ b("div", { className: "flex items-start gap-2", children: [
+              /* @__PURE__ */ b("div", { className: "min-w-0 flex-1", children: [
+                /* @__PURE__ */ b("p", { className: "text-[11px] font-medium text-slate-500 dark:text-muted-foreground", children: [
+                  r === 0 && i ? `${i} · ` : "",
+                  r + 1,
+                  " of ",
+                  f.length
+                ] }),
+                /* @__PURE__ */ p(
+                  "h2",
+                  {
+                    id: x,
+                    className: "mt-0.5 text-[14px] font-semibold text-slate-900 dark:text-foreground",
+                    children: m.title
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ p(
+                "button",
+                {
+                  type: "button",
+                  "aria-label": "Close the tour",
+                  "data-form-tour-close": "",
+                  onClick: () => n(!1),
+                  className: "-mr-1 -mt-1 rounded p-1 text-slate-400 transition-colors hover:bg-muted hover:text-slate-700 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-600 dark:hover:text-foreground dark:focus-visible:ring-sky-300",
+                  children: /* @__PURE__ */ p(D, { className: "h-4 w-4" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ p("p", { className: "mt-2 whitespace-pre-wrap text-[12.5px] leading-relaxed text-slate-600 dark:text-muted-foreground", children: m.body }),
+            m.required > 0 && /* @__PURE__ */ b("p", { className: "mt-1.5 text-[12px] text-slate-500 dark:text-muted-foreground", children: [
+              m.required === 1 ? "One field here is" : `${m.required} fields here are`,
+              " ",
+              "required ",
+              /* @__PURE__ */ p("span", { className: "text-destructive", children: "*" })
+            ] }),
+            /* @__PURE__ */ b("div", { className: "mt-3 flex items-center gap-2", children: [
+              r === 0 ? /* @__PURE__ */ p(
+                "button",
+                {
+                  type: "button",
+                  "data-form-tour-skip": "",
+                  onClick: () => n(!1),
+                  className: "h-8 rounded-md px-2.5 text-[12.5px] font-medium text-slate-500 transition-colors hover:bg-muted hover:text-slate-800 dark:text-muted-foreground dark:hover:text-foreground",
+                  children: "Skip tour"
+                }
+              ) : /* @__PURE__ */ p(
+                "button",
+                {
+                  type: "button",
+                  "data-form-tour-back": "",
+                  onClick: L,
+                  className: "h-8 rounded-md px-2.5 text-[12.5px] font-medium text-slate-600 transition-colors hover:bg-muted hover:text-slate-900 dark:text-muted-foreground dark:hover:text-foreground",
+                  children: "Back"
+                }
+              ),
+              /* @__PURE__ */ p("span", { className: "flex-1" }),
+              /* @__PURE__ */ p(
+                "button",
+                {
+                  type: "button",
+                  "data-form-tour-next": "",
+                  onClick: E,
+                  className: "h-8 rounded-md bg-nvr-cyan px-3 text-[12.5px] font-medium text-white transition-opacity hover:opacity-90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-sky-600 focus-visible:ring-offset-2 dark:focus-visible:ring-sky-300 dark:focus-visible:ring-offset-card",
+                  children: q ? "Done" : "Next"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    ] }),
+    document.body
+  );
+}
+export {
+  me as FormTour,
+  fe as FormTourButton,
+  ce as buildTourSteps,
+  U as sectionKeysOnScreen,
+  ue as useFormTourSeen
+};