react-native-inapp-inspector 1.1.18 → 1.1.19

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

@@ -1,19 +0,0 @@
-import React from 'react';
-import { Animated } from 'react-native';
-import { NetworkLog, AnalyticsEvent, ConsoleLog } from '../types';
-interface InspectorHeaderProps {
-    headerTopPadding: number;
-    selected: NetworkLog | null;
-    selectedEvent: AnalyticsEvent | null;
-    selectedConsoleLog: ConsoleLog | null;
-    detailTitle: string;
-    showHeaderInfo: boolean;
-    clearAnim: Animated.Value;
-    onBack: () => void;
-    onToggleHeaderInfo: () => void;
-    onClearAll: () => void;
-    onOpenSettings: () => void;
-    onCloseModal: () => void;
-}
-export declare const InspectorHeader: React.FC<InspectorHeaderProps>;
-export default InspectorHeader;

package/dist/esm/components/InspectorHeader.js

@@ -1,323 +0,0 @@
-import React from 'react';
-import { Alert, Animated, Text, View, } from 'react-native';
-import LinearGradient from 'react-native-linear-gradient';
-import { useTranslation } from 'react-i18next';
-import TouchableScale from './TouchableScale';
-import { WhiteBackNavigation, WipeIcon, SettingsIcon, CloseWhite, ClockIcon, BrandCircleIcon, ChevronIcon, } from './NetworkIcons';
-import { AppColors } from '../styles/AppColors';
-import { AppFonts } from '../styles/AppFonts';
-import styles from '../styles';
-import { METHOD_COLORS, LIB_VERSION } from '../constants';
-import { getStatusColor, getAppName } from '../helpers';
-export const InspectorHeader = React.memo(({ headerTopPadding, selected, selectedEvent, selectedConsoleLog, detailTitle, showHeaderInfo, clearAnim, onBack, onToggleHeaderInfo, onClearAll, onOpenSettings, onCloseModal, }) => {
-    const { t } = useTranslation();
-    const isNoDetailSelected = selected == null && selectedEvent == null && selectedConsoleLog == null;
-    return (<LinearGradient colors={[AppColors.purple, AppColors.gradientPurpleStart]} style={styles.headerGradient}>
-      <View style={{ paddingTop: headerTopPadding, width: '100%' }}>
-        <View style={styles.header}>
-          <View style={[
-            styles.headerLeft,
-            {
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 16,
-                flex: isNoDetailSelected ? 5 : 1,
-            },
-        ]}>
-            <TouchableScale onPress={onBack} hitSlop={15} style={[
-            {
-                width: 38,
-                height: 38,
-                borderRadius: 19,
-                alignItems: 'center',
-                justifyContent: 'center',
-                backgroundColor: 'rgba(255,255,255,0.18)',
-                borderWidth: 1,
-                borderColor: 'rgba(255,255,255,0.30)',
-            },
-            isNoDetailSelected && { display: 'none' },
-        ]}>
-              <View style={{
-            position: 'absolute',
-            width: 48,
-            height: 48,
-            borderRadius: 24,
-            backgroundColor: 'rgba(255,255,255,0.10)',
-        }}/>
-              <WhiteBackNavigation />
-            </TouchableScale>
-
-            {isNoDetailSelected ? (<TouchableScale onPress={onToggleHeaderInfo} style={{
-                flexDirection: 'row',
-                alignItems: 'center',
-                gap: 10,
-                flex: 1,
-            }}>
-                <View style={{
-                width: 38,
-                height: 38,
-                borderRadius: 19,
-                backgroundColor: 'rgba(255,255,255,0.13)',
-                borderWidth: 1.5,
-                borderColor: 'rgba(255,255,255,0.25)',
-                alignItems: 'center',
-                justifyContent: 'center',
-            }}>
-                  <BrandCircleIcon size={26} color={AppColors.white}/>
-                </View>
-                <View style={styles.columnFlex1}>
-                  <View style={styles.rowGap4}>
-                    <Text style={[
-                styles.headerTitle,
-                { fontSize: 16, color: AppColors.white },
-            ]}>
-                      {t('header.title')}
-                    </Text>
-                    <View style={{
-                transform: [
-                    { rotate: showHeaderInfo ? '180deg' : '0deg' },
-                ],
-            }}>
-                      <ChevronIcon color="rgba(255,255,255,0.7)" size={12}/>
-                    </View>
-                  </View>
-
-                  {showHeaderInfo && (<View style={{
-                    marginTop: 4,
-                    padding: 8,
-                    backgroundColor: 'rgba(0,0,0,0.25)',
-                    borderRadius: 8,
-                    borderWidth: 1,
-                    borderColor: 'rgba(255,255,255,0.15)',
-                    gap: 4,
-                }}>
-                      <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 11,
-                    color: AppColors.white,
-                }}>
-                        {getAppName()}
-                      </Text>
-                      <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 6,
-                }}>
-                        <Text style={{
-                    fontFamily: AppFonts.interMedium,
-                    fontSize: 10,
-                    color: 'rgba(255,255,255,0.8)',
-                }}>
-                          {t('header.engine')}
-                        </Text>
-                        <View style={{
-                    paddingHorizontal: 6,
-                    paddingVertical: 1,
-                    borderRadius: 4,
-                    backgroundColor: 'rgba(255,255,255,0.2)',
-                }}>
-                          <Text style={{
-                    fontFamily: AppFonts.interBold,
-                    fontSize: 9,
-                    color: AppColors.white,
-                }}>
-                            v{LIB_VERSION}
-                          </Text>
-                        </View>
-                      </View>
-                    </View>)}
-                </View>
-              </TouchableScale>) : null}
-          </View>
-
-          {!isNoDetailSelected && (<View style={styles.headerCenter}>
-              {selected != null ? (<View style={styles.headerDetailCenter}>
-                  <View style={styles.headerDetailRow}>
-                    <View style={[
-                    styles.headerMethodBadge,
-                    {
-                        backgroundColor: METHOD_COLORS[selected.method] ??
-                            AppColors.grayText,
-                    },
-                ]}>
-                      <Text style={styles.headerMethodText}>
-                        {selected.method}
-                      </Text>
-                    </View>
-                    <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
-                      {detailTitle}
-                    </Text>
-                  </View>
-                  <View style={styles.headerDetailSubRow}>
-                    <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 5,
-                    paddingHorizontal: 8,
-                    paddingVertical: 3,
-                    borderRadius: 20,
-                    backgroundColor: `${getStatusColor(selected.status)}26`,
-                    borderWidth: 1,
-                    borderColor: `${getStatusColor(selected.status)}55`,
-                }}>
-                      <View style={[
-                    styles.headerStatusDot,
-                    {
-                        backgroundColor: getStatusColor(selected.status),
-                    },
-                ]}/>
-                      <Text style={[
-                    styles.headerSubTitle,
-                    { fontFamily: AppFonts.interBold },
-                ]}>
-                        {selected.status === 0
-                    ? 'Failed'
-                    : selected.status ?? 'Pending'}
-                      </Text>
-                    </View>
-                    <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 4,
-                    paddingHorizontal: 8,
-                    paddingVertical: 3,
-                    borderRadius: 20,
-                    backgroundColor: 'rgba(255,255,255,0.16)',
-                }}>
-                      <ClockIcon color={AppColors.white} size={11}/>
-                      <Text style={styles.headerSubTitle}>
-                        {selected.duration != null
-                    ? `${selected.duration}ms`
-                    : '—'}
-                      </Text>
-                    </View>
-                  </View>
-                </View>) : selectedEvent != null ? (<View style={styles.headerDetailCenter}>
-                  <View style={styles.headerDetailRow}>
-                    <View style={[
-                    styles.headerMethodBadge,
-                    {
-                        backgroundColor: selectedEvent.source === 'firebase'
-                            ? 'rgba(224,123,26,0.3)'
-                            : 'rgba(124,92,191,0.3)',
-                    },
-                ]}>
-                      <Text style={styles.headerMethodText}>
-                        {selectedEvent.source === 'firebase' ? 'FB' : 'MAN'}
-                      </Text>
-                    </View>
-                    <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
-                      {selectedEvent.name}
-                    </Text>
-                  </View>
-                  <View style={styles.headerDetailSubRow}>
-                    <View style={[
-                    styles.headerStatusDot,
-                    {
-                        backgroundColor: selectedEvent.source === 'firebase'
-                            ? AppColors.amber
-                            : AppColors.purple,
-                    },
-                ]}/>
-                    <Text style={styles.headerSubTitle}>
-                      {Object.keys(selectedEvent.params ?? {}).length} param
-                      {Object.keys(selectedEvent.params ?? {}).length !== 1
-                    ? 's'
-                    : ''}
-                      {' · '}
-                      {selectedEvent.source}
-                    </Text>
-                  </View>
-                </View>) : selectedConsoleLog != null ? (<View style={styles.headerDetailCenter}>
-                  <View style={styles.headerDetailRow}>
-                    <View style={[
-                    styles.headerMethodBadge,
-                    {
-                        backgroundColor: selectedConsoleLog.type === 'error'
-                            ? AppColors.errorColor
-                            : selectedConsoleLog.type === 'warn'
-                                ? AppColors.lightOrange
-                                : AppColors.purple,
-                    },
-                ]}>
-                      <Text style={styles.headerMethodText}>
-                        {selectedConsoleLog.type?.toUpperCase() || 'LOG'}
-                      </Text>
-                    </View>
-                    <Text style={styles.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
-                      {t('details.console_log')} #{selectedConsoleLog.id + 1}
-                    </Text>
-                  </View>
-                  <View style={styles.headerDetailSubRow}>
-                    <Text style={styles.headerSubTitle}>
-                      console.
-                      {selectedConsoleLog.sourceMethod ||
-                    selectedConsoleLog.type ||
-                    'log'}
-                    </Text>
-                  </View>
-                </View>) : null}
-            </View>)}
-
-          <View style={[
-            styles.headerRight,
-            isNoDetailSelected && {
-                flexShrink: 0,
-                minWidth: 116,
-            },
-        ]}>
-            {isNoDetailSelected && (<TouchableScale onPress={() => {
-                Alert.alert(t('header.clear_all'), t('header.clear_all_confirm'), [
-                    { text: t('header.cancel'), style: 'cancel' },
-                    {
-                        text: t('header.clear'),
-                        onPress: onClearAll,
-                        style: 'destructive',
-                    },
-                ]);
-            }} hitSlop={15} style={[
-                styles.closeButtonSquare,
-                {
-                    marginRight: 8,
-                    backgroundColor: 'rgba(255,255,255,0.15)',
-                },
-            ]}>
-                <Animated.View style={{
-                transform: [
-                    {
-                        rotate: clearAnim.interpolate({
-                            inputRange: [0, 1],
-                            outputRange: ['0deg', '-25deg'],
-                        }),
-                    },
-                    {
-                        scale: clearAnim.interpolate({
-                            inputRange: [0, 0.5, 1],
-                            outputRange: [1, 1.25, 1],
-                        }),
-                    },
-                ],
-            }}>
-                  <WipeIcon color={AppColors.white} size={16}/>
-                </Animated.View>
-              </TouchableScale>)}
-
-            {isNoDetailSelected && (<TouchableScale onPress={onOpenSettings} hitSlop={15} style={[
-                styles.closeButtonSquare,
-                {
-                    marginRight: 8,
-                    backgroundColor: 'rgba(255,255,255,0.15)',
-                },
-            ]}>
-                <SettingsIcon color={AppColors.white} size={16}/>
-              </TouchableScale>)}
-
-            <TouchableScale onPress={onCloseModal} hitSlop={15} style={styles.closeButtonSquare}>
-              <CloseWhite size={16}/>
-            </TouchableScale>
-          </View>
-        </View>
-      </View>
-    </LinearGradient>);
-});
-export default InspectorHeader;

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

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Animated } from 'react-native';
-import { ActiveTab } from '../types';
-interface InspectorTabBarProps {
-    activeTab: ActiveTab;
-    tabVisibility: Record<string, boolean>;
-    apisCount: number;
-    logsCount: number;
-    analyticsCount: number;
-    hasUnreadApis: boolean;
-    hasUnreadLogs: boolean;
-    unreadPulseAnim: Animated.Value;
-    onSelectTab: (tabKey: ActiveTab) => void;
-}
-export declare const InspectorTabBar: React.FC<InspectorTabBarProps>;
-export default InspectorTabBar;

package/dist/esm/components/InspectorTabBar.js

@@ -1,84 +0,0 @@
-import React from 'react';
-import { Animated, ScrollView, Text, View } from 'react-native';
-import { useTranslation } from 'react-i18next';
-import TouchableScale from './TouchableScale';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, } from './NetworkIcons';
-import { InspectorTab } from '../enums';
-import { AppColors } from '../styles/AppColors';
-import styles from '../styles';
-export const InspectorTabBar = React.memo(({ activeTab, tabVisibility, apisCount, logsCount, analyticsCount, hasUnreadApis, hasUnreadLogs, unreadPulseAnim, onSelectTab, }) => {
-    const { t } = useTranslation();
-    const tabs = [
-        {
-            key: InspectorTab.APIs,
-            label: t('tabs.apis'),
-            count: apisCount,
-            hasUnread: hasUnreadApis,
-            icon: (color) => <SignalIcon color={color} size={14}/>,
-        },
-        {
-            key: InspectorTab.Logs,
-            label: t('tabs.logs'),
-            count: logsCount,
-            hasUnread: hasUnreadLogs,
-            icon: (color) => <TerminalIcon color={color} size={14}/>,
-        },
-        {
-            key: InspectorTab.Analytics,
-            label: t('tabs.analytics'),
-            count: analyticsCount,
-            hasUnread: false,
-            icon: (color) => <AnalyticsIcon color={color} size={14}/>,
-        },
-        {
-            key: InspectorTab.Redux,
-            label: t('tabs.redux'),
-            count: null,
-            hasUnread: false,
-            icon: (color) => (<View style={{ width: 14, height: 14, alignItems: 'center', justifyContent: 'center' }}>
-          <Text style={{ fontSize: 10, color, fontWeight: '700' }}>⚛︎</Text>
-        </View>),
-        },
-    ];
-    return (<View style={styles.tabBarContainer}>
-      <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ paddingRight: 16 }}>
-        {tabs
-            .filter(tab => tabVisibility?.[tab.key])
-            .map(tab => {
-            const isActive = activeTab === tab.key;
-            const iconColor = isActive ? AppColors.white : AppColors.grayText;
-            const countLabel = tab.count > 99 ? '99+' : String(tab.count);
-            const showUnread = (tab.key === 'apis' && hasUnreadApis) ||
-                (tab.key === 'logs' && hasUnreadLogs);
-            return (<TouchableScale key={tab.key} onPress={() => onSelectTab(tab.key)} style={[
-                    styles.contentTabButton,
-                    isActive && styles.contentTabButtonActive,
-                ]}>
-                <View style={{
-                    flexDirection: 'row',
-                    alignItems: 'center',
-                    gap: 6,
-                }}>
-                  {typeof tab.icon === 'function' ? tab.icon(iconColor) : null}
-                  <Text numberOfLines={1} ellipsizeMode="tail" style={[
-                    styles.contentTabButtonText,
-                    isActive && styles.contentTabButtonTextActive,
-                ]}>
-                    {tab.label} {tab.count > 0 ? `(${countLabel})` : ''}
-                  </Text>
-                  {showUnread && (<Animated.View style={{
-                        width: 6,
-                        height: 6,
-                        borderRadius: 3,
-                        backgroundColor: AppColors.errorColor,
-                        marginLeft: 4,
-                        alignSelf: 'center',
-                        transform: [{ scale: unreadPulseAnim }],
-                    }}/>)}
-                </View>
-              </TouchableScale>);
-        })}
-      </ScrollView>
-    </View>);
-});
-export default InspectorTabBar;

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

@@ -1,7 +0,0 @@
-import React from 'react';
-interface NavigationTrackerProps {
-    onStateChange: (state: any) => void;
-    navigationRef?: any;
-}
-export declare const NavigationTracker: ({ onStateChange, navigationRef, }: NavigationTrackerProps) => React.ReactElement | null;
-export default NavigationTracker;

package/dist/esm/components/NavigationTracker.js

@@ -1,39 +0,0 @@
-import React, { useContext, useEffect } from 'react';
-import { NavigationContext, useNavigationState } from '@react-navigation/native';
-const ContextNavigationTracker = ({ onStateChange, }) => {
-    const navState = useNavigationState(state => state);
-    useEffect(() => {
-        onStateChange(navState);
-    }, [navState, onStateChange]);
-    return null;
-};
-export const NavigationTracker = ({ onStateChange, navigationRef, }) => {
-    const navContext = useContext(NavigationContext);
-    useEffect(() => {
-        if (!navigationRef)
-            return;
-        const getRef = () => navigationRef?.current || navigationRef;
-        const handleStateChange = () => {
-            const ref = getRef();
-            if (!ref)
-                return;
-            if (typeof ref.getRootState === 'function') {
-                onStateChange(ref.getRootState());
-            }
-            else if (typeof ref.getState === 'function') {
-                onStateChange(ref.getState());
-            }
-        };
-        const ref = getRef();
-        if (ref && typeof ref.addListener === 'function') {
-            const unsubscribe = ref.addListener('state', handleStateChange);
-            handleStateChange();
-            return unsubscribe;
-        }
-    }, [navigationRef, onStateChange]);
-    if (navContext) {
-        return <ContextNavigationTracker onStateChange={onStateChange}/>;
-    }
-    return null;
-};
-export default NavigationTracker;

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

@@ -1,9 +0,0 @@
-import React from 'react';
-interface ReduxTabViewProps {
-    reduxState: any;
-    reduxSearch: string;
-    onSetReduxSearch: (val: string) => void;
-    reduxLastActionMap: Record<string, string>;
-}
-export declare const ReduxTabView: React.FC<ReduxTabViewProps>;
-export default ReduxTabView;

package/dist/esm/components/ReduxTabView.js

@@ -1,50 +0,0 @@
-import React from 'react';
-import { Pressable, Text, TextInput, View, } from 'react-native';
-import { useTranslation } from 'react-i18next';
-import { ReduxTreeView } from './ReduxTreeView';
-import { TerminalIcon, ClearIcon, } from './NetworkIcons';
-import { AppColors } from '../styles/AppColors';
-import styles from '../styles';
-export const ReduxTabView = React.memo(({ reduxState, reduxSearch, onSetReduxSearch, reduxLastActionMap, }) => {
-    const { t } = useTranslation();
-    if (!reduxState) {
-        return (<View style={styles.emptyContainer}>
-        <View style={styles.emptyIconWrap}>
-          <TerminalIcon color={AppColors.purple} size={32}/>
-        </View>
-        <Text style={styles.emptyTitle}>{t('redux.no_store_title')}</Text>
-        <Text style={styles.emptySub}>
-          {t('redux.no_store_sub')}
-        </Text>
-      </View>);
-    }
-    const reducerKeys = Object.keys(reduxState ?? {});
-    if (reducerKeys.length === 0) {
-        return (<View style={styles.emptyContainer}>
-        <Text style={styles.emptyTitle}>{t('redux.empty_store_title')}</Text>
-        <Text style={styles.emptySub}>{t('redux.empty_store_sub')}</Text>
-      </View>);
-    }
-    return (<View style={styles.flex1}>
-      {/* Search Bar */}
-      <View style={styles.searchBarWrap}>
-        <TextInput placeholder={t('search.redux_placeholder')} placeholderTextColor={AppColors.grayTextWeak} value={reduxSearch} onChangeText={onSetReduxSearch} style={styles.searchBarInput} autoCorrect={false} autoCapitalize="none"/>
-        {reduxSearch.length > 0 && (<Pressable onPress={() => onSetReduxSearch('')} hitSlop={10}>
-            <ClearIcon color={AppColors.grayTextWeak} size={14}/>
-          </Pressable>)}
-      </View>
-
-      {/* Main Content Card */}
-      <View style={styles.contentCard}>
-        <View style={styles.cardHeaderRow}>
-          <Text style={styles.sectionHeaderTitle}>{t('redux.root_reducers')}</Text>
-          <Text style={styles.subTextWeak}>
-            {reducerKeys.length} {t('redux.slices')}
-          </Text>
-        </View>
-
-        <ReduxTreeView state={reduxState} search={reduxSearch} lastActionMap={reduxLastActionMap}/>
-      </View>
-    </View>);
-});
-export default ReduxTabView;

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

@@ -1,16 +0,0 @@
-import React from 'react';
-export declare const ReduxTreeView: React.MemoExoticComponent<({ state, actionHistory, lastActionMap, search, onSearchChange, autoRefresh, onToggleAutoRefresh, onClearHistory, onDetailOpenChange, selectedSliceKey, onSelectSliceKey, selectedActionId, onSelectActionId, }: {
-    state: any;
-    actionHistory?: any[];
-    lastActionMap?: Record<string, any>;
-    search?: string;
-    onSearchChange?: (val: string) => void;
-    autoRefresh?: boolean;
-    onToggleAutoRefresh?: () => void;
-    onClearHistory?: () => void;
-    onDetailOpenChange?: (isOpen: boolean) => void;
-    selectedSliceKey?: string | null;
-    onSelectSliceKey?: (key: string | null) => void;
-    selectedActionId?: number | null;
-    onSelectActionId?: (id: number | null) => void;
-}) => React.JSX.Element>;