react-native-inapp-inspector 1.1.13 → 1.1.15

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

@@ -0,0 +1,281 @@
+"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 useAccordion_1 = __importDefault(require("../../customHooks/useAccordion"));
+const TouchableScale_1 = __importDefault(require("../TouchableScale"));
+const AnimatedEntrance_1 = __importDefault(require("../AnimatedEntrance"));
+const DomainHeader_1 = __importDefault(require("../DomainHeader"));
+const LogCard_1 = __importDefault(require("../LogCard"));
+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 constants_1 = require("../../constants");
+const NetworkIcons_1 = require("../NetworkIcons");
+const STATUS_META = {
+    ALL: { color: AppColors_1.AppColors.grayText, Icon: NetworkIcons_1.LayersIcon },
+    '2xx': { color: AppColors_1.AppColors.greenColor, Icon: NetworkIcons_1.CircleCheckIcon },
+    '3xx': { color: AppColors_1.AppColors.warningIconGold, Icon: NetworkIcons_1.CircleAlertIcon },
+    '4xx': { color: AppColors_1.AppColors.darkOrange, Icon: NetworkIcons_1.CircleAlertIcon },
+    '5xx': { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon },
+    Failed: { color: AppColors_1.AppColors.errorColor, Icon: NetworkIcons_1.CircleXIcon },
+};
+const FilterChip = ({ label, color, Icon, badge, active, onPress, }) => {
+    const iconColor = active ? color : AppColors_1.AppColors.grayTextWeak;
+    return (<TouchableScale_1.default style={styles_1.default.statusFilterWrap} onPress={onPress} hitSlop={10}>
+      <react_native_1.View style={[
+            styles_1.default.statusFilterChip,
+            active && {
+                borderColor: color,
+                backgroundColor: `${color}12`,
+            },
+        ]}>
+        <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 && (<react_native_1.View style={styles_1.default.filterChipIcon}>
+              <Icon color={iconColor} size={13}/>
+            </react_native_1.View>))}
+        <react_native_1.Text style={[
+            styles_1.default.statusFilterText,
+            active && { color, fontFamily: AppFonts_1.AppFonts.interBold },
+        ]}>
+          {label}
+        </react_native_1.Text>
+      </react_native_1.View>
+    </TouchableScale_1.default>);
+};
+const NetworkTab = () => {
+    const { groupedData, search, setSearch, handleDelete, selectedLogs, sortOrder, setSortOrder, statusFilters, setStatusFilters, methodFilters, setMethodFilters, availableMethods, filteredLogs, logs, toggleSectionFilter, toggleSectionCollapse, minStart, totalRange, newLogIds, toggleSelect, setSelected, isNetworkPaused, setIsNetworkPaused, } = (0, InspectorContext_1.useInspector)();
+    const filtersAccordion = (0, useAccordion_1.default)(false, 300, 260);
+    const apisListRef = (0, react_1.useRef)(null);
+    const renderItem = (0, react_1.useCallback)(({ item, index }) => {
+        if (item.type === 'header') {
+            return (<AnimatedEntrance_1.default index={index} distance={8}>
+            <DomainHeader_1.default pageName={item.pageName} color={item.color} stats={item.stats} activeFilters={item.activeFilters} onToggleFilter={toggleSectionFilter} isCollapsed={item.isCollapsed} onToggleCollapse={toggleSectionCollapse} isFirst={item.isFirst} timestamp={item.timestamp}/>
+          </AnimatedEntrance_1.default>);
+        }
+        const { log, isLast, color } = item;
+        return (<AnimatedEntrance_1.default index={index} distance={8} style={styles_1.default.treeNodeRow}>
+          <react_native_1.View style={styles_1.default.treeLines}>
+            <react_native_1.View style={[
+                styles_1.default.modernTreeLine,
+                { borderColor: color },
+                isLast && styles_1.default.modernTreeLineLast,
+            ]}/>
+            {!isLast && (<react_native_1.View style={[styles_1.default.modernTreeBranch, { borderColor: color }]}/>)}
+          </react_native_1.View>
+          <react_native_1.View style={styles_1.default.treeCardWrapper}>
+            <LogCard_1.default item={log} isSelected={selectedLogs.has(log.id)} onToggleSelect={toggleSelect} onPress={() => {
+                (0, InspectorContext_1.animateNextLayout)();
+                setSelected(log);
+            }} timelineMinStart={minStart} timelineTotalRange={totalRange} isNew={newLogIds.has(log.id)} searchStr={search}/>
+          </react_native_1.View>
+        </AnimatedEntrance_1.default>);
+    }, [
+        minStart,
+        totalRange,
+        newLogIds,
+        selectedLogs,
+        toggleSelect,
+        search,
+        toggleSectionFilter,
+        toggleSectionCollapse,
+        setSelected,
+    ]);
+    return (<react_native_1.View style={{ flex: 1 }}>
+      <react_native_1.FlatList ref={apisListRef} data={groupedData} keyExtractor={item => item?.id?.toString()} renderItem={renderItem} initialNumToRender={10} maxToRenderPerBatch={10} windowSize={5} removeClippedSubviews={true} ListHeaderComponent={<react_native_1.View style={{ marginTop: 8 }}>
+            <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>
+
+              <react_native_1.View style={styles_1.default.toolbarRight}>
+                <TouchableScale_1.default style={[
+                styles_1.default.toolbarBtn,
+                isNetworkPaused && {
+                    borderColor: `${AppColors_1.AppColors.darkOrange}50`,
+                    backgroundColor: `${AppColors_1.AppColors.darkOrange}18`,
+                },
+            ]} onPress={() => setIsNetworkPaused(p => !p)} hitSlop={6}>
+                  <NetworkIcons_1.HeaderPauseIcon isPaused={isNetworkPaused} color={isNetworkPaused
+                ? AppColors_1.AppColors.darkOrange
+                : AppColors_1.AppColors.grayTextStrong} size={16}/>
+                </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}/>
+                  {selectedLogs.size > 0 && (<react_native_1.View style={styles_1.default.trashBadge}>
+                      <react_native_1.Text style={styles_1.default.trashBadgeText}>
+                        {selectedLogs.size}
+                      </react_native_1.Text>
+                    </react_native_1.View>)}
+                </TouchableScale_1.default>
+
+                <TouchableScale_1.default style={styles_1.default.toolbarBtn} onPress={() => setSortOrder(o => o === 'newest' ? 'oldest' : 'newest')} hitSlop={10}>
+                  <NetworkIcons_1.SortArrowIcon direction={sortOrder === 'newest' ? 'down' : 'up'} color={AppColors_1.AppColors.grayTextStrong} size={18}/>
+                </TouchableScale_1.default>
+
+                <TouchableScale_1.default style={[
+                styles_1.default.toolbarBtn,
+                filtersAccordion.isOpen &&
+                    styles_1.default.toolbarBtnActive,
+            ]} onPress={filtersAccordion.toggleOpen} hitSlop={10}>
+                  <NetworkIcons_1.FilterIcon color={filtersAccordion.isOpen
+                ? AppColors_1.AppColors.purple
+                : AppColors_1.AppColors.grayTextStrong} size={18}/>
+                </TouchableScale_1.default>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            <react_native_1.Animated.View style={[
+                filtersAccordion.bodyStyle,
+                { overflow: 'hidden' },
+            ]}>
+              <react_native_1.View style={styles_1.default.filtersContainer}>
+                <react_native_1.Text style={styles_1.default.filtersHeading}>
+                  STATUS
+                </react_native_1.Text>
+                <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
+                  {constants_1.STATUS_FILTERS.map(filter => {
+                const isAll = filter === 'ALL';
+                const active = isAll
+                    ? statusFilters.size === 0
+                    : statusFilters.has(filter);
+                const meta = STATUS_META[filter] ?? {
+                    color: AppColors_1.AppColors.grayText,
+                    Icon: NetworkIcons_1.LayersIcon,
+                };
+                return (<FilterChip key={filter} label={filter} color={meta.color} Icon={meta.Icon} active={active} onPress={() => {
+                        if (isAll) {
+                            setStatusFilters(new Set());
+                        }
+                        else {
+                            setStatusFilters(prev => {
+                                const next = new Set(prev);
+                                next.has(filter)
+                                    ? next.delete(filter)
+                                    : next.add(filter);
+                                return next;
+                            });
+                        }
+                    }}/>);
+            })}
+                </react_native_1.ScrollView>
+
+                <react_native_1.Text style={[
+                styles_1.default.filtersHeading,
+                { marginTop: 16 },
+            ]}>
+                  METHOD
+                </react_native_1.Text>
+                <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={styles_1.default.statusRowContent}>
+                  {availableMethods.map(filter => {
+                const isAll = filter === 'ALL';
+                const active = isAll
+                    ? methodFilters.size === 0
+                    : methodFilters.has(filter);
+                const methodColor = constants_1.METHOD_COLORS[filter] ??
+                    constants_1.METHOD_COLORS.ALL;
+                return (<FilterChip key={filter} label={filter} color={methodColor} badge={methodColor} active={active} onPress={() => {
+                        if (isAll) {
+                            setMethodFilters(new Set());
+                        }
+                        else {
+                            setMethodFilters(prev => {
+                                const next = new Set(prev);
+                                next.has(filter)
+                                    ? next.delete(filter)
+                                    : next.add(filter);
+                                return next;
+                            });
+                        }
+                    }}/>);
+            })}
+                </react_native_1.ScrollView>
+              </react_native_1.View>
+            </react_native_1.Animated.View>
+
+            {(search ||
+                statusFilters.size > 0 ||
+                methodFilters.size > 0) && (<react_native_1.Text style={styles_1.default.resultCount}>
+                {filteredLogs.length === logs.length
+                    ? `${logs.length} requests`
+                    : `${filteredLogs.length} of ${logs.length} filtered requests`}
+              </react_native_1.Text>)}
+          </react_native_1.View>} ListEmptyComponent={<EmptyState_1.default isSearch={search.length > 0 || statusFilters.size > 0}/>} ListFooterComponent={groupedData.length > 0 ? (<EndOfListFooter_1.default count={filteredLogs.length} label="requests"/>) : null} contentContainerStyle={[
+            styles_1.default.listContent,
+            filteredLogs.length === 0 && { flexGrow: 1 },
+        ]} keyboardShouldPersistTaps="handled"/>
+      {/* #2 — always-visible scroll-to-top, bottom right */}
+      <TouchableScale_1.default onPress={() => {
+            apisListRef.current?.scrollToOffset({
+                offset: 0,
+                animated: true,
+            });
+        }} hitSlop={10} style={styles_1.default.scrollTopBtn}>
+        <react_native_1.View style={{ transform: [{ rotate: '180deg' }] }}>
+          <NetworkIcons_1.ChevronIcon color={AppColors_1.AppColors.white} size={18}/>
+        </react_native_1.View>
+      </TouchableScale_1.default>
+    </react_native_1.View>);
+};
+exports.default = NetworkTab;

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

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

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

@@ -0,0 +1,75 @@
+"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 InspectorContext_1 = require("./InspectorContext");
+const ReduxTreeView_1 = require("../ReduxTreeView");
+const styles_1 = __importDefault(require("../../styles"));
+const AppColors_1 = require("../../styles/AppColors");
+const AppFonts_1 = require("../../styles/AppFonts");
+const NetworkIcons_1 = require("../NetworkIcons");
+const ReduxTab = () => {
+    const { reduxState, reduxLastActionMap, reduxSearch, setReduxSearch, } = (0, InspectorContext_1.useInspector)();
+    if (!reduxState) {
+        return (<react_native_1.View style={styles_1.default.emptyContainer}>
+        <react_native_1.View style={styles_1.default.emptyIconWrap}>
+          <NetworkIcons_1.TerminalIcon color={AppColors_1.AppColors.purple} size={32}/>
+        </react_native_1.View>
+        <react_native_1.Text style={styles_1.default.emptyTitle}>No Redux Store</react_native_1.Text>
+        <react_native_1.Text style={styles_1.default.emptySub}>
+          To inspect Redux store, call connectReduxStore(store) at app start.
+        </react_native_1.Text>
+      </react_native_1.View>);
+    }
+    const reducerKeys = Object.keys(reduxState);
+    if (reducerKeys.length === 0) {
+        return (<react_native_1.View style={styles_1.default.emptyContainer}>
+        <react_native_1.Text style={styles_1.default.emptyTitle}>Empty Store</react_native_1.Text>
+        <react_native_1.Text style={styles_1.default.emptySub}>Connected store state is empty.</react_native_1.Text>
+      </react_native_1.View>);
+    }
+    const lastActionMap = reduxLastActionMap;
+    return (<react_native_1.ScrollView style={styles_1.default.detailScroll} contentContainerStyle={{ paddingBottom: 24 }}>
+      {/* Search Bar */}
+      <react_native_1.View style={{
+            flexDirection: 'row',
+            alignItems: 'center',
+            backgroundColor: AppColors_1.AppColors.grayBackground,
+            borderRadius: 8,
+            marginHorizontal: 16,
+            marginTop: 16,
+            marginBottom: 12,
+            paddingHorizontal: 10,
+            borderWidth: 1,
+            borderColor: AppColors_1.AppColors.dividerColor,
+            height: 36,
+        }}>
+        <react_native_1.TextInput placeholder="Search Redux keys or values..." placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={reduxSearch} onChangeText={setReduxSearch} style={{
+            flex: 1,
+            fontFamily: AppFonts_1.AppFonts.interRegular,
+            fontSize: 12,
+            color: AppColors_1.AppColors.grayTextStrong,
+            padding: 0,
+        }} autoCorrect={false} autoCapitalize="none"/>
+        {reduxSearch.length > 0 && (<react_native_1.Pressable onPress={() => setReduxSearch('')} hitSlop={10}>
+            <NetworkIcons_1.ClearIcon color={AppColors_1.AppColors.grayTextWeak} size={14}/>
+          </react_native_1.Pressable>)}
+      </react_native_1.View>
+
+      {/* Main Content Card */}
+      <react_native_1.View style={{
+            backgroundColor: AppColors_1.AppColors.primaryLight,
+            borderRadius: 12,
+            borderWidth: 1,
+            borderColor: AppColors_1.AppColors.grayBorderSecondary,
+            marginHorizontal: 16,
+            padding: 12,
+        }}>
+        <ReduxTreeView_1.ReduxTreeView state={reduxState} lastActionMap={lastActionMap} search={reduxSearch}/>
+      </react_native_1.View>
+    </react_native_1.ScrollView>);
+};
+exports.default = ReduxTab;

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

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