@zizwar/react-native-debug-console 1.0.0

package/README.ar.md

@@ -0,0 +1,193 @@
+# React Native Debug Console
+
+وحدة تحكم تصحيح عائمة لتطبيقات React Native / Expo. تلتقط سجلات console والأخطاء والتحذيرات مع واجهة مستخدم جميلة.
+
+مثالية لتصحيح أخطاء إصدارات الإنتاج ومشاركة السجلات مع فريقك.
+
+## المميزات
+
+- زر تصحيح عائم مع شارة عدد الأخطاء
+- نافذة منبثقة كاملة الشاشة مع جميع السجلات الملتقطة
+- إدخالات سجل ملونة (خطأ، تحذير، معلومات، سجل)
+- وظيفة مشاركة السجلات
+- ألوان وموضع قابل للتخصيص بالكامل
+- دعم متغيرات البيئة للتفعيل/الإلغاء
+- بدون تبعيات خارجية
+- دعم TypeScript
+- يعمل مع Expo و React Native
+
+## التثبيت
+
+```bash
+# باستخدام npm
+npm install react-native-debug-console
+
+# باستخدام yarn
+yarn add react-native-debug-console
+
+# باستخدام pnpm
+pnpm add react-native-debug-console
+```
+
+## البدء السريع
+
+قم بتغليف تطبيقك بمكون `DebugConsole`:
+
+```tsx
+import { DebugConsole } from 'react-native-debug-console';
+
+export default function App() {
+  return (
+    <DebugConsole>
+      <YourApp />
+    </DebugConsole>
+  );
+}
+```
+
+هذا كل شيء! سيظهر زر عائم في زاوية تطبيقك. اضغط عليه لرؤية جميع سجلات console.
+
+## التكوين
+
+### استخدام متغيرات البيئة
+
+```tsx
+import { DebugConsole } from 'react-native-debug-console';
+
+export default function App() {
+  return (
+    <DebugConsole
+      config={{
+        // تفعيل بناءً على متغير البيئة
+        enabled: process.env.EXPO_PUBLIC_DEBUG === 'true',
+        appName: 'تطبيقي',
+      }}
+    >
+      <YourApp />
+    </DebugConsole>
+  );
+}
+```
+
+في ملف `.env`:
+
+```env
+EXPO_PUBLIC_DEBUG=true
+```
+
+### خيارات التكوين الكاملة
+
+```tsx
+import { DebugConsole, DebugConsoleConfig } from 'react-native-debug-console';
+
+const config: DebugConsoleConfig = {
+  // تفعيل أو إلغاء (الافتراضي: true)
+  enabled: true,
+
+  // الحد الأقصى للسجلات (الافتراضي: 100)
+  maxLogs: 100,
+
+  // اسم التطبيق للمشاركة (الافتراضي: 'App')
+  appName: 'تطبيقي',
+
+  // التقاط أنواع محددة من السجلات (الافتراضي: true للجميع)
+  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,
+  },
+};
+
+export default function App() {
+  return (
+    <DebugConsole config={config}>
+      <YourApp />
+    </DebugConsole>
+  );
+}
+```
+
+## الاستخدام المتقدم
+
+### استخدام HOC
+
+```tsx
+import { withDebugConsole } from 'react-native-debug-console';
+
+function App() {
+  return <YourApp />;
+}
+
+export default withDebugConsole(App, {
+  enabled: __DEV__,
+  appName: 'تطبيقي',
+});
+```
+
+### التحكم اليدوي باستخدام Hook
+
+```tsx
+import { DebugProvider, useDebugConsole, DebugButton, DebugOverlay } from 'react-native-debug-console';
+
+function MyComponent() {
+  const { logs, showConsole, hideConsole, clearLogs, addLog } = useDebugConsole();
+
+  // إضافة سجل يدويًا
+  const handlePress = () => {
+    addLog('info', 'تم الضغط على الزر!');
+  };
+
+  return (
+    <Button onPress={handlePress} title="اضغط هنا" />
+  );
+}
+
+// في App.tsx
+export default function App() {
+  return (
+    <DebugProvider config={{ enabled: true }}>
+      <YourApp />
+      <DebugButton />
+      <DebugOverlay />
+    </DebugProvider>
+  );
+}
+```
+
+### إخفاء الزر العائم
+
+```tsx
+<DebugConsole showButton={false}>
+  <YourApp />
+</DebugConsole>
+```
+
+## نصائح
+
+1. **إصدارات الإنتاج**: اضبط `enabled: false` في الإنتاج، أو استخدم متغيرات البيئة
+2. **الأداء**: تحتفظ وحدة التحكم بآخر 100 سجل فقط لمنع مشاكل الذاكرة
+3. **المشاركة**: يمكن مشاركة السجلات عبر Share API للتصحيح السهل
+4. **التنسيق المخصص**: جميع الألوان قابلة للتخصيص لتتناسب مع ثيم تطبيقك
+
+## الترخيص
+
+MIT

package/README.md

@@ -0,0 +1,288 @@
+# React Native Debug Console
+
+A floating debug console for React Native / Expo apps. Captures console logs, errors, and warnings with a beautiful overlay UI.
+
+Perfect for debugging production builds and sharing logs with your team.
+
+## Features
+
+- Floating debug button with error count badge
+- Full-screen modal console with all captured logs
+- Color-coded log entries (error, warning, info, log)
+- Share logs functionality
+- Fully customizable colors and positioning
+- Environment variable support for enabling/disabling
+- Zero external dependencies (optional react-native-svg)
+- TypeScript support
+- Works with Expo and bare React Native
+
+## Installation
+
+```bash
+# Using npm
+npm install react-native-debug-console
+
+# Using yarn
+yarn add react-native-debug-console
+
+# Using pnpm
+pnpm add react-native-debug-console
+```
+
+## Quick Start
+
+Wrap your app with the `DebugConsole` component:
+
+```tsx
+import { DebugConsole } from 'react-native-debug-console';
+
+export default function App() {
+  return (
+    <DebugConsole>
+      <YourApp />
+    </DebugConsole>
+  );
+}
+```
+
+That's it! A floating bug button will appear in the corner of your app. Tap it to see all console logs.
+
+## Configuration
+
+### Using Environment Variables
+
+```tsx
+import { DebugConsole } from 'react-native-debug-console';
+
+export default function App() {
+  return (
+    <DebugConsole
+      config={{
+        // Enable based on environment variable
+        enabled: process.env.EXPO_PUBLIC_DEBUG === 'true',
+        appName: 'MyApp',
+      }}
+    >
+      <YourApp />
+    </DebugConsole>
+  );
+}
+```
+
+In your `.env` file:
+
+```env
+EXPO_PUBLIC_DEBUG=true
+```
+
+### Full Configuration Options
+
+```tsx
+import { DebugConsole, DebugConsoleConfig } from 'react-native-debug-console';
+
+const config: DebugConsoleConfig = {
+  // Enable or disable (default: true)
+  enabled: true,
+
+  // Max logs to keep (default: 100)
+  maxLogs: 100,
+
+  // App name for sharing (default: 'App')
+  appName: 'MyApp',
+
+  // Capture specific log types (all default to true)
+  captureLog: true,
+  captureWarn: true,
+  captureError: true,
+  captureInfo: true,
+
+  // Custom colors
+  colors: {
+    background: '#1a1a2e',
+    surface: '#2a2a3e',
+    text: '#ffffff',
+    textSecondary: '#888888',
+    error: '#FF5252',
+    warning: '#FFD740',
+    info: '#40C4FF',
+    log: '#888888',
+    buttonBackground: '#FF6B6B',
+    buttonIcon: '#ffffff',
+  },
+
+  // Button position
+  buttonPosition: {
+    bottom: 100,
+    right: 20,
+  },
+};
+
+export default function App() {
+  return (
+    <DebugConsole config={config}>
+      <YourApp />
+    </DebugConsole>
+  );
+}
+```
+
+## Advanced Usage
+
+### Using HOC (Higher-Order Component)
+
+```tsx
+import { withDebugConsole } from 'react-native-debug-console';
+
+function App() {
+  return <YourApp />;
+}
+
+export default withDebugConsole(App, {
+  enabled: __DEV__,
+  appName: 'MyApp',
+});
+```
+
+### Manual Control with Hook
+
+```tsx
+import { DebugProvider, useDebugConsole, DebugButton, DebugOverlay } from 'react-native-debug-console';
+
+function MyComponent() {
+  const { logs, showConsole, hideConsole, clearLogs, addLog } = useDebugConsole();
+
+  // Manually add a log
+  const handlePress = () => {
+    addLog('info', 'Button pressed!');
+  };
+
+  return (
+    <Button onPress={handlePress} title="Press me" />
+  );
+}
+
+// In your App.tsx
+export default function App() {
+  return (
+    <DebugProvider config={{ enabled: true }}>
+      <YourApp />
+      <DebugButton />
+      <DebugOverlay />
+    </DebugProvider>
+  );
+}
+```
+
+### Hide Floating Button
+
+```tsx
+<DebugConsole showButton={false}>
+  <YourApp />
+</DebugConsole>
+```
+
+### Custom Button or Overlay
+
+```tsx
+import { DebugConsole, useDebugConsole } from 'react-native-debug-console';
+
+const CustomButton = () => {
+  const { toggleVisibility, logs } = useDebugConsole();
+  const errorCount = logs.filter(l => l.type === 'error').length;
+
+  return (
+    <TouchableOpacity onPress={toggleVisibility}>
+      <Text>Debug ({errorCount} errors)</Text>
+    </TouchableOpacity>
+  );
+};
+
+export default function App() {
+  return (
+    <DebugConsole customButton={CustomButton}>
+      <YourApp />
+    </DebugConsole>
+  );
+}
+```
+
+## API Reference
+
+### Components
+
+| Component | Description |
+|-----------|-------------|
+| `DebugConsole` | Main wrapper component |
+| `DebugProvider` | Context provider (for manual setup) |
+| `DebugButton` | Floating action button |
+| `DebugOverlay` | Full-screen log viewer modal |
+
+### Hooks
+
+| Hook | Description |
+|------|-------------|
+| `useDebugConsole()` | Access debug context (throws if not in provider) |
+| `useDebugConsoleOptional()` | Access debug context (returns null if not in provider) |
+
+### Context Values (from useDebugConsole)
+
+```tsx
+interface DebugConsoleContextType {
+  logs: LogEntry[];
+  isVisible: boolean;
+  config: DebugConsoleConfig;
+  addLog: (type: LogType, message: string, data?: any) => void;
+  clearLogs: () => void;
+  toggleVisibility: () => void;
+  showConsole: () => void;
+  hideConsole: () => void;
+}
+```
+
+### Types
+
+```tsx
+type LogType = 'log' | 'warn' | 'error' | 'info';
+
+interface LogEntry {
+  id: string;
+  timestamp: Date;
+  type: LogType;
+  message: string;
+  data?: any;
+}
+```
+
+## Environment Variables for Expo
+
+Add to your `.env` file:
+
+```env
+# Enable debug console
+EXPO_PUBLIC_DEBUG=true
+```
+
+Then use in your app:
+
+```tsx
+<DebugConsole
+  config={{
+    enabled: process.env.EXPO_PUBLIC_DEBUG === 'true',
+  }}
+>
+```
+
+## Tips
+
+1. **Production builds**: Set `enabled: false` in production, or use environment variables
+2. **Performance**: The console keeps only the last 100 logs by default to prevent memory issues
+3. **Sharing**: Logs can be shared via the native Share API for easy debugging
+4. **Custom styling**: All colors are customizable to match your app's theme
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please open an issue or submit a pull request.

package/dist/DebugButton.d.ts

@@ -0,0 +1,7 @@
+/**
+ * React Native Debug Console - Floating Button
+ * A floating action button that shows error count and toggles the debug console
+ */
+import React from 'react';
+export declare const DebugButton: React.FC;
+export default DebugButton;

package/dist/DebugButton.js

@@ -0,0 +1,58 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * 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, } from 'react-native';
+import { useDebugConsole } from './DebugProvider';
+import { DebugIcon } from './Icons';
+export const DebugButton = () => {
+    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 (_jsxs(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, children: [_jsx(DebugIcon, { name: "bug", size: 20, color: colors.buttonIcon }), errorCount > 0 && (_jsx(View, { style: styles.errorBadge, children: _jsx(Text, { style: [styles.errorBadgeText, { color: colors.buttonBackground }], children: errorCount > 9 ? '9+' : errorCount }) }))] }));
+};
+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/dist/DebugConsole.d.ts

@@ -0,0 +1,58 @@
+/**
+ * React Native Debug Console - Main Component
+ * All-in-one wrapper that provides the debug console functionality
+ */
+import React, { ReactNode } from 'react';
+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 declare const DebugConsole: React.FC<DebugConsoleProps>;
+/**
+ * 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 declare function withDebugConsole<P extends object>(WrappedComponent: React.ComponentType<P>, config?: DebugConsoleConfig): React.FC<P>;
+export default DebugConsole;

package/dist/DebugConsole.js

@@ -0,0 +1,70 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * React Native Debug Console - Main Component
+ * All-in-one wrapper that provides the debug console functionality
+ */
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { DebugProvider } from './DebugProvider';
+import { DebugOverlay } from './DebugOverlay';
+import { DebugButton } from './DebugButton';
+/**
+ * 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 = ({ children, config, showButton = true, customButton: CustomButton, customOverlay: CustomOverlay, }) => {
+    // If disabled, just render children without any debug UI
+    if (config?.enabled === false) {
+        return _jsx(_Fragment, { children: children });
+    }
+    const ButtonComponent = CustomButton || DebugButton;
+    const OverlayComponent = CustomOverlay || DebugOverlay;
+    return (_jsx(DebugProvider, { config: config, children: _jsxs(View, { style: styles.container, children: [children, showButton && _jsx(ButtonComponent, {}), _jsx(OverlayComponent, {})] }) }));
+};
+/**
+ * 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(WrappedComponent, config) {
+    const WithDebugConsole = (props) => {
+        return (_jsx(DebugConsole, { config: config, children: _jsx(WrappedComponent, { ...props }) }));
+    };
+    WithDebugConsole.displayName = `WithDebugConsole(${WrappedComponent.displayName || WrappedComponent.name || 'Component'})`;
+    return WithDebugConsole;
+}
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+});
+export default DebugConsole;

package/dist/DebugOverlay.d.ts

@@ -0,0 +1,7 @@
+/**
+ * React Native Debug Console - Overlay
+ * Full-screen modal displaying captured logs
+ */
+import React from 'react';
+export declare const DebugOverlay: React.FC;
+export default DebugOverlay;