@zizwar/react-native-debug-console 1.0.0

package/src/DebugButton.tsx

@@ -0,0 +1,84 @@
+/**
+ * React Native Debug Console - Floating Button
+ * A floating action button that shows error count and toggles the debug console
+ */
+
+import React from 'react';
+import {
+  TouchableOpacity,
+  View,
+  Text,
+  StyleSheet,
+  Platform,
+} from 'react-native';
+import { useDebugConsole } from './DebugProvider';
+import { DebugIcon } from './Icons';
+
+export const DebugButton: React.FC = () => {
+  const { toggleVisibility, logs, config } = useDebugConsole();
+
+  if (!config.enabled) return null;
+
+  const errorCount = logs.filter(l => l.type === 'error').length;
+  const position = config.buttonPosition;
+  const colors = config.colors;
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.floatingButton,
+        { backgroundColor: colors.buttonBackground },
+        position.bottom !== undefined && { bottom: position.bottom },
+        position.top !== undefined && { top: position.top },
+        position.right !== undefined && { right: position.right },
+        position.left !== undefined && { left: position.left },
+      ]}
+      onPress={toggleVisibility}
+      activeOpacity={0.8}
+    >
+      <DebugIcon name="bug" size={20} color={colors.buttonIcon} />
+      {errorCount > 0 && (
+        <View style={styles.errorBadge}>
+          <Text style={[styles.errorBadgeText, { color: colors.buttonBackground }]}>
+            {errorCount > 9 ? '9+' : errorCount}
+          </Text>
+        </View>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  floatingButton: {
+    position: 'absolute',
+    width: 50,
+    height: 50,
+    borderRadius: 25,
+    justifyContent: 'center',
+    alignItems: 'center',
+    elevation: 5,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.3,
+    shadowRadius: 4,
+    zIndex: 9999,
+  },
+  errorBadge: {
+    position: 'absolute',
+    top: -4,
+    right: -4,
+    backgroundColor: '#fff',
+    borderRadius: 10,
+    minWidth: 20,
+    height: 20,
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingHorizontal: 4,
+  },
+  errorBadgeText: {
+    fontSize: 11,
+    fontWeight: 'bold',
+  },
+});
+
+export default DebugButton;

package/src/DebugConsole.tsx

@@ -0,0 +1,112 @@
+/**
+ * React Native Debug Console - Main Component
+ * All-in-one wrapper that provides the debug console functionality
+ */
+
+import React, { ReactNode } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { DebugProvider } from './DebugProvider';
+import { DebugOverlay } from './DebugOverlay';
+import { DebugButton } from './DebugButton';
+import { DebugConsoleConfig } from './types';
+
+interface DebugConsoleProps {
+  children: ReactNode;
+  /** Configuration options */
+  config?: DebugConsoleConfig;
+  /** Show the floating button (default: true) */
+  showButton?: boolean;
+  /** Custom floating button component */
+  customButton?: React.ComponentType;
+  /** Custom overlay component */
+  customOverlay?: React.ComponentType;
+}
+
+/**
+ * DebugConsole - Main wrapper component
+ *
+ * Wrap your app with this component to enable debug console functionality.
+ *
+ * @example
+ * ```tsx
+ * import { DebugConsole } from 'react-native-debug-console';
+ *
+ * export default function App() {
+ *   return (
+ *     <DebugConsole
+ *       config={{
+ *         enabled: process.env.EXPO_PUBLIC_DEBUG === 'true',
+ *         appName: 'MyApp',
+ *       }}
+ *     >
+ *       <YourApp />
+ *     </DebugConsole>
+ *   );
+ * }
+ * ```
+ */
+export const DebugConsole: React.FC<DebugConsoleProps> = ({
+  children,
+  config,
+  showButton = true,
+  customButton: CustomButton,
+  customOverlay: CustomOverlay,
+}) => {
+  // If disabled, just render children without any debug UI
+  if (config?.enabled === false) {
+    return <>{children}</>;
+  }
+
+  const ButtonComponent = CustomButton || DebugButton;
+  const OverlayComponent = CustomOverlay || DebugOverlay;
+
+  return (
+    <DebugProvider config={config}>
+      <View style={styles.container}>
+        {children}
+        {showButton && <ButtonComponent />}
+        <OverlayComponent />
+      </View>
+    </DebugProvider>
+  );
+};
+
+/**
+ * withDebugConsole - HOC to wrap any component with debug console
+ *
+ * @example
+ * ```tsx
+ * import { withDebugConsole } from 'react-native-debug-console';
+ *
+ * const App = () => <YourApp />;
+ *
+ * export default withDebugConsole(App, {
+ *   enabled: __DEV__,
+ *   appName: 'MyApp',
+ * });
+ * ```
+ */
+export function withDebugConsole<P extends object>(
+  WrappedComponent: React.ComponentType<P>,
+  config?: DebugConsoleConfig
+) {
+  const WithDebugConsole: React.FC<P> = (props) => {
+    return (
+      <DebugConsole config={config}>
+        <WrappedComponent {...props} />
+      </DebugConsole>
+    );
+  };
+
+  WithDebugConsole.displayName = `WithDebugConsole(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+
+  return WithDebugConsole;
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});
+
+export default DebugConsole;

package/src/DebugOverlay.tsx

@@ -0,0 +1,310 @@
+/**
+ * React Native Debug Console - Overlay
+ * Full-screen modal displaying captured logs
+ */
+
+import React from 'react';
+import {
+  View,
+  Text,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+  Modal,
+  SafeAreaView,
+  Share,
+  Platform,
+} from 'react-native';
+import { useDebugConsole } from './DebugProvider';
+import { LogEntry } from './types';
+import { DebugIcon } from './Icons';
+
+interface LogEntryItemProps {
+  entry: LogEntry;
+  colors: {
+    surface: string;
+    text: string;
+    textSecondary: string;
+    error: string;
+    warning: string;
+    info: string;
+    log: string;
+  };
+}
+
+const LogEntryItem: React.FC<LogEntryItemProps> = ({ entry, colors }) => {
+  const getTypeColor = (type: LogEntry['type']) => {
+    switch (type) {
+      case 'error': return colors.error;
+      case 'warn': return colors.warning;
+      case 'info': return colors.info;
+      default: return colors.textSecondary;
+    }
+  };
+
+  const getTypeIcon = (type: LogEntry['type']): 'close-circle' | 'warning' | 'information-circle' | 'ellipse' => {
+    switch (type) {
+      case 'error': return 'close-circle';
+      case 'warn': return 'warning';
+      case 'info': return 'information-circle';
+      default: return 'ellipse';
+    }
+  };
+
+  const formatTime = (date: Date) => {
+    return date.toLocaleTimeString('en-US', {
+      hour12: false,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+    });
+  };
+
+  return (
+    <View style={[
+      styles.logEntry,
+      { backgroundColor: colors.surface, borderLeftColor: getTypeColor(entry.type) }
+    ]}>
+      <View style={styles.logHeader}>
+        <DebugIcon name={getTypeIcon(entry.type)} size={14} color={getTypeColor(entry.type)} />
+        <Text style={[styles.logTime, { color: colors.textSecondary }]}>
+          {formatTime(entry.timestamp)}
+        </Text>
+        <Text style={[styles.logType, { color: getTypeColor(entry.type) }]}>
+          {entry.type.toUpperCase()}
+        </Text>
+      </View>
+      <Text style={[styles.logMessage, { color: colors.text }]} selectable>
+        {entry.message}
+      </Text>
+    </View>
+  );
+};
+
+export const DebugOverlay: React.FC = () => {
+  const { logs, isVisible, hideConsole, clearLogs, config } = useDebugConsole();
+  const colors = config.colors;
+
+  const handleShare = async () => {
+    const logText = logs.map(log =>
+      `[${log.timestamp.toISOString()}] [${log.type.toUpperCase()}] ${log.message}`
+    ).join('\n');
+
+    try {
+      await Share.share({
+        message: logText,
+        title: `${config.appName} Debug Logs`,
+      });
+    } catch (error) {
+      // Silently fail if sharing not available
+    }
+  };
+
+  if (!isVisible || !config.enabled) return null;
+
+  const errorCount = logs.filter(l => l.type === 'error').length;
+  const warnCount = logs.filter(l => l.type === 'warn').length;
+
+  return (
+    <Modal
+      visible={isVisible}
+      animationType="slide"
+      transparent={false}
+      onRequestClose={hideConsole}
+    >
+      <SafeAreaView style={[styles.container, { backgroundColor: colors.background }]}>
+        {/* Header */}
+        <View style={[styles.header, { borderBottomColor: colors.surface }]}>
+          <View style={styles.headerLeft}>
+            <DebugIcon name="bug" size={24} color={colors.error} />
+            <Text style={[styles.headerTitle, { color: colors.text }]}>Debug Console</Text>
+          </View>
+          <View style={styles.headerStats}>
+            {errorCount > 0 && (
+              <View style={[styles.statBadge, { backgroundColor: colors.error }]}>
+                <Text style={styles.statText}>{errorCount} errors</Text>
+              </View>
+            )}
+            {warnCount > 0 && (
+              <View style={[styles.statBadge, { backgroundColor: colors.warning }]}>
+                <Text style={[styles.statText, { color: '#000' }]}>{warnCount} warns</Text>
+              </View>
+            )}
+          </View>
+          <TouchableOpacity onPress={hideConsole} style={styles.closeButton}>
+            <DebugIcon name="close" size={24} color={colors.text} />
+          </TouchableOpacity>
+        </View>
+
+        {/* Actions */}
+        <View style={[styles.actions, { borderBottomColor: colors.surface }]}>
+          <TouchableOpacity
+            style={[styles.actionButton, { backgroundColor: colors.surface }]}
+            onPress={clearLogs}
+          >
+            <DebugIcon name="trash" size={18} color={colors.error} />
+            <Text style={[styles.actionText, { color: colors.text }]}>Clear</Text>
+          </TouchableOpacity>
+          <TouchableOpacity
+            style={[styles.actionButton, { backgroundColor: colors.surface }]}
+            onPress={handleShare}
+          >
+            <DebugIcon name="share" size={18} color={colors.info} />
+            <Text style={[styles.actionText, { color: colors.text }]}>Share</Text>
+          </TouchableOpacity>
+          <Text style={[styles.logCount, { color: colors.textSecondary }]}>
+            {logs.length} logs
+          </Text>
+        </View>
+
+        {/* Logs */}
+        <ScrollView
+          style={styles.logsContainer}
+          contentContainerStyle={styles.logsContent}
+          showsVerticalScrollIndicator={true}
+        >
+          {logs.length === 0 ? (
+            <View style={styles.emptyState}>
+              <DebugIcon name="document" size={48} color={colors.textSecondary} />
+              <Text style={[styles.emptyText, { color: colors.textSecondary }]}>
+                No logs yet
+              </Text>
+              <Text style={[styles.emptySubtext, { color: colors.textSecondary }]}>
+                Console logs will appear here
+              </Text>
+            </View>
+          ) : (
+            logs.map(entry => (
+              <LogEntryItem key={entry.id} entry={entry} colors={colors} />
+            ))
+          )}
+        </ScrollView>
+
+        {/* Footer */}
+        <View style={[styles.footer, { borderTopColor: colors.surface }]}>
+          <Text style={[styles.footerText, { color: colors.textSecondary }]}>
+            Tap on log to copy • {config.appName}
+          </Text>
+        </View>
+      </SafeAreaView>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+  },
+  headerLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  headerTitle: {
+    fontSize: 18,
+    fontWeight: 'bold',
+  },
+  headerStats: {
+    flexDirection: 'row',
+    gap: 8,
+  },
+  statBadge: {
+    paddingHorizontal: 8,
+    paddingVertical: 4,
+    borderRadius: 12,
+  },
+  statText: {
+    fontSize: 12,
+    fontWeight: 'bold',
+    color: '#fff',
+  },
+  closeButton: {
+    padding: 8,
+  },
+  actions: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+    gap: 16,
+  },
+  actionButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingVertical: 6,
+    paddingHorizontal: 12,
+    borderRadius: 8,
+  },
+  actionText: {
+    fontSize: 14,
+  },
+  logCount: {
+    marginLeft: 'auto',
+    fontSize: 12,
+  },
+  logsContainer: {
+    flex: 1,
+  },
+  logsContent: {
+    padding: 8,
+  },
+  logEntry: {
+    borderRadius: 8,
+    padding: 10,
+    marginBottom: 8,
+    borderLeftWidth: 3,
+  },
+  logHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+    marginBottom: 4,
+  },
+  logTime: {
+    fontSize: 11,
+    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+  },
+  logType: {
+    fontSize: 10,
+    fontWeight: 'bold',
+  },
+  logMessage: {
+    fontSize: 12,
+    fontFamily: Platform.OS === 'ios' ? 'Menlo' : 'monospace',
+    lineHeight: 18,
+  },
+  emptyState: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingVertical: 60,
+  },
+  emptyText: {
+    marginTop: 12,
+    fontSize: 16,
+    fontWeight: '600',
+  },
+  emptySubtext: {
+    marginTop: 4,
+    fontSize: 14,
+  },
+  footer: {
+    padding: 12,
+    borderTopWidth: 1,
+    alignItems: 'center',
+  },
+  footerText: {
+    fontSize: 12,
+  },
+});
+
+export default DebugOverlay;

package/src/DebugProvider.tsx

@@ -0,0 +1,182 @@
+/**
+ * React Native Debug Console - Provider
+ * Context provider that captures console logs and manages state
+ */
+
+import React, {
+  createContext,
+  useContext,
+  useState,
+  useCallback,
+  useEffect,
+  useMemo,
+  ReactNode,
+} from 'react';
+import {
+  LogEntry,
+  LogType,
+  DebugConsoleConfig,
+  DebugConsoleContextType,
+  DEFAULT_CONFIG,
+} from './types';
+
+const DebugConsoleContext = createContext<DebugConsoleContextType | undefined>(undefined);
+
+// Store original console methods
+const originalConsole = {
+  log: console.log.bind(console),
+  warn: console.warn.bind(console),
+  error: console.error.bind(console),
+  info: console.info.bind(console),
+};
+
+interface DebugProviderProps {
+  children: ReactNode;
+  config?: DebugConsoleConfig;
+}
+
+export const DebugProvider: React.FC<DebugProviderProps> = ({ children, config: userConfig }) => {
+  // Merge user config with defaults
+  const config = useMemo<Required<DebugConsoleConfig>>(() => {
+    return {
+      ...DEFAULT_CONFIG,
+      ...userConfig,
+      colors: {
+        ...DEFAULT_CONFIG.colors,
+        ...userConfig?.colors,
+      },
+      buttonPosition: {
+        ...DEFAULT_CONFIG.buttonPosition,
+        ...userConfig?.buttonPosition,
+      },
+    };
+  }, [userConfig]);
+
+  const [logs, setLogs] = useState<LogEntry[]>([]);
+  const [isVisible, setIsVisible] = useState(false);
+
+  const addLog = useCallback((type: LogType, message: string, data?: any) => {
+    const entry: LogEntry = {
+      id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+      timestamp: new Date(),
+      type,
+      message: typeof message === 'string' ? message : JSON.stringify(message),
+      data,
+    };
+
+    setLogs(prev => {
+      const newLogs = [...prev, entry];
+      // Keep only last N logs based on config
+      if (newLogs.length > config.maxLogs) {
+        return newLogs.slice(-config.maxLogs);
+      }
+      return newLogs;
+    });
+  }, [config.maxLogs]);
+
+  const clearLogs = useCallback(() => {
+    setLogs([]);
+  }, []);
+
+  const toggleVisibility = useCallback(() => {
+    setIsVisible(prev => !prev);
+  }, []);
+
+  const showConsole = useCallback(() => {
+    setIsVisible(true);
+  }, []);
+
+  const hideConsole = useCallback(() => {
+    setIsVisible(false);
+  }, []);
+
+  // Override console methods to capture logs
+  useEffect(() => {
+    if (!config.enabled) {
+      return;
+    }
+
+    const formatArgs = (args: any[]): string => {
+      return args.map(arg => {
+        if (typeof arg === 'object') {
+          try {
+            return JSON.stringify(arg, null, 2);
+          } catch {
+            return String(arg);
+          }
+        }
+        return String(arg);
+      }).join(' ');
+    };
+
+    const wrapConsole = (type: LogType, originalFn: (...args: any[]) => void) => {
+      return (...args: any[]) => {
+        // Always call original console method
+        originalFn(...args);
+
+        // Add to our logs
+        const message = formatArgs(args);
+        addLog(type, message);
+      };
+    };
+
+    // Override console methods based on config
+    if (config.captureLog) {
+      console.log = wrapConsole('log', originalConsole.log);
+    }
+    if (config.captureWarn) {
+      console.warn = wrapConsole('warn', originalConsole.warn);
+    }
+    if (config.captureError) {
+      console.error = wrapConsole('error', originalConsole.error);
+    }
+    if (config.captureInfo) {
+      console.info = wrapConsole('info', originalConsole.info);
+    }
+
+    // Restore original methods on cleanup
+    return () => {
+      console.log = originalConsole.log;
+      console.warn = originalConsole.warn;
+      console.error = originalConsole.error;
+      console.info = originalConsole.info;
+    };
+  }, [config.enabled, config.captureLog, config.captureWarn, config.captureError, config.captureInfo, addLog]);
+
+  const contextValue = useMemo<DebugConsoleContextType>(() => ({
+    logs,
+    isVisible,
+    config,
+    addLog,
+    clearLogs,
+    toggleVisibility,
+    showConsole,
+    hideConsole,
+  }), [logs, isVisible, config, addLog, clearLogs, toggleVisibility, showConsole, hideConsole]);
+
+  return (
+    <DebugConsoleContext.Provider value={contextValue}>
+      {children}
+    </DebugConsoleContext.Provider>
+  );
+};
+
+/**
+ * Hook to access the debug console context
+ */
+export const useDebugConsole = (): DebugConsoleContextType => {
+  const context = useContext(DebugConsoleContext);
+  if (!context) {
+    throw new Error('useDebugConsole must be used within a DebugProvider');
+  }
+  return context;
+};
+
+/**
+ * Optional hook that doesn't throw if used outside provider
+ */
+export const useDebugConsoleOptional = (): DebugConsoleContextType | null => {
+  return useContext(DebugConsoleContext) ?? null;
+};
+
+export default DebugProvider;