@buoy-gg/storage 1.7.2

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

@@ -0,0 +1,137 @@
+"use strict";
+
+import { View, Text, StyleSheet, TouchableOpacity } from "react-native";
+import { Filter, DynamicFilterView, Database, HardDrive, Shield, macOSColors } from "@buoy-gg/shared-ui";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export function StorageEventFilterView({
+  ignoredPatterns,
+  onTogglePattern,
+  onAddPattern,
+  availableKeys = [],
+  enabledStorageTypes,
+  onToggleStorageType
+}) {
+  const filterConfig = {
+    addFilterSection: {
+      enabled: true,
+      placeholder: "Enter key pattern to hide...",
+      title: "KEY FILTERS",
+      icon: Filter
+    },
+    availableItemsSection: {
+      enabled: true,
+      title: "AVAILABLE EVENT KEYS",
+      emptyMessage: "No storage event keys available. Events will appear here once captured.",
+      items: availableKeys
+    },
+    howItWorksSection: {
+      enabled: true,
+      title: "HOW EVENT FILTERS WORK",
+      description: "Patterns hide matching storage keys from the event list. Storage type toggles control which storage backends are monitored.",
+      examples: ["• react_buoy → hides keys containing react_buoy", "• @temp → hides @temp_user, @temp_data", "• redux → hides redux-persist:root", "• AsyncStorage → show/hide AsyncStorage events", "• MMKV → show/hide MMKV events"],
+      icon: Filter
+    },
+    onPatternToggle: onTogglePattern,
+    onPatternAdd: onAddPattern,
+    activePatterns: ignoredPatterns
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.storageTypeSection,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.sectionTitle,
+        children: "STORAGE TYPES"
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.storageTypeButtons,
+        children: [/*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.storageTypeButton, enabledStorageTypes.has('async') && styles.storageTypeButtonActive, {
+            borderColor: macOSColors.semantic.warning + '40'
+          }],
+          onPress: () => onToggleStorageType('async'),
+          children: [/*#__PURE__*/_jsx(Database, {
+            size: 16,
+            color: enabledStorageTypes.has('async') ? macOSColors.semantic.warning : macOSColors.text.muted
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.storageTypeButtonText, enabledStorageTypes.has('async') && {
+              color: macOSColors.semantic.warning
+            }],
+            children: "AsyncStorage"
+          })]
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.storageTypeButton, enabledStorageTypes.has('mmkv') && styles.storageTypeButtonActive, {
+            borderColor: macOSColors.semantic.info + '40'
+          }],
+          onPress: () => onToggleStorageType('mmkv'),
+          children: [/*#__PURE__*/_jsx(HardDrive, {
+            size: 16,
+            color: enabledStorageTypes.has('mmkv') ? macOSColors.semantic.info : macOSColors.text.muted
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.storageTypeButtonText, enabledStorageTypes.has('mmkv') && {
+              color: macOSColors.semantic.info
+            }],
+            children: "MMKV"
+          })]
+        }), /*#__PURE__*/_jsxs(TouchableOpacity, {
+          style: [styles.storageTypeButton, enabledStorageTypes.has('secure') && styles.storageTypeButtonActive, {
+            borderColor: macOSColors.semantic.success + '40'
+          }],
+          onPress: () => onToggleStorageType('secure'),
+          children: [/*#__PURE__*/_jsx(Shield, {
+            size: 16,
+            color: enabledStorageTypes.has('secure') ? macOSColors.semantic.success : macOSColors.text.muted
+          }), /*#__PURE__*/_jsx(Text, {
+            style: [styles.storageTypeButtonText, enabledStorageTypes.has('secure') && {
+              color: macOSColors.semantic.success
+            }],
+            children: "Secure Storage"
+          })]
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(DynamicFilterView, {
+      ...filterConfig
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1
+  },
+  storageTypeSection: {
+    padding: 16,
+    borderBottomWidth: 1,
+    borderBottomColor: macOSColors.border.default
+  },
+  sectionTitle: {
+    fontSize: 11,
+    fontWeight: '700',
+    color: macOSColors.text.secondary,
+    letterSpacing: 0.8,
+    marginBottom: 12
+  },
+  storageTypeButtons: {
+    flexDirection: 'row',
+    gap: 8
+  },
+  storageTypeButton: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    paddingVertical: 10,
+    paddingHorizontal: 12,
+    backgroundColor: macOSColors.background.input,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: macOSColors.border.default
+  },
+  storageTypeButtonActive: {
+    backgroundColor: macOSColors.background.card
+  },
+  storageTypeButtonText: {
+    fontSize: 11,
+    fontWeight: '600',
+    color: macOSColors.text.muted
+  }
+});

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

@@ -0,0 +1,354 @@
+"use strict";
+
+import { useEffect, useState, useCallback } from "react";
+import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
+import { Play, Pause, Trash2 } from "@buoy-gg/shared-ui";
+import { startListening, stopListening, addListener, isListening as checkIsListening } from "../utils/AsyncStorageListener";
+import { translateStorageAction } from "../utils/storageActionHelpers";
+import { isMMKVAvailable } from "../utils/mmkvAvailability";
+
+// Conditionally import MMKV listener
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+let addMMKVListener;
+
+// Define type for MMKV events (imported conditionally at runtime)
+
+if (isMMKVAvailable()) {
+  const mmkvListener = require("../utils/MMKVListener");
+  addMMKVListener = mmkvListener.addMMKVListener;
+}
+
+// Unified event type that covers both AsyncStorage and MMKV
+
+/**
+ * Storage event listener component for monitoring AsyncStorage and MMKV operations
+ * Follows the Sentry component pattern for consistency
+ */
+export function StorageEventListener() {
+  const [events, setEvents] = useState([]);
+  const [isListening, setIsListening] = useState(false);
+  const [isAsyncStorageAvailable, setIsAsyncStorageAvailable] = useState(false);
+  useEffect(() => {
+    // Component mounted, AsyncStorage is available
+    setIsAsyncStorageAvailable(true);
+
+    // Add listener for AsyncStorage events
+    const unsubscribeAsync = addListener(event => {
+      setEvents(prev => {
+        const newEvents = [{
+          ...event,
+          storageType: 'async'
+        }, ...prev.slice(0, 99)];
+        return newEvents;
+      });
+    });
+
+    // Add listener for MMKV events (only if available)
+    let unsubscribeMMKV = () => {};
+    if (isMMKVAvailable() && addMMKVListener) {
+      unsubscribeMMKV = addMMKVListener(event => {
+        setEvents(prev => {
+          const newEvents = [{
+            ...event,
+            storageType: 'mmkv'
+          }, ...prev.slice(0, 99)];
+          return newEvents;
+        });
+      });
+    }
+
+    // Check initial listening state
+    const initialState = checkIsListening();
+    setIsListening(initialState);
+    return () => {
+      if (checkIsListening()) {
+        stopListening();
+      }
+      unsubscribeAsync();
+      unsubscribeMMKV();
+    };
+  }, []);
+  const handleToggleListening = useCallback(async () => {
+    if (!isAsyncStorageAvailable) {
+      return;
+    }
+    if (isListening) {
+      // Stopping listener
+      stopListening();
+      setIsListening(false);
+    } else {
+      // Starting listener
+      await startListening();
+      setIsListening(true);
+    }
+  }, [isListening, isAsyncStorageAvailable]);
+  const handleClearEvents = useCallback(() => {
+    // Clearing all events
+    setEvents([]);
+  }, []);
+  const formatEventData = event => {
+    if (!event.data) return "";
+
+    // MMKV events
+    if (event.storageType === 'mmkv') {
+      const mmkvEvent = event;
+
+      // Show instance ID for MMKV events
+      const instancePrefix = `[${mmkvEvent.instanceId}] `;
+      if (mmkvEvent.action.startsWith('set.') || mmkvEvent.action.startsWith('get.') || mmkvEvent.action === 'delete') {
+        const keyInfo = mmkvEvent.data?.key ? `${mmkvEvent.data.key}` : "";
+        const typeInfo = mmkvEvent.data?.valueType ? ` (${mmkvEvent.data.valueType})` : "";
+        return instancePrefix + keyInfo + typeInfo;
+      }
+      if (mmkvEvent.action === 'clearAll') {
+        return instancePrefix + "All keys";
+      }
+      return instancePrefix;
+    }
+
+    // AsyncStorage events
+    if (event.action === "setItem" || event.action === "removeItem" || event.action === "mergeItem") {
+      return event.data.key || "";
+    }
+    if (event.action === "multiSet" || event.action === "multiMerge") {
+      return `${event.data.pairs?.length || 0} pairs`;
+    }
+    if (event.action === "multiRemove") {
+      return `${event.data.keys?.length || 0} keys`;
+    }
+    if (event.action === "clear") {
+      return "All storage";
+    }
+    return "";
+  };
+  const getActionColor = action => {
+    // MMKV actions
+    if (action.startsWith('set.')) {
+      return "#10B981"; // Green for writes
+    }
+    if (action.startsWith('get.')) {
+      return "#F59E0B"; // Orange for reads
+    }
+    if (action === 'delete' || action === 'clearAll') {
+      return "#EF4444"; // Red for deletes
+    }
+
+    // AsyncStorage actions
+    switch (action) {
+      case "setItem":
+      case "multiSet":
+        return "#10B981";
+      // Green for write
+      case "removeItem":
+      case "multiRemove":
+      case "clear":
+        return "#EF4444";
+      // Red for delete
+      case "mergeItem":
+      case "multiMerge":
+        return "#3B82F6";
+      // Blue for merge
+      default:
+        return "#6B7280";
+    }
+  };
+  if (!isAsyncStorageAvailable) {
+    return null; // Don't show component if AsyncStorage isn't available
+  }
+  return /*#__PURE__*/_jsxs(View, {
+    style: styles.container,
+    children: [/*#__PURE__*/_jsxs(View, {
+      style: styles.header,
+      children: [/*#__PURE__*/_jsxs(View, {
+        style: styles.headerLeft,
+        children: [/*#__PURE__*/_jsx(Text, {
+          style: styles.title,
+          children: "Storage Events"
+        }), /*#__PURE__*/_jsxs(View, {
+          style: styles.statsContainer,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: styles.statsText,
+            children: events.length
+          }), isListening && /*#__PURE__*/_jsx(View, {
+            style: styles.listeningIndicator
+          })]
+        })]
+      }), /*#__PURE__*/_jsxs(View, {
+        style: styles.headerActions,
+        children: [/*#__PURE__*/_jsx(TouchableOpacity, {
+          "sentry-label": "ignore toggle listening",
+          onPress: handleToggleListening,
+          style: [styles.actionButton, isListening ? styles.stopButton : styles.startButton],
+          accessibilityLabel: isListening ? "Stop listening" : "Start listening",
+          children: isListening ? /*#__PURE__*/_jsx(Pause, {
+            size: 14,
+            color: "#EF4444"
+          }) : /*#__PURE__*/_jsx(Play, {
+            size: 14,
+            color: "#10B981"
+          })
+        }), /*#__PURE__*/_jsx(TouchableOpacity, {
+          "sentry-label": "ignore clear events",
+          onPress: handleClearEvents,
+          style: styles.actionButton,
+          accessibilityLabel: "Clear events",
+          disabled: events.length === 0,
+          children: /*#__PURE__*/_jsx(Trash2, {
+            size: 14,
+            color: events.length > 0 ? "#6B7280" : "#374151"
+          })
+        })]
+      })]
+    }), /*#__PURE__*/_jsx(ScrollView, {
+      style: styles.eventsList,
+      nestedScrollEnabled: true,
+      showsVerticalScrollIndicator: false,
+      "sentry-label": "ignore event list scroll",
+      children: events.length === 0 ? /*#__PURE__*/_jsx(View, {
+        style: styles.emptyState,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.emptyText,
+          children: isListening ? "Waiting for storage operations..." : "Start listening to capture events"
+        })
+      }) : events.map((event, index) => /*#__PURE__*/_jsxs(View, {
+        style: styles.eventItem,
+        children: [/*#__PURE__*/_jsxs(View, {
+          style: styles.eventLeft,
+          children: [/*#__PURE__*/_jsx(Text, {
+            style: [styles.eventAction, {
+              color: getActionColor(event.action)
+            }],
+            children: translateStorageAction(event.action)
+          }), /*#__PURE__*/_jsx(Text, {
+            style: styles.eventData,
+            numberOfLines: 1,
+            children: formatEventData(event)
+          })]
+        }), /*#__PURE__*/_jsx(Text, {
+          style: styles.eventTime,
+          children: event.timestamp.toLocaleTimeString([], {
+            hour: "2-digit",
+            minute: "2-digit",
+            second: "2-digit"
+          })
+        })]
+      }, `${event.timestamp.getTime()}-${index}`))
+    })]
+  });
+}
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.08)",
+    marginBottom: 12,
+    maxHeight: 200
+  },
+  header: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    borderBottomColor: "rgba(255, 255, 255, 0.06)"
+  },
+  headerLeft: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  title: {
+    fontSize: 12,
+    fontWeight: "500",
+    color: "#9CA3AF",
+    textTransform: "uppercase",
+    letterSpacing: 0.5
+  },
+  statsContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6,
+    backgroundColor: "rgba(0, 0, 0, 0.2)",
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 10
+  },
+  statsText: {
+    fontSize: 11,
+    color: "#6B7280",
+    fontWeight: "500"
+  },
+  listeningIndicator: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: "#10B981"
+  },
+  headerActions: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 6
+  },
+  actionButton: {
+    width: 28,
+    height: 28,
+    borderRadius: 6,
+    backgroundColor: "rgba(255, 255, 255, 0.03)",
+    borderWidth: 1,
+    borderColor: "rgba(255, 255, 255, 0.08)",
+    alignItems: "center",
+    justifyContent: "center"
+  },
+  startButton: {
+    backgroundColor: "rgba(16, 185, 129, 0.1)",
+    borderColor: "rgba(16, 185, 129, 0.2)"
+  },
+  stopButton: {
+    backgroundColor: "rgba(239, 68, 68, 0.1)",
+    borderColor: "rgba(239, 68, 68, 0.2)"
+  },
+  eventsList: {
+    maxHeight: 150
+  },
+  emptyState: {
+    padding: 20,
+    alignItems: "center"
+  },
+  emptyText: {
+    fontSize: 11,
+    color: "#6B7280",
+    fontStyle: "italic"
+  },
+  eventItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderBottomWidth: 1,
+    borderBottomColor: "rgba(255, 255, 255, 0.03)"
+  },
+  eventLeft: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+    marginRight: 8
+  },
+  eventAction: {
+    fontSize: 11,
+    fontWeight: "600",
+    minWidth: 60
+  },
+  eventData: {
+    fontSize: 11,
+    color: "#9CA3AF",
+    flex: 1
+  },
+  eventTime: {
+    fontSize: 10,
+    color: "#6B7280"
+  }
+});

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

@@ -0,0 +1,20 @@
+"use strict";
+
+import { Database, CyberpunkSectionButton } from "@buoy-gg/shared-ui";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function StorageEventsSection({
+  onPress,
+  eventCount = 0
+}) {
+  const subtitle = eventCount > 0 ? `${eventCount} events` : "Monitoring";
+  return /*#__PURE__*/_jsx(CyberpunkSectionButton, {
+    id: "storage-events",
+    title: "EVENTS",
+    subtitle: subtitle,
+    icon: Database,
+    iconColor: "#00E5FF",
+    iconBackgroundColor: "rgba(0, 229, 255, 0.1)",
+    onPress: onPress,
+    index: 3
+  });
+}