@buoy-gg/events 2.1.1

package/lib/commonjs/hooks/useUnifiedEvents.js

@@ -0,0 +1,237 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useUnifiedEvents = useUnifiedEvents;
+var _react = require("react");
+var _sharedUi = require("@buoy-gg/shared-ui");
+var _unifiedEventStore = require("../stores/unifiedEventStore");
+var _badgeSelectionStorage = require("../utils/badgeSelectionStorage");
+var _autoDiscoverEventSources = require("../utils/autoDiscoverEventSources");
+/**
+ * useUnifiedEvents Hook
+ *
+ * Main hook for consuming unified events from all sources.
+ * Automatically discovers and subscribes to available event sources.
+ */
+
+/** 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"
+};
+function useUnifiedEvents() {
+  const {
+    isPro
+  } = (0, _sharedUi.useFeatureGate)();
+  const [events, setEvents] = (0, _react.useState)([]);
+  const [enabledSources, setEnabledSources] = (0, _react.useState)(() => new Set(ALL_DISPLAY_SOURCES));
+  const [isCapturing, setIsCapturing] = (0, _react.useState)(true);
+  const isStateRestoredRef = (0, _react.useRef)(false);
+
+  // Get discovered sources (which packages are installed)
+  const discoveredSources = (0, _react.useMemo)(() => {
+    return (0, _unifiedEventStore.getAvailableEventSources)();
+  }, []);
+
+  // Get available display sources (only show sources for installed packages)
+  const availableDisplaySources = (0, _react.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
+  (0, _react.useEffect)(() => {
+    // Subscribe to store updates
+    const unsubscribe = (0, _unifiedEventStore.subscribe)(newEvents => {
+      setEvents(newEvents);
+    });
+
+    // Start capturing from all available sources
+    // These functions are now safe - they check if the source is available
+    (0, _unifiedEventStore.subscribeToStorage)();
+    (0, _unifiedEventStore.subscribeToRedux)();
+    (0, _unifiedEventStore.subscribeToNetwork)();
+    (0, _unifiedEventStore.subscribeToReactQuery)();
+    (0, _unifiedEventStore.subscribeToRoutes)();
+    return unsubscribe;
+  }, []);
+
+  // Restore saved badge selection state on mount
+  (0, _react.useEffect)(() => {
+    const restoreState = async () => {
+      const savedSources = await (0, _badgeSelectionStorage.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)
+  (0, _react.useEffect)(() => {
+    if (!isStateRestoredRef.current) {
+      return;
+    }
+    (0, _badgeSelectionStorage.saveEnabledSources)(Array.from(enabledSources));
+  }, [enabledSources]);
+
+  // Build set of all event sources that should be shown
+  const allowedEventSources = (0, _react.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 = (0, _react.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 = (0, _react.useMemo)(() => {
+    if (isPro) {
+      return allFilteredEvents;
+    }
+    return allFilteredEvents.slice(0, FREE_TIER_MAX_EVENTS);
+  }, [allFilteredEvents, isPro]);
+
+  // Calculate hidden events count for free tier
+  const hiddenEventsCount = (0, _react.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 = (0, _react.useMemo)(() => {
+    const counts = (0, _unifiedEventStore.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 = (0, _autoDiscoverEventSources.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 = (0, _react.useCallback)(source => {
+    setEnabledSources(prev => {
+      const next = new Set(prev);
+      if (next.has(source)) {
+        next.delete(source);
+      } else {
+        next.add(source);
+      }
+      return next;
+    });
+  }, []);
+  const enableAllSources = (0, _react.useCallback)(() => {
+    setEnabledSources(new Set(availableDisplaySources));
+  }, [availableDisplaySources]);
+  const clearEvents = (0, _react.useCallback)(() => {
+    (0, _unifiedEventStore.clearEvents)();
+  }, []);
+  const startCapturing = (0, _react.useCallback)(() => {
+    (0, _unifiedEventStore.subscribeToStorage)();
+    (0, _unifiedEventStore.subscribeToRedux)();
+    (0, _unifiedEventStore.subscribeToNetwork)();
+    (0, _unifiedEventStore.subscribeToReactQuery)();
+    (0, _unifiedEventStore.subscribeToRoutes)();
+    setIsCapturing(true);
+  }, []);
+  const stopCapturing = (0, _react.useCallback)(() => {
+    (0, _unifiedEventStore.unsubscribeAll)();
+    setIsCapturing(false);
+  }, []);
+  const toggleCapturing = (0, _react.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/commonjs/index.js

@@ -0,0 +1,205 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "COPY_PRESETS", {
+  enumerable: true,
+  get: function () {
+    return _copySettings.COPY_PRESETS;
+  }
+});
+Object.defineProperty(exports, "DEFAULT_COPY_SETTINGS", {
+  enumerable: true,
+  get: function () {
+    return _copySettings.DEFAULT_COPY_SETTINGS;
+  }
+});
+Object.defineProperty(exports, "EventsCopySettingsView", {
+  enumerable: true,
+  get: function () {
+    return _EventsCopySettingsView.EventsCopySettingsView;
+  }
+});
+Object.defineProperty(exports, "PRESET_METADATA", {
+  enumerable: true,
+  get: function () {
+    return _copySettings.PRESET_METADATA;
+  }
+});
+Object.defineProperty(exports, "ReactQueryEventDetail", {
+  enumerable: true,
+  get: function () {
+    return _ReactQueryEventDetail.ReactQueryEventDetail;
+  }
+});
+Object.defineProperty(exports, "UnifiedEventDetail", {
+  enumerable: true,
+  get: function () {
+    return _UnifiedEventDetail.UnifiedEventDetail;
+  }
+});
+Object.defineProperty(exports, "UnifiedEventFilters", {
+  enumerable: true,
+  get: function () {
+    return _UnifiedEventFilters.UnifiedEventFilters;
+  }
+});
+Object.defineProperty(exports, "UnifiedEventItem", {
+  enumerable: true,
+  get: function () {
+    return _UnifiedEventItem.UnifiedEventItem;
+  }
+});
+Object.defineProperty(exports, "UnifiedEventList", {
+  enumerable: true,
+  get: function () {
+    return _UnifiedEventList.UnifiedEventList;
+  }
+});
+Object.defineProperty(exports, "UnifiedEventViewer", {
+  enumerable: true,
+  get: function () {
+    return _UnifiedEventViewer.UnifiedEventViewer;
+  }
+});
+Object.defineProperty(exports, "buildCorrelationCountMap", {
+  enumerable: true,
+  get: function () {
+    return _correlationUtils.buildCorrelationCountMap;
+  }
+});
+Object.defineProperty(exports, "clearCopySettings", {
+  enumerable: true,
+  get: function () {
+    return _copySettingsStorage.clearCopySettings;
+  }
+});
+Object.defineProperty(exports, "createEventsTool", {
+  enumerable: true,
+  get: function () {
+    return _preset.createEventsTool;
+  }
+});
+Object.defineProperty(exports, "detectActivePreset", {
+  enumerable: true,
+  get: function () {
+    return _copySettings.detectActivePreset;
+  }
+});
+Object.defineProperty(exports, "estimateExportSize", {
+  enumerable: true,
+  get: function () {
+    return _eventExportFormatter.estimateExportSize;
+  }
+});
+Object.defineProperty(exports, "eventsToolPreset", {
+  enumerable: true,
+  get: function () {
+    return _preset.eventsToolPreset;
+  }
+});
+Object.defineProperty(exports, "filterEvents", {
+  enumerable: true,
+  get: function () {
+    return _eventExportFormatter.filterEvents;
+  }
+});
+Object.defineProperty(exports, "findRelatedEvents", {
+  enumerable: true,
+  get: function () {
+    return _correlationUtils.findRelatedEvents;
+  }
+});
+Object.defineProperty(exports, "generateExport", {
+  enumerable: true,
+  get: function () {
+    return _eventExportFormatter.generateExport;
+  }
+});
+Object.defineProperty(exports, "generateJsonExport", {
+  enumerable: true,
+  get: function () {
+    return _eventExportFormatter.generateJsonExport;
+  }
+});
+Object.defineProperty(exports, "generateMarkdownExport", {
+  enumerable: true,
+  get: function () {
+    return _eventExportFormatter.generateMarkdownExport;
+  }
+});
+Object.defineProperty(exports, "generatePlaintextExport", {
+  enumerable: true,
+  get: function () {
+    return _eventExportFormatter.generatePlaintextExport;
+  }
+});
+Object.defineProperty(exports, "getCorrelationColor", {
+  enumerable: true,
+  get: function () {
+    return _correlationUtils.getCorrelationColor;
+  }
+});
+Object.defineProperty(exports, "getCorrelationGroup", {
+  enumerable: true,
+  get: function () {
+    return _correlationUtils.getCorrelationGroup;
+  }
+});
+Object.defineProperty(exports, "getCorrelationLabel", {
+  enumerable: true,
+  get: function () {
+    return _correlationUtils.getCorrelationLabel;
+  }
+});
+Object.defineProperty(exports, "getExportSummary", {
+  enumerable: true,
+  get: function () {
+    return _eventExportFormatter.getExportSummary;
+  }
+});
+Object.defineProperty(exports, "getRelatedEventsCount", {
+  enumerable: true,
+  get: function () {
+    return _correlationUtils.getRelatedEventsCount;
+  }
+});
+Object.defineProperty(exports, "hasRelatedEvents", {
+  enumerable: true,
+  get: function () {
+    return _correlationUtils.hasRelatedEvents;
+  }
+});
+Object.defineProperty(exports, "loadCopySettings", {
+  enumerable: true,
+  get: function () {
+    return _copySettingsStorage.loadCopySettings;
+  }
+});
+Object.defineProperty(exports, "saveCopySettings", {
+  enumerable: true,
+  get: function () {
+    return _copySettingsStorage.saveCopySettings;
+  }
+});
+Object.defineProperty(exports, "useUnifiedEvents", {
+  enumerable: true,
+  get: function () {
+    return _useUnifiedEvents.useUnifiedEvents;
+  }
+});
+var _preset = require("./preset");
+var _UnifiedEventViewer = require("./components/UnifiedEventViewer");
+var _useUnifiedEvents = require("./hooks/useUnifiedEvents");
+var _copySettings = require("./types/copySettings");
+var _UnifiedEventItem = require("./components/UnifiedEventItem");
+var _UnifiedEventList = require("./components/UnifiedEventList");
+var _UnifiedEventFilters = require("./components/UnifiedEventFilters");
+var _UnifiedEventDetail = require("./components/UnifiedEventDetail");
+var _ReactQueryEventDetail = require("./components/ReactQueryEventDetail");
+var _EventsCopySettingsView = require("./components/EventsCopySettingsView");
+var _correlationUtils = require("./utils/correlationUtils");
+var _eventExportFormatter = require("./utils/eventExportFormatter");
+var _copySettingsStorage = require("./utils/copySettingsStorage");
+//# sourceMappingURL=index.js.map

package/lib/commonjs/package.json

@@ -0,0 +1 @@
+{"type":"commonjs"}

package/lib/commonjs/preset.js

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createEventsTool = createEventsTool;
+exports.eventsToolPreset = void 0;
+var _floatingToolsCore = require("@buoy-gg/floating-tools-core");
+var _EventsModal = require("./components/EventsModal");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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
+ * ];
+ * ```
+ */
+
+/**
+ * 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)
+ */
+const eventsToolPreset = exports.eventsToolPreset = {
+  id: "events",
+  name: "EVENTS",
+  description: "Unified event timeline",
+  slot: "both",
+  icon: ({
+    size,
+    color
+  }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_floatingToolsCore.EventsIcon, {
+    size: size,
+    color: color || _floatingToolsCore.EVENTS_ICON_COLOR
+  }),
+  component: _EventsModal.EventsModal,
+  props: {
+    enableSharedModalDimensions: false
+  }
+};
+
+/**
+ * Create a custom Events tool configuration.
+ * Use this if you want to override default settings.
+ */
+function createEventsTool(options = {}) {
+  return {
+    ...eventsToolPreset,
+    name: options.name ?? eventsToolPreset.name,
+    description: options.description ?? eventsToolPreset.description
+  };
+}
+//# sourceMappingURL=preset.js.map