@buoy-gg/storage 1.7.2

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

@@ -0,0 +1,40 @@
+"use strict";
+
+import { HardDrive, CyberpunkSectionButton } from "@buoy-gg/shared-ui";
+import { useAsyncStorageKeys } from "../hooks/useAsyncStorageKeys";
+import { isDevToolsStorageKey } from "@buoy-gg/shared-ui";
+import { jsx as _jsx } from "react/jsx-runtime";
+/**
+ * Storage section component for the dev tools console.
+ * Shows storage statistics and provides access to storage browser.
+ */
+export function StorageSection({
+  onPress
+}) {
+  const {
+    storageKeys
+  } = useAsyncStorageKeys();
+
+  // Filter out dev tool keys for the count
+  const appKeys = storageKeys.filter(k => !isDevToolsStorageKey(k.key));
+  const asyncCount = appKeys.length;
+  const total = asyncCount;
+  const getStorageSubtitle = () => {
+    if (total === 0) {
+      return "Empty";
+    }
+
+    // For now, only AsyncStorage is supported
+    return `${asyncCount} Async`;
+  };
+  return /*#__PURE__*/_jsx(CyberpunkSectionButton, {
+    id: "storage",
+    title: "STORAGE",
+    subtitle: getStorageSubtitle(),
+    icon: HardDrive,
+    iconColor: "#00FF88",
+    iconBackgroundColor: "rgba(0, 255, 136, 0.1)",
+    onPress: onPress,
+    index: 2
+  });
+}

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

@@ -0,0 +1,121 @@
+"use strict";
+
+import { useState, useEffect, useCallback } from 'react';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+export function useAsyncStorageKeys(requiredStorageKeys = []) {
+  // State management
+  const [storageKeys, setStorageKeys] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+  const [error, setError] = useState(null);
+
+  // Fetch all keys and values from AsyncStorage
+  const fetchStorageData = useCallback(async () => {
+    setIsLoading(true);
+    setError(null);
+    try {
+      // 1. Get all keys from AsyncStorage
+      const allKeys = await AsyncStorage.getAllKeys();
+      if (!allKeys || allKeys.length === 0) {
+        setStorageKeys([]);
+        setIsLoading(false);
+        return;
+      }
+
+      // 2. Get all values using multiGet
+      const allKeyValuePairs = await AsyncStorage.multiGet(allKeys);
+
+      // 3. Process keys into StorageKeyInfo format
+      const allStorageKeys = [];
+      allKeyValuePairs.forEach(([key, value]) => {
+        // Parse value
+        let parsedValue = value;
+        if (value) {
+          try {
+            parsedValue = JSON.parse(value);
+          } catch {
+            parsedValue = value; // Keep as string if not JSON
+          }
+        }
+
+        // Check if this is a required key
+        const requiredConfig = requiredStorageKeys.find(req => {
+          if (typeof req === 'string') return req === key;
+          return req.key === key;
+        });
+
+        // Determine status
+        let status = 'optional_present';
+        if (requiredConfig) {
+          if (parsedValue === undefined || parsedValue === null) {
+            status = 'required_missing';
+          } else if (typeof requiredConfig === 'object' && 'expectedValue' in requiredConfig) {
+            status = parsedValue === requiredConfig.expectedValue ? 'required_present' : 'required_wrong_value';
+          } else if (typeof requiredConfig === 'object' && 'expectedType' in requiredConfig) {
+            const actualType = parsedValue === null ? 'null' : typeof parsedValue;
+            status = actualType.toLowerCase() === requiredConfig.expectedType.toLowerCase() ? 'required_present' : 'required_wrong_type';
+          } else {
+            status = 'required_present';
+          }
+        }
+        const keyInfo = {
+          key,
+          value: parsedValue,
+          storageType: 'async',
+          status,
+          category: requiredConfig ? 'required' : 'optional',
+          ...(typeof requiredConfig === 'object' && 'expectedValue' in requiredConfig && {
+            expectedValue: requiredConfig.expectedValue
+          }),
+          ...(typeof requiredConfig === 'object' && 'expectedType' in requiredConfig && {
+            expectedType: requiredConfig.expectedType
+          }),
+          ...(typeof requiredConfig === 'object' && 'description' in requiredConfig && {
+            description: requiredConfig.description
+          })
+        };
+        allStorageKeys.push(keyInfo);
+      });
+
+      // 4. Add missing required keys
+      requiredStorageKeys.forEach(req => {
+        const key = typeof req === 'string' ? req : req.key;
+        const exists = allStorageKeys.some(k => k.key === key);
+        if (!exists) {
+          allStorageKeys.push({
+            key,
+            value: undefined,
+            storageType: 'async',
+            status: 'required_missing',
+            category: 'required',
+            ...(typeof req === 'object' && 'expectedValue' in req && {
+              expectedValue: req.expectedValue
+            }),
+            ...(typeof req === 'object' && 'expectedType' in req && {
+              expectedType: req.expectedType
+            }),
+            ...(typeof req === 'object' && 'description' in req && {
+              description: req.description
+            })
+          });
+        }
+      });
+      setStorageKeys(allStorageKeys);
+    } catch (err) {
+      setError(err instanceof Error ? err : new Error('Failed to fetch storage data'));
+      setStorageKeys([]);
+    } finally {
+      setIsLoading(false);
+    }
+  }, [requiredStorageKeys]);
+
+  // Initial fetch
+  useEffect(() => {
+    fetchStorageData();
+  }, [fetchStorageData]);
+  return {
+    storageKeys,
+    isLoading,
+    error,
+    refresh: fetchStorageData
+  };
+}

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

@@ -0,0 +1,216 @@
+"use strict";
+
+/**
+ * useMMKVInstances Hook
+ *
+ * React hook to monitor all registered MMKV instances and their metadata.
+ * Works with MMKVInstanceRegistry to provide UI components with instance information.
+ *
+ * This hook enables:
+ * - Multi-instance dropdown/selector UI
+ * - Instance metadata display (encrypted, readOnly, key count)
+ * - Dynamic updates when instances are added/removed
+ *
+ * @see MMKVInstanceRegistry.ts for instance registration
+ */
+
+import { useState, useEffect } from 'react';
+import { isMMKVAvailable } from '../utils/mmkvAvailability';
+
+// Conditionally import registry
+let mmkvInstanceRegistry;
+if (isMMKVAvailable()) {
+  const registry = require('../utils/MMKVInstanceRegistry');
+  mmkvInstanceRegistry = registry.mmkvInstanceRegistry;
+}
+
+/**
+ * Metadata about an MMKV instance with additional runtime information
+ */
+
+/**
+ * Hook to monitor all registered MMKV instances
+ *
+ * @param autoRefresh - If true, refreshes every 1 second to detect new instances
+ *
+ * @returns Object containing instances array, count, and refresh function
+ *
+ * @example
+ * ```typescript
+ * import { useMMKVInstances } from '@buoy-gg/storage';
+ *
+ * function MMKVInstanceSelector() {
+ *   const { instances, instanceCount, refresh } = useMMKVInstances();
+ *
+ *   return (
+ *     <View>
+ *       <Text>Found {instanceCount} MMKV instances</Text>
+ *       {instances.map(inst => (
+ *         <TouchableOpacity key={inst.id} onPress={() => selectInstance(inst)}>
+ *           <Text>{inst.id}</Text>
+ *           <Text>{inst.keyCount} keys</Text>
+ *           {inst.encrypted && <Text>🔒 Encrypted</Text>}
+ *           {inst.readOnly && <Text>👁️ Read-only</Text>}
+ *         </TouchableOpacity>
+ *       ))}
+ *       <Button onPress={refresh}>Refresh</Button>
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export function useMMKVInstances(autoRefresh = false) {
+  const [instances, setInstances] = useState([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Fetch all instances and their metadata
+  const fetchInstances = () => {
+    setIsLoading(true);
+    try {
+      // Guard: Check if MMKV is available
+      if (!isMMKVAvailable() || !mmkvInstanceRegistry) {
+        setInstances([]);
+        setIsLoading(false);
+        return; // Silently return empty when MMKV not available
+      }
+      const allInstances = mmkvInstanceRegistry.getAll();
+
+      // Enhance with metadata
+      const instancesWithMetadata = allInstances.map(instanceInfo => {
+        const {
+          instance,
+          id,
+          encrypted,
+          readOnly
+        } = instanceInfo;
+
+        // Get key count
+        const keys = instance.getAllKeys();
+        const keyCount = keys?.length || 0;
+
+        // Get size if available (MMKV might not expose this directly)
+        // For now, we don't have a direct way to get size
+        const size = undefined;
+        return {
+          id,
+          instance,
+          encrypted,
+          readOnly,
+          keyCount,
+          size
+        };
+      });
+      setInstances(instancesWithMetadata);
+    } catch (error) {
+      setInstances([]);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  // Initial fetch
+  useEffect(() => {
+    fetchInstances();
+  }, []);
+
+  // Auto-refresh if enabled
+  useEffect(() => {
+    if (!autoRefresh) return;
+    const interval = setInterval(() => {
+      fetchInstances();
+    }, 1000); // Refresh every second
+
+    return () => clearInterval(interval);
+  }, [autoRefresh]);
+  return {
+    instances,
+    instanceCount: instances.length,
+    isLoading,
+    refresh: fetchInstances
+  };
+}
+
+/**
+ * Hook to monitor a single MMKV instance by ID
+ *
+ * @param instanceId - ID of the instance to monitor
+ *
+ * @returns Instance metadata or null if not found
+ *
+ * @example
+ * ```typescript
+ * function MMKVInstanceDetail({ instanceId }: { instanceId: string }) {
+ *   const instance = useMMKVInstance(instanceId);
+ *
+ *   if (!instance) {
+ *     return <Text>Instance not found</Text>;
+ *   }
+ *
+ *   return (
+ *     <View>
+ *       <Text>ID: {instance.id}</Text>
+ *       <Text>Keys: {instance.keyCount}</Text>
+ *       <Text>Encrypted: {instance.encrypted ? 'Yes' : 'No'}</Text>
+ *       <Text>Read-only: {instance.readOnly ? 'Yes' : 'No'}</Text>
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export function useMMKVInstance(instanceId) {
+  const [instance, setInstance] = useState(null);
+  useEffect(() => {
+    // Guard: Check if MMKV is available
+    if (!isMMKVAvailable() || !mmkvInstanceRegistry) {
+      setInstance(null);
+      return;
+    }
+    const instanceInfo = mmkvInstanceRegistry.get(instanceId);
+    if (!instanceInfo) {
+      setInstance(null);
+      return;
+    }
+    const keys = instanceInfo.instance.getAllKeys();
+    const keyCount = keys?.length || 0;
+    setInstance({
+      ...instanceInfo,
+      keyCount,
+      size: undefined
+    });
+  }, [instanceId]);
+  return instance;
+}
+
+/**
+ * Hook to check if a specific instance ID is registered
+ *
+ * @param instanceId - ID to check
+ *
+ * @returns True if instance is registered
+ *
+ * @example
+ * ```typescript
+ * function MMKVStatus({ instanceId }: { instanceId: string }) {
+ *   const isRegistered = useMMKVInstanceExists(instanceId);
+ *
+ *   return (
+ *     <View>
+ *       <Text>{instanceId}</Text>
+ *       <Text>{isRegistered ? '✅ Registered' : '❌ Not registered'}</Text>
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export function useMMKVInstanceExists(instanceId) {
+  const [exists, setExists] = useState(false);
+  useEffect(() => {
+    // Guard: Check if MMKV is available
+    if (!isMMKVAvailable() || !mmkvInstanceRegistry) {
+      setExists(false);
+      return;
+    }
+    setExists(mmkvInstanceRegistry.has(instanceId));
+  }, [instanceId]);
+  return exists;
+}