@contractspec/example.analytics-dashboard 3.8.0 → 3.9.2

package/README.md

@@ -9,7 +9,8 @@ Website: https://contractspec.io
 - Dashboard feature with presentation, schema, enum, and test-spec.
 - Query engine with typed operations and handlers.
 - PostHog datasource adapter.
-- React UI with hooks, renderers, and markdown output.
+- React UI with hooks, renderers, markdown output, and a shared ContractSpec `DataTable` for saved queries.
+- Client-mode table capabilities including sorting, pagination, column visibility, column resizing, pinning, and expandable row details.
 - Event definitions for analytics tracking.
 - Seeders for demo data.
 
@@ -18,6 +19,7 @@ Website: https://contractspec.io
 From `packages/examples/analytics-dashboard`:
 - `bun run dev`
 - `bun run build`
+- `bun run test`
 - `bun run typecheck`
 
 ## Usage

package/dist/browser/docs/analytics-dashboard.docblock.js

@@ -26,7 +26,7 @@ var analyticsDashboardDocBlocks = [
 
 ## UI / Presentations
 
-- Dashboard list, dashboard view, query builder, widget gallery.
+- Dashboard list, dashboard view, query builder, widget gallery, and a shared ContractSpec table for saved queries.
 - Registered under \`analytics-dashboard\` template in Template Registry.
 
 ## Notes
@@ -34,6 +34,7 @@ var analyticsDashboardDocBlocks = [
 - Enforce org scoping for multi-tenant isolation.
 - Use Feature Flags for beta widgets; Metering to track query volume.
 - PostHog datasource can back query execution via HogQL for dashboard widgets.
+- The saved-queries table demonstrates client-mode sorting, pagination, visibility, resizing, pinning, and row expansion on the shared table stack.
 `
   },
   {

package/dist/browser/docs/index.js

@@ -26,7 +26,7 @@ var analyticsDashboardDocBlocks = [
 
 ## UI / Presentations
 
-- Dashboard list, dashboard view, query builder, widget gallery.
+- Dashboard list, dashboard view, query builder, widget gallery, and a shared ContractSpec table for saved queries.
 - Registered under \`analytics-dashboard\` template in Template Registry.
 
 ## Notes
@@ -34,6 +34,7 @@ var analyticsDashboardDocBlocks = [
 - Enforce org scoping for multi-tenant isolation.
 - Use Feature Flags for beta widgets; Metering to track query volume.
 - PostHog datasource can back query execution via HogQL for dashboard widgets.
+- The saved-queries table demonstrates client-mode sorting, pagination, visibility, resizing, pinning, and row expansion on the shared table stack.
 `
   },
   {

package/dist/browser/index.js

@@ -1683,99 +1683,188 @@ function gridSpanClass(gridWidth) {
 }
 
 // src/ui/AnalyticsQueriesTable.tsx
+import { DataTable } from "@contractspec/lib.design-system";
+import { useContractTable } from "@contractspec/lib.presentation-runtime-react";
+import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
+import { HStack, VStack } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { Text } from "@contractspec/lib.ui-kit-web/ui/text";
 import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 "use client";
 var QUERY_TYPE_COLORS = {
-  SQL: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
-  METRIC: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400",
-  AGGREGATION: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400",
-  CUSTOM: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400"
+  SQL: "default",
+  METRIC: "secondary",
+  AGGREGATION: "secondary",
+  CUSTOM: "outline"
 };
+function formatJson(value) {
+  return JSON.stringify(value, null, 2);
+}
 function AnalyticsQueriesTable({ queries }) {
-  return /* @__PURE__ */ jsxDEV2("div", {
-    className: "rounded-lg border border-border",
-    children: /* @__PURE__ */ jsxDEV2("table", {
-      className: "w-full",
-      children: [
-        /* @__PURE__ */ jsxDEV2("thead", {
-          className: "border-border border-b bg-muted/30",
-          children: /* @__PURE__ */ jsxDEV2("tr", {
-            children: [
-              /* @__PURE__ */ jsxDEV2("th", {
-                className: "px-4 py-3 text-left font-medium text-sm",
-                children: "Query"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV2("th", {
-                className: "px-4 py-3 text-left font-medium text-sm",
-                children: "Type"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV2("th", {
-                className: "px-4 py-3 text-left font-medium text-sm",
-                children: "Cache TTL"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV2("th", {
-                className: "px-4 py-3 text-left font-medium text-sm",
-                children: "Shared"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV2("tbody", {
-          className: "divide-y divide-border",
+  const controller = useContractTable({
+    data: queries,
+    columns: [
+      {
+        id: "query",
+        header: "Query",
+        label: "Query",
+        accessor: (query) => query.name,
+        cell: ({ item }) => /* @__PURE__ */ jsxDEV2(VStack, {
+          gap: "xs",
           children: [
-            queries.map((query) => /* @__PURE__ */ jsxDEV2("tr", {
-              className: "hover:bg-muted/50",
+            /* @__PURE__ */ jsxDEV2(Text, {
+              className: "font-medium text-sm",
+              children: item.name
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2(Text, {
+              className: "text-muted-foreground text-xs",
               children: [
-                /* @__PURE__ */ jsxDEV2("td", {
-                  className: "px-4 py-3",
-                  children: [
-                    /* @__PURE__ */ jsxDEV2("div", {
-                      className: "font-medium",
-                      children: query.name
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV2("div", {
-                      className: "text-muted-foreground text-sm",
-                      children: query.description
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV2("td", {
-                  className: "px-4 py-3",
-                  children: /* @__PURE__ */ jsxDEV2("span", {
-                    className: `inline-flex rounded-full px-2 py-0.5 font-medium text-xs ${QUERY_TYPE_COLORS[query.type] ?? ""}`,
-                    children: query.type
-                  }, undefined, false, undefined, this)
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV2("td", {
-                  className: "px-4 py-3 text-muted-foreground text-sm",
-                  children: [
-                    query.cacheTtlSeconds,
-                    "s"
-                  ]
-                }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV2("td", {
-                  className: "px-4 py-3",
-                  children: query.isShared ? /* @__PURE__ */ jsxDEV2("span", {
-                    className: "text-green-600 dark:text-green-400",
-                    children: "✓"
-                  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2("span", {
-                    className: "text-muted-foreground",
-                    children: "—"
-                  }, undefined, false, undefined, this)
-                }, undefined, false, undefined, this)
+                "Updated ",
+                item.updatedAt.toLocaleDateString()
               ]
-            }, query.id, true, undefined, this)),
-            queries.length === 0 && /* @__PURE__ */ jsxDEV2("tr", {
-              children: /* @__PURE__ */ jsxDEV2("td", {
-                colSpan: 4,
-                className: "px-4 py-8 text-center text-muted-foreground",
-                children: "No queries saved"
-              }, undefined, false, undefined, this)
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        size: 240,
+        minSize: 180,
+        canSort: true,
+        canPin: true,
+        canResize: true
+      },
+      {
+        id: "description",
+        header: "Description",
+        label: "Description",
+        accessor: (query) => query.description ?? "",
+        cell: ({ value }) => /* @__PURE__ */ jsxDEV2(Text, {
+          className: "line-clamp-2 text-muted-foreground text-sm",
+          children: String(value || "No description")
+        }, undefined, false, undefined, this),
+        size: 300,
+        minSize: 220,
+        canSort: false,
+        canHide: true,
+        canResize: true
+      },
+      {
+        id: "type",
+        header: "Type",
+        label: "Type",
+        accessorKey: "type",
+        cell: ({ value }) => /* @__PURE__ */ jsxDEV2(Badge, {
+          variant: QUERY_TYPE_COLORS[String(value)],
+          children: String(value)
+        }, undefined, false, undefined, this),
+        size: 150,
+        canSort: true,
+        canHide: true,
+        canResize: true
+      },
+      {
+        id: "cacheTtlSeconds",
+        header: "Cache TTL",
+        label: "Cache TTL",
+        accessorKey: "cacheTtlSeconds",
+        cell: ({ value }) => `${String(value)}s`,
+        align: "right",
+        size: 140,
+        canSort: true,
+        canResize: true
+      },
+      {
+        id: "isShared",
+        header: "Shared",
+        label: "Shared",
+        accessorKey: "isShared",
+        cell: ({ value }) => /* @__PURE__ */ jsxDEV2(Badge, {
+          variant: value ? "default" : "outline",
+          children: value ? "Shared" : "Private"
+        }, undefined, false, undefined, this),
+        size: 140,
+        canSort: true,
+        canHide: true,
+        canResize: true
+      }
+    ],
+    initialState: {
+      pagination: { pageIndex: 0, pageSize: 3 },
+      columnVisibility: { description: false },
+      columnPinning: { left: ["query"], right: [] }
+    },
+    renderExpandedContent: (query) => /* @__PURE__ */ jsxDEV2(VStack, {
+      gap: "sm",
+      className: "py-2",
+      children: [
+        /* @__PURE__ */ jsxDEV2(VStack, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV2(Text, {
+              className: "font-medium text-sm",
+              children: "Description"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2(Text, {
+              className: "text-muted-foreground text-sm",
+              children: query.description ?? "No description"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        query.sql ? /* @__PURE__ */ jsxDEV2(VStack, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV2(Text, {
+              className: "font-medium text-sm",
+              children: "SQL"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2("pre", {
+              className: "overflow-auto rounded-md bg-muted/40 p-3 text-xs",
+              children: query.sql
             }, undefined, false, undefined, this)
           ]
+        }, undefined, true, undefined, this) : null,
+        /* @__PURE__ */ jsxDEV2(VStack, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV2(Text, {
+              className: "font-medium text-sm",
+              children: "Definition"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2("pre", {
+              className: "overflow-auto rounded-md bg-muted/40 p-3 text-xs",
+              children: formatJson(query.definition)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this),
+    getCanExpand: () => true
+  });
+  return /* @__PURE__ */ jsxDEV2(DataTable, {
+    controller,
+    title: "Saved Queries",
+    description: "Client-mode table using the shared ContractSpec controller and renderer.",
+    toolbar: /* @__PURE__ */ jsxDEV2(HStack, {
+      gap: "sm",
+      className: "flex-wrap",
+      children: [
+        /* @__PURE__ */ jsxDEV2(Text, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            queries.length,
+            " queries"
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV2(Text, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            queries.filter((query) => query.isShared).length,
+            " shared"
+          ]
         }, undefined, true, undefined, this)
       ]
-    }, undefined, true, undefined, this)
+    }, undefined, true, undefined, this),
+    emptyState: /* @__PURE__ */ jsxDEV2("div", {
+      className: "rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm",
+      children: "No queries saved"
+    }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }
 

package/dist/browser/ui/AnalyticsDashboard.js

@@ -682,99 +682,188 @@ function gridSpanClass(gridWidth) {
 }
 
 // src/ui/AnalyticsQueriesTable.tsx
+import { DataTable } from "@contractspec/lib.design-system";
+import { useContractTable } from "@contractspec/lib.presentation-runtime-react";
+import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
+import { HStack, VStack } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { Text } from "@contractspec/lib.ui-kit-web/ui/text";
 import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
 "use client";
 var QUERY_TYPE_COLORS = {
-  SQL: "bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400",
-  METRIC: "bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400",
-  AGGREGATION: "bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400",
-  CUSTOM: "bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400"
+  SQL: "default",
+  METRIC: "secondary",
+  AGGREGATION: "secondary",
+  CUSTOM: "outline"
 };
+function formatJson(value) {
+  return JSON.stringify(value, null, 2);
+}
 function AnalyticsQueriesTable({ queries }) {
-  return /* @__PURE__ */ jsxDEV2("div", {
-    className: "rounded-lg border border-border",
-    children: /* @__PURE__ */ jsxDEV2("table", {
-      className: "w-full",
-      children: [
-        /* @__PURE__ */ jsxDEV2("thead", {
-          className: "border-border border-b bg-muted/30",
-          children: /* @__PURE__ */ jsxDEV2("tr", {
-            children: [
-              /* @__PURE__ */ jsxDEV2("th", {
-                className: "px-4 py-3 text-left font-medium text-sm",
-                children: "Query"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV2("th", {
-                className: "px-4 py-3 text-left font-medium text-sm",
-                children: "Type"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV2("th", {
-                className: "px-4 py-3 text-left font-medium text-sm",
-                children: "Cache TTL"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV2("th", {
-                className: "px-4 py-3 text-left font-medium text-sm",
-                children: "Shared"
-              }, undefined, false, undefined, this)
-            ]
-          }, undefined, true, undefined, this)
-        }, undefined, false, undefined, this),
-        /* @__PURE__ */ jsxDEV2("tbody", {
-          className: "divide-y divide-border",
+  const controller = useContractTable({
+    data: queries,
+    columns: [
+      {
+        id: "query",
+        header: "Query",
+        label: "Query",
+        accessor: (query) => query.name,
+        cell: ({ item }) => /* @__PURE__ */ jsxDEV2(VStack, {
+          gap: "xs",
           children: [
-            queries.map((query) => /* @__PURE__ */ jsxDEV2("tr", {
-              className: "hover:bg-muted/50",
+            /* @__PURE__ */ jsxDEV2(Text, {
+              className: "font-medium text-sm",
+              children: item.name
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2(Text, {
+              className: "text-muted-foreground text-xs",
               children: [
-                /* @__PURE__ */ jsxDEV2("td", {
-                  className: "px-4 py-3",
-                  children: [
-                    /* @__PURE__ */ jsxDEV2("div", {
-                      className: "font-medium",
-                      children: query.name
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV2("div", {
-                      className: "text-muted-foreground text-sm",
-                      children: query.description
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV2("td", {
-                  className: "px-4 py-3",
-                  children: /* @__PURE__ */ jsxDEV2("span", {
-                    className: `inline-flex rounded-full px-2 py-0.5 font-medium text-xs ${QUERY_TYPE_COLORS[query.type] ?? ""}`,
-                    children: query.type
-                  }, undefined, false, undefined, this)
-                }, undefined, false, undefined, this),
-                /* @__PURE__ */ jsxDEV2("td", {
-                  className: "px-4 py-3 text-muted-foreground text-sm",
-                  children: [
-                    query.cacheTtlSeconds,
-                    "s"
-                  ]
-                }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV2("td", {
-                  className: "px-4 py-3",
-                  children: query.isShared ? /* @__PURE__ */ jsxDEV2("span", {
-                    className: "text-green-600 dark:text-green-400",
-                    children: "✓"
-                  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2("span", {
-                    className: "text-muted-foreground",
-                    children: "—"
-                  }, undefined, false, undefined, this)
-                }, undefined, false, undefined, this)
+                "Updated ",
+                item.updatedAt.toLocaleDateString()
               ]
-            }, query.id, true, undefined, this)),
-            queries.length === 0 && /* @__PURE__ */ jsxDEV2("tr", {
-              children: /* @__PURE__ */ jsxDEV2("td", {
-                colSpan: 4,
-                className: "px-4 py-8 text-center text-muted-foreground",
-                children: "No queries saved"
-              }, undefined, false, undefined, this)
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        size: 240,
+        minSize: 180,
+        canSort: true,
+        canPin: true,
+        canResize: true
+      },
+      {
+        id: "description",
+        header: "Description",
+        label: "Description",
+        accessor: (query) => query.description ?? "",
+        cell: ({ value }) => /* @__PURE__ */ jsxDEV2(Text, {
+          className: "line-clamp-2 text-muted-foreground text-sm",
+          children: String(value || "No description")
+        }, undefined, false, undefined, this),
+        size: 300,
+        minSize: 220,
+        canSort: false,
+        canHide: true,
+        canResize: true
+      },
+      {
+        id: "type",
+        header: "Type",
+        label: "Type",
+        accessorKey: "type",
+        cell: ({ value }) => /* @__PURE__ */ jsxDEV2(Badge, {
+          variant: QUERY_TYPE_COLORS[String(value)],
+          children: String(value)
+        }, undefined, false, undefined, this),
+        size: 150,
+        canSort: true,
+        canHide: true,
+        canResize: true
+      },
+      {
+        id: "cacheTtlSeconds",
+        header: "Cache TTL",
+        label: "Cache TTL",
+        accessorKey: "cacheTtlSeconds",
+        cell: ({ value }) => `${String(value)}s`,
+        align: "right",
+        size: 140,
+        canSort: true,
+        canResize: true
+      },
+      {
+        id: "isShared",
+        header: "Shared",
+        label: "Shared",
+        accessorKey: "isShared",
+        cell: ({ value }) => /* @__PURE__ */ jsxDEV2(Badge, {
+          variant: value ? "default" : "outline",
+          children: value ? "Shared" : "Private"
+        }, undefined, false, undefined, this),
+        size: 140,
+        canSort: true,
+        canHide: true,
+        canResize: true
+      }
+    ],
+    initialState: {
+      pagination: { pageIndex: 0, pageSize: 3 },
+      columnVisibility: { description: false },
+      columnPinning: { left: ["query"], right: [] }
+    },
+    renderExpandedContent: (query) => /* @__PURE__ */ jsxDEV2(VStack, {
+      gap: "sm",
+      className: "py-2",
+      children: [
+        /* @__PURE__ */ jsxDEV2(VStack, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV2(Text, {
+              className: "font-medium text-sm",
+              children: "Description"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2(Text, {
+              className: "text-muted-foreground text-sm",
+              children: query.description ?? "No description"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        query.sql ? /* @__PURE__ */ jsxDEV2(VStack, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV2(Text, {
+              className: "font-medium text-sm",
+              children: "SQL"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2("pre", {
+              className: "overflow-auto rounded-md bg-muted/40 p-3 text-xs",
+              children: query.sql
             }, undefined, false, undefined, this)
           ]
+        }, undefined, true, undefined, this) : null,
+        /* @__PURE__ */ jsxDEV2(VStack, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV2(Text, {
+              className: "font-medium text-sm",
+              children: "Definition"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV2("pre", {
+              className: "overflow-auto rounded-md bg-muted/40 p-3 text-xs",
+              children: formatJson(query.definition)
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this),
+    getCanExpand: () => true
+  });
+  return /* @__PURE__ */ jsxDEV2(DataTable, {
+    controller,
+    title: "Saved Queries",
+    description: "Client-mode table using the shared ContractSpec controller and renderer.",
+    toolbar: /* @__PURE__ */ jsxDEV2(HStack, {
+      gap: "sm",
+      className: "flex-wrap",
+      children: [
+        /* @__PURE__ */ jsxDEV2(Text, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            queries.length,
+            " queries"
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV2(Text, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            queries.filter((query) => query.isShared).length,
+            " shared"
+          ]
         }, undefined, true, undefined, this)
       ]
-    }, undefined, true, undefined, this)
+    }, undefined, true, undefined, this),
+    emptyState: /* @__PURE__ */ jsxDEV2("div", {
+      className: "rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm",
+      children: "No queries saved"
+    }, undefined, false, undefined, this)
   }, undefined, false, undefined, this);
 }