react-native-debug-toolkit 2.0.0 → 2.2.0

package/src/components/NetworkLogTab.tsx

@@ -1,411 +0,0 @@
-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/TrackLogTab.tsx

@@ -1,245 +0,0 @@
-import React, { useState } from 'react';
-import { View, Text, FlatList, TouchableOpacity, StyleSheet, Animated, ScrollView } from 'react-native';
-import { Colors } from '../utils/constants';
-import { safeStringify } from '../utils/safeStringify';
-import { CollapsibleSection } from './shared/CollapsibleSection';
-import { JsonView } from './shared/JsonView';
-import { CopyButton } from './shared/CopyButton';
-import { useSlideDetailAnimation } from '../hooks/useSlideDetailAnimation';
-import type { DebugFeatureRenderProps, TrackLogEntry } from '../types';
-
-export const TrackLogTab: React.FC<DebugFeatureRenderProps<TrackLogEntry>> = React.memo(({
-  data,
-}) => {
-  const [selected, setSelected] = useState<TrackLogEntry | null>(null);
-  const { detailTranslateX, listTranslateX, listOpacity } = useSlideDetailAnimation(selected);
-
-  const renderItem = ({ item }: { item: TrackLogEntry }) => (
-    <TouchableOpacity style={s.card} onPress={() => setSelected(item)} activeOpacity={0.6}>
-      <View style={s.cardRow}>
-        <View style={s.eventIcon}>
-          <Text style={s.eventIconText}>●</Text>
-        </View>
-        <View style={s.cardContent}>
-          <View style={s.cardHeader}>
-            <Text style={s.eventName}>{item.eventName}</Text>
-            <Text style={s.time}>{new Date(item.timestamp).toLocaleTimeString()}</Text>
-          </View>
-          <View style={s.previewRow}>
-            {Object.entries(item)
-              .filter(([k]) => k !== 'id' && k !== 'eventName' && k !== 'timestamp')
-              .slice(0, 2)
-              .map(([key, value]) => (
-                <View key={key} style={s.previewChip}>
-                  <Text style={s.previewText} numberOfLines={1}>
-                    <Text style={s.previewKey}>{key}</Text> {String(value ?? '').slice(0, 25)}
-                  </Text>
-                </View>
-              ))}
-          </View>
-        </View>
-      </View>
-    </TouchableOpacity>
-  );
-
-  const extraProps = selected
-    ? Object.entries(selected).filter(
-        ([k, v]) => k !== 'id' && k !== 'eventName' && k !== 'timestamp' && v !== undefined && v !== null,
-      )
-    : [];
-
-  return (
-    <View style={s.container}>
-      {/* List */}
-      <Animated.View style={[s.listWrap, selected ? { opacity: listOpacity, transform: [{ translateX: listTranslateX }] } : null]}>
-        {data.length === 0 ? (
-          <View style={s.emptyContainer}>
-            <Text style={s.emptyIcon}>~</Text>
-            <Text style={s.empty}>No track events</Text>
-          </View>
-        ) : (
-          <FlatList
-            data={[...data].reverse()}
-            renderItem={renderItem}
-            keyExtractor={(item) => item.id}
-            contentContainerStyle={s.listContent}
-            initialNumToRender={20}
-            maxToRenderPerBatch={10}
-            windowSize={5}
-            removeClippedSubviews={true}
-          />
-        )}
-      </Animated.View>
-
-      {/* Detail (push navigation) */}
-      {selected && (
-        <Animated.View style={[s.detailOverlay, { transform: [{ translateX: detailTranslateX }] }]}>
-          <View style={s.detailWrap}>
-            <View style={s.detailHeader}>
-              <TouchableOpacity onPress={() => setSelected(null)} style={s.backBtn} activeOpacity={0.6}>
-                <Text style={s.backIcon}>‹</Text>
-                <Text style={s.backText}>Back</Text>
-              </TouchableOpacity>
-              <View style={s.eventBadge}>
-                <Text style={s.eventBadgeText}>{selected.eventName}</Text>
-              </View>
-            </View>
-            <ScrollView style={s.detailBody} contentContainerStyle={s.detailBodyContent}>
-              {/* Properties */}
-              <CollapsibleSection title="Properties" initiallyExpanded>
-                <View style={s.sectionWithCopy}>
-                  <CopyButton text={safeStringify(Object.fromEntries(extraProps), 2)} label="Track Properties" />
-                  <View style={s.propsGrid}>
-                    {extraProps.map(([key, value]) => (
-                      <View key={key} style={s.propRow}>
-                        <Text style={s.propKey}>{key}</Text>
-                        <Text style={s.propValue} selectable>
-                          {typeof value === 'object' ? safeStringify(value) : String(value ?? '')}
-                        </Text>
-                      </View>
-                    ))}
-                  </View>
-                </View>
-              </CollapsibleSection>
-
-              {/* Full JSON */}
-              <CollapsibleSection title="Full Event Data">
-                <View style={s.sectionWithCopy}>
-                  <CopyButton text={safeStringify(selected, 2)} label="Track Event" />
-                  <JsonView data={selected} maxHeight={300} />
-                </View>
-              </CollapsibleSection>
-
-              {/* Timing */}
-              <View style={s.timingCard}>
-                <Text style={s.timingLabel}>Time</Text>
-                <Text style={s.timingValue}>
-                  {new Date(selected.timestamp).toLocaleString()}
-                </Text>
-              </View>
-            </ScrollView>
-          </View>
-        </Animated.View>
-      )}
-    </View>
-  );
-});
-
-const s = StyleSheet.create({
-  container: { flex: 1, backgroundColor: Colors.background },
-  listWrap: {
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    right: 0,
-    bottom: 0,
-  },
-  listContent: { padding: 12 },
-
-  // Empty
-  emptyContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
-  emptyIcon: { fontSize: 40, color: Colors.textLight, marginBottom: 4 },
-  empty: { textAlign: 'center', color: Colors.textLight, fontSize: 14 },
-
-  // Card
-  card: {
-    backgroundColor: Colors.surface,
-    borderRadius: 12,
-    marginBottom: 8,
-    overflow: 'hidden',
-  },
-  cardRow: { flexDirection: 'row', padding: 14, alignItems: 'flex-start' },
-  eventIcon: {
-    width: 28,
-    height: 28,
-    borderRadius: 8,
-    backgroundColor: 'rgba(175,82,222,0.1)',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 12,
-    marginTop: 1,
-  },
-  eventIconText: { color: Colors.purple, fontSize: 10 },
-  cardContent: { flex: 1 },
-  cardHeader: { flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginBottom: 6 },
-  eventName: { fontSize: 15, fontWeight: '600', color: Colors.text },
-  time: { fontSize: 12, color: Colors.textSecondary },
-  previewRow: { flexDirection: 'row', flexWrap: 'wrap', gap: 4 },
-  previewChip: {
-    backgroundColor: Colors.background,
-    borderRadius: 6,
-    paddingHorizontal: 8,
-    paddingVertical: 3,
-  },
-  previewText: { fontSize: 12, color: Colors.textSecondary, lineHeight: 16 },
-  previewKey: { fontWeight: '600', color: Colors.text },
-
-  // Detail (push navigation)
-  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,
-    gap: 8,
-  },
-  backBtn: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    paddingHorizontal: 6,
-    paddingVertical: 4,
-    borderRadius: 8,
-  },
-  backIcon: {
-    fontSize: 24,
-    fontWeight: '300',
-    color: Colors.primary,
-    marginTop: -2,
-    marginRight: 2,
-  },
-  backText: {
-    fontSize: 16,
-    color: Colors.primary,
-    fontWeight: '500',
-  },
-  eventBadge: {
-    backgroundColor: Colors.purple,
-    paddingHorizontal: 12,
-    paddingVertical: 5,
-    borderRadius: 8,
-  },
-  eventBadgeText: { color: '#FFF', fontSize: 14, fontWeight: '700' },
-  detailBody: { flex: 1 },
-  detailBodyContent: { padding: 12, paddingBottom: 40 },
-  sectionWithCopy: { gap: 8 },
-
-  // Properties
-  propsGrid: { gap: 12 },
-  propRow: {},
-  propKey: { fontSize: 13, fontWeight: '600', color: Colors.textSecondary, marginBottom: 3 },
-  propValue: { fontSize: 14, color: Colors.text, lineHeight: 20 },
-
-  // Timing
-  timingCard: {
-    backgroundColor: Colors.surface,
-    borderRadius: 12,
-    padding: 14,
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    marginTop: 4,
-  },
-  timingLabel: { fontSize: 13, color: Colors.textSecondary, fontWeight: '500' },
-  timingValue: { fontSize: 13, color: Colors.text },
-});