cms-renderer 0.0.0

package/lib/trpc.ts

@@ -0,0 +1,28 @@
+/**
+ * tRPC Client Setup
+ *
+ * Creates the tRPC React hooks for client components.
+ * Uses tRPC v11 patterns with TanStack Query v5.
+ */
+
+import type { AppRouter } from '@repo/cms-schema/trpc';
+import { type CreateTRPCReact, createTRPCReact } from '@trpc/react-query';
+
+/**
+ * tRPC React client.
+ *
+ * Use this in client components to call tRPC procedures.
+ *
+ * @example
+ * ```tsx
+ * 'use client';
+ * import { trpc } from '@/lib/trpc';
+ *
+ * function NavigationClient() {
+ *   const { data, isLoading } = trpc.blocks.getNavigation.useQuery();
+ *   if (isLoading) return <div>Loading...</div>;
+ *   return <nav>{data?.links.map(link => ...)}</nav>;
+ * }
+ * ```
+ */
+export const trpc: CreateTRPCReact<AppRouter, unknown> = createTRPCReact<AppRouter>();

package/lib/types.ts

@@ -0,0 +1,201 @@
+/**
+ * Block Rendering Types
+ *
+ * Type definitions for the ComponentMap pattern.
+ * Block types map to React components via the blockComponents registry.
+ */
+
+import type { ComponentType } from 'react';
+
+// -----------------------------------------------------------------------------
+// Block Type Discriminant
+// -----------------------------------------------------------------------------
+
+/**
+ * Valid block type strings.
+ * Must match the schema_name field in block data from the tRPC API.
+ */
+export type BlockType =
+  | 'navigation'
+  | 'header'
+  | 'article'
+  | 'hero-block'
+  | 'features-block'
+  | 'cta-block'
+  | 'logo-trust-block';
+
+// -----------------------------------------------------------------------------
+// Content Types (inferred from seed data)
+// -----------------------------------------------------------------------------
+
+/**
+ * Navigation link button structure.
+ */
+export interface NavigationButton {
+  label: string;
+  href: string;
+  ariaLabel: string;
+}
+
+/**
+ * Navigation link with type and button.
+ */
+export interface NavigationLink {
+  button: NavigationButton;
+  type: 'Default' | 'Flyout';
+}
+
+/**
+ * Level 3 navigation item (leaf node).
+ */
+export interface Level3Link {
+  link: NavigationLink;
+}
+
+/**
+ * Level 2 navigation item with optional Level 3 children.
+ */
+export interface Level2Link {
+  link: NavigationLink;
+  children?: Level3Link[];
+}
+
+/**
+ * Level 1 navigation item with optional Level 2 children.
+ */
+export interface Level1Link {
+  link: NavigationLink;
+  children?: Level2Link[];
+}
+
+/**
+ * Navigation block content.
+ */
+export interface NavigationContent {
+  logo?: {
+    url: string;
+    alt: string;
+  };
+  ariaLabel: string;
+  links: Level1Link[];
+}
+
+/**
+ * Header block content.
+ */
+export interface HeaderContent {
+  headline: string;
+  subheadline?: string;
+  backgroundImage?: {
+    url: string;
+    alt: string;
+  };
+  ctaButton?: {
+    label: string;
+    href: string;
+  };
+  alignment: 'left' | 'center' | 'right';
+}
+
+/**
+ * Article block content.
+ */
+export interface ArticleContent {
+  headline: string;
+  author?: string;
+  publishedAt?: string;
+  body: string;
+  tags?: readonly string[] | string[];
+  status?: string;
+}
+
+/**
+ * Hero block content (from CMS schema).
+ */
+export type HeroBlockContent = import('@repo/cms-schema/blocks').HeroBlockContent;
+
+/**
+ * Features block content (from CMS schema).
+ */
+export type FeaturesBlockContent = import('@repo/cms-schema/blocks').FeaturesBlockContent;
+
+/**
+ * CTA block content (from CMS schema).
+ */
+export type CTABlockContent = import('@repo/cms-schema/blocks').CTABlockContent;
+
+/**
+ * Logo Trust block content (from CMS schema).
+ */
+export type LogoTrustBlockContent = import('@repo/cms-schema/blocks').LogoTrustBlockContent;
+
+// -----------------------------------------------------------------------------
+// Block Data Union
+// -----------------------------------------------------------------------------
+
+/**
+ * Discriminated union of all block types.
+ * Use the `type` field to narrow to specific content types.
+ *
+ * Each block also carries its stable CMS `id`, which should be used as the
+ * React `key` when rendering lists of blocks.
+ *
+ * @example
+ * ```tsx
+ * function renderBlock(block: BlockData) {
+ *   if (block.type === 'header') {
+ *     // TypeScript knows block.content is HeaderContent
+ *     return <h1>{block.content.headline}</h1>;
+ *   }
+ * }
+ * ```
+ */
+export type BlockData =
+  | { id: string; type: 'navigation'; content: NavigationContent }
+  | { id: string; type: 'header'; content: HeaderContent }
+  | { id: string; type: 'article'; content: ArticleContent }
+  | { id: string; type: 'hero-block'; content: HeroBlockContent }
+  | { id: string; type: 'features-block'; content: FeaturesBlockContent }
+  | { id: string; type: 'cta-block'; content: CTABlockContent }
+  | { id: string; type: 'logo-trust-block'; content: LogoTrustBlockContent };
+
+// -----------------------------------------------------------------------------
+// Component Types
+// -----------------------------------------------------------------------------
+
+/**
+ * Props for a block component.
+ * Each block component receives its typed content.
+ */
+export interface BlockComponentProps<T> {
+  content: T;
+}
+
+/**
+ * A React component that renders a specific block type.
+ */
+export type BlockComponent<T> = ComponentType<BlockComponentProps<T>>;
+
+/**
+ * Registry of block type to component mappings.
+ * This is the core of the ComponentMap pattern.
+ */
+export type BlockComponentRegistry = {
+  [K in BlockType]: BlockComponent<
+    K extends 'navigation'
+      ? NavigationContent
+      : K extends 'header'
+        ? HeaderContent
+        : K extends 'article'
+          ? ArticleContent
+          : K extends 'hero-block'
+            ? HeroBlockContent
+            : K extends 'features-block'
+              ? FeaturesBlockContent
+              : K extends 'cta-block'
+                ? CTABlockContent
+                : K extends 'logo-trust-block'
+                  ? LogoTrustBlockContent
+                  : never
+  >;
+};

package/next.config.ts

@@ -0,0 +1,39 @@
+import { resolve } from 'node:path';
+import type { NextConfig } from 'next';
+
+const nextConfig: NextConfig = {
+  turbopack: {
+    root: resolve(import.meta.dirname, '../..'),
+  },
+  transpilePackages: ['@repo/cms-schema', '@repo/markdown-wasm'],
+  serverExternalPackages: ['md4w'],
+  images: {
+    remotePatterns: [
+      {
+        protocol: 'https',
+        hostname: '**',
+      },
+      {
+        protocol: 'http',
+        hostname: 'localhost',
+      },
+    ],
+  },
+  // Prevent browser caching of dynamic pages
+  async headers() {
+    return [
+      {
+        // Apply to all pages
+        source: '/:path*',
+        headers: [
+          {
+            key: 'Cache-Control',
+            value: 'no-store, must-revalidate',
+          },
+        ],
+      },
+    ];
+  },
+};
+
+export default nextConfig;

package/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "cms-renderer",
+  "version": "0.0.0",
+  "private": false,
+  "type": "module",
+  "exports": {
+    "./components/*": "./components/*",
+    "./components/blocks/*": "./components/blocks/*",
+    "./lib/*": "./lib/*",
+    "./server/*": "./server/*",
+    "./styles/*": "./styles/*"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "lint": "biome check .",
+    "check-types": "tsc --noEmit",
+    "clean": "rm -rf .next .turbo node_modules"
+  },
+  "dependencies": {
+    "@auteur/trpc-utils": "0.0.0",
+    "@repo/supabase-utils": "0.0.0",
+    "@hookform/resolvers": "^5.1.0",
+    "@lexical/code": "0.39.0",
+    "@lexical/link": "0.39.0",
+    "@lexical/list": "0.39.0",
+    "@lexical/markdown": "0.39.0",
+    "@lexical/react": "0.39.0",
+    "@lexical/rich-text": "0.39.0",
+    "@lexical/selection": "0.39.0",
+    "@lexical/utils": "0.39.0",
+    "@repo/cms-schema": "0.0.0",
+    "@repo/markdown-wasm": "0.0.0",
+    "@supabase/ssr": "0.8.0",
+    "@supabase/supabase-js": "2.90.1",
+    "@tanstack/react-query": "5.90.16",
+    "@testing-library/react": "16.3.1",
+    "@trpc/client": "11.8.1",
+    "@trpc/react-query": "11.8.1",
+    "@trpc/server": "11.8.1",
+    "next": "^16.1.1",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "superjson": "2.2.6",
+    "zod": "4.3.5"
+  },
+  "devDependencies": {
+    "@happy-dom/global-registrator": "20.1.0",
+    "@repo/typescript-config": "0.0.0",
+    "@tailwindcss/postcss": "4",
+    "@testing-library/jest-dom": "6.9.1",
+    "@types/node": "^25",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "chalk": "5.6.2",
+    "jest-diff": "30.2.0",
+    "tailwindcss": "4",
+    "typescript": "^5.9.3"
+  }
+}

package/postcss.config.mjs

@@ -0,0 +1,5 @@
+export default {
+  plugins: {
+    '@tailwindcss/postcss': {},
+  },
+};

package/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules", "tests", "**/__tests__/**", "**/*.test.ts", "**/*.test.tsx", "e2e"]
+}