Phase 3: Display Registry

frontend/src/modules/registry/
├── index.ts                    # Public exports
├── types.ts                    # TypeScript interfaces
├── contentRegistry.ts          # Content type registry
├── displayRegistry.ts          # Display type registry
└── displays/
    ├── FeedDisplay.tsx
    ├── CardGridDisplay.tsx
    ├── StaticPageDisplay.tsx
    └── index.ts

// types.ts
export type DisplayType = 'feed' | 'card-grid' | 'static-page';
export type ContentType = 'story' | 'project' | 'page';
 
export interface ContentEntry<T> {
  listItem: React.ComponentType<{ item: T }> | null;
  detail: React.ComponentType<{ item: T }> | null;
}

// contentRegistry.ts
import { StoryCard, StoryDetail } from '@/modules/stories';
import { ProjectCard, ProjectDetail } from '@/modules/projects';
 
export const contentRegistry = {
  story: {
    listItem: StoryCard,
    detail: StoryDetail,
  },
  project: {
    listItem: ProjectCard,
    detail: ProjectDetail,
  },
  page: {
    listItem: null,
    detail: null,
  },
};

// displayRegistry.ts
import { FeedDisplay, CardGridDisplay, StaticPageDisplay } from './displays';
 
export const displayRegistry = {
  'feed': FeedDisplay,
  'card-grid': CardGridDisplay,
  'static-page': StaticPageDisplay,
};

interface FeedDisplayProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
  onLoadMore: () => void;
  hasMore: boolean;
}

interface CardGridDisplayProps<T> {
  items: T[];
  renderItem: (item: T) => React.ReactNode;
}

interface StaticPageDisplayProps {
  content: string;
  title?: string;
}