@pantheon-systems/create-p1-starter-kit 0.12.0 → 0.14.0

package/template/__tests__/data-list-block-sub-components.test.tsx

@@ -0,0 +1,246 @@
+import { describe, expect, it } from "vitest";
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import type { ResolvedItem, LayoutProps } from "@pantheon-systems/puck-css/fields";
+
+const ITEMS: ResolvedItem[] = [
+  {
+    title: "Alpha",
+    subtitle: "First item",
+    teaser: "A brief preview of the first item",
+    image: "https://example.com/alpha.jpg",
+    icon: "star",
+    _raw: { name: "Alpha" },
+  },
+  {
+    title: "Beta",
+    subtitle: "Second item",
+    teaser: "A brief preview of the second item",
+    image: "https://example.com/beta.jpg",
+    icon: "circle",
+    _raw: { name: "Beta" },
+  },
+  {
+    title: "Gamma",
+    subtitle: "Third item",
+    teaser: "",
+    image: "",
+    icon: "",
+    _raw: { name: "Gamma" },
+  },
+];
+
+const BASE_PROPS: LayoutProps = {
+  items: ITEMS,
+  showTitle: true,
+  showSubtitle: true,
+  showTeaser: true,
+  showImage: true,
+  showIcon: true,
+};
+
+describe("Cards sub-component", () => {
+  it("renders all item titles", async () => {
+    const { Cards } = await import("@pantheon-systems/puck-css/fields");
+    const html = renderToStaticMarkup(
+      <Cards {...BASE_PROPS} columns={3} imagePosition="top" />,
+    );
+    expect(html).toContain("Alpha");
+    expect(html).toContain("Beta");
+    expect(html).toContain("Gamma");
+  });
+
+  it("hides titles when showTitle is false", async () => {
+    const { Cards } = await import("@pantheon-systems/puck-css/fields");
+    const html = renderToStaticMarkup(
+      <Cards
+        {...BASE_PROPS}
+        showTitle={false}
+        showImage={false}
+        columns={3}
+        imagePosition="top"
+      />,
+    );
+    expect(html).not.toContain("Alpha");
+    expect(html).not.toContain("Beta");
+  });
+
+  it("hides images when showImage is false", async () => {
+    const { Cards } = await import("@pantheon-systems/puck-css/fields");
+    const html = renderToStaticMarkup(
+      <Cards
+        {...BASE_PROPS}
+        showImage={false}
+        columns={3}
+        imagePosition="top"
+      />,
+    );
+    expect(html).not.toContain("<img");
+  });
+
+  it("renders images when showImage is true and image exists", async () => {
+    const { Cards } = await import("@pantheon-systems/puck-css/fields");
+    const html = renderToStaticMarkup(
+      <Cards {...BASE_PROPS} columns={3} imagePosition="top" />,
+    );
+    expect(html).toContain("alpha.jpg");
+    expect(html).toContain("beta.jpg");
+  });
+
+  it("hides subtitles when showSubtitle is false", async () => {
+    const { Cards } = await import("@pantheon-systems/puck-css/fields");
+    const html = renderToStaticMarkup(
+      <Cards
+        {...BASE_PROPS}
+        showSubtitle={false}
+        columns={3}
+        imagePosition="top"
+      />,
+    );
+    expect(html).not.toContain("First item");
+  });
+
+  it("hides teasers when showTeaser is false", async () => {
+    const { Cards } = await import("@pantheon-systems/puck-css/fields");
+    const html = renderToStaticMarkup(
+      <Cards
+        {...BASE_PROPS}
+        showTeaser={false}
+        columns={3}
+        imagePosition="top"
+      />,
+    );
+    expect(html).not.toContain("A brief preview of the first item");
+  });
+});
+
+describe("Rows sub-component", () => {
+  it("renders all item titles", async () => {
+    const { Rows } = await import("@pantheon-systems/puck-css/fields");
+    const html = renderToStaticMarkup(
+      <Rows {...BASE_PROPS} rowDensity="comfortable" imagePosition="left" />,
+    );
+    expect(html).toContain("Alpha");
+    expect(html).toContain("Beta");
+    expect(html).toContain("Gamma");
+  });
+
+  it("hides titles when showTitle is false", async () => {
+    const { Rows } = await import("@pantheon-systems/puck-css/fields");
+    const html = renderToStaticMarkup(
+      <Rows
+        {...BASE_PROPS}
+        showTitle={false}
+        rowDensity="comfortable"
+        imagePosition="none"
+      />,
+    );
+    expect(html).not.toContain("Alpha");
+  });
+
+  it("hides images when imagePosition is none", async () => {
+    const { Rows } = await import("@pantheon-systems/puck-css/fields");
+    const html = renderToStaticMarkup(
+      <Rows
+        {...BASE_PROPS}
+        rowDensity="comfortable"
+        imagePosition="none"
+      />,
+    );
+    expect(html).not.toContain("<img");
+  });
+});
+
+describe("Listing sub-component", () => {
+  it("renders all item titles", async () => {
+    const { Listing } = await import("@pantheon-systems/puck-css/fields");
+    const html = renderToStaticMarkup(
+      <Listing
+        {...BASE_PROPS}
+        imagePosition="left"
+        listingWidth="wide"
+      />,
+    );
+    expect(html).toContain("Alpha");
+    expect(html).toContain("Beta");
+    expect(html).toContain("Gamma");
+  });
+
+  it("hides titles when showTitle is false", async () => {
+    const { Listing } = await import("@pantheon-systems/puck-css/fields");
+    const html = renderToStaticMarkup(
+      <Listing
+        {...BASE_PROPS}
+        showTitle={false}
+        showImage={false}
+        imagePosition="left"
+        listingWidth="wide"
+      />,
+    );
+    expect(html).not.toContain("Alpha");
+  });
+
+  it("hides images when showImage is false", async () => {
+    const { Listing } = await import("@pantheon-systems/puck-css/fields");
+    const html = renderToStaticMarkup(
+      <Listing
+        {...BASE_PROPS}
+        showImage={false}
+        imagePosition="left"
+        listingWidth="wide"
+      />,
+    );
+    expect(html).not.toContain("<img");
+  });
+
+  it("renders teasers when showTeaser is true", async () => {
+    const { Listing } = await import("@pantheon-systems/puck-css/fields");
+    const html = renderToStaticMarkup(
+      <Listing
+        {...BASE_PROPS}
+        imagePosition="left"
+        listingWidth="wide"
+      />,
+    );
+    expect(html).toContain("A brief preview of the first item");
+  });
+});
+
+describe("image loading", () => {
+  it("lazy-loads item images in every layout by default", async () => {
+    const { Cards, Rows, Listing } = await import(
+      "@pantheon-systems/puck-css/fields"
+    );
+    const markups = [
+      renderToStaticMarkup(
+        <Cards {...BASE_PROPS} columns={3} imagePosition="top" />,
+      ),
+      renderToStaticMarkup(
+        <Rows {...BASE_PROPS} rowDensity="comfortable" imagePosition="left" />,
+      ),
+      renderToStaticMarkup(
+        <Listing {...BASE_PROPS} imagePosition="left" listingWidth="wide" />,
+      ),
+    ];
+    for (const html of markups) {
+      expect(html).toContain("<img");
+      expect(html).toContain('loading="lazy"');
+      expect(html).toContain('decoding="async"');
+      expect(html).not.toContain('loading="eager"');
+    }
+  });
+
+  it("honors an eager override", async () => {
+    const { Cards } = await import("@pantheon-systems/puck-css/fields");
+    const html = renderToStaticMarkup(
+      <Cards
+        {...BASE_PROPS}
+        imageLoading="eager"
+        columns={3}
+        imagePosition="top"
+      />,
+    );
+    expect(html).toContain('loading="eager"');
+    expect(html).not.toContain('loading="lazy"');
+  });
+});

package/template/__tests__/data-list-block-utils.test.ts

@@ -0,0 +1,84 @@
+import { describe, expect, it } from "vitest";
+
+describe("data-list-block utils", () => {
+  describe("getByDotPath", () => {
+    it("traverses nested objects", async () => {
+      const { getByDotPath } = await import(
+        "@pantheon-systems/puck-css/fields"
+      );
+      expect(getByDotPath({ a: { b: { c: 42 } } }, "a.b.c")).toBe(42);
+    });
+
+    it("returns undefined for missing paths", async () => {
+      const { getByDotPath } = await import(
+        "@pantheon-systems/puck-css/fields"
+      );
+      expect(getByDotPath({ a: 1 }, "b")).toBeUndefined();
+    });
+
+    it("rejects unsafe keys", async () => {
+      const { getByDotPath } = await import(
+        "@pantheon-systems/puck-css/fields"
+      );
+      expect(getByDotPath({}, "__proto__")).toBeUndefined();
+      expect(getByDotPath({}, "constructor")).toBeUndefined();
+      expect(getByDotPath({}, "prototype")).toBeUndefined();
+    });
+  });
+
+  describe("viewExtractKey", () => {
+    it("extracts the key from a template token", async () => {
+      const { viewExtractKey } = await import(
+        "@pantheon-systems/puck-css/fields"
+      );
+      expect(viewExtractKey("{{ item.title }}")).toBe("title");
+    });
+
+    it("returns empty string for non-template values", async () => {
+      const { viewExtractKey } = await import(
+        "@pantheon-systems/puck-css/fields"
+      );
+      expect(viewExtractKey("plain text")).toBe("");
+      expect(viewExtractKey("")).toBe("");
+    });
+  });
+
+  describe("resolveField", () => {
+    it("resolves a template value against an item", async () => {
+      const { resolveField } = await import(
+        "@pantheon-systems/puck-css/fields"
+      );
+      const item = { name: "Luke" };
+      expect(resolveField(item, "{{ item.name }}")).toBe("Luke");
+    });
+
+    it("returns empty string for missing fields", async () => {
+      const { resolveField } = await import(
+        "@pantheon-systems/puck-css/fields"
+      );
+      expect(resolveField({}, "{{ item.missing }}")).toBe("");
+    });
+  });
+
+  describe("resolveItemFields", () => {
+    it("resolves all field mappings for an item", async () => {
+      const { resolveItemFields } = await import(
+        "@pantheon-systems/puck-css/fields"
+      );
+      const item = { name: "Luke", desc: "Jedi", img: "/luke.png" };
+      const result = resolveItemFields(item, {
+        titleField: "{{ item.name }}",
+        subtitleField: "",
+        teaserField: "{{ item.desc }}",
+        imageField: "{{ item.img }}",
+        iconField: "",
+      });
+      expect(result.title).toBe("Luke");
+      expect(result.subtitle).toBe("");
+      expect(result.teaser).toBe("Jedi");
+      expect(result.image).toBe("/luke.png");
+      expect(result.icon).toBe("");
+      expect(result._raw).toBe(item);
+    });
+  });
+});

package/template/__tests__/data-list-block.test.ts

@@ -0,0 +1,198 @@
+import { describe, expect, it } from "vitest";
+
+const fieldsOf = (block: { fields: Record<string, unknown> }) =>
+  block.fields as Record<string, { type?: string }>;
+
+describe("dataListBlock", () => {
+  it("has label 'List'", async () => {
+    const { dataListBlock } = await import(
+      "../components/puck/data-list-block"
+    );
+    expect(dataListBlock.label).toBe("List");
+  });
+
+  it("has a custom datasourceId field", async () => {
+    const { dataListBlock } = await import(
+      "../components/puck/data-list-block"
+    );
+    expect(fieldsOf(dataListBlock).datasourceId.type).toBe("custom");
+  });
+
+  it("has a custom field for viewMode", async () => {
+    const { dataListBlock } = await import(
+      "../components/puck/data-list-block"
+    );
+    expect(fieldsOf(dataListBlock).viewMode.type).toBe("custom");
+  });
+
+  it("has custom schema-select fields for item field mappings", async () => {
+    const { dataListBlock } = await import(
+      "../components/puck/data-list-block"
+    );
+    expect(fieldsOf(dataListBlock).titleField.type).toBe("custom");
+    expect(fieldsOf(dataListBlock).subtitleField.type).toBe("custom");
+    expect(fieldsOf(dataListBlock).teaserField.type).toBe("custom");
+    expect(fieldsOf(dataListBlock).imageField.type).toBe("custom");
+    expect(fieldsOf(dataListBlock).iconField.type).toBe("custom");
+  });
+
+  it("does not expose separate radio fields for visibility toggles (inline in schema-select)", async () => {
+    const { dataListBlock } = await import(
+      "../components/puck/data-list-block"
+    );
+    const fields = dataListBlock.fields as Record<string, unknown>;
+    expect(fields.showTitle).toBeUndefined();
+    expect(fields.showSubtitle).toBeUndefined();
+    expect(fields.showTeaser).toBeUndefined();
+    expect(fields.showImage).toBeUndefined();
+    expect(fields.showIcon).toBeUndefined();
+  });
+
+  it("has a unified imagePosition custom field", async () => {
+    const { dataListBlock } = await import(
+      "../components/puck/data-list-block"
+    );
+    expect(fieldsOf(dataListBlock).imagePosition.type).toBe("custom");
+  });
+
+  it("does not expose per-view image position fields", async () => {
+    const { dataListBlock } = await import(
+      "../components/puck/data-list-block"
+    );
+    const fields = dataListBlock.fields as Record<string, unknown>;
+    expect(fields.cardImagePosition).toBeUndefined();
+    expect(fields.rowShowImage).toBeUndefined();
+    expect(fields.listingImagePosition).toBeUndefined();
+  });
+
+  it("has layout option fields for cards view", async () => {
+    const { dataListBlock } = await import(
+      "../components/puck/data-list-block"
+    );
+    expect(fieldsOf(dataListBlock).columns.type).toBe("custom");
+  });
+
+  it("has layout option fields for rows view", async () => {
+    const { dataListBlock } = await import(
+      "../components/puck/data-list-block"
+    );
+    expect(fieldsOf(dataListBlock).rowDensity.type).toBe("custom");
+  });
+
+  it("has layout option fields for listing view", async () => {
+    const { dataListBlock } = await import(
+      "../components/puck/data-list-block"
+    );
+    expect(fieldsOf(dataListBlock).listingWidth.type).toBe("custom");
+  });
+
+  it("has list-level fields", async () => {
+    const { dataListBlock } = await import(
+      "../components/puck/data-list-block"
+    );
+    expect(fieldsOf(dataListBlock).heading.type).toBe("custom");
+    expect(fieldsOf(dataListBlock).groupBy.type).toBe("custom");
+    expect(fieldsOf(dataListBlock).sortBy.type).toBe("custom");
+    expect(fieldsOf(dataListBlock).sortDir.type).toBe("custom");
+    expect(fieldsOf(dataListBlock).maxItems.type).toBe("custom");
+  });
+
+  it("does not have dataSourceType or cmsTemplateId fields", async () => {
+    const { dataListBlock } = await import(
+      "../components/puck/data-list-block"
+    );
+    expect(dataListBlock.fields).not.toHaveProperty("dataSourceType");
+    expect(dataListBlock.fields).not.toHaveProperty("cmsTemplateId");
+  });
+
+  it("has sensible defaultProps", async () => {
+    const { dataListBlock } = await import(
+      "../components/puck/data-list-block"
+    );
+    const d = dataListBlock.defaultProps;
+    expect(d.datasourceId).toBe("");
+    expect(d.viewMode).toBe("grid");
+    expect(d.showTitle).toBe(true);
+    expect(d.showSubtitle).toBe(true);
+    expect(d.showTeaser).toBe(false);
+    expect(d.showImage).toBe(true);
+    expect(d.showIcon).toBe(false);
+    expect(d.columns).toBe(3);
+    expect(d.imagePosition).toBe("top");
+    expect(d.rowDensity).toBe("comfortable");
+    expect(d.listingWidth).toBe("wide");
+    expect(d.heading).toBe("");
+    expect(d.groupBy).toBe("");
+    expect(d.sortBy).toBe("");
+    expect(d.sortDir).toBe("asc");
+    expect(d.maxItems).toBe(0);
+    expect(d.items).toBe("");
+    expect(d).not.toHaveProperty("dataSourceType");
+    expect(d).not.toHaveProperty("cmsTemplateId");
+    expect(d).not.toHaveProperty("titleField");
+    expect(d).not.toHaveProperty("imageField");
+  });
+
+  it("resolveData sets items token when datasource is selected", async () => {
+    const { dataListBlock } = await import(
+      "../components/puck/data-list-block"
+    );
+    const result = await dataListBlock.resolveData(
+      {
+        props: {
+          ...dataListBlock.defaultProps,
+          datasourceId: "swapi_list",
+        },
+      },
+      { changed: { datasourceId: true } },
+    );
+    expect(result.props.items).toBe("{{ swapi_list.items }}");
+  });
+
+  it("resolveData sets empty items when no datasource selected", async () => {
+    const { dataListBlock } = await import(
+      "../components/puck/data-list-block"
+    );
+    const result = await dataListBlock.resolveData(
+      {
+        props: {
+          ...dataListBlock.defaultProps,
+          datasourceId: "",
+        },
+      },
+      { changed: { datasourceId: true } },
+    );
+    expect(result.props.items).toBe("");
+  });
+
+  it("resolveData skips when datasourceId has not changed", async () => {
+    const { dataListBlock } = await import(
+      "../components/puck/data-list-block"
+    );
+    const result = await dataListBlock.resolveData(
+      {
+        props: {
+          ...dataListBlock.defaultProps,
+          datasourceId: "swapi_list",
+        },
+      },
+      { changed: { viewMode: true } },
+    );
+    expect(result.props).toEqual({});
+  });
+
+  it("exposes an imageLoading field defaulting to lazy", async () => {
+    const { dataListBlock } = await import(
+      "../components/puck/data-list-block"
+    );
+    expect(fieldsOf(dataListBlock).imageLoading.type).toBe("custom");
+    expect(dataListBlock.defaultProps.imageLoading).toBe("lazy");
+  });
+
+  it("provides a render function", async () => {
+    const { dataListBlock } = await import(
+      "../components/puck/data-list-block"
+    );
+    expect(typeof dataListBlock.render).toBe("function");
+  });
+});

package/template/__tests__/published-page-routes.test.ts

@@ -0,0 +1,86 @@
+/**
+ * The render pipeline itself is tested in the SDK (create-published-page.test.tsx).
+ * What matters here is the wiring: that both routes are shims over the factory,
+ * and that the segment config Next.js statically analyzes survives in the files.
+ */
+
+import { readFileSync } from "fs";
+import { resolve, dirname } from "path";
+import { fileURLToPath } from "url";
+import { describe, expect, it, vi } from "vitest";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const starterDir = resolve(__dirname, "..");
+
+const factory = vi.hoisted(() => ({
+  Page: () => null,
+  HomePage: () => null,
+  generateMetadata: vi.fn(),
+  generateHomeMetadata: vi.fn(),
+  generateStaticParams: vi.fn(),
+}));
+
+vi.mock("@pantheon-systems/p1-next-sdk/server", () => ({
+  createPublishedPage: vi.fn(() => factory),
+  loadRouteTemplateKeys: vi.fn(),
+}));
+
+// The routes reach these through app/published-pages.tsx. Mocked so this stays
+// a wiring test: importing the real modules drags in the whole datasource graph,
+// which is not installed when the built template's copy of this test runs
+// inside the create-p1-starter-kit package.
+vi.mock("../lib/remote-datasource-fetchers", () => ({
+  REMOTE_DATASOURCE_FETCHERS: [],
+}));
+vi.mock("../lib/page-seo", () => ({ resolvePageMetadata: vi.fn() }));
+
+vi.mock("../app/[...puckPath]/client", () => ({ Client: () => null }));
+vi.mock("../components/puck/welcome-block-render", () => ({
+  WelcomeBlockRender: () => null,
+}));
+
+const routes = {
+  catchAll: "app/[...puckPath]/page.tsx",
+  home: "app/page.tsx",
+} as const;
+
+describe("published page routes are shims over the SDK factory", () => {
+  it("wires the catch-all route to the factory", async () => {
+    const route = await import("../app/[...puckPath]/page");
+    expect(route.default).toBe(factory.Page);
+    expect(route.generateMetadata).toBe(factory.generateMetadata);
+    expect(route.generateStaticParams).toBe(factory.generateStaticParams);
+  });
+
+  it("wires the home route to the factory", async () => {
+    const route = await import("../app/page");
+    expect(route.default).toBe(factory.HomePage);
+    expect(route.generateMetadata).toBe(factory.generateHomeMetadata);
+  });
+
+  // Next.js statically analyzes segment-config exports, so this value cannot be
+  // re-exported through the factory — a computed or forwarded `revalidate` goes
+  // undetected and the route silently loses its revalidation window.
+  it.each(Object.values(routes))(
+    "keeps revalidate a literal export in %s",
+    (file) => {
+      const source = readFileSync(resolve(starterDir, file), "utf-8");
+      expect(source).toMatch(/^export const revalidate = \d+;$/m);
+    },
+  );
+
+  // The pipeline is the SDK's now; a copy growing back here is the regression
+  // this guards against.
+  it.each(Object.values(routes))("leaves no pipeline logic in %s", (file) => {
+    const source = readFileSync(resolve(starterDir, file), "utf-8");
+    for (const symbol of [
+      "loadPublishedPage",
+      "loadRemoteDatasourceContext",
+      "resolveDataTemplates",
+      "isInternalPath",
+      "notFound",
+    ]) {
+      expect(source).not.toContain(symbol);
+    }
+  });
+});

package/template/__tests__/seo-metadata.test.ts

@@ -2,7 +2,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 import { buildPageMetadata } from "../lib/seo-metadata";
 
 /**
- * PCC-3407: buildPageMetadata maps the head metadata inputs (client-derived
+ * buildPageMetadata maps the head metadata inputs (client-derived
  * title/description/canonical plus the backend-supplied siteName) onto the
  * Next.js Metadata object that renders the per-page <head> tags. Next replaces
  * (not deep-merges) a page's openGraph over the layout's, so og:type and the

package/template/__tests__/styles-canvas-scope.test.ts

@@ -6,7 +6,7 @@ import { describe, expect, it } from "vitest";
 const __dirname = dirname(fileURLToPath(import.meta.url));
 const appDir = resolve(__dirname, "..");
 
-// PCC-3499 / PCC-3513: Puck's collectStyles() copies every parent
+// Puck's collectStyles() copies every parent
 // <style>/<link> element into the canvas-preview iframe verbatim (there is
 // no exclusion API), and separately its CopyHostStyles helper syncs this
 // document's <body> attributes (including `class`) onto the iframe's own