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

package/template/components/welcome-block.module.css

@@ -0,0 +1,124 @@
+/* Styling for the welcome block and the sign-in screen that shares its layout.
+   Both render inside a host site whose own body styles they must not inherit —
+   a dark-themed host would otherwise leave this dark text on a dark background —
+   so the surface sets its own background as well as its foreground. */
+
+.surface {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  min-height: 100vh;
+  padding: 4rem 2rem;
+  background: #ffffff;
+  color: #1a1a2e;
+  font-family: "Inter", system-ui, sans-serif;
+  text-align: center;
+}
+
+.inner {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  max-width: 620px;
+  margin: 0 auto;
+}
+
+.lockup {
+  display: block;
+  height: 1.75rem;
+  width: auto;
+  margin-bottom: 1.5rem;
+}
+
+.heading {
+  margin: 0 0 1rem;
+  font-size: 2.5rem;
+  font-weight: 600;
+  line-height: 1.08;
+}
+
+.description {
+  max-width: 54ch;
+  margin: 0;
+  font-size: 1rem;
+  line-height: 1.5rem;
+  color: #5a5a6e;
+}
+
+.actions {
+  display: flex;
+  justify-content: center;
+  gap: 0.75rem;
+  margin-top: 2rem;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  height: 3rem;
+  padding: 0 1.5rem;
+  border: 1px solid #1a1a2e;
+  border-radius: 9999px;
+  background: #1a1a2e;
+  color: #ffffff;
+  font-family: "Inter", system-ui, sans-serif;
+  font-size: 1.125rem;
+  font-weight: 500;
+  line-height: 1;
+  white-space: nowrap;
+  cursor: pointer;
+  transition:
+    background-color 0.2s,
+    border-color 0.2s;
+}
+
+.button:hover {
+  background: #2d2d44;
+  border-color: #2d2d44;
+}
+
+.button:focus-visible {
+  outline: 1px solid #2563eb;
+  outline-offset: 1px;
+}
+
+.button:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.buttonSecondary {
+  border-color: #d0d0d8;
+  background: #ffffff;
+  color: #1a1a2e;
+}
+
+.buttonSecondary:hover {
+  background: rgba(26, 26, 46, 0.06);
+  border-color: #d0d0d8;
+}
+
+.footnote {
+  margin-top: 3rem;
+  font-size: 0.875rem;
+  color: #5a5a6e;
+}
+
+.link {
+  color: #2563eb;
+  text-decoration: underline;
+}
+
+.error {
+  margin-top: 1rem;
+  padding: 0.5rem 0.75rem;
+  border-radius: 0.375rem;
+  background: #fef2f2;
+  color: #dc2626;
+  font-size: 0.875rem;
+}

package/template/eslint.config.js

@@ -38,6 +38,9 @@ export default tseslint.config(
   {
     files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx', '**/*.mjs'],
     plugins: { import: importPlugin },
+    // Packages alias their own source as @/… in tsconfig paths. Without this the
+    // import plugin reads those as third-party and sorts them after relative ones.
+    settings: { 'import/internal-regex': '^@/' },
     languageOptions: {
       ecmaVersion: 'latest',
       sourceType: 'module',
@@ -71,7 +74,12 @@ export default tseslint.config(
       'import/extensions': 'off',
       'import/prefer-default-export': 'off',
       'import/no-unresolved': 'off',
-      'import/order': 'warn',
+      // 'internal' is absent from the rule's default group list, so aliased
+      // imports would otherwise rank below every relative import.
+      'import/order': [
+        'warn',
+        { groups: ['builtin', 'external', 'internal', 'parent', 'sibling', 'index'] },
+      ],
       'import/no-extraneous-dependencies': 'warn',
 
       // General ESLint rules

package/template/lib/chatbot-flag/flag-context.ts

@@ -0,0 +1,32 @@
+import type { AuthUser } from "@pantheon-systems/puck-css";
+
+export interface FlagContext {
+  kind: "user";
+  key: string;
+  email?: string;
+  anonymous?: boolean;
+}
+
+/**
+ * Build the LaunchDarkly evaluation context for the signed-in user.
+ *
+ * Keyed on the lowercased email because LaunchDarkly matches individual targets on
+ * the key alone, and the rest of P1 identifies people to LaunchDarkly the same way.
+ * Keying on anything else makes an email entered in the targeting UI match nothing,
+ * with no error to say so.
+ *
+ * Falls back to the user id when email is absent, which AuthUser allows, so those
+ * users stay individually targetable instead of sharing the anonymous context.
+ */
+export function buildFlagContext(user: AuthUser | null): FlagContext {
+  if (!user) {
+    return { kind: "user", key: "anonymous", anonymous: true };
+  }
+
+  const email = user.email?.trim();
+  return {
+    kind: "user",
+    key: email ? email.toLowerCase() : user.id,
+    ...(email && { email }),
+  };
+}

package/template/package.json

@@ -15,12 +15,12 @@
   },
   "dependencies": {
     "@pantheon-systems/cpub-react-sdk": "^5.2.1",
-    "@pantheon-systems/css-client": "^0.13.0",
+    "@pantheon-systems/css-client": "^0.14.0",
     "@pantheon-systems/p1-ai-chat": "^0.6.0",
     "@pantheon-systems/p1-media": "^0.4.5",
-    "@pantheon-systems/p1-next-sdk": "^0.13.0",
+    "@pantheon-systems/p1-next-sdk": "^0.14.0",
     "@pantheon-systems/pds-toolkit-react": "2.0.0-alpha.66",
-    "@pantheon-systems/puck-css": "^0.13.0",
+    "@pantheon-systems/puck-css": "^0.14.0",
     "@puckeditor/core": "^0.21.1",
     "@tailwindcss/postcss": "^4.2.2",
     "@tailwindcss/typography": "^0.5.16",

package/template/vitest.config.ts

@@ -1,30 +1,27 @@
-import { resolve } from "path";
 import { defineConfig } from "vitest/config";
 import react from "@vitejs/plugin-react";
 
 export default defineConfig({
   plugins: [react()],
-  resolve: {
-    alias: {
-      "@pantheon-systems/puck-css/fields": resolve(
-        __dirname,
-        "../..",
-        "packages/puck-css/src/data/fields.tsx",
-      ),
-      "@pantheon-systems/pds-toolkit-react": resolve(
-        __dirname,
-        "../..",
-        "packages/puck-css/src/__mocks__/@pantheon-systems/pds-toolkit-react.ts",
-      ),
-      "@puckeditor/core": resolve(
-        __dirname,
-        "../..",
-        "packages/puck-css/src/__mocks__/@puckeditor/core.ts",
-      ),
-    },
-  },
   test: {
     environment: "node",
+    // Inlining below means the first test to import puck-css pays for Vite
+    // transforming that whole graph — seconds on a cold machine, and the default
+    // 5s timeout fails it on slower CI runners while every later test in the file
+    // runs in milliseconds.
+    testTimeout: 30_000,
+    server: {
+      deps: {
+        // pds-toolkit-react's entry point imports its own dist/index.css, and
+        // puck-css imports pds-toolkit-react. Left external, vitest hands that
+        // chain to Node's ESM loader, which has no loader for .css; inlining
+        // routes it through Vite instead. Both must be listed — inlining only the
+        // leaf leaves puck-css external, and Node then loads the whole subtree
+        // without consulting this list. The patterns match a resolved path, so
+        // they allow pnpm's `@pantheon-systems+puck-css` directory form too.
+        inline: [/@pantheon-systems[/+]puck-css/, /@pantheon-systems[/+]pds-toolkit-react/],
+      },
+    },
     typecheck: {
       tsconfig: "./tsconfig.test.json",
     },

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

@@ -1,65 +0,0 @@
-import { beforeEach, describe, expect, it, vi } from "vitest";
-
-const { loadPublishedPage, notFound } = vi.hoisted(() => ({
-  loadPublishedPage: vi.fn(),
-  notFound: vi.fn(() => {
-    throw new Error("NEXT_NOT_FOUND");
-  }),
-}));
-
-vi.mock("@pantheon-systems/p1-next-sdk/server", () => ({
-  loadPublishedPage,
-  loadRouteTemplateKeys: vi.fn().mockResolvedValue([]),
-  createCssQueryFetchers: vi.fn().mockReturnValue([]),
-}));
-
-vi.mock("next/navigation", () => ({ notFound }));
-
-vi.mock("@pantheon-systems/puck-css/server", () => ({
-  pagePathFromCatchAllSegments: (segments: string[]) => `/${segments.join("/")}`,
-  loadRemoteDatasourceContext: vi.fn().mockResolvedValue({}),
-  extractReferencedDatasourceIds: vi.fn().mockReturnValue([]),
-  resolveDataTemplates: vi.fn(async (d: unknown) => d),
-}));
-
-vi.mock("../lib/remote-datasource-fetchers", () => ({
-  REMOTE_DATASOURCE_FETCHERS: [],
-}));
-
-vi.mock("../app/[...puckPath]/client", () => ({ Client: () => null }));
-vi.mock("../components/content-unavailable", () => ({
-  ContentUnavailable: () => null,
-}));
-
-import Page from "../app/[...puckPath]/page";
-
-const render = (...segments: string[]) =>
-  Page({ params: Promise.resolve({ puckPath: segments }) });
-
-describe("catch-all route — missing vs unavailable", () => {
-  beforeEach(() => vi.clearAllMocks());
-
-  // The route is statically renderable, so a 200 here would write every junk URL
-  // a crawler probes into the response cache as a successful page.
-  it("404s a path with no published page", async () => {
-    loadPublishedPage.mockResolvedValue({ status: "missing" });
-    await expect(render("nope")).rejects.toThrow("NEXT_NOT_FOUND");
-    expect(notFound).toHaveBeenCalled();
-  });
-
-  // 404ing here would deindex a live page over a transient backend blip.
-  it("does not 404 when the backend is unreachable", async () => {
-    loadPublishedPage.mockResolvedValue({ status: "unavailable" });
-    await render("real-page");
-    expect(notFound).not.toHaveBeenCalled();
-  });
-
-  it("renders published content", async () => {
-    loadPublishedPage.mockResolvedValue({
-      status: "ok",
-      data: { root: { props: { title: "Hi" } }, content: [] },
-    });
-    await render("blog");
-    expect(notFound).not.toHaveBeenCalled();
-  });
-});