react-native-debug-toolkit 0.1.1

package/lib/views/RestartModal.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import {
+    View,
+    Text,
+    Modal,
+    StyleSheet,
+    Dimensions
+} from 'react-native';
+import { DebugColors } from '../utils/DebugConst';
+
+const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
+
+const RestartModal = () => {
+    return (
+        <Modal
+            visible={true}
+            transparent={true}
+            animationType="fade"
+            onRequestClose={() => {}}
+        >
+            <View style={styles.overlay}>
+                <View style={styles.modalContent}>
+                    <Text style={styles.title}>Environment Changed</Text>
+                    <Text style={styles.message}>
+                        The app needs to restart to apply the new environment settings.{'\n\n'}
+                        Please manually kill the app and restart it.
+                    </Text>
+                </View>
+            </View>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    overlay: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'center',
+        alignItems: 'center',
+        width: screenWidth,
+        height: screenHeight,
+        zIndex: 9999,
+    },
+    modalContent: {
+        backgroundColor: 'white',
+        borderRadius: 10,
+        padding: 20,
+        width: screenWidth * 0.8,
+        alignItems: 'center',
+        elevation: 5,
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.25,
+        shadowRadius: 3.84,
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        color: DebugColors.text,
+        marginBottom: 15,
+        textAlign: 'center'
+    },
+    message: {
+        fontSize: 16,
+        color: DebugColors.text,
+        textAlign: 'center',
+        lineHeight: 22
+    }
+});
+
+export default RestartModal;

package/lib/views/SubViewEnvironment.js

@@ -0,0 +1,73 @@
+import React from 'react';
+import {
+    View,
+    Text,
+    TouchableOpacity,
+    StyleSheet,
+    ScrollView
+} from 'react-native';
+import { DebugColors } from '../utils/DebugConst';
+
+const SubViewEnvironment = ({ options, currentValue, onChange }) => {
+    return (
+        <View style={styles.container}>
+            <Text style={styles.title}>Environment</Text>
+            <ScrollView style={styles.scrollView}>
+                {options.map((option, index) => (
+                    <TouchableOpacity
+                        key={index}
+                        style={[
+                            styles.option,
+                            option.value === currentValue && styles.selectedOption
+                        ]}
+                        onPress={() => onChange(option.value)}
+                    >
+                        <Text style={[
+                            styles.optionText,
+                            option.value === currentValue && styles.selectedOptionText
+                        ]}>
+                            {option.label}
+                        </Text>
+                    </TouchableOpacity>
+                ))}
+            </ScrollView>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        padding: 15
+    },
+    title: {
+        fontSize: 18,
+        fontWeight: 'bold',
+        marginBottom: 15,
+        color: DebugColors.text
+    },
+    scrollView: {
+        flex: 1
+    },
+    option: {
+        padding: 12,
+        borderRadius: 8,
+        marginBottom: 8,
+        backgroundColor: DebugColors.background,
+        borderWidth: 1,
+        borderColor: DebugColors.border
+    },
+    selectedOption: {
+        backgroundColor: DebugColors.blue,
+        borderColor: DebugColors.blue
+    },
+    optionText: {
+        fontSize: 16,
+        color: DebugColors.text
+    },
+    selectedOptionText: {
+        color: DebugColors.white
+    }
+});
+
+export default SubViewEnvironment;

package/lib/views/SubViewHTTPLogs.js

@@ -0,0 +1,267 @@
+import React, { useState } from 'react'
+import {
+  View,
+  Text,
+  StyleSheet,
+  FlatList,
+  TouchableOpacity,
+  Modal,
+} from 'react-native'
+import HttpLogDetails from './HttpLogDetails'
+
+const SubViewHTTPLogs = ({ logs = [] }) => {
+  const [selectedLog, setSelectedLog] = useState(null)
+
+  const getMethodColor = (method) => {
+    switch (method?.toUpperCase()) {
+      case 'GET':
+        return '#0D96F2' // Standard API blue
+      case 'POST':
+        return '#49CC90' // Swagger green
+      case 'PUT':
+        return '#FCA130' // Standard PUT orange
+      case 'DELETE':
+        return '#F93E3E' // Standard DELETE red
+      default:
+        return '#666666'
+    }
+  }
+
+  const renderLogItem = ({ item }) => {
+    // Check both HTTP status and API success flag
+    const isSuccess = item.response?.success ?? item.response?.status < 400
+    const statusColor = !isSuccess ? '#ff4444' : '#00C851'
+    const methodColor = getMethodColor(item.request?.method)
+
+    return (
+      <TouchableOpacity
+        style={styles.logItem}
+        onPress={() => setSelectedLog(item)}>
+        <View style={styles.logItemContainer}>
+          <View
+            style={[styles.statusIndicator, { backgroundColor: statusColor }]}
+          />
+
+          <View style={styles.logContent}>
+            <View style={styles.methodRow}>
+              <Text style={[styles.method, { color: methodColor }]}>
+                {(item.request?.method || 'GET').toUpperCase()}
+              </Text>
+              <Text style={[styles.status, { color: statusColor }]}>
+                {item.response?.status || 'Error'}
+              </Text>
+            </View>
+
+            <Text
+              style={[styles.url, !isSuccess && styles.failedUrl]}
+              numberOfLines={2}>
+              {item.request?.url}
+            </Text>
+
+            <View style={styles.logFooter}>
+              <Text style={styles.time}>
+                {item.timestamp
+                  ? new Date(item.timestamp).toLocaleTimeString()
+                  : ''}
+              </Text>
+              {!isSuccess && item.response?.data && (
+                <Text style={styles.errorMessage} numberOfLines={1}>
+                  {item.response.data.message || 'Request Failed'}
+                </Text>
+              )}
+            </View>
+          </View>
+        </View>
+      </TouchableOpacity>
+    )
+  }
+
+  return (
+    <View style={styles.container}>
+      {logs.length === 0 ? (
+        <Text style={styles.emptyText}>No HTTP requests logged yet</Text>
+      ) : (
+        <FlatList
+          data={[...logs].sort((a, b) => b.timestamp - a.timestamp)}
+          renderItem={renderLogItem}
+          keyExtractor={(item, index) => index.toString()}
+          style={styles.list}
+        />
+      )}
+
+      <Modal
+        visible={!!selectedLog}
+        animationType='slide'
+        transparent={true}
+        onRequestClose={() => setSelectedLog(null)}>
+        {selectedLog && (
+          <TouchableOpacity
+            style={styles.modalContainer}
+            activeOpacity={1}
+            onPress={() => setSelectedLog(null)}>
+            <TouchableOpacity
+              style={styles.modalContent}
+              activeOpacity={1}
+              onPress={(e) => e.stopPropagation()}>
+              <View style={styles.modalHeader}>
+                <View style={styles.modalHeaderContent}>
+                  <View style={styles.modalMethodStatus}>
+                    <Text
+                      style={[
+                        styles.modalMethod,
+                        { color: getMethodColor(selectedLog.request?.method) },
+                      ]}>
+                      {(selectedLog.request?.method || 'GET').toUpperCase()}
+                    </Text>
+                    <Text
+                      style={[
+                        styles.modalStatus,
+                        {
+                          color:
+                            selectedLog.response?.status >= 400
+                              ? '#ff4444'
+                              : '#00C851',
+                        },
+                      ]}>
+                      {selectedLog.response?.status || 'Error'}
+                    </Text>
+                  </View>
+                </View>
+                <TouchableOpacity
+                  style={styles.closeButton}
+                  onPress={() => setSelectedLog(null)}>
+                  <Text style={styles.closeButtonText}>×</Text>
+                </TouchableOpacity>
+              </View>
+              <HttpLogDetails log={selectedLog} />
+            </TouchableOpacity>
+          </TouchableOpacity>
+        )}
+      </Modal>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  list: {
+    flex: 1,
+  },
+  emptyText: {
+    textAlign: 'center',
+    color: '#999',
+    marginTop: 20,
+  },
+  logItem: {
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+  },
+  logItemContainer: {
+    flexDirection: 'row',
+    padding: 12,
+  },
+  statusIndicator: {
+    width: 4,
+    borderRadius: 2,
+    marginRight: 12,
+  },
+  logContent: {
+    flex: 1,
+  },
+  methodRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 6,
+  },
+  method: {
+    fontSize: 15,
+    fontWeight: 'bold',
+    marginRight: 8,
+  },
+  status: {
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  url: {
+    fontSize: 13,
+    color: '#333',
+    marginBottom: 6,
+    lineHeight: 18,
+  },
+  failedUrl: {
+    color: '#ff4444',
+  },
+  logFooter: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+  time: {
+    fontSize: 12,
+    color: '#999',
+  },
+  duration: {
+    fontSize: 12,
+    color: '#999',
+  },
+  errorMessage: {
+    color: '#ff4444',
+    fontSize: 12,
+    marginLeft: 8,
+  },
+  modalContainer: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  modalContent: {
+    width: '90%',
+    height: '80%',
+    backgroundColor: '#fff',
+    borderRadius: 10,
+    overflow: 'hidden',
+  },
+  modalHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    padding: 15,
+    borderBottomWidth: 1,
+    borderBottomColor: '#eee',
+    backgroundColor: '#f8f9fa',
+  },
+  modalHeaderContent: {
+    flex: 1,
+    marginRight: 10,
+  },
+  modalMethodStatus: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  modalMethod: {
+    fontSize: 16,
+    fontWeight: 'bold',
+    marginRight: 10,
+  },
+  modalStatus: {
+    fontSize: 14,
+    fontWeight: '600',
+  },
+  closeButton: {
+    width: 30,
+    height: 30,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: 15,
+    backgroundColor: '#eee',
+  },
+  closeButtonText: {
+    fontSize: 20,
+    color: '#666',
+    lineHeight: 20,
+  },
+})
+
+export default SubViewHTTPLogs

package/lib/views/TabView.js

@@ -0,0 +1,66 @@
+import React from 'react'
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Animated,
+} from 'react-native'
+import { DebugColors } from '../utils/DebugConst'
+
+const TabView = ({ tabs, activeTab, onTabChange, children }) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.tabBar}>
+        {tabs.map((tab, index) => (
+          <TouchableOpacity
+            key={index}
+            style={[styles.tab, activeTab === index && styles.activeTab]}
+            onPress={() => onTabChange(index)}>
+            <Text
+              style={[
+                styles.tabText,
+                activeTab === index && styles.activeTabText,
+              ]}>
+              {tab.label}
+            </Text>
+          </TouchableOpacity>
+        ))}
+      </View>
+      <View style={styles.content}>{children}</View>
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  tabBar: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: DebugColors.border,
+    backgroundColor: DebugColors.background,
+  },
+  tab: {
+    flex: 1,
+    paddingVertical: 12,
+    alignItems: 'center',
+  },
+  activeTab: {
+    borderBottomWidth: 2,
+    borderBottomColor: DebugColors.blue,
+  },
+  tabText: {
+    color: DebugColors.textLight,
+    fontWeight: '500',
+  },
+  activeTabText: {
+    color: DebugColors.blue,
+  },
+  content: {
+    flex: 1,
+  },
+})
+
+export default TabView

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "react-native-debug-toolkit",
+  "version": "0.1.1",
+  "description": "A simple yet powerful debugging toolkit for React Native with a convenient floating UI for development",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "bundle": "react-native bundle --platform ios --dev false --entry-file index.js --bundle-output dist/main.jsbundle --assets-dest dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.outer.staruniongame.com/seaart-app-front/react-native-debug-toolkit.git"
+  },
+  "keywords": [
+    "react-native",
+    "debug",
+    "toolkit",
+    "logging",
+    "development-tools",
+    "floating-ui"
+  ],
+  "author": "zcj",
+  "license": "MIT",
+  "dependencies": {
+    "react-native-root-siblings": "^4.0.0"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-native": "^0.70.0"
+  },
+  "jest": {
+    "preset": "react-native"
+  }
+}