react-native-debug-toolkit 0.1.1

package/README.md

@@ -0,0 +1,108 @@
+# React Native Debug Toolkit
+
+A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development.
+
+## Installation
+
+```bash
+npm install react-native-debug-toolkit
+# or
+yarn add react-native-debug-toolkit
+```
+
+## Basic Usage
+
+```javascript
+// In your App.js
+import DebugToolKit from 'react-native-debug-toolkit';
+
+function App() {
+  useEffect(() => {
+    if (__DEV__) {
+      const debugToolKit = new DebugToolKit();
+      debugToolKit.addFeature({
+        name: 'network',
+        label: 'Network Logs',
+        setup: () => console.log('Feature ready'),
+        getData: () => ({ message: 'Hello debugging world!' })
+      });
+      debugToolKit.showDebugPanel();
+    }
+    
+    return () => {
+      if (__DEV__) {
+        DebugToolKit.instance.destroy();
+      }
+    };
+  }, []);
+  
+  return <YourApp />;
+}
+```
+
+## Features
+
+- Lightweight floating debug panel
+- Customizable debugging features
+- Development-only functionality (automatically disabled in production)
+- Easy to extend with your own debug tools
+
+## API Reference
+
+### DebugToolKit
+
+#### `new DebugToolKit()`
+Initializes a new instance of the debug toolkit. It's a singleton, so multiple calls will return the same instance.
+
+#### `addFeature(feature: Feature): DebugToolKit`
+Adds a new debugging feature to the toolkit. Returns the toolkit instance for chaining.
+
+Feature object must have:
+- `name`: Unique identifier for the feature
+- `label`: Display name in the debug panel
+- `setup()`: Function to run when the feature is added
+- `getData()`: Function that returns data to display in the panel
+- `cleanup()`: (Optional) Function to run when the feature is removed
+
+#### `showDebugPanel(): void`
+Shows the floating debug panel.
+
+#### `hideDebugPanel(): void`
+Hides the floating debug panel.
+
+#### `updateDebugPanel(): void`
+Updates the debug panel with the latest feature data.
+
+#### `destroy(): void`
+Cleans up the debug toolkit, removing all features and event listeners.
+
+## Example: Network Feature
+
+```javascript
+// In debugFeatures.js
+import { NetworkFeature } from 'react-native-debug-toolkit/lib/features/NetworkFeature';
+
+export const createNetworkFeature = () => {
+  const feature = new NetworkFeature();
+  return {
+    name: 'network',
+    label: 'Network Logs',
+    setup: () => feature.setup(),
+    getData: () => feature.getData(),
+    cleanup: () => feature.cleanup()
+  };
+};
+
+// In App.js
+const debugToolKit = new DebugToolKit();
+debugToolKit.addFeature(createNetworkFeature());
+debugToolKit.showDebugPanel();
+```
+
+## Contributing
+
+Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.
+
+## License
+
+[MIT](https://choosealicense.com/licenses/mit/)

package/android/src/main/java/com/debugtoolkit/BuildTypeModule.java

@@ -0,0 +1,68 @@
+package com.debugtoolkit;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReactContextBaseJavaModule;
+import com.facebook.react.bridge.ReactMethod;
+import com.facebook.react.bridge.Promise;
+import com.facebook.react.bridge.Callback;
+
+import java.util.HashMap;
+import java.util.Map;
+
+public class BuildTypeModule extends ReactContextBaseJavaModule {
+    private final ReactApplicationContext reactContext;
+
+    public BuildTypeModule(ReactApplicationContext reactContext) {
+        super(reactContext);
+        this.reactContext = reactContext;
+    }
+
+    @Override
+    public String getName() {
+        return "BuildTypeModule";
+    }
+
+    @Override
+    public Map<String, Object> getConstants() {
+        final Map<String, Object> constants = new HashMap<>();
+        constants.put("isDebug", BuildConfig.DEBUG);
+        return constants;
+    }
+
+    @ReactMethod
+    public void isDebugMode(Promise promise) {
+        try {
+            promise.resolve(BuildConfig.DEBUG);
+        } catch (Exception e) {
+            promise.reject("ERR_UNEXPECTED", e.getMessage(), e);
+        }
+    }
+
+    @ReactMethod
+    public void isReleaseMode(Promise promise) {
+        try {
+            promise.resolve(!BuildConfig.DEBUG);
+        } catch (Exception e) {
+            promise.reject("ERR_UNEXPECTED", e.getMessage(), e);
+        }
+    }
+
+    @ReactMethod(isBlockingSynchronousMethod = true)
+    public Boolean isDebugModeSync() {
+        return BuildConfig.DEBUG;
+    }
+
+    @ReactMethod(isBlockingSynchronousMethod = true)
+    public Boolean isReleaseModeSync() {
+        return !BuildConfig.DEBUG;
+    }
+
+    @ReactMethod
+    public void getBuildType(Promise promise) {
+        try {
+            promise.resolve(BuildConfig.DEBUG ? "debug" : "release");
+        } catch (Exception e) {
+            promise.reject("ERR_UNEXPECTED", e.getMessage(), e);
+        }
+    }
+} 

package/android/src/main/java/com/debugtoolkit/BuildTypePackage.java

@@ -0,0 +1,24 @@
+package com.debugtoolkit;
+
+import com.facebook.react.ReactPackage;
+import com.facebook.react.bridge.NativeModule;
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.uimanager.ViewManager;
+
+import java.util.ArrayList;
+import java.util.Collections;
+import java.util.List;
+
+public class BuildTypePackage implements ReactPackage {
+    @Override
+    public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
+        List<NativeModule> modules = new ArrayList<>();
+        modules.add(new BuildTypeModule(reactContext));
+        return modules;
+    }
+
+    @Override
+    public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
+        return Collections.emptyList();
+    }
+} 

package/index.d.ts

@@ -0,0 +1,155 @@
+declare module 'react-native-debug-toolkit' {
+    export interface Environment {
+        [key: string]: any;
+    }
+
+    export interface LogEntry {
+        message: string;
+        timestamp: string;
+    }
+
+    export interface HttpRequestInfo {
+        url: string;
+        method?: string;
+        headers?: any;
+        body?: any;
+    }
+
+    export interface HttpResponseInfo {
+        status: number;
+        statusText?: string;
+        headers?: any;
+        data?: any;
+        success?: boolean;
+    }
+
+    export interface HttpLogEntry {
+        request: HttpRequestInfo;
+        response: HttpResponseInfo;
+        timestamp: string;
+        error?: string;
+        success?: boolean;
+    }
+
+    export interface WebViewLogEntry {
+        url: string;
+        timestamp: string;
+    }
+
+    export interface EnvironmentOption {
+        label: string;
+        value: string;
+    }
+
+    export interface EnvironmentConfig {
+        options: Array<EnvironmentOption>;
+        currentValue: string;
+    }
+
+    export interface BuildType {
+        /**
+         * Determines if the app is running in debug mode (async)
+         * @returns Promise that resolves to true if in debug mode
+         */
+        isDebugMode(): Promise<boolean>;
+        
+        /**
+         * Determines if the app is running in release mode (async)
+         * @returns Promise that resolves to true if in release mode
+         */
+        isReleaseMode(): Promise<boolean>;
+        
+        /**
+         * Determines if the app is running in debug mode (sync)
+         * @returns true if in debug mode
+         */
+        isDebugModeSync(): boolean;
+        
+        /**
+         * Determines if the app is running in release mode (sync)
+         * @returns true if in release mode
+         */
+        isReleaseModeSync(): boolean;
+        
+        /**
+         * Gets the current build type (async)
+         * @returns Promise that resolves to 'debug' or 'release'
+         */
+        getBuildType(): Promise<'debug' | 'release'>;
+        
+        /**
+         * Executes the appropriate callback based on the current environment
+         * @param debugCallback - Function to execute in debug mode
+         * @param releaseCallback - Function to execute in release mode
+         * @returns Result of the executed callback
+         */
+        runInEnvironment<T>(debugCallback: () => T, releaseCallback: () => T): T;
+    }
+
+    export interface DebugToolKit {
+        /**
+         * Initialize the debug toolkit with your environment configurations
+         * @param environments - Object with environment configurations
+         * @param defaultEnv - Default environment key (e.g., 'dev', 'prod')
+         * @returns Promise with the current environment key
+         */
+        initialize(environments: { [key: string]: Environment }, defaultEnv?: string): Promise<string>;
+        
+        /**
+         * Subscribe to environment changes
+         * @param callback - Function to call when environment changes
+         * @returns Unsubscribe function
+         */
+        onEnvironmentChange(callback: (newEnv: Environment) => void): () => void;
+        
+        /**
+         * Get the current environment key
+         * @returns Current environment key (e.g., 'dev', 'prod')
+         */
+        getCurrentEnvironment(): string;
+        
+        /**
+         * Get the complete environment configuration
+         * @returns Environment configuration object
+         */
+        getEnvironmentConfig(): EnvironmentConfig;
+        
+        /**
+         * Show the floating debug panel
+         */
+        showDebugPanel(): void;
+        
+        /**
+         * Hide the floating debug panel
+         */
+        hideDebugPanel(): void;
+        
+        /**
+         * Log a debug message
+         * @param message - Debug message to log
+         */
+        log(message: string): void;
+        
+        /**
+         * Manually log HTTP request and response
+         * @param request - HTTP request info
+         * @param response - HTTP response info
+         */
+        logHttpRequest(request: HttpRequestInfo, response: HttpResponseInfo): void;
+        
+        /**
+         * Log WebView navigation
+         * @param url - URL that the WebView navigated to
+         */
+        logWebViewNavigation(url: string): void;
+        
+        /**
+         * Clean up the debug toolkit and remove all listeners
+         */
+        destroy(): void;
+    }
+
+    export const BuildType: BuildType;
+    const debugToolKit: DebugToolKit;
+    export default debugToolKit;
+}

package/index.js

@@ -0,0 +1,10 @@
+/**
+ * React Native Debug Toolkit
+ * A comprehensive debugging toolkit for React Native
+ */
+
+import DebugToolKit from './lib/DebugToolKit';
+import BuildType from './lib/utils/BuildTypeBridge';
+
+export { BuildType };
+export default DebugToolKit;

package/ios/BuildTypeModule.h

@@ -0,0 +1,4 @@
+#import <React/RCTBridgeModule.h>
+
+@interface BuildTypeModule : NSObject <RCTBridgeModule>
+@end 

package/ios/BuildTypeModule.m

@@ -0,0 +1,71 @@
+#import "BuildTypeModule.h"
+
+@implementation BuildTypeModule
+
+RCT_EXPORT_MODULE();
+
++ (BOOL)requiresMainQueueSetup
+{
+  return NO;
+}
+
+- (NSDictionary *)constantsToExport
+{
+#ifdef DEBUG
+  BOOL isDebug = YES;
+#else
+  BOOL isDebug = NO;
+#endif
+  
+  return @{ @"isDebug": @(isDebug) };
+}
+
+RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(isDebugModeSync)
+{
+#ifdef DEBUG
+  return @(YES);
+#else
+  return @(NO);
+#endif
+}
+
+RCT_EXPORT_BLOCKING_SYNCHRONOUS_METHOD(isReleaseModeSync)
+{
+#ifdef DEBUG
+  return @(NO);
+#else
+  return @(YES);
+#endif
+}
+
+RCT_EXPORT_METHOD(isDebugMode:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+{
+#ifdef DEBUG
+  resolve(@(YES));
+#else
+  resolve(@(NO));
+#endif
+}
+
+RCT_EXPORT_METHOD(isReleaseMode:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+{
+#ifdef DEBUG
+  resolve(@(NO));
+#else
+  resolve(@(YES));
+#endif
+}
+
+RCT_EXPORT_METHOD(getBuildType:(RCTPromiseResolveBlock)resolve
+                  rejecter:(RCTPromiseRejectBlock)reject)
+{
+#ifdef DEBUG
+  resolve(@"debug");
+#else
+  resolve(@"release");
+#endif
+}
+
+@end 

package/lib/DebugToolKit.js

@@ -0,0 +1,83 @@
+import React from 'react'
+import { BackHandler, Pressable, Text } from 'react-native'
+import RootSiblings from 'react-native-root-siblings'
+import FloatPanelView from './views/FloatPanelView'
+
+class DebugToolKit {
+  static instance = null
+
+  constructor() {
+    if (DebugToolKit.instance) {
+      return DebugToolKit.instance
+    }
+
+    this.floatPanel = null
+    this.features = []
+
+    BackHandler.addEventListener('hardwareBackPress', () => true)
+    DebugToolKit.instance = this
+  }
+
+  addFeature(feature) {
+    if (!__DEV__) {
+      return this
+    }
+
+    if (!feature.name || !feature.label || !feature.setup || !feature.getData) {
+      console.error('Invalid feature format', feature)
+      return this
+    }
+
+    feature.setup()
+    this.features.push(feature)
+    this.updateDebugPanel()
+    return this
+  }
+
+  showDebugPanel = () => {
+    if (!__DEV__) {
+      return
+    }
+
+    if (!this.floatPanel) {
+      this.floatPanel = new RootSiblings(
+        <FloatPanelView features={this.features} close={this.hideDebugPanel} />,
+      )
+    }
+  }
+
+  hideDebugPanel = () => {
+    if (this.floatPanel) {
+      this.floatPanel.destroy()
+      this.floatPanel = null
+    }
+  }
+
+  updateDebugPanel() {
+    if (this.floatPanel) {
+      this.floatPanel.update(
+        <FloatPanelView features={this.features} close={this.hideDebugPanel} />,
+      )
+    }
+  }
+
+  destroy() {
+    this.hideDebugPanel()
+
+    if (this.restartModal) {
+      this.restartModal.destroy()
+      this.restartModal = null
+    }
+
+    this.features.forEach((feature) => {
+      if (typeof feature.cleanup === 'function') {
+        feature.cleanup()
+      }
+    })
+
+    this.features = []
+    BackHandler.removeEventListener('hardwareBackPress')
+  }
+}
+
+export default DebugToolKit

package/lib/EnvironmentManager.ts

@@ -0,0 +1,80 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+
+export type BaseEnvironmentConfig = {
+  [key: string]: any;
+};
+
+export class EnvironmentManager<T extends BaseEnvironmentConfig> {
+  private static instance: EnvironmentManager<any>;
+  private currentEnv: string;
+  private environments: Record<string, T>;
+  private listeners: ((env: T) => void)[] = [];
+  static ENV_STORAGE_KEY = '@debug_toolkit_env';
+
+  protected constructor() {
+    this.environments = {};
+    this.currentEnv = '';
+  }
+
+  public static getInstance<T extends BaseEnvironmentConfig>(): EnvironmentManager<T> {
+    if (!EnvironmentManager.instance) {
+      EnvironmentManager.instance = new EnvironmentManager<T>();
+    }
+    return EnvironmentManager.instance;
+  }
+
+  public async initialize(environments: Record<string, T>, defaultEnv: string): Promise<string> {
+    if (!__DEV__) return defaultEnv;
+
+    this.environments = environments;
+    
+    try {
+      const savedEnv = await AsyncStorage.getItem(EnvironmentManager.ENV_STORAGE_KEY);
+      this.currentEnv = savedEnv || defaultEnv;
+      await AsyncStorage.setItem(EnvironmentManager.ENV_STORAGE_KEY, this.currentEnv);
+      return this.currentEnv;
+    } catch (error) {
+      console.error('EnvironmentManager initialization error:', error);
+      this.currentEnv = defaultEnv;
+      return defaultEnv;
+    }
+  }
+
+  public async changeEnvironment(newValue: string): Promise<void> {
+    if (newValue === this.currentEnv) return;
+    
+    try {
+      await AsyncStorage.setItem(EnvironmentManager.ENV_STORAGE_KEY, newValue);
+      this.currentEnv = newValue;
+      
+      const envConfig = this.environments[newValue];
+      this.listeners.forEach(listener => listener(envConfig));
+    } catch (error) {
+      console.error('Failed to change environment:', error);
+      throw error;
+    }
+  }
+
+  public getCurrentEnvironment(): string {
+    return this.currentEnv;
+  }
+
+  public getEnvironmentConfig(): T {
+    return this.environments[this.currentEnv];
+  }
+
+  public getEnvironments(): Record<string, T> {
+    return this.environments;
+  }
+
+  public onEnvironmentChange(listener: (env: T) => void): () => void {
+    this.listeners.push(listener);
+    return () => {
+      this.listeners = this.listeners.filter(l => l !== listener);
+    };
+  }
+
+  public destroy(): void {
+    this.listeners = [];
+  }
+}