react-native-debug-toolkit 0.6.3 → 2.0.0

package/src/components/ConsoleLogTab.tsx

@@ -0,0 +1,209 @@
+import React, { useState } from 'react';
+import { View, Text, FlatList, TouchableOpacity, StyleSheet, Animated, ScrollView } from 'react-native';
+import { Colors } from '../utils/constants';
+import { safeStringify } from '../utils/safeStringify';
+import { CollapsibleSection } from './shared/CollapsibleSection';
+import { JsonView } from './shared/JsonView';
+import { CopyButton } from './shared/CopyButton';
+import { fmt } from '../utils/copyToComputer';
+import { useSlideDetailAnimation } from '../hooks/useSlideDetailAnimation';
+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,
+}) => {
+  const [selected, setSelected] = useState<ConsoleLogEntry | null>(null);
+  const { detailTranslateX, listTranslateX, listOpacity } = useSlideDetailAnimation(selected);
+
+  const renderItem = ({ item }: { item: ConsoleLogEntry }) => (
+    <TouchableOpacity style={s.card} onPress={() => setSelected(item)} activeOpacity={0.6}>
+      <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>
+    </TouchableOpacity>
+  );
+
+  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 console logs</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.detailWrap, { transform: [{ translateX: detailTranslateX }] }]}>
+          <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.levelBadge, { backgroundColor: LEVEL_COLORS[selected.level] ?? '#8E8E93' }]}>
+              <Text style={s.levelBadgeText}>{selected.level.toUpperCase()}</Text>
+            </View>
+            <Text style={s.detailTime}>
+              {new Date(selected.timestamp).toLocaleString()}
+            </Text>
+          </View>
+          <ScrollView style={s.detailBody} contentContainerStyle={s.detailBodyContent}>
+            {selected.data.map((item, index) => {
+              const formatted = typeof item === 'object' && item !== null
+                ? fmt(item)
+                : String(item);
+              return (
+              <CollapsibleSection
+                key={index}
+                title={typeof item === 'object' && item !== null ? `Arg ${index + 1} (object)` : `Arg ${index + 1}`}
+                initiallyExpanded={index === 0}
+              >
+                <View style={s.sectionWithCopy}>
+                  <CopyButton text={formatted} label={`Console Arg ${index + 1}`} />
+                  {typeof item === 'object' && item !== null ? (
+                    <JsonView data={item} maxHeight={250} />
+                  ) : (
+                    <Text style={s.plainText} selectable>{String(item)}</Text>
+                  )}
+                </View>
+              </CollapsibleSection>
+              );
+            })}
+          </ScrollView>
+        </Animated.View>
+      )}
+    </View>
+  );
+});
+
+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' },
+  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 },
+
+  // Detail (in-panel navigation)
+  detailWrap: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: Colors.background,
+  },
+  detailHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 10,
+    backgroundColor: Colors.surface,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.border,
+    gap: 6,
+  },
+  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',
+  },
+  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/EnvironmentTab.tsx

@@ -0,0 +1,276 @@
+import React from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ScrollView,
+} from 'react-native';
+import { Colors } from '../utils/constants';
+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>> = ({
+  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',
+  },
+});