react-native-inapp-inspector 1.1.13 → 1.1.15

package/dist/commonjs/components/ApisTabView.js

@@ -0,0 +1,235 @@
+"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 });
+exports.ApisTabView = void 0;
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const react_i18next_1 = require("react-i18next");
+const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+const LogCard_1 = __importDefault(require("./LogCard"));
+const DomainHeader_1 = __importDefault(require("./DomainHeader"));
+const EmptyState_1 = __importDefault(require("./EmptyState"));
+const AnimatedEntrance_1 = __importDefault(require("./AnimatedEntrance"));
+const NetworkIcons_1 = require("./NetworkIcons");
+const constants_1 = require("../constants");
+const helpers_1 = require("../helpers");
+const AppColors_1 = require("../styles/AppColors");
+const AppFonts_1 = require("../styles/AppFonts");
+const styles_1 = __importDefault(require("../styles"));
+exports.ApisTabView = react_1.default.memo(({ search, onSetSearch, sortOrder, onToggleSortOrder, statusFilters, onToggleStatusFilter, methodFilters, onToggleMethodFilter, availableMethods, sectionFilters, onToggleSectionFilter, groupByDomain, onToggleGroupByDomain, collapsedDomains, onToggleCollapseDomain, onDeleteLogs, selectedLogs, onToggleSelectLog, filteredLogs, groupedListItems, onSelectLog, apisListRef, logCounts, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const isSearchOrFilter = search.length > 0 || statusFilters.size > 0 || methodFilters.size > 0;
+    const renderItem = react_1.default.useCallback(({ item, index }) => {
+        if ('type' in item && item.type === 'header') {
+            const isCollapsed = collapsedDomains.has(item.domain);
+            const secFilter = sectionFilters[item.domain] ?? new Set();
+            return (<DomainHeader_1.default domain={item.domain} count={item.count} color={(0, helpers_1.getDomainColor)(item.domain)} isCollapsed={isCollapsed} onToggle={() => onToggleCollapseDomain(item.domain)} activeFilters={secFilter} onToggleFilter={f => onToggleSectionFilter(item.domain, f)} has2xx={item.has2xx} has4xx={item.has4xx} has5xx={item.has5xx}/>);
+        }
+        const log = item;
+        return (<AnimatedEntrance_1.default index={index} distance={8}>
+          <LogCard_1.default item={log} onPress={() => onSelectLog(log)} isSelected={selectedLogs.has(log.id)} onSelect={() => onToggleSelectLog(log.id)} searchStr={search}/>
+        </AnimatedEntrance_1.default>);
+    }, [
+        collapsedDomains,
+        onToggleCollapseDomain,
+        sectionFilters,
+        onToggleSectionFilter,
+        onSelectLog,
+        selectedLogs,
+        onToggleSelectLog,
+        search,
+    ]);
+    return (<react_native_1.View style={{ flex: 1 }}>
+      {/* Search and Filters Toolbar */}
+      <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('search.apis_placeholder')} placeholderTextColor={AppColors_1.AppColors.grayTextWeak} value={search} onChangeText={onSetSearch} style={styles_1.default.searchInput} autoCorrect={false} autoCapitalize="none"/>
+            {search.length > 0 && (<react_native_1.Pressable onPress={() => onSetSearch('')} 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} onPress={onToggleSortOrder} hitSlop={10}>
+              <NetworkIcons_1.SortArrowIcon color={AppColors_1.AppColors.grayTextStrong} size={18} direction={sortOrder === 'newest' ? 'down' : 'up'}/>
+            </TouchableScale_1.default>
+            <TouchableScale_1.default style={[
+            styles_1.default.toolbarBtn,
+            {
+                borderColor: 'rgba(255,46,87,0.22)',
+                backgroundColor: 'rgba(255,46,87,0.06)',
+            },
+        ]} onPress={onDeleteLogs} hitSlop={6}>
+              <NetworkIcons_1.WipeIcon color={AppColors_1.AppColors.errorColor} size={15}/>
+            </TouchableScale_1.default>
+          </react_native_1.View>
+        </react_native_1.View>
+
+        {/* Filter Chips Scroll View */}
+        <react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginVertical: 4, maxHeight: 46 }} contentContainerStyle={{
+            paddingHorizontal: 16,
+            paddingBottom: 4,
+            flexDirection: 'row',
+            alignItems: 'center',
+            gap: 8,
+        }}>
+          <TouchableScale_1.default onPress={onToggleGroupByDomain}>
+            <react_native_1.View style={[
+            styles_1.default.statusFilterChip,
+            groupByDomain && {
+                borderColor: AppColors_1.AppColors.purple,
+                backgroundColor: 'rgba(107, 78, 255, 0.08)',
+            },
+        ]}>
+              <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                <NetworkIcons_1.FilterIcon size={12} color={groupByDomain ? AppColors_1.AppColors.purple : AppColors_1.AppColors.grayTextStrong}/>
+                <react_native_1.Text style={[
+            styles_1.default.statusFilterText,
+            groupByDomain && {
+                color: AppColors_1.AppColors.purple,
+                fontFamily: AppFonts_1.AppFonts.interBold,
+            },
+        ]}>
+                  {t('filters.group_by_domain')}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+          </TouchableScale_1.default>
+
+          {/* Status Filter Chips */}
+          {constants_1.STATUS_FILTERS.map(f => {
+            const active = statusFilters.has(f);
+            const badgeColor = f === '2xx'
+                ? AppColors_1.AppColors.greenColor
+                : f === '3xx'
+                    ? AppColors_1.AppColors.skyBlue
+                    : f === '4xx'
+                        ? AppColors_1.AppColors.lightOrange
+                        : f === '5xx'
+                            ? AppColors_1.AppColors.errorColor
+                            : AppColors_1.AppColors.grayText;
+            return (<TouchableScale_1.default key={f} onPress={() => onToggleStatusFilter(f)}>
+                <react_native_1.View style={[
+                    styles_1.default.statusFilterChip,
+                    active && {
+                        borderColor: badgeColor,
+                        backgroundColor: `${badgeColor}15`,
+                    },
+                ]}>
+                  <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
+                    <react_native_svg_1.default width="8" height="8" viewBox="0 0 8 8">
+                      <react_native_svg_1.Circle cx="4" cy="4" r="4" fill={active ? badgeColor : AppColors_1.AppColors.grayTextWeak}/>
+                    </react_native_svg_1.default>
+                    <react_native_1.Text style={[
+                    styles_1.default.statusFilterText,
+                    active && {
+                        color: badgeColor,
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                    },
+                ]}>
+                      {f}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>
+              </TouchableScale_1.default>);
+        })}
+
+          {/* Method Filter Chips */}
+          {availableMethods.map(method => {
+            const active = methodFilters.has(method);
+            const mColor = constants_1.METHOD_COLORS[method] ?? AppColors_1.AppColors.purple;
+            return (<TouchableScale_1.default key={method} onPress={() => onToggleMethodFilter(method)}>
+                <react_native_1.View style={[
+                    styles_1.default.statusFilterChip,
+                    active && {
+                        borderColor: mColor,
+                        backgroundColor: `${mColor}15`,
+                    },
+                ]}>
+                  <react_native_1.Text style={[
+                    styles_1.default.statusFilterText,
+                    active && {
+                        color: mColor,
+                        fontFamily: AppFonts_1.AppFonts.interBold,
+                    },
+                ]}>
+                    {method}
+                  </react_native_1.Text>
+                </react_native_1.View>
+              </TouchableScale_1.default>);
+        })}
+        </react_native_1.ScrollView>
+      </react_native_1.View>
+
+      {/* Main List */}
+      <react_native_1.FlatList ref={apisListRef} data={groupByDomain ? groupedListItems : filteredLogs} keyExtractor={(item, index) => 'id' in item && item.id != null
+            ? item.id.toString()
+            : 'domain' in item
+                ? `domain-${item.domain}`
+                : index.toString()} ListHeaderComponent={<react_native_1.Text style={[styles_1.default.resultCount, { marginBottom: 4, marginTop: 12 }]}>
+            {t('filters.showing_requests', {
+                filtered: logCounts.filtered,
+                total: logCounts.total,
+            })}
+          </react_native_1.Text>} renderItem={renderItem} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState_1.default isSearch={isSearchOrFilter}/>} contentContainerStyle={[
+            styles_1.default.listContent,
+            filteredLogs.length === 0 && { flexGrow: 1 },
+        ]} keyboardShouldPersistTaps="handled"/>
+
+      {/* Scroll to Top Button */}
+      <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 = exports.ApisTabView;

package/dist/commonjs/components/CodeSnippet.d.ts

@@ -1,8 +1,4 @@
 import React from 'react';
-interface CodeSnippetProps {
-    code: string;
-    language: 'html' | 'css' | 'javascript';
-    search?: string;
-}
+import { CodeSnippetProps } from '../types';
 declare const CodeSnippet: React.FC<CodeSnippetProps>;
 export default CodeSnippet;

package/dist/commonjs/components/CodeSnippet.js

@@ -265,10 +265,10 @@ const getStyleForType = (type) => {
             return [styles.plain, { color: AppColors_1.AppColors.primaryBlack }];
     }
 };
-const ArrowUpIcon = ({ color = '#64748B', size = 16 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+const ArrowUpIcon = ({ color = AppColors_1.AppColors.slate500, size = 16 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
     <react_native_svg_1.Path d="M18 15l-6-6-6 6" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
   </react_native_svg_1.default>);
-const ArrowDownIcon = ({ color = '#64748B', size = 16 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
+const ArrowDownIcon = ({ color = AppColors_1.AppColors.slate500, size = 16 }) => (<react_native_svg_1.default width={size} height={size} viewBox="0 0 24 24" fill="none">
     <react_native_svg_1.Path d="M6 9l6 6 6-6" stroke={color} strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"/>
   </react_native_svg_1.default>);
 const CodeSnippetLine = react_1.default.memo(({ line, lineIndex, language, search, isActiveMatch, }) => {
@@ -481,14 +481,14 @@ const CodeSnippet = ({ code, language, search, }) => {
       </react_native_1.View>
     </react_native_1.View>);
 };
-const monoFont = react_native_1.Platform.OS === 'ios' ? 'Menlo' : 'monospace';
+const monoFont = AppFonts_1.AppFonts.interRegular;
 const styles = react_native_1.StyleSheet.create({
     container: {
         flex: 1,
-        backgroundColor: '#F8FAFC',
+        backgroundColor: AppColors_1.AppColors.slate50,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: '#E2E8F0',
+        borderColor: AppColors_1.AppColors.slate200,
         overflow: 'hidden',
     },
     searchRow: {
@@ -501,10 +501,10 @@ const styles = react_native_1.StyleSheet.create({
         flex: 1,
         flexDirection: 'row',
         alignItems: 'center',
-        backgroundColor: '#FFFFFF',
+        backgroundColor: AppColors_1.AppColors.white,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: '#E2E8F0',
+        borderColor: AppColors_1.AppColors.slate200,
         paddingHorizontal: 8,
         height: 32,
     },
@@ -512,16 +512,16 @@ const styles = react_native_1.StyleSheet.create({
         flex: 1,
         fontFamily: AppFonts_1.AppFonts.interRegular,
         fontSize: 12,
-        color: '#0F172A',
+        color: AppColors_1.AppColors.slate900,
         marginLeft: 6,
         paddingVertical: 0,
     },
     matchCountText: {
         fontFamily: AppFonts_1.AppFonts.interMedium,
         fontSize: 10,
-        color: '#64748B',
+        color: AppColors_1.AppColors.slate500,
         marginHorizontal: 6,
-        backgroundColor: '#F1F5F9',
+        backgroundColor: AppColors_1.AppColors.slate100,
         paddingHorizontal: 6,
         paddingVertical: 2,
         borderRadius: 4,
@@ -532,10 +532,10 @@ const styles = react_native_1.StyleSheet.create({
     navArrowsGroup: {
         flexDirection: 'row',
         alignItems: 'center',
-        backgroundColor: '#FFFFFF',
+        backgroundColor: AppColors_1.AppColors.white,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: '#E2E8F0',
+        borderColor: AppColors_1.AppColors.slate200,
         height: 32,
         paddingHorizontal: 2,
     },
@@ -552,31 +552,31 @@ const styles = react_native_1.StyleSheet.create({
         paddingVertical: 1,
     },
     activeMatchRow: {
-        backgroundColor: 'rgba(234, 179, 8, 0.22)',
+        backgroundColor: `${AppColors_1.AppColors.amber600}38`,
         borderLeftWidth: 4,
-        borderLeftColor: '#EAB308',
+        borderLeftColor: AppColors_1.AppColors.amber600,
     },
     gutter: {
         width: 40,
-        backgroundColor: '#F1F5F9',
+        backgroundColor: AppColors_1.AppColors.slate100,
         borderRightWidth: 1,
-        borderRightColor: '#E2E8F0',
+        borderRightColor: AppColors_1.AppColors.slate200,
         justifyContent: 'flex-start',
         alignItems: 'flex-end',
         paddingRight: 6,
         paddingTop: 1,
     },
     activeMatchGutter: {
-        backgroundColor: 'rgba(234, 179, 8, 0.35)',
-        borderRightColor: 'rgba(234, 179, 8, 0.5)',
+        backgroundColor: `${AppColors_1.AppColors.amber600}59`,
+        borderRightColor: `${AppColors_1.AppColors.amber600}80`,
     },
     lineNumber: {
         fontFamily: monoFont,
         fontSize: 9,
-        color: '#94A3B8',
+        color: AppColors_1.AppColors.slate400,
     },
     activeMatchLineNumber: {
-        color: '#854D0E',
+        color: AppColors_1.AppColors.amber800,
         fontWeight: 'bold',
     },
     codeLine: {
@@ -588,71 +588,71 @@ const styles = react_native_1.StyleSheet.create({
     codeLineText: {
         fontFamily: monoFont,
         fontSize: 10.5,
-        color: '#334155',
+        color: AppColors_1.AppColors.slate700,
         flexWrap: 'wrap',
     },
     plain: {
         fontFamily: monoFont,
         fontSize: 10.5,
-        color: '#334155',
+        color: AppColors_1.AppColors.slate700,
     },
     comment: {
         fontFamily: monoFont,
         fontSize: 10.5,
-        color: '#64748B',
+        color: AppColors_1.AppColors.slate500,
         fontStyle: 'italic',
     },
     string: {
         fontFamily: monoFont,
         fontSize: 10.5,
-        color: '#D97706',
+        color: AppColors_1.AppColors.amber700,
     },
     keyword: {
         fontFamily: monoFont,
         fontSize: 10.5,
-        color: '#7C3AED',
+        color: AppColors_1.AppColors.violet600,
         fontWeight: 'bold',
     },
     builtin: {
         fontFamily: monoFont,
         fontSize: 10.5,
-        color: '#0D9488',
+        color: AppColors_1.AppColors.teal600,
     },
     number: {
         fontFamily: monoFont,
         fontSize: 10.5,
-        color: '#2563EB',
+        color: AppColors_1.AppColors.blue600,
     },
     tag: {
         fontFamily: monoFont,
         fontSize: 10.5,
-        color: '#4F46E5',
+        color: AppColors_1.AppColors.indigo600,
         fontWeight: 'bold',
     },
     attribute: {
         fontFamily: monoFont,
         fontSize: 10.5,
-        color: '#0D9488',
+        color: AppColors_1.AppColors.teal600,
     },
     selector: {
         fontFamily: monoFont,
         fontSize: 10.5,
-        color: '#7C3AED',
+        color: AppColors_1.AppColors.violet600,
         fontWeight: 'bold',
     },
     property: {
         fontFamily: monoFont,
         fontSize: 10.5,
-        color: '#0D9488',
+        color: AppColors_1.AppColors.teal600,
     },
     value: {
         fontFamily: monoFont,
         fontSize: 10.5,
-        color: '#EA580C',
+        color: AppColors_1.AppColors.orange600,
     },
     highlight: {
-        backgroundColor: '#FDE047',
-        color: '#000000',
+        backgroundColor: AppColors_1.AppColors.highlightYellow,
+        color: AppColors_1.AppColors.black,
     },
 });
 exports.default = CodeSnippet;

package/dist/commonjs/components/ConsoleLogCard.d.ts

@@ -1,10 +1,3 @@
 import React from 'react';
-import { ConsoleLog } from '../types';
-import { WebViewLog } from '../customHooks/webViewLogger';
-interface ConsoleLogCardProps {
-    item: ConsoleLog | WebViewLog;
-    searchStr?: string;
-    isWebView?: boolean;
-}
+import { ConsoleLogCardProps } from '../types';
 export declare const ConsoleLogCard: React.NamedExoticComponent<ConsoleLogCardProps>;
-export {};