react-native-inapp-inspector 1.1.13 → 1.1.15

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

@@ -0,0 +1,410 @@
+"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 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const InspectorContext_1 = require("./InspectorContext");
+const react_i18next_1 = require("react-i18next");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const AnimatedEntrance_1 = __importDefault(require("../AnimatedEntrance"));
+const ConsoleLogCard_1 = require("../ConsoleLogCard");
+const EmptyState_1 = __importDefault(require("../EmptyState"));
+const EndOfListFooter_1 = __importDefault(require("../EndOfListFooter"));
+const styles_1 = __importDefault(require("../../styles"));
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const NetworkIcons_1 = require("../NetworkIcons");
+const ConsoleTab = () => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const { logSearch, setLogSearch, logSortOrder, setLogSortOrder, handleDelete, logFilters, setLogFilters, logCounts, filteredConsoleLogs, visibleConsoleLogs, isConsolePaused, setIsConsolePaused, } = (0, InspectorContext_1.useInspector)();
+    const renderItem = (0, react_1.useCallback)(({ item, index }) => (<AnimatedEntrance_1.default index={index} distance={8}>
+        <ConsoleLogCard_1.ConsoleLogCard item={item} searchStr={logSearch}/>
+      </AnimatedEntrance_1.default>), [logSearch]);
+    const keyExtractor = (0, react_1.useCallback)((item, index) => item?.id?.toString() ?? index.toString(), []);
+    const listHeader = (0, react_1.useMemo)(() => (() => {
+        const total = visibleConsoleLogs.length;
+        const filtered = filteredConsoleLogs.length;
+        const isAllSelected = logFilters.has('all') ||
+            !Array.from(logFilters).some(f => f !== 'all');
+        if (isAllSelected) {
+            return (<react_native_1.Text style={[
+                    styles_1.default.resultCount,
+                    { marginBottom: 4, marginTop: 12 },
+                ]}>
+            Showing ({filtered}/{total}) logs showing
+          </react_native_1.Text>);
+        }
+        else {
+            const activeFilterNames = Array.from(logFilters)
+                .filter(f => f !== 'all')
+                .map(f => {
+                if (f === 'user-log')
+                    return 'User Log';
+                if (f === 'analytics')
+                    return 'Analytics';
+                return (f.charAt(0).toUpperCase() +
+                    f.slice(1));
+            });
+            return (<react_native_1.Text style={[
+                    styles_1.default.resultCount,
+                    { marginBottom: 4, marginTop: 12 },
+                ]}>
+            Filtering with {activeFilterNames.join(', ')} (
+            {filtered}/{total}) logs is showing
+          </react_native_1.Text>);
+        }
+    })(), [visibleConsoleLogs, filteredConsoleLogs, logFilters]);
+    return (<react_native_1.View style={{ flex: 1 }}>
+      <react_native_1.View style={{
+            backgroundColor: AppColors_1.AppColors.white,
+            borderBottomWidth: 1,
+            borderBottomColor: AppColors_1.AppColors.dividerColor,
+            paddingBottom: 6,
+        }}>
+        <react_native_1.View style={[
+            styles_1.default.toolbarRow,
+            { marginTop: 12, marginBottom: 8 },
+        ]}>
+          <react_native_1.View style={styles_1.default.searchContainer}>
+            <NetworkIcons_1.SearchIcon color={AppColors_1.AppColors.grayTextWeak} size={16}/>
+            <react_native_1.TextInput placeholder={t('console.searchPlaceholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={logSearch} onChangeText={setLogSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+            {logSearch.length > 0 && (<react_native_1.Pressable onPress={() => setLogSearch('')} 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 style={styles_1.default.toolbarRight}>
+            <TouchableScale_1.default style={[
+            styles_1.default.toolbarBtn,
+            isConsolePaused && {
+                borderColor: `${AppColors_1.AppColors.darkOrange}50`,
+                backgroundColor: `${AppColors_1.AppColors.darkOrange}18`,
+            },
+        ]} onPress={() => setIsConsolePaused(p => !p)} hitSlop={6}>
+              <NetworkIcons_1.HeaderPauseIcon isPaused={isConsolePaused} color={isConsolePaused
+            ? AppColors_1.AppColors.darkOrange
+            : AppColors_1.AppColors.grayTextStrong} size={16}/>
+            </TouchableScale_1.default>
+            <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={() => setLogSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
+              <NetworkIcons_1.SortArrowIcon color={AppColors_1.AppColors.grayTextStrong} size={18} direction={logSortOrder === 'newest' ? 'down' : 'up'}/>
+            </TouchableScale_1.default>
+            <TouchableScale_1.default style={[
+            styles_1.default.toolbarBtn,
+            {
+                borderColor: `${AppColors_1.AppColors.errorColor}38`,
+                backgroundColor: `${AppColors_1.AppColors.errorColor}0F`,
+            },
+        ]} onPress={handleDelete} hitSlop={6}>
+              <NetworkIcons_1.TrashIcon color={AppColors_1.AppColors.errorColor} size={15}/>
+            </TouchableScale_1.default>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginVertical: 4, maxHeight: 46 }} contentContainerStyle={{
+            paddingHorizontal: 16,
+            paddingBottom: 4,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+        }}>
+          {(() => {
+            const active = logFilters.has('all');
+            return (<TouchableScale_1.default onPress={() => {
+                    setLogFilters(new Set(['all']));
+                }}>
+                <react_native_1.View style={[
+                    styles_1.default.statusFilterChip,
+                    active && {
+                        borderColor: AppColors_1.AppColors.purpleShade700,
+                        backgroundColor: AppColors_1.AppColors.purpleTintBg,
+                    },
+                ]}>
+                  {/* #7 */}
+                  <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <NetworkIcons_1.LayersIcon size={12} color={active
+                    ? AppColors_1.AppColors.purpleShade700
+                    : AppColors_1.AppColors.grayTextStrong}/>
+                    <react_native_1.Text numberOfLines={1} style={[
+                    styles_1.default.statusFilterText,
+                    active && {
+                        color: AppColors_1.AppColors.purpleShade700,
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                    },
+                ]}>
+                      All ({logCounts.all})
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </TouchableScale_1.default>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('user-log');
+            return (<TouchableScale_1.default onPress={() => {
+                    setLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('user-log')
+                            ? next.delete('user-log')
+                            : next.add('user-log');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <react_native_1.View style={[
+                    styles_1.default.statusFilterChip,
+                    active && {
+                        borderColor: AppColors_1.AppColors.slate500,
+                        backgroundColor: AppColors_1.AppColors.slate100,
+                    },
+                ]}>
+                  {/* #7 */}
+                  <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <NetworkIcons_1.UserIcon size={12} color={active
+                    ? AppColors_1.AppColors.slate700
+                    : AppColors_1.AppColors.grayTextStrong}/>
+                    <react_native_1.Text numberOfLines={1} style={[
+                    styles_1.default.statusFilterText,
+                    active && {
+                        color: AppColors_1.AppColors.slate700,
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                    },
+                ]}>
+                      User Log ({logCounts['user-log']})
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </TouchableScale_1.default>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('info');
+            return (<TouchableScale_1.default onPress={() => {
+                    setLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('info')
+                            ? next.delete('info')
+                            : next.add('info');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <react_native_1.View style={[
+                    styles_1.default.statusFilterChip,
+                    active && {
+                        borderColor: AppColors_1.AppColors.purple,
+                        backgroundColor: AppColors_1.AppColors.purpleShade50,
+                    },
+                ]}>
+                  {/* #7 */}
+                  <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <NetworkIcons_1.InfoCircleIcon size={12} color={active
+                    ? AppColors_1.AppColors.purple
+                    : AppColors_1.AppColors.grayTextStrong}/>
+                    <react_native_1.Text numberOfLines={1} style={[
+                    styles_1.default.statusFilterText,
+                    active && {
+                        color: AppColors_1.AppColors.purple,
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                    },
+                ]}>
+                      Info ({logCounts.info})
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </TouchableScale_1.default>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('warn');
+            return (<TouchableScale_1.default onPress={() => {
+                    setLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('warn')
+                            ? next.delete('warn')
+                            : next.add('warn');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <react_native_1.View style={[
+                    styles_1.default.statusFilterChip,
+                    active && {
+                        borderColor: AppColors_1.AppColors.lightOrange,
+                        backgroundColor: AppColors_1.AppColors.warnCardBg,
+                    },
+                ]}>
+                  {/* #7 */}
+                  <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <NetworkIcons_1.WarningTriangleIcon size={12} color={active
+                    ? AppColors_1.AppColors.darkOrange ||
+                        AppColors_1.AppColors.lightOrange
+                    : AppColors_1.AppColors.grayTextStrong}/>
+                    <react_native_1.Text numberOfLines={1} style={[
+                    styles_1.default.statusFilterText,
+                    active && {
+                        color: AppColors_1.AppColors.darkOrange ||
+                            AppColors_1.AppColors.lightOrange,
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                    },
+                ]}>
+                      Warning ({logCounts.warn})
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </TouchableScale_1.default>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('error');
+            return (<TouchableScale_1.default onPress={() => {
+                    setLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('error')
+                            ? next.delete('error')
+                            : next.add('error');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <react_native_1.View style={[
+                    styles_1.default.statusFilterChip,
+                    active && {
+                        borderColor: AppColors_1.AppColors.errorColor,
+                        backgroundColor: AppColors_1.AppColors.errorCardBg,
+                    },
+                ]}>
+                  {/* #7 */}
+                  <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <NetworkIcons_1.ErrorCircleIcon size={12} color={active
+                    ? AppColors_1.AppColors.errorColor
+                    : AppColors_1.AppColors.grayTextStrong}/>
+                    <react_native_1.Text numberOfLines={1} style={[
+                    styles_1.default.statusFilterText,
+                    active && {
+                        color: AppColors_1.AppColors.errorColor,
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                    },
+                ]}>
+                      Error ({logCounts.error})
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </TouchableScale_1.default>);
+        })()}
+
+          {(() => {
+            const active = logFilters.has('analytics');
+            return (<TouchableScale_1.default onPress={() => {
+                    setLogFilters(prev => {
+                        const next = new Set(prev);
+                        next.delete('all');
+                        next.has('analytics')
+                            ? next.delete('analytics')
+                            : next.add('analytics');
+                        if (next.size === 0)
+                            next.add('all');
+                        return next;
+                    });
+                }}>
+                <react_native_1.View style={[
+                    styles_1.default.statusFilterChip,
+                    active && {
+                        borderColor: AppColors_1.AppColors.skyBlue,
+                        backgroundColor: `${AppColors_1.AppColors.skyBlue}15`,
+                    },
+                ]}>
+                  {/* #7 */}
+                  <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                }}>
+                    <NetworkIcons_1.AnalyticsIcon size={12} color={active
+                    ? AppColors_1.AppColors.skyBlue
+                    : AppColors_1.AppColors.grayTextStrong}/>
+                    <react_native_1.Text numberOfLines={1} style={[
+                    styles_1.default.statusFilterText,
+                    active && {
+                        color: AppColors_1.AppColors.skyBlue,
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                    },
+                ]}>
+                      Analytics ({logCounts.analytics})
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </TouchableScale_1.default>);
+        })()}
+        </react_native_1.ScrollView>
+      </react_native_1.View>
+
+      <react_native_1.FlatList data={filteredConsoleLogs} keyExtractor={keyExtractor} ListHeaderComponent={listHeader} renderItem={renderItem} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={logSearch.length > 0 || logFilters.size > 0}/>} ListFooterComponent={filteredConsoleLogs.length > 0 ? (<EndOfListFooter_1.default count={filteredConsoleLogs.length} label="logs"/>) : null} contentContainerStyle={[
+            styles_1.default.listContent,
+            filteredConsoleLogs.length === 0 && { flexGrow: 1 },
+        ]} keyboardShouldPersistTaps="handled"/>
+    </react_native_1.View>);
+};
+exports.default = ConsoleTab;

package/dist/commonjs/components/Inspector/FabLauncher.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const FabLauncher: () => React.JSX.Element;
+export default FabLauncher;

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

@@ -0,0 +1,54 @@
+"use strict";
+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_native_1 = require("react-native");
+const react_native_linear_gradient_1 = __importDefault(require("react-native-linear-gradient"));
+const InspectorContext_1 = require("./InspectorContext");
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const BrandCircleIcon_1 = __importDefault(require("../BrandCircleIcon"));
+const AppColors_1 = require("../../styles/AppColors");
+const styles_1 = __importDefault(require("../../styles"));
+const FabLauncher = () => {
+    const { setVisible, fabPan, fabPanResponder, fabDraggedRef, pulseAnim, fabShineAnim, unreadPulseAnim, logs, analyticsEvents, } = (0, InspectorContext_1.useInspector)();
+    return (<react_native_1.Animated.View style={[styles_1.default.fabWrapper, { transform: fabPan.getTranslateTransform() }]} {...fabPanResponder.panHandlers}>
+      <TouchableScale_1.default style={{ alignItems: 'center', justifyContent: 'center' }} onPress={() => {
+            if (fabDraggedRef.current)
+                return;
+            setVisible(true);
+        }} hitSlop={10}>
+        <react_native_1.Animated.View style={[styles_1.default.fabPulseRing, { transform: [{ scale: pulseAnim }] }]}/>
+        <BrandCircleIcon_1.default size={62}/>
+        {/* #4 — shining sweep, clipped inside the circular launcher */}
+        <react_native_1.View pointerEvents="none" style={styles_1.default.fabShineClip}>
+          <react_native_1.Animated.View style={[
+            styles_1.default.fabShineStreak,
+            {
+                transform: [
+                    {
+                        translateX: fabShineAnim.interpolate({
+                            inputRange: [0, 1],
+                            outputRange: [-48, 96],
+                        }),
+                    },
+                    { rotate: '25deg' },
+                ],
+            },
+        ]}>
+            <react_native_linear_gradient_1.default colors={[
+            `${AppColors_1.AppColors.white}00`,
+            `${AppColors_1.AppColors.white}8C`,
+            `${AppColors_1.AppColors.white}00`,
+        ]} start={{ x: 0, y: 0.5 }} end={{ x: 1, y: 0.5 }} style={{ flex: 1 }}/>
+          </react_native_1.Animated.View>
+        </react_native_1.View>
+        {(logs.length > 0 || analyticsEvents.length > 0) && (<react_native_1.Animated.View style={[
+                styles_1.default.fabGreenDot,
+                { transform: [{ scale: unreadPulseAnim }] },
+            ]}/>)}
+      </TouchableScale_1.default>
+    </react_native_1.Animated.View>);
+};
+exports.default = FabLauncher;

package/dist/commonjs/components/Inspector/InsightsDashboard.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const InsightsDashboard: () => React.JSX.Element;
+export default InsightsDashboard;