react-native-debug-toolkit 2.0.0 → 2.1.0

package/src/components/TrackLogTab.tsx

@@ -1,25 +1,20 @@
-import React, { useState } from 'react';
-import { View, Text, FlatList, TouchableOpacity, StyleSheet, Animated, ScrollView } from 'react-native';
-import { Colors } from '../utils/constants';
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import { Colors } from '../utils/colors';
 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 { LogListScreen } from './shared/LogListScreen';
 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}>
+export const TrackLogTab: React.FC<DebugFeatureRenderProps<TrackLogEntry>> = React.memo(({ data }) => (
+  <LogListScreen
+    data={data}
+    emptyText="No track events"
+    renderRow={(item) => (
       <View style={s.cardRow}>
-        <View style={s.eventIcon}>
-          <Text style={s.eventIconText}>●</Text>
-        </View>
+        <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>
@@ -39,125 +34,54 @@ export const TrackLogTab: React.FC<DebugFeatureRenderProps<TrackLogEntry>> = Rea
           </View>
         </View>
       </View>
-    </TouchableOpacity>
-  );
-
-  const extraProps = selected
-    ? Object.entries(selected).filter(
+    )}
+    renderDetailHeader={(item) => (
+      <View style={s.eventBadge}><Text style={s.eventBadgeText}>{item.eventName}</Text></View>
+    )}
+    renderDetailBody={(item) => {
+      const extraProps = Object.entries(item).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>
-                    ))}
+      );
+      return (
+        <ScrollView style={s.detailBody} contentContainerStyle={s.detailBodyContent}>
+          <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>
-              </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>
+          </CollapsibleSection>
+          <CollapsibleSection title="Full Event Data">
+            <View style={s.sectionWithCopy}>
+              <CopyButton text={safeStringify(item, 2)} label="Track Event" />
+              <JsonView data={item} maxHeight={300} />
+            </View>
+          </CollapsibleSection>
+          <View style={s.timingCard}>
+            <Text style={s.timingLabel}>Time</Text>
+            <Text style={s.timingValue}>{new Date(item.timestamp).toLocaleString()}</Text>
           </View>
-        </Animated.View>
-      )}
-    </View>
-  );
-});
+        </ScrollView>
+      );
+    }}
+  />
+));
 
 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,
+    width: 28, height: 28, borderRadius: 8,
     backgroundColor: 'rgba(175,82,222,0.1)',
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 12,
-    marginTop: 1,
+    alignItems: 'center', justifyContent: 'center',
+    marginRight: 12, marginTop: 1,
   },
   eventIconText: { color: Colors.purple, fontSize: 10 },
   cardContent: { flex: 1 },
@@ -165,80 +89,21 @@ const s = StyleSheet.create({
   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,
-  },
+  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,
-  },
+  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,
+    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 },

package/src/components/ZustandLogTab.tsx

@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
-import { View, Text, FlatList, TouchableOpacity, StyleSheet, Animated, ScrollView } from 'react-native';
-import { Colors } from '../utils/constants';
+import React from 'react';
+import { View, Text, StyleSheet, ScrollView } from 'react-native';
+import { Colors } from '../utils/colors';
 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 { LogListScreen } from './shared/LogListScreen';
 import type { DebugFeatureRenderProps, ZustandLogEntry } from '../types';
 
 const getActionColor = (action: string): string => {
@@ -22,14 +22,25 @@ const getActionBgColor = (action: string): string => {
   return 'rgba(175,82,222,0.1)';
 };
 
+function 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;
+}
+
 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}>
+}) => (
+  <LogListScreen
+    data={data}
+    emptyText="No Zustand state changes"
+    renderRow={(item) => (
       <View style={s.cardRow}>
         <View style={[s.actionIcon, { backgroundColor: getActionBgColor(item.action) }]}>
           <View style={[s.actionDot, { backgroundColor: getActionColor(item.action) }]} />
@@ -51,148 +62,71 @@ export const ZustandLogTab: React.FC<DebugFeatureRenderProps<ZustandLogEntry>> =
           </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>
+    )}
+    renderDetailHeader={(item) => (
+      <View style={s.detailHeaderCenter}>
+        <Text style={[s.detailAction, { color: getActionColor(item.action) }]}>
+          {item.action}
+        </Text>
+        {item.storeName && (
+          <View style={s.storeBadge}>
+            <Text style={s.storeBadgeText}>{item.storeName}</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>
+    )}
+    renderDetailBody={(item) => {
+      const changes = findChanges(item.prevState, item.nextState);
+      return (
+        <ScrollView style={s.detailBody} contentContainerStyle={s.detailBodyContent}>
+          <View style={s.metaCard}>
+            <View style={s.metaItem}>
+              <Text style={s.metaLabel}>Time</Text>
+              <Text style={s.metaValue}>{new Date(item.timestamp).toLocaleString()}</Text>
             </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>
-                )}
+            {item.actionCompleteTime != null && <View style={s.metaDivider} />}
+            {item.actionCompleteTime != null && (
+              <View style={s.metaItem}>
+                <Text style={s.metaLabel}>Duration</Text>
+                <Text style={s.metaValue}>{item.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>
+          {changes.length > 0 && (
+            <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>
+          <CollapsibleSection title="Previous State">
+            <View style={s.sectionWithCopy}>
+              <CopyButton text={safeStringify(item.prevState, 2)} label="Previous State" />
+              <JsonView data={item.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>
-  );
-});
+          <CollapsibleSection title="Next State" initiallyExpanded>
+            <View style={s.sectionWithCopy}>
+              <CopyButton text={safeStringify(item.nextState, 2)} label="Next State" />
+              <JsonView data={item.nextState} maxHeight={250} />
+            </View>
+          </CollapsibleSection>
+        </ScrollView>
+      );
+    }}
+  />
+));
 
 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',
-  },
+  // Row
   cardRow: { flexDirection: 'row', padding: 14, alignItems: 'center' },
   actionIcon: {
     width: 28,
@@ -222,45 +156,7 @@ const s = StyleSheet.create({
   },
   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',
-  },
+  // Detail header
   detailHeaderCenter: {
     flexDirection: 'row',
     alignItems: 'center',
@@ -268,6 +164,8 @@ const s = StyleSheet.create({
     flex: 1,
   },
   detailAction: { fontSize: 17, fontWeight: '700' },
+
+  // Detail body
   detailBody: { flex: 1 },
   detailBodyContent: { padding: 12, paddingBottom: 40 },
   sectionWithCopy: { gap: 8 },

package/src/components/shared/CollapsibleSection.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { View, Text, Pressable, StyleSheet, Animated } from 'react-native';
-import { Colors } from '../../utils/constants';
+import { Colors } from '../../utils/colors';
 
 interface Props {
   title: string;

package/src/components/shared/CopyButton.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 import { TouchableOpacity, Text, StyleSheet } from 'react-native';
-import { Colors } from '../../utils/constants';
+import { Colors } from '../../utils/colors';
 import { copyToComputer } from '../../utils/copyToComputer';
 
 interface CopyButtonProps {