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

package/dist/index.js

@@ -1,8 +1,13 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
 var __export = (target, all) => {
   for (var name in all)
     __defProp(target, name, { get: all[name], enumerable: true });
@@ -15,12 +20,39 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
+// src/collection/collectionData.ts
+var collectionData_exports = {};
+__export(collectionData_exports, {
+  getCollectionData: () => getCollectionData
+});
+async function getCollectionData(collection) {
+  console.warn(
+    `[collectionData] Stub called for collection: ${collection}. Run prebuild to generate real data fetchers.`
+  );
+  return [];
+}
+var init_collectionData = __esm({
+  "src/collection/collectionData.ts"() {
+    "use strict";
+  }
+});
+
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  MetricCardPulse: () => MetricCardPulse,
   Pulse: () => Pulse,
+  PulseCollectionProvider: () => PulseCollectionProvider,
   PulseEmptyState: () => PulseEmptyState,
   PulseErrorState: () => PulseErrorState,
   PulseIndicator: () => PulseIndicator,
@@ -29,8 +61,14 @@ __export(index_exports, {
   PulseSyncingState: () => PulseSyncingState,
   PulseValidationError: () => PulseValidationError,
   createPulseValidator: () => createPulseValidator,
+  registerPulseComponents: () => registerPulseComponents,
+  resolveTemplate: () => resolveTemplate,
+  useCollection: () => useCollection,
+  useCollectionField: () => useCollectionField,
   usePulse: () => usePulse,
-  useStreaming: () => useStreaming
+  usePulseCollections: () => usePulseCollections,
+  useStreaming: () => useStreaming,
+  useTemplateResolution: () => useTemplateResolution
 });
 module.exports = __toCommonJS(index_exports);
 
@@ -40,6 +78,8 @@ var import_react2 = require("react");
 // src/hooks/usePulse.ts
 var import_react = require("react");
 var import_react_query = require("@tanstack/react-query");
+var MIN_POLL_INTERVAL = 2e3;
+var MAX_POLL_INTERVAL = 3e5;
 function usePulse(options) {
   const {
     fetcher,
@@ -62,7 +102,7 @@ function usePulse(options) {
   const { data, isLoading, isFetching, isSuccess, isError, error, refetch } = (0, import_react_query.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),
@@ -124,16 +164,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__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: loadingState ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DefaultLoading, {}) });
   }
@@ -350,9 +389,367 @@ var PulseValidationError = class extends Error {
     }));
   }
 };
+
+// src/collection/PulseCollectionProvider.tsx
+var import_react5 = __toESM(require("react"));
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ALLOWED_COLLECTIONS = /* @__PURE__ */ new Set();
+function setAllowedCollections(collections) {
+  ALLOWED_COLLECTIONS.clear();
+  collections.forEach((c) => ALLOWED_COLLECTIONS.add(c));
+}
+var PulseCollectionContext = (0, import_react5.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 module2 = await Promise.resolve().then(() => (init_collectionData(), collectionData_exports));
+    return module2.getCollectionData(collectionName);
+  } catch {
+    console.warn(`[PulseCollectionProvider] collectionData not generated for: ${collectionName}`);
+    return [];
+  }
+}
+function PulseCollectionProvider({
+  collections: collectionConfigs,
+  children,
+  fallback
+}) {
+  import_react5.default.useEffect(() => {
+    setAllowedCollections(collectionConfigs.map((c) => c.collection));
+  }, [collectionConfigs]);
+  const pulseConfigs = (0, import_react5.useMemo)(() => {
+    return collectionConfigs.map((config) => ({
+      name: config.collection,
+      fetcher: () => fetchCollectionData(config.collection),
+      interval: config.refreshInterval || 5e3
+    }));
+  }, [collectionConfigs]);
+  const [collectionsData, setCollectionsData] = import_react5.default.useState({});
+  const [allLoading, setAllLoading] = import_react5.default.useState(true);
+  const pulseElements = pulseConfigs.map((config) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    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__ */ (0, import_jsx_runtime4.jsx)(import_jsx_runtime4.Fragment, { children: fallback ?? /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(DefaultLoading2, {}) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(PulseCollectionContext.Provider, { value: contextValue, children: [
+    pulseElements,
+    children
+  ] });
+}
+function usePulseCollections() {
+  const context = (0, import_react5.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__ */ (0, import_jsx_runtime4.jsx)("div", { style: { padding: "2rem", textAlign: "center", color: "#6B7280" }, children: "Loading live data..." });
+}
+
+// src/collection/MetricCardPulse.tsx
+var import_react6 = __toESM(require("react"));
+var import_zod = require("zod");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var MetricCardPulseSchema = import_zod.z.object({
+  collection: import_zod.z.string().min(1, "Collection name required"),
+  field: import_zod.z.string().min(1, "Field path required"),
+  label: import_zod.z.string().optional(),
+  icon: import_zod.z.any().optional(),
+  // ReactNode
+  color: import_zod.z.string().optional(),
+  trend: import_zod.z.enum(["up", "down", "stable"]).optional(),
+  trendValue: import_zod.z.string().optional(),
+  aggregate: import_zod.z.enum(["count", "sum", "avg"]).optional(),
+  aggregateField: import_zod.z.string().optional(),
+  filter: import_zod.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__ */ (0, import_jsx_runtime5.jsxs)(
+    "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__ */ (0, import_jsx_runtime5.jsx)(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              height: "4px",
+              backgroundColor: cardColor
+            }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { display: "flex", alignItems: "flex-start", justifyContent: "space-between" }, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { style: { flex: 1 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "p",
+              {
+                style: {
+                  fontSize: "14px",
+                  color: "#6B7280",
+                  margin: "0 0 8px 0",
+                  fontWeight: 500
+                },
+                children: label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "p",
+              {
+                style: {
+                  fontSize: "36px",
+                  fontWeight: 700,
+                  color: "#111827",
+                  margin: 0,
+                  lineHeight: 1
+                },
+                children: typeof value === "number" ? value.toLocaleString() : value
+              }
+            ),
+            trend && trendValue && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  gap: "4px",
+                  marginTop: "12px"
+                },
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+                  "span",
+                  {
+                    style: {
+                      fontSize: "13px",
+                      color: "#6B7280"
+                    },
+                    children: [
+                      trend === "up" ? "\u2191" : trend === "down" ? "\u2193" : "\u2192",
+                      " ",
+                      trendValue
+                    ]
+                  }
+                )
+              }
+            )
+          ] }),
+          icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+            "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 = import_react6.default.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__ */ (0, import_jsx_runtime5.jsx)(
+    MetricCard,
+    {
+      label: label ?? field,
+      value: typeof displayValue === "number" ? displayValue : 0,
+      icon,
+      color,
+      trend,
+      trendValue
+    }
+  );
+}
+
+// src/collection/DataTablePulse.tsx
+var import_react7 = require("react");
+var import_zod2 = require("zod");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var ColumnSchema = import_zod2.z.object({
+  field: import_zod2.z.string().min(1),
+  header: import_zod2.z.string(),
+  type: import_zod2.z.enum(["text", "badge", "date", "number"]).optional(),
+  sortable: import_zod2.z.boolean().optional(),
+  filterable: import_zod2.z.boolean().optional()
+});
+var DataTablePulseSchema = import_zod2.z.object({
+  collection: import_zod2.z.string().min(1),
+  columns: import_zod2.z.array(ColumnSchema).min(1, "At least one column required"),
+  filter: import_zod2.z.string().optional(),
+  sortBy: import_zod2.z.string().optional(),
+  sortDirection: import_zod2.z.enum(["asc", "desc"]).optional(),
+  limit: import_zod2.z.number().int().positive().max(1e3).optional(),
+  onRowClick: import_zod2.z.function().optional(),
+  emptyMessage: import_zod2.z.string().optional()
+});
+
+// src/collection/StatusBadgePulse.tsx
+var import_react8 = __toESM(require("react"));
+var import_zod3 = require("zod");
+var import_display_components = require("@stackwright-pro/display-components");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var StatusBadgePulseSchema = import_zod3.z.object({
+  collection: import_zod3.z.string().min(1),
+  field: import_zod3.z.string().min(1),
+  label: import_zod3.z.string().optional(),
+  pulse: import_zod3.z.boolean().optional(),
+  statusMap: import_zod3.z.record(import_zod3.z.string(), import_zod3.z.enum(["operational", "degraded", "outage", "maintenance"])).optional()
+});
+
+// src/registration.ts
+var import_core = require("@stackwright/core");
+function registerPulseComponents() {
+  (0, import_core.registerComponent)("pulse_provider", () => null);
+  (0, import_core.registerComponent)("metric_card_pulse", () => null);
+  (0, import_core.registerComponent)("data_table_pulse", () => null);
+  (0, import_core.registerComponent)("status_badge_pulse", () => null);
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  MetricCardPulse,
   Pulse,
+  PulseCollectionProvider,
   PulseEmptyState,
   PulseErrorState,
   PulseIndicator,
@@ -361,6 +758,12 @@ var PulseValidationError = class extends Error {
   PulseSyncingState,
   PulseValidationError,
   createPulseValidator,
+  registerPulseComponents,
+  resolveTemplate,
+  useCollection,
+  useCollectionField,
   usePulse,
-  useStreaming
+  usePulseCollections,
+  useStreaming,
+  useTemplateResolution
 });