react-native-debug-toolkit 0.6.4 → 2.1.0

package/src/components/EnvironmentTab.tsx

@@ -0,0 +1,276 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+} from 'react-native';
+import { Colors } from '../utils/colors';
+import type { DebugFeatureRenderProps, EnvironmentState } from '../types';
+import type { EnvironmentFeatureAPI } from '../features/EnvironmentFeature';
+
+const DEFAULT_COLORS: Record<string, string> = {
+  dev: '#34C759',
+  development: '#34C759',
+  staging: '#FF9500',
+  stage: '#FF9500',
+  production: '#FF3B30',
+  prod: '#FF3B30',
+};
+
+export const EnvironmentTab: React.FC<DebugFeatureRenderProps<EnvironmentState>> = React.memo(({
+  data,
+  feature,
+}) => {
+  const state = data[0];
+  if (!state || state.environments.length === 0) {
+    return (
+      <View style={styles.container}>
+        <View style={styles.emptyContainer}>
+          <Text style={styles.emptyIcon}>⚙</Text>
+          <Text style={styles.emptyTitle}>No Environments</Text>
+          <Text style={styles.emptyDesc}>
+            Call{'\n'}
+            <Text style={styles.code}>registerEnvironments([...])</Text>{'\n'}
+            to configure environments.
+          </Text>
+        </View>
+      </View>
+    );
+  }
+
+  const { environments, currentEnvironmentId } = state;
+  const envFeature = feature as unknown as EnvironmentFeatureAPI;
+
+  const handleSelect = (envId: string) => {
+    const nextId = currentEnvironmentId === envId ? null : envId;
+    envFeature.switchEnvironment?.(nextId);
+  };
+
+  const activeEnv = environments.find((e) => e.id === currentEnvironmentId);
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.headerSection}>
+        <Text style={styles.sectionTitle}>Switch Environment</Text>
+        <Text style={styles.sectionDesc}>
+          Rewrite API host in outgoing requests. Only registered hosts are affected.
+        </Text>
+      </View>
+
+      <ScrollView style={styles.list} contentContainerStyle={styles.listContent}>
+        <View style={styles.groupedCard}>
+          {environments.map((env, index) => {
+            const isActive = currentEnvironmentId === env.id;
+            const color = env.color || DEFAULT_COLORS[env.id.toLowerCase()] || Colors.primary;
+
+            return (
+              <TouchableOpacity
+                key={env.id}
+                style={[
+                  styles.envItem,
+                  isActive && styles.envItemActive,
+                  index < environments.length - 1 && styles.envItemSeparator,
+                ]}
+                onPress={() => handleSelect(env.id)}
+                activeOpacity={0.5}
+              >
+                <View style={styles.envRow}>
+                  <View style={[styles.colorDot, { backgroundColor: color }]} />
+                  <View style={styles.envInfo}>
+                    <Text style={styles.envLabel}>{env.label}</Text>
+                    <Text style={styles.envHost} numberOfLines={1}>
+                      {env.host}
+                    </Text>
+                  </View>
+                  {isActive && (
+                    <Text style={styles.checkmark}>✓</Text>
+                  )}
+                </View>
+              </TouchableOpacity>
+            );
+          })}
+        </View>
+      </ScrollView>
+
+      {activeEnv ? (
+        <View style={styles.footer}>
+          <View style={styles.footerInfo}>
+            <View style={styles.footerActiveIndicator}>
+              <View style={[styles.footerDot, { backgroundColor: activeEnv.color || DEFAULT_COLORS[activeEnv.id.toLowerCase()] || Colors.primary }]} />
+              <Text style={styles.footerLabel}>Active</Text>
+            </View>
+            <Text style={styles.footerValue}>{activeEnv.label}</Text>
+          </View>
+          <TouchableOpacity
+            style={styles.resetButton}
+            onPress={() => envFeature.switchEnvironment?.(null)}
+            activeOpacity={0.7}
+          >
+            <Text style={styles.resetButtonText}>Reset</Text>
+          </TouchableOpacity>
+        </View>
+      ) : null}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: Colors.background,
+  },
+
+  // Empty state
+  emptyContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 30,
+  },
+  emptyIcon: {
+    fontSize: 36,
+    color: Colors.textLight,
+    marginBottom: 8,
+  },
+  emptyTitle: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: Colors.text,
+    marginBottom: 8,
+  },
+  emptyDesc: {
+    fontSize: 14,
+    color: Colors.textSecondary,
+    textAlign: 'center',
+    lineHeight: 22,
+  },
+  code: {
+    fontFamily: 'monospace',
+    fontWeight: '600',
+    color: Colors.primary,
+  },
+
+  // Header
+  headerSection: {
+    paddingHorizontal: 16,
+    paddingTop: 20,
+    paddingBottom: 14,
+  },
+  sectionTitle: {
+    fontSize: 13,
+    fontWeight: '600',
+    color: Colors.textSecondary,
+    textTransform: 'uppercase',
+    marginBottom: 6,
+  },
+  sectionDesc: {
+    fontSize: 14,
+    color: Colors.textSecondary,
+    lineHeight: 20,
+  },
+
+  // Grouped list (iOS Settings style)
+  list: {
+    flex: 1,
+  },
+  listContent: {
+    paddingHorizontal: 16,
+    paddingBottom: 16,
+  },
+  groupedCard: {
+    backgroundColor: Colors.surface,
+    borderRadius: 12,
+    overflow: 'hidden',
+  },
+  envItem: {
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+  },
+  envItemActive: {
+    backgroundColor: 'rgba(0,122,255,0.03)',
+  },
+  envItemSeparator: {
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.border,
+    marginLeft: 48,
+  },
+  envRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  colorDot: {
+    width: 10,
+    height: 10,
+    borderRadius: 5,
+    marginRight: 14,
+  },
+  envInfo: {
+    flex: 1,
+  },
+  envLabel: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: Colors.text,
+  },
+  envHost: {
+    fontSize: 13,
+    color: Colors.textSecondary,
+    marginTop: 2,
+  },
+  checkmark: {
+    fontSize: 18,
+    fontWeight: '600',
+    color: Colors.primary,
+    marginLeft: 8,
+  },
+
+  // Footer
+  footer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 14,
+    backgroundColor: Colors.surface,
+    borderTopWidth: StyleSheet.hairlineWidth,
+    borderTopColor: Colors.border,
+  },
+  footerInfo: {
+    flex: 1,
+  },
+  footerActiveIndicator: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    marginBottom: 2,
+  },
+  footerDot: {
+    width: 8,
+    height: 8,
+    borderRadius: 4,
+  },
+  footerLabel: {
+    fontSize: 11,
+    color: Colors.textSecondary,
+    fontWeight: '600',
+    textTransform: 'uppercase',
+  },
+  footerValue: {
+    fontSize: 17,
+    fontWeight: '600',
+    color: Colors.text,
+  },
+  resetButton: {
+    backgroundColor: 'rgba(255,59,48,0.08)',
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    borderRadius: 10,
+  },
+  resetButtonText: {
+    color: Colors.error,
+    fontSize: 15,
+    fontWeight: '600',
+  },
+});

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