react-native-inapp-inspector 1.1.13 → 1.1.15

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

@@ -0,0 +1,19 @@
+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/commonjs/components/InspectorHeader.js

@@ -0,0 +1,329 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.InspectorHeader = void 0;
+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 react_i18next_1 = require("react-i18next");
+const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+const NetworkIcons_1 = require("./NetworkIcons");
+const AppColors_1 = require("../styles/AppColors");
+const AppFonts_1 = require("../styles/AppFonts");
+const styles_1 = __importDefault(require("../styles"));
+const constants_1 = require("../constants");
+const helpers_1 = require("../helpers");
+exports.InspectorHeader = react_1.default.memo(({ headerTopPadding, selected, selectedEvent, selectedConsoleLog, detailTitle, showHeaderInfo, clearAnim, onBack, onToggleHeaderInfo, onClearAll, onOpenSettings, onCloseModal, }) => {
+    const { t } = (0, react_i18next_1.useTranslation)();
+    const isNoDetailSelected = selected == null && selectedEvent == null && selectedConsoleLog == null;
+    return (<react_native_linear_gradient_1.default colors={[AppColors_1.AppColors.purple, AppColors_1.AppColors.gradientPurpleStart]} style={styles_1.default.headerGradient}>
+      <react_native_1.View style={{ paddingTop: headerTopPadding, width: '100%' }}>
+        <react_native_1.View style={styles_1.default.header}>
+          <react_native_1.View style={[
+            styles_1.default.headerLeft,
+            {
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 16,
+                flex: isNoDetailSelected ? 5 : 1,
+            },
+        ]}>
+            <TouchableScale_1.default 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' },
+        ]}>
+              <react_native_1.View style={{
+            position: 'absolute',
+            width: 48,
+            height: 48,
+            borderRadius: 24,
+            backgroundColor: 'rgba(255,255,255,0.10)',
+        }}/>
+              <NetworkIcons_1.WhiteBackNavigation />
+            </TouchableScale_1.default>
+
+            {isNoDetailSelected ? (<TouchableScale_1.default onPress={onToggleHeaderInfo} style={{
+                flexDirection: 'row',
+                alignItems: 'center',
+                gap: 10,
+                flex: 1,
+            }}>
+                <react_native_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',
+            }}>
+                  <NetworkIcons_1.BrandCircleIcon size={26} color={AppColors_1.AppColors.white}/>
+                </react_native_1.View>
+                <react_native_1.View style={styles_1.default.columnFlex1}>
+                  <react_native_1.View style={styles_1.default.rowGap4}>
+                    <react_native_1.Text style={[
+                styles_1.default.headerTitle,
+                { fontSize: 16, color: AppColors_1.AppColors.white },
+            ]}>
+                      {t('header.title')}
+                    </react_native_1.Text>
+                    <react_native_1.View style={{
+                transform: [
+                    { rotate: showHeaderInfo ? '180deg' : '0deg' },
+                ],
+            }}>
+                      <NetworkIcons_1.ChevronIcon color="rgba(255,255,255,0.7)" size={12}/>
+                    </react_native_1.View>
+                  </react_native_1.View>
+
+                  {showHeaderInfo && (<react_native_1.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,
+                }}>
+                      <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 11,
+                    color: AppColors_1.AppColors.white,
+                }}>
+                        {(0, helpers_1.getAppName)()}
+                      </react_native_1.Text>
+                      <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 6,
+                }}>
+                        <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 10,
+                    color: 'rgba(255,255,255,0.8)',
+                }}>
+                          {t('header.engine')}
+                        </react_native_1.Text>
+                        <react_native_1.View style={{
+                    paddingHorizontal: 6,
+                    paddingVertical: 1,
+                    borderRadius: 4,
+                    backgroundColor: 'rgba(255,255,255,0.2)',
+                }}>
+                          <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9,
+                    color: AppColors_1.AppColors.white,
+                }}>
+                            v{constants_1.LIB_VERSION}
+                          </react_native_1.Text>
+                        </react_native_1.View>
+                      </react_native_1.View>
+                    </react_native_1.View>)}
+                </react_native_1.View>
+              </TouchableScale_1.default>) : null}
+          </react_native_1.View>
+
+          {!isNoDetailSelected && (<react_native_1.View style={styles_1.default.headerCenter}>
+              {selected != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                  <react_native_1.View style={styles_1.default.headerDetailRow}>
+                    <react_native_1.View style={[
+                    styles_1.default.headerMethodBadge,
+                    {
+                        backgroundColor: constants_1.METHOD_COLORS[selected.method] ??
+                            AppColors_1.AppColors.grayText,
+                    },
+                ]}>
+                      <react_native_1.Text style={styles_1.default.headerMethodText}>
+                        {selected.method}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                    <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                      {detailTitle}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                  <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                    <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 5,
+                    paddingHorizontal: 8,
+                    paddingVertical: 3,
+                    borderRadius: 20,
+                    backgroundColor: `${(0, helpers_1.getStatusColor)(selected.status)}26`,
+                    borderWidth: 1,
+                    borderColor: `${(0, helpers_1.getStatusColor)(selected.status)}55`,
+                }}>
+                      <react_native_1.View style={[
+                    styles_1.default.headerStatusDot,
+                    {
+                        backgroundColor: (0, helpers_1.getStatusColor)(selected.status),
+                    },
+                ]}/>
+                      <react_native_1.Text style={[
+                    styles_1.default.headerSubTitle,
+                    { fontFamily: AppFonts_1.AppFonts.interBold },
+                ]}>
+                        {selected.status === 0
+                    ? 'Failed'
+                    : selected.status ?? 'Pending'}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                    <react_native_1.View style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                    paddingHorizontal: 8,
+                    paddingVertical: 3,
+                    borderRadius: 20,
+                    backgroundColor: 'rgba(255,255,255,0.16)',
+                }}>
+                      <NetworkIcons_1.ClockIcon color={AppColors_1.AppColors.white} size={11}/>
+                      <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                        {selected.duration != null
+                    ? `${selected.duration}ms`
+                    : '—'}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                  </react_native_1.View>
+                </react_native_1.View>) : selectedEvent != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                  <react_native_1.View style={styles_1.default.headerDetailRow}>
+                    <react_native_1.View style={[
+                    styles_1.default.headerMethodBadge,
+                    {
+                        backgroundColor: selectedEvent.source === 'firebase'
+                            ? 'rgba(224,123,26,0.3)'
+                            : 'rgba(124,92,191,0.3)',
+                    },
+                ]}>
+                      <react_native_1.Text style={styles_1.default.headerMethodText}>
+                        {selectedEvent.source === 'firebase' ? 'FB' : 'MAN'}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                    <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                      {selectedEvent.name}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                  <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                    <react_native_1.View style={[
+                    styles_1.default.headerStatusDot,
+                    {
+                        backgroundColor: selectedEvent.source === 'firebase'
+                            ? AppColors_1.AppColors.amber
+                            : AppColors_1.AppColors.purple,
+                    },
+                ]}/>
+                    <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                      {Object.keys(selectedEvent.params ?? {}).length} param
+                      {Object.keys(selectedEvent.params ?? {}).length !== 1
+                    ? 's'
+                    : ''}
+                      {' · '}
+                      {selectedEvent.source}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>) : selectedConsoleLog != null ? (<react_native_1.View style={styles_1.default.headerDetailCenter}>
+                  <react_native_1.View style={styles_1.default.headerDetailRow}>
+                    <react_native_1.View style={[
+                    styles_1.default.headerMethodBadge,
+                    {
+                        backgroundColor: selectedConsoleLog.type === 'error'
+                            ? AppColors_1.AppColors.errorColor
+                            : selectedConsoleLog.type === 'warn'
+                                ? AppColors_1.AppColors.lightOrange
+                                : AppColors_1.AppColors.purple,
+                    },
+                ]}>
+                      <react_native_1.Text style={styles_1.default.headerMethodText}>
+                        {selectedConsoleLog.type?.toUpperCase() || 'LOG'}
+                      </react_native_1.Text>
+                    </react_native_1.View>
+                    <react_native_1.Text style={styles_1.default.headerDetailTitle} numberOfLines={1} ellipsizeMode="middle">
+                      {t('details.console_log')} #{selectedConsoleLog.id + 1}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                  <react_native_1.View style={styles_1.default.headerDetailSubRow}>
+                    <react_native_1.Text style={styles_1.default.headerSubTitle}>
+                      console.
+                      {selectedConsoleLog.sourceMethod ||
+                    selectedConsoleLog.type ||
+                    'log'}
+                    </react_native_1.Text>
+                  </react_native_1.View>
+                </react_native_1.View>) : null}
+            </react_native_1.View>)}
+
+          <react_native_1.View style={[
+            styles_1.default.headerRight,
+            isNoDetailSelected && {
+                flexShrink: 0,
+                minWidth: 116,
+            },
+        ]}>
+            {isNoDetailSelected && (<TouchableScale_1.default onPress={() => {
+                react_native_1.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_1.default.closeButtonSquare,
+                {
+                    marginRight: 8,
+                    backgroundColor: 'rgba(255,255,255,0.15)',
+                },
+            ]}>
+                <react_native_1.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],
+                        }),
+                    },
+                ],
+            }}>
+                  <NetworkIcons_1.WipeIcon color={AppColors_1.AppColors.white} size={16}/>
+                </react_native_1.Animated.View>
+              </TouchableScale_1.default>)}
+
+            {isNoDetailSelected && (<TouchableScale_1.default onPress={onOpenSettings} hitSlop={15} style={[
+                styles_1.default.closeButtonSquare,
+                {
+                    marginRight: 8,
+                    backgroundColor: 'rgba(255,255,255,0.15)',
+                },
+            ]}>
+                <NetworkIcons_1.SettingsIcon color={AppColors_1.AppColors.white} size={16}/>
+              </TouchableScale_1.default>)}
+
+            <TouchableScale_1.default onPress={onCloseModal} hitSlop={15} style={styles_1.default.closeButtonSquare}>
+              <NetworkIcons_1.CloseWhite size={16}/>
+            </TouchableScale_1.default>
+          </react_native_1.View>
+        </react_native_1.View>
+      </react_native_1.View>
+    </react_native_linear_gradient_1.default>);
+});
+exports.default = exports.InspectorHeader;

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

@@ -0,0 +1,16 @@
+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/commonjs/components/InspectorTabBar.js

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

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

@@ -1,11 +1,14 @@
 import React from 'react';
-declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight, onModeChange, }: {
+declare const JsonViewer: ({ data, search, forceOpen, defaultExpandDepth, wrap, fullHeight, maxHeight, mode: externalMode, onModeChange, hideTabs, }: {
     data: unknown;
     search?: string;
     forceOpen?: boolean;
     defaultExpandDepth?: number;
     wrap?: boolean;
     fullHeight?: boolean;
+    maxHeight?: number;
+    mode?: "pretty" | "raw" | "table";
     onModeChange?: (mode: "pretty" | "raw" | "table") => void;
+    hideTabs?: boolean;
 }) => React.JSX.Element;
 export default JsonViewer;