@contractspec/example.saas-boilerplate 1.46.1 → 1.48.0

package/src/ui/modals/ProjectActionsModal.tsx

@@ -0,0 +1,346 @@
+'use client';
+
+/**
+ * ProjectActionsModal - Actions for a specific project
+ *
+ * Wires to UpdateProjectContract, DeleteProjectContract
+ * via useProjectMutations hook.
+ */
+import { useEffect, useState } from 'react';
+import { Button, Input } from '@contractspec/lib.design-system';
+
+// Local type definitions for modal props
+export interface Project {
+  id: string;
+  name: string;
+  description?: string;
+  status: 'DRAFT' | 'ACTIVE' | 'ARCHIVED';
+  tier: 'FREE' | 'PRO' | 'ENTERPRISE';
+}
+
+export interface UpdateProjectInput {
+  id: string;
+  name?: string;
+  description?: string;
+}
+
+type ActionMode = 'menu' | 'edit' | 'archive' | 'delete';
+
+interface ProjectActionsModalProps {
+  isOpen: boolean;
+  project: Project | null;
+  onClose: () => void;
+  onUpdate: (input: UpdateProjectInput) => Promise<void>;
+  onArchive: (projectId: string) => Promise<void>;
+  onActivate: (projectId: string) => Promise<void>;
+  onDelete: (projectId: string) => Promise<void>;
+  isLoading?: boolean;
+}
+
+export function ProjectActionsModal({
+  isOpen,
+  project,
+  onClose,
+  onUpdate,
+  onArchive,
+  onActivate,
+  onDelete,
+  isLoading = false,
+}: ProjectActionsModalProps) {
+  const [mode, setMode] = useState<ActionMode>('menu');
+  const [name, setName] = useState('');
+  const [description, setDescription] = useState('');
+  const [error, setError] = useState<string | null>(null);
+
+  const resetForm = () => {
+    setMode('menu');
+    setError(null);
+    if (project) {
+      setName(project.name);
+      setDescription(project.description ?? '');
+    }
+  };
+
+  const handleClose = () => {
+    resetForm();
+    onClose();
+  };
+
+  // Initialize form when project changes
+  useEffect(() => {
+    if (project) {
+      setName(project.name);
+      setDescription(project.description ?? '');
+    }
+  }, [project]);
+
+  const handleEdit = async () => {
+    if (!project) return;
+    setError(null);
+
+    if (!name.trim()) {
+      setError('Project name is required');
+      return;
+    }
+
+    try {
+      await onUpdate({
+        id: project.id,
+        name: name.trim(),
+        description: description.trim() || undefined,
+      });
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to update project');
+    }
+  };
+
+  const handleArchive = async () => {
+    if (!project) return;
+    setError(null);
+
+    try {
+      await onArchive(project.id);
+      handleClose();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Failed to archive project'
+      );
+    }
+  };
+
+  const handleActivate = async () => {
+    if (!project) return;
+    setError(null);
+
+    try {
+      await onActivate(project.id);
+      handleClose();
+    } catch (err) {
+      setError(
+        err instanceof Error ? err.message : 'Failed to activate project'
+      );
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!project) return;
+    setError(null);
+
+    try {
+      await onDelete(project.id);
+      handleClose();
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Failed to delete project');
+    }
+  };
+
+  if (!isOpen || !project) return null;
+
+  return (
+    <div className="fixed inset-0 z-50 flex items-center justify-center">
+      {/* Backdrop */}
+      <div
+        className="bg-background/80 absolute inset-0 backdrop-blur-sm"
+        onClick={handleClose}
+        role="button"
+        tabIndex={0}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') handleClose();
+        }}
+        aria-label="Close modal"
+      />
+
+      {/* Modal */}
+      <div className="bg-card border-border relative z-10 w-full max-w-md rounded-xl border p-6 shadow-xl">
+        {/* Project Header */}
+        <div className="border-border mb-4 border-b pb-4">
+          <h2 className="text-xl font-semibold">{project.name}</h2>
+          <p className="text-muted-foreground text-sm">
+            {project.tier} · {project.status}
+          </p>
+        </div>
+
+        {/* Main Menu */}
+        {mode === 'menu' && (
+          <div className="space-y-3">
+            <Button
+              className="w-full justify-start"
+              variant="ghost"
+              onPress={() => setMode('edit')}
+            >
+              <span className="mr-2">✏️</span> Edit Project
+            </Button>
+
+            {project.status === 'ACTIVE' || project.status === 'DRAFT' ? (
+              <Button
+                className="w-full justify-start"
+                variant="ghost"
+                onPress={() => setMode('archive')}
+              >
+                <span className="mr-2">📦</span> Archive Project
+              </Button>
+            ) : project.status === 'ARCHIVED' ? (
+              <Button
+                className="w-full justify-start"
+                variant="ghost"
+                onPress={handleActivate}
+                disabled={isLoading}
+              >
+                <span className="mr-2">🔄</span> Restore Project
+              </Button>
+            ) : null}
+
+            <Button
+              className="w-full justify-start text-red-500 hover:text-red-600"
+              variant="ghost"
+              onPress={() => setMode('delete')}
+            >
+              <span className="mr-2">🗑️</span> Delete Project
+            </Button>
+
+            <div className="border-border border-t pt-3">
+              <Button
+                className="w-full"
+                variant="outline"
+                onPress={handleClose}
+              >
+                Close
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Edit Form */}
+        {mode === 'edit' && (
+          <div className="space-y-4">
+            <div>
+              <label
+                htmlFor="edit-name"
+                className="text-muted-foreground mb-1 block text-sm font-medium"
+              >
+                Project Name *
+              </label>
+              <Input
+                id="edit-name"
+                value={name}
+                onChange={(e) => setName(e.target.value)}
+                disabled={isLoading}
+              />
+            </div>
+
+            <div>
+              <label
+                htmlFor="edit-description"
+                className="text-muted-foreground mb-1 block text-sm font-medium"
+              >
+                Description
+              </label>
+              <textarea
+                id="edit-description"
+                value={description}
+                onChange={(e) => setDescription(e.target.value)}
+                rows={3}
+                disabled={isLoading}
+                className="border-input bg-background focus:ring-ring w-full rounded-md border px-3 py-2 text-sm focus:ring-2 focus:outline-none disabled:opacity-50"
+              />
+            </div>
+
+            {error && (
+              <div className="bg-destructive/10 text-destructive rounded-md p-3 text-sm">
+                {error}
+              </div>
+            )}
+
+            <div className="flex justify-end gap-3 pt-2">
+              <Button
+                variant="ghost"
+                onPress={() => setMode('menu')}
+                disabled={isLoading}
+              >
+                Back
+              </Button>
+              <Button onPress={handleEdit} disabled={isLoading}>
+                {isLoading ? 'Saving...' : 'Save Changes'}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Archive Confirmation */}
+        {mode === 'archive' && (
+          <div className="space-y-4">
+            <p className="text-muted-foreground">
+              Are you sure you want to archive{' '}
+              <span className="text-foreground font-medium">
+                {project.name}
+              </span>
+              ?
+            </p>
+            <p className="text-muted-foreground text-sm">
+              Archived projects can be restored later.
+            </p>
+
+            {error && (
+              <div className="bg-destructive/10 text-destructive rounded-md p-3 text-sm">
+                {error}
+              </div>
+            )}
+
+            <div className="flex justify-end gap-3 pt-2">
+              <Button
+                variant="ghost"
+                onPress={() => setMode('menu')}
+                disabled={isLoading}
+              >
+                Cancel
+              </Button>
+              <Button onPress={handleArchive} disabled={isLoading}>
+                {isLoading ? 'Archiving...' : '📦 Archive'}
+              </Button>
+            </div>
+          </div>
+        )}
+
+        {/* Delete Confirmation */}
+        {mode === 'delete' && (
+          <div className="space-y-4">
+            <p className="text-muted-foreground">
+              Are you sure you want to delete{' '}
+              <span className="text-foreground font-medium">
+                {project.name}
+              </span>
+              ?
+            </p>
+            <p className="text-destructive text-sm">
+              This action cannot be undone.
+            </p>
+
+            {error && (
+              <div className="bg-destructive/10 text-destructive rounded-md p-3 text-sm">
+                {error}
+              </div>
+            )}
+
+            <div className="flex justify-end gap-3 pt-2">
+              <Button
+                variant="ghost"
+                onPress={() => setMode('menu')}
+                disabled={isLoading}
+              >
+                Cancel
+              </Button>
+              <Button
+                variant="destructive"
+                onPress={handleDelete}
+                disabled={isLoading}
+              >
+                {isLoading ? 'Deleting...' : '🗑️ Delete'}
+              </Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/ui/modals/index.ts

@@ -0,0 +1,2 @@
+export { CreateProjectModal } from './CreateProjectModal';
+export { ProjectActionsModal } from './ProjectActionsModal';

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

@@ -0,0 +1,74 @@
+/**
+ * Demo Overlay Definitions for SaaS Boilerplate
+ *
+ * These overlays customize the presentation for different contexts
+ * (e.g., demo users, different subscription tiers).
+ */
+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',
+    },
+  ],
+};
+
+/**
+ * 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',
+    },
+  ],
+};
+
+/**
+ * All overlays for saas-boilerplate
+ */
+export const saasOverlays: OverlayDefinition[] = [
+  saasFreeUserOverlay,
+  saasDemoOverlay,
+];

package/src/ui/overlays/index.ts

@@ -0,0 +1 @@
+export * from './demo-overlays';

package/src/ui/renderers/index.ts

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

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

@@ -0,0 +1,239 @@
+/**
+ * Markdown renderer for SaaS Project List presentation
+ *
+ * Uses dynamic import to ensure correct build order.
+ */
+import type { PresentationRenderer } from '@contractspec/lib.contracts';
+import {
+  mockListProjectsHandler,
+  mockGetSubscriptionHandler,
+} from '@contractspec/example.saas-boilerplate/handlers';
+
+interface ProjectItem {
+  id: string;
+  name: string;
+  status: string;
+  description?: string;
+}
+
+/**
+ * Markdown renderer for saas-boilerplate.project.list presentation
+ * Only handles ProjectListView component
+ */
+export const projectListMarkdownRenderer: PresentationRenderer<{
+  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'),
+    };
+  },
+};
+
+/**
+ * Markdown renderer for saas-boilerplate.dashboard presentation
+ * Only handles SaasDashboard component
+ */
+export const saasDashboardMarkdownRenderer: PresentationRenderer<{
+  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'),
+    };
+  },
+};
+
+/**
+ * Markdown renderer for saas-boilerplate.billing.settings presentation
+ * Only handles SubscriptionView component
+ */
+export const saasBillingMarkdownRenderer: PresentationRenderer<{
+  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'),
+    };
+  },
+};

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

@@ -0,0 +1,22 @@
+/**
+ * React renderer for SaaS Project List presentation
+ */
+import * as React from 'react';
+import type { PresentationRenderer } from '@contractspec/lib.contracts';
+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');
+      }
+
+      if (desc.source.componentKey !== 'SaasProjectListView') {
+        throw new Error(`Unknown component: ${desc.source.componentKey}`);
+      }
+
+      return <SaasProjectList />;
+    },
+  };

package/tsconfig.json

@@ -1,7 +1,7 @@
 {
   "extends": "@contractspec/tool.typescript/react-library.json",
   "include": ["src"],
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules", "dist"],
   "compilerOptions": {
     "rootDir": "src",
     "outDir": "dist"