@buoy-gg/events 2.1.1

package/lib/module/components/UnifiedEventDetail.js

@@ -0,0 +1,366 @@
+"use strict";
+
+/**
+ * UnifiedEventDetail
+ *
+ * Detail view for a single unified event.
+ * Uses shared detail components from other packages when available,
+ * falls back to generic DataViewer when packages aren't installed.
+ */
+
+import { View, Text, StyleSheet, ScrollView } from "react-native";
+import { memo, useMemo } from "react";
+import { buoyColors, formatRelativeTime, copyToClipboard, parseValue } from "@buoy-gg/shared-ui";
+import { DataViewer } from "@buoy-gg/shared-ui/dataViewer";
+import { ReactQueryEventDetail } from "./ReactQueryEventDetail";
+
+// ============================================================================
+// Optional Component Loading
+// ============================================================================
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function tryLoadOptionalDetailComponents() {
+  const components = {
+    StorageEventDetailContent: null,
+    ReduxActionDetailContent: null,
+    NetworkEventDetailView: null
+  };
+
+  // Try to load storage detail component
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const storage = require("@buoy-gg/storage");
+    components.StorageEventDetailContent = storage.StorageEventDetailContent;
+  } catch {
+    // Optional dependency not installed
+  }
+
+  // Try to load redux detail component
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const redux = require("@buoy-gg/redux");
+    components.ReduxActionDetailContent = redux.ReduxActionDetailContent;
+  } catch {
+    // Optional dependency not installed
+  }
+
+  // Try to load network detail component
+  try {
+    // @ts-ignore - Dynamic import that may not exist
+    const network = require("@buoy-gg/network");
+    components.NetworkEventDetailView = network.NetworkEventDetailView;
+  } catch {
+    // Optional dependency not installed
+  }
+  return components;
+}
+
+// Cache loaded components
+const optionalComponents = tryLoadOptionalDetailComponents();
+
+// ============================================================================
+// Configuration
+// ============================================================================
+
+/**
+ * Source configuration for display
+ */
+const SOURCE_CONFIG = {
+  "storage-async": {
+    label: "AsyncStorage",
+    color: "#8B5CF6"
+  },
+  "storage-mmkv": {
+    label: "MMKV",
+    color: "#F59E0B"
+  },
+  redux: {
+    label: "Redux",
+    color: "#3B82F6"
+  },
+  network: {
+    label: "Network",
+    color: "#10B981"
+  },
+  "react-query": {
+    label: "React Query",
+    color: "#EC4899"
+  },
+  "react-query-query": {
+    label: "Query",
+    color: "#EC4899"
+  },
+  "react-query-mutation": {
+    label: "Mutation",
+    color: "#F97316"
+  },
+  route: {
+    label: "Route",
+    color: "#06B6D4"
+  }
+};
+
+/**
+ * Check if an event is a storage event
+ */
+function isStorageEvent(source) {
+  return source === "storage-async" || source === "storage-mmkv";
+}
+
+/**
+ * Get value type from a value
+ */
+function getValueType(value) {
+  const parsed = parseValue(value);
+  if (parsed === null) return "null";
+  if (parsed === undefined) return "undefined";
+  if (Array.isArray(parsed)) return "array";
+  if (typeof parsed === "boolean") return "boolean";
+  if (typeof parsed === "number") return "number";
+  if (typeof parsed === "string") return "string";
+  if (typeof parsed === "object") return "object";
+  return "undefined";
+}
+
+// ============================================================================
+// Component
+// ============================================================================
+
+export const UnifiedEventDetail = /*#__PURE__*/memo(function UnifiedEventDetail({
+  event,
+  onBack
+}) {
+  const sourceConfig = SOURCE_CONFIG[event.source];
+  const timestamp = new Date(event.timestamp);
+
+  // For storage events, create a conversation object to use with StorageEventDetailContent
+  const storageConversation = useMemo(() => {
+    if (!isStorageEvent(event.source)) return null;
+    if (!optionalComponents.StorageEventDetailContent) return null;
+    const originalEvent = event.originalEvent;
+
+    // Create a conversation with a single event for the detail view
+    return {
+      key: originalEvent.data?.key || "unknown",
+      lastEvent: originalEvent,
+      events: [originalEvent],
+      totalOperations: 1,
+      currentValue: originalEvent.data?.value,
+      valueType: getValueType(originalEvent.data?.value),
+      storageTypes: new Set([originalEvent.storageType || "async"])
+    };
+  }, [event]);
+
+  // For storage events, use the shared StorageEventDetailContent if available
+  if (storageConversation && optionalComponents.StorageEventDetailContent) {
+    const {
+      StorageEventDetailContent
+    } = optionalComponents;
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.container,
+      children: /*#__PURE__*/_jsx(StorageEventDetailContent, {
+        conversation: storageConversation,
+        selectedEventIndex: 0,
+        onEventIndexChange: () => {},
+        disableInternalFooter: true
+      })
+    });
+  }
+
+  // For Redux events, use the shared ReduxActionDetailContent if available
+  if (event.source === "redux" && optionalComponents.ReduxActionDetailContent) {
+    const {
+      ReduxActionDetailContent
+    } = optionalComponents;
+    const reduxAction = event.originalEvent;
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.container,
+      children: /*#__PURE__*/_jsx(ReduxActionDetailContent, {
+        action: reduxAction,
+        actions: [reduxAction],
+        selectedIndex: 0,
+        onIndexChange: () => {},
+        disableInternalFooter: true
+      })
+    });
+  }
+
+  // For network events, use the shared NetworkEventDetailView if available
+  if (event.source === "network" && optionalComponents.NetworkEventDetailView) {
+    const {
+      NetworkEventDetailView
+    } = optionalComponents;
+    const networkEvent = event.originalEvent;
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.container,
+      children: /*#__PURE__*/_jsx(ScrollView, {
+        style: styles.content,
+        children: /*#__PURE__*/_jsx(NetworkEventDetailView, {
+          event: networkEvent
+        })
+      })
+    });
+  }
+
+  // For React Query events, use the specialized ReactQueryEventDetail
+  if (event.source === "react-query" || event.source === "react-query-query" || event.source === "react-query-mutation") {
+    return /*#__PURE__*/_jsx(View, {
+      style: styles.container,
+      children: /*#__PURE__*/_jsx(ReactQueryEventDetail, {
+        event: event
+      })
+    });
+  }
+
+  // Route events expand in-place in the list, so they shouldn't reach this detail view
+  // If they do somehow, fall through to the generic view
+
+  // For all other events (or when specific components aren't available), show the generic detail view
+  const getEventData = () => {
+    return event.originalEvent;
+  };
+  const handleCopy = async () => {
+    await copyToClipboard({
+      source: event.source,
+      timestamp: timestamp.toISOString(),
+      title: event.title,
+      subtitle: event.subtitle,
+      data: getEventData()
+    });
+  };
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: /*#__PURE__*/_jsxs(ScrollView, {
+      style: styles.content,
+      contentContainerStyle: styles.contentContainer,
+      children: [/*#__PURE__*/_jsx(View, {
+        style: styles.sourceBadgeRow,
+        children: /*#__PURE__*/_jsxs(View, {
+          style: [styles.sourceBadge, {
+            backgroundColor: sourceConfig.color + "20"
+          }],
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.sourceDot, {
+              backgroundColor: sourceConfig.color
+            }]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.sourceLabel, {
+              color: sourceConfig.color
+            }],
+            children: sourceConfig.label
+          })]
+        })
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.title,
+        children: event.title
+      }), /*#__PURE__*/_jsx(Text, {
+        style: styles.subtitle,
+        children: event.subtitle
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.timestampRow,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.timestampLabel,
+          children: "Timestamp"
+        }), /*#__PURE__*/_jsxs(Text, {
+          style: styles.timestampValue,
+          children: [timestamp.toLocaleTimeString(), " (", formatRelativeTime(timestamp), ")"]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.dataSection,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.sectionLabel,
+          children: "Event Data"
+        }), /*#__PURE__*/_jsx(View, {
+          style: styles.dataContainer,
+          children: /*#__PURE__*/_jsx(DataViewer, {
+            data: getEventData(),
+            title: "",
+            showTypeFilter: false
+          })
+        })]
+      })]
+    })
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: buoyColors.base
+  },
+  content: {
+    flex: 1
+  },
+  contentContainer: {
+    padding: 16
+  },
+  sourceBadgeRow: {
+    flexDirection: "row",
+    marginBottom: 12
+  },
+  sourceBadge: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 12,
+    gap: 6
+  },
+  sourceDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3
+  },
+  sourceLabel: {
+    fontSize: 12,
+    fontWeight: "600"
+  },
+  title: {
+    fontSize: 24,
+    fontWeight: "700",
+    color: buoyColors.text,
+    marginBottom: 4
+  },
+  subtitle: {
+    fontSize: 16,
+    color: buoyColors.textMuted,
+    marginBottom: 16
+  },
+  timestampRow: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingVertical: 12,
+    borderTopWidth: 1,
+    borderTopColor: buoyColors.border,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.border,
+    marginBottom: 16
+  },
+  timestampLabel: {
+    fontSize: 14,
+    color: buoyColors.textMuted
+  },
+  timestampValue: {
+    fontSize: 14,
+    color: buoyColors.text,
+    fontFamily: "monospace"
+  },
+  dataSection: {
+    marginTop: 8
+  },
+  sectionLabel: {
+    fontSize: 12,
+    fontWeight: "600",
+    color: buoyColors.textMuted,
+    textTransform: "uppercase",
+    letterSpacing: 0.5,
+    marginBottom: 8
+  },
+  dataContainer: {
+    backgroundColor: buoyColors.card,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: buoyColors.border,
+    overflow: "hidden"
+  }
+});
+//# sourceMappingURL=UnifiedEventDetail.js.map

package/lib/module/components/UnifiedEventFilters.js

@@ -0,0 +1,109 @@
+"use strict";
+
+/**
+ * UnifiedEventFilters
+ *
+ * Filter bar showing toggleable badges for each available event source.
+ * Badges are sorted: enabled first, disabled last.
+ * Toggling a badge enables/disables event listening for that source.
+ */
+
+import { View, Text, TouchableOpacity, StyleSheet, ScrollView } from "react-native";
+import { memo } from "react";
+import { buoyColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const UnifiedEventFilters = /*#__PURE__*/memo(function UnifiedEventFilters({
+  availableSources,
+  onToggleSource,
+  totalCount,
+  filteredCount
+}) {
+  if (availableSources.length === 0) {
+    return null;
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsx(ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      contentContainerStyle: styles.badgesRow,
+      children: availableSources.map(source => {
+        const isEnabled = source.enabled !== false;
+        return /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.badge, isEnabled ? {
+            backgroundColor: source.color + "20",
+            borderColor: source.color + "60"
+          } : styles.badgeDisabled],
+          onPress: () => onToggleSource(source.source),
+          activeOpacity: 0.7,
+          children: [/*#__PURE__*/_jsx(View, {
+            style: [styles.dot, {
+              backgroundColor: isEnabled ? source.color : buoyColors.textMuted + "60"
+            }]
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.badgeLabel, {
+              color: isEnabled ? source.color : buoyColors.textMuted + "80"
+            }],
+            children: source.label
+          }), isEnabled && source.count > 0 && /*#__PURE__*/_jsx(Text, {
+            style: [styles.badgeCount, {
+              color: source.color
+            }],
+            children: source.count
+          })]
+        }, source.source);
+      })
+    }), filteredCount < totalCount && /*#__PURE__*/_jsxs(Text, {
+      style: styles.filterInfo,
+      children: ["Showing ", filteredCount, " of ", totalCount]
+    })]
+  });
+});
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 8,
+    backgroundColor: buoyColors.base,
+    borderBottomWidth: 1,
+    borderBottomColor: buoyColors.border
+  },
+  badgesRow: {
+    flexDirection: "row",
+    gap: 8,
+    paddingHorizontal: 12
+  },
+  badge: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 16,
+    borderWidth: 1,
+    gap: 6
+  },
+  badgeDisabled: {
+    backgroundColor: buoyColors.card,
+    borderColor: buoyColors.border,
+    opacity: 0.6
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3
+  },
+  badgeLabel: {
+    fontSize: 12,
+    fontWeight: "600"
+  },
+  badgeCount: {
+    fontSize: 11,
+    fontWeight: "500",
+    opacity: 0.8
+  },
+  filterInfo: {
+    marginTop: 6,
+    fontSize: 11,
+    color: buoyColors.textMuted,
+    textAlign: "center"
+  }
+});
+//# sourceMappingURL=UnifiedEventFilters.js.map