react-native-debug-toolkit 2.0.0 → 2.2.0

package/src/components/ZustandLogTab.tsx

@@ -1,305 +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, ZustandLogEntry } from '../types';
-
-const getActionColor = (action: string): string => {
-  if (action.includes('add') || action.includes('create')) return '#34C759';
-  if (action.includes('remove') || action.includes('delete')) return '#FF3B30';
-  if (action.includes('update') || action.includes('set')) return '#007AFF';
-  return '#AF52DE';
-};
-
-const getActionBgColor = (action: string): string => {
-  if (action.includes('add') || action.includes('create')) return 'rgba(52,199,89,0.1)';
-  if (action.includes('remove') || action.includes('delete')) return 'rgba(255,59,48,0.1)';
-  if (action.includes('update') || action.includes('set')) return 'rgba(0,122,255,0.1)';
-  return 'rgba(175,82,222,0.1)';
-};
-
-export const ZustandLogTab: React.FC<DebugFeatureRenderProps<ZustandLogEntry>> = React.memo(({
-  data,
-}) => {
-  const [selected, setSelected] = useState<ZustandLogEntry | null>(null);
-  const { detailTranslateX, listTranslateX, listOpacity } = useSlideDetailAnimation(selected);
-
-  const renderItem = ({ item }: { item: ZustandLogEntry }) => (
-    <TouchableOpacity style={s.card} onPress={() => setSelected(item)} activeOpacity={0.6}>
-      <View style={s.cardRow}>
-        <View style={[s.actionIcon, { backgroundColor: getActionBgColor(item.action) }]}>
-          <View style={[s.actionDot, { backgroundColor: getActionColor(item.action) }]} />
-        </View>
-        <View style={s.cardContent}>
-          <View style={s.cardMeta}>
-            <Text style={s.action}>{item.action}</Text>
-            {item.storeName && (
-              <View style={s.storeBadge}>
-                <Text style={s.storeBadgeText}>{item.storeName}</Text>
-              </View>
-            )}
-          </View>
-          <Text style={s.time}>{new Date(item.timestamp).toLocaleTimeString()}</Text>
-        </View>
-        {item.actionCompleteTime != null && (
-          <View style={s.durationBadge}>
-            <Text style={s.durationText}>{item.actionCompleteTime}ms</Text>
-          </View>
-        )}
-      </View>
-    </TouchableOpacity>
-  );
-
-  const findChanges = (prev: unknown, next: unknown): string[] => {
-    if (typeof prev !== 'object' || typeof next !== 'object' || !prev || !next) return [];
-    const allKeys = new Set([...Object.keys(prev as object), ...Object.keys(next as object)]);
-    const changed: string[] = [];
-    allKeys.forEach((key) => {
-      const pv = (prev as Record<string, unknown>)[key];
-      const nv = (next as Record<string, unknown>)[key];
-      if (safeStringify(pv) !== safeStringify(nv)) changed.push(key);
-    });
-    return changed;
-  };
-
-  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 Zustand state changes</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.detailHeaderCenter}>
-                <Text style={[s.detailAction, { color: getActionColor(selected.action) }]}>
-                  {selected.action}
-                </Text>
-                {selected.storeName && (
-                  <View style={s.storeBadge}>
-                    <Text style={s.storeBadgeText}>{selected.storeName}</Text>
-                  </View>
-                )}
-              </View>
-            </View>
-            <ScrollView style={s.detailBody} contentContainerStyle={s.detailBodyContent}>
-              {/* Meta */}
-              <View style={s.metaCard}>
-                <View style={s.metaItem}>
-                  <Text style={s.metaLabel}>Time</Text>
-                  <Text style={s.metaValue}>
-                    {new Date(selected.timestamp).toLocaleString()}
-                  </Text>
-                </View>
-                {selected.actionCompleteTime != null && (
-                  <View style={s.metaDivider} />
-                )}
-                {selected.actionCompleteTime != null && (
-                  <View style={s.metaItem}>
-                    <Text style={s.metaLabel}>Duration</Text>
-                    <Text style={s.metaValue}>{selected.actionCompleteTime}ms</Text>
-                  </View>
-                )}
-              </View>
-
-              {/* Changed keys */}
-              {(() => {
-                const changes = findChanges(selected.prevState, selected.nextState);
-                if (changes.length === 0) return null;
-                return (
-                  <View style={s.changesCard}>
-                    <Text style={s.changesTitle}>Changed Keys</Text>
-                    <View style={s.changesTags}>
-                      {changes.map((key) => (
-                        <View key={key} style={s.changeTag}>
-                          <Text style={s.changeTagText}>{key}</Text>
-                        </View>
-                      ))}
-                    </View>
-                  </View>
-                );
-              })()}
-
-              {/* Previous State */}
-              <CollapsibleSection title="Previous State">
-                <View style={s.sectionWithCopy}>
-                  <CopyButton text={safeStringify(selected.prevState, 2)} label="Previous State" />
-                  <JsonView data={selected.prevState} maxHeight={250} />
-                </View>
-              </CollapsibleSection>
-
-              {/* Next State */}
-              <CollapsibleSection title="Next State" initiallyExpanded>
-                <View style={s.sectionWithCopy}>
-                  <CopyButton text={safeStringify(selected.nextState, 2)} label="Next State" />
-                  <JsonView data={selected.nextState} maxHeight={250} />
-                </View>
-              </CollapsibleSection>
-            </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: 'center' },
-  actionIcon: {
-    width: 28,
-    height: 28,
-    borderRadius: 8,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 12,
-  },
-  actionDot: { width: 8, height: 8, borderRadius: 4 },
-  cardContent: { flex: 1 },
-  cardMeta: { flexDirection: 'row', alignItems: 'center', gap: 8, marginBottom: 3 },
-  action: { fontSize: 15, fontWeight: '600', color: Colors.text },
-  storeBadge: {
-    backgroundColor: 'rgba(0,122,255,0.08)',
-    paddingHorizontal: 8,
-    paddingVertical: 2,
-    borderRadius: 4,
-  },
-  storeBadgeText: { fontSize: 11, color: Colors.primary, fontWeight: '600' },
-  time: { fontSize: 12, color: Colors.textSecondary },
-  durationBadge: {
-    backgroundColor: Colors.background,
-    borderRadius: 8,
-    paddingHorizontal: 8,
-    paddingVertical: 4,
-  },
-  durationText: { fontSize: 12, color: Colors.textSecondary, fontWeight: '500' },
-
-  // 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,
-  },
-  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: 10,
-    flex: 1,
-  },
-  detailAction: { fontSize: 17, fontWeight: '700' },
-  detailBody: { flex: 1 },
-  detailBodyContent: { padding: 12, paddingBottom: 40 },
-  sectionWithCopy: { gap: 8 },
-
-  // Meta
-  metaCard: {
-    backgroundColor: Colors.surface,
-    borderRadius: 12,
-    padding: 14,
-    marginBottom: 8,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  metaItem: { flex: 1 },
-  metaDivider: { width: 1, height: 28, backgroundColor: Colors.border, marginHorizontal: 12 },
-  metaLabel: { fontSize: 11, color: Colors.textSecondary, fontWeight: '600', textTransform: 'uppercase', marginBottom: 2 },
-  metaValue: { fontSize: 14, color: Colors.text, fontWeight: '500' },
-
-  // Changes
-  changesCard: {
-    backgroundColor: Colors.surface,
-    borderRadius: 12,
-    padding: 14,
-    marginBottom: 8,
-  },
-  changesTitle: { fontSize: 13, fontWeight: '600', color: Colors.textSecondary, marginBottom: 10 },
-  changesTags: { flexDirection: 'row', flexWrap: 'wrap', gap: 6 },
-  changeTag: {
-    backgroundColor: 'rgba(0,122,255,0.08)',
-    paddingHorizontal: 10,
-    paddingVertical: 4,
-    borderRadius: 6,
-  },
-  changeTagText: { fontSize: 12, color: Colors.primary, fontWeight: '600' },
-});

package/src/features/ClipboardFeature.ts

@@ -1,11 +0,0 @@
-import { ClipboardTab } from '../components/ClipboardTab';
-import type { DebugFeature } from '../types';
-
-export const createClipboardFeature = (): DebugFeature<void> => ({
-  name: 'clipboard',
-  label: 'Clipboard',
-  renderContent: ClipboardTab,
-  setup: () => {},
-  getData: () => [],
-  cleanup: () => {},
-});

package/src/features/ConsoleLogFeature.ts

@@ -1,118 +0,0 @@
-import { ConsoleLogTab } from '../components/ConsoleLogTab';
-import type { ConsoleLogEntry, DebugFeature } from '../types';
-import { createEventChannel } from '../utils/createEventChannel';
-import { createObservableStore } from '../utils/createObservableStore';
-
-type ConsoleLogPayload = Omit<ConsoleLogEntry, 'id'>;
-
-const DEFAULT_MAX_LOGS = 200;
-const consoleChannel = createEventChannel<ConsoleLogPayload>();
-const originalConsole: Partial<Record<ConsoleLogEntry['level'], (...args: unknown[]) => void>> =
-  {};
-const LEVELS: ConsoleLogEntry['level'][] = ['log', 'info', 'warn', 'error'];
-
-let consoleCaptureRefCount = 0;
-
-function stopConsoleCapture(): void {
-  consoleCaptureRefCount = Math.max(0, consoleCaptureRefCount - 1);
-
-  if (consoleCaptureRefCount > 0) {
-    return;
-  }
-
-  LEVELS.forEach((level) => {
-    const originalMethod = originalConsole[level];
-
-    if (!originalMethod) {
-      return;
-    }
-
-    console[level] = originalMethod;
-    delete originalConsole[level];
-  });
-}
-
-function startConsoleCapture(): () => void {
-  consoleCaptureRefCount += 1;
-
-  if (consoleCaptureRefCount > 1) {
-    return () => {
-      stopConsoleCapture();
-    };
-  }
-
-  LEVELS.forEach((level) => {
-    originalConsole[level] = console[level];
-
-    console[level] = (...args: unknown[]) => {
-      originalConsole[level]?.apply(console, args);
-      // Skip DebugToolkit's own copy-to-computer logs to avoid Console tab noise
-      if (level === 'log' && typeof args[0] === 'string' && args[0].startsWith('[DebugToolkit:Copy]')) {
-        return;
-      }
-      consoleChannel.emit({
-        timestamp: Date.now(),
-        level,
-        data: args,
-      });
-    };
-  });
-
-  return () => {
-    stopConsoleCapture();
-  };
-}
-
-export interface ConsoleFeatureConfig {
-  /** Maximum number of console logs to keep (default: 200) */
-  maxLogs?: number;
-}
-
-export const createConsoleLogFeature = (config?: ConsoleFeatureConfig): DebugFeature<ConsoleLogEntry> => {
-  const maxLogs = config?.maxLogs ?? DEFAULT_MAX_LOGS;
-  const logStore = createObservableStore<ConsoleLogEntry>();
-  let nextId = 0;
-  let initialized = false;
-  let unsubscribeLogs: (() => void) | null = null;
-  let stopCapture: (() => void) | null = null;
-
-  return {
-    name: 'console',
-    label: 'Console',
-    renderContent: ConsoleLogTab,
-    setup: () => {
-      if (initialized) {
-        return;
-      }
-
-      unsubscribeLogs = consoleChannel.subscribe((entry) => {
-        logStore.push(
-          {
-            ...entry,
-            id: String(nextId++),
-          },
-          maxLogs,
-        );
-      });
-      stopCapture = startConsoleCapture();
-      initialized = true;
-    },
-    getData: () => logStore.getData(),
-    clear: () => {
-      logStore.clear();
-    },
-    cleanup: () => {
-      if (!initialized) {
-        return;
-      }
-
-      unsubscribeLogs?.();
-      unsubscribeLogs = null;
-      stopCapture?.();
-      stopCapture = null;
-      logStore.clear();
-      initialized = false;
-    },
-    subscribe: (listener) => logStore.subscribe(listener),
-  };
-};

package/src/features/NavigationLogFeature.ts

@@ -1,74 +0,0 @@
-import { NavigationLogTab } from '../components/NavigationLogTab';
-import type { DebugFeature, NavigationLogEntry } from '../types';
-import { createEventChannel } from '../utils/createEventChannel';
-import { createObservableStore } from '../utils/createObservableStore';
-
-type NavigationLogPayload = Omit<NavigationLogEntry, 'id'>;
-
-const DEFAULT_MAX_LOGS = 200;
-const navigationChannel = createEventChannel<NavigationLogPayload>();
-
-export const addNavigationLog = (
-  action: string,
-  from: string,
-  to: string,
-  startTime?: number,
-  duration?: number,
-  debugLog?: string,
-): void => {
-  navigationChannel.emit({
-    timestamp: Date.now(),
-    action,
-    from,
-    to,
-    startTime,
-    duration,
-    debugLog,
-  });
-};
-
-export interface NavigationFeatureConfig {
-  /** Maximum number of navigation logs to keep (default: 200) */
-  maxLogs?: number;
-}
-
-export const createNavigationLogFeature = (config?: NavigationFeatureConfig): DebugFeature<NavigationLogEntry> => {
-  const maxLogs = config?.maxLogs ?? DEFAULT_MAX_LOGS;
-  const logStore = createObservableStore<NavigationLogEntry>();
-  let nextId = 0;
-  let unsubscribeLogs: (() => void) | null = null;
-  let initialized = false;
-
-  return {
-    name: 'navigation',
-    label: 'Navigation',
-    renderContent: NavigationLogTab,
-    setup: () => {
-      if (initialized) {
-        return;
-      }
-
-      unsubscribeLogs = navigationChannel.subscribe((entry) => {
-        logStore.push(
-          {
-            ...entry,
-            id: String(nextId++),
-          },
-          maxLogs,
-        );
-      });
-      initialized = true;
-    },
-    getData: () => logStore.getData(),
-    clear: () => {
-      logStore.clear();
-    },
-    cleanup: () => {
-      unsubscribeLogs?.();
-      unsubscribeLogs = null;
-      logStore.clear();
-      initialized = false;
-    },
-    subscribe: (listener) => logStore.subscribe(listener),
-  };
-};