@contractspec/bundle.marketing 3.8.8 → 3.8.10

package/src/components/templates/TemplatePreviewContent.tsx

@@ -0,0 +1,182 @@
+'use client';
+
+import {
+	type TemplateId,
+	TemplateShell,
+} from '@contractspec/lib.example-shared-ui';
+import { LoadingSpinner } from '@contractspec/lib.ui-kit-web/ui/atoms/LoadingSpinner';
+import dynamic from 'next/dynamic';
+import type { ComponentType } from 'react';
+
+const SaasDashboard = dynamic(
+	() =>
+		import('@contractspec/example.saas-boilerplate').then(
+			(module) => module.SaasDashboard
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const CrmDashboard = dynamic(
+	() =>
+		import('@contractspec/example.crm-pipeline').then(
+			(module) => module.CrmDashboard
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const DataGridShowcase = dynamic(
+	() =>
+		import('@contractspec/example.data-grid-showcase/ui').then(
+			(module) => module.DataGridShowcase
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const VisualizationShowcase = dynamic(
+	() =>
+		import('@contractspec/example.visualization-showcase/ui').then(
+			(module) => module.VisualizationShowcase
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const AgentDashboard = dynamic(
+	() =>
+		import('@contractspec/example.agent-console/ui').then(
+			(module) => module.AgentDashboard
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const AiChatAssistantDashboard = dynamic(
+	() =>
+		import('@contractspec/example.ai-chat-assistant').then(
+			(module) => module.AiChatAssistantDashboard
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const WorkflowDashboard = dynamic(
+	() =>
+		import('@contractspec/example.workflow-system/ui').then(
+			(module) => module.WorkflowDashboard
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const MarketplaceDashboard = dynamic(
+	() =>
+		import('@contractspec/example.marketplace/ui').then(
+			(module) => module.MarketplaceDashboard
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const IntegrationDashboard = dynamic(
+	() =>
+		import('@contractspec/example.integration-hub/ui').then(
+			(module) => module.IntegrationDashboard
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+const AnalyticsDashboard = dynamic(
+	() =>
+		import('@contractspec/example.analytics-dashboard').then(
+			(module) => module.AnalyticsDashboard
+		),
+	{ ssr: false, loading: () => <LoadingSpinner /> }
+);
+
+interface PreviewDefinition {
+	title: string;
+	description: string;
+	component: ComponentType;
+}
+
+const PREVIEW_DEFINITIONS: Partial<Record<TemplateId, PreviewDefinition>> = {
+	'saas-boilerplate': {
+		title: 'SaaS Boilerplate',
+		description:
+			'Multi-tenant organizations, projects, settings, and billing usage tracking.',
+		component: SaasDashboard,
+	},
+	'crm-pipeline': {
+		title: 'CRM Pipeline',
+		description:
+			'Sales CRM with contacts, companies, deals, and pipeline stages.',
+		component: CrmDashboard,
+	},
+	'data-grid-showcase': {
+		title: 'Data Grid Showcase',
+		description:
+			'Shared ContractSpec table primitives with client, server, and DataView-driven lanes.',
+		component: DataGridShowcase,
+	},
+	'visualization-showcase': {
+		title: 'Visualization Showcase',
+		description:
+			'ContractSpec-owned chart primitives rendered through shared visualization contracts and design-system wrappers.',
+		component: VisualizationShowcase,
+	},
+	'agent-console': {
+		title: 'AI Agent Console',
+		description:
+			'AI agent orchestration with tools, agents, runs, and execution logs.',
+		component: AgentDashboard,
+	},
+	'ai-chat-assistant': {
+		title: 'AI Chat Assistant',
+		description:
+			'Focused assistant surface with reasoning, sources, suggestions, and MCP-aware tools.',
+		component: AiChatAssistantDashboard,
+	},
+	'workflow-system': {
+		title: 'Workflow System',
+		description: 'Multi-step workflows with role-based approvals.',
+		component: WorkflowDashboard,
+	},
+	marketplace: {
+		title: 'Marketplace',
+		description:
+			'Two-sided marketplace with stores, products, orders, and payouts.',
+		component: MarketplaceDashboard,
+	},
+	'integration-hub': {
+		title: 'Integration Hub',
+		description:
+			'Third-party integrations with connections, sync configs, and field mapping.',
+		component: IntegrationDashboard,
+	},
+	'analytics-dashboard': {
+		title: 'Analytics Dashboard',
+		description: 'Custom dashboards with widgets and queries.',
+		component: AnalyticsDashboard,
+	},
+};
+
+export interface TemplatePreviewContentProps {
+	templateId: TemplateId;
+}
+
+export function TemplatePreviewContent({
+	templateId,
+}: TemplatePreviewContentProps) {
+	const preview = PREVIEW_DEFINITIONS[templateId];
+
+	if (!preview) {
+		return null;
+	}
+
+	const PreviewComponent = preview.component;
+
+	return (
+		<TemplateShell
+			title={preview.title}
+			description={preview.description}
+			showSaveAction={false}
+		>
+			<PreviewComponent />
+		</TemplateShell>
+	);
+}

package/src/components/templates/TemplatesBrowseControls.tsx

@@ -0,0 +1,144 @@
+'use client';
+
+import { cn } from '@contractspec/lib.ui-kit-core/utils';
+import { Search } from 'lucide-react';
+import type { TemplateSource } from './template-source';
+import type { TemplateTagFacet } from './template-tag-visibility';
+
+export interface TemplatesBrowseControlsProps {
+	registryConfigured: boolean;
+	availableSources: readonly TemplateSource[];
+	source: TemplateSource;
+	onSourceChange: (source: TemplateSource) => void;
+	search: string;
+	onSearchChange: (value: string) => void;
+	selectedTag: string | null;
+	onTagChange: (tag: string | null) => void;
+	showTagFilters: boolean;
+	visibleTagFacets: readonly TemplateTagFacet[];
+	hiddenTagFacets: readonly TemplateTagFacet[];
+	showAllTags: boolean;
+	onShowAllTagsChange: (expanded: boolean) => void;
+}
+
+export function TemplatesBrowseControls({
+	registryConfigured,
+	availableSources,
+	source,
+	onSourceChange,
+	search,
+	onSearchChange,
+	selectedTag,
+	onTagChange,
+	showTagFilters,
+	visibleTagFacets,
+	hiddenTagFacets,
+	showAllTags,
+	onShowAllTagsChange,
+}: TemplatesBrowseControlsProps) {
+	return (
+		<section className="editorial-section">
+			<div className="editorial-shell space-y-6">
+				<div className="flex flex-col gap-6 lg:flex-row lg:items-end lg:justify-between">
+					<div className="max-w-3xl space-y-3">
+						<p className="editorial-kicker">Browse by source</p>
+						<h2 className="font-serif text-4xl tracking-[-0.04em]">
+							Use local scenarios for core proof, then scan the community.
+						</h2>
+						<p className="text-muted-foreground text-sm leading-7">
+							{registryConfigured
+								? 'Local templates show the official adoption path. Community templates show where the ecosystem is pushing the system next.'
+								: 'Local templates show the official adoption path. Community browsing appears automatically when a registry URL is configured.'}
+						</p>
+					</div>
+					{registryConfigured ? (
+						<div className="flex gap-2">
+							{availableSources.map((option) => (
+								<button
+									key={option}
+									onClick={() => onSourceChange(option)}
+									className={cn(
+										'rounded-full px-4 py-2 font-medium text-sm transition-colors',
+										{
+											'bg-primary text-primary-foreground': source === option,
+											'border border-border bg-card hover:bg-card/80':
+												source !== option,
+										}
+									)}
+									aria-pressed={source === option}
+								>
+									{option === 'local' ? 'Local' : 'Community'}
+								</button>
+							))}
+						</div>
+					) : null}
+				</div>
+
+				<div className="editorial-panel space-y-5">
+					<div className="relative">
+						<Search
+							className="absolute top-3.5 left-4 text-muted-foreground"
+							size={18}
+						/>
+						<input
+							type="text"
+							placeholder="Search scenarios, industries, or tags"
+							value={search}
+							onChange={(event) => onSearchChange(event.target.value)}
+							className="w-full rounded-full border border-border bg-background px-12 py-3 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
+							aria-label="Search templates"
+						/>
+					</div>
+					{showTagFilters ? (
+						<div className="space-y-3">
+							<div className="flex flex-wrap gap-2">
+								<button
+									onClick={() => onTagChange(null)}
+									className={cn(
+										'rounded-full px-4 py-2 font-medium text-sm transition-colors',
+										{
+											'bg-primary text-primary-foreground':
+												selectedTag === null,
+											'border border-border bg-card hover:bg-card/80':
+												selectedTag !== null,
+										}
+									)}
+									aria-pressed={selectedTag === null}
+								>
+									All
+								</button>
+								{visibleTagFacets.map((facet) => (
+									<button
+										key={facet.tag}
+										onClick={() => onTagChange(facet.tag)}
+										className={cn(
+											'rounded-full px-4 py-2 font-medium text-sm transition-colors',
+											{
+												'bg-primary text-primary-foreground':
+													selectedTag === facet.tag,
+												'border border-border bg-card hover:bg-card/80':
+													selectedTag !== facet.tag,
+											}
+										)}
+										aria-pressed={selectedTag === facet.tag}
+									>
+										{facet.tag}
+									</button>
+								))}
+							</div>
+							{hiddenTagFacets.length > 0 || showAllTags ? (
+								<button
+									type="button"
+									onClick={() => onShowAllTagsChange(!showAllTags)}
+									className="text-muted-foreground text-sm transition-colors hover:text-foreground"
+								>
+									{showAllTags ? 'Show fewer' : 'More tags'}
+								</button>
+							) : null}
+						</div>
+					) : null}
+				</div>
+			</div>
+		</section>
+	);
+}

package/src/components/templates/TemplatesCatalogSection.tsx

@@ -0,0 +1,191 @@
+'use client';
+
+import type { RegistryTemplate } from '@contractspec/lib.example-shared-ui';
+import Link from 'next/link';
+import { TemplateCard } from './TemplateCard';
+import {
+	formatExampleKindLabel,
+	formatStabilityLabel,
+	type LocalTemplateCatalogItem,
+} from './template-catalog';
+import {
+	getLocalTemplatePreviewAction,
+	getRegistryTemplatePreviewAction,
+} from './template-preview';
+import type { TemplateSource } from './template-source';
+
+export interface TemplatesCatalogSectionProps {
+	source: TemplateSource;
+	registryConfigured: boolean;
+	registryLoading: boolean;
+	registryHasTemplates: boolean;
+	localTemplates: readonly LocalTemplateCatalogItem[];
+	registryTemplates: readonly RegistryTemplate[];
+	localTemplateById: ReadonlyMap<string, LocalTemplateCatalogItem>;
+	onPreview: (templateId: string) => void;
+	onUseTemplate: (templateId: string, source: TemplateSource) => void;
+	hasSearch: boolean;
+	selectedTag: string | null;
+}
+
+export function TemplatesCatalogSection({
+	source,
+	registryConfigured,
+	registryLoading,
+	registryHasTemplates,
+	localTemplates,
+	registryTemplates,
+	localTemplateById,
+	onPreview,
+	onUseTemplate,
+	hasSearch,
+	selectedTag,
+}: TemplatesCatalogSectionProps) {
+	const showRegistry = source === 'registry' && registryConfigured;
+	const emptyStateMessage = getEmptyStateMessage(hasSearch, selectedTag);
+
+	return (
+		<section className="section-padding">
+			<div className="editorial-shell">
+				{showRegistry ? (
+					registryLoading ? (
+						<div className="py-12 text-center">
+							<p className="text-muted-foreground">
+								Loading community templates…
+							</p>
+						</div>
+					) : !registryHasTemplates ? (
+						<div className="py-12 text-center">
+							<p className="text-muted-foreground">
+								No community templates found.
+							</p>
+						</div>
+					) : registryTemplates.length === 0 ? (
+						<div className="py-12 text-center">
+							<p className="text-muted-foreground">{emptyStateMessage}</p>
+						</div>
+					) : (
+						<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+							{registryTemplates.map((template) => {
+								const localTemplate = localTemplateById.get(template.id);
+								const previewAction = getRegistryTemplatePreviewAction(
+									template,
+									localTemplate
+								);
+
+								return (
+									<TemplateCard
+										key={template.id}
+										title={template.name}
+										description={template.description}
+										metaBadges={['Community']}
+										tags={template.tags}
+										previewAction={
+											previewAction.kind === 'modal' ? (
+												<button
+													className="btn-ghost flex-1 text-center text-xs"
+													onClick={() => onPreview(template.id)}
+												>
+													Preview
+												</button>
+											) : previewAction.kind === 'sandbox' ? (
+												<Link
+													href={previewAction.href}
+													className="btn-ghost flex-1 text-center text-xs"
+												>
+													Open Sandbox
+												</Link>
+											) : (
+												<button
+													className="btn-ghost flex-1 cursor-not-allowed text-center text-xs opacity-60"
+													type="button"
+													disabled
+												>
+													Preview Unavailable
+												</button>
+											)
+										}
+										useAction={
+											<button
+												className="btn-primary flex-1 text-center text-xs"
+												onClick={() => onUseTemplate(template.id, 'registry')}
+											>
+												Use Template
+											</button>
+										}
+									/>
+								);
+							})}
+						</div>
+					)
+				) : localTemplates.length === 0 ? (
+					<div className="py-12 text-center">
+						<p className="text-muted-foreground">{emptyStateMessage}</p>
+					</div>
+				) : (
+					<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
+						{localTemplates.map((template) => {
+							const previewAction = getLocalTemplatePreviewAction(template);
+
+							return (
+								<TemplateCard
+									key={template.id}
+									title={template.title}
+									description={template.description}
+									isNew={template.isNew}
+									metaBadges={[
+										formatExampleKindLabel(template.kind),
+										formatStabilityLabel(template.stability),
+									]}
+									tags={template.tags}
+									featureList={template.featureList}
+									previewAction={
+										previewAction.kind === 'modal' ? (
+											<button
+												className="btn-ghost flex-1 text-center text-xs"
+												onClick={() => onPreview(template.id)}
+											>
+												Preview
+											</button>
+										) : (
+											<Link
+												href={previewAction.href}
+												className="btn-ghost flex-1 text-center text-xs"
+											>
+												Open Sandbox
+											</Link>
+										)
+									}
+									useAction={
+										<button
+											className="btn-primary flex-1 text-center text-xs"
+											onClick={() => onUseTemplate(template.id, 'local')}
+										>
+											Use Template
+										</button>
+									}
+								/>
+							);
+						})}
+					</div>
+				)}
+			</div>
+		</section>
+	);
+}
+
+function getEmptyStateMessage(
+	hasSearch: boolean,
+	selectedTag: string | null
+): string {
+	if (selectedTag !== null && hasSearch) {
+		return 'No templates match this tag for the current search.';
+	}
+	if (selectedTag !== null) {
+		return 'No templates match this tag. Try another tag or reset filters.';
+	}
+	if (hasSearch) {
+		return 'No templates match your search. Try a different keyword.';
+	}
+	return 'No templates match your filters. Try a different search.';
+}