@buoy-gg/storage 1.7.8 → 2.1.2

package/lib/module/storage/components/StorageModalWithTabs.js

@@ -3,25 +3,18 @@
 import { useState, useCallback, useEffect, useRef, useMemo } from "react";
 import { Text, View, TouchableOpacity, StyleSheet, FlatList, Alert } from "react-native";
 import AsyncStorage from "@react-native-async-storage/async-storage";
-import { JsModal, ModalHeader, TabSelector, ValueTypeBadge, StorageTypeBadge, formatRelativeTime, parseValue, devToolsStorageKeys, macOSColors, Database, Pause, Play, Trash2, Filter, Search, SearchBar } from "@buoy-gg/shared-ui";
+import { JsModal, ModalHeader, TabSelector, parseValue, devToolsStorageKeys, macOSColors, Database, Trash2, Filter, Search, SearchBar, PowerToggleButton } from "@buoy-gg/shared-ui";
 import { StorageBrowserMode } from "./StorageBrowserMode";
 import { clearAllAppStorage, clearAllStorageIncludingDevTools } from "../utils/clearAllStorage";
 import { ProFeatureBanner } from "@buoy-gg/shared-ui";
-import { startListening, stopListening, addListener, isListening as checkIsListening } from "../utils/AsyncStorageListener";
+import { stopListening } from "../utils/AsyncStorageListener";
+import { useStorageEvents } from "../hooks/useStorageEvents";
 import { StorageEventDetailContent, StorageEventDetailFooter } from "./StorageEventDetailContent";
 import { StorageFilterViewV2 } from "./StorageFilterViewV2";
 import { StorageEventFilterView } from "./StorageEventFilterView";
-import { translateStorageAction } from "../utils/storageActionHelpers";
-import { isMMKVAvailable } from "../utils/mmkvAvailability";
-
-// Conditionally import MMKV listener
-let addMMKVListener;
-if (isMMKVAvailable()) {
-  const mmkvListener = require("../utils/MMKVListener");
-  addMMKVListener = mmkvListener.addMMKVListener;
-}
-
-// Unified storage event type
+import { StorageEventCard } from "./StorageEventCard";
+// Note: StorageEvent type is now imported from useStorageEvents hook
+// which handles both AsyncStorage and MMKV events via the centralized store
 
 import { useIsPro } from "@buoy-gg/license";
 
@@ -47,8 +40,16 @@ export function StorageModalWithTabs({
   const [isSearchActive, setIsSearchActive] = useState(false);
   const hasLoadedStorageFilters = useRef(false);
 
-  // Event Listener state
-  const [events, setEvents] = useState([]);
+  // Event Listener state - using centralized store via hook
+  const {
+    events,
+    clearEvents: clearStorageEvents,
+    isCapturing,
+    startCapturing,
+    stopCapturing
+  } = useStorageEvents({
+    autoStart: false
+  }); // Don't auto-start, we manage it
   const [isListening, setIsListening] = useState(false);
   const [selectedConversationKey, setSelectedConversationKey] = useState(null);
   const [selectedEventIndex, setSelectedEventIndex] = useState(0);
@@ -61,6 +62,11 @@ export function StorageModalWithTabs({
   const hasLoadedFilters = useRef(false);
   const hasLoadedTabState = useRef(false);
   const hasLoadedMonitoringState = useRef(false);
+
+  // Sync isListening state with hook's isCapturing
+  useEffect(() => {
+    setIsListening(isCapturing);
+  }, [isCapturing]);
   const handleModeChange = useCallback(_mode => {
     // Mode changes handled by JsModal
   }, []);
@@ -92,9 +98,8 @@ export function StorageModalWithTabs({
         const storedMonitoring = await AsyncStorage.getItem(devToolsStorageKeys.storage.isMonitoring());
         if (storedMonitoring !== null) {
           const shouldMonitor = storedMonitoring === "true";
-          if (shouldMonitor && !checkIsListening()) {
-            await startListening();
-            setIsListening(true);
+          if (shouldMonitor && !isCapturing) {
+            await startCapturing();
           }
         }
         hasLoadedMonitoringState.current = true;
@@ -103,7 +108,7 @@ export function StorageModalWithTabs({
       }
     };
     loadMonitoringState();
-  }, [visible]);
+  }, [visible, isCapturing, startCapturing]);
 
   // Note: Conversations will appear when storage events are triggered
   // Click on any conversation to see the unified view with toggle cards
@@ -169,65 +174,21 @@ export function StorageModalWithTabs({
     saveFilters();
   }, [ignoredPatterns]);
 
-  // Sync isListening state with actual listener state on mount
-  useEffect(() => {
-    if (!visible) return;
-
-    // Check if already listening and sync state
-    const listening = checkIsListening();
-    setIsListening(listening);
-  }, [visible]);
+  // Event listener setup - now handled by useStorageEvents hook
+  // The hook subscribes to the centralized storageEventStore
 
-  // Event listener setup - only collect events when isListening is true
-  useEffect(() => {
-    if (!visible || !isListening) return;
-
-    // Set up AsyncStorage event listener
-    const unsubscribeAsync = addListener(event => {
-      const storageEvent = {
-        ...event,
-        storageType: 'async'
-      };
-      lastEventRef.current = storageEvent;
-      setEvents(prev => {
-        const updated = [storageEvent, ...prev];
-        return updated.slice(0, 500);
-      });
-    });
-
-    // Set up MMKV event listener (if available)
-    let unsubscribeMMKV = () => {};
-    if (isMMKVAvailable() && addMMKVListener) {
-      unsubscribeMMKV = addMMKVListener(event => {
-        const storageEvent = {
-          ...event,
-          storageType: 'mmkv'
-        };
-        lastEventRef.current = storageEvent;
-        setEvents(prev => {
-          const updated = [storageEvent, ...prev];
-          return updated.slice(0, 500);
-        });
-      });
-    }
-    return () => {
-      unsubscribeAsync();
-      unsubscribeMMKV();
-    };
-  }, [visible, isListening]);
   const handleToggleListening = useCallback(async () => {
     if (isListening) {
-      stopListening();
-      setIsListening(false);
+      stopCapturing();
+      stopListening(); // Also stop the underlying AsyncStorage listener
     } else {
-      await startListening();
-      setIsListening(true);
+      await startCapturing();
     }
-  }, [isListening]);
+  }, [isListening, startCapturing, stopCapturing]);
   const handleClearEvents = useCallback(() => {
-    setEvents([]);
+    clearStorageEvents();
     setSelectedConversationKey(null);
-  }, []);
+  }, [clearStorageEvents]);
   const handleConversationPress = useCallback(conversation => {
     setSelectedConversationKey(conversation.key);
     setSelectedEventIndex(0);
@@ -404,44 +365,6 @@ export function StorageModalWithTabs({
     if (isPro) return 0;
     return Math.max(0, conversations.length - FREE_TIER_EVENT_LIMIT);
   }, [conversations.length, isPro]);
-  const getActionColor = action => {
-    switch (action) {
-      // AsyncStorage - Set operations
-      case "setItem":
-      case "multiSet":
-      // MMKV - Set operations
-      // falls through
-      case "set.string":
-      case "set.number":
-      case "set.boolean":
-      case "set.buffer":
-        return macOSColors.semantic.success;
-
-      // AsyncStorage - Remove operations
-      case "removeItem":
-      case "multiRemove":
-      case "clear":
-      // MMKV - Delete operations
-      // falls through
-      case "delete":
-      case "clearAll":
-        return macOSColors.semantic.error;
-
-      // AsyncStorage - Merge operations
-      case "mergeItem":
-      case "multiMerge":
-        return macOSColors.semantic.info;
-
-      // MMKV - Get operations
-      case "get.string":
-      case "get.number":
-      case "get.boolean":
-      case "get.buffer":
-        return macOSColors.semantic.warning;
-      default:
-        return macOSColors.text.muted;
-    }
-  };
 
   // FlatList optimization constants
   const END_REACHED_THRESHOLD = 0.8;
@@ -461,35 +384,17 @@ export function StorageModalWithTabs({
   const renderConversationItem = useCallback(({
     item
   }) => {
-    return /*#__PURE__*/_jsxs(TouchableOpacity, {
-      onPress: () => selectConversationRef.current?.(item),
-      style: styles.conversationItem,
-      children: [/*#__PURE__*/_jsxs(View, {
-        style: styles.conversationHeader,
-        children: [/*#__PURE__*/_jsx(Text, {
-          style: styles.keyText,
-          numberOfLines: 1,
-          children: item.key
-        }), /*#__PURE__*/_jsx(Text, {
-          style: [styles.actionText, {
-            color: getActionColor(item.lastEvent.action)
-          }],
-          children: translateStorageAction(item.lastEvent.action)
-        })]
-      }), /*#__PURE__*/_jsxs(View, {
-        style: styles.conversationDetails,
-        children: [item.storageTypes && Array.from(item.storageTypes).map(storageType => /*#__PURE__*/_jsx(StorageTypeBadge, {
-          type: storageType
-        }, storageType)), /*#__PURE__*/_jsx(ValueTypeBadge, {
-          type: item.valueType
-        }), /*#__PURE__*/_jsxs(Text, {
-          style: styles.operationCount,
-          children: [item.totalOperations, " operation", item.totalOperations !== 1 ? "s" : ""]
-        }), /*#__PURE__*/_jsx(Text, {
-          style: styles.timestamp,
-          children: formatRelativeTime(item.lastEvent.timestamp)
-        })]
-      })]
+    const cardData = {
+      key: item.key,
+      lastAction: item.lastEvent.action,
+      totalOperations: item.totalOperations,
+      lastEventTimestamp: item.lastEvent.timestamp,
+      storageTypes: item.storageTypes,
+      valueType: item.valueType
+    };
+    return /*#__PURE__*/_jsx(StorageEventCard, {
+      data: cardData,
+      onPress: () => selectConversationRef.current?.(item)
     });
   }, []);
   if (!visible) return null;
@@ -668,16 +573,10 @@ export function StorageModalWithTabs({
                 size: 14,
                 color: ignoredPatterns.size > 0 ? macOSColors.semantic.debug : macOSColors.text.secondary
               })
-            }), /*#__PURE__*/_jsx(TouchableOpacity, {
-              onPress: handleToggleListening,
-              style: [styles.iconButton, isListening && styles.activeButton],
-              children: isListening ? /*#__PURE__*/_jsx(Pause, {
-                size: 14,
-                color: macOSColors.semantic.success
-              }) : /*#__PURE__*/_jsx(Play, {
-                size: 14,
-                color: macOSColors.semantic.success
-              })
+            }), /*#__PURE__*/_jsx(PowerToggleButton, {
+              isEnabled: isListening,
+              onToggle: handleToggleListening,
+              accessibilityLabel: "Toggle storage event monitoring"
             }), /*#__PURE__*/_jsx(TouchableOpacity, {
               onPress: handleClearEvents,
               style: styles.iconButton,
@@ -714,54 +613,9 @@ const styles = StyleSheet.create({
     alignItems: "center",
     justifyContent: "center"
   },
-  activeButton: {
-    backgroundColor: macOSColors.semantic.successBackground
-  },
   activeFilterButton: {
     backgroundColor: macOSColors.semantic.infoBackground
   },
-  conversationItem: {
-    padding: 12,
-    backgroundColor: macOSColors.background.card,
-    borderRadius: 8,
-    marginHorizontal: 16
-  },
-  conversationHeader: {
-    flexDirection: "row",
-    justifyContent: "space-between",
-    alignItems: "center",
-    marginBottom: 8
-  },
-  keyText: {
-    color: macOSColors.text.primary,
-    fontSize: 14,
-    fontWeight: "600",
-    flex: 1,
-    marginRight: 8,
-    fontFamily: "monospace"
-  },
-  actionText: {
-    fontSize: 11,
-    fontWeight: "600",
-    fontFamily: "monospace",
-    textTransform: "uppercase"
-  },
-  conversationDetails: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  operationCount: {
-    color: macOSColors.text.secondary,
-    fontSize: 11,
-    flex: 1,
-    fontFamily: "monospace"
-  },
-  timestamp: {
-    color: macOSColors.text.muted,
-    fontSize: 11,
-    fontFamily: "monospace"
-  },
   separator: {
     height: 8
   },

package/lib/module/storage/hooks/useStorageEvents.js

@@ -0,0 +1,95 @@
+"use strict";
+
+/**
+ * useStorageEvents Hook
+ *
+ * React hook for subscribing to storage events from the centralized store.
+ * Provides a clean interface for components to receive storage events.
+ *
+ * @example
+ * ```typescript
+ * function MyComponent() {
+ *   const { events, clearEvents, isCapturing } = useStorageEvents();
+ *
+ *   return (
+ *     <View>
+ *       {events.map((event) => (
+ *         <Text key={event.timestamp.toString()}>
+ *           {event.action}: {event.data?.key}
+ *         </Text>
+ *       ))}
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+
+import { useState, useEffect, useCallback } from "react";
+import { storageEventStore } from "../stores/storageEventStore";
+
+// Re-export StorageEvent for convenience
+
+export function useStorageEvents(options = {}) {
+  const {
+    storageType = "all",
+    maxEvents = 500,
+    autoStart = true
+  } = options;
+  const [events, setEvents] = useState([]);
+  const [isCapturing, setIsCapturing] = useState(storageEventStore.capturing);
+
+  // Subscribe to store changes
+  useEffect(() => {
+    const unsubscribe = storageEventStore.subscribe(allEvents => {
+      // Filter by storage type if specified
+      let filtered = allEvents;
+      if (storageType !== "all") {
+        filtered = allEvents.filter(e => e.storageType === storageType);
+      }
+
+      // Limit events
+      if (filtered.length > maxEvents) {
+        filtered = filtered.slice(0, maxEvents);
+      }
+      setEvents(filtered);
+      setIsCapturing(storageEventStore.capturing);
+    });
+    return () => {
+      unsubscribe();
+    };
+  }, [storageType, maxEvents]);
+
+  // Auto-start capturing on mount
+  useEffect(() => {
+    if (autoStart && !storageEventStore.capturing) {
+      storageEventStore.startCapturing();
+      setIsCapturing(true);
+    }
+  }, [autoStart]);
+  const clearEvents = useCallback(() => {
+    storageEventStore.clearEvents();
+  }, []);
+  const startCapturing = useCallback(async () => {
+    await storageEventStore.startCapturing();
+    setIsCapturing(true);
+  }, []);
+  const stopCapturing = useCallback(() => {
+    storageEventStore.stopCapturing();
+    setIsCapturing(false);
+  }, []);
+  const pauseCapturing = useCallback(() => {
+    storageEventStore.pauseCapture();
+  }, []);
+  const resumeCapturing = useCallback(() => {
+    storageEventStore.resumeCapture();
+  }, []);
+  return {
+    events,
+    clearEvents,
+    isCapturing,
+    startCapturing,
+    stopCapturing,
+    pauseCapturing,
+    resumeCapturing
+  };
+}

package/lib/module/storage/index.js

@@ -8,11 +8,14 @@ export { StorageKeyStatsSection } from "./components/StorageKeyStats";
 export { StorageKeySection } from "./components/StorageKeySection";
 export { StorageBrowserMode } from "./components/StorageBrowserMode";
 export { StorageEventsSection } from "./components/StorageEventsSection";
+export { StorageEventCard, getValueType } from "./components/StorageEventCard";
+export { StorageEventDetailContent, StorageEventDetailFooter } from "./components/StorageEventDetailContent";
 
 // Storage hooks
 export { useAsyncStorageKeys } from "./hooks/useAsyncStorageKeys";
 export { useMMKVKeys, useMultiMMKVKeys } from "./hooks/useMMKVKeys";
 export { useMMKVInstances, useMMKVInstance, useMMKVInstanceExists } from "./hooks/useMMKVInstances";
+export { useStorageEvents } from "./hooks/useStorageEvents";
 
 // MMKV Components
 export { MMKVInstanceSelector } from "./components/MMKVInstanceSelector";
@@ -22,4 +25,7 @@ export { MMKVInstanceInfoPanel } from "./components/MMKVInstanceInfoPanel";
 export * from "./types";
 
 // Storage utilities
-export * from "./utils";
+export * from "./utils";
+
+// Storage Event Store
+export { storageEventStore, startStorageCapture, stopStorageCapture, pauseStorageCapture, resumeStorageCapture, subscribeToStorageEvents, onStorageEvent, getStorageEvents, clearStorageEvents, isStorageCapturing } from "./stores/storageEventStore";

package/lib/module/storage/stores/storageEventStore.js

@@ -0,0 +1,231 @@
+"use strict";
+
+/**
+ * Storage Event Store
+ *
+ * Centralized store that aggregates storage events from AsyncStorage and MMKV
+ * into a single event stream. This provides a single source of truth for all
+ * storage operations, eliminating duplicate subscriptions across components.
+ *
+ * @example
+ * ```typescript
+ * import { storageEventStore } from '@buoy-gg/storage';
+ *
+ * // Subscribe to storage events
+ * const unsubscribe = storageEventStore.subscribe((events) => {
+ *   console.log('Storage events:', events);
+ * });
+ *
+ * // Start capturing (must be called once)
+ * await storageEventStore.startCapturing();
+ *
+ * // Later, clean up
+ * unsubscribe();
+ * ```
+ */
+
+import { startListening as startAsyncStorageListening, addListener as addAsyncStorageListener, isListening as isAsyncStorageListening, pauseCapture as pauseAsyncStorageCapture, resumeCapture as resumeAsyncStorageCapture } from "../utils/AsyncStorageListener";
+import { addMMKVListener } from "../utils/MMKVListener";
+
+/**
+ * Unified storage event type combining AsyncStorage and MMKV events
+ */
+
+/**
+ * Listener callback type for storage events
+ */
+
+/**
+ * Listener callback for individual new events
+ */
+
+const MAX_EVENTS = 500;
+class StorageEventStore {
+  events = [];
+  listeners = new Set();
+  eventCallbacks = new Set();
+  isCapturing = false;
+
+  // Unsubscribe functions
+  asyncStorageUnsubscribe = null;
+  mmkvUnsubscribe = null;
+
+  /**
+   * Start capturing storage events from both AsyncStorage and MMKV
+   */
+  async startCapturing() {
+    if (this.isCapturing) {
+      return;
+    }
+
+    // Start AsyncStorage listening if not already active
+    if (!isAsyncStorageListening()) {
+      await startAsyncStorageListening();
+    }
+
+    // Subscribe to AsyncStorage events
+    this.asyncStorageUnsubscribe = addAsyncStorageListener(event => {
+      const storageEvent = {
+        ...event,
+        storageType: "async"
+      };
+      this.addEvent(storageEvent);
+    });
+
+    // Subscribe to MMKV events
+    this.mmkvUnsubscribe = addMMKVListener(event => {
+      const storageEvent = {
+        ...event,
+        storageType: "mmkv"
+      };
+      this.addEvent(storageEvent);
+    });
+    this.isCapturing = true;
+  }
+
+  /**
+   * Stop capturing storage events
+   */
+  stopCapturing() {
+    if (!this.isCapturing) {
+      return;
+    }
+
+    // Unsubscribe from AsyncStorage
+    if (this.asyncStorageUnsubscribe) {
+      this.asyncStorageUnsubscribe();
+      this.asyncStorageUnsubscribe = null;
+    }
+
+    // Unsubscribe from MMKV
+    if (this.mmkvUnsubscribe) {
+      this.mmkvUnsubscribe();
+      this.mmkvUnsubscribe = null;
+    }
+    this.isCapturing = false;
+  }
+
+  /**
+   * Pause event capture (used during time-travel operations)
+   */
+  pauseCapture() {
+    pauseAsyncStorageCapture();
+    // MMKV listener doesn't have pause, but it's less common for time-travel
+  }
+
+  /**
+   * Resume event capture after pausing
+   */
+  resumeCapture() {
+    resumeAsyncStorageCapture();
+  }
+
+  /**
+   * Add an event to the store
+   */
+  addEvent(event) {
+    // Add to beginning (newest first)
+    this.events = [event, ...this.events].slice(0, MAX_EVENTS);
+
+    // Notify event callbacks (for individual events)
+    this.eventCallbacks.forEach(callback => {
+      try {
+        callback(event);
+      } catch {
+        // Ignore callback errors
+      }
+    });
+
+    // Notify listeners (for full event list)
+    this.notifyListeners();
+  }
+
+  /**
+   * Subscribe to all storage events (receives full event array on each change)
+   */
+  subscribe(listener) {
+    this.listeners.add(listener);
+
+    // Immediately call with current events
+    listener(this.events);
+
+    // Return unsubscribe function
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  /**
+   * Subscribe to new events only (receives individual events as they occur)
+   */
+  onEvent(callback) {
+    this.eventCallbacks.add(callback);
+    return () => {
+      this.eventCallbacks.delete(callback);
+    };
+  }
+
+  /**
+   * Notify all listeners of changes
+   */
+  notifyListeners() {
+    const events = this.events;
+    this.listeners.forEach(listener => {
+      try {
+        listener(events);
+      } catch {
+        // Ignore listener errors
+      }
+    });
+  }
+
+  /**
+   * Get all events
+   */
+  getEvents() {
+    return this.events;
+  }
+
+  /**
+   * Get events filtered by storage type
+   */
+  getEventsByType(storageType) {
+    return this.events.filter(event => event.storageType === storageType);
+  }
+
+  /**
+   * Get event count
+   */
+  getEventCount() {
+    return this.events.length;
+  }
+
+  /**
+   * Clear all events
+   */
+  clearEvents() {
+    this.events = [];
+    this.notifyListeners();
+  }
+
+  /**
+   * Check if currently capturing events
+   */
+  get capturing() {
+    return this.isCapturing;
+  }
+}
+
+// Singleton instance
+export const storageEventStore = new StorageEventStore();
+
+// Convenience exports
+export const startStorageCapture = () => storageEventStore.startCapturing();
+export const stopStorageCapture = () => storageEventStore.stopCapturing();
+export const pauseStorageCapture = () => storageEventStore.pauseCapture();
+export const resumeStorageCapture = () => storageEventStore.resumeCapture();
+export const subscribeToStorageEvents = listener => storageEventStore.subscribe(listener);
+export const onStorageEvent = callback => storageEventStore.onEvent(callback);
+export const getStorageEvents = () => storageEventStore.getEvents();
+export const clearStorageEvents = () => storageEventStore.clearEvents();
+export const isStorageCapturing = () => storageEventStore.capturing;