@sprintup-cms/sdk 1.5.1 → 1.7.0

package/CHANGELOG.md

@@ -2,6 +2,45 @@
 
 All notable changes to `@sprintup-cms/sdk` will be documented here.
 
+## [1.7.0] — 2026-03-07
+
+### Added
+- `ProductListBlock` — dynamic block that fetches products from an external API endpoint.
+  Supports configuration: `endpoint`, `title`, `subtitle`, `columns`, `showPrice`, `showRating`,
+  `limit`, `currency`. Includes loading skeleton, error state, and empty state. Normalises
+  both generic `{ id, price }` shape and iRead school product shape (`_id`, `plans[0].price`,
+  `type`, `duration`).
+- `product-list` registered in the `BUILT_IN` renderer map — external apps now render
+  product list blocks out of the box without custom configuration.
+
+## [1.6.0] — 2026-03-07
+
+### Added
+- `StructuredBlock` component: dedicated renderer for `__structured__` page type blocks.
+  Iterates nested `{ sectionName: { fieldName: value } }` content using the `pageType`
+  schema for correct field type rendering (richtext, image, boolean, url, arrays).
+- `FieldValue` helper component for consistent field-level rendering across both
+  `StructuredBlock` and `SectionBlock`.
+- `__structured__` registered in the `BUILT_IN` renderer map — structured page type
+  instances now render correctly on external apps without any custom configuration.
+
+### Fixed
+- `SectionBlock` fallback no longer intercepts `__structured__` blocks.
+- Arrays and nested objects in block data no longer render as `[object Object]`.
+
+## [1.5.2] — 2026-03-07
+
+### Fixed
+- `CMSBlocks` now correctly renders `__structured__` blocks (structured page types).
+  Previously the block fell through to `SectionBlock`'s generic fallback, printing raw
+  `sectionName.fieldName: value` text. Now a dedicated `StructuredBlock` component
+  iterates the nested `{ sectionName: { fieldName: value } }` shape returned by the API,
+  using the `pageType` schema for field types when available, and rendering richtext
+  values via `dangerouslySetInnerHTML`, images as `<img>`, and arrays as comma-separated
+  text — instead of `[object Object]` or raw key dumps.
+- `__structured__` registered in the `BUILT_IN` renderer map so custom renderers and the
+  `SectionBlock` fallback no longer intercept structured page content.
+
 ## [1.5.1] — 2026-03-07
 
 ### Fixed

package/dist/next/index.cjs

@@ -460,52 +460,173 @@ function VideoBlock({ block }) {
   const embedUrl = url.replace("youtube.com/watch?v=", "youtube.com/embed/").replace("youtu.be/", "youtube.com/embed/").replace("vimeo.com/", "player.vimeo.com/video/");
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-video rounded-lg overflow-hidden border bg-muted", children: /* @__PURE__ */ jsxRuntime.jsx("iframe", { src: embedUrl, allow: "autoplay; fullscreen", allowFullScreen: true, className: "w-full h-full", title: d.title || "Video" }) });
 }
+function normaliseProduct(raw) {
+  if (raw.id !== void 0 && raw.price !== void 0) return raw;
+  const firstPlan = Array.isArray(raw.plans) && raw.plans.length > 0 ? raw.plans[0] : null;
+  return {
+    id: raw._id ?? raw.id ?? String(Math.random()),
+    name: raw.name ?? "Unnamed",
+    description: raw.description,
+    price: firstPlan?.price ?? 0,
+    image: raw.image ?? raw.thumbnail ?? void 0,
+    rating: raw.rating ?? void 0,
+    category: raw.type ? raw.type.replace(/-/g, " ").replace(/\b\w/g, (c) => c.toUpperCase()) : void 0,
+    badge: raw.duration ? `${raw.duration} months` : void 0
+  };
+}
+function ProductListBlock({ block }) {
+  const d = getData(block);
+  const { title, subtitle, endpoint, columns = 3, showPrice = true, showRating = true, limit = 6, currency = "$" } = d;
+  const cols = parseInt(String(columns), 10);
+  const [state, setState] = React__default.default.useState({
+    data: null,
+    loading: true,
+    error: null
+  });
+  React__default.default.useEffect(() => {
+    if (!endpoint) {
+      setState({ data: [], loading: false, error: null });
+      return;
+    }
+    let cancelled = false;
+    async function fetchData() {
+      try {
+        const res = await fetch(endpoint);
+        if (!res.ok) throw new Error(`Failed to fetch: ${res.status}`);
+        const json = await res.json();
+        if (cancelled) return;
+        const items = Array.isArray(json) ? json : json.data ?? json.products ?? [];
+        setState({ data: items.map(normaliseProduct), loading: false, error: null });
+      } catch (err) {
+        if (!cancelled) setState({ data: null, loading: false, error: err.message });
+      }
+    }
+    fetchData();
+    return () => {
+      cancelled = true;
+    };
+  }, [endpoint]);
+  const gridCols = cols === 2 ? "sm:grid-cols-2" : cols === 4 ? "sm:grid-cols-2 lg:grid-cols-4" : "sm:grid-cols-2 lg:grid-cols-3";
+  if (state.loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-6xl mx-auto px-4", children: [
+      (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-8", children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-8 w-64 bg-muted animate-pulse rounded mx-auto" }),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-96 max-w-full bg-muted/60 animate-pulse rounded mx-auto mt-2" })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid gap-6 grid-cols-1 ${gridCols}`, children: Array.from({ length: Math.min(limit, 6) }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border rounded-lg overflow-hidden", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "aspect-square bg-muted animate-pulse" }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-20 bg-muted/60 animate-pulse rounded" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-5 w-full bg-muted animate-pulse rounded" }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-6 w-16 bg-muted animate-pulse rounded" })
+        ] })
+      ] }, i)) })
+    ] }) });
+  }
+  if (state.error) {
+    return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-12", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-6xl mx-auto px-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center py-12 border border-dashed border-border rounded-lg bg-muted/20", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm font-medium text-muted-foreground", children: "Unable to load products" }),
+      /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground/70 mt-1", children: state.error })
+    ] }) }) });
+  }
+  const products = (state.data || []).slice(0, limit);
+  if (products.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-12", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "max-w-6xl mx-auto px-4", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-center py-12 border border-dashed border-border rounded-lg bg-muted/10", children: /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-sm text-muted-foreground", children: "No products available" }) }) }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-12", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-6xl mx-auto px-4", children: [
+    (title || subtitle) && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "text-center mb-8", children: [
+      title && /* @__PURE__ */ jsxRuntime.jsx("h2", { className: "text-2xl md:text-3xl font-semibold tracking-tight", children: title }),
+      subtitle && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground mt-2", children: subtitle })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: `grid gap-6 grid-cols-1 ${gridCols}`, children: products.map((product) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "border rounded-lg overflow-hidden group hover:shadow-md transition-shadow", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "aspect-square relative bg-muted overflow-hidden", children: [
+        product.image ? /* @__PURE__ */ jsxRuntime.jsx("img", { src: product.image, alt: product.name, className: "w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full h-full flex items-center justify-center text-muted-foreground/30", children: /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-12 h-12", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M16 11V7a4 4 0 00-8 0v4M5 9h14l1 12H4L5 9z" }) }) }),
+        product.badge && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute top-3 left-3 text-xs px-2 py-1 rounded bg-primary text-primary-foreground", children: product.badge })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 space-y-2", children: [
+        product.category && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs text-muted-foreground uppercase tracking-wide", children: product.category }),
+        /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-medium text-sm line-clamp-2", children: product.name }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between pt-1", children: [
+          showPrice && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-semibold", children: [
+            currency,
+            typeof product.price === "number" ? product.price.toFixed(2) : product.price
+          ] }),
+          showRating && product.rating && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1 text-sm text-muted-foreground", children: [
+            /* @__PURE__ */ jsxRuntime.jsx("svg", { className: "w-3.5 h-3.5 fill-yellow-400 text-yellow-400", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z" }) }),
+            /* @__PURE__ */ jsxRuntime.jsx("span", { children: product.rating })
+          ] })
+        ] })
+      ] })
+    ] }, product.id)) })
+  ] }) });
+}
+function FieldValue({ value, fieldType }) {
+  if (value === null || value === void 0 || value === "") return null;
+  const isHtml = (v) => typeof v === "string" && /<[a-z][\s\S]*>/i.test(v);
+  if (fieldType === "richtext" || isHtml(value)) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        className: "prose prose-neutral dark:prose-invert max-w-none",
+        dangerouslySetInnerHTML: { __html: String(value) }
+      }
+    );
+  }
+  if (fieldType === "image") {
+    return /* @__PURE__ */ jsxRuntime.jsx("img", { src: String(value), alt: "", className: "rounded-lg border max-h-96 object-cover w-full" });
+  }
+  if (fieldType === "boolean") {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: value ? "Yes" : "No" });
+  }
+  if (fieldType === "url") {
+    return /* @__PURE__ */ jsxRuntime.jsx("a", { href: String(value), className: "text-primary underline underline-offset-2 break-all", children: String(value) });
+  }
+  if (Array.isArray(value)) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: value.join(", ") });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: String(value) });
+}
+function StructuredBlock({ block, pageType }) {
+  const nested = block.content ?? block.data ?? {};
+  if (pageType?.sections?.length) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-8", children: pageType.sections.map((section) => {
+      const sectionData = nested[section.name] ?? {};
+      const filledFields = section.fields.filter((f) => {
+        const v = sectionData[f.name];
+        return v !== void 0 && v !== null && v !== "";
+      });
+      if (filledFields.length === 0) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "space-y-4", children: filledFields.map((field) => {
+        const value = sectionData[field.name];
+        if (value === void 0 || value === null || value === "") return null;
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(FieldValue, { value, fieldType: field.fieldType }) }, field.id);
+      }) }, section.id);
+    }) });
+  }
+  const isHtml = (v) => typeof v === "string" && /<[a-z][\s\S]*>/i.test(v);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-8", children: Object.entries(nested).map(([sectionName, fields]) => {
+    if (!fields || typeof fields !== "object" || Array.isArray(fields)) return null;
+    const entries = Object.entries(fields).filter(([, v]) => v !== "" && v !== null && v !== void 0);
+    if (entries.length === 0) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "space-y-4", children: entries.map(([fieldName, value]) => {
+      if (typeof value === "object" && !Array.isArray(value)) return null;
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { children: isHtml(value) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose prose-neutral dark:prose-invert max-w-none", dangerouslySetInnerHTML: { __html: String(value) } }) : Array.isArray(value) ? /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: value.join(", ") }) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: String(value) }) }, fieldName);
+    }) }, sectionName);
+  }) });
+}
 function SectionBlock({ block, pageType }) {
   const d = getData(block);
   const section = pageType?.sections.find((s) => s.name === block.type);
   if (section) {
-    const filledFields = section.fields.filter((f) => d[f.name] !== void 0 && d[f.name] !== "" && d[f.name] !== null);
+    const filledFields = section.fields.filter((f) => {
+      const v = d[f.name];
+      return v !== void 0 && v !== null && v !== "";
+    });
     if (filledFields.length === 0) return null;
-    return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "py-4 space-y-4 border-b border-border last:border-0", children: filledFields.map((field) => {
+    return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "space-y-4", children: filledFields.map((field) => {
       const value = d[field.name];
-      if (!value && value !== 0 && value !== false) return null;
-      if (field.fieldType === "richtext") {
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
-          /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-xs font-semibold text-muted-foreground uppercase tracking-wide mb-1", children: field.label }),
-          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose prose-neutral dark:prose-invert max-w-none text-sm", dangerouslySetInnerHTML: { __html: String(value) } })
-        ] }, field.id);
-      }
-      if (field.fieldType === "image") {
-        return /* @__PURE__ */ jsxRuntime.jsx("figure", { children: /* @__PURE__ */ jsxRuntime.jsx("img", { src: String(value), alt: field.label, className: "rounded-lg border max-h-96 object-cover" }) }, field.id);
-      }
-      if (field.fieldType === "boolean") {
-        return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
-            field.label,
-            ":"
-          ] }),
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: value ? "Yes" : "No" })
-        ] }, field.id);
-      }
-      if (field.fieldType === "url") {
-        return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm", children: [
-          /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
-            field.label,
-            ":"
-          ] }),
-          " ",
-          /* @__PURE__ */ jsxRuntime.jsx("a", { href: String(value), className: "text-primary underline underline-offset-2 break-all", children: String(value) })
-        ] }, field.id);
-      }
-      return /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium", children: [
-          field.label,
-          ":"
-        ] }),
-        " ",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: String(value) })
-      ] }, field.id);
+      if (value === void 0 || value === null || value === "") return null;
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(FieldValue, { value, fieldType: field.fieldType }) }, field.id);
     }) });
   }
   const isHtml = (v) => typeof v === "string" && /<[a-z][\s\S]*>/i.test(v);
@@ -513,21 +634,13 @@ function SectionBlock({ block, pageType }) {
     ([, v]) => v !== "" && v !== null && v !== void 0 && typeof v !== "object" && !Array.isArray(v)
   );
   if (entries.length === 0) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("section", { className: "py-4 space-y-2 border-b border-border last:border-0", children: [
-    block.label && /* @__PURE__ */ jsxRuntime.jsx("h3", { className: "font-semibold text-sm text-muted-foreground uppercase tracking-wide", children: block.label }),
-    entries.map(
-      ([key, value]) => isHtml(value) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose prose-neutral dark:prose-invert max-w-none text-sm", dangerouslySetInnerHTML: { __html: String(value) } }, key) : /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-sm", children: [
-        /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-medium capitalize", children: [
-          key.replace(/_/g, " "),
-          ":"
-        ] }),
-        " ",
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-muted-foreground", children: String(value) })
-      ] }, key)
-    )
-  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx("section", { className: "space-y-2", children: entries.map(
+    ([key, value]) => isHtml(value) ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "prose prose-neutral dark:prose-invert max-w-none", dangerouslySetInnerHTML: { __html: String(value) } }, key) : /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-muted-foreground", children: String(value) }, key)
+  ) });
 }
 var BUILT_IN = {
+  // Structured page type — content is nested { sectionName: { fieldName: value } }
+  "__structured__": (b, pt) => /* @__PURE__ */ jsxRuntime.jsx(StructuredBlock, { block: b, pageType: pt }),
   heading: (b) => /* @__PURE__ */ jsxRuntime.jsx(HeadingBlock, { block: b }),
   text: (b) => /* @__PURE__ */ jsxRuntime.jsx(TextBlock, { block: b }),
   richtext: (b) => /* @__PURE__ */ jsxRuntime.jsx(RichTextBlock, { block: b }),
@@ -542,7 +655,8 @@ var BUILT_IN = {
   alert: (b) => /* @__PURE__ */ jsxRuntime.jsx(AlertBlock, { block: b }),
   divider: () => /* @__PURE__ */ jsxRuntime.jsx(DividerBlock, {}),
   spacer: (b) => /* @__PURE__ */ jsxRuntime.jsx(SpacerBlock, { block: b }),
-  video: (b) => /* @__PURE__ */ jsxRuntime.jsx(VideoBlock, { block: b })
+  video: (b) => /* @__PURE__ */ jsxRuntime.jsx(VideoBlock, { block: b }),
+  "product-list": (b) => /* @__PURE__ */ jsxRuntime.jsx(ProductListBlock, { block: b })
 };
 function CMSBlocks({ blocks, pageType, className = "", custom = {} }) {
   if (!blocks?.length) return null;