@pantheon-systems/create-p1-starter-kit 0.1.0

package/template/components/puck/paragraph-block.tsx

@@ -0,0 +1,44 @@
+import { blockPaddingClass } from "./block-padding";
+import ReactMarkdown from "react-markdown";
+
+function asMarkdownText(value: unknown): string {
+  if (typeof value === "string") return value;
+  if (typeof value === "number" || typeof value === "boolean") return String(value);
+  return "";
+}
+
+export const paragraphBlock = {
+  label: "Paragraph",
+  fields: {
+    text: {
+      type: "textarea" as const,
+      label: "Text",
+      contentEditable: true,
+    },
+  },
+  defaultProps: {
+    text: "Add your copy here. You can use multiple lines.",
+  },
+  render: ({ text }: { text?: string }) => {
+    const markdown = asMarkdownText(text);
+    return (
+      <div className={blockPaddingClass}>
+        <ReactMarkdown
+          components={{
+            p: ({ children }) => <p className="m-0 max-w-prose leading-relaxed">{children}</p>,
+            a: ({ href, children }) => (
+              <a
+                href={href}
+                className="text-blue-700 underline decoration-blue-700/40 underline-offset-2 hover:decoration-blue-700"
+              >
+                {children}
+              </a>
+            ),
+          }}
+        >
+          {markdown}
+        </ReactMarkdown>
+      </div>
+    );
+  },
+};

package/template/components/puck/quote-block.tsx

@@ -0,0 +1,23 @@
+import { blockPaddingClass } from "./block-padding";
+
+export const quoteBlock = {
+  label: "Quote",
+  fields: {
+    quote: { type: "textarea" as const, label: "Quote" },
+    attribution: { type: "text" as const, label: "Attribution" },
+  },
+  defaultProps: {
+    quote: "A short quotation goes here.",
+    attribution: "",
+  },
+  render: ({ quote, attribution }: { quote?: string; attribution?: string }) => (
+    <blockquote
+      className={`m-0 max-w-prose border-l-4 border-neutral-300 pl-6 ${blockPaddingClass}`}
+    >
+      <p className="m-0 text-lg italic leading-relaxed">{quote}</p>
+      {attribution ? (
+        <footer className="mt-3 text-base text-neutral-600">— {attribution}</footer>
+      ) : null}
+    </blockquote>
+  ),
+};

package/template/components/puck/root.tsx

@@ -0,0 +1,20 @@
+import type { ReactNode } from "react";
+
+export const puckRoot = {
+  fields: {
+    title: { type: "text" as const },
+    description: { type: "textarea" as const },
+  },
+  defaultProps: {
+    title: "My Puck Editor",
+  },
+  render: (props: { children?: ReactNode; title?: string }) => {
+    const { children, title } = props;
+    return (
+      <div className="font-sans antialiased">
+        <h1>{title}</h1>
+        {children}
+      </div>
+    );
+  },
+};

package/template/components/puck/spacer-block.tsx

@@ -0,0 +1,19 @@
+export const spacerBlock = {
+  label: "Spacer",
+  fields: {
+    height: { type: "number" as const, label: "Height (px)", min: 8, max: 240, step: 4 },
+  },
+  defaultProps: {
+    height: 48,
+  },
+  render: ({ height }: { height?: number }) => {
+    const px = Math.min(240, Math.max(8, height ?? 48));
+    return (
+      <div
+        aria-hidden
+        className="w-full min-h-2 max-h-60 shrink-0"
+        style={{ height: px }}
+      />
+    );
+  },
+};

package/template/eslint.config.js

@@ -0,0 +1,161 @@
+import eslint from '@eslint/js';
+import tseslint from 'typescript-eslint';
+import importPlugin from 'eslint-plugin-import';
+import globals from 'globals';
+import react from 'eslint-plugin-react';
+import reactHooks from 'eslint-plugin-react-hooks';
+import prettierConfig from 'eslint-config-prettier';
+
+export default tseslint.config(
+  eslint.configs.recommended,
+  ...tseslint.configs.recommended,
+  ...tseslint.configs.strict,
+  ...tseslint.configs.stylistic,
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx', '**/*.mjs'],
+    plugins: { import: importPlugin },
+    languageOptions: {
+      ecmaVersion: 'latest',
+      sourceType: 'module',
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+        ...globals.es2022,
+      },
+    },
+    rules: {
+      // TypeScript specific rules
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          args: 'all',
+          argsIgnorePattern: '^_',
+          caughtErrors: 'all',
+          caughtErrorsIgnorePattern: '^_',
+          destructuredArrayIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+          ignoreRestSiblings: true,
+        },
+      ],
+      '@typescript-eslint/no-explicit-any': 'warn',
+      '@typescript-eslint/no-var-requires': 'warn',
+      '@typescript-eslint/consistent-type-imports': 'warn',
+      '@typescript-eslint/explicit-function-return-type': 'off',
+      '@typescript-eslint/explicit-module-boundary-types': 'off',
+      // Import rules
+      'import/extensions': 'off',
+      'import/prefer-default-export': 'off',
+      'import/no-unresolved': 'off',
+      'import/order': 'warn',
+      'import/no-extraneous-dependencies': 'warn',
+      // General ESLint rules
+      'no-console': 'off',
+      'no-debugger': 'error',
+      'lines-between-class-members': 'off',
+      camelcase: 'off',
+      'no-undef': 'off',
+      'no-underscore-dangle': 'off',
+      'no-unused-vars': 'off',
+      'no-use-before-define': 'off',
+      'no-redeclare': 'off',
+      'no-restricted-syntax': 'off',
+      'no-shadow': 'off',
+      'no-else-return': 'off',
+      'operator-linebreak': 'off',
+      'no-plusplus': 'off',
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: '@/entrypoint',
+              message:
+                'Do not import from the entrypoint within source files. Import directly from the module instead.',
+            },
+          ],
+        },
+      ],
+      // Stricter rules (warn to resolve over time)
+      '@typescript-eslint/consistent-generic-constructors': 'warn',
+      '@typescript-eslint/consistent-indexed-object-style': 'warn',
+      '@typescript-eslint/no-shadow': 'warn',
+      '@typescript-eslint/no-require-imports': 'warn',
+      'no-async-promise-executor': 'warn',
+      '@typescript-eslint/consistent-type-definitions': 'warn',
+      'no-useless-escape': 'warn',
+      'no-useless-catch': 'warn',
+      '@typescript-eslint/no-inferrable-types': 'warn',
+      '@typescript-eslint/no-non-null-assertion': 'error',
+      'prefer-const': 'warn',
+      '@typescript-eslint/ban-ts-comment': 'warn',
+      '@typescript-eslint/no-unused-expressions': 'warn',
+      '@typescript-eslint/no-non-null-asserted-optional-chain': 'warn',
+      '@typescript-eslint/no-empty-function': 'warn',
+      '@typescript-eslint/no-empty-object-type': 'warn',
+      '@typescript-eslint/no-wrapper-object-types': 'warn',
+      'no-constant-binary-expression': 'warn',
+      '@typescript-eslint/array-type': 'warn',
+      '@typescript-eslint/prefer-for-of': 'warn',
+      '@typescript-eslint/no-redeclare': 'warn',
+      'no-case-declarations': 'warn',
+      'no-empty': 'warn',
+      '@typescript-eslint/no-dynamic-delete': 'warn',
+      'no-constant-condition': 'warn',
+      'no-empty-pattern': 'warn',
+      'no-var': 'warn',
+      '@typescript-eslint/no-namespace': 'warn',
+      '@typescript-eslint/no-extraneous-class': 'warn',
+      '@typescript-eslint/unified-signatures': 'warn',
+      '@typescript-eslint/no-invalid-void-type': 'warn',
+      '@typescript-eslint/no-this-alias': 'warn',
+    },
+  },
+  {
+    files: ['**/*.test.ts', '**/*.test.tsx', '**/*.spec.ts', '**/*.spec.tsx'],
+    languageOptions: {
+      globals: {
+        jest: true,
+      },
+    },
+  },
+  {
+    ignores: [
+      'node_modules/**',
+      'dist/**',
+      'build/**',
+      '.next/**',
+      'coverage/**',
+      '**/*.d.ts',
+      '**/generated/**',
+      '**/.puppeteerrc.cjs',
+    ],
+  },
+  {
+    files: ['**/*.{ts,tsx,jsx}'],
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+    },
+    languageOptions: {
+      parserOptions: {
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    settings: {
+      react: {
+        version: 'detect',
+      },
+    },
+    rules: {
+      ...react.configs.recommended.rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/react-in-jsx-scope': 'off',
+      'react/prop-types': 'off',
+      'react/display-name': 'off',
+      'react-hooks/exhaustive-deps': 'warn',
+    },
+  },
+  prettierConfig,
+);

package/template/lib/content-publisher.ts

@@ -0,0 +1,128 @@
+import type {
+  RemoteDatasourceFetcher,
+  RemoteDatasourceFetcherParams,
+} from "@pantheon-systems/puck-css/server";
+import { PCCConvenienceFunctions } from "@pantheon-systems/cpub-react-sdk/server";
+import { getFirstValue, savedValue } from "./fetcher-helpers";
+
+const ARTICLE_ID_REGEX = /^[a-z0-9][a-z0-9:_-]*$/i;
+
+function asArticleId(value: string | undefined): string | undefined {
+  if (!value) return undefined;
+  const trimmed = value.trim();
+  if (!trimmed || !ARTICLE_ID_REGEX.test(trimmed)) return undefined;
+  return trimmed;
+}
+
+function articleField(row: Record<string, unknown>, key: string): unknown {
+  if (key in row) return row[key];
+  const attrs = row.attributes;
+  if (attrs && typeof attrs === "object" && !Array.isArray(attrs)) {
+    return (attrs as Record<string, unknown>)[key];
+  }
+  return undefined;
+}
+
+type ArticleListItem = {
+  id: string;
+  title: string;
+  slug?: string;
+  url?: string;
+};
+
+function mapArticleRow(row: Record<string, unknown>): ArticleListItem | null {
+  const idValue =
+    articleField(row, "id") ??
+    articleField(row, "uuid") ??
+    articleField(row, "nid") ??
+    articleField(row, "drupal_internal__nid");
+  const id =
+    typeof idValue === "string"
+      ? idValue
+      : typeof idValue === "number"
+        ? String(idValue)
+        : "";
+  const titleValue = articleField(row, "title");
+  const slugValue = articleField(row, "slug") ?? articleField(row, "path");
+  const urlValue = articleField(row, "url");
+  const title = typeof titleValue === "string" ? titleValue : "";
+  const slug = typeof slugValue === "string" ? slugValue : undefined;
+  const url = typeof urlValue === "string" ? urlValue : undefined;
+  if (!id || !title) return null;
+  return { id, title, slug, url };
+}
+
+function arrayFromListPayload(json: unknown): unknown[] {
+  if (Array.isArray(json)) return json;
+  if (!json || typeof json !== "object") return [];
+  const record = json as Record<string, unknown>;
+  if (Array.isArray(record.items)) return record.items;
+  if (Array.isArray(record.results)) return record.results;
+  if (Array.isArray(record.data)) return record.data;
+  return [];
+}
+
+function resolveArticleId(params: RemoteDatasourceFetcherParams): string | undefined {
+  const { searchParams, urlParams, savedPreviewParams } = params;
+  return (
+    asArticleId(getFirstValue(searchParams, "article")) ??
+    asArticleId(getFirstValue(searchParams, "articleId")) ??
+    asArticleId(getFirstValue(searchParams, "slug")) ??
+    asArticleId(getFirstValue(searchParams, "id")) ??
+    asArticleId(savedValue(savedPreviewParams, "article")) ??
+    asArticleId(savedValue(savedPreviewParams, "articleId")) ??
+    asArticleId(savedValue(savedPreviewParams, "slug")) ??
+    asArticleId(savedValue(savedPreviewParams, "id")) ??
+    asArticleId(urlParams.article) ??
+    asArticleId(urlParams.articleId) ??
+    asArticleId(urlParams.slug) ??
+    asArticleId(urlParams.id)
+  );
+}
+
+async function fetchContentPublisherArticle(
+  id: string | undefined,
+): Promise<Record<string, unknown>> {
+  const validId = asArticleId(id);
+  if (!validId) return {};
+  try {
+    const article = await PCCConvenienceFunctions.getArticleBySlugOrId(validId, {
+      contentType: "TEXT_MARKDOWN",
+    });
+    if (article && typeof article === "object" && !Array.isArray(article)) {
+      return article as unknown as Record<string, unknown>;
+    }
+    return {};
+  } catch {
+    return {};
+  }
+}
+
+async function fetchContentPublisherArticleList(): Promise<ArticleListItem[]> {
+  try {
+    const payload = await PCCConvenienceFunctions.getPaginatedArticles({
+      pageSize: 200,
+    });
+    const rows = arrayFromListPayload(payload?.data ?? []);
+    const out: ArticleListItem[] = [];
+    for (const row of rows) {
+      if (!row || typeof row !== "object" || Array.isArray(row)) continue;
+      const item = mapArticleRow(row as Record<string, unknown>);
+      if (item) out.push(item);
+    }
+    return out;
+  } catch {
+    return [];
+  }
+}
+
+export const CONTENT_PUBLISHER_FETCHERS: RemoteDatasourceFetcher[] = [
+  {
+    id: "article",
+    fetch: async (params) => fetchContentPublisherArticle(resolveArticleId(params)),
+  },
+  {
+    id: "article_list",
+    fetch: async () => ({ items: await fetchContentPublisherArticleList() }),
+  },
+];

package/template/lib/fetcher-helpers.ts

@@ -0,0 +1,17 @@
+export function getFirstValue(
+  searchParams: Record<string, string | string[] | undefined>,
+  key: string,
+): string | undefined {
+  const raw = searchParams[key];
+  if (raw === undefined) return undefined;
+  if (Array.isArray(raw)) return raw[0];
+  return raw;
+}
+
+export function savedValue(
+  savedPreviewParams: Record<string, string>,
+  key: string,
+): string | undefined {
+  const v = savedPreviewParams[key]?.trim();
+  return v || undefined;
+}

package/template/lib/monsters-api.ts

@@ -0,0 +1,125 @@
+import type {
+  RemoteDatasourceFetcher,
+  RemoteDatasourceFetcherParams,
+} from "@pantheon-systems/puck-css/server";
+import { getFirstValue, savedValue } from "./fetcher-helpers";
+
+const GRAPHQL_POKEMON_ENDPOINT = "https://graphqlpokemon.favware.tech/v8";
+const MONSTER_INDEX_REGEX = /^[a-z0-9][a-z0-9_-]*$/i;
+
+function asMonsterIndex(
+  value: string | undefined,
+  allowNumeric = true,
+): string | undefined {
+  if (!value) return undefined;
+  if (!MONSTER_INDEX_REGEX.test(value)) return undefined;
+  if (!allowNumeric && /^\d+$/.test(value)) return undefined;
+  return value;
+}
+
+function resolveMonsterIndex(params: RemoteDatasourceFetcherParams): string | undefined {
+  const { searchParams, urlParams, savedPreviewParams } = params;
+  return (
+    asMonsterIndex(getFirstValue(searchParams, "monster")) ??
+    asMonsterIndex(getFirstValue(searchParams, "monsterIndex")) ??
+    asMonsterIndex(getFirstValue(searchParams, "index")) ??
+    asMonsterIndex(getFirstValue(searchParams, "id"), false) ??
+    asMonsterIndex(savedValue(savedPreviewParams, "monster")) ??
+    asMonsterIndex(savedValue(savedPreviewParams, "monsterIndex")) ??
+    asMonsterIndex(savedValue(savedPreviewParams, "index")) ??
+    asMonsterIndex(savedValue(savedPreviewParams, "id"), false) ??
+    asMonsterIndex(urlParams.monster) ??
+    asMonsterIndex(urlParams.monsterIndex) ??
+    asMonsterIndex(urlParams.index) ??
+    asMonsterIndex(urlParams.id, false)
+  );
+}
+
+async function fetchMonster(
+  index: string | undefined,
+  fetchImpl: typeof fetch,
+): Promise<Record<string, unknown>> {
+  if (!index || !MONSTER_INDEX_REGEX.test(index)) return {};
+  try {
+    const res = await fetchImpl(GRAPHQL_POKEMON_ENDPOINT, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        query: `query GetPokemon($pokemon: PokemonEnum!) {
+  getPokemon(pokemon: $pokemon) {
+    key
+    num
+    species
+    types
+    abilities { first second hidden special }
+    hp attack defense spAtk spDef speed sprite
+  }
+}`,
+        variables: { pokemon: index },
+      }),
+    });
+    if (!res.ok) return {};
+    const json: unknown = await res.json();
+    if (!json || typeof json !== "object" || Array.isArray(json)) return {};
+    const data = (json as { data?: unknown }).data;
+    if (!data || typeof data !== "object" || Array.isArray(data)) return {};
+    const pokemon = (data as { getPokemon?: unknown }).getPokemon;
+    if (pokemon && typeof pokemon === "object" && !Array.isArray(pokemon)) {
+      const row = pokemon as Record<string, unknown>;
+      return { ...row, index: row.key, name: row.species, url: `/pokemon/${index}` };
+    }
+    return {};
+  } catch {
+    return {};
+  }
+}
+
+async function fetchMonsterList(
+  fetchImpl: typeof fetch,
+): Promise<Array<{ index: string; name: string; url?: string }>> {
+  try {
+    const res = await fetchImpl(GRAPHQL_POKEMON_ENDPOINT, {
+      method: "POST",
+      headers: { "Content-Type": "application/json" },
+      body: JSON.stringify({
+        query: `query GetAllPokemon($take: Int!, $offset: Int!) {
+  getAllPokemon(take: $take, offset: $offset) {
+    key
+    species
+  }
+}`,
+        variables: { take: 200, offset: 89 },
+      }),
+    });
+    if (!res.ok) return [];
+    const json: unknown = await res.json();
+    if (!json || typeof json !== "object" || Array.isArray(json)) return [];
+    const data = (json as { data?: unknown }).data;
+    if (!data || typeof data !== "object" || Array.isArray(data)) return [];
+    const results = (data as { getAllPokemon?: unknown }).getAllPokemon;
+    if (!Array.isArray(results)) return [];
+    const out: Array<{ index: string; name: string; url?: string }> = [];
+    for (const row of results) {
+      if (!row || typeof row !== "object" || Array.isArray(row)) continue;
+      const r = row as Record<string, unknown>;
+      const index = typeof r.key === "string" ? r.key : "";
+      const name = typeof r.species === "string" ? r.species : "";
+      const url = index ? `/pokemon/${index}` : undefined;
+      if (index && name) out.push({ index, name, url });
+    }
+    return out;
+  } catch {
+    return [];
+  }
+}
+
+export const MONSTER_FETCHERS: RemoteDatasourceFetcher[] = [
+  {
+    id: "monster",
+    fetch: async (params) => fetchMonster(resolveMonsterIndex(params), params.fetchImpl),
+  },
+  {
+    id: "monster_list",
+    fetch: async (params) => ({ items: await fetchMonsterList(params.fetchImpl) }),
+  },
+];

package/template/lib/remote-datasource-fetchers.ts

@@ -0,0 +1,10 @@
+import type { RemoteDatasourceFetcher } from "@pantheon-systems/puck-css/server";
+import { SWAPI_FETCHERS } from "./swapi";
+import { MONSTER_FETCHERS } from "./monsters-api";
+import { CONTENT_PUBLISHER_FETCHERS } from "./content-publisher";
+
+export const REMOTE_DATASOURCE_FETCHERS: RemoteDatasourceFetcher[] = [
+  ...SWAPI_FETCHERS,
+  ...MONSTER_FETCHERS,
+  ...CONTENT_PUBLISHER_FETCHERS,
+];