@buoy-gg/storage 7.0.7 → 7.0.8

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

@@ -1,174 +0,0 @@
-"use strict";
-
-import { View, Text, TouchableOpacity, StyleSheet, Alert } from "react-native";
-import { useState, useCallback, useEffect } from "react";
-import { clearAllStorageIncludingDevTools } from "../utils/clearAllStorage";
-import { RefreshCw, Trash2, CopyButton, ProUpgradeModal, buoyColors } from "@buoy-gg/shared-ui";
-import { useIsPro } from "@buoy-gg/license";
-import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-export function StorageActions({
-  storageKeys,
-  onClearAll,
-  onRefresh,
-  totalCount
-}) {
-  const [isRefreshing, setIsRefreshing] = useState(false);
-  const [showUpgradeModal, setShowUpgradeModal] = useState(false);
-  const isPro = useIsPro();
-
-  // Auto-close upgrade modal when user becomes Pro
-  useEffect(() => {
-    if (showUpgradeModal && isPro) {
-      setShowUpgradeModal(false);
-    }
-  }, [showUpgradeModal, isPro]);
-  const handleRefresh = useCallback(async () => {
-    setIsRefreshing(true);
-    try {
-      await onRefresh();
-    } finally {
-      setTimeout(() => setIsRefreshing(false), 500);
-    }
-  }, [onRefresh]);
-  const handleClear = () => {
-    // Gate clear behind Pro
-    if (!isPro) {
-      setShowUpgradeModal(true);
-      return;
-    }
-    Alert.alert("Clear Storage", "Choose what to clear:", [{
-      text: "Cancel",
-      style: "cancel"
-    }, {
-      text: "Clear App Data",
-      onPress: handleClearAppData
-    }, {
-      text: "Clear Everything",
-      style: "destructive",
-      onPress: handleClearEverything
-    }]);
-  };
-  const handleClearAppData = async () => {
-    try {
-      await onClearAll();
-      await onRefresh(); // Auto-refresh after clearing
-    } catch (error) {
-      Alert.alert("Error", `Failed to clear storage: ${error}`);
-    }
-  };
-  const handleClearEverything = async () => {
-    // Clear everything directly without extra confirmation
-    try {
-      await clearAllStorageIncludingDevTools();
-      await onRefresh(); // Auto-refresh after clearing
-
-      // Show success message briefly
-      Alert.alert("Success", "All storage cleared including dev tools settings.", [{
-        text: "OK"
-      }], {
-        cancelable: true
-      });
-    } catch (error) {
-      Alert.alert("Error", `Failed to clear all storage: ${error}`);
-    }
-  };
-  return /*#__PURE__*/_jsxs(View, {
-    style: styles.headerContainer,
-    children: [/*#__PURE__*/_jsx(View, {
-      style: styles.leftSection,
-      children: /*#__PURE__*/_jsxs(Text, {
-        style: styles.keyCount,
-        children: [totalCount, " ", totalCount === 1 ? "key" : "keys", " found"]
-      })
-    }), /*#__PURE__*/_jsxs(View, {
-      style: styles.headerActions,
-      children: [/*#__PURE__*/_jsx(TouchableOpacity, {
-        "sentry-label": "ignore storage refresh button",
-        onPress: handleRefresh,
-        style: [styles.iconButton, isRefreshing && styles.activeButton],
-        accessibilityLabel: "Refresh storage",
-        children: /*#__PURE__*/_jsx(RefreshCw, {
-          size: 16,
-          color: isRefreshing ? "#10B981" : buoyColors.textSecondary
-        })
-      }), /*#__PURE__*/_jsx(CopyButton, {
-        value: storageKeys,
-        size: 16,
-        buttonStyle: styles.iconButton,
-        colors: {
-          idle: "#3B82F6",
-          success: "#10B981",
-          error: "#F87171"
-        }
-      }), /*#__PURE__*/_jsx(TouchableOpacity, {
-        "sentry-label": "ignore storage clear button",
-        onPress: handleClear,
-        style: styles.iconButton,
-        accessibilityLabel: "Clear storage",
-        children: /*#__PURE__*/_jsx(Trash2, {
-          size: 16,
-          color: "#F87171"
-        })
-      })]
-    }), /*#__PURE__*/_jsx(ProUpgradeModal, {
-      visible: showUpgradeModal,
-      onClose: () => setShowUpgradeModal(false),
-      featureName: "Storage Editing"
-    })]
-  });
-}
-const styles = StyleSheet.create({
-  // Header styles matching Sentry pattern
-  headerContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    backgroundColor: "rgba(128, 128, 128, 0.06)",
-    borderRadius: 8,
-    marginBottom: 12,
-    borderWidth: 1,
-    borderColor: "rgba(128, 128, 128, 0.16)"
-  },
-  leftSection: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  keyCount: {
-    color: buoyColors.textSecondary,
-    fontSize: 12,
-    fontWeight: "500"
-  },
-  copiedBadge: {
-    backgroundColor: "#10B981",
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-    borderRadius: 10
-  },
-  copiedText: {
-    color: "#FFFFFF",
-    fontSize: 10,
-    fontWeight: "600"
-  },
-  headerActions: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  iconButton: {
-    width: 32,
-    height: 32,
-    borderRadius: 6,
-    backgroundColor: "rgba(128, 128, 128, 0.06)",
-    borderWidth: 1,
-    borderColor: "rgba(128, 128, 128, 0.16)",
-    alignItems: "center",
-    justifyContent: "center"
-  },
-  activeButton: {
-    backgroundColor: "rgba(16, 185, 129, 0.1)",
-    borderColor: "rgba(16, 185, 129, 0.2)"
-  }
-});

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

@@ -1,354 +0,0 @@
-"use strict";
-
-import { useEffect, useState, useCallback } from "react";
-import { View, Text, StyleSheet, TouchableOpacity, ScrollView } from "react-native";
-import { Play, Pause, Trash2, macOSColors, buoyColors } 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 macOSColors.text.icon;
-    }
-  };
-  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 ? macOSColors.text.icon : macOSColors.border.toggle
-          })
-        })]
-      })]
-    }), /*#__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(128, 128, 128, 0.06)",
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: "rgba(128, 128, 128, 0.16)",
-    marginBottom: 12,
-    maxHeight: 200
-  },
-  header: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 12,
-    paddingVertical: 8,
-    borderBottomWidth: 1,
-    borderBottomColor: "rgba(128, 128, 128, 0.12)"
-  },
-  headerLeft: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8
-  },
-  title: {
-    fontSize: 12,
-    fontWeight: "500",
-    color: buoyColors.textSecondary,
-    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: macOSColors.text.icon,
-    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(128, 128, 128, 0.06)",
-    borderWidth: 1,
-    borderColor: "rgba(128, 128, 128, 0.16)",
-    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: macOSColors.text.icon,
-    fontStyle: "italic"
-  },
-  eventItem: {
-    flexDirection: "row",
-    alignItems: "center",
-    justifyContent: "space-between",
-    paddingHorizontal: 12,
-    paddingVertical: 6,
-    borderBottomWidth: 1,
-    borderBottomColor: "rgba(128, 128, 128, 0.06)"
-  },
-  eventLeft: {
-    flex: 1,
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-    marginRight: 8
-  },
-  eventAction: {
-    fontSize: 11,
-    fontWeight: "600",
-    minWidth: 60
-  },
-  eventData: {
-    fontSize: 11,
-    color: buoyColors.textSecondary,
-    flex: 1
-  },
-  eventTime: {
-    fontSize: 10,
-    color: macOSColors.text.icon
-  }
-});

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

@@ -1,38 +0,0 @@
-"use strict";
-
-import { Filter, DynamicFilterView } from "@buoy-gg/shared-ui";
-import { jsx as _jsx } from "react/jsx-runtime";
-export function StorageFilterViewV2({
-  ignoredPatterns,
-  onTogglePattern,
-  onAddPattern,
-  availableKeys = []
-}) {
-  const filterConfig = {
-    addFilterSection: {
-      enabled: true,
-      placeholder: "Enter key pattern to hide...",
-      title: "ACTIVE FILTERS",
-      icon: Filter
-    },
-    availableItemsSection: {
-      enabled: true,
-      title: "AVAILABLE STORAGE KEYS",
-      emptyMessage: "No storage keys available. Keys will appear here once loaded.",
-      items: availableKeys
-    },
-    howItWorksSection: {
-      enabled: true,
-      title: "HOW STORAGE FILTERS WORK",
-      description: "Patterns hide matching storage keys from the list. Filters match if the storage key contains the provided text.",
-      examples: ["• react_buoy → hides keys containing react_buoy", "• @temp → hides @temp_user, @temp_data", "• redux → hides redux-persist:root", "• : → hides all keys with colons"],
-      icon: Filter
-    },
-    onPatternToggle: onTogglePattern,
-    onPatternAdd: onAddPattern,
-    activePatterns: ignoredPatterns
-  };
-  return /*#__PURE__*/_jsx(DynamicFilterView, {
-    ...filterConfig
-  });
-}

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

@@ -1,71 +0,0 @@
-"use strict";
-
-/**
- * Measure a container's width, for the layouts that switch between a card list
- * and a wide table.
- *
- * Three things went wrong before this landed on a callback ref; all three are
- * worth knowing, because the same trap is waiting in any other tool that wants
- * a width-driven layout.
- *
- * 1. `onLayout` ALONE IS NOT ENOUGH. On react-native-web it never delivered its
- *    first callback for these subtrees. The node carries RNW's
- *    `__reactLayoutHandler`, and a ResizeObserver attached by hand fires on that
- *    very same node — so the handler is wired and the observer works; RNW's
- *    shared observer just never calls it. `width` stayed 0 and the table never
- *    appeared, silently. `onLayout` is still wired here because it works on
- *    native.
- *
- * 2. RE-MEASURING EVERY RENDER DEADLOCKS THE RENDERER. Filtering a list changes
- *    whether its scrollbar is present, which changes the container width, which
- *    re-renders, which re-measures — with no fixed point. An observer only fires
- *    when the size genuinely changes, so layout settles.
- *
- * 3. A MOUNT-ONLY EFFECT MISSES THE NODE. These components early-return a
- *    loading state before the measured container exists, so `ref.current` is
- *    null when a `useEffect(…, [])` runs, and it never runs again. A callback
- *    ref fires whenever the node actually attaches — including the second time.
- */
-
-import { useCallback, useRef, useState } from "react";
-
-/** The bits of a DOM node we need. This package has no `dom` lib. */
-
-function getResizeObserver() {
-  return globalThis.ResizeObserver;
-}
-function isMeasurable(node) {
-  return typeof node?.getBoundingClientRect === "function";
-}
-export function useMeasuredWidth() {
-  const [width, setWidth] = useState(0);
-  const observerRef = useRef(null);
-
-  // A sub-pixel wobble is not a layout change; anything larger is.
-  const apply = useCallback(measured => {
-    setWidth(prev => Math.abs(prev - measured) > 1 ? measured : prev);
-  }, []);
-  const ref = useCallback(node => {
-    observerRef.current?.disconnect();
-    observerRef.current = null;
-
-    // Detach (node === null) or a platform without DOM measurement: leave the
-    // last width in place so a remount doesn't flash the wrong layout.
-    if (!isMeasurable(node)) return;
-    apply(node.getBoundingClientRect().width);
-    const Observer = getResizeObserver();
-    if (!Observer) return;
-    const observer = new Observer(entries => {
-      const measured = entries[0]?.contentRect?.width;
-      if (typeof measured === "number") apply(measured);
-    });
-    observer.observe(node);
-    observerRef.current = observer;
-  }, [apply]);
-  const onLayout = useCallback(event => apply(event.nativeEvent.layout.width), [apply]);
-  return {
-    ref,
-    width,
-    onLayout
-  };
-}

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

@@ -1,18 +0,0 @@
-"use strict";
-
-import { useEffect, useState } from "react";
-
-/**
- * Hook that forces a re-render every second
- * Used to update relative timestamps (e.g., "2s ago", "1m ago")
- */
-export function useTickEverySecond(enabled = true) {
-  const [, setTick] = useState(0);
-  useEffect(() => {
-    if (!enabled) return;
-    const interval = setInterval(() => {
-      setTick(prev => prev + 1);
-    }, 1000);
-    return () => clearInterval(interval);
-  }, [enabled]);
-}

package/lib/module/storage/index.js

@@ -1,34 +0,0 @@
-"use strict";
-
-// Storage section components
-export { StorageSection } from "./components/StorageSection";
-export { StorageModalWithTabs } from "./components/StorageModalWithTabs";
-export { StorageKeyCard } from "./components/StorageKeyCard";
-export { StorageKeyStatsSection } from "./components/StorageKeyStats";
-export { StorageKeySection } from "./components/StorageKeySection";
-export { StorageBrowserMode } from "./components/StorageBrowserMode";
-export { StorageEventsSection } from "./components/StorageEventsSection";
-// The five display operations a storage event collapses onto — semantics, not
-// presentation, so hosts can filter or group by the same vocabulary the UI uses.
-export { STORAGE_OPS, storageOpOf, storageOpDot, isInitialScan } from "./utils/storageOps";
-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";
-export { MMKVInstanceInfoPanel } from "./components/MMKVInstanceInfoPanel";
-
-// Storage types
-export * from "./types";
-
-// Storage utilities
-export * from "./utils";
-
-// Storage Event Store
-export { storageEventStore, subscribeToStorageEvents, onStorageEvent, getStorageEvents, clearStorageEvents, isStorageCapturing } from "./stores/storageEventStore";