react-native-debug-toolkit 0.2.2 → 0.3.1

package/index.js

@@ -8,6 +8,9 @@ import { initializeDebugToolkit } from './lib'
 import { createNetworkFeature } from './lib/features/NetworkFeature'
 import { createPerformanceFeature } from './lib/features/PerformanceFeature'
 import { createConsoleLogFeature } from './lib/features/ConsoleLogFeature'
+import { createZustandLogFeature, addZustandLog } from './lib/features/ZustandLogFeature'
+import { createNavigationLogFeature, addNavigationLog } from './lib/features/NavigationLogFeature'
+import { useNavigationLogger } from './lib/hooks/useNavigationLogger'
 
 export {
   DebugToolKit,
@@ -15,6 +18,11 @@ export {
   createNetworkFeature,
   createPerformanceFeature,
   createConsoleLogFeature,
+  createZustandLogFeature,
+  addZustandLog,
+  createNavigationLogFeature,
+  addNavigationLog,
+  useNavigationLogger
 }
 
 export default DebugToolKit

package/lib/features/ConsoleLogFeature.js

@@ -1,4 +1,4 @@
-const MAX_LOGS = 100; // Max number of console logs to store
+const MAX_LOGS = 200; // Max number of console logs to store
 const logs = [];
 const originalConsole = {}; // Store original console methods
 

package/lib/features/NavigationLogFeature.js

@@ -0,0 +1,47 @@
+const MAX_LOGS = 200; // Max number of navigation logs to store
+const logs = [];
+const originalNavigationMethods = {}; // Store original navigation methods
+
+const setup = () => {
+  if (!__DEV__) {
+    return;
+  }
+  // Note: Actual navigation interception will be done in the main app code
+  // This is just a setup function for compatibility with the feature API
+};
+
+// Function to add navigation log
+export const addNavigationLog = (action, from, to, startTime, duration) => {
+  // Store log data
+  logs.push({
+    timestamp: new Date(),
+    action: action, // push, pop, replace, etc.
+    from: from,     // source route info
+    to: to,         // destination route info
+    startTime: startTime,
+    duration: duration,
+  });
+
+  // Trim logs if they exceed the maximum limit
+  if (logs.length > MAX_LOGS) {
+    logs.splice(0, logs.length - MAX_LOGS);
+  }
+};
+
+const getData = () => {
+  return logs;
+};
+
+const cleanup = () => {
+  logs.length = 0; // Clear array
+};
+
+export const createNavigationLogFeature = () => {
+  return {
+    name: 'navigation',
+    label: 'Navigation Logs',
+    setup: setup,
+    getData: getData,
+    cleanup: cleanup,
+  };
+}; 

package/lib/features/NetworkFeature.js

@@ -2,7 +2,7 @@ import React from 'react'
 
 class NetworkFeature {
   static instance = null
-  static MAX_LOGS = 100
+  static MAX_LOGS = 200
 
   constructor() {
     if (NetworkFeature.instance) {

package/lib/features/ZustandLogFeature.js

@@ -0,0 +1,46 @@
+const MAX_LOGS = 200; // Max number of Zustand logs to store
+const logs = [];
+
+// Zustand middleware to capture state changes
+export const addZustandLog = (action, prevState, nextState, actionCompleteTime, storeName) => {
+      // Store log data
+      logs.push({
+        timestamp: new Date(),
+        action: action,
+        prevState: prevState,
+        nextState: nextState,
+        actionCompleteTime: actionCompleteTime,
+        storeName: storeName,
+      });
+
+      // Trim logs if they exceed the maximum limit
+      if (logs.length > MAX_LOGS) {
+        logs.splice(0, logs.length - MAX_LOGS);
+      }
+};
+
+const setup = () => {
+  if (!__DEV__) {
+    return;
+  }
+  // Note: The actual middleware setup happens in the store creation
+  // This function is mainly for compatibility with the feature API
+};
+
+const getData = () => {
+  return logs;
+};
+
+const cleanup = () => {
+  logs.length = 0; // Clear array
+};
+
+export const createZustandLogFeature = () => {
+  return {
+    name: 'zustand',
+    label: 'Zustand Logs',
+    setup: setup,
+    getData: getData,
+    cleanup: cleanup,
+  };
+};

package/lib/hooks/useNavigationLogger.js

@@ -0,0 +1,92 @@
+import { useEffect, useRef } from 'react';
+import { addNavigationLog } from '../features/NavigationLogFeature';
+
+/**
+ * Custom hook to log React Navigation events for debugging
+ * 
+ * Usage:
+ * 
+ * // In your navigation container
+ * import { useNavigationLogger } from 'react-native-debug-toolkit';
+ * 
+ * function App() {
+ *   const navigationRef = useRef();
+ *   
+ *   // Enable navigation logging
+ *   useNavigationLogger(navigationRef);
+ *   
+ *   return (
+ *     <NavigationContainer ref={navigationRef}>
+ *       // ... your navigation structure
+ *     </NavigationContainer>
+ *   );
+ * }
+ */
+export function useNavigationLogger(navigationRef) {
+  // Track previous state
+  const routeRef = useRef(null);
+  
+  useEffect(() => {
+    if (!__DEV__ || !navigationRef.current) {
+      return;
+    }
+
+    // Create listeners for navigation events
+    const unsubscribeReady = navigationRef.current?.addListener('state', (e) => {
+      if (!navigationRef.current) return;
+      
+      const state = navigationRef.current.getRootState();
+      if (!state) return;
+      
+      const currentRoute = navigationRef.current.getCurrentRoute();
+      
+      if (!currentRoute) return;
+      
+      // First render won't have a previous state
+      if (!routeRef.current) {
+        routeRef.current = currentRoute;
+        return;
+      }
+      
+      // Determine the navigation action
+      let action = 'navigate';
+      
+      // Check if this was a push (adding to history) or replace
+      const routes = state.routes;
+      if (routes.length > 0) {
+        const prevIndex = routes.findIndex(route => route.key === routeRef.current.key);
+        const currentIndex = routes.findIndex(route => route.key === currentRoute.key);
+        
+        if (currentIndex > prevIndex) {
+          action = 'push';
+        } else if (currentIndex < prevIndex) {
+          action = 'pop';
+        } else if (currentIndex === prevIndex) {
+          action = 'replace';
+        }
+      }
+      
+      // Log the navigation
+      addNavigationLog(
+        action,
+        {
+          name: routeRef.current.name,
+          params: routeRef.current.params,
+        },
+        {
+          name: currentRoute.name,
+          params: currentRoute.params,
+        },
+        performance.now(), // Approximate time
+        0 // No duration measurement available for this event type
+      );
+      
+      // Update the reference
+      routeRef.current = currentRoute;
+    });
+    
+    return () => {
+      unsubscribeReady && unsubscribeReady();
+    };
+  }, [navigationRef]);
+}

package/lib/index.js

@@ -2,18 +2,22 @@ import DebugToolKit from './DebugToolKit'
 import { createNetworkFeature } from './features/NetworkFeature'
 import { createPerformanceFeature} from './features/PerformanceFeature'
 import { createConsoleLogFeature } from './features/ConsoleLogFeature'
+import { createZustandLogFeature, zustandLogMiddleware } from './features/ZustandLogFeature'
+import { createNavigationLogFeature, addNavigationLog } from './features/NavigationLogFeature'
 
 // Registry mapping feature names (strings) to their creator functions
 const featureRegistry = {
   network: createNetworkFeature,
   console: createConsoleLogFeature,
   performance: createPerformanceFeature,
+  zustand: createZustandLogFeature,
+  navigation: createNavigationLogFeature,
   // Add other built-in features here
   // 'storage': createStorageFeature,
 }
 
 // List of default features (can use strings now)
-const defaultFeatures = ['network', 'console']
+const defaultFeatures = ['network', 'console', 'zustand', 'navigation']
 
 /**
  * Initializes and shows the Debug ToolKit panel with specified features.
@@ -73,4 +77,14 @@ export function initializeDebugToolkit(features = defaultFeatures) {
 }
 
 // Export existing stuff and the new initializer
-export { DebugToolKit, createNetworkFeature, createPerformanceFeature, createConsoleLogFeature, featureRegistry };
+export { 
+  DebugToolKit, 
+  createNetworkFeature, 
+  createPerformanceFeature, 
+  createConsoleLogFeature, 
+  createZustandLogFeature,
+  createNavigationLogFeature,
+  addNavigationLog,
+  zustandLogMiddleware,  // Export middleware for use in Zustand stores
+  featureRegistry 
+};

package/lib/navigation/NavigationLogger.js

@@ -0,0 +1 @@
+ 

package/lib/utils/DebugConst.js

@@ -19,17 +19,49 @@ export const DebugColors = {
 export const getLogLevelColor = (level) => {
     switch (level?.toLowerCase()) {
       case 'log':
-        return '#666';
+        return '#333'; // Dark gray for standard log
       case 'info':
-        return '#0D96F2';
+        return '#0D96F2'; // Blue for info
       case 'warn':
-        return '#FCA130';
+        return '#FCA130'; // Orange for warning
       case 'error':
-        return '#F93E3E';
+        return '#F93E3E'; // Red for error
       default:
-        return '#666666';
+        return '#666666'; // Default gray
     }
   };
 export const DebugImgs = {
     iconLink: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAADsSURBVGhD7ZgxDoMwDEV9/xvQtReoGBASYmFhYmNiYmNhYWJiQQIJqUh8y05wlAYw+T/pD5Dg9xwnhPR6vV6v1+v1er3eGvuOb7yIhxEQvjAC4hRGQJzGCIhLGAFxGSMgbmEExC2MgLiFERC3MALiFkZA3MIIiFsYAXELIyBuYQTELYyAuIURELcwAuIWRkDcwgiIWxgBcQsjIG5hBMQtjIC4hREQtzAC4hZGQNzCCIhbGAFxCyMgbmEExC2MgLiFERC3MALiFkZA3MIIiFsYAXELIyBuYQTELYyAuIURELcwAuIWRkDcwgiIW/+PYBgfhPtL9WBrfKUAAAAASUVORK5CYII='
 };
+
+// Function to get color for Zustand action types
+export const getZustandActionColor = (action) => {
+  if (!action) return '#666666'; // Default gray
+  
+  // You can customize this based on common Zustand action patterns
+  if (action.startsWith('set')) return '#0D96F2'; // Blue for setters
+  if (action.startsWith('update')) return '#4CAF50'; // Green for updates
+  if (action.startsWith('delete') || action.startsWith('remove')) return '#F93E3E'; // Red for deletions
+  if (action.startsWith('toggle')) return '#FCA130'; // Orange for toggles
+  if (action.startsWith('init')) return '#9C27B0'; // Purple for initialization
+  
+  return '#0D96F2'; // Default blue for other actions
+};
+
+// Navigation action colors
+export const getNavigationActionColor = (action) => {
+  switch (action?.toLowerCase()) {
+    case 'push':
+      return '#0D96F2'; // Blue for push
+    case 'pop':
+      return '#6E7072'; // Gray for pop
+    case 'replace':
+      return '#4CAF50'; // Green for replace
+    case 'reset':
+      return '#FCA130'; // Orange for reset
+    case 'goback':
+      return '#9C27B0'; // Purple for go back
+    default:
+      return '#0D96F2'; // Default blue for navigation
+  }
+};

package/lib/utils/StorageUtils.js

@@ -0,0 +1,80 @@
+import { MMKV } from 'react-native-mmkv';
+
+// Create MMKV instance for storing debug logs
+const storage = new MMKV({
+  id: 'debug-toolkit-storage',
+  encryptionKey: 'debug-toolkit-encryption-key'
+});
+
+// Storage keys for different features
+const STORAGE_KEYS = {
+  CONSOLE_LOGS: 'console_logs',
+  NETWORK_LOGS: 'network_logs',
+  PERFORMANCE_DATA: 'performance_data',
+  ZUSTAND_LOGS: 'zustand_logs',
+  NAVIGATION_LOGS: 'navigation_logs',
+};
+
+/**
+ * Utility class for storing and retrieving logs using MMKV
+ */
+export class StorageUtils {
+  /**
+   * Save data to MMKV storage
+   * @param {string} key - Storage key
+   * @param {any} data - Data to store
+   */
+  static saveData(key, data) {
+    try {
+      const jsonString = JSON.stringify(data);
+      storage.set(key, jsonString);
+    } catch (error) {
+      console.error(`Error saving data for key ${key}:`, error);
+    }
+  }
+
+  /**
+   * Retrieve data from MMKV storage
+   * @param {string} key - Storage key
+   * @param {any} defaultValue - Default value if data doesn't exist
+   * @returns {any} - Retrieved data or default value
+   */
+  static getData(key, defaultValue = null) {
+    try {
+      const jsonString = storage.getString(key);
+      if (!jsonString) return defaultValue;
+      return JSON.parse(jsonString);
+    } catch (error) {
+      console.error(`Error retrieving data for key ${key}:`, error);
+      return defaultValue;
+    }
+  }
+
+  /**
+   * Delete data from MMKV storage
+   * @param {string} key - Storage key
+   */
+  static deleteData(key) {
+    try {
+      storage.delete(key);
+    } catch (error) {
+      console.error(`Error deleting data for key ${key}:`, error);
+    }
+  }
+
+  /**
+   * Clear all debug toolkit data from storage
+   */
+  static clearAllData() {
+    try {
+      Object.values(STORAGE_KEYS).forEach(key => {
+        storage.delete(key);
+      });
+    } catch (error) {
+      console.error('Error clearing all data:', error);
+    }
+  }
+}
+
+// Export storage keys for use in features
+export { STORAGE_KEYS }; 

package/lib/views/FloatPanelView.js

@@ -8,14 +8,18 @@ import {
   Dimensions,
   Pressable,
   SafeAreaView,
+  ScrollView,
+  TouchableOpacity,
+  Modal,
+  FlatList,
 } from 'react-native'
 // import AsyncStorage from '@react-native-async-storage/async-storage'
 import { IconRadius, DebugColors } from '../utils/DebugConst'
 import SubViewHTTPLogs from './SubViewHTTPLogs'
 import SubViewPerformance from './SubViewPerformance'
-import TabView from './TabView'
 import SubViewConsoleLogs from './SubViewConsoleLogs'
-
+import SubViewZustandLogs from './SubViewZustandLogs'
+import SubViewNavigationLogs from './SubViewNavigationLogs'
 const { width: screenWidth, height: screenHeight } = Dimensions.get('window')
 
 export default class FloatPanelView extends Component {
@@ -37,8 +41,12 @@ export default class FloatPanelView extends Component {
       activeTab: 0,
       panelTranslateY: new Animated.Value(screenHeight),
       backdropOpacity: new Animated.Value(0),
+      isTabMenuVisible: false,
+      panelLayout: { width: 0, height: 0 },
     }
 
+    this.tabScrollViewRef = React.createRef()
+
     this.gestureResponder = PanResponder.create({
       onStartShouldSetPanResponder: () => true,
       onMoveShouldSetPanResponder: () => true,
@@ -196,6 +204,8 @@ export default class FloatPanelView extends Component {
   }
 
   _closePanel = () => {
+    this.setState({ isTabMenuVisible: false })
+    
     Animated.parallel([
       Animated.spring(this.state.panelTranslateY, {
         toValue: screenHeight,
@@ -213,6 +223,26 @@ export default class FloatPanelView extends Component {
     })
   }
 
+  _toggleTabMenu = () => {
+    this.setState(prevState => ({ isTabMenuVisible: !prevState.isTabMenuVisible }))
+  }
+
+  _handleTabChange = (index) => {
+    this.setState({ 
+      activeTab: index,
+      isTabMenuVisible: false
+    }, () => {
+      // Scroll to make active tab visible
+      if (this.tabScrollViewRef.current) {
+        const tabWidth = 80; // Approximate tab width
+        this.tabScrollViewRef.current.scrollTo({
+          x: Math.max(0, index * tabWidth - 50), // Center the tab
+          animated: true
+        });
+      }
+    })
+  }
+
   renderFloatBtn() {
     const { isOpen, toFloat } = this.state
 
@@ -281,6 +311,14 @@ export default class FloatPanelView extends Component {
     if (feature.name === 'console') {
       return <SubViewConsoleLogs logs={data} />
     }
+    
+    if (feature.name === 'zustand') {
+      return <SubViewZustandLogs logs={data} />
+    }
+
+    if (feature.name === 'navigation') {
+      return <SubViewNavigationLogs logs={data} />
+    }
 
     // Generic fallback for other feature types
     return (
@@ -304,9 +342,46 @@ export default class FloatPanelView extends Component {
     return this.renderFeatureContent(tabs[activeTab].id)
   }
 
+  renderTabBar() {
+    const tabs = this.getFeatureTabs()
+    const { activeTab } = this.state
+    
+    if (!tabs.length) return null
+    
+    return (
+      <View style={styles.tabBarContainer}>
+        <View style={styles.tabsRow}>
+          <ScrollView 
+            ref={this.tabScrollViewRef}
+            horizontal 
+            showsHorizontalScrollIndicator={false}
+            contentContainerStyle={styles.tabsScrollContainer}>
+            {tabs.map((tab, index) => {
+              const isActive = index === activeTab
+              
+              return (
+                <TouchableOpacity
+                  key={`tab-${tab.id}`}
+                  style={[styles.tab, isActive && styles.activeTab]}
+                  onPress={() => this._handleTabChange(index)}>
+                  <Text 
+                    style={[styles.tabText, isActive && styles.activeTabText]}
+                    numberOfLines={1}
+                    ellipsizeMode="tail">
+                    {tab.label}
+                  </Text>
+                </TouchableOpacity>
+              )
+            })}
+          </ScrollView>
+          
+        </View>
+      </View>
+    )
+  }
+  
   renderPanel() {
     const { isOpen, panelTranslateY, backdropOpacity } = this.state
-    const tabs = this.getFeatureTabs()
 
     if (!isOpen) {
       return null
@@ -324,7 +399,11 @@ export default class FloatPanelView extends Component {
           style={[
             styles.panel,
             { transform: [{ translateY: panelTranslateY }] },
-          ]}>
+          ]}
+          onLayout={(e) => {
+            const { width, height } = e.nativeEvent.layout
+            this.setState({ panelLayout: { width, height } })
+          }}>
           <View {...this.panelResponder.panHandlers} style={styles.dragHandle}>
             <View style={styles.dragIndicator} />
           </View>
@@ -335,12 +414,12 @@ export default class FloatPanelView extends Component {
                 <Text style={styles.closeButtonText}>×</Text>
               </Pressable>
             </View>
-            <TabView
-              tabs={tabs}
-              activeTab={this.state.activeTab}
-              onTabChange={(index) => this.setState({ activeTab: index })}>
+            
+            {this.renderTabBar()}
+            
+            <View style={styles.contentContainer}>
               {this.renderContent()}
-            </TabView>
+            </View>
           </SafeAreaView>
         </Animated.View>
       </View>
@@ -440,6 +519,9 @@ const styles = StyleSheet.create({
   panelContent: {
     flex: 1,
   },
+  contentContainer: {
+    flex: 1,
+  },
   header: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -462,6 +544,41 @@ const styles = StyleSheet.create({
     color: DebugColors.text,
     fontWeight: 'bold',
   },
+  tabBarContainer: {
+    borderBottomWidth: 1,
+    borderBottomColor: DebugColors.border,
+    backgroundColor: DebugColors.background,
+  },
+  tabsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  tabsScrollContainer: {
+    paddingHorizontal: 15,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  tab: {
+    paddingVertical: 12,
+    paddingHorizontal: 8,
+    marginRight: 4,
+    alignItems: 'center',
+    justifyContent: 'center',
+    minWidth: 50,
+  },
+  activeTab: {
+    borderBottomWidth: 2,
+    borderBottomColor: DebugColors.blue,
+  },
+  tabText: {
+    fontSize: 13,
+    color: DebugColors.textLight,
+    textAlign: 'center',
+  },
+  activeTabText: {
+    color: DebugColors.blue,
+    fontWeight: '600',
+  },
   emptyText: {
     padding: 20,
     textAlign: 'center',
@@ -496,5 +613,5 @@ const styles = StyleSheet.create({
     fontFamily: 'monospace',
     fontSize: 12,
     color: DebugColors.text,
-  },
+  }
 })