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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pantheon-systems/create-p1-starter-kit",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "description": "Scaffold a new P1 starter project",
   "type": "module",
   "bin": {
@@ -37,10 +37,11 @@
     "eslint": "^9.27.0",
     "isomorphic-dompurify": "^3.18.0",
     "react": "^19.2.5",
+    "react-dom": "^19.2.5",
     "vitest": "^4.1.5",
-    "@pantheon-systems/css-client": "0.13.0",
+    "@pantheon-systems/css-client": "0.14.0",
     "@pantheon-systems/eslint-config": "0.1.0",
-    "@pantheon-systems/puck-css": "0.13.0"
+    "@pantheon-systems/puck-css": "0.14.0"
   },
   "dependencies": {
     "@clack/prompts": "^1.5.1",
@@ -53,6 +54,7 @@
     "clean": "rm -rf template node_modules/.vite",
     "lint": "eslint index.js lib scripts",
     "lint:fix": "eslint index.js lib scripts --fix",
+    "lint:template": "node scripts/lint-template.js",
     "test": "vitest run",
     "test:scaffold": "node scripts/validate-scaffold.js"
   }

package/template/__tests__/chatbot-flag-context.test.ts

@@ -0,0 +1,55 @@
+import { describe, expect, it } from "vitest";
+
+import { buildFlagContext } from "../lib/chatbot-flag/flag-context";
+
+const user = (over: Partial<{ id: string; name: string; email: string }> = {}) => ({
+  id: "00000000-0000-4000-8000-000000000001",
+  name: "Test User",
+  ...over,
+});
+
+describe("buildFlagContext", () => {
+  it("keys on the email so individual targets entered as emails match", () => {
+    expect(buildFlagContext(user({ email: "editor@example.com" })).key).toBe(
+      "editor@example.com",
+    );
+  });
+
+  it("lowercases the key, since target matching is case-sensitive", () => {
+    expect(buildFlagContext(user({ email: "Editor@Example.com" })).key).toBe(
+      "editor@example.com",
+    );
+  });
+
+  it("keeps the email as a targeting attribute so rules on it still work", () => {
+    expect(buildFlagContext(user({ email: "editor@example.com" })).email).toBe(
+      "editor@example.com",
+    );
+  });
+
+  it("falls back to the user id when the user has no email", () => {
+    const context = buildFlagContext(user());
+    expect(context.key).toBe("00000000-0000-4000-8000-000000000001");
+    expect(context.anonymous).toBeUndefined();
+    expect(context.email).toBeUndefined();
+  });
+
+  // The id is opaque and matched verbatim, so normalizing it would move the target.
+  it("leaves the user id untouched when falling back to it", () => {
+    expect(buildFlagContext(user({ id: "00000000-0000-4000-8000-ABCDEF000002" })).key).toBe("00000000-0000-4000-8000-ABCDEF000002");
+  });
+
+  it("treats a blank email as absent rather than keying on an empty string", () => {
+    expect(buildFlagContext(user({ email: "   " })).key).toBe(
+      "00000000-0000-4000-8000-000000000001",
+    );
+  });
+
+  it("marks the pre-auth context anonymous", () => {
+    expect(buildFlagContext(null)).toEqual({
+      kind: "user",
+      key: "anonymous",
+      anonymous: true,
+    });
+  });
+});

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");
+  });
+});