react-native-debug-toolkit 0.6.4 → 2.1.0

package/package.json

@@ -1,43 +1,86 @@
 {
   "name": "react-native-debug-toolkit",
-  "version": "0.6.4",
-  "description": "A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development",
-  "main": "index.js",
-  "types": "index.d.ts",
-  "podspec": "react-native-debug-toolkit.podspec",
+  "version": "2.1.0",
+  "description": "A dev-only floating debug panel for React Native with network, console, Zustand, navigation, and event logs",
+  "main": "lib/commonjs/index.js",
+  "module": "lib/module/index.js",
+  "types": "lib/typescript/src/index.d.ts",
+  "files": [
+    "src",
+    "lib",
+    "README.md",
+    "LICENSE",
+    "!**/__tests__",
+    "!**/__fixtures__",
+    "!**/__mocks__"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "bundle": "react-native bundle --platform ios --dev false --entry-file index.js --bundle-output dist/main.jsbundle --assets-dest dist"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://gitlab.outer.staruniongame.com/seaart-app-front/react-native-debug-toolkit.git"
+    "typecheck": "tsc --noEmit",
+    "typescript": "npm run typecheck",
+    "test": "jest",
+    "build": "bob build",
+    "lint": "eslint \"src/**/*.{js,ts,tsx}\"",
+    "prepare": "bob build"
   },
   "keywords": [
     "react-native",
     "debug",
     "toolkit",
-    "logging",
+    "http-inspector",
     "development-tools",
-    "floating-ui"
+    "floating-panel"
   ],
   "author": "zcj",
   "license": "MIT",
-  "dependencies": {
-    "react-native-mmkv": "2.12.2",
-    "react-native-json-tree": "^1.5.0",
-    "react-native-performance": "5.1.2",
-    "react-native-root-siblings": "^4.0.0"
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/zcj0808/react-native-debug-toolkit"
+  },
+  "homepage": "https://github.com/zcj0808/react-native-debug-toolkit#readme",
+  "bugs": {
+    "url": "https://github.com/zcj0808/react-native-debug-toolkit/issues"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*"
+    "@react-native-clipboard/clipboard": ">=1.0.0",
+    "react": ">=18.0.0",
+    "react-native": ">=0.72.0"
+  },
+  "peerDependenciesMeta": {
+    "@react-native-clipboard/clipboard": {
+      "optional": true
+    }
   },
   "devDependencies": {
-    "@types/react": "^18.0.0",
-    "@types/react-native": "^0.70.0"
+    "@react-native/babel-preset": "^0.76.0",
+    "@react-native/eslint-config": "^0.76.0",
+    "@types/jest": "^30.0.0",
+    "@types/react": "^18.3.1",
+    "eslint": "^8.57.0",
+    "jest": "^30.3.0",
+    "prettier": "^3.3.0",
+    "react": "^18.3.1",
+    "react-native": "^0.76.6",
+    "react-native-builder-bob": "^0.30.0",
+    "ts-jest": "^29.4.9",
+    "typescript": "^5.5.0"
   },
-  "jest": {
-    "preset": "react-native"
+  "react-native": "src/index.ts",
+  "source": "src/index.ts",
+  "react-native-builder-bob": {
+    "source": "src",
+    "output": "lib",
+    "targets": [
+      "commonjs",
+      "module",
+      [
+        "typescript",
+        {
+          "project": "tsconfig.json"
+        }
+      ]
+    ]
+  },
+  "dependencies": {
+    "@babel/runtime": "^7.29.2"
   }
 }

package/src/components/ClipboardTab.tsx

@@ -0,0 +1,81 @@
+import React, { useState, useCallback } from 'react';
+import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
+import { Colors } from '../utils/colors';
+import { copyToComputer } from '../utils/copyToComputer';
+import type { DebugFeatureRenderProps } from '../types';
+
+export const ClipboardTab: React.FC<DebugFeatureRenderProps<void>> = React.memo(() => {
+  const [text, setText] = useState('');
+  const [feedback, setFeedback] = useState<string | null>(null);
+
+  const handleCopy = useCallback(() => {
+    if (!text) return;
+    try {
+      const result = copyToComputer(text, { label: 'Clipboard' });
+      setFeedback(result.method === 'clipboard' ? 'Copied' : 'Logged');
+    } catch {
+      setFeedback('Logged');
+    }
+    setTimeout(() => setFeedback(null), 2000);
+  }, [text]);
+
+  return (
+    <View style={s.container}>
+      <TextInput
+        style={s.input}
+        value={text}
+        onChangeText={setText}
+        placeholder="Paste or type text here..."
+        placeholderTextColor={Colors.textLight}
+        multiline
+        textAlignVertical="top"
+      />
+      <View style={s.footer}>
+        {text ? (
+          <TouchableOpacity style={s.copyBtn} onPress={handleCopy} activeOpacity={0.7}>
+            <Text style={s.copyBtnText}>{feedback ?? 'Copy'}</Text>
+          </TouchableOpacity>
+        ) : (
+          <Text style={s.hint}>Paste or type content above, then copy to computer</Text>
+        )}
+      </View>
+    </View>
+  );
+});
+
+const s = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+    padding: 12,
+  },
+  input: {
+    flex: 1,
+    backgroundColor: Colors.surface,
+    borderRadius: 12,
+    padding: 12,
+    fontSize: 14,
+    color: Colors.text,
+    lineHeight: 20,
+  },
+  footer: {
+    paddingTop: 8,
+    minHeight: 36,
+    alignItems: 'flex-end',
+  },
+  hint: {
+    fontSize: 12,
+    color: Colors.textLight,
+  },
+  copyBtn: {
+    backgroundColor: Colors.background,
+    paddingHorizontal: 16,
+    paddingVertical: 6,
+    borderRadius: 8,
+  },
+  copyBtnText: {
+    fontSize: 13,
+    color: Colors.primary,
+    fontWeight: '600',
+  },
+});

package/src/components/ConsoleLogTab.tsx

@@ -0,0 +1,95 @@
+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 { fmt } from '../utils/copyToComputer';
+import type { ConsoleLogEntry, DebugFeatureRenderProps } from '../types';
+
+const LEVEL_COLORS: Record<string, string> = {
+  log: '#8E8E93',
+  info: '#007AFF',
+  warn: '#FF9500',
+  error: '#FF3B30',
+};
+
+const LEVEL_ICONS: Record<string, string> = {
+  log: '●',
+  info: 'ℹ',
+  warn: '⚠',
+  error: '✕',
+};
+
+export const ConsoleLogTab: React.FC<DebugFeatureRenderProps<ConsoleLogEntry>> = React.memo(({ data }) => (
+  <LogListScreen
+    data={data}
+    emptyText="No console logs"
+    renderRow={(item) => (
+      <View style={s.cardRow}>
+        <View style={[s.levelDot, { backgroundColor: LEVEL_COLORS[item.level] ?? '#8E8E93' }]}>
+          <Text style={s.levelIcon}>{LEVEL_ICONS[item.level] ?? '●'}</Text>
+        </View>
+        <View style={s.cardContent}>
+          <Text style={s.logMessage} numberOfLines={2}>
+            {item.data.map((d) => (typeof d === 'string' ? d : safeStringify(d))).join(' ')}
+          </Text>
+          <Text style={s.time}>{new Date(item.timestamp).toLocaleTimeString()}</Text>
+        </View>
+      </View>
+    )}
+    renderDetailHeader={(item) => (
+      <>
+        <View style={[s.levelBadge, { backgroundColor: LEVEL_COLORS[item.level] ?? '#8E8E93' }]}>
+          <Text style={s.levelBadgeText}>{item.level.toUpperCase()}</Text>
+        </View>
+        <Text style={s.detailTime}>{new Date(item.timestamp).toLocaleString()}</Text>
+      </>
+    )}
+    renderDetailBody={(item) => (
+      <ScrollView style={s.detailBody} contentContainerStyle={s.detailBodyContent}>
+        {item.data.map((d, index) => {
+          const formatted = typeof d === 'object' && d !== null ? fmt(d) : String(d);
+          return (
+            <CollapsibleSection
+              key={index}
+              title={typeof d === 'object' && d !== null ? `Arg ${index + 1} (object)` : `Arg ${index + 1}`}
+              initiallyExpanded={index === 0}
+            >
+              <View style={s.sectionWithCopy}>
+                <CopyButton text={formatted} label={`Console Arg ${index + 1}`} />
+                {typeof d === 'object' && d !== null ? (
+                  <JsonView data={d} maxHeight={250} />
+                ) : (
+                  <Text style={s.plainText} selectable>{String(d)}</Text>
+                )}
+              </View>
+            </CollapsibleSection>
+          );
+        })}
+      </ScrollView>
+    )}
+  />
+));
+
+const s = StyleSheet.create({
+  cardRow: { flexDirection: 'row', padding: 14, alignItems: 'flex-start' },
+  levelDot: {
+    width: 24, height: 24, borderRadius: 12,
+    alignItems: 'center', justifyContent: 'center',
+    marginRight: 12, marginTop: 1,
+  },
+  levelIcon: { color: '#FFF', fontSize: 11, fontWeight: '700' },
+  cardContent: { flex: 1 },
+  logMessage: { fontSize: 14, color: Colors.text, lineHeight: 20 },
+  time: { fontSize: 12, color: Colors.textSecondary, marginTop: 4 },
+  levelBadge: { paddingHorizontal: 10, paddingVertical: 4, borderRadius: 6 },
+  levelBadgeText: { color: '#FFF', fontSize: 12, fontWeight: '700' },
+  detailTime: { flex: 1, fontSize: 13, color: Colors.textSecondary, textAlign: 'right' },
+  detailBody: { flex: 1 },
+  detailBodyContent: { padding: 12 },
+  sectionWithCopy: { gap: 8 },
+  plainText: { fontFamily: 'Courier', fontSize: 13, color: Colors.text, lineHeight: 20 },
+});

package/src/components/DebugPanel.tsx

@@ -0,0 +1,215 @@
+import React, { useCallback, useEffect, useRef } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  PanResponder,
+  Pressable,
+  TouchableOpacity,
+  useWindowDimensions,
+} from 'react-native';
+import { Colors } from '../utils/colors';
+
+interface DebugPanelProps {
+  onClose: () => void;
+  onClearAll: () => void;
+  children: React.ReactNode;
+}
+
+export function DebugPanel({ onClose, onClearAll, children }: DebugPanelProps) {
+  const { height: screenHeight } = useWindowDimensions();
+  const panelTranslateY = useRef(new Animated.Value(screenHeight)).current;
+  const backdropOpacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    requestAnimationFrame(() => {
+      Animated.parallel([
+        Animated.spring(panelTranslateY, {
+          toValue: 0,
+          friction: 8,
+          tension: 65,
+          useNativeDriver: true,
+        }),
+        Animated.timing(backdropOpacity, {
+          toValue: 1,
+          duration: 250,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    });
+  }, [panelTranslateY, backdropOpacity]);
+
+  const closePanel = useCallback(() => {
+    Animated.parallel([
+      Animated.spring(panelTranslateY, {
+        toValue: screenHeight,
+        friction: 8,
+        tension: 65,
+        useNativeDriver: true,
+      }),
+      Animated.timing(backdropOpacity, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+    ]).start(() => onClose());
+  }, [panelTranslateY, backdropOpacity, onClose, screenHeight]);
+
+  const panelResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_, gs) => gs.dy > 5,
+      onPanResponderMove: (_, gs) => {
+        if (gs.dy > 0) {
+          panelTranslateY.setValue(gs.dy);
+          backdropOpacity.setValue(Math.max(0, 1 - gs.dy / 200));
+        }
+      },
+      onPanResponderRelease: (_, gs) => {
+        if (gs.dy > 100) {
+          closePanel();
+        } else {
+          Animated.spring(panelTranslateY, {
+            toValue: 0,
+            friction: 8,
+            tension: 50,
+            useNativeDriver: true,
+          }).start();
+          Animated.timing(backdropOpacity, {
+            toValue: 1,
+            duration: 200,
+            useNativeDriver: true,
+          }).start();
+        }
+      },
+    }),
+  ).current;
+
+  return (
+    <View style={styles.container}>
+      <Animated.View style={[styles.backdrop, { opacity: backdropOpacity }]}>
+        <Pressable style={styles.backdropPressable} onPress={closePanel} />
+      </Animated.View>
+      <Animated.View
+        style={[styles.panel, { transform: [{ translateY: panelTranslateY }] }]}
+      >
+        <View {...panelResponder.panHandlers}>
+          <View style={styles.dragHandle}>
+            <View style={styles.dragIndicator} />
+          </View>
+          <View style={styles.header}>
+            <Text style={styles.headerTitle}>Debug Toolkit</Text>
+            <View style={styles.headerButtons}>
+              <TouchableOpacity
+                onPress={() => {
+                  onClearAll();
+                  closePanel();
+                }}
+                style={styles.clearButton}
+                activeOpacity={0.6}
+              >
+                <Text style={styles.clearButtonText}>Clear</Text>
+              </TouchableOpacity>
+              <Pressable onPress={closePanel} style={styles.closeButton}>
+                <Text style={styles.closeButtonText}>✕</Text>
+              </Pressable>
+            </View>
+          </View>
+        </View>
+        <View style={styles.panelContent}>{children}</View>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    justifyContent: 'flex-end',
+  },
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0,0,0,0.35)',
+  },
+  backdropPressable: { flex: 1 },
+  panel: {
+    width: '100%',
+    height: '90%',
+    backgroundColor: Colors.background,
+    borderTopLeftRadius: 28,
+    borderTopRightRadius: 28,
+    overflow: 'hidden',
+    elevation: 24,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: -4 },
+    shadowOpacity: 0.08,
+    shadowRadius: 12,
+  },
+  dragHandle: {
+    width: '100%',
+    height: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: Colors.surface,
+  },
+  dragIndicator: {
+    width: 40,
+    height: 4,
+    borderRadius: 2,
+    backgroundColor: '#D1D1D6',
+  },
+  panelContent: { flex: 1 },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 20,
+    paddingTop: 6,
+    paddingBottom: 10,
+    backgroundColor: Colors.surface,
+  },
+  headerTitle: {
+    fontSize: 17,
+    fontWeight: '600',
+    color: Colors.text,
+  },
+  headerButtons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 12,
+  },
+  clearButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    borderRadius: 8,
+    backgroundColor: 'rgba(255,59,48,0.06)',
+  },
+  clearButtonText: {
+    color: Colors.error,
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  closeButton: {
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    backgroundColor: Colors.background,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeButtonText: {
+    fontSize: 16,
+    fontWeight: '400',
+    color: Colors.textSecondary,
+    lineHeight: 16,
+  },
+});

package/src/components/DebugView.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect } from 'react';
+import { DebugToolkitProvider } from '../core/DebugToolkitProvider';
+import { initializeDebugToolkit } from '../initialize';
+import type { FeatureConfigs } from '../initialize';
+import { useNavigationLogger } from '../hooks/useNavigationLogger';
+import type { EnvironmentConfig, NavigationContainerRef } from '../types';
+
+// --- Types ---
+
+export interface DebugViewProps {
+  children: React.ReactNode;
+  /**
+   * Enable/disable specific features. Omitted features default to enabled.
+   * Set to `false` to disable a feature.
+   */
+  features?: Partial<FeatureConfigs>;
+  /** Navigation container ref for route tracking. */
+  navigationRef?: React.RefObject<NavigationContainerRef | null>;
+  /** Environment configs for runtime host switching. */
+  environments?: EnvironmentConfig[];
+  /** Force enable/disable (default: `__DEV__`). */
+  enabled?: boolean;
+}
+
+// --- Inner component for navigation hook (satisfies rules of hooks) ---
+
+function NavigationLoggerInner({
+  navigationRef,
+}: {
+  navigationRef: React.RefObject<NavigationContainerRef | null>;
+}) {
+  useNavigationLogger(navigationRef);
+  return null;
+}
+
+// --- Main component ---
+
+export function DebugView({
+  children,
+  features,
+  navigationRef,
+  environments,
+  enabled,
+}: DebugViewProps) {
+  useEffect(() => {
+    // Build feature config: all enabled by default, user overrides take precedence
+    const resolvedFeatures: FeatureConfigs = {
+      network: true,
+      console: true,
+      zustand: true,
+      navigation: true,
+      track: true,
+      clipboard: true,
+      ...features,
+    };
+
+    // Apply environments prop
+    if (environments) {
+      resolvedFeatures.environment = environments;
+    }
+
+    // Initialize toolkit
+    const toolkit = initializeDebugToolkit({
+      features: resolvedFeatures,
+      enabled,
+    });
+
+    return () => {
+      toolkit.destroy();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <DebugToolkitProvider>
+      {navigationRef && <NavigationLoggerInner navigationRef={navigationRef} />}
+      {children}
+    </DebugToolkitProvider>
+  );
+}