react-native-debug-toolkit 0.6.4 → 2.1.0

package/src/components/TrackLogTab.tsx

@@ -0,0 +1,110 @@
+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 { LogListScreen } from './shared/LogListScreen';
+import type { DebugFeatureRenderProps, TrackLogEntry } from '../types';
+
+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.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>
+    )}
+    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 (
+        <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>
+            </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>
+        </ScrollView>
+      );
+    }}
+  />
+));
+
+const s = StyleSheet.create({
+  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 },
+  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 },
+  propsGrid: { gap: 12 },
+  propRow: {},
+  propKey: { fontSize: 13, fontWeight: '600', color: Colors.textSecondary, marginBottom: 3 },
+  propValue: { fontSize: 14, color: Colors.text, lineHeight: 20 },
+  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 },
+});

package/src/components/ZustandLogTab.tsx

@@ -0,0 +1,203 @@
+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 { LogListScreen } from './shared/LogListScreen';
+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)';
+};
+
+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,
+}) => (
+  <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) }]} />
+        </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>
+    )}
+    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>
+        )}
+      </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>
+            {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>
+
+          {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>
+          )}
+
+          <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>
+
+          <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({
+  // Row
+  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 header
+  detailHeaderCenter: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 10,
+    flex: 1,
+  },
+  detailAction: { fontSize: 17, fontWeight: '700' },
+
+  // Detail body
+  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/components/shared/CollapsibleSection.tsx

@@ -0,0 +1,78 @@
+import React, { useState, useEffect } from 'react';
+import { View, Text, Pressable, StyleSheet, Animated } from 'react-native';
+import { Colors } from '../../utils/colors';
+
+interface Props {
+  title: string;
+  initiallyExpanded?: boolean;
+  children: React.ReactNode;
+}
+
+export const CollapsibleSection: React.FC<Props> = ({
+  title,
+  initiallyExpanded = false,
+  children,
+}) => {
+  const [expanded, setExpanded] = useState(initiallyExpanded);
+  const [rotationAnim] = useState(() => new Animated.Value(initiallyExpanded ? 1 : 0));
+
+  useEffect(() => {
+    Animated.timing(rotationAnim, {
+      toValue: expanded ? 1 : 0,
+      duration: 200,
+      useNativeDriver: true,
+    }).start();
+  }, [expanded, rotationAnim]);
+
+  const chevronRotation = rotationAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '90deg'],
+  });
+
+  return (
+    <View style={styles.section}>
+      <Pressable
+        style={styles.header}
+        onPress={() => setExpanded(!expanded)}
+      >
+        <Text style={styles.title}>{title}</Text>
+        <Animated.Text style={[styles.chevron, { transform: [{ rotate: chevronRotation }] }]}>
+          ›
+        </Animated.Text>
+      </Pressable>
+      {expanded && <View style={styles.body}>{children}</View>}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  section: {
+    backgroundColor: Colors.surface,
+    borderRadius: 12,
+    marginBottom: 8,
+    overflow: 'hidden',
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 13,
+  },
+  title: {
+    fontSize: 15,
+    fontWeight: '600',
+    color: Colors.text,
+  },
+  chevron: {
+    fontSize: 20,
+    fontWeight: '500',
+    color: Colors.textLight,
+    width: 20,
+    textAlign: 'center',
+  },
+  body: {
+    paddingHorizontal: 16,
+    paddingBottom: 14,
+  },
+});

package/src/components/shared/CopyButton.tsx

@@ -0,0 +1,68 @@
+import React, { useCallback, useState } from 'react';
+import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+import { Colors } from '../../utils/colors';
+import { copyToComputer } from '../../utils/copyToComputer';
+
+interface CopyButtonProps {
+  /** Content to copy */
+  text: string;
+  /** Label for console.log identification */
+  label?: string;
+  /** Compact mode for inline use */
+  compact?: boolean;
+}
+
+export const CopyButton: React.FC<CopyButtonProps> = ({ text, label, compact }) => {
+  const [feedback, setFeedback] = useState<'copied' | 'logged' | null>(null);
+
+  const handleCopy = useCallback(() => {
+    try {
+      const result = copyToComputer(text, { label });
+      setFeedback(result.method === 'clipboard' ? 'copied' : 'logged');
+    } catch {
+      setFeedback('logged');
+    }
+    setTimeout(() => setFeedback(null), 2000);
+  }, [text, label]);
+
+  if (!text) return null;
+
+  const feedbackLabel =
+    feedback === 'copied' ? 'Copied' :
+    feedback === 'logged' ? 'Logged' :
+    null;
+
+  return (
+    <TouchableOpacity
+      style={[s.copyBtn, compact && s.copyBtnCompact]}
+      onPress={handleCopy}
+      activeOpacity={0.7}
+    >
+      <Text style={[s.copyBtnText, compact && s.copyBtnTextCompact]}>
+        {feedbackLabel ?? 'Copy'}
+      </Text>
+    </TouchableOpacity>
+  );
+};
+
+const s = StyleSheet.create({
+  copyBtn: {
+    backgroundColor: Colors.background,
+    paddingHorizontal: 12,
+    paddingVertical: 5,
+    borderRadius: 8,
+    alignSelf: 'flex-end',
+  },
+  copyBtnCompact: {
+    paddingHorizontal: 8,
+    paddingVertical: 3,
+  },
+  copyBtnText: {
+    fontSize: 12,
+    color: Colors.textSecondary,
+    fontWeight: '500',
+  },
+  copyBtnTextCompact: {
+    fontSize: 11,
+  },
+});

package/src/components/shared/JsonView.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { View, Text, ScrollView, StyleSheet } from 'react-native';
+import { safeStringify } from '../../utils/safeStringify';
+
+const MAX_DEPTH = 3;
+const MAX_CHILDREN = 50;
+
+export const JsonView: React.FC<{ data: unknown; maxHeight?: number }> = React.memo(({
+  data,
+  maxHeight,
+}) => {
+  return (
+    <ScrollView
+      style={[s.scroll, maxHeight != null && { maxHeight }]}
+      nestedScrollEnabled
+      bounces={false}
+      showsVerticalScrollIndicator
+    >
+      <View style={s.block}>
+        <Node value={data} depth={0} isLast />
+      </View>
+    </ScrollView>
+  );
+});
+
+const Node: React.FC<{
+  value: unknown;
+  depth: number;
+  isLast: boolean;
+}> = ({ value, depth, isLast }) => {
+  const comma = isLast ? '' : ',';
+
+  if (value === null) return <C color="#F38BA8">{`null${comma}`}</C>;
+  if (value === undefined) return <C color="#F38BA8">{`undefined${comma}`}</C>;
+  if (typeof value === 'boolean') return <C color="#89B4FA">{`${String(value)}${comma}`}</C>;
+  if (typeof value === 'number') return <C color="#CBA6F7">{`${value}${comma}`}</C>;
+  if (typeof value === 'string') {
+    const display = value.length > 500 ? value.slice(0, 500) + '...' : value;
+    return <C color="#A6E3A1" selectable>{`"${display}"${comma}`}</C>;
+  }
+
+  if (depth >= MAX_DEPTH) {
+    const collapsed = truncate(safeStringify(value), 200);
+    return <C color="#6C7086">{`${collapsed}${comma}`}</C>;
+  }
+
+  const entries = Object.entries(value as Record<string, unknown>);
+  const isArray = Array.isArray(value);
+  const open = isArray ? '[' : '{';
+  const close = isArray ? ']' : '}';
+
+  if (entries.length === 0) return <C color="#6C7086">{`${open}${close}${comma}`}</C>;
+
+  const limited = entries.slice(0, MAX_CHILDREN);
+
+  return (
+    <View style={depth > 0 ? s.indent : undefined}>
+      <C color="#6C7086">{open}</C>
+      {limited.map(([key, val], i) => (
+        <View key={key} style={s.line}>
+          <Text style={s.row}>
+            {!isArray && <Text style={s.key}>"{key}"</Text>}
+            {!isArray && <Text style={s.colon}>{': '}</Text>}
+          </Text>
+          <Node
+            value={val}
+            depth={depth + 1}
+            isLast={i === limited.length - 1}
+          />
+        </View>
+      ))}
+      {entries.length > MAX_CHILDREN && (
+        <C color="#6C7086">{`  ... ${entries.length - MAX_CHILDREN} more`}</C>
+      )}
+      <C color="#6C7086">{`${close}${comma}`}</C>
+    </View>
+  );
+};
+
+const C: React.FC<{ color: string; children: string; selectable?: boolean }> = ({
+  color,
+  children,
+  selectable,
+}) => (
+  <Text style={[s.node, { color }]} selectable={selectable}>
+    {children}
+  </Text>
+);
+
+function truncate(str: string, len: number): string {
+  return str.length > len ? str.slice(0, len) + '...' : str;
+}
+
+const s = StyleSheet.create({
+  scroll: {
+    backgroundColor: '#1E1E2E',
+    borderRadius: 12,
+    padding: 12,
+  },
+  block: {},
+  node: {
+    fontFamily: 'Courier',
+    fontSize: 12,
+    lineHeight: 18,
+    color: '#CDD6F4',
+  },
+  indent: {
+    paddingLeft: 16,
+  },
+  line: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  row: {},
+  key: {
+    fontFamily: 'Courier',
+    fontSize: 12,
+    color: '#89DCEB',
+  },
+  colon: {
+    fontFamily: 'Courier',
+    fontSize: 12,
+    color: '#CDD6F4',
+  },
+});