@contractspec/example.integration-hub 3.7.6 → 3.8.2

package/dist/ui/tables/IntegrationTables.d.ts

@@ -0,0 +1,2 @@
+export { ConnectionsTable } from './ConnectionsTable';
+export { SyncConfigsTable } from './SyncConfigsTable';

package/dist/ui/tables/IntegrationTables.js

@@ -0,0 +1,362 @@
+// @bun
+// src/ui/tables/integration-table.shared.tsx
+import { Button } from "@contractspec/lib.design-system";
+import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
+import { HStack } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var STATUS_VARIANTS = {
+  ACTIVE: "default",
+  CONNECTED: "default",
+  SUCCESS: "default",
+  PENDING: "secondary",
+  PAUSED: "secondary",
+  ERROR: "destructive",
+  DISCONNECTED: "outline"
+};
+function formatDateTime(value) {
+  return value ? value.toLocaleString() : "Never";
+}
+function formatJson(value) {
+  return value ? JSON.stringify(value, null, 2) : "No configuration";
+}
+function StatusBadge({ status }) {
+  return /* @__PURE__ */ jsxDEV(Badge, {
+    variant: STATUS_VARIANTS[status] ?? "outline",
+    children: status
+  }, undefined, false, undefined, this);
+}
+function IntegrationTableToolbar({
+  controller,
+  label,
+  toggleColumnId,
+  toggleVisibleLabel,
+  toggleHiddenLabel,
+  pinColumnId,
+  pinLabel,
+  resizeColumnId,
+  resizeLabel
+}) {
+  const firstRow = controller.rows[0];
+  const toggleColumn = controller.columns.find((column) => column.id === toggleColumnId);
+  const pinColumn = controller.columns.find((column) => column.id === pinColumnId);
+  const resizeColumn = controller.columns.find((column) => column.id === resizeColumnId);
+  const pinTarget = pinColumn?.pinState === "left" ? false : "left";
+  return /* @__PURE__ */ jsxDEV(HStack, {
+    gap: "sm",
+    className: "flex-wrap",
+    children: [
+      /* @__PURE__ */ jsxDEV(Badge, {
+        variant: "outline",
+        children: label
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => firstRow?.toggleExpanded?.(!firstRow?.isExpanded),
+        children: "Expand First Row"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => toggleColumn?.toggleVisibility?.(!toggleColumn?.visible),
+        children: toggleColumn?.visible ? toggleVisibleLabel : toggleHiddenLabel
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => pinColumn?.pin?.(pinTarget),
+        children: pinColumn?.pinState === "left" ? `Unpin ${pinLabel}` : `Pin ${pinLabel}`
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => resizeColumn?.resizeBy?.(40),
+        children: resizeLabel
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/tables/ConnectionsTable.tsx
+import { DataTable } from "@contractspec/lib.design-system";
+import { useContractTable } from "@contractspec/lib.presentation-runtime-react";
+import { 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";
+function ConnectionsTable({
+  connections
+}) {
+  const controller = useContractTable({
+    data: connections,
+    columns: [
+      {
+        id: "connection",
+        header: "Connection",
+        label: "Connection",
+        accessor: (connection) => connection.name,
+        cell: ({ item }) => /* @__PURE__ */ jsxDEV2(VStack, {
+          gap: "xs",
+          children: [
+            /* @__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: [
+                "Created ",
+                item.createdAt.toLocaleDateString()
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        size: 240,
+        minSize: 180,
+        canSort: true,
+        canPin: true,
+        canResize: true
+      },
+      {
+        id: "status",
+        header: "Status",
+        label: "Status",
+        accessorKey: "status",
+        cell: ({ value }) => /* @__PURE__ */ jsxDEV2(StatusBadge, {
+          status: String(value)
+        }, undefined, false, undefined, this),
+        size: 150,
+        canSort: true,
+        canPin: true,
+        canResize: true
+      },
+      {
+        id: "lastSyncAt",
+        header: "Last Sync",
+        label: "Last Sync",
+        accessor: (connection) => connection.lastSyncAt?.getTime() ?? 0,
+        cell: ({ item }) => formatDateTime(item.lastSyncAt),
+        size: 200,
+        canSort: true,
+        canHide: true,
+        canResize: true
+      },
+      {
+        id: "errorMessage",
+        header: "Errors",
+        label: "Errors",
+        accessor: (connection) => connection.errorMessage ?? "",
+        cell: ({ value }) => String(value || "No errors"),
+        size: 240,
+        canHide: true,
+        canResize: true
+      }
+    ],
+    initialState: {
+      pagination: { pageIndex: 0, pageSize: 3 },
+      columnVisibility: { errorMessage: false },
+      columnPinning: { left: ["connection"], right: [] }
+    },
+    renderExpandedContent: (connection) => /* @__PURE__ */ jsxDEV2(VStack, {
+      gap: "sm",
+      className: "py-2",
+      children: [
+        /* @__PURE__ */ jsxDEV2(Text, {
+          className: "font-medium text-sm",
+          children: "Credentials"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV2("pre", {
+          className: "overflow-auto rounded-md bg-muted/40 p-3 text-xs",
+          children: formatJson(connection.credentials)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV2(Text, {
+          className: "font-medium text-sm",
+          children: "Config"
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV2("pre", {
+          className: "overflow-auto rounded-md bg-muted/40 p-3 text-xs",
+          children: formatJson(connection.config)
+        }, undefined, false, undefined, this),
+        /* @__PURE__ */ jsxDEV2(Text, {
+          className: "text-muted-foreground text-sm",
+          children: connection.errorMessage ?? "No sync errors recorded."
+        }, undefined, false, undefined, this)
+      ]
+    }, undefined, true, undefined, this),
+    getCanExpand: () => true
+  });
+  return /* @__PURE__ */ jsxDEV2(DataTable, {
+    controller,
+    title: "Connections",
+    description: "Client-mode ContractSpec table with visibility, pinning, resizing, and expanded diagnostics.",
+    toolbar: /* @__PURE__ */ jsxDEV2(IntegrationTableToolbar, {
+      controller,
+      label: `${connections.length} total connections`,
+      toggleColumnId: "errorMessage",
+      toggleVisibleLabel: "Hide Error Column",
+      toggleHiddenLabel: "Show Error Column",
+      pinColumnId: "status",
+      pinLabel: "Status",
+      resizeColumnId: "connection",
+      resizeLabel: "Widen Connection"
+    }, undefined, false, undefined, this),
+    emptyState: /* @__PURE__ */ jsxDEV2("div", {
+      className: "rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm",
+      children: "No connections found"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+
+// src/ui/tables/SyncConfigsTable.tsx
+import { DataTable as DataTable2 } from "@contractspec/lib.design-system";
+import { useContractTable as useContractTable2 } from "@contractspec/lib.presentation-runtime-react";
+import { VStack as VStack2 } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { Text as Text2 } from "@contractspec/lib.ui-kit-web/ui/text";
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+"use client";
+function SyncConfigsTable({
+  syncConfigs
+}) {
+  const controller = useContractTable2({
+    data: syncConfigs,
+    columns: [
+      {
+        id: "sync",
+        header: "Sync Config",
+        label: "Sync Config",
+        accessor: (sync) => sync.name,
+        cell: ({ item }) => /* @__PURE__ */ jsxDEV3(VStack2, {
+          gap: "xs",
+          children: [
+            /* @__PURE__ */ jsxDEV3(Text2, {
+              className: "font-medium text-sm",
+              children: item.name
+            }, undefined, false, undefined, this),
+            /* @__PURE__ */ jsxDEV3(Text2, {
+              className: "text-muted-foreground text-xs",
+              children: [
+                item.sourceEntity,
+                " \u2192 ",
+                item.targetEntity
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        size: 260,
+        minSize: 200,
+        canSort: true,
+        canPin: true,
+        canResize: true
+      },
+      {
+        id: "frequency",
+        header: "Frequency",
+        label: "Frequency",
+        accessorKey: "frequency",
+        size: 160,
+        canSort: true,
+        canHide: true,
+        canResize: true
+      },
+      {
+        id: "status",
+        header: "Status",
+        label: "Status",
+        accessorKey: "status",
+        cell: ({ value }) => /* @__PURE__ */ jsxDEV3(StatusBadge, {
+          status: String(value)
+        }, undefined, false, undefined, this),
+        size: 150,
+        canSort: true,
+        canPin: true,
+        canResize: true
+      },
+      {
+        id: "recordsSynced",
+        header: "Records",
+        label: "Records",
+        accessorKey: "recordsSynced",
+        align: "right",
+        size: 140,
+        canSort: true,
+        canResize: true
+      },
+      {
+        id: "lastRunAt",
+        header: "Last Run",
+        label: "Last Run",
+        accessor: (sync) => sync.lastRunAt?.getTime() ?? 0,
+        cell: ({ item }) => formatDateTime(item.lastRunAt),
+        size: 200,
+        canSort: true,
+        canHide: true,
+        canResize: true
+      }
+    ],
+    initialState: {
+      pagination: { pageIndex: 0, pageSize: 3 },
+      columnVisibility: { lastRunAt: false },
+      columnPinning: { left: ["sync"], right: [] }
+    },
+    renderExpandedContent: (sync) => /* @__PURE__ */ jsxDEV3(VStack2, {
+      gap: "sm",
+      className: "py-2",
+      children: [
+        /* @__PURE__ */ jsxDEV3(Text2, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            "Connection ",
+            sync.connectionId
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV3(Text2, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            "Last run: ",
+            formatDateTime(sync.lastRunAt)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV3(Text2, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            "Last status: ",
+            sync.lastRunStatus ?? "No runs recorded"
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV3(Text2, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            "Updated ",
+            sync.updatedAt.toLocaleString()
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this),
+    getCanExpand: () => true
+  });
+  return /* @__PURE__ */ jsxDEV3(DataTable2, {
+    controller,
+    title: "Sync Configs",
+    description: "Shared table primitives applied to sync monitoring without changing the surrounding dashboard layout.",
+    toolbar: /* @__PURE__ */ jsxDEV3(IntegrationTableToolbar, {
+      controller,
+      label: `${syncConfigs.length} syncs`,
+      toggleColumnId: "lastRunAt",
+      toggleVisibleLabel: "Hide Last Run",
+      toggleHiddenLabel: "Show Last Run",
+      pinColumnId: "status",
+      pinLabel: "Status",
+      resizeColumnId: "sync",
+      resizeLabel: "Widen Sync"
+    }, undefined, false, undefined, this),
+    emptyState: /* @__PURE__ */ jsxDEV3("div", {
+      className: "rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm",
+      children: "No sync configurations found"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  SyncConfigsTable,
+  ConnectionsTable
+};

package/dist/ui/tables/IntegrationTables.smoke.test.d.ts

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

package/dist/ui/tables/SyncConfigsTable.d.ts

@@ -0,0 +1,4 @@
+import type { SyncConfig } from '../../handlers/integration.handlers';
+export declare function SyncConfigsTable({ syncConfigs, }: {
+    syncConfigs: SyncConfig[];
+}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/tables/SyncConfigsTable.js

@@ -0,0 +1,231 @@
+// @bun
+// src/ui/tables/integration-table.shared.tsx
+import { Button } from "@contractspec/lib.design-system";
+import { Badge } from "@contractspec/lib.ui-kit-web/ui/badge";
+import { HStack } from "@contractspec/lib.ui-kit-web/ui/stack";
+import { jsxDEV } from "react/jsx-dev-runtime";
+"use client";
+var STATUS_VARIANTS = {
+  ACTIVE: "default",
+  CONNECTED: "default",
+  SUCCESS: "default",
+  PENDING: "secondary",
+  PAUSED: "secondary",
+  ERROR: "destructive",
+  DISCONNECTED: "outline"
+};
+function formatDateTime(value) {
+  return value ? value.toLocaleString() : "Never";
+}
+function formatJson(value) {
+  return value ? JSON.stringify(value, null, 2) : "No configuration";
+}
+function StatusBadge({ status }) {
+  return /* @__PURE__ */ jsxDEV(Badge, {
+    variant: STATUS_VARIANTS[status] ?? "outline",
+    children: status
+  }, undefined, false, undefined, this);
+}
+function IntegrationTableToolbar({
+  controller,
+  label,
+  toggleColumnId,
+  toggleVisibleLabel,
+  toggleHiddenLabel,
+  pinColumnId,
+  pinLabel,
+  resizeColumnId,
+  resizeLabel
+}) {
+  const firstRow = controller.rows[0];
+  const toggleColumn = controller.columns.find((column) => column.id === toggleColumnId);
+  const pinColumn = controller.columns.find((column) => column.id === pinColumnId);
+  const resizeColumn = controller.columns.find((column) => column.id === resizeColumnId);
+  const pinTarget = pinColumn?.pinState === "left" ? false : "left";
+  return /* @__PURE__ */ jsxDEV(HStack, {
+    gap: "sm",
+    className: "flex-wrap",
+    children: [
+      /* @__PURE__ */ jsxDEV(Badge, {
+        variant: "outline",
+        children: label
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => firstRow?.toggleExpanded?.(!firstRow?.isExpanded),
+        children: "Expand First Row"
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => toggleColumn?.toggleVisibility?.(!toggleColumn?.visible),
+        children: toggleColumn?.visible ? toggleVisibleLabel : toggleHiddenLabel
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => pinColumn?.pin?.(pinTarget),
+        children: pinColumn?.pinState === "left" ? `Unpin ${pinLabel}` : `Pin ${pinLabel}`
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV(Button, {
+        variant: "outline",
+        size: "sm",
+        onPress: () => resizeColumn?.resizeBy?.(40),
+        children: resizeLabel
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/ui/tables/SyncConfigsTable.tsx
+import { DataTable } from "@contractspec/lib.design-system";
+import { useContractTable } from "@contractspec/lib.presentation-runtime-react";
+import { 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";
+function SyncConfigsTable({
+  syncConfigs
+}) {
+  const controller = useContractTable({
+    data: syncConfigs,
+    columns: [
+      {
+        id: "sync",
+        header: "Sync Config",
+        label: "Sync Config",
+        accessor: (sync) => sync.name,
+        cell: ({ item }) => /* @__PURE__ */ jsxDEV2(VStack, {
+          gap: "xs",
+          children: [
+            /* @__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: [
+                item.sourceEntity,
+                " \u2192 ",
+                item.targetEntity
+              ]
+            }, undefined, true, undefined, this)
+          ]
+        }, undefined, true, undefined, this),
+        size: 260,
+        minSize: 200,
+        canSort: true,
+        canPin: true,
+        canResize: true
+      },
+      {
+        id: "frequency",
+        header: "Frequency",
+        label: "Frequency",
+        accessorKey: "frequency",
+        size: 160,
+        canSort: true,
+        canHide: true,
+        canResize: true
+      },
+      {
+        id: "status",
+        header: "Status",
+        label: "Status",
+        accessorKey: "status",
+        cell: ({ value }) => /* @__PURE__ */ jsxDEV2(StatusBadge, {
+          status: String(value)
+        }, undefined, false, undefined, this),
+        size: 150,
+        canSort: true,
+        canPin: true,
+        canResize: true
+      },
+      {
+        id: "recordsSynced",
+        header: "Records",
+        label: "Records",
+        accessorKey: "recordsSynced",
+        align: "right",
+        size: 140,
+        canSort: true,
+        canResize: true
+      },
+      {
+        id: "lastRunAt",
+        header: "Last Run",
+        label: "Last Run",
+        accessor: (sync) => sync.lastRunAt?.getTime() ?? 0,
+        cell: ({ item }) => formatDateTime(item.lastRunAt),
+        size: 200,
+        canSort: true,
+        canHide: true,
+        canResize: true
+      }
+    ],
+    initialState: {
+      pagination: { pageIndex: 0, pageSize: 3 },
+      columnVisibility: { lastRunAt: false },
+      columnPinning: { left: ["sync"], right: [] }
+    },
+    renderExpandedContent: (sync) => /* @__PURE__ */ jsxDEV2(VStack, {
+      gap: "sm",
+      className: "py-2",
+      children: [
+        /* @__PURE__ */ jsxDEV2(Text, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            "Connection ",
+            sync.connectionId
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV2(Text, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            "Last run: ",
+            formatDateTime(sync.lastRunAt)
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV2(Text, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            "Last status: ",
+            sync.lastRunStatus ?? "No runs recorded"
+          ]
+        }, undefined, true, undefined, this),
+        /* @__PURE__ */ jsxDEV2(Text, {
+          className: "text-muted-foreground text-sm",
+          children: [
+            "Updated ",
+            sync.updatedAt.toLocaleString()
+          ]
+        }, undefined, true, undefined, this)
+      ]
+    }, undefined, true, undefined, this),
+    getCanExpand: () => true
+  });
+  return /* @__PURE__ */ jsxDEV2(DataTable, {
+    controller,
+    title: "Sync Configs",
+    description: "Shared table primitives applied to sync monitoring without changing the surrounding dashboard layout.",
+    toolbar: /* @__PURE__ */ jsxDEV2(IntegrationTableToolbar, {
+      controller,
+      label: `${syncConfigs.length} syncs`,
+      toggleColumnId: "lastRunAt",
+      toggleVisibleLabel: "Hide Last Run",
+      toggleHiddenLabel: "Show Last Run",
+      pinColumnId: "status",
+      pinLabel: "Status",
+      resizeColumnId: "sync",
+      resizeLabel: "Widen Sync"
+    }, undefined, false, undefined, this),
+    emptyState: /* @__PURE__ */ jsxDEV2("div", {
+      className: "rounded-md border border-dashed p-8 text-center text-muted-foreground text-sm",
+      children: "No sync configurations found"
+    }, undefined, false, undefined, this)
+  }, undefined, false, undefined, this);
+}
+export {
+  SyncConfigsTable
+};

package/dist/ui/tables/integration-table.shared.d.ts

@@ -0,0 +1,18 @@
+import type { ContractTableController } from '@contractspec/lib.presentation-runtime-react';
+import type { ReactNode } from 'react';
+export declare function formatDateTime(value?: Date): string;
+export declare function formatJson(value?: Record<string, unknown>): string;
+export declare function StatusBadge({ status }: {
+    status: string;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function IntegrationTableToolbar<TItem>({ controller, label, toggleColumnId, toggleVisibleLabel, toggleHiddenLabel, pinColumnId, pinLabel, resizeColumnId, resizeLabel, }: {
+    controller: ContractTableController<TItem, ReactNode>;
+    label: string;
+    toggleColumnId: string;
+    toggleVisibleLabel: string;
+    toggleHiddenLabel: string;
+    pinColumnId: string;
+    pinLabel: string;
+    resizeColumnId: string;
+    resizeLabel: string;
+}): import("react/jsx-runtime").JSX.Element;