@contractspec/example.analytics-dashboard 3.8.0 → 3.9.2

package/dist/ui/AnalyticsQueriesTable.js

@@ -1,98 +1,187 @@
 // @bun
 // 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 } 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__ */ jsxDEV("div", {
-    className: "rounded-lg border border-border",
-    children: /* @__PURE__ */ jsxDEV("table", {
-      className: "w-full",
-      children: [
-        /* @__PURE__ */ jsxDEV("thead", {
-          className: "border-border border-b bg-muted/30",
-          children: /* @__PURE__ */ jsxDEV("tr", {
-            children: [
-              /* @__PURE__ */ jsxDEV("th", {
-                className: "px-4 py-3 text-left font-medium text-sm",
-                children: "Query"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("th", {
-                className: "px-4 py-3 text-left font-medium text-sm",
-                children: "Type"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("th", {
-                className: "px-4 py-3 text-left font-medium text-sm",
-                children: "Cache TTL"
-              }, undefined, false, undefined, this),
-              /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("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__ */ jsxDEV(VStack, {
+          gap: "xs",
           children: [
-            queries.map((query) => /* @__PURE__ */ jsxDEV("tr", {
-              className: "hover:bg-muted/50",
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "font-medium text-sm",
+              children: item.name
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "text-muted-foreground text-xs",
               children: [
-                /* @__PURE__ */ jsxDEV("td", {
-                  className: "px-4 py-3",
-                  children: [
-                    /* @__PURE__ */ jsxDEV("div", {
-                      className: "font-medium",
-                      children: query.name
-                    }, undefined, false, undefined, this),
-                    /* @__PURE__ */ jsxDEV("div", {
-                      className: "text-muted-foreground text-sm",
-                      children: query.description
-                    }, undefined, false, undefined, this)
-                  ]
-                }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV("td", {
-                  className: "px-4 py-3",
-                  children: /* @__PURE__ */ jsxDEV("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__ */ jsxDEV("td", {
-                  className: "px-4 py-3 text-muted-foreground text-sm",
-                  children: [
-                    query.cacheTtlSeconds,
-                    "s"
-                  ]
-                }, undefined, true, undefined, this),
-                /* @__PURE__ */ jsxDEV("td", {
-                  className: "px-4 py-3",
-                  children: query.isShared ? /* @__PURE__ */ jsxDEV("span", {
-                    className: "text-green-600 dark:text-green-400",
-                    children: "\u2713"
-                  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV("span", {
-                    className: "text-muted-foreground",
-                    children: "\u2014"
-                  }, undefined, false, undefined, this)
-                }, undefined, false, undefined, this)
+                "Updated ",
+                item.updatedAt.toLocaleDateString()
               ]
-            }, query.id, true, undefined, this)),
-            queries.length === 0 && /* @__PURE__ */ jsxDEV("tr", {
-              children: /* @__PURE__ */ jsxDEV("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__ */ jsxDEV(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__ */ jsxDEV(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__ */ jsxDEV(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__ */ jsxDEV(VStack, {
+      gap: "sm",
+      className: "py-2",
+      children: [
+        /* @__PURE__ */ jsxDEV(VStack, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "font-medium text-sm",
+              children: "Description"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "text-muted-foreground text-sm",
+              children: query.description ?? "No description"
+            }, undefined, false, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        query.sql ? /* @__PURE__ */ jsxDEV(VStack, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "font-medium text-sm",
+              children: "SQL"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("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__ */ jsxDEV(VStack, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV(Text, {
+              className: "font-medium text-sm",
+              children: "Definition"
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV("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)
+    }, undefined, true, undefined, this),
+    getCanExpand: () => true
+  });
+  return /* @__PURE__ */ jsxDEV(DataTable, {
+    controller,
+    title: "Saved Queries",
+    description: "Client-mode table using the shared ContractSpec controller and renderer.",
+    toolbar: /* @__PURE__ */ jsxDEV(HStack, {
+      gap: "sm",
+      className: "flex-wrap",
+      children: [
+        /* @__PURE__ */ jsxDEV(Text, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            queries.length,
+            " queries"
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV(Text, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            queries.filter((query) => query.isShared).length,
+            " shared"
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this),
+    emptyState: /* @__PURE__ */ jsxDEV("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);
 }
 export {

package/dist/ui/AnalyticsQueriesTable.smoke.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/ui/index.js

@@ -683,99 +683,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: "\u2713"
-                  }, undefined, false, undefined, this) : /* @__PURE__ */ jsxDEV2("span", {
-                    className: "text-muted-foreground",
-                    children: "\u2014"
-                  }, 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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@contractspec/example.analytics-dashboard",
-  "version": "3.8.0",
+  "version": "3.9.2",
   "description": "Analytics Dashboard example with widgets and query engine for ContractSpec",
   "types": "./dist/index.d.ts",
   "type": "module",
@@ -15,25 +15,27 @@
     "lint": "bun lint:fix",
     "lint:fix": "biome check --write --unsafe --only=nursery/useSortedClasses . && biome check --write .",
     "lint:check": "biome check .",
+    "test": "bun test",
     "prebuild": "contractspec-bun-build prebuild",
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@contractspec/lib.schema": "3.7.6",
-    "@contractspec/lib.contracts-spec": "4.0.0",
-    "@contractspec/lib.contracts-integrations": "3.7.7",
-    "@contractspec/lib.example-shared-ui": "6.0.7",
-    "@contractspec/lib.design-system": "3.8.0",
-    "@contractspec/lib.runtime-sandbox": "2.7.6",
+    "@contractspec/lib.schema": "3.7.8",
+    "@contractspec/lib.contracts-spec": "4.1.2",
+    "@contractspec/lib.contracts-integrations": "3.8.2",
+    "@contractspec/lib.example-shared-ui": "6.0.10",
+    "@contractspec/lib.design-system": "3.8.3",
+    "@contractspec/lib.runtime-sandbox": "2.7.9",
     "react": "19.2.0",
     "react-dom": "19.2.0"
   },
   "devDependencies": {
-    "@contractspec/tool.typescript": "3.7.6",
+    "@contractspec/tool.typescript": "3.7.8",
     "typescript": "^5.9.3",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.2",
-    "@contractspec/tool.bun": "3.7.6"
+    "@contractspec/tool.bun": "3.7.8",
+    "happy-dom": "^20.8.4"
   },
   "exports": {
     ".": {