react-native-debug-toolkit 0.6.4 → 2.1.0

package/lib/views/NavigationLogDetails.js

@@ -1,302 +0,0 @@
-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, debugLog } = 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>
-
-      <CollapsibleSection title='Debug Log' initiallyExpanded={true}>
-        <View style={styles.dataContentWrapper}>
-          <View style={styles.dataContent}>
-            <JSONValue value={debugLog} />
-          </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

package/lib/views/RestartModal.js

@@ -1,75 +0,0 @@
-import React from 'react';
-import {
-    View,
-    Text,
-    Modal,
-    StyleSheet,
-    Dimensions
-} from 'react-native';
-import { DebugColors } from '../utils/DebugConst';
-
-const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
-
-const RestartModal = () => {
-    return (
-        <Modal
-            visible={true}
-            transparent={true}
-            animationType="fade"
-            onRequestClose={() => {}}
-        >
-            <View style={styles.overlay}>
-                <View style={styles.modalContent}>
-                    <Text style={styles.title}>Environment Changed</Text>
-                    <Text style={styles.message}>
-                        The app needs to restart to apply the new environment settings.{'\n\n'}
-                        Please manually kill the app and restart it.
-                    </Text>
-                </View>
-            </View>
-        </Modal>
-    );
-};
-
-const styles = StyleSheet.create({
-    overlay: {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: 'rgba(0, 0, 0, 0.5)',
-        justifyContent: 'center',
-        alignItems: 'center',
-        width: screenWidth,
-        height: screenHeight,
-        zIndex: 9999,
-    },
-    modalContent: {
-        backgroundColor: 'white',
-        borderRadius: 10,
-        padding: 20,
-        width: screenWidth * 0.8,
-        alignItems: 'center',
-        elevation: 5,
-        shadowColor: '#000',
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.25,
-        shadowRadius: 3.84,
-    },
-    title: {
-        fontSize: 18,
-        fontWeight: 'bold',
-        color: DebugColors.text,
-        marginBottom: 15,
-        textAlign: 'center'
-    },
-    message: {
-        fontSize: 16,
-        color: DebugColors.text,
-        textAlign: 'center',
-        lineHeight: 22
-    }
-});
-
-export default RestartModal;

package/lib/views/SubViewConsoleLogs.js

@@ -1,209 +0,0 @@
-import React, { useState, useMemo } from 'react'
-import {
-  View,
-  Text,
-  StyleSheet,
-  FlatList,
-  TouchableOpacity,
-} from 'react-native'
-import ConsoleLogDetails from './ConsoleLogDetails' // Import the new details component
-import { getLogLevelColor } from '../utils/DebugConst' // Assuming you move color logic
-
-const SubViewConsoleLogs = ({ logs = [] }) => {
-  const [selectedLog, setSelectedLog] = useState(null)
-
-  // Memoize the sorted logs
-  const sortedLogs = useMemo(() => {
-    // Create a stable copy before sorting if FlatList relies on reference equality
-    return [...logs].sort((a, b) => (b.timestamp || 0) - (a.timestamp || 0));
-  }, [logs]);
-
-  // Helper to format log data for preview
-   const formatLogPreview = (dataArray = []) => {
-      if (!Array.isArray(dataArray)) return ''; // Handle cases where data might not be an array
-      return dataArray.map(item => {
-        if (typeof item === 'string') return item;
-        if (typeof item === 'number' || typeof item === 'boolean') return String(item);
-        if (item === null) return 'null';
-        if (item === undefined) return 'undefined';
-        if (typeof item === 'object' && item !== null) {
-            try {
-                // Attempt a brief JSON stringification, handle potential circular refs?
-                const preview = JSON.stringify(item);
-                return preview.length > 50 ? preview.substring(0, 47) + '...' : preview;
-            } catch (e) {
-                return '{...}'; // Fallback for complex/circular objects
-            }
-        }
-        return String(item); // Fallback
-      }).join(' ');
-    };
-
-
-  const renderLogItem = ({ item }) => {
-    const level = item.level || 'log';
-    const levelColor = getLogLevelColor(level);
-    const previewText = formatLogPreview(item.data);
-    const timestamp = item.timestamp
-      ? new Date(item.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })
-      : '';
-
-    return (
-      <TouchableOpacity
-        style={styles.logItem}
-        onPress={() => setSelectedLog(item)}>
-        <View style={styles.logItemContainer}>
-          <View
-            style={[styles.levelIndicator, { backgroundColor: levelColor }]}
-          />
-
-          <View style={styles.logContent}>
-             <View style={styles.logHeader}>
-                <Text style={[styles.levelText, { color: levelColor }]}>
-                  {level.toUpperCase()}
-                </Text>
-                 <Text style={styles.time}>{timestamp}</Text>
-            </View>
-
-            <Text style={styles.logMessage} numberOfLines={3}>
-              {previewText}
-            </Text>
-
-          </View>
-        </View>
-      </TouchableOpacity>
-    )
-  }
-
-  // If a log is selected, show the details view
-  if (selectedLog) {
-    const selectedLevel = selectedLog.level || 'log';
-    const timestamp = selectedLog.timestamp
-       ? new Date(selectedLog.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit', second: '2-digit', hour12: false })
-       : '';
-    return (
-      <View style={styles.container}>
-        <View style={styles.detailsHeader}>
-          <TouchableOpacity
-            style={styles.backButton}
-            onPress={() => setSelectedLog(null)}>
-            <Text style={styles.backButtonText}>← Back</Text>
-          </TouchableOpacity>
-           <View style={styles.headerLevelTime}>
-              <Text style={[styles.headerLevel, { color: getLogLevelColor(selectedLevel) }]}>
-                {selectedLevel.toUpperCase()}
-              </Text>
-               <Text style={styles.headerTimestamp}>{timestamp}</Text>
-           </View>
-        </View>
-        <ConsoleLogDetails log={selectedLog} />
-      </View>
-    )
-  }
-
-  // Otherwise show the list view
-  return (
-    <View style={styles.container}>
-      {sortedLogs.length === 0 ? (
-        <Text style={styles.emptyText}>No console messages logged yet</Text>
-      ) : (
-        <FlatList
-          data={sortedLogs} // Use the memoized sorted list
-          renderItem={renderLogItem}
-          keyExtractor={(item, index) => `${item.timestamp}-${index}`} // Use timestamp and index for key
-          style={styles.list}
-        />
-      )}
-    </View>
-  )
-}
-
-// Adapted styles from SubViewHTTPLogs
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    backgroundColor: '#fff',
-  },
-  list: {
-    flex: 1,
-  },
-  emptyText: {
-    textAlign: 'center',
-    color: '#999',
-    marginTop: 20,
-  },
-  logItem: {
-    borderBottomWidth: 1,
-    borderBottomColor: '#eee',
-  },
-  logItemContainer: {
-    flexDirection: 'row',
-    paddingVertical: 10,
-    paddingHorizontal: 12,
-  },
-  levelIndicator: {
-    width: 4,
-    borderRadius: 2,
-    marginRight: 10,
-  },
-  logContent: {
-    flex: 1,
-  },
-  logHeader: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      marginBottom: 5,
-  },
-  levelText: {
-    fontSize: 13,
-    fontWeight: 'bold',
-  },
-  time: {
-    fontSize: 12,
-    color: '#888',
-  },
-  logMessage: {
-    fontSize: 14,
-    color: '#333',
-    lineHeight: 18,
-    fontFamily: 'monospace', // Use monospace for log messages
-  },
-  // Details Header Styles
-  detailsHeader: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingVertical: 10,
-    paddingHorizontal: 15,
-    borderBottomWidth: 1,
-    borderBottomColor: '#eee',
-    backgroundColor: '#f8f9fa',
-  },
-  backButton: {
-    paddingHorizontal: 10,
-    paddingVertical: 5,
-    borderRadius: 4,
-    backgroundColor: '#eee',
-    marginRight: 15, // More space after back button
-  },
-  backButtonText: {
-    color: '#333',
-    fontWeight: '500',
-    fontSize: 14,
-  },
-  headerLevelTime: {
-    flexDirection: 'row',
-    alignItems: 'baseline', // Align baseline of text
-  },
-  headerLevel: {
-    fontSize: 15,
-    fontWeight: 'bold',
-    marginRight: 8,
-  },
-   headerTimestamp: {
-      fontSize: 13,
-      color: '#666',
-  },
-})
-
-export default SubViewConsoleLogs

package/lib/views/SubViewEnvironment.js

@@ -1,73 +0,0 @@
-import React from 'react';
-import {
-    View,
-    Text,
-    TouchableOpacity,
-    StyleSheet,
-    ScrollView
-} from 'react-native';
-import { DebugColors } from '../utils/DebugConst';
-
-const SubViewEnvironment = ({ options, currentValue, onChange }) => {
-    return (
-        <View style={styles.container}>
-            <Text style={styles.title}>Environment</Text>
-            <ScrollView style={styles.scrollView}>
-                {options.map((option, index) => (
-                    <TouchableOpacity
-                        key={index}
-                        style={[
-                            styles.option,
-                            option.value === currentValue && styles.selectedOption
-                        ]}
-                        onPress={() => onChange(option.value)}
-                    >
-                        <Text style={[
-                            styles.optionText,
-                            option.value === currentValue && styles.selectedOptionText
-                        ]}>
-                            {option.label}
-                        </Text>
-                    </TouchableOpacity>
-                ))}
-            </ScrollView>
-        </View>
-    );
-};
-
-const styles = StyleSheet.create({
-    container: {
-        flex: 1,
-        padding: 15
-    },
-    title: {
-        fontSize: 18,
-        fontWeight: 'bold',
-        marginBottom: 15,
-        color: DebugColors.text
-    },
-    scrollView: {
-        flex: 1
-    },
-    option: {
-        padding: 12,
-        borderRadius: 8,
-        marginBottom: 8,
-        backgroundColor: DebugColors.background,
-        borderWidth: 1,
-        borderColor: DebugColors.border
-    },
-    selectedOption: {
-        backgroundColor: DebugColors.blue,
-        borderColor: DebugColors.blue
-    },
-    optionText: {
-        fontSize: 16,
-        color: DebugColors.text
-    },
-    selectedOptionText: {
-        color: DebugColors.white
-    }
-});
-
-export default SubViewEnvironment;