@contractspec/example.saas-boilerplate 3.7.6 → 3.8.2

package/src/ui/overlays/demo-overlays.ts

@@ -10,65 +10,65 @@ import type { OverlayDefinition } from '../../shared/overlay-types';
  * Free tier overlay - shows upgrade prompts and limits
  */
 export const saasFreeUserOverlay: OverlayDefinition = {
-  overlayId: 'saas-boilerplate.free-tier',
-  version: '1.0.0',
-  description: 'Shows limitations for free tier users',
-  appliesTo: {
-    feature: 'saas-boilerplate',
-    tier: 'free',
-  },
-  modifications: [
-    {
-      type: 'setLimit',
-      field: 'projects',
-      max: 3,
-      message: 'Upgrade to create more projects',
-    },
-    { type: 'hideField', field: 'advancedSettings', reason: 'Pro feature' },
-    {
-      type: 'addBadge',
-      position: 'header',
-      label: 'Free Plan',
-      variant: 'default',
-    },
-  ],
+	overlayId: 'saas-boilerplate.free-tier',
+	version: '1.0.0',
+	description: 'Shows limitations for free tier users',
+	appliesTo: {
+		feature: 'saas-boilerplate',
+		tier: 'free',
+	},
+	modifications: [
+		{
+			type: 'setLimit',
+			field: 'projects',
+			max: 3,
+			message: 'Upgrade to create more projects',
+		},
+		{ type: 'hideField', field: 'advancedSettings', reason: 'Pro feature' },
+		{
+			type: 'addBadge',
+			position: 'header',
+			label: 'Free Plan',
+			variant: 'default',
+		},
+	],
 };
 
 /**
  * Demo user overlay
  */
 export const saasDemoOverlay: OverlayDefinition = {
-  overlayId: 'saas-boilerplate.demo-user',
-  version: '1.0.0',
-  description: 'Demo mode for SaaS boilerplate',
-  appliesTo: {
-    feature: 'saas-boilerplate',
-    role: 'demo',
-  },
-  modifications: [
-    {
-      type: 'hideField',
-      field: 'billingSection',
-      reason: 'Demo users cannot access billing',
-    },
-    {
-      type: 'hideField',
-      field: 'deleteAccount',
-      reason: 'Not available in demo',
-    },
-    {
-      type: 'addBadge',
-      position: 'header',
-      label: 'Demo Mode',
-      variant: 'warning',
-    },
-  ],
+	overlayId: 'saas-boilerplate.demo-user',
+	version: '1.0.0',
+	description: 'Demo mode for SaaS boilerplate',
+	appliesTo: {
+		feature: 'saas-boilerplate',
+		role: 'demo',
+	},
+	modifications: [
+		{
+			type: 'hideField',
+			field: 'billingSection',
+			reason: 'Demo users cannot access billing',
+		},
+		{
+			type: 'hideField',
+			field: 'deleteAccount',
+			reason: 'Not available in demo',
+		},
+		{
+			type: 'addBadge',
+			position: 'header',
+			label: 'Demo Mode',
+			variant: 'warning',
+		},
+	],
 };
 
 /**
  * All overlays for saas-boilerplate
  */
 export const saasOverlays: OverlayDefinition[] = [
-  saasFreeUserOverlay,
-  saasDemoOverlay,
+	saasFreeUserOverlay,
+	saasDemoOverlay,
 ];

package/src/ui/renderers/index.ts

@@ -1,7 +1,8 @@
 // SaaS renderers
-export { projectListReactRenderer } from './project-list.renderer';
+
 export {
-  projectListMarkdownRenderer,
-  saasDashboardMarkdownRenderer,
-  saasBillingMarkdownRenderer,
+	projectListMarkdownRenderer,
+	saasBillingMarkdownRenderer,
+	saasDashboardMarkdownRenderer,
 } from './project-list.markdown';
+export { projectListReactRenderer } from './project-list.renderer';

package/src/ui/renderers/project-list.markdown.ts

@@ -5,15 +5,32 @@
  */
 import type { PresentationRenderer } from '@contractspec/lib.contracts-spec/presentations/transform-engine';
 import {
-  mockListProjectsHandler,
-  mockGetSubscriptionHandler,
+	mockGetSubscriptionHandler,
+	mockListProjectsHandler,
 } from '../../handlers';
+import { createSaasVisualizationItems } from '../../visualizations';
 
-interface ProjectItem {
-  id: string;
-  name: string;
-  status: string;
-  description?: string;
+type ListProjectsResult = Awaited<ReturnType<typeof mockListProjectsHandler>>;
+type ProjectItem = ListProjectsResult['projects'][number];
+type VisualizationProject = Parameters<
+	typeof createSaasVisualizationItems
+>[0][number];
+
+const PROJECT_TIERS: VisualizationProject['tier'][] = [
+	'FREE',
+	'PRO',
+	'ENTERPRISE',
+];
+
+function toVisualizationProject(
+	project: ProjectItem,
+	index: number
+): VisualizationProject {
+	return {
+		status: project.status === 'DELETED' ? 'ARCHIVED' : project.status,
+		tier: PROJECT_TIERS[index % PROJECT_TIERS.length] ?? 'FREE',
+		createdAt: project.createdAt,
+	};
 }
 
 /**
@@ -21,60 +38,56 @@ interface ProjectItem {
  * Only handles ProjectListView component
  */
 export const projectListMarkdownRenderer: PresentationRenderer<{
-  mimeType: string;
-  body: string;
+	mimeType: string;
+	body: string;
 }> = {
-  target: 'markdown',
-  render: async (desc, _ctx) => {
-    // Only handle ProjectListView
-    if (
-      desc.source.type !== 'component' ||
-      desc.source.componentKey !== 'ProjectListView'
-    ) {
-      throw new Error('projectListMarkdownRenderer: not ProjectListView');
-    }
-
-    const data = await mockListProjectsHandler({
-      limit: 20,
-      offset: 0,
-    });
-
-    // The example handler returns 'projects', not 'items'
-    const items =
-      (data as { projects?: ProjectItem[]; items?: ProjectItem[] }).projects ??
-      (data as { items?: ProjectItem[] }).items ??
-      [];
-
-    const lines: string[] = [
-      '# Projects',
-      '',
-      `**Total**: ${data.total} projects`,
-      '',
-    ];
-
-    if (items.length === 0) {
-      lines.push('_No projects found._');
-    } else {
-      lines.push('| Status | Project | Description |');
-      lines.push('|--------|---------|-------------|');
-      for (const project of items) {
-        const status =
-          project.status === 'ACTIVE'
-            ? '✅'
-            : project.status === 'ARCHIVED'
-              ? '📦'
-              : '⏸️';
-        lines.push(
-          `| ${status} | **${project.name}** | ${project.description ?? '-'} |`
-        );
-      }
-    }
-
-    return {
-      mimeType: 'text/markdown',
-      body: lines.join('\n'),
-    };
-  },
+	target: 'markdown',
+	render: async (desc, _ctx) => {
+		// Only handle ProjectListView
+		if (
+			desc.source.type !== 'component' ||
+			desc.source.componentKey !== 'ProjectListView'
+		) {
+			throw new Error('projectListMarkdownRenderer: not ProjectListView');
+		}
+
+		const data = await mockListProjectsHandler({
+			limit: 20,
+			offset: 0,
+		});
+
+		const items = data.projects ?? [];
+
+		const lines: string[] = [
+			'# Projects',
+			'',
+			`**Total**: ${data.total} projects`,
+			'',
+		];
+
+		if (items.length === 0) {
+			lines.push('_No projects found._');
+		} else {
+			lines.push('| Status | Project | Description |');
+			lines.push('|--------|---------|-------------|');
+			for (const project of items) {
+				const status =
+					project.status === 'ACTIVE'
+						? '✅'
+						: project.status === 'ARCHIVED'
+							? '📦'
+							: '⏸️';
+				lines.push(
+					`| ${status} | **${project.name}** | ${project.description ?? '-'} |`
+				);
+			}
+		}
+
+		return {
+			mimeType: 'text/markdown',
+			body: lines.join('\n'),
+		};
+	},
 };
 
 /**
@@ -82,89 +95,100 @@ export const projectListMarkdownRenderer: PresentationRenderer<{
  * Only handles SaasDashboard component
  */
 export const saasDashboardMarkdownRenderer: PresentationRenderer<{
-  mimeType: string;
-  body: string;
+	mimeType: string;
+	body: string;
 }> = {
-  target: 'markdown',
-  render: async (desc, _ctx) => {
-    // Only handle SaasDashboard
-    if (
-      desc.source.type !== 'component' ||
-      desc.source.componentKey !== 'SaasDashboard'
-    ) {
-      throw new Error('saasDashboardMarkdownRenderer: not SaasDashboard');
-    }
-
-    const [projectsData, subscription] = await Promise.all([
-      mockListProjectsHandler({ limit: 50 }),
-      mockGetSubscriptionHandler(),
-    ]);
-
-    const projects =
-      (projectsData as { projects?: ProjectItem[] }).projects ?? [];
-    const activeProjects = projects.filter((p) => p.status === 'ACTIVE').length;
-    const archivedProjects = projects.filter(
-      (p) => p.status === 'ARCHIVED'
-    ).length;
-
-    const lines: string[] = [
-      '# SaaS Dashboard',
-      '',
-      '> Organization overview and usage summary',
-      '',
-      '## Summary',
-      '',
-      '| Metric | Value |',
-      '|--------|-------|',
-      `| Total Projects | ${projectsData.total} |`,
-      `| Active Projects | ${activeProjects} |`,
-      `| Archived Projects | ${archivedProjects} |`,
-      `| Subscription Plan | ${subscription.planName} |`,
-      `| Subscription Status | ${subscription.status} |`,
-      '',
-      '## Projects',
-      '',
-    ];
-
-    if (projects.length === 0) {
-      lines.push('_No projects yet._');
-    } else {
-      lines.push('| Status | Project | Description |');
-      lines.push('|--------|---------|-------------|');
-      for (const project of projects.slice(0, 10)) {
-        const status =
-          project.status === 'ACTIVE'
-            ? '✅'
-            : project.status === 'ARCHIVED'
-              ? '📦'
-              : '⏸️';
-        lines.push(
-          `| ${status} | **${project.name}** | ${project.description ?? '-'} |`
-        );
-      }
-      if (projects.length > 10) {
-        lines.push(
-          `| ... | ... | _${projectsData.total - 10} more projects_ |`
-        );
-      }
-    }
-
-    lines.push('');
-    lines.push('## Subscription');
-    lines.push('');
-    lines.push(`- **Plan**: ${subscription.planName}`);
-    lines.push(`- **Status**: ${subscription.status}`);
-    if (subscription.currentPeriodEnd) {
-      lines.push(
-        `- **Period End**: ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}`
-      );
-    }
-
-    return {
-      mimeType: 'text/markdown',
-      body: lines.join('\n'),
-    };
-  },
+	target: 'markdown',
+	render: async (desc, _ctx) => {
+		// Only handle SaasDashboard
+		if (
+			desc.source.type !== 'component' ||
+			desc.source.componentKey !== 'SaasDashboard'
+		) {
+			throw new Error('saasDashboardMarkdownRenderer: not SaasDashboard');
+		}
+
+		const [projectsData, subscription] = await Promise.all([
+			mockListProjectsHandler({ limit: 50 }),
+			mockGetSubscriptionHandler(),
+		]);
+
+		const projects = projectsData.projects ?? [];
+		const activeProjects = projects.filter((p) => p.status === 'ACTIVE').length;
+		const archivedProjects = projects.filter(
+			(p) => p.status === 'ARCHIVED'
+		).length;
+		const visualizations = createSaasVisualizationItems(
+			projects.map(toVisualizationProject),
+			10
+		);
+
+		const lines: string[] = [
+			'# SaaS Dashboard',
+			'',
+			'> Organization overview and usage summary',
+			'',
+			'## Summary',
+			'',
+			'| Metric | Value |',
+			'|--------|-------|',
+			`| Total Projects | ${projectsData.total} |`,
+			`| Active Projects | ${activeProjects} |`,
+			`| Archived Projects | ${archivedProjects} |`,
+			`| Subscription Plan | ${subscription.planName} |`,
+			`| Subscription Status | ${subscription.status} |`,
+			'',
+		];
+
+		lines.push('## Visualization Overview');
+		lines.push('');
+		for (const item of visualizations) {
+			lines.push(`- **${item.title}** via \`${item.spec.meta.key}\``);
+		}
+
+		lines.push('');
+		lines.push('## Projects');
+		lines.push('');
+
+		if (projects.length === 0) {
+			lines.push('_No projects yet._');
+		} else {
+			lines.push('| Status | Project | Description |');
+			lines.push('|--------|---------|-------------|');
+			for (const project of projects.slice(0, 10)) {
+				const status =
+					project.status === 'ACTIVE'
+						? '✅'
+						: project.status === 'ARCHIVED'
+							? '📦'
+							: '⏸️';
+				lines.push(
+					`| ${status} | **${project.name}** | ${project.description ?? '-'} |`
+				);
+			}
+			if (projects.length > 10) {
+				lines.push(
+					`| ... | ... | _${projectsData.total - 10} more projects_ |`
+				);
+			}
+		}
+
+		lines.push('');
+		lines.push('## Subscription');
+		lines.push('');
+		lines.push(`- **Plan**: ${subscription.planName}`);
+		lines.push(`- **Status**: ${subscription.status}`);
+		if (subscription.currentPeriodEnd) {
+			lines.push(
+				`- **Period End**: ${new Date(subscription.currentPeriodEnd).toLocaleDateString()}`
+			);
+		}
+
+		return {
+			mimeType: 'text/markdown',
+			body: lines.join('\n'),
+		};
+	},
 };
 
 /**
@@ -172,68 +196,68 @@ export const saasDashboardMarkdownRenderer: PresentationRenderer<{
  * Only handles SubscriptionView component
  */
 export const saasBillingMarkdownRenderer: PresentationRenderer<{
-  mimeType: string;
-  body: string;
+	mimeType: string;
+	body: string;
 }> = {
-  target: 'markdown',
-  render: async (desc, _ctx) => {
-    // Only handle SubscriptionView
-    if (
-      desc.source.type !== 'component' ||
-      desc.source.componentKey !== 'SubscriptionView'
-    ) {
-      throw new Error('saasBillingMarkdownRenderer: not SubscriptionView');
-    }
-
-    const subscription = await mockGetSubscriptionHandler();
-
-    const lines: string[] = [
-      '# Billing & Subscription',
-      '',
-      '> Current subscription details and billing information',
-      '',
-      '## Subscription Details',
-      '',
-      '| Property | Value |',
-      '|----------|-------|',
-      `| Plan | ${subscription.planName} |`,
-      `| Status | ${subscription.status} |`,
-      `| ID | ${subscription.id} |`,
-      `| Period Start | ${new Date(subscription.currentPeriodStart).toLocaleDateString()} |`,
-      `| Period End | ${new Date(subscription.currentPeriodEnd).toLocaleDateString()} |`,
-    ];
-
-    lines.push('');
-    lines.push('## Plan Limits');
-    lines.push('');
-    lines.push(`- **Projects**: ${subscription.limits.projects}`);
-    lines.push(`- **Users**: ${subscription.limits.users}`);
-
-    lines.push('');
-    lines.push('## Plan Features');
-    lines.push('');
-
-    if (subscription.planName.toLowerCase().includes('free')) {
-      lines.push('- ✅ Up to 3 projects');
-      lines.push('- ✅ Basic support');
-      lines.push('- ❌ Priority support');
-      lines.push('- ❌ Advanced analytics');
-    } else if (subscription.planName.toLowerCase().includes('pro')) {
-      lines.push('- ✅ Unlimited projects');
-      lines.push('- ✅ Priority support');
-      lines.push('- ✅ Advanced analytics');
-      lines.push('- ❌ Custom integrations');
-    } else {
-      lines.push('- ✅ Unlimited projects');
-      lines.push('- ✅ Priority support');
-      lines.push('- ✅ Advanced analytics');
-      lines.push('- ✅ Custom integrations');
-      lines.push('- ✅ Dedicated support');
-    }
-
-    return {
-      mimeType: 'text/markdown',
-      body: lines.join('\n'),
-    };
-  },
+	target: 'markdown',
+	render: async (desc, _ctx) => {
+		// Only handle SubscriptionView
+		if (
+			desc.source.type !== 'component' ||
+			desc.source.componentKey !== 'SubscriptionView'
+		) {
+			throw new Error('saasBillingMarkdownRenderer: not SubscriptionView');
+		}
+
+		const subscription = await mockGetSubscriptionHandler();
+
+		const lines: string[] = [
+			'# Billing & Subscription',
+			'',
+			'> Current subscription details and billing information',
+			'',
+			'## Subscription Details',
+			'',
+			'| Property | Value |',
+			'|----------|-------|',
+			`| Plan | ${subscription.planName} |`,
+			`| Status | ${subscription.status} |`,
+			`| ID | ${subscription.id} |`,
+			`| Period Start | ${new Date(subscription.currentPeriodStart).toLocaleDateString()} |`,
+			`| Period End | ${new Date(subscription.currentPeriodEnd).toLocaleDateString()} |`,
+		];
+
+		lines.push('');
+		lines.push('## Plan Limits');
+		lines.push('');
+		lines.push(`- **Projects**: ${subscription.limits.projects}`);
+		lines.push(`- **Users**: ${subscription.limits.users}`);
+
+		lines.push('');
+		lines.push('## Plan Features');
+		lines.push('');
+
+		if (subscription.planName.toLowerCase().includes('free')) {
+			lines.push('- ✅ Up to 3 projects');
+			lines.push('- ✅ Basic support');
+			lines.push('- ❌ Priority support');
+			lines.push('- ❌ Advanced analytics');
+		} else if (subscription.planName.toLowerCase().includes('pro')) {
+			lines.push('- ✅ Unlimited projects');
+			lines.push('- ✅ Priority support');
+			lines.push('- ✅ Advanced analytics');
+			lines.push('- ❌ Custom integrations');
+		} else {
+			lines.push('- ✅ Unlimited projects');
+			lines.push('- ✅ Priority support');
+			lines.push('- ✅ Advanced analytics');
+			lines.push('- ✅ Custom integrations');
+			lines.push('- ✅ Dedicated support');
+		}
+
+		return {
+			mimeType: 'text/markdown',
+			body: lines.join('\n'),
+		};
+	},
 };

package/src/ui/renderers/project-list.renderer.tsx

@@ -1,22 +1,23 @@
 /**
  * React renderer for SaaS Project List presentation
  */
-import * as React from 'react';
+
 import type { PresentationRenderer } from '@contractspec/lib.contracts-spec/presentations/transform-engine';
+import * as React from 'react';
 import { SaasProjectList } from '../SaasProjectList';
 
 export const projectListReactRenderer: PresentationRenderer<React.ReactElement> =
-  {
-    target: 'react',
-    render: async (desc, _ctx) => {
-      if (desc.source.type !== 'component') {
-        throw new Error('Invalid source type');
-      }
+	{
+		target: 'react',
+		render: async (desc, _ctx) => {
+			if (desc.source.type !== 'component') {
+				throw new Error('Invalid source type');
+			}
 
-      if (desc.source.componentKey !== 'SaasProjectListView') {
-        throw new Error(`Unknown component: ${desc.source.componentKey}`);
-      }
+			if (desc.source.componentKey !== 'SaasProjectListView') {
+				throw new Error(`Unknown component: ${desc.source.componentKey}`);
+			}
 
-      return <SaasProjectList />;
-    },
-  };
+			return <SaasProjectList />;
+		},
+	};