@contractspec/example.saas-boilerplate 1.57.0 → 1.58.0

package/dist/ui/renderers/index.js

@@ -1,4 +1,676 @@
-import { projectListReactRenderer } from "./project-list.renderer.js";
-import { projectListMarkdownRenderer, saasBillingMarkdownRenderer, saasDashboardMarkdownRenderer } from "./project-list.markdown.js";
+// @bun
+// src/shared/mock-data.ts
+var MOCK_PROJECTS = [
+  {
+    id: "proj-1",
+    name: "Marketing Website",
+    description: "Main company website redesign project",
+    slug: "marketing-website",
+    organizationId: "demo-org",
+    createdBy: "user-1",
+    status: "ACTIVE",
+    isPublic: false,
+    tags: ["marketing", "website", "redesign"],
+    createdAt: new Date("2024-01-15T10:00:00Z"),
+    updatedAt: new Date("2024-03-20T14:30:00Z")
+  },
+  {
+    id: "proj-2",
+    name: "Mobile App v2",
+    description: "Next generation mobile application",
+    slug: "mobile-app-v2",
+    organizationId: "demo-org",
+    createdBy: "user-2",
+    status: "ACTIVE",
+    isPublic: false,
+    tags: ["mobile", "app", "v2"],
+    createdAt: new Date("2024-02-01T09:00:00Z"),
+    updatedAt: new Date("2024-04-05T11:15:00Z")
+  },
+  {
+    id: "proj-3",
+    name: "API Integration",
+    description: "Third-party API integration project",
+    slug: "api-integration",
+    organizationId: "demo-org",
+    createdBy: "user-1",
+    status: "DRAFT",
+    isPublic: false,
+    tags: ["api", "integration"],
+    createdAt: new Date("2024-03-10T08:00:00Z"),
+    updatedAt: new Date("2024-03-10T08:00:00Z")
+  },
+  {
+    id: "proj-4",
+    name: "Analytics Dashboard",
+    description: "Internal analytics and reporting dashboard",
+    slug: "analytics-dashboard",
+    organizationId: "demo-org",
+    createdBy: "user-3",
+    status: "ARCHIVED",
+    isPublic: true,
+    tags: ["analytics", "dashboard", "reporting"],
+    createdAt: new Date("2023-10-01T12:00:00Z"),
+    updatedAt: new Date("2024-02-28T16:45:00Z")
+  }
+];
+var MOCK_SUBSCRIPTION = {
+  id: "sub-1",
+  organizationId: "demo-org",
+  planId: "pro",
+  planName: "Professional",
+  status: "ACTIVE",
+  currentPeriodStart: new Date("2024-04-01T00:00:00Z"),
+  currentPeriodEnd: new Date("2024-05-01T00:00:00Z"),
+  limits: {
+    projects: 25,
+    users: 10,
+    storage: 50,
+    apiCalls: 1e5
+  },
+  usage: {
+    projects: 4,
+    users: 5,
+    storage: 12.5,
+    apiCalls: 45230
+  }
+};
+var MOCK_USAGE_SUMMARY = {
+  organizationId: "demo-org",
+  period: "current_month",
+  apiCalls: {
+    total: 45230,
+    limit: 1e5,
+    percentUsed: 45.23
+  },
+  storage: {
+    totalGb: 12.5,
+    limitGb: 50,
+    percentUsed: 25
+  },
+  activeProjects: 4,
+  activeUsers: 5,
+  breakdown: [
+    { date: "2024-04-01", apiCalls: 3200, storageGb: 12.1 },
+    { date: "2024-04-02", apiCalls: 2800, storageGb: 12.2 },
+    { date: "2024-04-03", apiCalls: 4100, storageGb: 12.3 },
+    { date: "2024-04-04", apiCalls: 3600, storageGb: 12.4 },
+    { date: "2024-04-05", apiCalls: 3800, storageGb: 12.5 }
+  ]
+};
 
-export { projectListMarkdownRenderer, projectListReactRenderer, saasBillingMarkdownRenderer, saasDashboardMarkdownRenderer };
+// src/billing/billing.handler.ts
+async function mockGetSubscriptionHandler() {
+  return MOCK_SUBSCRIPTION;
+}
+async function mockGetUsageSummaryHandler(input) {
+  return {
+    ...MOCK_USAGE_SUMMARY,
+    period: input.period ?? "current_month"
+  };
+}
+async function mockRecordUsageHandler(input) {
+  const currentUsage = MOCK_USAGE_SUMMARY.apiCalls.total;
+  const newTotal = currentUsage + input.quantity;
+  return {
+    recorded: true,
+    newTotal
+  };
+}
+async function mockCheckFeatureAccessHandler(input) {
+  const { feature } = input;
+  const featureMap = {
+    custom_domains: {
+      allowed: true
+    },
+    api_access: {
+      allowed: true,
+      currentUsage: MOCK_USAGE_SUMMARY.apiCalls.total,
+      limit: MOCK_USAGE_SUMMARY.apiCalls.limit
+    },
+    advanced_analytics: {
+      allowed: false,
+      reason: "FEATURE_NOT_INCLUDED"
+    },
+    unlimited_projects: {
+      allowed: false,
+      reason: "PLAN_LIMIT",
+      currentUsage: MOCK_SUBSCRIPTION.usage.projects,
+      limit: MOCK_SUBSCRIPTION.limits.projects
+    }
+  };
+  return featureMap[feature] ?? { allowed: true };
+}
+
+// src/project/project.handler.ts
+async function mockListProjectsHandler(input) {
+  const { status, search, limit = 20, offset = 0 } = input;
+  let filtered = [...MOCK_PROJECTS];
+  if (status && status !== "all") {
+    filtered = filtered.filter((p) => p.status === status);
+  }
+  if (search) {
+    const q = search.toLowerCase();
+    filtered = filtered.filter((p) => p.name.toLowerCase().includes(q) || p.description?.toLowerCase().includes(q) || p.tags.some((t) => t.toLowerCase().includes(q)));
+  }
+  filtered.sort((a, b) => b.updatedAt.getTime() - a.updatedAt.getTime());
+  const total = filtered.length;
+  const projects = filtered.slice(offset, offset + limit);
+  return {
+    projects,
+    total
+  };
+}
+async function mockGetProjectHandler(input) {
+  const project = MOCK_PROJECTS.find((p) => p.id === input.projectId);
+  if (!project) {
+    throw new Error("NOT_FOUND");
+  }
+  return project;
+}
+async function mockCreateProjectHandler(input, context) {
+  if (input.slug) {
+    const exists = MOCK_PROJECTS.some((p) => p.slug === input.slug);
+    if (exists) {
+      throw new Error("SLUG_EXISTS");
+    }
+  }
+  const now = new Date;
+  return {
+    id: `proj-${Date.now()}`,
+    name: input.name,
+    description: input.description,
+    slug: input.slug ?? input.name.toLowerCase().replace(/\s+/g, "-"),
+    organizationId: context.organizationId,
+    createdBy: context.userId,
+    status: "DRAFT",
+    isPublic: input.isPublic ?? false,
+    tags: input.tags ?? [],
+    createdAt: now,
+    updatedAt: now
+  };
+}
+async function mockUpdateProjectHandler(input) {
+  const project = MOCK_PROJECTS.find((p) => p.id === input.projectId);
+  if (!project) {
+    throw new Error("NOT_FOUND");
+  }
+  return {
+    ...project,
+    name: input.name ?? project.name,
+    description: input.description ?? project.description,
+    slug: input.slug ?? project.slug,
+    isPublic: input.isPublic ?? project.isPublic,
+    tags: input.tags ?? project.tags,
+    status: input.status ?? project.status,
+    updatedAt: new Date
+  };
+}
+async function mockDeleteProjectHandler(input) {
+  const project = MOCK_PROJECTS.find((p) => p.id === input.projectId);
+  if (!project) {
+    throw new Error("NOT_FOUND");
+  }
+  return { success: true };
+}
+
+// src/handlers/saas.handlers.ts
+import { web } from "@contractspec/lib.runtime-sandbox";
+var { generateId } = web;
+function rowToProject(row) {
+  return {
+    id: row.id,
+    projectId: row.projectId,
+    organizationId: row.organizationId,
+    name: row.name,
+    description: row.description ?? undefined,
+    status: row.status,
+    tier: row.tier,
+    createdAt: new Date(row.createdAt),
+    updatedAt: new Date(row.updatedAt)
+  };
+}
+function rowToSubscription(row) {
+  return {
+    id: row.id,
+    projectId: row.projectId,
+    organizationId: row.organizationId,
+    plan: row.plan,
+    status: row.status,
+    billingCycle: row.billingCycle,
+    currentPeriodStart: new Date(row.currentPeriodStart),
+    currentPeriodEnd: new Date(row.currentPeriodEnd),
+    cancelAtPeriodEnd: Boolean(row.cancelAtPeriodEnd)
+  };
+}
+function createSaasHandlers(db) {
+  async function listProjects(input) {
+    const {
+      projectId,
+      organizationId,
+      status,
+      search,
+      limit = 20,
+      offset = 0
+    } = input;
+    let whereClause = "WHERE projectId = ?";
+    const params = [projectId];
+    if (organizationId) {
+      whereClause += " AND organizationId = ?";
+      params.push(organizationId);
+    }
+    if (status && status !== "all") {
+      whereClause += " AND status = ?";
+      params.push(status);
+    }
+    if (search) {
+      whereClause += " AND (name LIKE ? OR description LIKE ?)";
+      params.push(`%${search}%`, `%${search}%`);
+    }
+    const countResult = (await db.query(`SELECT COUNT(*) as count FROM saas_project ${whereClause}`, params)).rows;
+    const total = countResult[0]?.count ?? 0;
+    const rows = (await db.query(`SELECT * FROM saas_project ${whereClause} ORDER BY createdAt DESC LIMIT ? OFFSET ?`, [...params, limit, offset])).rows;
+    return {
+      items: rows.map(rowToProject),
+      total,
+      hasMore: offset + rows.length < total
+    };
+  }
+  async function getProject(id) {
+    const rows = (await db.query(`SELECT * FROM saas_project WHERE id = ?`, [id])).rows;
+    return rows[0] ? rowToProject(rows[0]) : null;
+  }
+  async function createProject(input, context) {
+    const id = generateId("proj");
+    const now = new Date().toISOString();
+    await db.execute(`INSERT INTO saas_project (id, projectId, organizationId, name, description, status, tier, createdAt, updatedAt)
+       VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`, [
+      id,
+      context.projectId,
+      context.organizationId,
+      input.name,
+      input.description ?? null,
+      "DRAFT",
+      input.tier ?? "FREE",
+      now,
+      now
+    ]);
+    const rows = (await db.query(`SELECT * FROM saas_project WHERE id = ?`, [id])).rows;
+    return rowToProject(rows[0]);
+  }
+  async function updateProject(input) {
+    const now = new Date().toISOString();
+    const updates = ["updatedAt = ?"];
+    const params = [now];
+    if (input.name !== undefined) {
+      updates.push("name = ?");
+      params.push(input.name);
+    }
+    if (input.description !== undefined) {
+      updates.push("description = ?");
+      params.push(input.description);
+    }
+    if (input.status !== undefined) {
+      updates.push("status = ?");
+      params.push(input.status);
+    }
+    params.push(input.id);
+    await db.execute(`UPDATE saas_project SET ${updates.join(", ")} WHERE id = ?`, params);
+    const rows = (await db.query(`SELECT * FROM saas_project WHERE id = ?`, [input.id])).rows;
+    if (!rows[0]) {
+      throw new Error("NOT_FOUND");
+    }
+    return rowToProject(rows[0]);
+  }
+  async function deleteProject(id) {
+    await db.execute(`DELETE FROM saas_project WHERE id = ?`, [id]);
+  }
+  async function getSubscription(input) {
+    let query = `SELECT * FROM saas_subscription WHERE projectId = ?`;
+    const params = [input.projectId];
+    if (input.organizationId) {
+      query += " AND organizationId = ?";
+      params.push(input.organizationId);
+    }
+    query += " LIMIT 1";
+    const rows = (await db.query(query, params)).rows;
+    return rows[0] ? rowToSubscription(rows[0]) : null;
+  }
+  return {
+    listProjects,
+    getProject,
+    createProject,
+    updateProject,
+    deleteProject,
+    getSubscription
+  };
+}
+// src/ui/hooks/useProjectList.ts
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+function useProjectList(options = {}) {
+  const { handlers, projectId } = useTemplateRuntime();
+  const { saas: saas2 } = handlers;
+  const [data, setData] = useState(null);
+  const [subscription, setSubscription] = useState(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [page, setPage] = useState(1);
+  const fetchData = useCallback(async () => {
+    setLoading(true);
+    setError(null);
+    try {
+      const [projectsResult, subscriptionResult] = await Promise.all([
+        saas2.listProjects({
+          projectId,
+          status: options.status === "all" ? undefined : options.status,
+          search: options.search,
+          limit: options.limit ?? 20,
+          offset: (page - 1) * (options.limit ?? 20)
+        }),
+        saas2.getSubscription({ projectId })
+      ]);
+      setData({
+        items: projectsResult.items,
+        total: projectsResult.total
+      });
+      setSubscription(subscriptionResult);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error("Unknown error"));
+    } finally {
+      setLoading(false);
+    }
+  }, [saas2, projectId, options.status, options.search, options.limit, page]);
+  useEffect(() => {
+    fetchData();
+  }, [fetchData]);
+  const stats = useMemo(() => {
+    if (!data)
+      return null;
+    const items = data.items;
+    return {
+      total: data.total,
+      activeCount: items.filter((p) => p.status === "ACTIVE").length,
+      draftCount: items.filter((p) => p.status === "DRAFT").length,
+      projectLimit: 10,
+      usagePercent: Math.min(data.total / 10 * 100, 100)
+    };
+  }, [data]);
+  return {
+    data,
+    subscription,
+    loading,
+    error,
+    stats,
+    page,
+    refetch: fetchData,
+    nextPage: () => setPage((p) => p + 1),
+    prevPage: () => page > 1 && setPage((p) => p - 1)
+  };
+}
+
+// src/ui/SaasProjectList.tsx
+import {
+  StatCard,
+  StatCardGroup,
+  StatusChip,
+  EntityCard,
+  EmptyState,
+  LoaderBlock,
+  ErrorState,
+  Button
+} from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function getStatusTone(status) {
+  switch (status) {
+    case "ACTIVE":
+      return "success";
+    case "DRAFT":
+      return "neutral";
+    case "ARCHIVED":
+      return "danger";
+    default:
+      return "neutral";
+  }
+}
+function SaasProjectList({
+  onProjectClick,
+  onCreateProject
+}) {
+  const { data, loading, error, stats, refetch } = useProjectList();
+  if (loading && !data) {
+    return /* @__PURE__ */ jsxDEV(LoaderBlock, {
+      label: "Loading projects..."
+    }, undefined, false, undefined, this);
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxDEV(ErrorState, {
+      title: "Failed to load projects",
+      description: error.message,
+      onRetry: refetch,
+      retryLabel: "Retry"
+    }, undefined, false, undefined, this);
+  }
+  if (!data?.items.length) {
+    return /* @__PURE__ */ jsxDEV(EmptyState, {
+      title: "No projects found",
+      description: "Create your first project to get started.",
+      primaryAction: onCreateProject ? /* @__PURE__ */ jsxDEV(Button, {
+        onPress: onCreateProject,
+        children: "Create Project"
+      }, undefined, false, undefined, this) : undefined
+    }, undefined, false, undefined, this);
+  }
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "space-y-6",
+    children: [
+      stats && /* @__PURE__ */ jsxDEV(StatCardGroup, {
+        children: [
+          /* @__PURE__ */ jsxDEV(StatCard, {
+            label: "Total Projects",
+            value: stats.total.toString()
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(StatCard, {
+            label: "Active",
+            value: stats.activeCount.toString()
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV(StatCard, {
+            label: "Draft",
+            value: stats.draftCount.toString()
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "grid gap-4 md:grid-cols-2 lg:grid-cols-3",
+        children: data.items.map((project) => /* @__PURE__ */ jsxDEV(EntityCard, {
+          cardTitle: project.name,
+          cardSubtitle: project.tier,
+          meta: /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground text-sm",
+            children: project.description
+          }, undefined, false, undefined, this),
+          chips: /* @__PURE__ */ jsxDEV(StatusChip, {
+            tone: getStatusTone(project.status),
+            label: project.status
+          }, undefined, false, undefined, this),
+          footer: /* @__PURE__ */ jsxDEV("span", {
+            className: "text-muted-foreground text-xs",
+            children: project.updatedAt.toLocaleDateString()
+          }, undefined, false, undefined, this),
+          onClick: onProjectClick ? () => onProjectClick(project.id) : undefined
+        }, project.id, false, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/renderers/project-list.renderer.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+var projectListReactRenderer = {
+  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 /* @__PURE__ */ jsxDEV2(SaasProjectList, {}, undefined, false, undefined, this);
+  }
+};
+
+// src/ui/renderers/project-list.markdown.ts
+var projectListMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc, _ctx) => {
+    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 ?? data.items ?? [];
+    const lines = [
+      "# 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" ? "\u2705" : project.status === "ARCHIVED" ? "\uD83D\uDCE6" : "\u23F8\uFE0F";
+        lines.push(`| ${status} | **${project.name}** | ${project.description ?? "-"} |`);
+      }
+    }
+    return {
+      mimeType: "text/markdown",
+      body: lines.join(`
+`)
+    };
+  }
+};
+var saasDashboardMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc, _ctx) => {
+    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 lines = [
+      "# 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" ? "\u2705" : project.status === "ARCHIVED" ? "\uD83D\uDCE6" : "\u23F8\uFE0F";
+        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(`
+`)
+    };
+  }
+};
+var saasBillingMarkdownRenderer = {
+  target: "markdown",
+  render: async (desc, _ctx) => {
+    if (desc.source.type !== "component" || desc.source.componentKey !== "SubscriptionView") {
+      throw new Error("saasBillingMarkdownRenderer: not SubscriptionView");
+    }
+    const subscription = await mockGetSubscriptionHandler();
+    const lines = [
+      "# 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("- \u2705 Up to 3 projects");
+      lines.push("- \u2705 Basic support");
+      lines.push("- \u274C Priority support");
+      lines.push("- \u274C Advanced analytics");
+    } else if (subscription.planName.toLowerCase().includes("pro")) {
+      lines.push("- \u2705 Unlimited projects");
+      lines.push("- \u2705 Priority support");
+      lines.push("- \u2705 Advanced analytics");
+      lines.push("- \u274C Custom integrations");
+    } else {
+      lines.push("- \u2705 Unlimited projects");
+      lines.push("- \u2705 Priority support");
+      lines.push("- \u2705 Advanced analytics");
+      lines.push("- \u2705 Custom integrations");
+      lines.push("- \u2705 Dedicated support");
+    }
+    return {
+      mimeType: "text/markdown",
+      body: lines.join(`
+`)
+    };
+  }
+};
+export {
+  saasDashboardMarkdownRenderer,
+  saasBillingMarkdownRenderer,
+  projectListReactRenderer,
+  projectListMarkdownRenderer
+};