react-native-debug-toolkit 0.3.0 → 0.4.0

package/lib/views/SubViewNavigationLogs.js

@@ -0,0 +1,199 @@
+import React, { useState, useMemo } from 'react'
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  TouchableOpacity,
+} from 'react-native'
+import NavigationLogDetails from './NavigationLogDetails'
+import { getNavigationActionColor } from '../utils/DebugConst'
+
+const SubViewNavigationLogs = ({ 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 navigation data for preview
+  const formatNavigationPreview = (action, from, to) => {
+    const fromName = from?.name || 'Unknown';
+    const toName = to?.name || 'Unknown';
+    
+    let preview = `${action || 'Navigate'}: ${fromName} → ${toName}`;
+    
+    // Add params summary if available
+    if (to?.params) {
+      try {
+        const paramsStr = JSON.stringify(to.params);
+        const shortParams = paramsStr.length > 30 ? paramsStr.substring(0, 27) + '...' : paramsStr;
+        preview += ` ${shortParams}`;
+      } catch (e) {
+        preview += ' [with params]';
+      }
+    }
+    
+    return preview;
+  };
+
+  const renderLogItem = ({ item }) => {
+    const action = item.action || 'navigate';
+    const actionColor = getNavigationActionColor(action);
+    const previewText = formatNavigationPreview(action, item.from, item.to);
+    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.actionIndicator, { backgroundColor: actionColor }]}
+          />
+
+          <View style={styles.logContent}>
+            <View style={styles.logHeader}>
+              <Text style={[styles.actionText, { color: actionColor }]}>
+                {action.toUpperCase()}
+              </Text>
+              <Text style={styles.time}>{timestamp}</Text>
+            </View>
+
+            <Text style={styles.logMessage} numberOfLines={2}>
+              {previewText}
+            </Text>
+            
+            {item.duration && (
+              <Text style={styles.duration}>{`${item.duration} ms`}</Text>
+            )}
+          </View>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  // If a log is selected, show the details view
+  if (selectedLog) {
+    return (
+      <View style={styles.container}>
+        <View style={styles.detailsHeader}>
+          <TouchableOpacity
+            style={styles.backButton}
+            onPress={() => setSelectedLog(null)}>
+            <Text style={styles.backButtonText}>← Back</Text>
+          </TouchableOpacity>
+          <Text style={styles.headerTitle}>Navigation Details</Text>
+        </View>
+        <NavigationLogDetails log={selectedLog} />
+      </View>
+    )
+  }
+
+  // Otherwise show the list view
+  return (
+    <View style={styles.container}>
+      {sortedLogs.length === 0 ? (
+        <Text style={styles.emptyText}>No navigation events logged yet</Text>
+      ) : (
+        <FlatList
+          data={sortedLogs}
+          renderItem={renderLogItem}
+          keyExtractor={(item, index) => `${item.timestamp}-${index}`}
+          style={styles.list}
+        />
+      )}
+    </View>
+  )
+}
+
+// Adapted styles from SubViewConsoleLogs
+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,
+  },
+  actionIndicator: {
+    width: 4,
+    borderRadius: 2,
+    marginRight: 10,
+  },
+  logContent: {
+    flex: 1,
+  },
+  logHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 5,
+  },
+  actionText: {
+    fontSize: 13,
+    fontWeight: 'bold',
+  },
+  time: {
+    fontSize: 12,
+    color: '#888',
+  },
+  logMessage: {
+    fontSize: 14,
+    color: '#333',
+    lineHeight: 18,
+    fontFamily: 'monospace',
+  },
+  duration: {
+    fontSize: 12,
+    color: '#888',
+    marginTop: 4,
+  },
+  // 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,
+  },
+  backButtonText: {
+    color: '#333',
+    fontWeight: '500',
+    fontSize: 14,
+  },
+  headerTitle: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    color: '#333',
+  },
+})
+
+export default SubViewNavigationLogs 

package/lib/views/SubViewThirdPartyLibs.js

@@ -0,0 +1,239 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  TouchableOpacity,
+  TextInput,
+  Platform,
+} from 'react-native';
+
+const SubViewThirdPartyLibs = ({ libraries = [] }) => {
+  const [expandedLibs, setExpandedLibs] = useState(new Set());
+  const [actionParams, setActionParams] = useState({});
+
+  // Set all libraries to expanded by default and set default product ID
+  useEffect(() => {
+    // Create a set of all library IDs to set them as expanded
+    const allLibIds = new Set(libraries.map(lib => lib.id));
+    setExpandedLibs(allLibIds);
+    
+    // Initialize default product ID for all actions that might need it
+    const defaultParams = {};
+    libraries.forEach(lib => {
+      lib.actions.forEach(action => {
+        if (action.hasParam) {
+          defaultParams[`${lib.id}_${action.id}`] = 'default';
+        }
+      });
+    });
+    setActionParams(defaultParams);
+  }, [libraries]);
+
+  // Handle lib expansion/collapse
+  const toggleLibExpand = (libId) => {
+    setExpandedLibs(prev => {
+      const newSet = new Set(prev);
+      if (newSet.has(libId)) {
+        newSet.delete(libId);
+      } else {
+        newSet.add(libId);
+      }
+      return newSet;
+    });
+  };
+
+  // Execute library action
+  const executeAction = (action, libId) => {
+    try {
+      if (action.hasParam) {
+        // Get parameter value (if needed)
+        const paramValue = actionParams[`${libId}_${action.id}`] || 'default';
+        action.method(paramValue);
+      } else {
+        action.method();
+      }
+      // No alerts shown as per requirement
+    } catch (error) {
+      // Silent error handling as per requirement
+      console.error(`Failed to execute ${action.label}:`, error);
+    }
+  };
+
+  // Handle param input change
+  const handleParamChange = (libId, actionId, value) => {
+    setActionParams({
+      ...actionParams,
+      [`${libId}_${actionId}`]: value,
+    });
+  };
+
+  // Render a single library card
+  const renderLibraryItem = ({ item }) => {
+    const isExpanded = expandedLibs.has(item.id);
+    const isPlatformSupported = item.platform === 'both' || 
+                                item.platform === Platform.OS;
+    
+    if (!isPlatformSupported) return null;
+
+    return (
+      <View style={styles.libraryCard}>
+        <TouchableOpacity
+          style={styles.libraryHeader}
+          onPress={() => toggleLibExpand(item.id)}>
+          <View style={styles.libraryTitle}>
+            <Text style={styles.libraryName}>{item.name}</Text>
+            <Text style={styles.platformBadge}>
+              {item.platform === 'both' ? 'iOS & Android' : item.platform}
+            </Text>
+          </View>
+          <Text style={styles.expandIcon}>{isExpanded ? '▼' : '▶'}</Text>
+        </TouchableOpacity>
+
+        <Text style={styles.libraryDescription}>{item.description}</Text>
+
+        {isExpanded && (
+          <View style={styles.actionsContainer}>
+            {item.actions.map((action) => (
+              <View key={action.id} style={styles.actionItem}>
+                {action.hasParam && (
+                  <TextInput
+                    style={styles.paramInput}
+                    placeholder={action.paramPlaceholder || 'Parameter'}
+                    value={actionParams[`${item.id}_${action.id}`] || 'default'}
+                    onChangeText={(text) => 
+                      handleParamChange(item.id, action.id, text)
+                    }
+                  />
+                )}
+                <TouchableOpacity
+                  style={styles.actionButton}
+                  onPress={() => executeAction(action, item.id)}>
+                  <Text style={styles.actionButtonText}>{action.label}</Text>
+                </TouchableOpacity>
+              </View>
+            ))}
+          </View>
+        )}
+      </View>
+    );
+  };
+
+  // Filter platform-supported libraries
+  const supportedLibraries = libraries.filter(
+    lib => lib.platform === 'both' || lib.platform === Platform.OS
+  );
+
+  return (
+    <View style={styles.container}>
+      {supportedLibraries.length === 0 ? (
+        <Text style={styles.emptyText}>
+          No debug libraries available for this platform
+        </Text>
+      ) : (
+        <FlatList
+          data={supportedLibraries}
+          renderItem={renderLibraryItem}
+          keyExtractor={(item) => item.id}
+          contentContainerStyle={styles.listContent}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  listContent: {
+    padding: 12,
+  },
+  emptyText: {
+    textAlign: 'center',
+    color: '#999',
+    marginTop: 20,
+    fontSize: 16,
+  },
+  libraryCard: {
+    backgroundColor: '#f8f9fa',
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: '#e9ecef',
+    marginBottom: 16,
+    padding: 12,
+    elevation: 1,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 1,
+  },
+  libraryHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  libraryTitle: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  libraryName: {
+    fontSize: 18,
+    fontWeight: 'bold',
+    color: '#333',
+    marginRight: 8,
+  },
+  platformBadge: {
+    fontSize: 12,
+    color: '#666',
+    backgroundColor: '#e9ecef',
+    paddingHorizontal: 8,
+    paddingVertical: 2,
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  expandIcon: {
+    fontSize: 14,
+    color: '#666',
+  },
+  libraryDescription: {
+    marginTop: 8,
+    marginBottom: 12,
+    color: '#666',
+    fontSize: 14,
+    lineHeight: 20,
+  },
+  actionsContainer: {
+    marginTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: '#eee',
+    paddingTop: 12,
+  },
+  actionItem: {
+    marginBottom: 8,
+  },
+  paramInput: {
+    borderWidth: 1,
+    borderColor: '#ddd',
+    borderRadius: 4,
+    padding: 8,
+    marginBottom: 8,
+    fontSize: 14,
+  },
+  actionButton: {
+    backgroundColor: '#0D96F2',
+    padding: 10,
+    borderRadius: 4,
+    alignItems: 'center',
+  },
+  actionButtonText: {
+    color: '#fff',
+    fontWeight: '500',
+    fontSize: 14,
+  },
+});
+
+export default SubViewThirdPartyLibs; 

package/package.json

@@ -1,9 +1,10 @@
 {
   "name": "react-native-debug-toolkit",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development",
   "main": "index.js",
   "types": "index.d.ts",
+  "podspec": "react-native-debug-toolkit.podspec",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
     "bundle": "react-native bundle --platform ios --dev false --entry-file index.js --bundle-output dist/main.jsbundle --assets-dest dist"

package/react-native-debug-toolkit.podspec

@@ -0,0 +1,25 @@
+require 'json'
+package = JSON.parse(File.read(File.join(__dir__, 'package.json')))
+
+Pod::Spec.new do |s|
+  s.name         = "react-native-debug-toolkit"
+  s.version      = package['version']
+  s.summary      = package['description']
+  s.homepage     = package['repository']['url']
+  s.license      = package['license']
+  s.author       = package['author']
+  s.platform     = :ios, "11.0"
+  s.source       = { :git => package['repository']['url'], :tag => "#{s.version}" }
+  s.source_files = "ios/**/*.{h,m}"
+  
+  s.dependency "React-Core"
+  
+  # FLEX is only needed for debug builds
+  s.dependency "FLEX", "~> 5.0"
+  
+  # DoraemonKit is only needed for debug builds
+  s.dependency "DoraemonKit/Core", "~> 3.0"
+  
+  # This ensures FLEX and DoraemonKit are only included in debug builds
+  s.pod_target_xcconfig = { 'OTHER_CFLAGS' => '-DDebug=$(CONFIGURATION)' }
+end

package/react-native.config.js

@@ -2,4 +2,14 @@
 
 module.exports = {
   // Let React Native's auto-linking handle all dependencies normally
+  dependencies: {
+    "react-native-debug-toolkit": {
+      platforms: {
+        ios: {
+          podspecPath: "./react-native-debug-toolkit.podspec",
+          sourceDir: "./ios"
+        }
+      }
+    }
+  }
 };