@contractspec/example.saas-boilerplate 3.7.6 → 3.8.2

package/dist/node/ui/SaasDashboard.visualizations.js

@@ -0,0 +1,249 @@
+// 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/SaasDashboard.visualizations.tsx
+import {
+  VisualizationCard,
+  VisualizationGrid
+} from "@contractspec/lib.design-system";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+function SaasVisualizationOverview({
+  projects,
+  projectLimit
+}) {
+  const items = createSaasVisualizationItems(projects, projectLimit);
+  return /* @__PURE__ */ jsxDEV("section", {
+    className: "space-y-3",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        children: [
+          /* @__PURE__ */ jsxDEV("h3", {
+            className: "font-semibold text-lg",
+            children: "Portfolio Visualizations"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV("p", {
+            className: "text-muted-foreground text-sm",
+            children: "Contract-backed charts for project mix, capacity, and activity."
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV(VisualizationGrid, {
+        children: items.map((item) => /* @__PURE__ */ jsxDEV(VisualizationCard, {
+          data: item.data,
+          description: item.description,
+          height: item.height,
+          spec: item.spec,
+          title: item.title
+        }, item.key, false, undefined, this))
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+export {
+  SaasVisualizationOverview
+};

package/dist/node/ui/SaasProjectList.js

@@ -1,6 +1,6 @@
 // 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 } = handlers;
@@ -64,14 +64,14 @@ function useProjectList(options = {}) {
 
 // src/ui/SaasProjectList.tsx
 import {
-  StatCard,
-  StatCardGroup,
-  StatusChip,
-  EntityCard,
+  Button,
   EmptyState,
-  LoaderBlock,
+  EntityCard,
   ErrorState,
-  Button
+  LoaderBlock,
+  StatCard,
+  StatCardGroup,
+  StatusChip
 } from "@contractspec/lib.design-system";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";

package/dist/node/ui/SaasSettingsPanel.js

@@ -1,6 +1,6 @@
 // src/ui/SaasSettingsPanel.tsx
-import { useState } from "react";
 import { Button } from "@contractspec/lib.design-system";
+import { useState } from "react";
 import { jsxDEV } from "react/jsx-dev-runtime";
 "use client";
 function SaasSettingsPanel() {
@@ -10,10 +10,10 @@ function SaasSettingsPanel() {
     className: "space-y-6",
     children: [
       /* @__PURE__ */ jsxDEV("div", {
-        className: "border-border bg-card rounded-xl border p-6",
+        className: "rounded-xl border border-border bg-card p-6",
         children: [
           /* @__PURE__ */ jsxDEV("h3", {
-            className: "mb-4 text-lg font-semibold",
+            className: "mb-4 font-semibold text-lg",
             children: "Organization Settings"
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV("div", {
@@ -23,7 +23,7 @@ function SaasSettingsPanel() {
                 children: [
                   /* @__PURE__ */ jsxDEV("label", {
                     htmlFor: "setting-org-name",
-                    className: "block text-sm font-medium",
+                    className: "block font-medium text-sm",
                     children: "Organization Name"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV("input", {
@@ -31,7 +31,7 @@ function SaasSettingsPanel() {
                     type: "text",
                     value: orgName,
                     onChange: (e) => setOrgName(e.target.value),
-                    className: "border-input bg-background mt-1 block w-full rounded-md border px-3 py-2"
+                    className: "mt-1 block w-full rounded-md border border-input bg-background px-3 py-2"
                   }, undefined, false, undefined, this)
                 ]
               }, undefined, true, undefined, this),
@@ -39,14 +39,14 @@ function SaasSettingsPanel() {
                 children: [
                   /* @__PURE__ */ jsxDEV("label", {
                     htmlFor: "setting-timezone",
-                    className: "block text-sm font-medium",
+                    className: "block font-medium text-sm",
                     children: "Default Timezone"
                   }, undefined, false, undefined, this),
                   /* @__PURE__ */ jsxDEV("select", {
                     id: "setting-timezone",
                     value: timezone,
                     onChange: (e) => setTimezone(e.target.value),
-                    className: "border-input bg-background mt-1 block w-full rounded-md border px-3 py-2",
+                    className: "mt-1 block w-full rounded-md border border-input bg-background px-3 py-2",
                     children: [
                       /* @__PURE__ */ jsxDEV("option", {
                         value: "UTC",
@@ -80,10 +80,10 @@ function SaasSettingsPanel() {
         ]
       }, undefined, true, undefined, this),
       /* @__PURE__ */ jsxDEV("div", {
-        className: "border-border bg-card rounded-xl border p-6",
+        className: "rounded-xl border border-border bg-card p-6",
         children: [
           /* @__PURE__ */ jsxDEV("h3", {
-            className: "mb-4 text-lg font-semibold",
+            className: "mb-4 font-semibold text-lg",
             children: "Notifications"
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV("div", {
@@ -98,7 +98,7 @@ function SaasSettingsPanel() {
                 /* @__PURE__ */ jsxDEV("input", {
                   type: "checkbox",
                   defaultChecked: item.defaultChecked,
-                  className: "border-input h-4 w-4 rounded"
+                  className: "h-4 w-4 rounded border-input"
                 }, undefined, false, undefined, this),
                 /* @__PURE__ */ jsxDEV("span", {
                   className: "text-sm",
@@ -113,11 +113,11 @@ function SaasSettingsPanel() {
         className: "rounded-xl border border-red-200 bg-red-50 p-6 dark:border-red-900 dark:bg-red-950/20",
         children: [
           /* @__PURE__ */ jsxDEV("h3", {
-            className: "mb-2 text-lg font-semibold text-red-700 dark:text-red-400",
+            className: "mb-2 font-semibold text-lg text-red-700 dark:text-red-400",
             children: "Danger Zone"
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV("p", {
-            className: "mb-4 text-sm text-red-600 dark:text-red-300",
+            className: "mb-4 text-red-600 text-sm dark:text-red-300",
             children: "These actions are irreversible. Please proceed with caution."
           }, undefined, false, undefined, this),
           /* @__PURE__ */ jsxDEV("div", {

package/dist/node/ui/hooks/index.js

@@ -1,6 +1,6 @@
 // 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 } = handlers;
@@ -63,8 +63,8 @@ function useProjectList(options = {}) {
 }
 
 // src/ui/hooks/useProjectMutations.ts
-import { useCallback as useCallback2, useState as useState2 } from "react";
 import { useTemplateRuntime as useTemplateRuntime2 } from "@contractspec/lib.example-shared-ui";
+import { useCallback as useCallback2, useState as useState2 } from "react";
 function useProjectMutations(options = {}) {
   const { handlers, projectId } = useTemplateRuntime2();
   const { saas } = handlers;

package/dist/node/ui/hooks/useProjectList.js

@@ -1,6 +1,6 @@
 // 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 } = handlers;

package/dist/node/ui/hooks/useProjectMutations.js

@@ -1,6 +1,6 @@
 // src/ui/hooks/useProjectMutations.ts
-import { useCallback, useState } from "react";
 import { useTemplateRuntime } from "@contractspec/lib.example-shared-ui";
+import { useCallback, useState } from "react";
 function useProjectMutations(options = {}) {
   const { handlers, projectId } = useTemplateRuntime();
   const { saas } = handlers;