@contractspec/example.saas-boilerplate 3.7.6 → 3.8.2

package/dist/ui/renderers/index.js

@@ -345,9 +345,216 @@ function createSaasHandlers(db) {
     getSubscription
   };
 }
+// src/visualizations/catalog.ts
+import {
+  defineVisualization,
+  VisualizationRegistry
+} from "@contractspec/lib.contracts-spec/visualizations";
+var PROJECT_LIST_REF = {
+  key: "saas.project.list",
+  version: "1.0.0"
+};
+var META = {
+  version: "1.0.0",
+  domain: "saas",
+  stability: "experimental",
+  owners: ["@example.saas-boilerplate"],
+  tags: ["saas", "visualization", "projects"]
+};
+var SaasProjectUsageVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "saas-boilerplate.visualization.project-usage",
+    title: "Project Capacity",
+    description: "Current project count against the current plan limit.",
+    goal: "Show usage against the active plan allowance.",
+    context: "SaaS account overview."
+  },
+  source: { primary: PROJECT_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "metric",
+    measure: "totalProjects",
+    comparisonMeasure: "projectLimit",
+    measures: [
+      {
+        key: "totalProjects",
+        label: "Projects",
+        dataPath: "totalProjects",
+        format: "number"
+      },
+      {
+        key: "projectLimit",
+        label: "Plan Limit",
+        dataPath: "projectLimit",
+        format: "number"
+      }
+    ],
+    table: { caption: "Current project count and plan limit." }
+  }
+});
+var SaasProjectStatusVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "saas-boilerplate.visualization.project-status",
+    title: "Project Status",
+    description: "Distribution of project states.",
+    goal: "Show the mix of active, draft, and archived projects.",
+    context: "Project portfolio overview."
+  },
+  source: { primary: PROJECT_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "pie",
+    nameDimension: "status",
+    valueMeasure: "projects",
+    dimensions: [
+      { key: "status", label: "Status", dataPath: "status", type: "category" }
+    ],
+    measures: [
+      {
+        key: "projects",
+        label: "Projects",
+        dataPath: "projects",
+        format: "number"
+      }
+    ],
+    table: { caption: "Project counts by status." }
+  }
+});
+var SaasProjectTierVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "saas-boilerplate.visualization.project-tiers",
+    title: "Tier Comparison",
+    description: "Distribution of projects across tiers.",
+    goal: "Compare how the current portfolio is distributed by tier.",
+    context: "Plan and packaging overview."
+  },
+  source: { primary: PROJECT_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "cartesian",
+    variant: "bar",
+    xDimension: "tier",
+    yMeasures: ["projects"],
+    dimensions: [
+      { key: "tier", label: "Tier", dataPath: "tier", type: "category" }
+    ],
+    measures: [
+      {
+        key: "projects",
+        label: "Projects",
+        dataPath: "projects",
+        format: "number",
+        color: "#1d4ed8"
+      }
+    ],
+    table: { caption: "Project counts by tier." }
+  }
+});
+var SaasProjectActivityVisualization = defineVisualization({
+  meta: {
+    ...META,
+    key: "saas-boilerplate.visualization.project-activity",
+    title: "Recent Project Activity",
+    description: "Daily project creation activity.",
+    goal: "Show recent project activity over time.",
+    context: "Project portfolio trend view."
+  },
+  source: { primary: PROJECT_LIST_REF, resultPath: "data" },
+  visualization: {
+    kind: "cartesian",
+    variant: "line",
+    xDimension: "day",
+    yMeasures: ["projects"],
+    dimensions: [{ key: "day", label: "Day", dataPath: "day", type: "time" }],
+    measures: [
+      {
+        key: "projects",
+        label: "Projects",
+        dataPath: "projects",
+        format: "number",
+        color: "#0f766e"
+      }
+    ],
+    table: { caption: "Daily project creation counts." }
+  }
+});
+var SaasVisualizationSpecs = [
+  SaasProjectUsageVisualization,
+  SaasProjectStatusVisualization,
+  SaasProjectTierVisualization,
+  SaasProjectActivityVisualization
+];
+var SaasVisualizationRegistry = new VisualizationRegistry([
+  ...SaasVisualizationSpecs
+]);
+var SaasVisualizationRefs = SaasVisualizationSpecs.map((spec) => ({
+  key: spec.meta.key,
+  version: spec.meta.version
+}));
+
+// src/visualizations/selectors.ts
+function toDayKey(value) {
+  const date = value instanceof Date ? value : new Date(value);
+  return date.toISOString().slice(0, 10);
+}
+function createSaasVisualizationItems(projects, projectLimit = 10) {
+  const statusCounts = new Map;
+  const tierCounts = new Map;
+  const activityCounts = new Map;
+  for (const project of projects) {
+    statusCounts.set(project.status, (statusCounts.get(project.status) ?? 0) + 1);
+    tierCounts.set(project.tier, (tierCounts.get(project.tier) ?? 0) + 1);
+    const day = toDayKey(project.createdAt);
+    activityCounts.set(day, (activityCounts.get(day) ?? 0) + 1);
+  }
+  return [
+    {
+      key: "saas-capacity",
+      spec: SaasProjectUsageVisualization,
+      data: { data: [{ totalProjects: projects.length, projectLimit }] },
+      title: "Project Capacity",
+      description: "Current project count compared to the active limit.",
+      height: 220
+    },
+    {
+      key: "saas-status",
+      spec: SaasProjectStatusVisualization,
+      data: {
+        data: Array.from(statusCounts.entries()).map(([status, count]) => ({
+          status,
+          projects: count
+        }))
+      },
+      title: "Project Status",
+      description: "Status mix across the current project portfolio.",
+      height: 260
+    },
+    {
+      key: "saas-tier",
+      spec: SaasProjectTierVisualization,
+      data: {
+        data: Array.from(tierCounts.entries()).map(([tier, count]) => ({
+          tier,
+          projects: count
+        }))
+      },
+      title: "Tier Comparison",
+      description: "How projects are distributed across tiers."
+    },
+    {
+      key: "saas-activity",
+      spec: SaasProjectActivityVisualization,
+      data: {
+        data: Array.from(activityCounts.entries()).sort(([left], [right]) => left.localeCompare(right)).map(([day, count]) => ({ day, projects: count }))
+      },
+      title: "Recent Project Activity",
+      description: "Daily project creation activity."
+    }
+  ];
+}
 // src/ui/hooks/useProjectList.ts
-import { useCallback, useEffect, useMemo, useState } from "react";
 import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+import { useCallback, useEffect, useMemo, useState } from "react";
 function useProjectList(options = {}) {
   const { handlers, projectId } = useTemplateRuntime();
   const { saas: saas2 } = handlers;
@@ -409,118 +616,19 @@ function useProjectList(options = {}) {
   };
 }
 
-// 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 PROJECT_TIERS = [
+  "FREE",
+  "PRO",
+  "ENTERPRISE"
+];
+function toVisualizationProject(project, index) {
+  return {
+    status: project.status === "DELETED" ? "ARCHIVED" : project.status,
+    tier: PROJECT_TIERS[index % PROJECT_TIERS.length] ?? "FREE",
+    createdAt: project.createdAt
+  };
+}
 var projectListMarkdownRenderer = {
   target: "markdown",
   render: async (desc, _ctx) => {
@@ -531,7 +639,7 @@ var projectListMarkdownRenderer = {
       limit: 20,
       offset: 0
     });
-    const items = data.projects ?? data.items ?? [];
+    const items = data.projects ?? [];
     const lines = [
       "# Projects",
       "",
@@ -568,6 +676,7 @@ var saasDashboardMarkdownRenderer = {
     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 = [
       "# SaaS Dashboard",
       "",
@@ -582,10 +691,16 @@ var saasDashboardMarkdownRenderer = {
       `| Archived Projects | ${archivedProjects} |`,
       `| Subscription Plan | ${subscription.planName} |`,
       `| Subscription Status | ${subscription.status} |`,
-      "",
-      "## Projects",
       ""
     ];
+    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 {
@@ -668,6 +783,117 @@ var saasBillingMarkdownRenderer = {
     };
   }
 };
+
+// src/ui/SaasProjectList.tsx
+import {
+  Button,
+  EmptyState,
+  EntityCard,
+  ErrorState,
+  LoaderBlock,
+  StatCard,
+  StatCardGroup,
+  StatusChip
+} 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);
+  }
+};
 export {
   saasDashboardMarkdownRenderer,
   saasBillingMarkdownRenderer,