@zizwar/react-native-debug-console 1.0.0

package/src/Icons.tsx

@@ -0,0 +1,91 @@
+/**
+ * React Native Debug Console - Icons
+ * Simple text-based icons to avoid external dependencies
+ */
+
+import React from 'react';
+import { Text, View, StyleSheet } from 'react-native';
+
+interface IconProps {
+  name: IconName;
+  size?: number;
+  color?: string;
+}
+
+export type IconName =
+  | 'bug'
+  | 'close'
+  | 'close-circle'
+  | 'warning'
+  | 'information-circle'
+  | 'trash'
+  | 'share'
+  | 'document'
+  | 'ellipse';
+
+const ICONS: Record<IconName, string> = {
+  'bug': '🐛',
+  'close': '✕',
+  'close-circle': '⊗',
+  'warning': '⚠',
+  'information-circle': 'ℹ',
+  'trash': '🗑',
+  'share': '↗',
+  'document': '📄',
+  'ellipse': '●',
+};
+
+export const DebugIcon: React.FC<IconProps> = ({ name, size = 16, color = '#fff' }) => {
+  return (
+    <Text style={[styles.icon, { fontSize: size, color }]}>
+      {ICONS[name] || '●'}
+    </Text>
+  );
+};
+
+// SVG-based icons for better quality (optional, requires react-native-svg)
+export const SvgIcons = {
+  Bug: ({ size = 24, color = '#fff' }: { size?: number; color?: string }) => (
+    <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
+      <Text style={{ fontSize: size * 0.8, color }}>🐛</Text>
+    </View>
+  ),
+  Close: ({ size = 24, color = '#fff' }: { size?: number; color?: string }) => (
+    <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
+      <Text style={{ fontSize: size * 0.8, color, fontWeight: 'bold' }}>✕</Text>
+    </View>
+  ),
+  Error: ({ size = 24, color = '#FF5252' }: { size?: number; color?: string }) => (
+    <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
+      <Text style={{ fontSize: size * 0.8, color }}>⊗</Text>
+    </View>
+  ),
+  Warning: ({ size = 24, color = '#FFD740' }: { size?: number; color?: string }) => (
+    <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
+      <Text style={{ fontSize: size * 0.8, color }}>⚠</Text>
+    </View>
+  ),
+  Info: ({ size = 24, color = '#40C4FF' }: { size?: number; color?: string }) => (
+    <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
+      <Text style={{ fontSize: size * 0.8, color }}>ℹ</Text>
+    </View>
+  ),
+  Trash: ({ size = 24, color = '#fff' }: { size?: number; color?: string }) => (
+    <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
+      <Text style={{ fontSize: size * 0.8, color }}>🗑</Text>
+    </View>
+  ),
+  Share: ({ size = 24, color = '#fff' }: { size?: number; color?: string }) => (
+    <View style={{ width: size, height: size, justifyContent: 'center', alignItems: 'center' }}>
+      <Text style={{ fontSize: size * 0.8, color }}>↗</Text>
+    </View>
+  ),
+};
+
+const styles = StyleSheet.create({
+  icon: {
+    textAlign: 'center',
+  },
+});
+
+export default DebugIcon;

package/src/index.ts

@@ -0,0 +1,46 @@
+/**
+ * React Native Debug Console
+ *
+ * A floating debug console for React Native / Expo apps.
+ * Captures console logs, errors, and warnings with a beautiful overlay UI.
+ *
+ * @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>
+ *   );
+ * }
+ * ```
+ */
+
+// Main components
+export { DebugConsole, withDebugConsole } from './DebugConsole';
+export { DebugProvider, useDebugConsole, useDebugConsoleOptional } from './DebugProvider';
+export { DebugOverlay } from './DebugOverlay';
+export { DebugButton } from './DebugButton';
+export { DebugIcon } from './Icons';
+
+// Types
+export type {
+  LogEntry,
+  LogType,
+  DebugConsoleConfig,
+  DebugConsoleColors,
+  ButtonPosition,
+  DebugConsoleContextType,
+} from './types';
+
+export { DEFAULT_CONFIG } from './types';
+
+// Default export
+export { DebugConsole as default } from './DebugConsole';

package/src/types.ts

@@ -0,0 +1,102 @@
+/**
+ * React Native Debug Console - Types
+ */
+
+export type LogType = 'log' | 'warn' | 'error' | 'info';
+
+export interface LogEntry {
+  id: string;
+  timestamp: Date;
+  type: LogType;
+  message: string;
+  data?: any;
+}
+
+export interface DebugConsoleConfig {
+  /** Enable or disable the debug console (default: true) */
+  enabled?: boolean;
+  /** Maximum number of logs to keep (default: 100) */
+  maxLogs?: number;
+  /** Custom colors for the theme */
+  colors?: DebugConsoleColors;
+  /** Position of the floating button */
+  buttonPosition?: ButtonPosition;
+  /** Custom app name for sharing logs */
+  appName?: string;
+  /** Capture console.log (default: true) */
+  captureLog?: boolean;
+  /** Capture console.warn (default: true) */
+  captureWarn?: boolean;
+  /** Capture console.error (default: true) */
+  captureError?: boolean;
+  /** Capture console.info (default: true) */
+  captureInfo?: boolean;
+}
+
+export interface DebugConsoleColors {
+  /** Primary background color */
+  background?: string;
+  /** Card/surface background color */
+  surface?: string;
+  /** Primary text color */
+  text?: string;
+  /** Secondary text color */
+  textSecondary?: string;
+  /** Error color */
+  error?: string;
+  /** Warning color */
+  warning?: string;
+  /** Info color */
+  info?: string;
+  /** Log color */
+  log?: string;
+  /** Floating button background color */
+  buttonBackground?: string;
+  /** Floating button icon color */
+  buttonIcon?: string;
+}
+
+export interface ButtonPosition {
+  bottom?: number;
+  right?: number;
+  left?: number;
+  top?: number;
+}
+
+export interface DebugConsoleContextType {
+  logs: LogEntry[];
+  isVisible: boolean;
+  config: Required<DebugConsoleConfig>;
+  addLog: (type: LogType, message: string, data?: any) => void;
+  clearLogs: () => void;
+  toggleVisibility: () => void;
+  showConsole: () => void;
+  hideConsole: () => void;
+}
+
+/** Default configuration */
+export const DEFAULT_CONFIG: Required<DebugConsoleConfig> = {
+  enabled: true,
+  maxLogs: 100,
+  appName: 'App',
+  captureLog: true,
+  captureWarn: true,
+  captureError: true,
+  captureInfo: true,
+  colors: {
+    background: '#1a1a2e',
+    surface: '#2a2a3e',
+    text: '#ffffff',
+    textSecondary: '#888888',
+    error: '#FF5252',
+    warning: '#FFD740',
+    info: '#40C4FF',
+    log: '#888888',
+    buttonBackground: '#FF6B6B',
+    buttonIcon: '#ffffff',
+  },
+  buttonPosition: {
+    bottom: 100,
+    right: 20,
+  },
+};