react-native-inapp-inspector 2.0.0 → 2.0.1

package/dist/commonjs/components/Inspector/MainScreen.js

@@ -1,9 +1,42 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const InspectorContext_1 = require("./InspectorContext");
 const ErrorBoundary_1 = __importDefault(require("../ErrorBoundary"));
@@ -34,6 +67,40 @@ const MainScreen = () => {
         (activeTab === 'logs' && selectedLog != null) ||
         (activeTab === 'redux' && (selectedReduxSlice != null || selectedReduxAction != null)) ||
         (activeTab === 'crash' && selectedCrash != null);
+    // ─── 60 FPS Transition Animations ──────────────────────────────────────────
+    const detailAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        if (isDetailActive) {
+            detailAnim.setValue(0);
+            react_native_1.Animated.spring(detailAnim, {
+                toValue: 1,
+                friction: 8,
+                tension: 65,
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [isDetailActive]);
+    const settingsAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        if (settingsPage !== null) {
+            settingsAnim.setValue(0);
+            react_native_1.Animated.spring(settingsAnim, {
+                toValue: 1,
+                friction: 8,
+                tension: 65,
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [settingsPage !== null]);
+    const tabAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(1)).current;
+    (0, react_1.useEffect)(() => {
+        tabAnim.setValue(0);
+        react_native_1.Animated.timing(tabAnim, {
+            toValue: 1,
+            duration: 150,
+            useNativeDriver: true,
+        }).start();
+    }, [activeTab]);
     return (<>
       {(react_native_1.Platform.OS === 'ios' || react_native_1.Platform.OS === 'android') &&
             isEnabled &&
@@ -54,23 +121,86 @@ const MainScreen = () => {
 
               <InspectorHeader_1.default />
 
-              {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
-              {!isDetailActive && settingsPage === null ? (<TabBar_1.default />) : null}
+              <react_native_1.View style={{ flex: 1 }}>
+                {isReady ? (<react_native_1.View style={{ flex: 1 }}>
+                    {/* ─── Horizontal Scrollable Tab Bar inside Content ─── */}
+                    {!isDetailActive && <TabBar_1.default />}
 
-              {settingsPage !== null ? (<SettingsPanel_1.default />) : isReady ? (isDetailActive ? (activeTab === 'apis' && selected != null ? (<NetworkDetail_1.default />) : activeTab === 'analytics' && selectedEvent != null ? (<AnalyticsDetail_1.default event={selectedEvent}/>) : activeTab === 'logs' && selectedLog != null ? (<LogDetail_1.default />) : activeTab === 'redux' ? (<ReduxDetail_1.default />) : activeTab === 'crash' && selectedCrash != null ? (<CrashDetail_1.default />) : null) : (<react_native_1.View style={{ flex: 1 }}>
-                    {activeTab === 'apis' && <NetworkTab_1.default />}
-                    {activeTab === 'logs' && <ConsoleTab_1.default />}
-                    {activeTab === 'analytics' && <AnalyticsTab_1.default />}
-                    {activeTab === 'redux' && <ReduxTab_1.default />}
-                    {activeTab === 'bundle' && <BundleTab_1.default />}
-                    {activeTab === 'performance' && <PerformanceTab_1.default />}
-                    {activeTab === 'crash' && <CrashTab_1.default />}
-                  </react_native_1.View>)) : (<react_native_1.View style={styles_1.default.empty}>
-                  <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
-                  <react_native_1.Text style={[styles_1.default.emptySub, { marginTop: 12 }]}>
-                    Loading logs...
-                  </react_native_1.Text>
-                </react_native_1.View>)}
+                    {/* Persistent List Layer - Never unmounted, preserves 100% native scroll with smooth tab transition */}
+                    <react_native_1.Animated.View style={[
+                    {
+                        flex: 1,
+                        opacity: tabAnim,
+                        transform: [
+                            {
+                                translateY: tabAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [6, 0],
+                                }),
+                            },
+                        ],
+                    },
+                    (isDetailActive || settingsPage !== null) && {
+                        pointerEvents: 'none',
+                    },
+                ]}>
+                      {activeTab === 'apis' && <NetworkTab_1.default />}
+                      {activeTab === 'logs' && <ConsoleTab_1.default />}
+                      {activeTab === 'analytics' && <AnalyticsTab_1.default />}
+                      {activeTab === 'redux' && <ReduxTab_1.default />}
+                      {activeTab === 'bundle' && <BundleTab_1.default />}
+                      {activeTab === 'performance' && <PerformanceTab_1.default />}
+                      {activeTab === 'crash' && <CrashTab_1.default />}
+                    </react_native_1.Animated.View>
+
+                    {/* Detail View Layer - Rendered on top with smooth slide & spring transition */}
+                    {isDetailActive && (<react_native_1.Animated.View style={[
+                        react_native_1.StyleSheet.absoluteFill,
+                        {
+                            backgroundColor: AppColors_1.AppColors.contentBg,
+                            opacity: detailAnim,
+                            transform: [
+                                {
+                                    translateX: detailAnim.interpolate({
+                                        inputRange: [0, 1],
+                                        outputRange: [32, 0],
+                                    }),
+                                },
+                            ],
+                        },
+                    ]}>
+                        {activeTab === 'apis' && selected != null && (<NetworkDetail_1.default />)}
+                        {activeTab === 'analytics' && selectedEvent != null && (<AnalyticsDetail_1.default event={selectedEvent}/>)}
+                        {activeTab === 'logs' && selectedLog != null && (<LogDetail_1.default />)}
+                        {activeTab === 'redux' && <ReduxDetail_1.default />}
+                        {activeTab === 'crash' && selectedCrash != null && (<CrashDetail_1.default />)}
+                      </react_native_1.Animated.View>)}
+                  </react_native_1.View>) : (<react_native_1.View style={styles_1.default.empty}>
+                    <react_native_1.ActivityIndicator size="large" color={AppColors_1.AppColors.purple}/>
+                    <react_native_1.Text style={[styles_1.default.emptySub, { marginTop: 12 }]}>
+                      Loading logs...
+                    </react_native_1.Text>
+                  </react_native_1.View>)}
+
+                {/* Settings Panel Layer - Rendered on top with smooth slide & spring transition */}
+                {settingsPage !== null && (<react_native_1.Animated.View style={[
+                    react_native_1.StyleSheet.absoluteFill,
+                    {
+                        backgroundColor: AppColors_1.AppColors.grayBackground,
+                        opacity: settingsAnim,
+                        transform: [
+                            {
+                                translateY: settingsAnim.interpolate({
+                                    inputRange: [0, 1],
+                                    outputRange: [24, 0],
+                                }),
+                            },
+                        ],
+                    },
+                ]}>
+                    <SettingsPanel_1.default />
+                  </react_native_1.Animated.View>)}
+              </react_native_1.View>
 
               {/* Bottom floating toast notification */}
               <Toast_1.default />

package/dist/commonjs/components/Inspector/NetworkTab.js

@@ -94,29 +94,31 @@ const FilterChip = react_1.default.memo(({ label, color, Icon, badge, active, on
     return (<TouchableScale_1.default style={styles_1.default.statusFilterWrap} onPress={onPress} hitSlop={10}>
       <react_native_1.View style={[
             styles_1.default.statusFilterChip,
+            {
+                paddingHorizontal: 9,
+                paddingVertical: 5,
+                borderRadius: 7,
+                borderWidth: 1,
+                borderColor: active ? color : `${AppColors_1.AppColors.grayBorderSecondary}`,
+                backgroundColor: active ? `${color}14` : AppColors_1.AppColors.grayBackground,
+            },
             active && {
-                borderColor: color,
-                backgroundColor: `${color}12`,
+                shadowColor: color,
+                shadowOffset: { width: 0, height: 1 },
+                shadowOpacity: 0.2,
+                shadowRadius: 2,
+                elevation: 1.5,
             },
         ]}>
-        <react_native_1.View style={[
-            styles_1.default.filterCheckbox,
-            active && [
-                styles_1.default.filterCheckboxActive,
-                { backgroundColor: color },
-            ],
-        ]}>
-          {active && (<NetworkIcons_1.CheckIcon color={AppColors_1.AppColors.white} size={10}/>)}
-        </react_native_1.View>
         {badge != null ? (<react_native_1.View style={[
                 styles_1.default.methodBadgeMini,
                 { backgroundColor: badge },
             ]}/>) : (Icon && (<Icon color={iconColor} size={13}/>))}
         <react_native_1.Text numberOfLines={1} style={[
             styles_1.default.statusFilterText,
-            active && {
-                color,
-                fontFamily: AppFonts_1.AppFonts.interBold,
+            {
+                color: active ? color : AppColors_1.AppColors.grayText,
+                fontFamily: active ? AppFonts_1.AppFonts.interBold : AppFonts_1.AppFonts.interMedium,
             },
         ]}>
           {label}
@@ -129,6 +131,19 @@ const NetworkTab = react_1.default.memo(() => {
     const { t } = (0, i18n_1.useTranslation)();
     const filtersAccordion = (0, useAccordion_1.default)(false, 300, 260);
     const apisListRef = (0, react_1.useRef)(null);
+    const [isSearchFocused, setIsSearchFocused] = react_1.default.useState(false);
+    const QUICK_API_QUERY_TAGS = (0, react_1.useMemo)(() => [
+        { label: '⚠️ Failed', query: 'is:error' },
+        { label: '🐢 Slow >1s', query: 'slow:>1s' },
+        { label: 'POST', query: 'm:POST' },
+        { label: 'GET', query: 'm:GET' },
+        { label: 'GraphQL', query: 'is:graphql' },
+        { label: 'Axios', query: 'client:axios' },
+        { label: '200 OK', query: 'status:200' },
+        { label: '404', query: 'status:404' },
+        { label: '500', query: 'status:500' },
+        { label: '🔒 HTTPS', query: 'is:https' },
+    ], []);
     const networkMetrics = (0, react_1.useMemo)(() => {
         if (!logs || logs.length === 0)
             return null;
@@ -263,12 +278,38 @@ const NetworkTab = react_1.default.memo(() => {
               </react_native_1.View>)}
 
             <react_native_1.View style={styles_1.default.toolbarRow}>
-              <react_native_1.View style={styles_1.default.searchContainer}>
-                <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
-                <react_native_1.TextInput placeholder="Search endpoints..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
-                {search.length > 0 && (<react_native_1.Pressable onPress={() => setSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
-                    <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
-                  </react_native_1.Pressable>)}
+              <react_native_1.View style={[
+                styles_1.default.searchContainer,
+                isSearchFocused && {
+                    borderColor: AppColors_1.AppColors.purple,
+                    borderWidth: 1.5,
+                },
+            ]}>
+                <NetworkIcons_1.SearchIcon color={isSearchFocused ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextWeak} size={16}/>
+                <react_native_1.TextInput placeholder="Search url, body, is:error, slow:>1s..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={setSearch} onFocus={() => setIsSearchFocused(true)} onBlur={() => setIsSearchFocused(false)} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+                {search.length > 0 && (<react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                }}>
+                    <react_native_1.View style={{
+                    backgroundColor: `${AppColors_1.AppColors.purple}20`,
+                    borderRadius: 10,
+                    paddingHorizontal: 6,
+                    paddingVertical: 2,
+                }}>
+                      <react_native_1.Text style={{
+                    color: AppColors_1.AppColors.purple,
+                    fontSize: 10,
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                }}>
+                        {filteredLogs.length}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                    <react_native_1.Pressable onPress={() => setSearch('')} hitSlop={10} style={styles_1.default.clearBtn}>
+                      <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+                    </react_native_1.Pressable>
+                  </react_native_1.View>)}
               </react_native_1.View>
 
               <react_native_1.View style={styles_1.default.toolbarRight}>
@@ -315,6 +356,49 @@ const NetworkTab = react_1.default.memo(() => {
               </react_native_1.View>
             </react_native_1.View>
 
+            {/* Advanced Search Quick Query Suggestions Bar */}
+            {(isSearchFocused || search.length > 0) && (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginBottom: 6, maxHeight: 30 }} contentContainerStyle={{
+                    paddingHorizontal: 12,
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                }}>
+                {QUICK_API_QUERY_TAGS.map(item => {
+                    const isSelected = search.includes(item.query);
+                    return (<TouchableScale_1.default key={item.query} onPress={() => {
+                            if (isSelected) {
+                                setSearch(prev => prev.replace(item.query, '').trim());
+                            }
+                            else {
+                                setSearch(prev => prev ? `${prev} ${item.query}`.trim() : item.query);
+                            }
+                        }}>
+                      <react_native_1.View style={{
+                            paddingHorizontal: 8,
+                            paddingVertical: 3.5,
+                            borderRadius: 6,
+                            backgroundColor: isSelected
+                                ? AppColors_1.AppColors.purple
+                                : `${AppColors_1.AppColors.purple}14`,
+                            borderWidth: 1,
+                            borderColor: isSelected
+                                ? AppColors_1.AppColors.purple
+                                : `${AppColors_1.AppColors.purple}30`,
+                        }}>
+                        <react_native_1.Text style={{
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                            fontSize: 10,
+                            color: isSelected
+                                ? AppColors_1.AppColors.white
+                                : AppColors_1.AppColors.purple,
+                        }}>
+                          {item.label}
+                        </react_native_1.Text>
+                      </react_native_1.View>
+                    </TouchableScale_1.default>);
+                })}
+              </react_native_1.ScrollView>)}
+
             <react_native_1.Animated.View style={[
                 filtersAccordion.bodyStyle,
                 { overflow: 'hidden' },