react-native-inapp-inspector 1.1.17 → 1.1.19

package/dist/esm/components/ApisTabView.js

@@ -1,196 +0,0 @@
-import React from 'react';
-import { FlatList, Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
-import Svg, { Circle } from 'react-native-svg';
-import { useTranslation } from 'react-i18next';
-import TouchableScale from './TouchableScale';
-import LogCard from './LogCard';
-import DomainHeader from './DomainHeader';
-import EmptyState from './EmptyState';
-import AnimatedEntrance from './AnimatedEntrance';
-import { SearchIcon, ClearIcon, SortArrowIcon, FilterIcon, WipeIcon, ChevronIcon, } from './NetworkIcons';
-import { STATUS_FILTERS, METHOD_COLORS } from '../constants';
-import { getDomainColor } from '../helpers';
-import { AppColors } from '../styles/AppColors';
-import { AppFonts } from '../styles/AppFonts';
-import styles from '../styles';
-export const ApisTabView = React.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 } = useTranslation();
-    const isSearchOrFilter = search.length > 0 || statusFilters.size > 0 || methodFilters.size > 0;
-    const renderItem = React.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 domain={item.domain} count={item.count} color={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 index={index} distance={8}>
-          <LogCard item={log} onPress={() => onSelectLog(log)} isSelected={selectedLogs.has(log.id)} onSelect={() => onToggleSelectLog(log.id)} searchStr={search}/>
-        </AnimatedEntrance>);
-    }, [
-        collapsedDomains,
-        onToggleCollapseDomain,
-        sectionFilters,
-        onToggleSectionFilter,
-        onSelectLog,
-        selectedLogs,
-        onToggleSelectLog,
-        search,
-    ]);
-    return (<View style={{ flex: 1 }}>
-      {/* Search and Filters Toolbar */}
-      <View style={{
-            backgroundColor: AppColors.white,
-            borderBottomWidth: 1,
-            borderBottomColor: AppColors.dividerColor,
-            paddingBottom: 6,
-        }}>
-        <View style={[styles.toolbarRow, { marginTop: 12, marginBottom: 8 }]}>
-          <View style={styles.searchContainer}>
-            <SearchIcon color={AppColors.grayTextWeak} size={16}/>
-            <TextInput placeholder={t('search.apis_placeholder')} placeholderTextColor={AppColors.grayTextWeak} value={search} onChangeText={onSetSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-            {search.length > 0 && (<Pressable onPress={() => onSetSearch('')} hitSlop={10} style={styles.clearBtn}>
-                <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-              </Pressable>)}
-          </View>
-
-          <View style={styles.toolbarRight}>
-            <TouchableScale style={styles.toolbarBtn} onPress={onToggleSortOrder} hitSlop={10}>
-              <SortArrowIcon color={AppColors.grayTextStrong} size={18} direction={sortOrder === 'newest' ? 'down' : 'up'}/>
-            </TouchableScale>
-            <TouchableScale style={[
-            styles.toolbarBtn,
-            {
-                borderColor: 'rgba(255,46,87,0.22)',
-                backgroundColor: 'rgba(255,46,87,0.06)',
-            },
-        ]} onPress={onDeleteLogs} hitSlop={6}>
-              <WipeIcon color={AppColors.errorColor} size={15}/>
-            </TouchableScale>
-          </View>
-        </View>
-
-        {/* Filter Chips Scroll View */}
-        <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ marginVertical: 4, maxHeight: 46 }} contentContainerStyle={{
-            paddingHorizontal: 16,
-            paddingBottom: 4,
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 8,
-        }}>
-          <TouchableScale onPress={onToggleGroupByDomain}>
-            <View style={[
-            styles.statusFilterChip,
-            groupByDomain && {
-                borderColor: AppColors.purple,
-                backgroundColor: 'rgba(107, 78, 255, 0.08)',
-            },
-        ]}>
-              <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
-                <FilterIcon size={12} color={groupByDomain ? AppColors.purple : AppColors.grayTextStrong}/>
-                <Text style={[
-            styles.statusFilterText,
-            groupByDomain && {
-                color: AppColors.purple,
-                fontFamily: AppFonts.interBold,
-            },
-        ]}>
-                  {t('filters.group_by_domain')}
-                </Text>
-              </View>
-            </View>
-          </TouchableScale>
-
-          {/* Status Filter Chips */}
-          {STATUS_FILTERS.map(f => {
-            const active = statusFilters.has(f);
-            const badgeColor = f === '2xx'
-                ? AppColors.greenColor
-                : f === '3xx'
-                    ? AppColors.skyBlue
-                    : f === '4xx'
-                        ? AppColors.lightOrange
-                        : f === '5xx'
-                            ? AppColors.errorColor
-                            : AppColors.grayText;
-            return (<TouchableScale key={f} onPress={() => onToggleStatusFilter(f)}>
-                <View style={[
-                    styles.statusFilterChip,
-                    active && {
-                        borderColor: badgeColor,
-                        backgroundColor: `${badgeColor}15`,
-                    },
-                ]}>
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 5 }}>
-                    <Svg width="8" height="8" viewBox="0 0 8 8">
-                      <Circle cx="4" cy="4" r="4" fill={active ? badgeColor : AppColors.grayTextWeak}/>
-                    </Svg>
-                    <Text style={[
-                    styles.statusFilterText,
-                    active && {
-                        color: badgeColor,
-                        fontFamily: AppFonts.interBold,
-                    },
-                ]}>
-                      {f}
-                    </Text>
-                  </View>
-                </View>
-              </TouchableScale>);
-        })}
-
-          {/* Method Filter Chips */}
-          {availableMethods.map(method => {
-            const active = methodFilters.has(method);
-            const mColor = METHOD_COLORS[method] ?? AppColors.purple;
-            return (<TouchableScale key={method} onPress={() => onToggleMethodFilter(method)}>
-                <View style={[
-                    styles.statusFilterChip,
-                    active && {
-                        borderColor: mColor,
-                        backgroundColor: `${mColor}15`,
-                    },
-                ]}>
-                  <Text style={[
-                    styles.statusFilterText,
-                    active && {
-                        color: mColor,
-                        fontFamily: AppFonts.interBold,
-                    },
-                ]}>
-                    {method}
-                  </Text>
-                </View>
-              </TouchableScale>);
-        })}
-        </ScrollView>
-      </View>
-
-      {/* Main List */}
-      <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={<Text style={[styles.resultCount, { marginBottom: 4, marginTop: 12 }]}>
-            {t('filters.showing_requests', {
-                filtered: logCounts.filtered,
-                total: logCounts.total,
-            })}
-          </Text>} renderItem={renderItem} initialNumToRender={15} maxToRenderPerBatch={15} windowSize={7} removeClippedSubviews={true} ListEmptyComponent={<EmptyState isSearch={isSearchOrFilter}/>} contentContainerStyle={[
-            styles.listContent,
-            filteredLogs.length === 0 && { flexGrow: 1 },
-        ]} keyboardShouldPersistTaps="handled"/>
-
-      {/* Scroll to Top Button */}
-      <TouchableScale onPress={() => {
-            apisListRef.current?.scrollToOffset({
-                offset: 0,
-                animated: true,
-            });
-        }} hitSlop={10} style={styles.scrollTopBtn}>
-        <View style={{ transform: [{ rotate: '180deg' }] }}>
-          <ChevronIcon color={AppColors.white} size={18}/>
-        </View>
-      </TouchableScale>
-    </View>);
-});
-export default ApisTabView;

package/dist/esm/components/ConsoleLogDetailView.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { ConsoleLog } from '../types';
-interface ConsoleLogDetailViewProps {
-    selectedConsoleLog: ConsoleLog;
-    detailSearch: string;
-    onSetDetailSearch: (search: string) => void;
-}
-export declare const ConsoleLogDetailView: React.FC<ConsoleLogDetailViewProps>;
-export default ConsoleLogDetailView;

package/dist/esm/components/ConsoleLogDetailView.js

@@ -1,271 +0,0 @@
-import React from 'react';
-import { Pressable, ScrollView, Text, TextInput, View, } from 'react-native';
-import { useTranslation } from 'react-i18next';
-import CopyButton from './CopyButton';
-import HighlightText from './HighlightText';
-import JsonViewer from './JsonViewer';
-import { SearchIcon, ClearIcon, } from './NetworkIcons';
-import { AppColors } from '../styles/AppColors';
-import { AppFonts } from '../styles/AppFonts';
-import styles from '../styles';
-import { getJsonContent } from '../helpers';
-export const ConsoleLogDetailView = ({ selectedConsoleLog, detailSearch, onSetDetailSearch, }) => {
-    const { t } = useTranslation();
-    const jsonContent = getJsonContent(selectedConsoleLog.message);
-    const isAnalyticsError = selectedConsoleLog.message
-        .toLowerCase()
-        .includes('[analytics error]');
-    const isUserLog = selectedConsoleLog.sourceMethod === 'log';
-    const getLogColors = () => {
-        if (isAnalyticsError) {
-            return {
-                badgeBg: `${AppColors.skyBlue}15`,
-                badgeText: AppColors.skyBlue,
-                label: 'ERROR',
-            };
-        }
-        switch (selectedConsoleLog.type) {
-            case 'error':
-                return {
-                    badgeBg: `${AppColors.errorColor}15`,
-                    badgeText: AppColors.errorColor,
-                    label: 'ERROR',
-                };
-            case 'warn':
-                return {
-                    badgeBg: `${AppColors.lightOrange}15`,
-                    badgeText: AppColors.darkOrange || AppColors.lightOrange,
-                    label: 'WARN',
-                };
-            default:
-                if (isUserLog) {
-                    return {
-                        badgeBg: AppColors.slateBorder,
-                        badgeText: AppColors.slateText,
-                        label: 'INFO',
-                    };
-                }
-                return {
-                    badgeBg: `${AppColors.purple}15`,
-                    badgeText: AppColors.purple,
-                    label: 'INFO',
-                };
-        }
-    };
-    const colors = getLogColors();
-    return (<ScrollView style={{ flex: 1, backgroundColor: AppColors.grayBackground }} contentContainerStyle={{ padding: 16, gap: 12 }} nestedScrollEnabled={true}>
-      {/* 1. Header Info Card */}
-      <View style={{
-            backgroundColor: AppColors.primaryLight,
-            borderRadius: 12,
-            borderWidth: 1,
-            borderColor: AppColors.grayBorderSecondary,
-            padding: 14,
-            gap: 12,
-        }}>
-        <View style={{
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            flexWrap: 'wrap',
-            gap: 8,
-        }}>
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
-            <View style={[styles.badge, { backgroundColor: colors.badgeBg }]}>
-              <Text style={[styles.badgeText, { color: colors.badgeText }]}>
-                {colors.label}
-              </Text>
-            </View>
-            <View style={[
-            styles.badge,
-            {
-                backgroundColor: 'rgba(107, 78, 255, 0.08)',
-                borderColor: 'rgba(107, 78, 255, 0.2)',
-                borderWidth: 1,
-            },
-        ]}>
-              <Text style={[styles.badgeText, { color: AppColors.indigoAccent }]}>
-                console.
-                {selectedConsoleLog.sourceMethod ||
-            selectedConsoleLog.type ||
-            'log'}
-              </Text>
-            </View>
-            {jsonContent && (<View style={[
-                styles.badge,
-                {
-                    backgroundColor: 'rgba(13, 148, 136, 0.08)',
-                    borderColor: 'rgba(13, 148, 136, 0.18)',
-                    borderWidth: 1,
-                },
-            ]}>
-                <Text style={[styles.badgeText, { color: AppColors.teal }]}>
-                  {Array.isArray(jsonContent.data)
-                ? `Array[${jsonContent.data.length}]`
-                : `Object{${Object.keys(jsonContent.data ?? {}).length}}`}
-                </Text>
-              </View>)}
-            {selectedConsoleLog.duplicateCount != null &&
-            selectedConsoleLog.duplicateCount > 1 && (<View style={[
-                styles.badge,
-                {
-                    backgroundColor: 'rgba(104, 75, 155, 0.1)',
-                    borderColor: 'rgba(104, 75, 155, 0.25)',
-                    borderWidth: 1,
-                },
-            ]}>
-                  <Text style={[
-                styles.badgeText,
-                { color: AppColors.purple, fontWeight: '700' },
-            ]}>
-                    ×{selectedConsoleLog.duplicateCount}
-                  </Text>
-                </View>)}
-          </View>
-
-          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-            <Text style={{
-            fontFamily: AppFonts.interBold,
-            fontSize: 12,
-            color: AppColors.grayTextWeak,
-        }}>
-              #{selectedConsoleLog.id + 1}
-            </Text>
-            <CopyButton value={selectedConsoleLog.message} label="Log message"/>
-          </View>
-        </View>
-
-        <View style={{
-            flexDirection: 'row',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            borderTopWidth: 1,
-            borderTopColor: AppColors.dividerColor,
-            paddingTop: 10,
-        }}>
-          <Text style={{
-            fontFamily: AppFonts.interMedium,
-            fontSize: 12,
-            color: AppColors.grayText,
-        }}>
-            {t('details.captured_at')}
-            <Text style={{
-            fontFamily: AppFonts.interBold,
-            color: AppColors.primaryBlack,
-        }}>
-              {new Date(selectedConsoleLog.timestamp).toLocaleTimeString()}
-            </Text>
-          </Text>
-          <Text style={{
-            fontFamily: AppFonts.interRegular,
-            fontSize: 11,
-            color: AppColors.grayTextWeak,
-        }}>
-            {selectedConsoleLog.message.length} {t('details.chars')}
-          </Text>
-        </View>
-      </View>
-
-      {/* 2. Caller Stack Frame Card (if available) */}
-      {selectedConsoleLog.caller &&
-            selectedConsoleLog.caller !== 'Unknown' && (<View style={{
-                backgroundColor: AppColors.primaryLight,
-                borderRadius: 12,
-                borderWidth: 1,
-                borderColor: AppColors.grayBorderSecondary,
-                padding: 14,
-                gap: 8,
-            }}>
-            <View style={{
-                flexDirection: 'row',
-                justifyContent: 'space-between',
-                alignItems: 'center',
-            }}>
-              <Text style={{
-                fontFamily: AppFonts.interBold,
-                fontSize: 11,
-                color: AppColors.grayTextWeak,
-                letterSpacing: 0.5,
-            }}>
-                {t('details.caller_location')}
-              </Text>
-              <CopyButton value={selectedConsoleLog.caller} label="Caller location"/>
-            </View>
-            <View style={{
-                backgroundColor: AppColors.grayBackground,
-                padding: 10,
-                borderRadius: 8,
-                borderWidth: 1,
-                borderColor: AppColors.dividerColor,
-            }}>
-              <Text style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 11.5,
-                color: AppColors.primaryBlack,
-            }} selectable>
-                {selectedConsoleLog.caller}
-              </Text>
-            </View>
-          </View>)}
-
-      {/* 3. Search Bar for detail page */}
-      <View style={styles.searchContainer}>
-        <SearchIcon color={AppColors.grayTextWeak} size={16}/>
-        <TextInput placeholder={t('search.log_details_placeholder')} placeholderTextColor={AppColors.grayTextWeak} value={detailSearch} onChangeText={onSetDetailSearch} style={styles.searchInput} autoCorrect={false} autoCapitalize="none"/>
-        {detailSearch.length > 0 && (<Pressable onPress={() => onSetDetailSearch('')} hitSlop={10} style={styles.clearBtn}>
-            <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-          </Pressable>)}
-      </View>
-
-      {/* 4. Log Content Card */}
-      <View style={{
-            backgroundColor: AppColors.primaryLight,
-            borderRadius: 12,
-            borderWidth: 1,
-            borderColor: AppColors.grayBorderSecondary,
-            padding: 14,
-            gap: 10,
-        }}>
-        <Text style={{
-            fontFamily: AppFonts.interBold,
-            fontSize: 11,
-            color: AppColors.grayTextWeak,
-            letterSpacing: 0.5,
-        }}>
-          {t('details.log_payload')}
-        </Text>
-
-        {jsonContent ? (<>
-            {jsonContent.header ? (<View style={{
-                    padding: 10,
-                    backgroundColor: AppColors.grayBackground,
-                    borderRadius: 8,
-                    borderWidth: 1,
-                    borderColor: AppColors.dividerColor,
-                    marginBottom: 6,
-                }}>
-                <HighlightText text={jsonContent.header} search={detailSearch} style={{
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 12,
-                    color: AppColors.primaryBlack,
-                }} highlightStyle={styles.highlight} detectLinks={true} selectable={true}/>
-              </View>) : null}
-            <JsonViewer data={jsonContent.data} search={detailSearch} wrap={true}/>
-          </>) : (<View style={{
-                padding: 12,
-                backgroundColor: AppColors.grayBackground,
-                borderRadius: 8,
-                borderWidth: 1,
-                borderColor: AppColors.dividerColor,
-            }}>
-            <HighlightText text={selectedConsoleLog.message} search={detailSearch} style={{
-                fontFamily: AppFonts.interRegular,
-                fontSize: 12,
-                color: AppColors.primaryBlack,
-                lineHeight: 18,
-            }} highlightStyle={styles.highlight} detectLinks={true} selectable={true}/>
-          </View>)}
-      </View>
-    </ScrollView>);
-};
-export default ConsoleLogDetailView;

package/dist/esm/components/ConsoleLogsTabView.d.ts

@@ -1,24 +0,0 @@
-import React from 'react';
-import { ConsoleLog, LocalFilter, SortOrder } from '../types';
-interface ConsoleLogsTabViewProps {
-    logSearch: string;
-    onSetLogSearch: (val: string) => void;
-    logSortOrder: SortOrder;
-    onToggleSortOrder: () => void;
-    onDeleteLogs: () => void;
-    logFilters: Set<LocalFilter>;
-    onSetLogFilters: React.Dispatch<React.SetStateAction<Set<LocalFilter>>>;
-    logCounts: {
-        all: string;
-        info: string;
-        warn: string;
-        error: string;
-        'user-log': string;
-        analytics: string;
-    };
-    visibleConsoleLogs: ConsoleLog[];
-    filteredConsoleLogs: ConsoleLog[];
-    onSelectConsoleLog: (item: ConsoleLog) => void;
-}
-export declare const ConsoleLogsTabView: React.FC<ConsoleLogsTabViewProps>;
-export default ConsoleLogsTabView;