react-native-debug-toolkit 0.3.0 → 0.4.0

package/lib/utils/DebugConst.js

@@ -19,15 +19,15 @@ export const DebugColors = {
 export const getLogLevelColor = (level) => {
     switch (level?.toLowerCase()) {
       case 'log':
-        return '#333';
+        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 = {
@@ -47,3 +47,21 @@ export const getZustandActionColor = (action) => {
   
   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

@@ -12,6 +12,7 @@ const STORAGE_KEYS = {
   NETWORK_LOGS: 'network_logs',
   PERFORMANCE_DATA: 'performance_data',
   ZUSTAND_LOGS: 'zustand_logs',
+  NAVIGATION_LOGS: 'navigation_logs',
 };
 
 /**

package/lib/views/FloatPanelView.js

@@ -8,15 +8,19 @@ 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'
+import SubViewThirdPartyLibs from './SubViewThirdPartyLibs'
 const { width: screenWidth, height: screenHeight } = Dimensions.get('window')
 
 export default class FloatPanelView extends Component {
@@ -38,8 +42,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,
@@ -197,6 +205,8 @@ export default class FloatPanelView extends Component {
   }
 
   _closePanel = () => {
+    this.setState({ isTabMenuVisible: false })
+    
     Animated.parallel([
       Animated.spring(this.state.panelTranslateY, {
         toValue: screenHeight,
@@ -214,6 +224,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
 
@@ -287,6 +317,14 @@ export default class FloatPanelView extends Component {
       return <SubViewZustandLogs logs={data} />
     }
 
+    if (feature.name === 'navigation') {
+      return <SubViewNavigationLogs logs={data} />
+    }
+    
+    if (feature.name === 'thirdPartyLibs') {
+      return <SubViewThirdPartyLibs libraries={data} />
+    }
+
     // Generic fallback for other feature types
     return (
       <View style={styles.genericContent}>
@@ -309,9 +347,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
@@ -329,7 +404,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>
@@ -340,12 +419,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>
@@ -445,6 +524,9 @@ const styles = StyleSheet.create({
   panelContent: {
     flex: 1,
   },
+  contentContainer: {
+    flex: 1,
+  },
   header: {
     flexDirection: 'row',
     justifyContent: 'space-between',
@@ -467,6 +549,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',
@@ -501,5 +618,5 @@ const styles = StyleSheet.create({
     fontFamily: 'monospace',
     fontSize: 12,
     color: DebugColors.text,
-  },
+  }
 })

package/lib/views/NavigationLogDetails.js

@@ -0,0 +1,294 @@
+import React from 'react'
+import { View, Text, StyleSheet, Clipboard } from 'react-native'
+import { ScrollView, Pressable } from 'react-native'
+import JSONTree from 'react-native-json-tree'
+import { getNavigationActionColor } from '../utils/DebugConst'
+
+// Re-using the theme from ConsoleLogDetails for consistency
+const theme = {
+  scheme: 'monokai',
+  author: 'wimer hazenberg (http://www.monokai.nl)',
+  base00: '#272822',
+  base01: '#383830',
+  base02: '#49483e',
+  base03: '#75715e',
+  base04: '#a59f85',
+  base05: '#f8f8f2',
+  base06: '#f5f4f1',
+  base07: '#f9f8f5',
+  base08: '#f92672',
+  base09: '#fd971f',
+  base0A: '#f4bf75',
+  base0B: '#a6e22e',
+  base0C: '#a1efe4',
+  base0D: '#66d9ef',
+  base0E: '#ae81ff',
+  base0F: '#cc6633'
+};
+
+const CopyButton = ({ text, style }) => {
+  const [copied, setCopied] = React.useState(false)
+
+  const handleCopy = async () => {
+    await Clipboard.setString(text)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 2000)
+  }
+
+  return (
+    <Pressable style={[styles.copyButton, style]} onPress={handleCopy}>
+      <Text style={styles.copyButtonText}>{copied ? 'Copied!' : 'Copy'}</Text>
+    </Pressable>
+  )
+}
+
+const CollapsibleSection = ({ title, children, initiallyExpanded = false }) => {
+  const [expanded, setExpanded] = React.useState(initiallyExpanded)
+
+  return (
+    <View style={styles.collapsibleSection}>
+      <Pressable
+        style={styles.sectionHeader}
+        onPress={() => setExpanded(!expanded)}>
+        <Text style={styles.sectionTitle}>{title}</Text>
+        <Text style={styles.expandIcon}>{expanded ? '▼' : '▶'}</Text>
+      </Pressable>
+      {expanded && children}
+    </View>
+  )
+}
+
+// Basic JSONValue renderer
+const JSONValue = ({ value }) => {
+  if (value === null) {
+    return <Text style={styles.jsonNull}>null</Text>
+  }
+
+  if (value === undefined) {
+    return <Text style={styles.jsonNull}>undefined</Text>
+  }
+
+  if (typeof value === 'boolean') {
+    return <Text style={styles.jsonBoolean}>{value.toString()}</Text>
+  }
+
+  if (typeof value === 'number') {
+    return <Text style={styles.jsonNumber}>{value}</Text>
+  }
+
+  if (typeof value === 'string') {
+    return (
+      <Text style={styles.jsonString} selectable={true}>
+        "{value}"
+      </Text>
+    )
+  }
+
+  if (typeof value === 'object') {
+    return (
+      <JSONTree
+         data={value}
+         theme={theme}
+         invertTheme={true}
+         hideRoot={true}
+         shouldExpandNode={(keyPath, nodeData, currentLevel) => currentLevel < 1}
+      />
+    )
+  }
+
+  return <Text style={styles.jsonOther}>{String(value)}</Text>
+}
+
+const NavigationLogDetails = ({ log }) => {
+  if (!log) {
+    return (
+      <View style={styles.errorContainer}>
+        <Text style={styles.errorText}>Navigation log data is missing</Text>
+      </View>
+    )
+  }
+
+  const { action, from, to, timestamp, startTime, duration } = log
+  const actionColor = getNavigationActionColor(action)
+
+  // Format the log data for text display and copying
+  const formatLogForCopy = () => {
+    try {
+      return `Navigation: ${action}
+From: ${JSON.stringify(from, null, 2)}
+To: ${JSON.stringify(to, null, 2)}
+Time: ${timestamp ? new Date(timestamp).toLocaleString() : 'Unknown'}
+Duration: ${duration || 'N/A'} ms`;
+    } catch (e) {
+      return 'Failed to format navigation log';
+    }
+  };
+
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={styles.contentContainer}
+      showsVerticalScrollIndicator={true}
+      scrollEventThrottle={16}
+      keyboardShouldPersistTaps='handled'>
+
+      <View style={styles.header}>
+        <View style={styles.headerInfo}>
+           <Text style={[styles.actionIndicator, { color: actionColor }]}>
+            {action?.toUpperCase() || 'UNKNOWN'}
+          </Text>
+          <Text style={styles.timestamp}>
+            {timestamp
+              ? new Date(timestamp).toLocaleString()
+              : 'Unknown time'}
+          </Text>
+          {duration && (
+            <Text style={styles.duration}>
+              {`${duration} ms`}
+            </Text>
+          )}
+        </View>
+        <CopyButton text={formatLogForCopy()} />
+      </View>
+
+      <CollapsibleSection title='From Route' initiallyExpanded={true}>
+        <View style={styles.dataContentWrapper}>
+          <View style={styles.dataContent}>
+            <JSONValue value={from} />
+          </View>
+        </View>
+      </CollapsibleSection>
+
+      <CollapsibleSection title='To Route' initiallyExpanded={true}>
+        <View style={styles.dataContentWrapper}>
+          <View style={styles.dataContent}>
+            <JSONValue value={to} />
+          </View>
+        </View>
+      </CollapsibleSection>
+
+    </ScrollView>
+  )
+}
+
+// Styles adapted from ConsoleLogDetails
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  contentContainer: {
+    paddingBottom: 20,
+  },
+  header: {
+    flexDirection: 'row',
+    padding: 15,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+  headerInfo: {
+    flexShrink: 1,
+    marginRight: 10,
+  },
+  actionIndicator: {
+    fontSize: 14,
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+  timestamp: {
+    fontSize: 13,
+    color: '#666',
+    marginBottom: 2,
+  },
+  duration: {
+    fontSize: 12,
+    color: '#888',
+  },
+  collapsibleSection: {
+    marginBottom: 1,
+    backgroundColor: '#fff',
+  },
+  sectionHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    padding: 15,
+    backgroundColor: '#f5f5f5',
+  },
+  sectionTitle: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    color: '#333',
+  },
+  expandIcon: {
+    fontSize: 14,
+    color: '#666',
+  },
+  content: {
+    padding: 15,
+  },
+  dataContentWrapper: {
+    flex: 1,
+    padding: 10,
+  },
+  dataContent: {
+    backgroundColor: '#f8f9fa',
+    padding: 10,
+    borderRadius: 4,
+    borderWidth: 1,
+    borderColor: '#e9ecef',
+  },
+  errorContainer: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    padding: 20,
+  },
+  errorText: {
+    color: '#ff4444',
+    fontSize: 16,
+  },
+  copyButton: {
+    backgroundColor: '#e9ecef',
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 4,
+    flexShrink: 0,
+  },
+  copyButtonText: {
+    fontSize: 12,
+    color: '#666',
+  },
+  // JSON Value Styles (reused from ConsoleLogDetails)
+  jsonString: {
+    color: '#CB772F',
+    fontFamily: 'monospace',
+    fontSize: 13,
+  },
+  jsonNumber: {
+    color: '#AE81FF',
+    fontFamily: 'monospace',
+    fontSize: 13,
+  },
+  jsonBoolean: {
+    color: '#66D9EF',
+    fontWeight: 'bold',
+    fontFamily: 'monospace',
+    fontSize: 13,
+  },
+  jsonNull: {
+    color: '#F92672',
+    fontStyle: 'italic',
+    fontFamily: 'monospace',
+    fontSize: 13,
+  },
+  jsonOther: {
+    color: '#75715e',
+    fontFamily: 'monospace',
+    fontSize: 13,
+  },
+});
+
+export default NavigationLogDetails