react-native-debug-toolkit 2.0.0 → 2.1.0

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>
+  );
+}

package/src/components/EnvironmentTab.tsx

@@ -6,7 +6,7 @@ import {
   StyleSheet,
   ScrollView,
 } from 'react-native';
-import { Colors } from '../utils/constants';
+import { Colors } from '../utils/colors';
 import type { DebugFeatureRenderProps, EnvironmentState } from '../types';
 import type { EnvironmentFeatureAPI } from '../features/EnvironmentFeature';
 
@@ -19,7 +19,7 @@ const DEFAULT_COLORS: Record<string, string> = {
   prod: '#FF3B30',
 };
 
-export const EnvironmentTab: React.FC<DebugFeatureRenderProps<EnvironmentState>> = ({
+export const EnvironmentTab: React.FC<DebugFeatureRenderProps<EnvironmentState>> = React.memo(({
   data,
   feature,
 }) => {
@@ -114,7 +114,7 @@ export const EnvironmentTab: React.FC<DebugFeatureRenderProps<EnvironmentState>>
       ) : null}
     </View>
   );
-};
+});
 
 const styles = StyleSheet.create({
   container: {

package/src/components/FeatureTabBar.tsx

@@ -0,0 +1,204 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  ScrollView,
+  TouchableOpacity,
+} from 'react-native';
+import { Colors } from '../utils/colors';
+
+export interface TabItem {
+  id: string;
+  label: string;
+}
+
+interface FeatureTabBarProps {
+  tabs: TabItem[];
+  activeIndex: number;
+  onSelectTab: (index: number) => void;
+}
+
+export function FeatureTabBar({ tabs, activeIndex, onSelectTab }: FeatureTabBarProps) {
+  const [underlineWidth, setUnderlineWidth] = useState(0);
+  const underlineTranslateX = useRef(new Animated.Value(0)).current;
+  const tabScrollViewRef = useRef<ScrollView>(null);
+  const tabLayouts = useRef<Array<{ x: number; width: number }>>([]);
+  const tabScrollOffset = useRef(0);
+  const tabViewportWidth = useRef(0);
+  const tabContentWidth = useRef(0);
+  const underlineInit = useRef(false);
+  const isSwitching = useRef(false);
+
+  const maxTabScroll = useCallback(
+    () => Math.max(0, tabContentWidth.current - tabViewportWidth.current),
+    [],
+  );
+  const clampScroll = useCallback(
+    (offset: number) => Math.min(Math.max(0, offset), maxTabScroll()),
+    [maxTabScroll],
+  );
+  const getTabScrollTarget = useCallback(
+    (index: number) => {
+      const layout = tabLayouts.current[index];
+      return layout ? clampScroll(layout.x - 60) : clampScroll(tabScrollOffset.current);
+    },
+    [clampScroll],
+  );
+
+  const animateUnderline = useCallback(
+    (index: number, scrollOffset?: number) => {
+      const layout = tabLayouts.current[index];
+      if (!layout) return;
+      const offsetX = clampScroll(scrollOffset ?? tabScrollOffset.current);
+      setUnderlineWidth(layout.width);
+      Animated.spring(underlineTranslateX, {
+        toValue: layout.x - offsetX,
+        friction: 7,
+        tension: 50,
+        useNativeDriver: true,
+      }).start();
+    },
+    [clampScroll, underlineTranslateX],
+  );
+
+  const syncUnderlineToActiveTab = useCallback(() => {
+    const layout = tabLayouts.current[activeIndex];
+    if (!layout) return;
+    const clamped = clampScroll(tabScrollOffset.current);
+    if (clamped !== tabScrollOffset.current) tabScrollOffset.current = clamped;
+    underlineTranslateX.setValue(layout.x - clamped);
+    setUnderlineWidth(layout.width);
+  }, [activeIndex, clampScroll, underlineTranslateX]);
+
+  const tryInit = useCallback(() => {
+    if (underlineInit.current || tabViewportWidth.current <= 0 || tabContentWidth.current <= 0)
+      return;
+    const layout = tabLayouts.current[activeIndex];
+    if (!layout) return;
+    const target = getTabScrollTarget(activeIndex);
+    tabScrollOffset.current = target;
+    tabScrollViewRef.current?.scrollTo({ x: target, animated: false });
+    underlineTranslateX.setValue(layout.x - target);
+    setUnderlineWidth(layout.width);
+    underlineInit.current = true;
+  }, [activeIndex, getTabScrollTarget, underlineTranslateX]);
+
+  const handleSelectTab = useCallback(
+    (index: number) => {
+      if (isSwitching.current || index === activeIndex) return;
+      isSwitching.current = true;
+
+      const layout = tabLayouts.current[index];
+      if (layout) {
+        const target = getTabScrollTarget(index);
+        tabScrollOffset.current = target;
+        tabScrollViewRef.current?.scrollTo({ x: target, animated: true });
+        animateUnderline(index, target);
+      }
+
+      onSelectTab(index);
+      setTimeout(() => {
+        isSwitching.current = false;
+      }, 350);
+    },
+    [activeIndex, animateUnderline, getTabScrollTarget, onSelectTab],
+  );
+
+  // React to external activeIndex changes (e.g. swipe-to-switch)
+  useEffect(() => {
+    if (!underlineInit.current) return;
+    const layout = tabLayouts.current[activeIndex];
+    if (!layout) return;
+    const target = getTabScrollTarget(activeIndex);
+    tabScrollOffset.current = target;
+    tabScrollViewRef.current?.scrollTo({ x: target, animated: true });
+    animateUnderline(activeIndex, target);
+  }, [activeIndex, animateUnderline, getTabScrollTarget]);
+
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        ref={tabScrollViewRef}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContent}
+        onLayout={(e) => {
+          tabViewportWidth.current = e.nativeEvent.layout.width;
+          tryInit();
+        }}
+        onContentSizeChange={(width) => {
+          tabContentWidth.current = width;
+          tryInit();
+        }}
+        onScroll={(e) => {
+          tabScrollOffset.current = clampScroll(e.nativeEvent.contentOffset.x);
+          if (!isSwitching.current) syncUnderlineToActiveTab();
+        }}
+        scrollEventThrottle={16}
+      >
+        {tabs.map((tab, index) => (
+          <TouchableOpacity
+            key={tab.id}
+            style={styles.tab}
+            onPress={() => handleSelectTab(index)}
+            activeOpacity={0.7}
+            onLayout={(e) => {
+              const { x, width } = e.nativeEvent.layout;
+              tabLayouts.current[index] = { x, width };
+              if (index === activeIndex) tryInit();
+            }}
+          >
+            <Text
+              style={[styles.tabText, activeIndex === index && styles.activeTabText]}
+              numberOfLines={1}
+            >
+              {tab.label}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+      <Animated.View
+        style={[
+          styles.underline,
+          { width: underlineWidth, transform: [{ translateX: underlineTranslateX }] },
+        ]}
+      />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: Colors.surface,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.border,
+  },
+  scrollContent: {
+    paddingHorizontal: 20,
+    flexDirection: 'row',
+  },
+  tab: {
+    paddingVertical: 10,
+    paddingHorizontal: 14,
+    marginRight: 8,
+  },
+  tabText: {
+    fontSize: 14,
+    fontWeight: '500',
+    color: Colors.textLight,
+  },
+  activeTabText: {
+    color: Colors.primary,
+    fontWeight: '600',
+  },
+  underline: {
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    height: 2.5,
+    borderRadius: 1.25,
+    backgroundColor: Colors.primary,
+  },
+});

package/src/components/FloatIcon.tsx

@@ -0,0 +1,171 @@
+import React, { useRef } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  PanResponder,
+  Pressable,
+  useWindowDimensions,
+} from 'react-native';
+import { Colors } from '../utils/colors';
+import { ICON_SIZE } from '../utils/layout';
+
+interface FloatIconProps {
+  visible: boolean;
+  onPress: () => void;
+  badge: { label: string; color: string } | null;
+}
+
+export function FloatIcon({ visible, onPress, badge }: FloatIconProps) {
+  const { width: screenWidth, height: screenHeight } = useWindowDimensions();
+  const initialX = screenWidth - ICON_SIZE - 16;
+  const initialY = screenHeight / 2 - ICON_SIZE / 2;
+
+  const pan = useRef(
+    new Animated.ValueXY({ x: initialX, y: initialY }),
+  ).current;
+  const scale = useRef(new Animated.Value(1)).current;
+  const lastPosition = useRef({ x: initialX, y: initialY });
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: () => true,
+      onPanResponderGrant: () => {
+        Animated.spring(scale, {
+          toValue: 0.9,
+          friction: 5,
+          useNativeDriver: true,
+        }).start();
+      },
+      onPanResponderMove: (_: unknown, gs: { dx: number; dy: number }) => {
+        const x = Math.max(
+          0,
+          Math.min(lastPosition.current.x + gs.dx, screenWidth - ICON_SIZE),
+        );
+        const y = Math.max(
+          0,
+          Math.min(lastPosition.current.y + gs.dy, screenHeight - ICON_SIZE),
+        );
+        pan.setValue({ x, y });
+      },
+      onPanResponderRelease: (_: unknown, gs: { dx: number; dy: number }) => {
+        if (Math.abs(gs.dx) < 5 && Math.abs(gs.dy) < 5) {
+          Animated.spring(scale, { toValue: 1, friction: 5, useNativeDriver: true }).start();
+          onPress();
+          return;
+        }
+        Animated.spring(scale, { toValue: 1, friction: 5, useNativeDriver: true }).start();
+        lastPosition.current = {
+          x: Math.max(
+            0,
+            Math.min(lastPosition.current.x + gs.dx, screenWidth - ICON_SIZE),
+          ),
+          y: Math.max(
+            0,
+            Math.min(lastPosition.current.y + gs.dy, screenHeight - ICON_SIZE),
+          ),
+        };
+      },
+      onPanResponderTerminate: (_: unknown, gs: { dx: number; dy: number }) => {
+        lastPosition.current = {
+          x: Math.max(
+            0,
+            Math.min(lastPosition.current.x + gs.dx, screenWidth - ICON_SIZE),
+          ),
+          y: Math.max(
+            0,
+            Math.min(lastPosition.current.y + gs.dy, screenHeight - ICON_SIZE),
+          ),
+        };
+      },
+    }),
+  ).current;
+
+  return (
+    <Animated.View
+      pointerEvents={visible ? 'auto' : 'none'}
+      style={[
+        styles.root,
+        {
+          transform: [{ translateX: pan.x }, { translateY: pan.y }, { scale }],
+          opacity: visible ? 1 : 0,
+        },
+      ]}
+      {...panResponder.panHandlers}
+    >
+      <Pressable onPress={onPress} style={styles.inner}>
+        <View style={styles.iconGrid}>
+          <View style={styles.iconRow}>
+            <View style={[styles.iconCell, { backgroundColor: Colors.primary }]} />
+            <View style={[styles.iconCell, { backgroundColor: Colors.success }]} />
+          </View>
+          <View style={styles.iconRow}>
+            <View style={[styles.iconCell, { backgroundColor: Colors.warning }]} />
+            <View style={[styles.iconCell, { backgroundColor: Colors.purple }]} />
+          </View>
+        </View>
+        {badge && (
+          <View style={[styles.badge, { backgroundColor: badge.color }]}>
+            <Text style={styles.badgeText}>{badge.label}</Text>
+          </View>
+        )}
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    position: 'absolute',
+    width: ICON_SIZE,
+    height: ICON_SIZE,
+    borderRadius: ICON_SIZE / 2,
+    backgroundColor: '#FFFFFF',
+    elevation: 6,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.12,
+    shadowRadius: 8,
+  },
+  inner: {
+    width: '100%',
+    height: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  iconGrid: {
+    width: 22,
+    height: 22,
+    justifyContent: 'space-between',
+  },
+  iconRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  iconCell: {
+    width: 8,
+    height: 8,
+    borderRadius: 2.5,
+  },
+  badge: {
+    position: 'absolute',
+    top: -4,
+    right: -4,
+    minWidth: 20,
+    height: 18,
+    borderRadius: 9,
+    paddingHorizontal: 5,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 2,
+    borderColor: '#FFF',
+    elevation: 4,
+  },
+  badgeText: {
+    color: '#FFF',
+    fontSize: 9,
+    fontWeight: '700',
+  },
+});