@chaibuilder/pages 0.15.3 → 0.15.6

package/dist/page-manager-new-DkqNLZ5C.js

@@ -0,0 +1,354 @@
+import { jsxs as y, jsx as t, Fragment as O } from "react/jsx-runtime";
+import { at as be, f as ie, ai as ye, T as _, aC as ge, L as ke, h as Ne, b as we, i as ve, ao as Se, aD as Ae, aE as q } from "./index-Bk8tPO5R.js";
+import { u as K } from "./use-page-expand-manager-D6T75I11.js";
+import { compact as ce, filter as F, isEmpty as S, uniqBy as Le, keyBy as de, mapValues as Te, startCase as Ce, toLower as T, includes as R, find as z, get as Q, map as Ee } from "lodash-es";
+import { useTranslation as Ue, useLanguages as ae } from "@chaibuilder/sdk";
+import { useAtom as $e } from "jotai";
+import { NotepadText as Me, MoreHorizontal as ze, Lock as Fe, Edit as je, Plus as Be, ChevronRight as Ie, StarsIcon as Ge, Hash as De, File as ue } from "lucide-react";
+import { useMemo as V, lazy as C, useState as N, useCallback as le, useEffect as M, Suspense as L } from "react";
+const oe = (e, n) => !e || !Array.isArray(e) ? [] : S(n) ? e : ce(
+  F(e, (r) => {
+    const s = T(n);
+    return R(T((r == null ? void 0 : r.name) || ""), s) || R(T((r == null ? void 0 : r.slug) || ""), s);
+  })
+), Oe = (e, n) => {
+  const r = /* @__PURE__ */ new Set(), s = de(e, "id");
+  return n.forEach((o) => {
+    let l = o;
+    for (; l.parent && s[l.parent]; )
+      r.add(l.parent), l = s[l.parent];
+  }), Array.from(r).map((o) => s[o]);
+}, J = (e, n, r) => S(n) ? e : e.map((s) => {
+  if (!r(s.pageType))
+    return {
+      ...s,
+      shouldExpandOnSearch: !0,
+      children: s.children ? J(s.children, n, r) : []
+    };
+  const o = s.children && s.children.some(
+    (l) => R(T(l.name || ""), T(n)) || R(T(l.slug || ""), T(n))
+  );
+  return {
+    ...s,
+    shouldExpandOnSearch: o,
+    children: s.children ? J(s.children, n, r) : []
+  };
+}), Re = (e) => {
+  if (!e || !e.length) return [];
+  const n = {};
+  e.forEach((s) => {
+    n[s.id] = { ...s, children: [] };
+  });
+  const r = [];
+  return Object.values(n).forEach((s) => {
+    s.parent && n[s.parent] ? n[s.parent].children.push(s) : r.push(s);
+  }), r;
+}, me = (e) => !e || !e.length ? [] : [...e].sort(
+  (r, s) => (r.name || "").localeCompare(s.name || "")
+).map((r) => ({
+  ...r,
+  children: r.children ? me(r.children) : []
+})), We = (e, n, r, s) => {
+  if (!e || !e.length) return [];
+  let o = e;
+  if (r !== "all" && (o = ce(F(e, { pageType: r }))), S(n))
+    o = oe(o, n);
+  else {
+    const u = oe(o, n), i = Oe(e, u);
+    o = Le([...u, ...i], "id");
+  }
+  const l = me(Re(o)), f = J(l, n, s), g = F(f, (u) => s(u.pageType)).sort((u, i) => (u.name || "").localeCompare(i.name || "")), P = F(f, (u) => !s(u.pageType));
+  let m = [];
+  if (r === "all") {
+    const u = de(P, "pageType");
+    m = Object.values(
+      Te(u, (i, x) => ({
+        ...i,
+        id: x,
+        name: Ce(x),
+        isPartialGroup: !0,
+        children: f.filter((p) => p.pageType === x)
+      }))
+    );
+  } else
+    m = P.sort((u, i) => (u.name || "").localeCompare(i.name || ""));
+  return [...g, ...m];
+}, He = ({ page: e }) => {
+  var s, o;
+  const { isExpanded: n, toggleExpanded: r } = K(e == null ? void 0 : e.id);
+  return /* @__PURE__ */ t(
+    "button",
+    {
+      onClick: (l) => {
+        l.stopPropagation(), r();
+      },
+      disabled: !((s = e == null ? void 0 : e.children) != null && s.length),
+      className: `flex h-[calc(100%-2px)] w-5 items-center justify-center rounded text-gray-400 transition-colors hover:bg-gray-200 hover:px-1 hover:text-gray-500 ${(o = e == null ? void 0 : e.children) != null && o.length ? "hover:text-blue-400" : "opacity-0"}`,
+      children: /* @__PURE__ */ t(
+        Ie,
+        {
+          size: 12,
+          className: `stroke-[4] transition-transform duration-200 ${n ? "rotate-90" : ""}`
+        }
+      )
+    }
+  );
+}, _e = ({ page: e, pageType: n }) => /* @__PURE__ */ t("div", { className: "flex h-full items-center justify-center gap-x-1", children: e.dynamic ? /* @__PURE__ */ t(Ge, { size: 12, className: "text-yellow-400" }) : n != null && n.icon ? /* @__PURE__ */ t(
+  "div",
+  {
+    className: "flex h-4 max-h-4 w-4 max-w-4 items-center justify-center stroke-[1] text-slate-500",
+    dangerouslySetInnerHTML: { __html: n.icon }
+  }
+) : n != null && n.hasSlug ? /* @__PURE__ */ t(ue, { size: 12, className: "stroke-[1] text-slate-500" }) : /* @__PURE__ */ t(De, { size: 12, className: "stroke-[1] text-slate-500" }) }), qe = ({ isOnline: e }) => /* @__PURE__ */ t("div", { className: `h-2 w-2 rounded-full ${e ? "bg-green-300" : "bg-gray-300"}` }), Qe = ({
+  page: e,
+  pageTypes: n,
+  currentPage: r,
+  onClickAction: s,
+  languagePages: o,
+  selectedLanguage: l,
+  showUntranslatedPages: f
+}) => {
+  const [g] = be(), P = ie(), m = r === e.id, u = !!e.isTemplate, i = V(() => z(n, { key: e.pageType }), [n, e.pageType]), x = g == null ? void 0 : g[e.id], { data: p } = ye(x), w = p ? p == null ? void 0 : p.name : null;
+  let d = Q(o, e == null ? void 0 : e.id);
+  d = Q(d, "lang") === l ? d : null;
+  const A = l === P || !!d, E = (d == null ? void 0 : d.name) || (e == null ? void 0 : e.name) || "No name";
+  let b = (d == null ? void 0 : d.slug) || (e == null ? void 0 : e.slug) || "";
+  const j = b + (e != null && e.dynamic ? `/${i == null ? void 0 : i.dynamicSlug}` : "") + (e != null && e.dynamicSlugCustom ? `${e.dynamicSlugCustom}` : "");
+  if (b.startsWith("/") && !f) {
+    const c = b.split("/").pop();
+    b = b.endsWith(c) && e.dynamic ? "" : `/${c}`;
+  }
+  const B = V(() => {
+    const c = "flex h-7 min-w-0 flex-1 cursor-pointer select-none items-center gap-x-1.5 rounded px-px text-xs duration-300 border-[1px]", I = `${m ? "border-primary/30 bg-primary/5" : "border-transparent hover:border-gray-200 hover:bg-gray-100"}`;
+    return A ? `${c} ${I} ${w ? "opacity-60" : ""}` : `${c} bg-gray-100 opacity-50 group-hover:border-gray-200 border-transparent group-hover:bg-blue-100`;
+  }, [A, m, w]);
+  return /* @__PURE__ */ y("div", { className: "group relative", children: [
+    /* @__PURE__ */ y(
+      "div",
+      {
+        onClick: () => !e.isPartialGroup && A && s("select", e == null ? void 0 : e.id),
+        className: B,
+        children: [
+          /* @__PURE__ */ t(He, { page: e }),
+          !e.isPartialGroup && /* @__PURE__ */ t(qe, { isOnline: d ? d.online : e.online }),
+          !e.isPartialGroup && /* @__PURE__ */ t(_e, { page: e, pageType: i }),
+          /* @__PURE__ */ t(_, { content: E, side: "top", showTooltip: E.length > 35, children: /* @__PURE__ */ t("span", { className: "max-w-[40%] truncate font-medium text-black", children: E }) }),
+          (b || e.dynamic) && /* @__PURE__ */ t(_, { content: j, side: "top", showTooltip: !0, children: /* @__PURE__ */ y("span", { className: "max-w-[40%] truncate font-mono text-xs text-muted-foreground", children: [
+            b,
+            e.dynamic && (i == null ? void 0 : i.dynamicSlug) && /* @__PURE__ */ y("span", { className: "text-xs text-gray-500", children: [
+              "/",
+              i == null ? void 0 : i.dynamicSlug,
+              e.dynamicSlugCustom
+            ] })
+          ] }) }),
+          u && /* @__PURE__ */ t(_, { content: "Template", side: "top", children: /* @__PURE__ */ t("span", { className: "text-blue-500", children: /* @__PURE__ */ t(Me, { size: 16 }) }) }),
+          !e.isPartialGroup && A && !w ? /* @__PURE__ */ t("div", { className: "duration absolute right-0.5 top-[3px]", children: /* @__PURE__ */ t(
+            ge,
+            {
+              isLanguagePage: !!d,
+              page: d || e,
+              setDuplicatePage: (c) => s("duplicate", c),
+              setAddEditPage: (c) => s("edit", d || c),
+              setUnpublishPage: (c) => s("unpublish", c),
+              setDeletePage: (c) => s("delete", d || c),
+              setMarkAsTemplate: (c) => s("markAsTemplate", c),
+              setUnmarkAsTemplate: (c) => s("unmarkAsTemplate", c),
+              children: /* @__PURE__ */ t("div", { className: "m-0 cursor-pointer rounded border border-transparent p-0.5 duration-100 hover:border-gray-400 hover:bg-white", children: /* @__PURE__ */ t(ze, { className: "h-4 w-4", onClick: (c) => c.stopPropagation() }) })
+            }
+          ) }) : w ? /* @__PURE__ */ t("span", { className: "duration absolute right-1.5 top-1/2 -translate-y-1/2 text-xs text-gray-500", children: /* @__PURE__ */ t(Fe, { className: "h-3.5 w-3.5 fill-red-200 text-red-500" }) }) : null
+        ]
+      }
+    ),
+    /* @__PURE__ */ t(O, { children: w && /* @__PURE__ */ y("button", { className: "absolute right-0 top-0 flex h-full items-center gap-x-1 rounded bg-red-50 px-2 py-0.5 text-xs font-light text-red-500 opacity-0 group-hover:opacity-100", children: [
+      /* @__PURE__ */ t(je, { size: 12, className: "stroke-[3]" }),
+      " ",
+      /* @__PURE__ */ t("span", { className: "font-medium", children: w }),
+      " is editing this page"
+    ] }) }),
+    /* @__PURE__ */ t(O, { children: !A && !e.isPartialGroup && !w && /* @__PURE__ */ y(
+      "button",
+      {
+        onClick: (c) => {
+          c.stopPropagation(), s("addLanguagePage", { language: l, page: e });
+        },
+        className: "absolute left-1/2 top-1 flex -translate-x-1/2 items-center gap-x-1 rounded bg-blue-500 px-2 py-0.5 text-xs text-white opacity-0 duration-200 hover:bg-blue-700 group-hover:opacity-100",
+        children: [
+          /* @__PURE__ */ t(Be, { size: 12, className: "stroke-[3]" }),
+          " ",
+          /* @__PURE__ */ y("span", { className: "text-[10px]", children: [
+            "Add ",
+            Q(ke, l),
+            " Page"
+          ] })
+        ]
+      }
+    ) })
+  ] });
+}, he = ({
+  pages: e,
+  tier: n,
+  pageTypes: r,
+  currentPage: s,
+  onClickAction: o,
+  languagePages: l,
+  selectedLanguage: f,
+  showUntranslatedPages: g
+}) => {
+  const { expandedPages: P } = K();
+  return /* @__PURE__ */ t("div", { className: "space-y-0.5", style: { paddingLeft: `${n * 10}px` }, children: e.map((m) => /* @__PURE__ */ y(O, { children: [
+    /* @__PURE__ */ t(
+      Qe,
+      {
+        page: m,
+        pageTypes: r,
+        currentPage: s,
+        onClickAction: o,
+        languagePages: l,
+        selectedLanguage: f,
+        showUntranslatedPages: g
+      }
+    ),
+    m.children && m.children.length > 0 && (P == null ? void 0 : P.includes(m.id)) && /* @__PURE__ */ t(
+      he,
+      {
+        pages: m.children,
+        tier: n + 1,
+        pageTypes: r,
+        currentPage: s,
+        onClickAction: o,
+        languagePages: l,
+        selectedLanguage: f,
+        showUntranslatedPages: g
+      }
+    )
+  ] }, m.id)) });
+}, Ve = C(() => import("./page-manager-search-and-filter-B98nz9xS.js")), Je = C(() => import("./add-new-page-DYuuentN.js")), Ke = C(() => import("./delete-page-1dSWwUBg.js")), Xe = C(() => import("./duplicate-page-fUuBTAs7.js")), Ye = C(() => import("./mark-as-template-CwsW86Zv.js")), Ze = C(() => import("./unmark-as-template-Cho9B4RN.js")), et = C(() => import("./unpublish-page-Dr4qbwUx.js")), ct = ({ close: e }) => {
+  const { t: n } = Ue(), { languages: r, setSelectedLang: s } = ae(), { data: o } = Ne(), { data: l, isFetching: f } = we(), [g, P] = ve(), { updateForSelectedPage: m, expandPagesOnSearch: u } = K(null), i = ie(), x = g.get("page"), [p, w] = N(""), [d, A] = N(null), [E, b] = N(null), [j, B] = N(null), [c, I] = N(null), [U, W] = N(""), [X, Y] = N(null), [Z, ee] = N(null), [k, fe] = N(i), [Pe, xe] = N(!1), [, te] = $e(Se), G = Pe && k !== i, { data: $, isFetching: pe } = Ae(k), se = le(
+    (h) => {
+      var a;
+      return (a = z(o, { key: h })) == null ? void 0 : a.hasSlug;
+    },
+    [o]
+  ), v = V(() => l ? G ? F(l, (h) => !($ != null && $[h.id])) : We(l, p, U, se) : [], [l, se, p, U, $, G]);
+  M(() => {
+    s(i);
+  }, [i, s]), M(() => {
+    if (!S(U)) return;
+    const h = sessionStorage.getItem("pageTypeFilter") || "all";
+    !S(o) && h && (z(o, { key: h }) ? W(h) : W("all"));
+  }, [o, U]), M(() => {
+    if (x && !f && !z(l, { id: x })) {
+      const a = z(l, { slug: "/" });
+      if (a) {
+        const D = new URLSearchParams({ page: a.id });
+        q(D, P);
+      } else
+        q(new URLSearchParams({}), P, !0);
+    }
+  }, [l, x, f, P]), M(() => {
+    x && !f && !S(v) && m(v, x);
+  }, [x, f, v, m]), M(() => {
+    !S(p) && !S(v) && u(v);
+  }, [p, v, u]);
+  const { setSelectedLang: H } = ae(), ne = le(
+    (h) => {
+      const a = new URLSearchParams({ page: h });
+      k !== i ? (a.set("lang", k), H(k)) : H(""), q(a, P), e();
+    },
+    [e, P, H, k, i]
+  ), re = (h, a) => {
+    var D;
+    if (a)
+      switch (h) {
+        case "add":
+          b(a);
+          break;
+        case "select":
+          ne(a);
+          break;
+        case "edit":
+          k !== i ? te({
+            edit: !0,
+            id: a == null ? void 0 : a.id,
+            primaryPage: a == null ? void 0 : a.primaryPage
+          }) : b(a);
+          break;
+        case "delete":
+          A(a);
+          break;
+        case "unpublish":
+          B(a);
+          break;
+        case "markAsTemplate":
+          I(a);
+          break;
+        case "unmarkAsTemplate":
+          ee(a);
+          break;
+        case "duplicate":
+          Y(a);
+          break;
+        case "addLanguagePage":
+          te({
+            edit: !1,
+            primaryPage: ((D = a == null ? void 0 : a.page) == null ? void 0 : D.id) || "",
+            preselectedLang: (a == null ? void 0 : a.language) || k
+          });
+          break;
+      }
+  };
+  return /* @__PURE__ */ y(O, { children: [
+    /* @__PURE__ */ y("div", { className: "flex h-full flex-col justify-between", children: [
+      /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(
+        Ve,
+        {
+          pages: v,
+          search: p,
+          setSearch: w,
+          languages: [i, ...r],
+          selectedLanguage: k,
+          setSelectedLanguage: fe,
+          selectedPageType: U,
+          setSelectedPageType: W,
+          onAddPage: (h) => re("add", h),
+          showUntranslatedPages: G,
+          setShowUntranslatedPages: xe
+        }
+      ) }),
+      /* @__PURE__ */ t("div", { className: "flex-1 overflow-y-auto px-4 pb-6 pt-2", children: f || pe ? /* @__PURE__ */ t("div", { className: "space-y-2", children: Ee([...Array(15).keys()], (h) => /* @__PURE__ */ t("div", { className: "h-7 w-full animate-pulse rounded border border-gray-300 bg-gray-200" }, h)) }) : S(v) ? /* @__PURE__ */ y("div", { className: "flex h-[70vh] flex-col items-center justify-center gap-y-1 text-sm font-medium text-slate-500", children: [
+        /* @__PURE__ */ t(ue, { className: "h-6 w-6 stroke-[1]" }),
+        n("Empty List!"),
+        /* @__PURE__ */ t("span", { className: "font-light", children: n("Add new page to start") })
+      ] }) : /* @__PURE__ */ t(
+        he,
+        {
+          tier: 0,
+          pages: v,
+          pageTypes: o,
+          currentPage: x || "",
+          onClickAction: re,
+          languagePages: $,
+          selectedLanguage: k,
+          showUntranslatedPages: G
+        }
+      ) })
+    ] }),
+    E && /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(
+      Je,
+      {
+        closePanel: e,
+        editPage: ne,
+        addEditPage: E,
+        setAddEditPage: b
+      }
+    ) }),
+    d && /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(Ke, { page: d, onClose: () => A(null) }) }),
+    j && /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(et, { page: j, onClose: () => B(null) }) }),
+    c && /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(Ye, { page: c, onClose: () => I(null) }) }),
+    Z && /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(Ze, { page: Z, onClose: () => ee(null) }) }),
+    X && /* @__PURE__ */ t(L, { children: /* @__PURE__ */ t(Xe, { page: X, onClose: () => Y(null), closePanel: e }) })
+  ] });
+};
+export {
+  ct as default
+};

package/dist/page-manager-search-and-filter-B98nz9xS.js

@@ -0,0 +1,201 @@
+import { jsx as e, jsxs as n, Fragment as k } from "react/jsx-runtime";
+import { f as F, L as I, h as z, A as j } from "./index-Bk8tPO5R.js";
+import { u as T } from "./use-page-expand-manager-D6T75I11.js";
+import { useTranslation as f } from "@chaibuilder/sdk";
+import { Button as m, Tooltip as g, TooltipTrigger as b, TooltipContent as y, Select as $, SelectTrigger as G, SelectContent as D, Input as E, SelectItem as N } from "@chaibuilder/sdk/ui";
+import { useQueryClient as M } from "@tanstack/react-query";
+import { isEmpty as w, filter as x, map as S, get as o } from "lodash-es";
+import { Star as R, Plus as W, FilterXIcon as q, Filter as B, ListFilter as K, Search as P, ChevronsUpDown as Q, ChevronsDownUp as _, RefreshCw as O } from "lucide-react";
+import { useState as U } from "react";
+const V = ({ selectedPageType: a, setSelectedPageType: i }) => {
+  const { t: l } = f(), [r, s] = U(""), { data: c } = z(), h = (t) => {
+    if (!r) return !0;
+    const d = r.toLowerCase(), u = (v) => String(o(t, v, "")).toLowerCase().includes(d);
+    return u("name") || u("key");
+  }, p = c.find((t) => t.key === a);
+  return /* @__PURE__ */ n($, { onValueChange: i, value: a, children: [
+    /* @__PURE__ */ e(
+      G,
+      {
+        className: `${a === "all" ? "bg-gray-100/30 hover:bg-gray-100" : "gap-x-1 border bg-gray-100/30 hover:bg-gray-100"} h-9 w-max min-w-[150px] overflow-hidden whitespace-nowrap rounded p-0 px-2 py-1 text-xs text-gray-600 shadow-none ring-0 focus:ring-0 [&>svg]:hidden`,
+        children: /* @__PURE__ */ n("div", { className: "flex w-full items-center justify-between gap-x-1.5", children: [
+          /* @__PURE__ */ e("span", { className: "max-w-[150px] overflow-hidden truncate whitespace-nowrap font-medium leading-tight", children: (p == null ? void 0 : p.name) || l("All") }),
+          /* @__PURE__ */ e(
+            K,
+            {
+              className: `${a !== "all" ? "fill-sky-50 text-sky-500" : ""} pointer-events-none h-4 w-4 text-muted-foreground hover:bg-blue-300`
+            }
+          )
+        ] })
+      }
+    ),
+    /* @__PURE__ */ n(D, { children: [
+      /* @__PURE__ */ e("div", { className: "sticky top-0 z-10 bg-white pb-2", children: /* @__PURE__ */ n("div", { className: "relative", children: [
+        /* @__PURE__ */ e(P, { strokeWidth: 2, className: "absolute left-2 top-2.5 h-3.5 w-3.5 text-gray-400" }),
+        /* @__PURE__ */ e(
+          E,
+          {
+            placeholder: l("Search page types..."),
+            className: "h-8 w-full rounded border pl-8 text-xs shadow-none",
+            value: r,
+            onChange: (t) => s(t.target.value),
+            onKeyDown: (t) => t.stopPropagation()
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ e(N, { value: "all", children: l("All") }),
+      !w(x(c, (t) => t.hasSlug && h(t))) && /* @__PURE__ */ n(k, { children: [
+        /* @__PURE__ */ e("div", { className: "mt-2 border-t px-2 py-1.5 pt-2 text-xs font-semibold text-gray-500", children: l("Pages") }),
+        S(
+          [...x(c, (t) => t.hasSlug && h(t))].sort(
+            (t, d) => o(t, "name", "").localeCompare(o(d, "name", ""))
+          ),
+          (t) => /* @__PURE__ */ e(N, { value: o(t, "key"), children: o(t, "name") }, o(t, "key"))
+        )
+      ] }),
+      !w(x(c, (t) => !t.hasSlug && h(t))) && /* @__PURE__ */ n(k, { children: [
+        /* @__PURE__ */ e("div", { className: "mt-2 border-t px-2 py-1.5 pt-2 text-xs font-semibold text-gray-500", children: l("Partials") }),
+        S(
+          [...x(c, (t) => !t.hasSlug && h(t))].sort(
+            (t, d) => o(t, "name", "").localeCompare(o(d, "name", ""))
+          ),
+          (t) => /* @__PURE__ */ e(N, { value: o(t, "key"), children: o(t, "name") }, o(t, "key"))
+        )
+      ] }),
+      w(x(c, h)) && /* @__PURE__ */ e("div", { className: "px-3 py-2 text-center text-sm text-gray-500", children: l("No matching page types found") })
+    ] })
+  ] });
+}, X = ({ search: a, setSearch: i }) => {
+  const { t: l } = f();
+  return /* @__PURE__ */ n("div", { className: "relative flex h-9 flex-1 items-center gap-2 rounded-md border px-2.5", children: [
+    /* @__PURE__ */ e("label", { htmlFor: "page-search-input", className: "sr-only", children: l("Search Pages") }),
+    /* @__PURE__ */ e(
+      P,
+      {
+        className: `${a ? "fill-sky-50 text-sky-500" : ""} pointer-events-none h-4 w-4 text-muted-foreground`,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ e(
+      E,
+      {
+        id: "page-search-input",
+        placeholder: l("Search pages"),
+        value: a,
+        onChange: (r) => i(r.target.value),
+        className: "border-none px-1.5 shadow-none outline-none ring-0 transition-none focus:outline-none focus:ring-0 focus-visible:ring-0",
+        autoComplete: "off"
+      }
+    )
+  ] });
+}, H = ({ pages: a }) => {
+  const { t: i } = f(), { expandAll: l, collapseAll: r, expandedPages: s } = T(null);
+  return /* @__PURE__ */ n("div", { className: "flex gap-1", children: [
+    /* @__PURE__ */ n(g, { children: [
+      /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ e(m, { variant: "outline", size: "icon", onClick: () => l(a), className: "rounded p-1 text-gray-500", children: /* @__PURE__ */ e(Q, {}) }) }),
+      /* @__PURE__ */ e(y, { children: i("Expand All") })
+    ] }),
+    /* @__PURE__ */ n(g, { children: [
+      /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ e(
+        m,
+        {
+          disabled: s.length === 0,
+          variant: "outline",
+          size: "icon",
+          onClick: () => r(),
+          className: "rounded p-1 text-gray-500",
+          children: /* @__PURE__ */ e(_, {})
+        }
+      ) }),
+      /* @__PURE__ */ e(y, { children: i("Collapse All") })
+    ] })
+  ] });
+}, J = ({ languages: a, selectedLanguage: i, setSelectedLanguage: l }) => {
+  const r = F();
+  return /* @__PURE__ */ e("div", { className: "scrollbar-hide flex gap-1 overflow-x-auto pb-1", children: a.map((s) => /* @__PURE__ */ n(
+    m,
+    {
+      variant: i === s ? "default" : "outline",
+      size: "sm",
+      className: `h-6 flex-shrink-0 whitespace-nowrap rounded px-3 text-xs font-normal ${i === s ? "bg-black text-white hover:bg-black" : "text-gray-500"}`,
+      onClick: () => l(s.toLowerCase()),
+      children: [
+        s === r && /* @__PURE__ */ e(R, { size: 4, className: `p-0.5 ${i === r ? "fill-white" : "fill-black"}` }),
+        I[s] || ""
+      ]
+    },
+    s
+  )) });
+}, A = () => {
+  const { t: a } = f(), i = M();
+  return /* @__PURE__ */ n(g, { children: [
+    /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ e(
+      m,
+      {
+        size: "sm",
+        variant: "ghost",
+        onClick: () => i.invalidateQueries({ queryKey: [j.GET_WEBSITE_PAGES] }),
+        className: "mt-1 h-6 w-6",
+        children: /* @__PURE__ */ e(O, {})
+      }
+    ) }),
+    /* @__PURE__ */ e(y, { side: "bottom", children: a("Refresh pages list") })
+  ] });
+}, se = ({
+  pages: a,
+  search: i,
+  setSearch: l,
+  languages: r,
+  onAddPage: s,
+  selectedLanguage: c,
+  setSelectedLanguage: h,
+  selectedPageType: p,
+  setSelectedPageType: t,
+  showUntranslatedPages: d,
+  setShowUntranslatedPages: u
+}) => {
+  const { t: v } = f(), C = r.length > 1;
+  return /* @__PURE__ */ n("div", { className: "space-y-3 border-b border-b-gray-200 px-4 pb-1", children: [
+    /* @__PURE__ */ n("div", { className: "flex items-center gap-x-2", children: [
+      /* @__PURE__ */ e(V, { selectedPageType: p, setSelectedPageType: t }),
+      /* @__PURE__ */ e(X, { search: i, setSearch: l }),
+      /* @__PURE__ */ e(H, { pages: a }),
+      /* @__PURE__ */ n(m, { variant: "default", onClick: s, className: "rounded px-3 font-normal", children: [
+        /* @__PURE__ */ e(W, { strokeWidth: 2, className: "stroke-white stroke-[3]" }),
+        /* @__PURE__ */ e("span", { className: "font-normal text-white", children: v("Add Page") })
+      ] }),
+      !C && /* @__PURE__ */ e(A, {})
+    ] }),
+    C ? /* @__PURE__ */ n("div", { className: "flex items-center justify-between gap-2", children: [
+      /* @__PURE__ */ e(
+        J,
+        {
+          languages: r,
+          selectedLanguage: c,
+          setSelectedLanguage: (L) => {
+            h(L), u(d && (r == null ? void 0 : r[0]) !== c);
+          }
+        }
+      ),
+      /* @__PURE__ */ n("div", { className: "flex items-center gap-x-2", children: [
+        (r == null ? void 0 : r[0]) !== c && /* @__PURE__ */ n(g, { children: [
+          /* @__PURE__ */ e(b, { asChild: !0, children: /* @__PURE__ */ e(
+            m,
+            {
+              variant: "ghost",
+              onClick: () => u(!d),
+              className: "h-6 rounded px-3 py-1 text-xs font-normal",
+              children: d ? /* @__PURE__ */ e(q, {}) : /* @__PURE__ */ e(B, {})
+            }
+          ) }),
+          /* @__PURE__ */ e(y, { side: "bottom", children: v("Toggle Untranslated Pages") })
+        ] }),
+        /* @__PURE__ */ e(A, {})
+      ] })
+    ] }) : /* @__PURE__ */ e("div", { className: "flex items-center justify-between gap-2" })
+  ] });
+};
+export {
+  J as LanguageSelector,
+  se as default
+};

package/dist/page-manager-search-and-filter-CfEfWFeo.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("./index-0cMGDekp.cjs"),N=require("./use-page-expand-manager-2KjeYfVS.cjs"),m=require("@chaibuilder/sdk"),s=require("@chaibuilder/sdk/ui"),w=require("@tanstack/react-query"),r=require("lodash-es"),d=require("lucide-react"),C=require("react"),S=({selectedPageType:l,setSelectedPageType:i})=>{const{t:a}=m.useTranslation(),[n,o]=C.useState(""),{data:c}=j.usePageTypes(),h=t=>{if(!n)return!0;const x=n.toLowerCase(),p=g=>String(r.get(t,g,"")).toLowerCase().includes(x);return p("name")||p("key")},u=c.find(t=>t.key===l);return e.jsxs(s.Select,{onValueChange:i,value:l,children:[e.jsx(s.SelectTrigger,{className:`${l==="all"?"bg-gray-100/30 hover:bg-gray-100":"gap-x-1 border bg-gray-100/30 hover:bg-gray-100"} h-9 w-max min-w-[150px] overflow-hidden whitespace-nowrap rounded p-0 px-2 py-1 text-xs text-gray-600 shadow-none ring-0 focus:ring-0 [&>svg]:hidden`,children:e.jsxs("div",{className:"flex w-full items-center justify-between gap-x-1.5",children:[e.jsx("span",{className:"max-w-[150px] overflow-hidden truncate whitespace-nowrap font-medium leading-tight",children:(u==null?void 0:u.name)||a("All")}),e.jsx(d.ListFilter,{className:`${l!=="all"?"fill-sky-50 text-sky-500":""} pointer-events-none h-4 w-4 text-muted-foreground hover:bg-blue-300`})]})}),e.jsxs(s.SelectContent,{children:[e.jsx("div",{className:"sticky top-0 z-10 bg-white pb-2",children:e.jsxs("div",{className:"relative",children:[e.jsx(d.Search,{strokeWidth:2,className:"absolute left-2 top-2.5 h-3.5 w-3.5 text-gray-400"}),e.jsx(s.Input,{placeholder:a("Search page types..."),className:"h-8 w-full rounded border pl-8 text-xs shadow-none",value:n,onChange:t=>o(t.target.value),onKeyDown:t=>t.stopPropagation()})]})}),e.jsx(s.SelectItem,{value:"all",children:a("All")}),!r.isEmpty(r.filter(c,t=>t.hasSlug&&h(t)))&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"mt-2 border-t px-2 py-1.5 pt-2 text-xs font-semibold text-gray-500",children:a("Pages")}),r.map([...r.filter(c,t=>t.hasSlug&&h(t))].sort((t,x)=>r.get(t,"name","").localeCompare(r.get(x,"name",""))),t=>e.jsx(s.SelectItem,{value:r.get(t,"key"),children:r.get(t,"name")},r.get(t,"key")))]}),!r.isEmpty(r.filter(c,t=>!t.hasSlug&&h(t)))&&e.jsxs(e.Fragment,{children:[e.jsx("div",{className:"mt-2 border-t px-2 py-1.5 pt-2 text-xs font-semibold text-gray-500",children:a("Partials")}),r.map([...r.filter(c,t=>!t.hasSlug&&h(t))].sort((t,x)=>r.get(t,"name","").localeCompare(r.get(x,"name",""))),t=>e.jsx(s.SelectItem,{value:r.get(t,"key"),children:r.get(t,"name")},r.get(t,"key")))]}),r.isEmpty(r.filter(c,h))&&e.jsx("div",{className:"px-3 py-2 text-center text-sm text-gray-500",children:a("No matching page types found")})]})]})},k=({search:l,setSearch:i})=>{const{t:a}=m.useTranslation();return e.jsxs("div",{className:"relative flex h-9 flex-1 items-center gap-2 rounded-md border px-2.5",children:[e.jsx("label",{htmlFor:"page-search-input",className:"sr-only",children:a("Search Pages")}),e.jsx(d.Search,{className:`${l?"fill-sky-50 text-sky-500":""} pointer-events-none h-4 w-4 text-muted-foreground`,"aria-hidden":"true"}),e.jsx(s.Input,{id:"page-search-input",placeholder:a("Search pages"),value:l,onChange:n=>i(n.target.value),className:"border-none px-1.5 shadow-none outline-none ring-0 transition-none focus:outline-none focus:ring-0 focus-visible:ring-0",autoComplete:"off"})]})},T=({pages:l})=>{const{t:i}=m.useTranslation(),{expandAll:a,collapseAll:n,expandedPages:o}=N.usePageExpandManager(null);return e.jsxs("div",{className:"flex gap-1",children:[e.jsxs(s.Tooltip,{children:[e.jsx(s.TooltipTrigger,{asChild:!0,children:e.jsx(s.Button,{variant:"outline",size:"icon",onClick:()=>a(l),className:"rounded p-1 text-gray-500",children:e.jsx(d.ChevronsUpDown,{})})}),e.jsx(s.TooltipContent,{children:i("Expand All")})]}),e.jsxs(s.Tooltip,{children:[e.jsx(s.TooltipTrigger,{asChild:!0,children:e.jsx(s.Button,{disabled:o.length===0,variant:"outline",size:"icon",onClick:()=>n(),className:"rounded p-1 text-gray-500",children:e.jsx(d.ChevronsDownUp,{})})}),e.jsx(s.TooltipContent,{children:i("Collapse All")})]})]})},y=({languages:l,selectedLanguage:i,setSelectedLanguage:a})=>{const n=j.useFallbackLang();return e.jsx("div",{className:"scrollbar-hide flex gap-1 overflow-x-auto pb-1",children:l.map(o=>e.jsxs(s.Button,{variant:i===o?"default":"outline",size:"sm",className:`h-6 flex-shrink-0 whitespace-nowrap rounded px-3 text-xs font-normal ${i===o?"bg-black text-white hover:bg-black":"text-gray-500"}`,onClick:()=>a(o.toLowerCase()),children:[o===n&&e.jsx(d.Star,{size:4,className:`p-0.5 ${i===n?"fill-white":"fill-black"}`}),j.LANGUAGES[o]||""]},o))})},v=()=>{const{t:l}=m.useTranslation(),i=w.useQueryClient();return e.jsxs(s.Tooltip,{children:[e.jsx(s.TooltipTrigger,{asChild:!0,children:e.jsx(s.Button,{size:"sm",variant:"ghost",onClick:()=>i.invalidateQueries({queryKey:[j.ACTIONS.GET_WEBSITE_PAGES]}),className:"mt-1 h-6 w-6",children:e.jsx(d.RefreshCw,{})})}),e.jsx(s.TooltipContent,{side:"bottom",children:l("Refresh pages list")})]})},E=({pages:l,search:i,setSearch:a,languages:n,onAddPage:o,selectedLanguage:c,setSelectedLanguage:h,selectedPageType:u,setSelectedPageType:t,showUntranslatedPages:x,setShowUntranslatedPages:p})=>{const{t:g}=m.useTranslation(),f=n.length>1;return e.jsxs("div",{className:"space-y-3 border-b border-b-gray-200 px-4 pb-1",children:[e.jsxs("div",{className:"flex items-center gap-x-2",children:[e.jsx(S,{selectedPageType:u,setSelectedPageType:t}),e.jsx(k,{search:i,setSearch:a}),e.jsx(T,{pages:l}),e.jsxs(s.Button,{variant:"default",onClick:o,className:"rounded px-3 font-normal",children:[e.jsx(d.Plus,{strokeWidth:2,className:"stroke-white stroke-[3]"}),e.jsx("span",{className:"font-normal text-white",children:g("Add Page")})]}),!f&&e.jsx(v,{})]}),f?e.jsxs("div",{className:"flex items-center justify-between gap-2",children:[e.jsx(y,{languages:n,selectedLanguage:c,setSelectedLanguage:b=>{h(b),p(x&&(n==null?void 0:n[0])!==c)}}),e.jsxs("div",{className:"flex items-center gap-x-2",children:[(n==null?void 0:n[0])!==c&&e.jsxs(s.Tooltip,{children:[e.jsx(s.TooltipTrigger,{asChild:!0,children:e.jsx(s.Button,{variant:"ghost",onClick:()=>p(!x),className:"h-6 rounded px-3 py-1 text-xs font-normal",children:x?e.jsx(d.FilterXIcon,{}):e.jsx(d.Filter,{})})}),e.jsx(s.TooltipContent,{side:"bottom",children:g("Toggle Untranslated Pages")})]}),e.jsx(v,{})]})]}):e.jsx("div",{className:"flex items-center justify-between gap-2"})]})};exports.LanguageSelector=y;exports.default=E;