cms-renderer 0.0.0 → 0.1.1

package/dist/lib/types.d.ts

@@ -0,0 +1,163 @@
+import * as _repo_cms_schema_blocks from '@repo/cms-schema/blocks';
+import { ComponentType } from 'react';
+
+/**
+ * Valid block type strings.
+ * Must match the schema_name field in block data from the tRPC API.
+ */
+type BlockType = 'navigation' | 'header' | 'article' | 'hero-block' | 'features-block' | 'cta-block' | 'logo-trust-block';
+/**
+ * Navigation link button structure.
+ */
+interface NavigationButton {
+    label: string;
+    href: string;
+    ariaLabel: string;
+}
+/**
+ * Navigation link with type and button.
+ */
+interface NavigationLink {
+    button: NavigationButton;
+    type: 'Default' | 'Flyout';
+}
+/**
+ * Level 3 navigation item (leaf node).
+ */
+interface Level3Link {
+    link: NavigationLink;
+}
+/**
+ * Level 2 navigation item with optional Level 3 children.
+ */
+interface Level2Link {
+    link: NavigationLink;
+    children?: Level3Link[];
+}
+/**
+ * Level 1 navigation item with optional Level 2 children.
+ */
+interface Level1Link {
+    link: NavigationLink;
+    children?: Level2Link[];
+}
+/**
+ * Navigation block content.
+ */
+interface NavigationContent {
+    logo?: {
+        url: string;
+        alt: string;
+    };
+    ariaLabel: string;
+    links: Level1Link[];
+}
+/**
+ * Header block content.
+ */
+interface HeaderContent {
+    headline: string;
+    subheadline?: string;
+    backgroundImage?: {
+        url: string;
+        alt: string;
+    };
+    ctaButton?: {
+        label: string;
+        href: string;
+    };
+    alignment: 'left' | 'center' | 'right';
+}
+/**
+ * Article block content.
+ */
+interface ArticleContent {
+    headline: string;
+    author?: string;
+    publishedAt?: string;
+    body: string;
+    tags?: readonly string[] | string[];
+    status?: string;
+}
+/**
+ * Hero block content (from CMS schema).
+ */
+type HeroBlockContent = _repo_cms_schema_blocks.HeroBlockContent;
+/**
+ * Features block content (from CMS schema).
+ */
+type FeaturesBlockContent = _repo_cms_schema_blocks.FeaturesBlockContent;
+/**
+ * CTA block content (from CMS schema).
+ */
+type CTABlockContent = _repo_cms_schema_blocks.CTABlockContent;
+/**
+ * Logo Trust block content (from CMS schema).
+ */
+type LogoTrustBlockContent = _repo_cms_schema_blocks.LogoTrustBlockContent;
+/**
+ * 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>;
+ *   }
+ * }
+ * ```
+ */
+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;
+};
+/**
+ * Props for a block component.
+ * Each block component receives its typed content.
+ */
+interface BlockComponentProps<T> {
+    content: T;
+}
+/**
+ * A React component that renders a specific block type.
+ */
+type BlockComponent<T> = ComponentType<BlockComponentProps<T>>;
+/**
+ * Registry of block type to component mappings.
+ * This is the core of the ComponentMap pattern.
+ */
+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>;
+};
+
+export type { ArticleContent, BlockComponent, BlockComponentProps, BlockComponentRegistry, BlockData, BlockType, CTABlockContent, FeaturesBlockContent, HeaderContent, HeroBlockContent, Level1Link, Level2Link, Level3Link, LogoTrustBlockContent, NavigationButton, NavigationContent, NavigationLink };

package/dist/lib/types.js

@@ -0,0 +1 @@
+//# sourceMappingURL=types.js.map

package/dist/lib/types.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"sourcesContent":[],"mappings":"","names":[]}

package/package.json

@@ -1,26 +1,64 @@
 {
   "name": "cms-renderer",
-  "version": "0.0.0",
+  "version": "0.1.1",
   "private": false,
   "type": "module",
   "exports": {
-    "./components/*": "./components/*",
-    "./components/blocks/*": "./components/blocks/*",
-    "./lib/*": "./lib/*",
-    "./server/*": "./server/*",
-    "./styles/*": "./styles/*"
+    "./lib/block-renderer": {
+      "types": "./dist/lib/block-renderer.d.ts",
+      "import": "./dist/lib/block-renderer.js"
+    },
+    "./lib/cms-api": {
+      "types": "./dist/lib/cms-api.d.ts",
+      "import": "./dist/lib/cms-api.js"
+    },
+    "./lib/data-utils": {
+      "types": "./dist/lib/data-utils.d.ts",
+      "import": "./dist/lib/data-utils.js"
+    },
+    "./lib/markdown-utils": {
+      "types": "./dist/lib/markdown-utils.d.ts",
+      "import": "./dist/lib/markdown-utils.js"
+    },
+    "./lib/renderer": {
+      "types": "./dist/lib/renderer.d.ts",
+      "import": "./dist/lib/renderer.js"
+    },
+    "./lib/result": {
+      "types": "./dist/lib/result.d.ts",
+      "import": "./dist/lib/result.js"
+    },
+    "./lib/schema": {
+      "types": "./dist/lib/schema.d.ts",
+      "import": "./dist/lib/schema.js"
+    },
+    "./lib/trpc": {
+      "types": "./dist/lib/trpc.d.ts",
+      "import": "./dist/lib/trpc.js"
+    },
+    "./lib/types": {
+      "types": "./dist/lib/types.d.ts",
+      "import": "./dist/lib/types.js"
+    },
+    "./lib/image/lazy-load": {
+      "types": "./dist/lib/image/lazy-load.d.ts",
+      "import": "./dist/lib/image/lazy-load.js"
+    }
   },
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
+    "build": "tsup",
+    "prepublishOnly": "npm run build",
     "lint": "biome check .",
     "check-types": "tsc --noEmit",
-    "clean": "rm -rf .next .turbo node_modules"
+    "clean": "rm -rf .next .turbo node_modules dist"
   },
   "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",
@@ -30,8 +68,6 @@
     "@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",
@@ -39,6 +75,7 @@
     "@trpc/client": "11.8.1",
     "@trpc/react-query": "11.8.1",
     "@trpc/server": "11.8.1",
+    "md4w": "^0.2.7",
     "next": "^16.1.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
@@ -47,7 +84,9 @@
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "20.1.0",
+    "@repo/cms-schema": "0.0.0",
     "@repo/typescript-config": "0.0.0",
+    "tsup": "^8.3.5",
     "@tailwindcss/postcss": "4",
     "@testing-library/jest-dom": "6.9.1",
     "@types/node": "^25",

package/.turbo/turbo-check-types.log

@@ -1,2 +0,0 @@
-
-$ tsc --noEmit

package/lib/__tests__/enrich-block-images.test.ts

@@ -1,394 +0,0 @@
-import { beforeAll, beforeEach, describe, expect, it, mock } from 'bun:test';
-
-// =============================================================================
-// Mocks - Must be set up BEFORE any imports that use these modules
-// =============================================================================
-
-// Mock 'server-only' to allow running in test environment
-// This must be called before the module that imports it is loaded
-mock.module('server-only', () => ({}));
-
-// Mock generateSignedImageData to return predictable signed data
-const mockGenerateSignedImageData = mock(
-  (config: { assetId: string; width: number; height: number; url: string }) => ({
-    signedSrcset: `signed-srcset-${config.assetId}`,
-    signedFallbackSrcset: `signed-fallback-srcset-${config.assetId}`,
-    signedDefaultSrc: `signed-default-src-${config.assetId}`,
-  })
-);
-
-mock.module('../image-transforms.server', () => ({
-  generateSignedImageData: mockGenerateSignedImageData,
-}));
-
-// =============================================================================
-// Dynamic Import - Must happen after mocks are registered
-// =============================================================================
-
-type EnrichFunction = <T extends Record<string, unknown>>(content: T | null) => T | null;
-let enrichBlockWithSignedUrls: EnrichFunction;
-
-beforeAll(async () => {
-  const mod = await import('../enrich-block-images');
-  enrichBlockWithSignedUrls = mod.enrichBlockWithSignedUrls;
-});
-
-// =============================================================================
-// Test Data
-// =============================================================================
-
-const createResolvedImageRef = (id: string = '12345678-1234-1234-1234-123456789abc') => ({
-  alt: 'Test image',
-  _asset: {
-    id,
-    url: '/api/dev/storage/test.jpg',
-    width: 1920,
-    height: 1080,
-    lqip: 'data:image/jpeg;base64,/9j/...',
-  },
-});
-
-// =============================================================================
-// Tests
-// =============================================================================
-
-describe('enrichBlockWithSignedUrls', () => {
-  beforeEach(() => {
-    mockGenerateSignedImageData.mockClear();
-  });
-
-  describe('Null/Undefined Handling', () => {
-    it('returns null when content is null', () => {
-      const result = enrichBlockWithSignedUrls(null);
-      expect(result).toBeNull();
-    });
-
-    it('returns content unchanged when it has no image references', () => {
-      const content = { title: 'Hello', count: 42 };
-      const result = enrichBlockWithSignedUrls(content);
-      expect(result).toEqual(content);
-    });
-  });
-
-  describe('Image Reference Detection', () => {
-    it('detects resolved image reference with alt and _asset', () => {
-      const imageRef = createResolvedImageRef();
-      const content = { backgroundImage: imageRef };
-
-      const result = enrichBlockWithSignedUrls(content);
-
-      expect(mockGenerateSignedImageData).toHaveBeenCalledTimes(1);
-      expect(result?.backgroundImage._signed).toBeDefined();
-    });
-
-    it('ignores objects missing _asset.id', () => {
-      const content = {
-        notAnImage: {
-          alt: 'Test',
-          _asset: {
-            url: '/test.jpg',
-            width: 1920,
-            height: 1080,
-          },
-        },
-      };
-
-      const result = enrichBlockWithSignedUrls(content);
-
-      expect(mockGenerateSignedImageData).not.toHaveBeenCalled();
-      expect((result?.notAnImage as Record<string, unknown>)._signed).toBeUndefined();
-    });
-
-    it('ignores objects missing alt', () => {
-      const content = {
-        notAnImage: {
-          _asset: {
-            id: '12345678-1234-1234-1234-123456789abc',
-            url: '/test.jpg',
-            width: 1920,
-            height: 1080,
-          },
-        },
-      };
-
-      const result = enrichBlockWithSignedUrls(content);
-
-      expect(mockGenerateSignedImageData).not.toHaveBeenCalled();
-      expect((result?.notAnImage as Record<string, unknown>)._signed).toBeUndefined();
-    });
-
-    it('ignores objects where _asset is null', () => {
-      const content = {
-        notAnImage: {
-          alt: 'Test',
-          _asset: null,
-        },
-      };
-
-      enrichBlockWithSignedUrls(content);
-
-      expect(mockGenerateSignedImageData).not.toHaveBeenCalled();
-    });
-
-    it('ignores objects where _asset is missing id', () => {
-      const content = {
-        notAnImage: {
-          alt: 'Test',
-          _asset: {
-            url: '/test.jpg',
-            width: 1920,
-            height: 1080,
-          },
-        },
-      };
-
-      enrichBlockWithSignedUrls(content);
-
-      expect(mockGenerateSignedImageData).not.toHaveBeenCalled();
-    });
-
-    it('ignores objects where _asset is missing url', () => {
-      const content = {
-        notAnImage: {
-          alt: 'Test',
-          _asset: {
-            id: '12345678-1234-1234-1234-123456789abc',
-            width: 1920,
-            height: 1080,
-          },
-        },
-      };
-
-      enrichBlockWithSignedUrls(content);
-
-      expect(mockGenerateSignedImageData).not.toHaveBeenCalled();
-    });
-
-    it('ignores objects where _asset is missing width', () => {
-      const content = {
-        notAnImage: {
-          alt: 'Test',
-          _asset: {
-            id: '12345678-1234-1234-1234-123456789abc',
-            url: '/test.jpg',
-            height: 1080,
-          },
-        },
-      };
-
-      enrichBlockWithSignedUrls(content);
-
-      expect(mockGenerateSignedImageData).not.toHaveBeenCalled();
-    });
-
-    it('ignores objects where _asset is missing height', () => {
-      const content = {
-        notAnImage: {
-          alt: 'Test',
-          _asset: {
-            id: '12345678-1234-1234-1234-123456789abc',
-            url: '/test.jpg',
-            width: 1920,
-          },
-        },
-      };
-
-      enrichBlockWithSignedUrls(content);
-
-      expect(mockGenerateSignedImageData).not.toHaveBeenCalled();
-    });
-
-    it('requires _asset.id to be a 36-character UUID', () => {
-      const content = {
-        notAnImage: {
-          alt: 'Test',
-          _asset: {
-            id: 'short-id', // Not 36 characters
-            url: '/test.jpg',
-            width: 1920,
-            height: 1080,
-          },
-        },
-      };
-
-      enrichBlockWithSignedUrls(content);
-
-      expect(mockGenerateSignedImageData).not.toHaveBeenCalled();
-    });
-  });
-
-  describe('Recursive Traversal', () => {
-    it('traverses nested objects', () => {
-      const imageRef = createResolvedImageRef();
-      const content = {
-        section: {
-          hero: {
-            backgroundImage: imageRef,
-          },
-        },
-      };
-
-      const result = enrichBlockWithSignedUrls(content);
-
-      expect(mockGenerateSignedImageData).toHaveBeenCalledTimes(1);
-      expect(result?.section.hero.backgroundImage._signed).toBeDefined();
-    });
-
-    it('traverses arrays', () => {
-      const imageRef1 = createResolvedImageRef('11111111-1111-1111-1111-111111111111');
-      const imageRef2 = createResolvedImageRef('22222222-2222-2222-2222-222222222222');
-
-      const content = {
-        images: [imageRef1, imageRef2],
-      };
-
-      const result = enrichBlockWithSignedUrls(content);
-
-      expect(mockGenerateSignedImageData).toHaveBeenCalledTimes(2);
-      expect(result?.images[0]._signed).toBeDefined();
-      expect(result?.images[1]._signed).toBeDefined();
-    });
-
-    it('traverses deeply nested arrays within objects', () => {
-      const imageRef = createResolvedImageRef();
-      const content = {
-        sections: [
-          {
-            cards: [
-              {
-                thumbnail: imageRef,
-              },
-            ],
-          },
-        ],
-      };
-
-      const result = enrichBlockWithSignedUrls(content);
-
-      expect(mockGenerateSignedImageData).toHaveBeenCalledTimes(1);
-      expect(result?.sections[0].cards[0].thumbnail._signed).toBeDefined();
-    });
-
-    it('handles multiple image references at different levels', () => {
-      const heroImage = createResolvedImageRef('11111111-1111-1111-1111-111111111111');
-      const thumbnailImage = createResolvedImageRef('22222222-2222-2222-2222-222222222222');
-
-      const content = {
-        hero: heroImage,
-        sidebar: {
-          thumbnail: thumbnailImage,
-        },
-      };
-
-      const result = enrichBlockWithSignedUrls(content);
-
-      expect(mockGenerateSignedImageData).toHaveBeenCalledTimes(2);
-      expect(result?.hero._signed).toBeDefined();
-      expect(result?.sidebar.thumbnail._signed).toBeDefined();
-    });
-  });
-
-  describe('Signed URL Data', () => {
-    it('adds _signed with signedSrcset, signedFallbackSrcset, and signedDefaultSrc', () => {
-      const imageRef = createResolvedImageRef();
-      const content = { image: imageRef };
-
-      const result = enrichBlockWithSignedUrls(content);
-
-      expect(result?.image._signed).toEqual({
-        signedSrcset: 'signed-srcset-asset-123',
-        signedFallbackSrcset: 'signed-fallback-srcset-asset-123',
-        signedDefaultSrc: 'signed-default-src-asset-123',
-      });
-    });
-
-    it('passes correct config to generateSignedImageData', () => {
-      const imageRef = createResolvedImageRef();
-      const content = { image: imageRef };
-
-      enrichBlockWithSignedUrls(content);
-
-      expect(mockGenerateSignedImageData).toHaveBeenCalledWith(
-        {
-          assetId: 'asset-123',
-          width: 1920,
-          height: 1080,
-          url: '/api/dev/storage/test.jpg',
-        },
-        expect.objectContaining({})
-      );
-    });
-
-    it('passes focalPoint option when transformation includes hx/hy', () => {
-      const imageRef = {
-        ...createResolvedImageRef(),
-        _asset: {
-          ...createResolvedImageRef()._asset,
-          transformation: 'hx=0.3&hy=0.7',
-        },
-      };
-      const content = { image: imageRef };
-
-      enrichBlockWithSignedUrls(content);
-
-      expect(mockGenerateSignedImageData).toHaveBeenCalledWith(expect.objectContaining({}), {
-        focalPoint: { x: 0.3, y: 0.7 },
-      });
-    });
-  });
-
-  describe('Immutability', () => {
-    it('does not mutate the original object', () => {
-      const imageRef = createResolvedImageRef();
-      const content = { image: imageRef };
-      const originalContent = JSON.stringify(content);
-
-      enrichBlockWithSignedUrls(content);
-
-      expect(JSON.stringify(content)).toBe(originalContent);
-      expect((content.image as Record<string, unknown>)._signed).toBeUndefined();
-    });
-
-    it('returns a new object with signed data', () => {
-      const imageRef = createResolvedImageRef();
-      const content = { image: imageRef };
-
-      const result = enrichBlockWithSignedUrls(content);
-
-      expect(result).not.toBe(content);
-      expect(result?.image).not.toBe(content.image);
-    });
-  });
-
-  describe('Primitive Values', () => {
-    it('preserves primitive values', () => {
-      const content = {
-        title: 'Hello World',
-        count: 42,
-        enabled: true,
-        ratio: 3.14,
-      };
-
-      const result = enrichBlockWithSignedUrls(content);
-
-      expect(result).toEqual(content);
-    });
-
-    it('preserves nested primitive values alongside images', () => {
-      const imageRef = createResolvedImageRef();
-      const content = {
-        title: 'Hero Section',
-        order: 1,
-        visible: true,
-        image: imageRef,
-      };
-
-      const result = enrichBlockWithSignedUrls(content);
-
-      expect(result?.title).toBe('Hero Section');
-      expect(result?.order).toBe(1);
-      expect(result?.visible).toBe(true);
-      expect(result?.image._signed).toBeDefined();
-    });
-  });
-});