react-native-debug-toolkit 2.0.0 → 2.1.0

package/src/components/shared/LogListScreen.tsx

@@ -0,0 +1,164 @@
+import React, { useMemo, useState } from 'react';
+import {
+  View,
+  Text,
+  FlatList,
+  TouchableOpacity,
+  StyleSheet,
+  Animated,
+} from 'react-native';
+import { Colors } from '../../utils/colors';
+import { useSlideDetailAnimation } from '../../hooks/useSlideDetailAnimation';
+
+interface LogListItem {
+  id: string;
+}
+
+interface LogListScreenProps<T extends LogListItem> {
+  data: T[];
+  renderRow: (item: T) => React.ReactElement;
+  renderListHeader?: () => React.ReactElement;
+  renderDetailHeader?: (item: T) => React.ReactNode;
+  renderDetailBody: (item: T) => React.ReactElement;
+  emptyText: string;
+  reversed?: boolean;
+}
+
+/**
+ * Shared list→detail screen with slide animation.
+ * Handles: selected state, FlatList, empty state, back button, push navigation.
+ * Each tab provides renderRow, renderDetailBody, and optional renderDetailHeader.
+ */
+export function LogListScreen<T extends LogListItem>({
+  data,
+  renderRow,
+  renderListHeader,
+  renderDetailHeader,
+  renderDetailBody,
+  emptyText,
+  reversed = true,
+}: LogListScreenProps<T>) {
+  const [selected, setSelected] = useState<T | null>(null);
+  const { detailTranslateX, listTranslateX, listOpacity } = useSlideDetailAnimation(selected);
+
+  const displayData = useMemo(
+    () => (reversed ? [...data].reverse() : data),
+    [data, reversed],
+  );
+
+  return (
+    <View style={styles.container}>
+      {/* List */}
+      <Animated.View
+        style={[
+          styles.listWrap,
+          selected
+            ? { opacity: listOpacity, transform: [{ translateX: listTranslateX }] }
+            : null,
+        ]}
+      >
+        {renderListHeader?.()}
+        {displayData.length === 0 ? (
+          <View style={styles.emptyContainer}>
+            <Text style={styles.emptyIcon}>~</Text>
+            <Text style={styles.empty}>{emptyText}</Text>
+          </View>
+        ) : (
+          <FlatList
+            data={displayData}
+            renderItem={({ item }) => (
+              <TouchableOpacity
+                style={styles.card}
+                onPress={() => setSelected(item)}
+                activeOpacity={0.6}
+              >
+                {renderRow(item)}
+              </TouchableOpacity>
+            )}
+            keyExtractor={(item) => item.id}
+            contentContainerStyle={styles.listContent}
+            initialNumToRender={20}
+            maxToRenderPerBatch={10}
+            windowSize={5}
+            removeClippedSubviews={true}
+          />
+        )}
+      </Animated.View>
+
+      {/* Detail */}
+      {selected && (
+        <Animated.View
+          style={[styles.detailOverlay, { transform: [{ translateX: detailTranslateX }] }]}
+        >
+          <View style={styles.detailWrap}>
+            <View style={styles.detailHeader}>
+              <TouchableOpacity
+                onPress={() => setSelected(null)}
+                style={styles.backBtn}
+                activeOpacity={0.6}
+              >
+                <Text style={styles.backIcon}>‹</Text>
+                <Text style={styles.backText}>Back</Text>
+              </TouchableOpacity>
+              {renderDetailHeader?.(selected)}
+            </View>
+            {renderDetailBody(selected)}
+          </View>
+        </Animated.View>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: Colors.background },
+  listWrap: { position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 },
+  listContent: { padding: 12 },
+  emptyContainer: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  emptyIcon: { fontSize: 40, color: Colors.textLight, marginBottom: 4 },
+  empty: { textAlign: 'center', color: Colors.textLight, fontSize: 14 },
+  card: {
+    backgroundColor: Colors.surface,
+    borderRadius: 12,
+    marginBottom: 8,
+    overflow: 'hidden',
+  },
+  detailOverlay: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: Colors.background,
+  },
+  detailWrap: { flex: 1, backgroundColor: Colors.background },
+  detailHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 8,
+    paddingVertical: 10,
+    backgroundColor: Colors.surface,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    borderBottomColor: Colors.border,
+    gap: 8,
+  },
+  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',
+  },
+});

package/src/core/DebugToolkit.tsx

@@ -1,174 +1,150 @@
-import type { DebugFeature } from '../types';
-
-export class DebugToolkit {
-  private static instance: DebugToolkit | null = null;
-  private _features: DebugFeature[] = [];
-  private _enabled: boolean;
-  private _panelVisible: boolean = false;
-  private renderCallback: (() => void) | null = null;
-
-  private constructor(enabled = true) {
-    this._enabled = enabled;
-  }
-
-  static getInstance(enabled = true): DebugToolkit {
-    if (!DebugToolkit.instance) {
-      DebugToolkit.instance = new DebugToolkit(enabled);
-    } else {
-      DebugToolkit.instance._enabled = enabled;
-    }
-    return DebugToolkit.instance;
-  }
+import type { AnyDebugFeature } from '../types';
 
-  get features(): DebugFeature[] {
-    return [...this._features];
-  }
+type Listener = () => void;
 
-  get enabled(): boolean {
-    return this._enabled;
-  }
+const listeners = new Set<Listener>();
+let _features: AnyDebugFeature[] = [];
+let _panelVisible = false;
+let _enabled = true;
 
-  get panelVisible(): boolean {
-    return this._panelVisible;
-  }
-
-  registerRenderCallback(cb: () => void): void {
-    if (this.renderCallback) {
-      console.warn(
-        '[DebugToolkit] A render callback is already registered. Overwriting. ' +
-          'Make sure only one <DebugToolkitProvider> is mounted at a time.',
-      );
-    }
-    this.renderCallback = cb;
-  }
+function notify(): void {
+  listeners.forEach((l) => l());
+}
 
-  unregisterRenderCallback(): void {
-    this.renderCallback = null;
-  }
+function setupFeature(feature: AnyDebugFeature): void {
+  feature.setup?.();
+}
 
-  setEnabled(enabled: boolean): void {
-    if (this._enabled === enabled) {
-      return;
-    }
+function cleanupFeature(feature: AnyDebugFeature): void {
+  feature.cleanup?.();
+}
 
-    this._enabled = enabled;
+export const DebugToolkit = {
+  subscribe(listener: Listener): () => void {
+    listeners.add(listener);
+    return () => {
+      listeners.delete(listener);
+    };
+  },
 
+  get features(): AnyDebugFeature[] {
+    return [..._features];
+  },
+
+  get enabled(): boolean {
+    return _enabled;
+  },
+
+  get panelVisible(): boolean {
+    return _panelVisible;
+  },
+
+  setEnabled(enabled: boolean): void {
+    if (_enabled === enabled) return;
+    _enabled = enabled;
     if (!enabled) {
-      this.hidePanel();
-      this._features.forEach((feature) => feature.cleanup?.());
-      this._features = [];
+      _panelVisible = false;
+      _features.forEach(cleanupFeature);
+      _features = [];
     }
-  }
+    notify();
+  },
+
+  replaceFeatures(features: AnyDebugFeature[]): void {
+    if (!_enabled) return;
+    const next = features.filter(
+      (f, i, arr) =>
+        f && typeof f.name === 'string' && arr.findIndex((item) => item.name === f.name) === i,
+    );
+    const prevMap = new Map(_features.map((f) => [f.name, f]));
+    const nextMap = new Map(next.map((f) => [f.name, f]));
+
+    _features.forEach((f) => {
+      if (!nextMap.get(f.name) || nextMap.get(f.name) !== f) cleanupFeature(f);
+    });
+    next.forEach((f) => {
+      if (!prevMap.get(f.name) || prevMap.get(f.name) !== f) setupFeature(f);
+    });
 
-  private updatePanel(): void {
-    this.renderCallback?.();
-  }
+    _features = next;
+    notify();
+  },
 
-  addFeature(feature: DebugFeature): void {
-    if (!this._enabled) {
+  addFeature(feature: AnyDebugFeature): void {
+    if (!_enabled || !feature || typeof feature.name !== 'string') {
       return;
     }
-    if (feature && typeof feature.name === 'string') {
-      const existingIndex = this._features.findIndex((item) => item.name === feature.name);
-
-      if (existingIndex >= 0) {
-        const currentFeature = this._features[existingIndex]!;
-        if (currentFeature === feature) {
-          return;
-        }
-
-        currentFeature.cleanup?.();
-        this._features = this._features.map((item, index) =>
-          index === existingIndex ? feature : item,
-        );
-      } else {
-        this._features = [...this._features, feature];
+
+    const existingIndex = _features.findIndex((f) => f.name === feature.name);
+    if (existingIndex >= 0) {
+      const existing = _features[existingIndex]!;
+      if (existing === feature) {
+        return;
       }
 
-      feature.setup?.();
-      this.updatePanel();
+      cleanupFeature(existing);
+      setupFeature(feature);
+      _features = [
+        ..._features.slice(0, existingIndex),
+        feature,
+        ..._features.slice(existingIndex + 1),
+      ];
+      notify();
+      return;
     }
-  }
+
+    setupFeature(feature);
+    _features = [..._features, feature];
+    notify();
+  },
 
   removeFeature(name: string): void {
-    const idx = this._features.findIndex((f) => f.name === name);
-    if (idx >= 0) {
-      this._features[idx]!.cleanup?.();
-      this._features = this._features.filter((feature) => feature.name !== name);
-      this.updatePanel();
+    if (!_enabled) {
+      return;
     }
-  }
 
-  replaceFeatures(features: DebugFeature[]): void {
-    if (!this._enabled) {
+    const feature = _features.find((f) => f.name === name);
+    if (!feature) {
       return;
     }
 
-    const nextFeatures = features.filter(
-      (feature, index, array) =>
-        feature &&
-        typeof feature.name === 'string' &&
-        array.findIndex((item) => item.name === feature.name) === index,
-    );
-    const previousByName = new Map(this._features.map((feature) => [feature.name, feature]));
-    const nextByName = new Map(nextFeatures.map((feature) => [feature.name, feature]));
-
-    this._features.forEach((feature) => {
-      const nextFeature = nextByName.get(feature.name);
-      if (!nextFeature || nextFeature !== feature) {
-        feature.cleanup?.();
-      }
-    });
-
-    nextFeatures.forEach((feature) => {
-      const currentFeature = previousByName.get(feature.name);
-      if (!currentFeature || currentFeature !== feature) {
-        feature.setup?.();
-      }
-    });
-
-    this._features = nextFeatures;
-    this.updatePanel();
-  }
+    cleanupFeature(feature);
+    _features = _features.filter((f) => f.name !== name);
+    if (_features.length === 0) {
+      _panelVisible = false;
+    }
+    notify();
+  },
 
   reset(): void {
-    this.hidePanel();
-    this._features.forEach((feature) => feature.cleanup?.());
-    this._features = [];
-  }
+    _panelVisible = false;
+    _features.forEach(cleanupFeature);
+    _features = [];
+    notify();
+  },
 
   hasFeatures(): boolean {
-    return this._features.length > 0;
-  }
+    return _features.length > 0;
+  },
 
   showPanel(): void {
-    if (!this._enabled) {
-      return;
-    }
-    this._panelVisible = true;
-    this.updatePanel();
-  }
+    if (!_enabled) return;
+    _panelVisible = true;
+    notify();
+  },
 
   hidePanel(): void {
-    this._panelVisible = false;
-    this.updatePanel();
-  }
+    _panelVisible = false;
+    notify();
+  },
 
   clearAll(): void {
-    this._features.forEach((f) => {
-      if (f.clear) {
-        f.clear();
-      } else {
-        f.cleanup?.();
-        f.setup?.();
-      }
-    });
-    this.updatePanel();
-  }
+    _features.forEach((f) => f.clear?.());
+    notify();
+  },
 
   destroy(): void {
     this.reset();
-    this.unregisterRenderCallback();
-    DebugToolkit.instance = null;
-  }
-}
+    listeners.clear();
+  },
+};

package/src/core/DebugToolkitProvider.tsx

@@ -1,23 +1,20 @@
-import React, { createContext, useContext, useEffect, useState, type ReactNode } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from 'react';
 import { DebugToolkit } from './DebugToolkit';
 import { FloatPanelView } from '../components/FloatPanelView';
-import type { DebugFeature } from '../types';
+import type { AnyDebugFeature } from '../types';
 
 interface ToolkitContextValue {
-  features: DebugFeature[];
+  features: AnyDebugFeature[];
   showPanel: () => void;
   hidePanel: () => void;
-  addFeature: (feature: DebugFeature) => void;
-  removeFeature: (name: string) => void;
   clearAll: () => void;
-  destroy: () => void;
 }
 
 const ToolkitContext = createContext<ToolkitContextValue | null>(null);
 
 interface ProviderState {
   panelVisible: boolean;
-  features: DebugFeature[];
+  features: AnyDebugFeature[];
 }
 
 interface DebugToolkitProviderProps {
@@ -25,43 +22,41 @@ interface DebugToolkitProviderProps {
 }
 
 export function DebugToolkitProvider({ children }: DebugToolkitProviderProps) {
-  const [state, setState] = useState<ProviderState>(() => {
-    const toolkit = DebugToolkit.getInstance();
-    return {
-      panelVisible: toolkit.panelVisible,
-      features: toolkit.features,
-    };
-  });
+  const [state, setState] = useState<ProviderState>(() => ({
+    panelVisible: DebugToolkit.panelVisible,
+    features: DebugToolkit.features,
+  }));
 
   useEffect(() => {
-    const toolkit = DebugToolkit.getInstance();
+    // Sync current state — initializeDebugToolkit() may have been called
+    // in a child useEffect that runs before this parent effect subscribes.
+    setState({
+      panelVisible: DebugToolkit.panelVisible,
+      features: DebugToolkit.features,
+    });
 
-    const syncState = () => {
+    const unsubscribe = DebugToolkit.subscribe(() => {
       setState({
-        panelVisible: toolkit.panelVisible,
-        features: toolkit.features,
+        panelVisible: DebugToolkit.panelVisible,
+        features: DebugToolkit.features,
       });
-    };
-
-    toolkit.registerRenderCallback(syncState);
-    syncState();
-
-    return () => {
-      toolkit.unregisterRenderCallback();
-    };
+    });
+    return unsubscribe;
   }, []);
 
-  const toolkit = DebugToolkit.getInstance();
+  const showPanel = useCallback(() => { DebugToolkit.showPanel(); }, []);
+  const hidePanel = useCallback(() => { DebugToolkit.hidePanel(); }, []);
+  const clearAll = useCallback(() => { DebugToolkit.clearAll(); }, []);
 
-  const contextValue: ToolkitContextValue = {
-    features: state.features,
-    showPanel: toolkit.showPanel.bind(toolkit),
-    hidePanel: toolkit.hidePanel.bind(toolkit),
-    addFeature: toolkit.addFeature.bind(toolkit),
-    removeFeature: toolkit.removeFeature.bind(toolkit),
-    clearAll: toolkit.clearAll.bind(toolkit),
-    destroy: toolkit.destroy.bind(toolkit),
-  };
+  const contextValue = useMemo<ToolkitContextValue>(
+    () => ({
+      features: state.features,
+      showPanel,
+      hidePanel,
+      clearAll,
+    }),
+    [state.features, showPanel, hidePanel, clearAll],
+  );
 
   return (
     <ToolkitContext.Provider value={contextValue}>
@@ -69,8 +64,7 @@ export function DebugToolkitProvider({ children }: DebugToolkitProviderProps) {
       {state.panelVisible && (
         <FloatPanelView
           features={state.features}
-          onClose={() => toolkit.hidePanel()}
-          onClearAll={() => toolkit.clearAll()}
+          onClearAll={() => DebugToolkit.clearAll()}
         />
       )}
     </ToolkitContext.Provider>

package/src/features/ClipboardFeature.ts

@@ -1,11 +1,15 @@
 import { ClipboardTab } from '../components/ClipboardTab';
 import type { DebugFeature } from '../types';
 
+/**
+ * Clipboard feature — all logic lives in ClipboardTab.
+ * Data flow is user-driven (TextInput), not event-based.
+ */
 export const createClipboardFeature = (): DebugFeature<void> => ({
   name: 'clipboard',
   label: 'Clipboard',
   renderContent: ClipboardTab,
-  setup: () => {},
+  setup() {},
   getData: () => [],
-  cleanup: () => {},
+  cleanup() {},
 });