react-native-debug-toolkit 0.6.4 → 2.0.0

package/src/components/NavigationLogTab.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { View, Text, FlatList, StyleSheet } from 'react-native';
+import { Colors } from '../utils/constants';
+import { CopyButton } from './shared/CopyButton';
+import type { DebugFeatureRenderProps, NavigationLogEntry } from '../types';
+
+export const NavigationLogTab: React.FC<DebugFeatureRenderProps<NavigationLogEntry>> = React.memo(({
+  data,
+}) => {
+  const renderItem = ({ item }: { item: NavigationLogEntry }) => (
+    <View style={styles.logItem}>
+      <View style={styles.header}>
+        <Text style={styles.action}>{item.action}</Text>
+        <View style={styles.headerRight}>
+          {item.duration != null && <Text style={styles.duration}>{item.duration}ms</Text>}
+          <CopyButton
+            text={`${item.action}: ${item.from || '—'} → ${item.to}`}
+            label="Navigation"
+            compact
+          />
+        </View>
+      </View>
+      <View style={styles.routeRow}>
+        <Text style={styles.routeLabel}>From:</Text>
+        <Text style={styles.routeValue}>{item.from || '—'}</Text>
+      </View>
+      <View style={styles.routeRow}>
+        <Text style={styles.routeLabel}>To:</Text>
+        <Text style={styles.routeValue}>{item.to}</Text>
+      </View>
+      <Text style={styles.time}>{new Date(item.timestamp).toLocaleTimeString()}</Text>
+    </View>
+  );
+
+  return (
+    <View style={styles.container}>
+      {data.length === 0 ? (
+        <Text style={styles.empty}>No navigation events</Text>
+      ) : (
+        <FlatList
+          data={[...data].reverse()}
+          renderItem={renderItem}
+          keyExtractor={(item) => item.id}
+          initialNumToRender={20}
+          maxToRenderPerBatch={10}
+          windowSize={5}
+          removeClippedSubviews={true}
+        />
+      )}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: Colors.surface },
+  empty: { textAlign: 'center', color: Colors.textLight, marginTop: 20 },
+  logItem: { padding: 12, borderBottomWidth: 1, borderBottomColor: '#EEE' },
+  header: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 },
+  headerRight: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  action: { fontSize: 14, fontWeight: 'bold', color: Colors.primary },
+  duration: { fontSize: 13, color: Colors.textLight },
+  routeRow: { flexDirection: 'row', marginBottom: 3 },
+  routeLabel: { fontSize: 13, color: Colors.textSecondary, marginRight: 8, fontWeight: '600' },
+  routeValue: { fontSize: 13, color: Colors.text, flex: 1 },
+  time: { fontSize: 12, color: Colors.textLight, marginTop: 4 },
+});

package/src/components/NetworkLogTab.tsx

@@ -0,0 +1,411 @@
+import React, { useState, useEffect, useRef } from 'react';
+import {
+  View,
+  Text,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+  TextInput,
+  Animated,
+  ScrollView,
+} from 'react-native';
+import { Colors, getMethodColor } from '../utils/constants';
+import { CollapsibleSection } from './shared/CollapsibleSection';
+import { JsonView } from './shared/JsonView';
+import { CopyButton } from './shared/CopyButton';
+import { fmt } from '../utils/copyToComputer';
+import type { DebugFeatureRenderProps, NetworkLogEntry } from '../types';
+
+const formatSize = (data: unknown): string => {
+  if (!data) return '';
+  try {
+    const len = (typeof data === 'string' ? data : JSON.stringify(data)).length;
+    if (len < 1024) return `(${len} B)`;
+    if (len < 1024 * 1024) return `(${(len / 1024).toFixed(1)} KB)`;
+    return `(${(len / (1024 * 1024)).toFixed(1)} MB)`;
+  } catch {
+    return '';
+  }
+};
+
+// --- Detail view (in-panel push) ---
+const NetworkLogDetail: React.FC<{ log: NetworkLogEntry; onBack: () => void }> = ({
+  log,
+  onBack,
+}) => {
+  const statusColor =
+    log.error || (log.response && log.response.status >= 400) ? Colors.error : Colors.success;
+
+  const curl = () => {
+    let c = `curl -X ${log.request.method} '${log.request.url}'`;
+    if (log.request.headers) {
+      Object.entries(log.request.headers).forEach(([k, v]) => (c += ` \\\n  -H '${k}: ${v}'`));
+    }
+    if (log.request.body) {
+      c += ` \\\n  -d '${typeof log.request.body === 'string' ? log.request.body : JSON.stringify(log.request.body)}'`;
+    }
+    return c;
+  };
+
+  return (
+    <View style={s.detailWrap}>
+      <View style={s.detailHeader}>
+        <TouchableOpacity onPress={onBack} style={s.backBtn} activeOpacity={0.6}>
+          <Text style={s.backIcon}>‹</Text>
+          <Text style={s.backText}>Back</Text>
+        </TouchableOpacity>
+        <View style={s.detailHeaderCenter}>
+          <View style={[s.methodBadge, { backgroundColor: getMethodColor(log.request.method) }]}>
+            <Text style={s.methodBadgeText}>{log.request.method}</Text>
+          </View>
+          <View style={[s.statusPill, { backgroundColor: statusColor }]}>
+            <Text style={s.statusPillText}>{log.response?.status ?? 'ERR'}</Text>
+          </View>
+          {log.duration != null && (
+            <Text style={s.durationText}>{log.duration}ms</Text>
+          )}
+        </View>
+      </View>
+      <ScrollView style={s.detailBody} contentContainerStyle={s.detailBodyContent}>
+        {/* URL */}
+        <View style={s.urlCard}>
+          <Text style={s.urlText} selectable numberOfLines={3}>
+            {log.request.url}
+          </Text>
+          <CopyButton text={log.request.url} label="URL" />
+        </View>
+
+        {/* Request Body */}
+        <CollapsibleSection title="Request Body" initiallyExpanded>
+          {log.request.body != null ? (
+            <View style={s.sectionWithCopy}>
+              <CopyButton text={fmt(log.request.body)} label="Request Body" />
+              <JsonView data={log.request.body} maxHeight={250} />
+            </View>
+          ) : (
+            <Text style={s.emptySection}>No request body</Text>
+          )}
+        </CollapsibleSection>
+
+        <CollapsibleSection title="Request Headers">
+          {log.request.headers ? (
+            <View style={s.sectionWithCopy}>
+              <CopyButton text={fmt(log.request.headers)} label="Request Headers" />
+              <JsonView data={log.request.headers} maxHeight={200} />
+            </View>
+          ) : (
+            <Text style={s.emptySection}>No headers</Text>
+          )}
+        </CollapsibleSection>
+
+        {/* Response */}
+        <CollapsibleSection
+          title={`Response ${formatSize(log.response?.data)}`}
+          initiallyExpanded
+        >
+          {log.error && (
+            <View style={s.errorBox}>
+              <Text style={s.errorIcon}>⚠</Text>
+              <Text style={s.errorText}>{log.error}</Text>
+            </View>
+          )}
+          {log.response?.data != null ? (
+            <View style={s.sectionWithCopy}>
+              <CopyButton text={fmt(log.response.data)} label="Response Body" />
+              <JsonView data={log.response.data} maxHeight={300} />
+            </View>
+          ) : (
+            <Text style={s.emptySection}>No response body</Text>
+          )}
+        </CollapsibleSection>
+
+        {log.response?.headers && (
+          <CollapsibleSection title="Response Headers">
+            <View style={s.sectionWithCopy}>
+              <CopyButton text={fmt(log.response.headers)} label="Response Headers" />
+              <JsonView data={log.response.headers} maxHeight={200} />
+            </View>
+          </CollapsibleSection>
+        )}
+
+        {/* cURL */}
+        <CollapsibleSection title="cURL">
+          <View style={s.sectionWithCopy}>
+            <CopyButton text={curl()} label="cURL" />
+            <View style={s.codeBlock}>
+              <Text style={s.codeText} selectable>{curl()}</Text>
+            </View>
+          </View>
+        </CollapsibleSection>
+      </ScrollView>
+    </View>
+  );
+};
+
+// --- List view ---
+export const NetworkLogTab: React.FC<DebugFeatureRenderProps<NetworkLogEntry>> = React.memo(({
+  data,
+}) => {
+  const [selectedLog, setSelectedLog] = useState<NetworkLogEntry | null>(null);
+  const [search, setSearch] = useState('');
+  const slideAnim = useRef(new Animated.Value(0)).current;
+  const listSlideAnim = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (selectedLog) {
+      listSlideAnim.setValue(0);
+      Animated.parallel([
+        Animated.spring(slideAnim, { toValue: 1, friction: 9, tension: 60, useNativeDriver: true }),
+        Animated.spring(listSlideAnim, { toValue: 1, friction: 9, tension: 60, useNativeDriver: true }),
+      ]).start();
+    } else {
+      slideAnim.setValue(0);
+      listSlideAnim.setValue(0);
+    }
+  }, [selectedLog]);
+
+  const detailTranslateX = slideAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [300, 0],
+  });
+  const listTranslateX = listSlideAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0, -60],
+  });
+  const listOpacity = listSlideAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [1, 0],
+  });
+
+  const filtered = search
+    ? data.filter(
+        (l) =>
+          l.request.url.toLowerCase().includes(search.toLowerCase()) ||
+          l.request.method.toLowerCase().includes(search.toLowerCase()),
+      )
+    : data;
+
+  const sorted = [...filtered].sort(
+    (a, b) => b.timestamp - a.timestamp,
+  );
+
+  const renderItem = ({ item }: { item: NetworkLogEntry }) => {
+    const ok = !item.error && (!item.response || item.response.status < 400);
+    const sc = ok ? Colors.success : Colors.error;
+    return (
+      <TouchableOpacity style={s.card} onPress={() => setSelectedLog(item)} activeOpacity={0.6}>
+        <View style={s.cardRow}>
+          <View style={[s.statusIndicator, { backgroundColor: sc }]} />
+          <View style={s.cardBody}>
+            <View style={s.cardMeta}>
+              <Text style={[s.methodText, { color: getMethodColor(item.request.method) }]}>
+                {item.request.method}
+              </Text>
+              <View style={[s.miniPill, { backgroundColor: sc }]}>
+                <Text style={s.miniPillText}>{item.response?.status ?? 'ERR'}</Text>
+              </View>
+              {item.duration != null && <Text style={s.durationText}>{item.duration}ms</Text>}
+            </View>
+            <Text style={[s.url, !ok && { color: Colors.error }]} numberOfLines={2}>
+              {item.request.url}
+            </Text>
+            <Text style={s.time}>
+              {new Date(item.timestamp).toLocaleTimeString()}
+            </Text>
+          </View>
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View style={s.container}>
+      {/* List */}
+      <Animated.View style={[s.listWrap, selectedLog ? { opacity: listOpacity, transform: [{ translateX: listTranslateX }] } : null]}>
+        <View style={s.searchContainer}>
+          <View style={s.searchBar}>
+            <Text style={s.searchIcon}>⌕</Text>
+            <TextInput
+              style={s.search}
+              placeholder="Search URLs..."
+              placeholderTextColor={Colors.textLight}
+              value={search}
+              onChangeText={setSearch}
+            />
+          </View>
+        </View>
+        {sorted.length === 0 ? (
+          <View style={s.emptyContainer}>
+            <Text style={s.emptyIcon}>~</Text>
+            <Text style={s.empty}>No HTTP requests logged</Text>
+          </View>
+        ) : (
+          <FlatList
+            data={sorted}
+            renderItem={renderItem}
+            keyExtractor={(item) => item.id}
+            contentContainerStyle={s.listContent}
+            initialNumToRender={20}
+            maxToRenderPerBatch={10}
+            windowSize={5}
+            removeClippedSubviews={true}
+          />
+        )}
+      </Animated.View>
+
+      {/* Detail (push navigation) */}
+      {selectedLog && (
+        <Animated.View style={[s.detailOverlay, { transform: [{ translateX: detailTranslateX }] }]}>
+          <NetworkLogDetail log={selectedLog} onBack={() => setSelectedLog(null)} />
+        </Animated.View>
+      )}
+    </View>
+  );
+});
+
+const s = StyleSheet.create({
+  container: { flex: 1, backgroundColor: Colors.background },
+  listWrap: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+  },
+
+  // Search
+  searchContainer: {
+    paddingHorizontal: 12,
+    paddingTop: 10,
+    paddingBottom: 6,
+    backgroundColor: Colors.background,
+  },
+  searchBar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.surface,
+    borderRadius: 10,
+    paddingHorizontal: 10,
+    height: 38,
+  },
+  searchIcon: { fontSize: 16, color: Colors.textLight, marginRight: 6 },
+  search: {
+    flex: 1,
+    fontSize: 14,
+    color: Colors.text,
+    padding: 0,
+  },
+
+  // Empty
+  emptyContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  emptyIcon: { fontSize: 40, color: Colors.textLight, marginBottom: 4 },
+  empty: { textAlign: 'center', color: Colors.textLight, fontSize: 14 },
+
+  // List
+  listContent: { padding: 12 },
+  card: {
+    backgroundColor: Colors.surface,
+    borderRadius: 12,
+    marginBottom: 8,
+    overflow: 'hidden',
+  },
+  cardRow: { flexDirection: 'row', padding: 14 },
+  statusIndicator: { width: 3, borderRadius: 2, marginRight: 12 },
+  cardBody: { flex: 1 },
+  cardMeta: { flexDirection: 'row', alignItems: 'center', marginBottom: 6, gap: 6 },
+  methodText: { fontSize: 13, fontWeight: '700' },
+  miniPill: { paddingHorizontal: 7, paddingVertical: 2, borderRadius: 4 },
+  miniPillText: { color: '#FFF', fontSize: 10, fontWeight: '700' },
+  durationText: { fontSize: 12, color: Colors.textSecondary, fontWeight: '500' },
+  url: { fontSize: 13, color: Colors.textSecondary, marginBottom: 4, lineHeight: 18 },
+  time: { fontSize: 11, color: Colors.textLight },
+
+  // Detail overlay
+  detailOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: Colors.background,
+  },
+  detailWrap: { flex: 1, backgroundColor: Colors.background },
+  detailHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 10,
+    backgroundColor: Colors.surface,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.border,
+  },
+  backBtn: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 6,
+    paddingVertical: 4,
+    borderRadius: 8,
+    marginRight: 8,
+  },
+  backIcon: {
+    fontSize: 24,
+    fontWeight: '300',
+    color: Colors.primary,
+    marginTop: -2,
+    marginRight: 2,
+  },
+  backText: {
+    fontSize: 16,
+    color: Colors.primary,
+    fontWeight: '500',
+  },
+  detailHeaderCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    flex: 1,
+  },
+  methodBadge: {
+    paddingHorizontal: 10,
+    paddingVertical: 4,
+    borderRadius: 6,
+  },
+  methodBadgeText: { color: '#FFF', fontSize: 12, fontWeight: '700' },
+  statusPill: { paddingHorizontal: 9, paddingVertical: 3, borderRadius: 6 },
+  statusPillText: { color: '#FFF', fontSize: 11, fontWeight: '700' },
+  detailBody: { flex: 1 },
+  detailBodyContent: { padding: 12, paddingBottom: 40 },
+
+  // Detail content
+  urlCard: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: Colors.surface,
+    borderRadius: 12,
+    padding: 14,
+    marginBottom: 8,
+    gap: 8,
+  },
+  urlText: { flex: 1, fontSize: 13, color: Colors.textSecondary, lineHeight: 18 },
+  sectionWithCopy: { gap: 8 },
+  emptySection: { fontSize: 13, color: Colors.textLight, paddingVertical: 4 },
+  errorBox: {
+    backgroundColor: 'rgba(255,59,48,0.06)',
+    borderWidth: 1,
+    borderColor: 'rgba(255,59,48,0.15)',
+    borderRadius: 10,
+    padding: 12,
+    marginBottom: 10,
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    gap: 8,
+  },
+  errorIcon: { fontSize: 14, color: Colors.error },
+  errorText: { flex: 1, fontSize: 13, color: Colors.error, lineHeight: 18 },
+  codeBlock: {
+    backgroundColor: '#1E1E2E',
+    borderRadius: 12,
+    padding: 12,
+  },
+  codeText: { fontFamily: 'Courier', fontSize: 12, color: '#CDD6F4', lineHeight: 18 },
+});

package/src/components/ThirdPartyLibsTab.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
+import { Colors } from '../utils/constants';
+import type { DebugFeatureRenderProps, ThirdPartyLib } from '../types';
+
+export const ThirdPartyLibsTab: React.FC<DebugFeatureRenderProps<ThirdPartyLib>> = ({
+  data,
+}) => {
+  if (data.length === 0) {
+    return (
+      <View style={styles.container}>
+        <Text style={styles.empty}>No debug libraries available for this platform</Text>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      {data.map((lib) => (
+        <View key={lib.id} style={styles.libCard}>
+          <Text style={styles.libName}>{lib.name}</Text>
+          <Text style={styles.libDesc}>{lib.description}</Text>
+          <View style={styles.actions}>
+            {lib.actions.map((action) => (
+              <TouchableOpacity
+                key={action.id}
+                style={styles.actionButton}
+                onPress={action.onPress}
+              >
+                <Text style={styles.actionText}>{action.label}</Text>
+              </TouchableOpacity>
+            ))}
+          </View>
+        </View>
+      ))}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: Colors.surface, padding: 15 },
+  empty: { textAlign: 'center', color: Colors.textLight, marginTop: 20 },
+  libCard: {
+    backgroundColor: Colors.background,
+    borderRadius: 8,
+    padding: 15,
+    marginBottom: 12,
+    borderWidth: 1,
+    borderColor: Colors.border,
+  },
+  libName: { fontSize: 16, fontWeight: 'bold', color: Colors.text, marginBottom: 4 },
+  libDesc: { fontSize: 13, color: Colors.textSecondary, marginBottom: 12 },
+  actions: { flexDirection: 'row', flexWrap: 'wrap' },
+  actionButton: {
+    backgroundColor: Colors.primary,
+    paddingHorizontal: 14,
+    paddingVertical: 8,
+    borderRadius: 6,
+    marginRight: 8,
+    marginBottom: 8,
+  },
+  actionText: { color: '#FFF', fontSize: 14, fontWeight: '600' },
+});