@cmssy/react 0.1.8 → 0.2.0

package/dist/client.cjs

@@ -5,6 +5,9 @@ var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 
 // src/registry.ts
+function defineBlock(def) {
+  return def;
+}
 function buildBlockMap(blocks) {
   const map = /* @__PURE__ */ Object.create(null);
   for (const block of blocks) map[block.type] = block.component;
@@ -747,9 +750,671 @@ function CmssyLazyLayout({ load, ...props }) {
   if (!blocks) return null;
   return /* @__PURE__ */ jsxRuntime.jsx(CmssyEditableLayout, { ...props, blocks });
 }
+var CmssyAuthContext = react.createContext(null);
+function CmssyAuthProvider({
+  children,
+  basePath = "/api/cmssy/auth",
+  initialUser
+}) {
+  const seeded = initialUser !== void 0;
+  const [user, setUser] = react.useState(initialUser ?? null);
+  const [loading, setLoading] = react.useState(!seeded);
+  const generation = react.useRef(0);
+  const base = react.useMemo(() => basePath.replace(/\/+$/, ""), [basePath]);
+  const commitUser = react.useCallback((next) => {
+    generation.current += 1;
+    setUser(next);
+  }, []);
+  const fetchUser = react.useCallback(async () => {
+    try {
+      const res = await fetch(`${base}/me`, {
+        credentials: "same-origin",
+        cache: "no-store"
+      });
+      const data = await res.json();
+      return data.user ?? null;
+    } catch {
+      return null;
+    }
+  }, [base]);
+  react.useEffect(() => {
+    if (seeded) return;
+    const gen = generation.current;
+    void (async () => {
+      const next = await fetchUser();
+      if (gen === generation.current) {
+        setUser(next);
+        setLoading(false);
+      }
+    })();
+  }, [fetchUser, seeded]);
+  const postAction = react.useCallback(
+    async (action, body) => {
+      const res = await fetch(`${base}/${action}`, {
+        method: "POST",
+        credentials: "same-origin",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(body)
+      });
+      return await res.json();
+    },
+    [base]
+  );
+  const signIn = react.useCallback(
+    async (identity, password) => {
+      const data = await postAction("sign-in", { identity, password });
+      if (data.ok && data.user) commitUser(data.user);
+      return { ok: Boolean(data.ok), message: data.message };
+    },
+    [postAction, commitUser]
+  );
+  const register = react.useCallback(
+    async (identity, password, fields2) => {
+      const data = await postAction("register", {
+        identity,
+        password,
+        fields: fields2 ?? {}
+      });
+      return { ok: Boolean(data.ok), message: data.message };
+    },
+    [postAction]
+  );
+  const signOut = react.useCallback(async () => {
+    try {
+      await postAction("sign-out", {});
+    } finally {
+      commitUser(null);
+    }
+  }, [postAction, commitUser]);
+  const refresh = react.useCallback(async () => {
+    const gen = generation.current;
+    const next = await fetchUser();
+    if (gen === generation.current) setUser(next);
+  }, [fetchUser]);
+  const value = react.useMemo(
+    () => ({ user, loading, signIn, register, signOut, refresh }),
+    [user, loading, signIn, register, signOut, refresh]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(CmssyAuthContext.Provider, { value, children });
+}
+function useCmssyUser() {
+  const ctx = react.useContext(CmssyAuthContext);
+  if (!ctx) {
+    throw new Error("useCmssyUser must be used within <CmssyAuthProvider>");
+  }
+  return ctx;
+}
+var CmssyCommerceContext = react.createContext(null);
+function CmssyCommerceProvider({
+  children,
+  basePath = "/api/cmssy/cart"
+}) {
+  const base = react.useMemo(() => basePath.replace(/\/+$/, ""), [basePath]);
+  const generation = react.useRef(0);
+  const [cart, setCart] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  const [error, setError] = react.useState(null);
+  const post = react.useCallback(
+    async (action, body) => {
+      const res = await fetch(`${base}/${action}`, {
+        method: "POST",
+        credentials: "same-origin",
+        headers: { "content-type": "application/json" },
+        body: JSON.stringify(body)
+      });
+      const data = await res.json().catch(() => ({}));
+      if (!res.ok) {
+        throw new Error(
+          typeof data.message === "string" ? data.message : "Commerce request failed"
+        );
+      }
+      return data;
+    },
+    [base]
+  );
+  const runCart = react.useCallback(
+    async (action, body) => {
+      const gen = ++generation.current;
+      setError(null);
+      try {
+        const data = await post(action, body);
+        if (gen === generation.current) setCart(data.cart);
+      } catch (err) {
+        if (gen === generation.current) {
+          setError(
+            err instanceof Error ? err.message : "Commerce request failed"
+          );
+        }
+        throw err;
+      }
+    },
+    [post]
+  );
+  const refresh = react.useCallback(async () => {
+    setLoading(true);
+    try {
+      await runCart("cart", {});
+    } catch {
+      return;
+    } finally {
+      setLoading(false);
+    }
+  }, [runCart]);
+  react.useEffect(() => {
+    void refresh();
+  }, [refresh]);
+  const addToCart = react.useCallback(
+    (recordId, quantity = 1, options) => runCart("add", {
+      recordId,
+      quantity,
+      variantSelections: options?.variantSelections,
+      notes: options?.notes
+    }),
+    [runCart]
+  );
+  const updateItem = react.useCallback(
+    (itemId, quantity) => runCart("update", { itemId, quantity }),
+    [runCart]
+  );
+  const removeItem = react.useCallback(
+    (itemId) => runCart("remove", { itemId }),
+    [runCart]
+  );
+  const clearCart = react.useCallback(() => runCart("clear", {}), [runCart]);
+  const applyDiscount = react.useCallback(
+    (code) => runCart("apply-discount", { code }),
+    [runCart]
+  );
+  const removeDiscount = react.useCallback(
+    () => runCart("remove-discount", {}),
+    [runCart]
+  );
+  const checkout = react.useCallback(
+    async (customerEmail) => {
+      const gen = ++generation.current;
+      setError(null);
+      try {
+        const data = await post("checkout", {
+          customerEmail
+        });
+        if (gen === generation.current) setCart(null);
+        return data.order;
+      } catch (err) {
+        if (gen === generation.current) {
+          setError(err instanceof Error ? err.message : "Checkout failed");
+        }
+        throw err;
+      }
+    },
+    [post]
+  );
+  const fetchProduct = react.useCallback(
+    async (modelSlug, filter) => {
+      const data = await post("product", {
+        modelSlug,
+        filter
+      });
+      return data.product;
+    },
+    [post]
+  );
+  const value = react.useMemo(
+    () => ({
+      cart,
+      loading,
+      error,
+      addToCart,
+      updateItem,
+      removeItem,
+      clearCart,
+      applyDiscount,
+      removeDiscount,
+      checkout,
+      refresh,
+      fetchProduct
+    }),
+    [
+      cart,
+      loading,
+      error,
+      addToCart,
+      updateItem,
+      removeItem,
+      clearCart,
+      applyDiscount,
+      removeDiscount,
+      checkout,
+      refresh,
+      fetchProduct
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(CmssyCommerceContext.Provider, { value, children });
+}
+function useCart() {
+  const ctx = react.useContext(CmssyCommerceContext);
+  if (!ctx) {
+    throw new Error("useCart must be used within <CmssyCommerceProvider>");
+  }
+  return ctx;
+}
+
+// src/fields.ts
+function control(type) {
+  return (opts = {}) => ({
+    type,
+    label: opts.label ?? "",
+    ...opts
+  });
+}
+var fields = {
+  singleLine: control("singleLine"),
+  multiLine: control("multiLine"),
+  richText: control("richText"),
+  numeric: control("numeric"),
+  date: control("date"),
+  media: control("media"),
+  link: control("link"),
+  select: control("select"),
+  multiselect: control("multiselect"),
+  boolean: control("boolean"),
+  color: control("color"),
+  repeater: control("repeater")
+};
+
+// src/commerce/money.ts
+var ZERO_DECIMAL = /* @__PURE__ */ new Set([
+  "BIF",
+  "CLP",
+  "DJF",
+  "GNF",
+  "JPY",
+  "KMF",
+  "KRW",
+  "MGA",
+  "PYG",
+  "RWF",
+  "UGX",
+  "VND",
+  "VUV",
+  "XAF",
+  "XOF",
+  "XPF"
+]);
+var THREE_DECIMAL = /* @__PURE__ */ new Set([
+  "BHD",
+  "IQD",
+  "JOD",
+  "KWD",
+  "LYD",
+  "OMR",
+  "TND"
+]);
+function fractionDigits(currency) {
+  const code = currency.toUpperCase();
+  if (ZERO_DECIMAL.has(code)) return 0;
+  if (THREE_DECIMAL.has(code)) return 3;
+  return 2;
+}
+function fromMinorUnits(minor, currency) {
+  return minor / 10 ** fractionDigits(currency);
+}
+function formatPrice(minor, currency) {
+  if (!Number.isFinite(minor)) return "";
+  const code = currency ?? "USD";
+  const amount = fromMinorUnits(minor, code);
+  try {
+    return new Intl.NumberFormat(void 0, {
+      style: "currency",
+      currency: code
+    }).format(amount);
+  } catch {
+    return `${amount.toFixed(fractionDigits(code))} ${code}`;
+  }
+}
+function deriveAxes(variants) {
+  const axes = /* @__PURE__ */ new Map();
+  for (const variant of variants) {
+    for (const option of variant.selectedOptions) {
+      if (!axes.has(option.name)) axes.set(option.name, /* @__PURE__ */ new Set());
+      axes.get(option.name).add(option.value);
+    }
+  }
+  return [...axes.entries()].map(([name, values]) => ({
+    name,
+    values: [...values]
+  }));
+}
+function matchVariant(variants, selections) {
+  return variants.find(
+    (variant) => variant.selectedOptions.every(
+      (opt) => selections[opt.name] === opt.value
+    )
+  ) ?? null;
+}
+function ProductComponent({ content }) {
+  const c = content;
+  const { fetchProduct, addToCart } = useCart();
+  const [product, setProduct] = react.useState(null);
+  const [loading, setLoading] = react.useState(true);
+  const [selections, setSelections] = react.useState({});
+  const [adding, setAdding] = react.useState(false);
+  const [added, setAdded] = react.useState(false);
+  const [addError, setAddError] = react.useState(null);
+  const modelSlug = c.modelSlug ?? "products";
+  const slugField = c.slugField ?? "slug";
+  const slug = c.slug ?? "";
+  react.useEffect(() => {
+    let active = true;
+    setLoading(true);
+    void (async () => {
+      try {
+        const result = slug ? await fetchProduct(modelSlug, { [slugField]: slug }) : null;
+        if (active) setProduct(result);
+      } finally {
+        if (active) setLoading(false);
+      }
+    })();
+    return () => {
+      active = false;
+    };
+  }, [fetchProduct, modelSlug, slugField, slug]);
+  const axes = react.useMemo(
+    () => product ? deriveAxes(product.variants) : [],
+    [product]
+  );
+  const variant = react.useMemo(
+    () => product ? matchVariant(product.variants, selections) : null,
+    [product, selections]
+  );
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cmssy-product": "loading", children: "Loading\u2026" });
+  }
+  if (!product) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cmssy-product": "not-found", children: "Product not found" });
+  }
+  const data = product.data;
+  const name = String(data[c.nameField ?? "name"] ?? "");
+  const imageUrl = c.imageField ? data[c.imageField] : null;
+  const hasVariants = product.variants.length > 0;
+  const currency = data.currency ?? "USD";
+  const priceMinor = hasVariants ? variant?.price : Number(data[c.priceField ?? "price"] ?? 0);
+  const showPrice = priceMinor != null && Number.isFinite(priceMinor);
+  const allAxesSelected = axes.every((axis) => selections[axis.name]);
+  const outOfStock = variant != null && variant.inventory != null && variant.inventory <= 0;
+  const canAdd = hasVariants ? Boolean(variant) && !outOfStock : true;
+  async function onAdd() {
+    if (!product) return;
+    setAdding(true);
+    setAdded(false);
+    setAddError(null);
+    try {
+      await addToCart(
+        product.id,
+        1,
+        hasVariants ? { variantSelections: selections } : void 0
+      );
+      setAdded(true);
+    } catch (err) {
+      setAddError(err instanceof Error ? err.message : "Could not add to cart");
+    } finally {
+      setAdding(false);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cmssy-product": product.id, children: [
+    imageUrl ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: imageUrl, alt: name }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { "data-cmssy-product-name": true, children: name }),
+    showPrice ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cmssy-product-price": true, children: formatPrice(priceMinor, currency) }) : null,
+    axes.map((axis) => /* @__PURE__ */ jsxRuntime.jsxs("label", { "data-cmssy-variant-axis": axis.name, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: axis.name }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "select",
+        {
+          value: selections[axis.name] ?? "",
+          onChange: (e) => setSelections((prev) => ({
+            ...prev,
+            [axis.name]: e.target.value
+          })),
+          children: [
+            /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", children: "\u2014" }),
+            axis.values.map((v) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: v, children: v }, v))
+          ]
+        }
+      )
+    ] }, axis.name)),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onAdd,
+        disabled: adding || !canAdd || hasVariants && !allAxesSelected,
+        "data-cmssy-add-to-cart": true,
+        children: adding ? "Adding\u2026" : outOfStock ? "Out of stock" : added ? "Added" : "Add to cart"
+      }
+    ),
+    addError ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cmssy-product-error": true, children: addError }) : null
+  ] });
+}
+var productBlock = defineBlock({
+  type: "product",
+  label: "Product",
+  category: "Commerce",
+  props: {
+    modelSlug: fields.singleLine({ label: "Model slug" }),
+    slugField: fields.singleLine({ label: "Slug field" }),
+    slug: fields.singleLine({ label: "Product slug" }),
+    nameField: fields.singleLine({ label: "Name field" }),
+    priceField: fields.singleLine({ label: "Price field" }),
+    imageField: fields.singleLine({ label: "Image field" })
+  },
+  component: ProductComponent
+});
+function CartComponent() {
+  const {
+    cart,
+    loading,
+    error,
+    updateItem,
+    removeItem,
+    applyDiscount,
+    removeDiscount
+  } = useCart();
+  const [code, setCode] = react.useState("");
+  const [busy, setBusy] = react.useState(false);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cmssy-cart": "loading", children: "Loading\u2026" });
+  }
+  if (!cart || cart.items.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cmssy-cart": "empty", children: "Your cart is empty." });
+  }
+  const currency = cart.currency ?? "USD";
+  async function withBusy(fn) {
+    setBusy(true);
+    try {
+      await fn();
+    } catch {
+      setBusy(false);
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cmssy-cart": cart.id, children: [
+    error ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cmssy-cart-error": true, children: error }) : null,
+    /* @__PURE__ */ jsxRuntime.jsx("ul", { "data-cmssy-cart-items": true, children: cart.items.map((item) => /* @__PURE__ */ jsxRuntime.jsxs("li", { "data-cmssy-cart-item": item.id, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cmssy-item-name": true, children: item.snapshot.name }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "number",
+          min: "1",
+          value: item.quantity,
+          disabled: busy,
+          onChange: (e) => {
+            const qty = Number(e.target.value);
+            if (Number.isInteger(qty) && qty >= 1) {
+              void withBusy(() => updateItem(item.id, qty));
+            }
+          },
+          "data-cmssy-item-qty": true
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx("span", { "data-cmssy-item-price": true, children: formatPrice(item.snapshot.price * item.quantity, currency) }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          disabled: busy,
+          onClick: () => void withBusy(() => removeItem(item.id)),
+          "data-cmssy-item-remove": true,
+          children: "Remove"
+        }
+      )
+    ] }, item.id)) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cmssy-cart-discount": true, children: cart.appliedDiscount ? /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { children: cart.appliedDiscount.code }),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          disabled: busy,
+          onClick: () => void withBusy(() => removeDiscount()),
+          children: "Remove"
+        }
+      )
+    ] }) : /* @__PURE__ */ jsxRuntime.jsxs("p", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "input",
+        {
+          type: "text",
+          value: code,
+          placeholder: "Discount code",
+          onChange: (e) => setCode(e.target.value),
+          disabled: busy
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          disabled: busy || !code.trim(),
+          onClick: () => void withBusy(async () => {
+            await applyDiscount(code.trim());
+            setCode("");
+          }),
+          children: "Apply"
+        }
+      )
+    ] }) }),
+    /* @__PURE__ */ jsxRuntime.jsxs("dl", { "data-cmssy-cart-totals": true, children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { children: "Subtotal" }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { children: formatPrice(cart.subtotal, currency) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+        /* @__PURE__ */ jsxRuntime.jsx("dt", { children: "Total" }),
+        /* @__PURE__ */ jsxRuntime.jsx("dd", { "data-cmssy-cart-total": true, children: formatPrice(cart.discountedTotal, currency) })
+      ] })
+    ] })
+  ] });
+}
+var cartBlock = defineBlock({
+  type: "cart",
+  label: "Cart",
+  category: "Commerce",
+  props: {},
+  component: CartComponent
+});
+var EMAIL_RE = /^[^@\s]+@[^@\s]+\.[^@\s]+$/;
+function CheckoutComponent({ content }) {
+  const c = content;
+  const { cart, loading, checkout } = useCart();
+  const [email, setEmail] = react.useState("");
+  const [busy, setBusy] = react.useState(false);
+  const [error, setError] = react.useState(null);
+  const [order, setOrder] = react.useState(null);
+  if (order) {
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-cmssy-checkout": "done", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { children: c.successMessage ?? "Order placed - awaiting payment." }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cmssy-order-id": true, children: order.id }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cmssy-order-total": true, children: formatPrice(order.total, order.currency) })
+    ] });
+  }
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cmssy-checkout": "loading", children: "Loading\u2026" });
+  }
+  if (!cart || cart.items.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-cmssy-checkout": "empty", children: "Your cart is empty." });
+  }
+  const emailValid = EMAIL_RE.test(email.trim());
+  async function onSubmit() {
+    setBusy(true);
+    setError(null);
+    try {
+      setOrder(await checkout(email.trim()));
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Checkout failed");
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "form",
+    {
+      "data-cmssy-checkout": cart.id,
+      onSubmit: (e) => {
+        e.preventDefault();
+        if (emailValid && !busy) void onSubmit();
+      },
+      children: [
+        error ? /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cmssy-checkout-error": true, children: error }) : null,
+        /* @__PURE__ */ jsxRuntime.jsxs("label", { children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { children: "Email" }),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              type: "email",
+              value: email,
+              onChange: (e) => setEmail(e.target.value),
+              required: true,
+              "data-cmssy-checkout-email": true
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("p", { "data-cmssy-checkout-total": true, children: formatPrice(cart.discountedTotal, cart.currency ?? "USD") }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "submit",
+            disabled: busy || !emailValid,
+            "data-cmssy-checkout-submit": true,
+            children: busy ? "Placing order\u2026" : "Place order"
+          }
+        )
+      ]
+    }
+  );
+}
+var checkoutBlock = defineBlock({
+  type: "checkout",
+  label: "Checkout",
+  category: "Commerce",
+  props: {
+    successMessage: fields.singleLine({ label: "Success message" })
+  },
+  component: CheckoutComponent
+});
 
+exports.CmssyAuthProvider = CmssyAuthProvider;
+exports.CmssyCommerceProvider = CmssyCommerceProvider;
 exports.CmssyEditableLayout = CmssyEditableLayout;
 exports.CmssyEditablePage = CmssyEditablePage;
 exports.CmssyLazyEditor = CmssyLazyEditor;
 exports.CmssyLazyLayout = CmssyLazyLayout;
+exports.cartBlock = cartBlock;
+exports.checkoutBlock = checkoutBlock;
+exports.formatPrice = formatPrice;
+exports.fractionDigits = fractionDigits;
+exports.fromMinorUnits = fromMinorUnits;
+exports.productBlock = productBlock;
+exports.useCart = useCart;
+exports.useCmssyUser = useCmssyUser;
 exports.useEditBridge = useEditBridge;