@buoy-gg/events 2.1.1

package/lib/module/hooks/useUnifiedEvents.js

@@ -0,0 +1,234 @@
+"use strict";
+
+/**
+ * useUnifiedEvents Hook
+ *
+ * Main hook for consuming unified events from all sources.
+ * Automatically discovers and subscribes to available event sources.
+ */
+
+import { useState, useEffect, useCallback, useMemo, useRef } from "react";
+import { useFeatureGate } from "@buoy-gg/shared-ui";
+import { subscribe, subscribeToStorage, subscribeToRedux, subscribeToNetwork, subscribeToReactQuery, subscribeToRoutes, unsubscribeAll, getSourceCounts, clearEvents as clearStoreEvents, getAvailableEventSources } from "../stores/unifiedEventStore";
+import { saveEnabledSources, loadEnabledSources } from "../utils/badgeSelectionStorage";
+import { getSourceDisplayConfig } from "../utils/autoDiscoverEventSources";
+
+/** Max events for non-Pro users */
+const FREE_TIER_MAX_EVENTS = 25;
+
+/**
+ * All possible sources for display
+ */
+const ALL_DISPLAY_SOURCES = ["storage-async", "redux", "network", "react-query-query", "react-query-mutation", "route"];
+
+/**
+ * Map display sources to actual event sources they should match
+ */
+const SOURCE_TO_EVENT_SOURCES = {
+  "storage-async": ["storage-async", "storage-mmkv"],
+  "storage-mmkv": ["storage-mmkv"],
+  redux: ["redux"],
+  network: ["network"],
+  "react-query": ["react-query", "react-query-query"],
+  "react-query-query": ["react-query", "react-query-query"],
+  "react-query-mutation": ["react-query-mutation"],
+  route: ["route"]
+};
+
+/**
+ * Map event sources to their parent discovery ID
+ */
+const EVENT_SOURCE_TO_DISCOVERY_ID = {
+  "storage-async": "storage",
+  "storage-mmkv": "storage",
+  redux: "redux",
+  network: "network",
+  "react-query": "react-query",
+  "react-query-query": "react-query",
+  "react-query-mutation": "react-query",
+  route: "route-events"
+};
+export function useUnifiedEvents() {
+  const {
+    isPro
+  } = useFeatureGate();
+  const [events, setEvents] = useState([]);
+  const [enabledSources, setEnabledSources] = useState(() => new Set(ALL_DISPLAY_SOURCES));
+  const [isCapturing, setIsCapturing] = useState(true);
+  const isStateRestoredRef = useRef(false);
+
+  // Get discovered sources (which packages are installed)
+  const discoveredSources = useMemo(() => {
+    return getAvailableEventSources();
+  }, []);
+
+  // Get available display sources (only show sources for installed packages)
+  const availableDisplaySources = useMemo(() => {
+    return ALL_DISPLAY_SOURCES.filter(displaySource => {
+      const eventSources = SOURCE_TO_EVENT_SOURCES[displaySource] || [displaySource];
+      // Check if any of the event sources for this display source are available
+      return eventSources.some(es => discoveredSources.has(es));
+    });
+  }, [discoveredSources]);
+
+  // Subscribe to store changes and start capturing on mount
+  useEffect(() => {
+    // Subscribe to store updates
+    const unsubscribe = subscribe(newEvents => {
+      setEvents(newEvents);
+    });
+
+    // Start capturing from all available sources
+    // These functions are now safe - they check if the source is available
+    subscribeToStorage();
+    subscribeToRedux();
+    subscribeToNetwork();
+    subscribeToReactQuery();
+    subscribeToRoutes();
+    return unsubscribe;
+  }, []);
+
+  // Restore saved badge selection state on mount
+  useEffect(() => {
+    const restoreState = async () => {
+      const savedSources = await loadEnabledSources();
+      if (savedSources && savedSources.length > 0) {
+        // Filter to only include valid sources that still exist and are available
+        const validSources = savedSources.filter(s => availableDisplaySources.includes(s));
+        if (validSources.length > 0) {
+          setEnabledSources(new Set(validSources));
+        } else {
+          // If no saved sources are valid, enable all available sources
+          setEnabledSources(new Set(availableDisplaySources));
+        }
+      } else {
+        // No saved state - enable all available sources
+        setEnabledSources(new Set(availableDisplaySources));
+      }
+      isStateRestoredRef.current = true;
+    };
+    restoreState();
+  }, [availableDisplaySources]);
+
+  // Persist enabled sources whenever they change (after initial restoration)
+  useEffect(() => {
+    if (!isStateRestoredRef.current) {
+      return;
+    }
+    saveEnabledSources(Array.from(enabledSources));
+  }, [enabledSources]);
+
+  // Build set of all event sources that should be shown
+  const allowedEventSources = useMemo(() => {
+    const allowed = new Set();
+    enabledSources.forEach(displaySource => {
+      const eventSources = SOURCE_TO_EVENT_SOURCES[displaySource];
+      if (eventSources) {
+        eventSources.forEach(s => allowed.add(s));
+      }
+    });
+    return allowed;
+  }, [enabledSources]);
+
+  // Filter events by enabled sources
+  const allFilteredEvents = useMemo(() => {
+    if (allowedEventSources.size === 0) {
+      return [];
+    }
+    return events.filter(event => allowedEventSources.has(event.source));
+  }, [events, allowedEventSources]);
+
+  // Apply free tier limit if not Pro
+  const filteredEvents = useMemo(() => {
+    if (isPro) {
+      return allFilteredEvents;
+    }
+    return allFilteredEvents.slice(0, FREE_TIER_MAX_EVENTS);
+  }, [allFilteredEvents, isPro]);
+
+  // Calculate hidden events count for free tier
+  const hiddenEventsCount = useMemo(() => {
+    if (isPro) {
+      return 0;
+    }
+    return Math.max(0, allFilteredEvents.length - FREE_TIER_MAX_EVENTS);
+  }, [allFilteredEvents, isPro]);
+
+  // Get all available sources with counts, sorted: enabled first, disabled last
+  const availableSources = useMemo(() => {
+    const counts = getSourceCounts();
+    const sources = availableDisplaySources.map(source => {
+      const eventSources = SOURCE_TO_EVENT_SOURCES[source] || [source];
+      const totalCount = eventSources.reduce((sum, s) => sum + (counts[s] || 0), 0);
+      const displayConfig = getSourceDisplayConfig(source);
+      return {
+        source,
+        ...displayConfig,
+        count: totalCount,
+        enabled: enabledSources.has(source)
+      };
+    });
+
+    // Sort: enabled first, then disabled
+    return sources.sort((a, b) => {
+      if (a.enabled && !b.enabled) return -1;
+      if (!a.enabled && b.enabled) return 1;
+      return 0;
+    });
+  }, [events, enabledSources, availableDisplaySources]);
+  const toggleSource = useCallback(source => {
+    setEnabledSources(prev => {
+      const next = new Set(prev);
+      if (next.has(source)) {
+        next.delete(source);
+      } else {
+        next.add(source);
+      }
+      return next;
+    });
+  }, []);
+  const enableAllSources = useCallback(() => {
+    setEnabledSources(new Set(availableDisplaySources));
+  }, [availableDisplaySources]);
+  const clearEvents = useCallback(() => {
+    clearStoreEvents();
+  }, []);
+  const startCapturing = useCallback(() => {
+    subscribeToStorage();
+    subscribeToRedux();
+    subscribeToNetwork();
+    subscribeToReactQuery();
+    subscribeToRoutes();
+    setIsCapturing(true);
+  }, []);
+  const stopCapturing = useCallback(() => {
+    unsubscribeAll();
+    setIsCapturing(false);
+  }, []);
+  const toggleCapturing = useCallback(() => {
+    if (isCapturing) {
+      stopCapturing();
+    } else {
+      startCapturing();
+    }
+  }, [isCapturing, startCapturing, stopCapturing]);
+  return {
+    events,
+    filteredEvents,
+    availableSources,
+    enabledSources,
+    toggleSource,
+    enableAllSources,
+    clearEvents,
+    totalCount: events.length,
+    filteredCount: filteredEvents.length,
+    isCapturing,
+    startCapturing,
+    stopCapturing,
+    toggleCapturing,
+    discoveredSources,
+    hiddenEventsCount,
+    isPro
+  };
+}
+//# sourceMappingURL=useUnifiedEvents.js.map

package/lib/module/index.js

@@ -0,0 +1,77 @@
+"use strict";
+
+/**
+ * @buoy-gg/events
+ *
+ * Unified event timeline for all DevTools sources.
+ * Shows events from Storage, Redux, Network, React Query, etc.
+ * in a single chronological view.
+ *
+ * PUBLIC API - Only these exports are supported for external use.
+ * Internal stores and subscription mechanisms are not exported to prevent
+ * bypassing the tool's intended usage patterns.
+ */
+
+// =============================================================================
+// PRESET (Primary entry point for users)
+// =============================================================================
+export { eventsToolPreset, createEventsTool } from "./preset";
+
+// =============================================================================
+// MAIN COMPONENT
+// =============================================================================
+export { UnifiedEventViewer } from "./components/UnifiedEventViewer";
+
+// =============================================================================
+// HOOKS (For consuming event data)
+// =============================================================================
+export { useUnifiedEvents } from "./hooks/useUnifiedEvents";
+
+// =============================================================================
+// TYPES
+// =============================================================================
+
+// =============================================================================
+// COPY SETTINGS (Configuration types and presets)
+// =============================================================================
+export { DEFAULT_COPY_SETTINGS, COPY_PRESETS, PRESET_METADATA, detectActivePreset } from "./types/copySettings";
+
+// =============================================================================
+// UI COMPONENTS (For custom implementations)
+// =============================================================================
+export { UnifiedEventItem } from "./components/UnifiedEventItem";
+export { UnifiedEventList } from "./components/UnifiedEventList";
+export { UnifiedEventFilters } from "./components/UnifiedEventFilters";
+export { UnifiedEventDetail } from "./components/UnifiedEventDetail";
+export { ReactQueryEventDetail } from "./components/ReactQueryEventDetail";
+export { EventsCopySettingsView } from "./components/EventsCopySettingsView";
+
+// =============================================================================
+// CORRELATION UTILITIES (For linking related events)
+// =============================================================================
+export { findRelatedEvents, hasRelatedEvents, getRelatedEventsCount, buildCorrelationCountMap, getCorrelationGroup, getCorrelationLabel, getCorrelationColor } from "./utils/correlationUtils";
+
+// =============================================================================
+// EXPORT UTILITIES (For generating formatted exports)
+// =============================================================================
+export { generateExport, generateMarkdownExport, generateJsonExport, generatePlaintextExport, estimateExportSize, getExportSummary, filterEvents } from "./utils/eventExportFormatter";
+// =============================================================================
+// COPY SETTINGS STORAGE (For persisting export preferences)
+// =============================================================================
+export { loadCopySettings, saveCopySettings, clearCopySettings } from "./utils/copySettingsStorage";
+
+// =============================================================================
+// INTERNAL EXPORTS (For @buoy-gg/* packages only - not part of public API)
+// These are NOT exported to prevent users from bypassing the unified event
+// system. Event subscription should go through the proper tool integration.
+// =============================================================================
+// NOTE: The following are intentionally NOT exported:
+// - unifiedEventStore (internal store)
+// - subscribeToStorage, unsubscribeFromStorage (internal subscription)
+// - subscribeToRedux, unsubscribeFromRedux (internal subscription)
+// - subscribeToNetwork, unsubscribeFromNetwork (internal subscription)
+// - subscribeToReactQuery, unsubscribeFromReactQuery (internal subscription)
+// - subscribeToRoutes, unsubscribeFromRoutes (internal subscription)
+// - getEvents, getActiveSources, getSourceCounts (internal store operations)
+// - clearEvents, subscribe, getEventCount (internal store operations)
+//# sourceMappingURL=index.js.map

package/lib/module/preset.js

@@ -0,0 +1,62 @@
+"use strict";
+
+/**
+ * Pre-configured Events tool for FloatingDevTools
+ *
+ * This preset provides a unified event timeline showing events
+ * from all DevTools sources (Storage, Redux, Network, etc.)
+ *
+ * @example
+ * ```tsx
+ * import { eventsToolPreset } from '@buoy-gg/events';
+ *
+ * const installedApps = [
+ *   eventsToolPreset, // That's it!
+ *   // ...other tools
+ * ];
+ * ```
+ */
+
+import { EventsIcon, EVENTS_ICON_COLOR } from "@buoy-gg/floating-tools-core";
+import { EventsModal } from "./components/EventsModal";
+
+/**
+ * Pre-configured Events tool for FloatingDevTools.
+ * Shows a unified timeline of events from all sources:
+ * - AsyncStorage operations
+ * - MMKV operations (coming soon)
+ * - Redux actions (coming soon)
+ * - Network requests (coming soon)
+ * - React Query events (coming soon)
+ */
+import { jsx as _jsx } from "react/jsx-runtime";
+export const eventsToolPreset = {
+  id: "events",
+  name: "EVENTS",
+  description: "Unified event timeline",
+  slot: "both",
+  icon: ({
+    size,
+    color
+  }) => /*#__PURE__*/_jsx(EventsIcon, {
+    size: size,
+    color: color || EVENTS_ICON_COLOR
+  }),
+  component: EventsModal,
+  props: {
+    enableSharedModalDimensions: false
+  }
+};
+
+/**
+ * Create a custom Events tool configuration.
+ * Use this if you want to override default settings.
+ */
+export function createEventsTool(options = {}) {
+  return {
+    ...eventsToolPreset,
+    name: options.name ?? eventsToolPreset.name,
+    description: options.description ?? eventsToolPreset.description
+  };
+}
+//# sourceMappingURL=preset.js.map