react-native-debug-toolkit 0.5.1 → 0.5.2

package/index.js

@@ -12,6 +12,14 @@ import { createZustandLogFeature, addZustandLog } from './lib/features/ZustandLo
 import { createNavigationLogFeature, addNavigationLog } from './lib/features/NavigationLogFeature'
 import { useNavigationLogger } from './lib/hooks/useNavigationLogger'
 
+// Function to clear all logs and close the panel
+const clearAll = () => {
+  const instance = DebugToolKit.instance;
+  if (instance && typeof instance.clearAll === 'function') {
+    instance.clearAll();
+  }
+};
+
 export {
   DebugToolKit,
   initializeDebugToolkit,
@@ -23,7 +31,8 @@ export {
   createNavigationLogFeature,
   addNavigationLog,
   useNavigationLogger,
-  isDebugMode
+  isDebugMode,
+  clearAll
 }
 
 export default DebugToolKit

package/lib/DebugToolKit.js

@@ -53,6 +53,21 @@ export default class DebugToolKit {
     return this
   }
 
+
+  clearAll = () => {
+    // Clear all logs from all features
+    this.features.forEach((feature) => {
+      if (typeof feature.cleanup === 'function') {
+        feature.cleanup();
+      }
+      // Re-setup the feature to initialize it again
+      if (typeof feature.setup === 'function') {
+        feature.setup();
+      }
+    });
+    
+  }
+
   showDebugPanel = () => {
     if (!this.isDebugMode) {
       return
@@ -60,7 +75,11 @@ export default class DebugToolKit {
 
     if (!this.floatPanel) {
       this.floatPanel = new RootSiblings(
-        <FloatPanelView features={this.features} close={this.hideDebugPanel} />,
+        <FloatPanelView 
+          features={this.features} 
+          close={this.hideDebugPanel} 
+          clearAll={this.clearAll}
+        />,
       )
     }
     this.isPanelVisible = true
@@ -76,7 +95,11 @@ export default class DebugToolKit {
   updateDebugPanel() {
     if (this.floatPanel) {
       this.floatPanel.update(
-        <FloatPanelView features={this.features} close={this.hideDebugPanel} />,
+        <FloatPanelView 
+          features={this.features} 
+          close={this.hideDebugPanel} 
+          clearAll={this.clearAll}
+        />,
       )
     }
   }

package/lib/views/FloatPanelView.js

@@ -387,6 +387,8 @@ export default class FloatPanelView extends Component {
   
   renderPanel() {
     const { isOpen, panelTranslateY, backdropOpacity } = this.state
+    const { clearAll } = this.props
+    
 
     if (!isOpen) {
       return null
@@ -414,10 +416,23 @@ export default class FloatPanelView extends Component {
           </View>
           <SafeAreaView style={styles.panelContent}>
             <View style={styles.header}>
-              <Text style={styles.headerTitle}>Debug Panel</Text>
-              <Pressable onPress={this._closePanel} style={styles.closeButton}>
-                <Text style={styles.closeButtonText}>×</Text>
-              </Pressable>
+              <Text style={styles.headerTitle}>Debug Toolkit</Text>
+              <View style={styles.headerButtons}>
+                {clearAll && (
+                  <TouchableOpacity 
+                    onPress={() => {
+                      clearAll()
+                      this._closePanel()
+                    }} 
+                    style={[styles.clearButton, styles.clearAllButton]}
+                  >
+                    <Text style={styles.clearButtonText}>Clear & Close</Text>
+                  </TouchableOpacity>
+                )}
+                <Pressable onPress={this._closePanel} style={styles.closeButton}>
+                  <Text style={styles.closeButtonText}>×</Text>
+                </Pressable>
+              </View>
             </View>
             
             {this.renderTabBar()}
@@ -531,23 +546,77 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    paddingHorizontal: 20,
-    paddingBottom: 4,
+    paddingHorizontal: 15,
+    paddingVertical: 12,
     borderBottomWidth: 1,
-    borderBottomColor: DebugColors.border,
+    borderBottomColor: '#e5e5e5',
+    backgroundColor: '#f9f9f9',
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 1.5,
+    elevation: 1,
   },
   headerTitle: {
     fontSize: 18,
-    fontWeight: 'bold',
-    color: DebugColors.text,
+    fontWeight: '700',
+    color: '#2c3e50',
+  },
+  headerButtons: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  clearButton: {
+    backgroundColor: DebugColors.blue,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 4,
+    marginRight: 10,
+  },
+  clearAllButton: {
+    backgroundColor: '#3498db',
+    paddingHorizontal: 14,
+    paddingVertical: 9,
+    borderRadius: 6,
+    marginRight: 12,
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.12,
+    shadowRadius: 1,
+    elevation: 2,
+  },
+  clearButtonText: {
+    color: '#fff',
+    fontSize: 13,
+    fontWeight: '600',
   },
   closeButton: {
-    padding: 8,
+    width: 30,
+    height: 30,
+    borderRadius: 15,
+    backgroundColor: '#ecf0f1',
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: "#000",
+    shadowOffset: {
+      width: 0,
+      height: 1,
+    },
+    shadowOpacity: 0.1,
+    shadowRadius: 1,
+    elevation: 1,
   },
   closeButtonText: {
-    fontSize: 24,
-    color: DebugColors.text,
+    fontSize: 20,
     fontWeight: 'bold',
+    color: '#34495e',
+    lineHeight: 20,
   },
   tabBarContainer: {
     borderBottomWidth: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-native-debug-toolkit",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development",
   "main": "index.js",
   "types": "index.d.ts",