@stackwright-pro/pulse 0.2.0 → 0.2.1-alpha.0

package/dist/index.mjs

@@ -4,6 +4,8 @@ import { useState as useState2, useEffect as useEffect2 } from "react";
 // src/hooks/usePulse.ts
 import { useState, useCallback, useEffect } from "react";
 import { useQuery } from "@tanstack/react-query";
+var MIN_POLL_INTERVAL = 2e3;
+var MAX_POLL_INTERVAL = 3e5;
 function usePulse(options) {
   const {
     fetcher,
@@ -26,7 +28,7 @@ function usePulse(options) {
   const { data, isLoading, isFetching, isSuccess, isError, error, refetch } = useQuery({
     queryKey,
     queryFn: validatedFetcher,
-    refetchInterval: enabled ? Math.max(interval, 1e3) : false,
+    refetchInterval: enabled ? Math.min(Math.max(interval ?? 5e3, MIN_POLL_INTERVAL), MAX_POLL_INTERVAL) : false,
     refetchOnWindowFocus,
     retry: retryCount,
     retryDelay: (attemptIndex) => Math.min(1e3 * 2 ** attemptIndex, 1e4),
@@ -88,16 +90,15 @@ function Pulse({
   emptyState,
   showStaleDataOnError = true
 }) {
-  const { data, meta, state } = usePulse({
-    fetcher,
-    interval,
-    staleThreshold,
-    maxStaleAge,
-    schema,
-    enabled,
-    refetchOnWindowFocus,
-    retryCount
-  });
+  const pulseOptions = { fetcher };
+  if (interval !== void 0) pulseOptions.interval = interval;
+  if (staleThreshold !== void 0) pulseOptions.staleThreshold = staleThreshold;
+  if (maxStaleAge !== void 0) pulseOptions.maxStaleAge = maxStaleAge;
+  if (schema !== void 0) pulseOptions.schema = schema;
+  if (enabled !== void 0) pulseOptions.enabled = enabled;
+  if (refetchOnWindowFocus !== void 0) pulseOptions.refetchOnWindowFocus = refetchOnWindowFocus;
+  if (retryCount !== void 0) pulseOptions.retryCount = retryCount;
+  const { data, meta, state } = usePulse(pulseOptions);
   if (state === "loading" && data === void 0) {
     return /* @__PURE__ */ jsx(Fragment, { children: loadingState ?? /* @__PURE__ */ jsx(DefaultLoading, {}) });
   }
@@ -314,8 +315,366 @@ var PulseValidationError = class extends Error {
     }));
   }
 };
+
+// src/collection/PulseCollectionProvider.tsx
+import React4, { createContext, useContext, useMemo } from "react";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var ALLOWED_COLLECTIONS = /* @__PURE__ */ new Set();
+function setAllowedCollections(collections) {
+  ALLOWED_COLLECTIONS.clear();
+  collections.forEach((c) => ALLOWED_COLLECTIONS.add(c));
+}
+var PulseCollectionContext = createContext(null);
+function resolveTemplate(template, collections) {
+  const match = template.match(/\{\{\s*([\w.]+)\s*\}\}/);
+  if (!match || match[1] === void 0) return template;
+  const path = match[1];
+  const parts = path.split(".");
+  const collection = parts[0];
+  if (!collection) return template;
+  if (!ALLOWED_COLLECTIONS.has(collection)) {
+    console.warn(`[PulseCollectionProvider] Collection "${collection}" not in allowed list`);
+    return template;
+  }
+  const data = collections[collection];
+  if (!data) return template;
+  let value = data;
+  for (let i = 1; i < parts.length; i++) {
+    const key = parts[i];
+    if (!key) return template;
+    if (value && typeof value === "object") {
+      value = value[key];
+    } else {
+      return template;
+    }
+  }
+  return value ?? template;
+}
+async function fetchCollectionData(collectionName) {
+  try {
+    const module = await import("./collectionData-3ZJA4PEZ.mjs");
+    return module.getCollectionData(collectionName);
+  } catch {
+    console.warn(`[PulseCollectionProvider] collectionData not generated for: ${collectionName}`);
+    return [];
+  }
+}
+function PulseCollectionProvider({
+  collections: collectionConfigs,
+  children,
+  fallback
+}) {
+  React4.useEffect(() => {
+    setAllowedCollections(collectionConfigs.map((c) => c.collection));
+  }, [collectionConfigs]);
+  const pulseConfigs = useMemo(() => {
+    return collectionConfigs.map((config) => ({
+      name: config.collection,
+      fetcher: () => fetchCollectionData(config.collection),
+      interval: config.refreshInterval || 5e3
+    }));
+  }, [collectionConfigs]);
+  const [collectionsData, setCollectionsData] = React4.useState({});
+  const [allLoading, setAllLoading] = React4.useState(true);
+  const pulseElements = pulseConfigs.map((config) => /* @__PURE__ */ jsx4(
+    Pulse,
+    {
+      fetcher: config.fetcher,
+      interval: config.interval,
+      staleThreshold: 3e4,
+      maxStaleAge: 6e4,
+      children: (data, meta) => {
+        setCollectionsData((prev) => ({
+          ...prev,
+          [config.name]: {
+            items: Array.isArray(data) ? data : [],
+            count: Array.isArray(data) ? data.length : 1,
+            meta,
+            ...data
+          }
+        }));
+        if (pulseConfigs.length === Object.keys({ ...collectionsData, [config.name]: true }).length) {
+          setAllLoading(false);
+        }
+        return null;
+      }
+    },
+    config.name
+  ));
+  const contextValue = {
+    collections: collectionsData,
+    isLoading: allLoading,
+    getCollection: (name) => collectionsData[name] || null,
+    getField: (collection, field) => {
+      const data = collectionsData[collection];
+      if (!data) return void 0;
+      return data[field] ?? resolveTemplate(field, collectionsData);
+    }
+  };
+  if (allLoading) {
+    return /* @__PURE__ */ jsx4(Fragment2, { children: fallback ?? /* @__PURE__ */ jsx4(DefaultLoading2, {}) });
+  }
+  return /* @__PURE__ */ jsxs4(PulseCollectionContext.Provider, { value: contextValue, children: [
+    pulseElements,
+    children
+  ] });
+}
+function usePulseCollections() {
+  const context = useContext(PulseCollectionContext);
+  if (!context) {
+    throw new Error("usePulseCollections must be used within PulseCollectionProvider");
+  }
+  return context;
+}
+function useCollection(collectionName) {
+  const { getCollection } = usePulseCollections();
+  return getCollection(collectionName);
+}
+function useCollectionField(collectionName, field) {
+  const { getField } = usePulseCollections();
+  return getField(collectionName, field);
+}
+function useTemplateResolution() {
+  const { collections } = usePulseCollections();
+  return (template) => {
+    return resolveTemplate(template, collections);
+  };
+}
+function DefaultLoading2() {
+  return /* @__PURE__ */ jsx4("div", { style: { padding: "2rem", textAlign: "center", color: "#6B7280" }, children: "Loading live data..." });
+}
+
+// src/collection/MetricCardPulse.tsx
+import React5 from "react";
+import { z } from "zod";
+import { jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var MetricCardPulseSchema = z.object({
+  collection: z.string().min(1, "Collection name required"),
+  field: z.string().min(1, "Field path required"),
+  label: z.string().optional(),
+  icon: z.any().optional(),
+  // ReactNode
+  color: z.string().optional(),
+  trend: z.enum(["up", "down", "stable"]).optional(),
+  trendValue: z.string().optional(),
+  aggregate: z.enum(["count", "sum", "avg"]).optional(),
+  aggregateField: z.string().optional(),
+  filter: z.string().optional()
+});
+function runInDev(fn) {
+  try {
+    if (process.env.NODE_ENV !== "production") {
+      fn();
+    }
+  } catch {
+  }
+}
+function MetricCard({ label, value, icon, color, trend, trendValue }) {
+  const cardColor = color ?? "#0066CC";
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      style: {
+        backgroundColor: "white",
+        borderRadius: "12px",
+        padding: "24px",
+        boxShadow: "0 1px 3px rgba(0,0,0,0.1)",
+        border: "1px solid #E5E7EB",
+        position: "relative",
+        overflow: "hidden"
+      },
+      children: [
+        /* @__PURE__ */ jsx5(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              height: "4px",
+              backgroundColor: cardColor
+            }
+          }
+        ),
+        /* @__PURE__ */ jsxs5("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ jsxs5("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ jsx5(
+              "p",
+              {
+                style: {
+                  fontSize: "14px",
+                  color: "#6B7280",
+                  margin: "0 0 8px 0",
+                  fontWeight: 500
+                },
+                children: label
+              }
+            ),
+            /* @__PURE__ */ jsx5(
+              "p",
+              {
+                style: {
+                  fontSize: "36px",
+                  fontWeight: 700,
+                  color: "#111827",
+                  margin: 0,
+                  lineHeight: 1
+                },
+                children: typeof value === "number" ? value.toLocaleString() : value
+              }
+            ),
+            trend && trendValue && /* @__PURE__ */ jsx5(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  marginTop: "12px"
+                },
+                children: /* @__PURE__ */ jsxs5(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "13px",
+                      color: "#6B7280"
+                    },
+                    children: [
+                      trend === "up" ? "\u2191" : trend === "down" ? "\u2193" : "\u2192",
+                      " ",
+                      trendValue
+                    ]
+                  }
+                )
+              }
+            )
+          ] }),
+          icon && /* @__PURE__ */ jsx5(
+            "div",
+            {
+              style: {
+                width: "48px",
+                height: "48px",
+                borderRadius: "12px",
+                backgroundColor: `${cardColor}15`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                color: cardColor
+              },
+              children: icon
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function MetricCardPulse({
+  collection,
+  field,
+  label,
+  icon,
+  color,
+  trend,
+  trendValue,
+  aggregate,
+  aggregateField
+}) {
+  runInDev(() => {
+    const result = MetricCardPulseSchema.safeParse({
+      collection,
+      field,
+      label,
+      icon,
+      color,
+      trend,
+      trendValue,
+      aggregate,
+      aggregateField
+    });
+    if (!result.success) {
+      console.warn("[MetricCardPulse] Invalid props:", result.error.issues);
+    }
+  });
+  const value = useCollectionField(collection, field);
+  const displayValue = React5.useMemo(() => {
+    if (value === null || value === void 0) return 0;
+    if (aggregate === "count") {
+      return Array.isArray(value) ? value.length : value ?? 0;
+    }
+    if ((aggregate === "sum" || aggregate === "avg") && aggregateField) {
+      const arr = Array.isArray(value) ? value : [];
+      if (aggregate === "sum") {
+        return arr.reduce((sum2, item) => sum2 + (item[aggregateField] ?? 0), 0);
+      }
+      if (arr.length === 0) return 0;
+      const sum = arr.reduce((s, item) => s + (item[aggregateField] ?? 0), 0);
+      return Math.round(sum / arr.length * 10) / 10;
+    }
+    return typeof value === "number" ? value : 0;
+  }, [value, aggregate, aggregateField]);
+  return /* @__PURE__ */ jsx5(
+    MetricCard,
+    {
+      label: label ?? field,
+      value: typeof displayValue === "number" ? displayValue : 0,
+      icon,
+      color,
+      trend,
+      trendValue
+    }
+  );
+}
+
+// src/collection/DataTablePulse.tsx
+import { useMemo as useMemo2 } from "react";
+import { z as z2 } from "zod";
+import { jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+var ColumnSchema = z2.object({
+  field: z2.string().min(1),
+  header: z2.string(),
+  type: z2.enum(["text", "badge", "date", "number"]).optional(),
+  sortable: z2.boolean().optional(),
+  filterable: z2.boolean().optional()
+});
+var DataTablePulseSchema = z2.object({
+  collection: z2.string().min(1),
+  columns: z2.array(ColumnSchema).min(1, "At least one column required"),
+  filter: z2.string().optional(),
+  sortBy: z2.string().optional(),
+  sortDirection: z2.enum(["asc", "desc"]).optional(),
+  limit: z2.number().int().positive().max(1e3).optional(),
+  onRowClick: z2.function().optional(),
+  emptyMessage: z2.string().optional()
+});
+
+// src/collection/StatusBadgePulse.tsx
+import React7 from "react";
+import { z as z3 } from "zod";
+import { StatusBadge } from "@stackwright-pro/display-components";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var StatusBadgePulseSchema = z3.object({
+  collection: z3.string().min(1),
+  field: z3.string().min(1),
+  label: z3.string().optional(),
+  pulse: z3.boolean().optional(),
+  statusMap: z3.record(z3.string(), z3.enum(["operational", "degraded", "outage", "maintenance"])).optional()
+});
+
+// src/registration.ts
+import { registerComponent } from "@stackwright/core";
+function registerPulseComponents() {
+  registerComponent("pulse_provider", () => null);
+  registerComponent("metric_card_pulse", () => null);
+  registerComponent("data_table_pulse", () => null);
+  registerComponent("status_badge_pulse", () => null);
+}
 export {
+  MetricCardPulse,
   Pulse,
+  PulseCollectionProvider,
   PulseEmptyState,
   PulseErrorState,
   PulseIndicator,
@@ -324,6 +683,12 @@ export {
   PulseSyncingState,
   PulseValidationError,
   createPulseValidator,
+  registerPulseComponents,
+  resolveTemplate,
+  useCollection,
+  useCollectionField,
   usePulse,
-  useStreaming
+  usePulseCollections,
+  useStreaming,
+  useTemplateResolution
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stackwright-pro/pulse",
-  "version": "0.2.0",
+  "version": "0.2.1-alpha.0",
   "description": "Source-agnostic real-time data polling for Stackwright Pro",
   "license": "PROPRIETARY",
   "main": "./dist/index.js",
@@ -18,16 +18,22 @@
   ],
   "dependencies": {
     "@tanstack/react-query": "^5.0.0",
-    "zod": "^4.3.6"
+    "zod": "^4.3.6",
+    "@stackwright-pro/display-components": "0.1.2-alpha.0"
   },
   "peerDependencies": {
-    "react": "^18.0.0",
-    "react-dom": "^18.0.0"
+    "@stackwright/core": ">=0.7.0",
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
   },
   "devDependencies": {
+    "@testing-library/react": "^16.0.0",
+    "@types/node": "^24.12.0",
     "@types/react": "^18.3.0",
     "@types/react-dom": "^18.3.0",
-    "@testing-library/react": "^16.0.0",
     "jsdom": "^25.0.0",
     "tsup": "^8.5.0",
     "typescript": "^5.8.3",
@@ -36,6 +42,7 @@
   "scripts": {
     "build": "tsup src/index.ts --format cjs,esm --dts --clean",
     "dev": "tsup src/index.ts --format cjs,esm --dts --watch",
-    "test": "vitest"
+    "test": "vitest",
+    "test:coverage": "vitest run --coverage"
   }
 }