react-native-inapp-inspector 1.1.18 → 1.1.19

package/dist/esm/components/Inspector/InsightsDashboard.js

@@ -1,614 +0,0 @@
-import React from 'react';
-import { ScrollView, Text, TouchableOpacity, View } from 'react-native';
-import { animateNextLayout, useInspector } from './InspectorContext';
-import TouchableScale from '../TouchableScale';
-import styles from '../../styles';
-import { AppColors } from '../../styles/AppColors';
-import { AppFonts } from '../../styles/AppFonts';
-import { getSize } from '../../helpers';
-import { SignalIcon, TerminalIcon, AnalyticsIcon, GlobeIcon, } from '../NetworkIcons';
-const InsightsDashboard = () => {
-    const { logs, visibleConsoleLogs, analyticsEvents, webViewNavHistory, tabVisibility, slowRequestThreshold, insightsActiveSubTab, setInsightsActiveSubTab, switchActiveTab, reduxState, } = useInspector();
-    const apiTotal = logs.length;
-    const apiErrors = logs.filter(l => (l.status != null && l.status >= 400) ||
-        l.status === 0 ||
-        l.status == null).length;
-    const apiSuccess = apiTotal - apiErrors;
-    const apiSuccessRate = apiTotal > 0 ? Math.round((apiSuccess / apiTotal) * 100) : 100;
-    const durations = logs
-        .filter(l => l.duration != null)
-        .map(l => l.duration);
-    const avgTime = durations.length > 0
-        ? Math.round(durations.reduce((a, b) => a + b, 0) / durations.length)
-        : null;
-    const logTotal = visibleConsoleLogs.length;
-    const logErrors = visibleConsoleLogs.filter(l => l.type === 'error').length;
-    const logWarns = visibleConsoleLogs.filter(l => l.type === 'warn').length;
-    const logInfos = visibleConsoleLogs.filter(l => l.type === 'info').length;
-    const analyticsTotal = analyticsEvents.length;
-    const uniqueEvents = new Set(analyticsEvents.map(e => e.name)).size;
-    const screenViews = analyticsEvents.filter(e => e.name === 'screen_view' ||
-        e.name === 'page_view' ||
-        e.name === 'firebase_screen_class').length;
-    const webviewTotal = webViewNavHistory.length;
-    // --- Richer insights metrics ---
-    const slowestTime = durations.length > 0 ? Math.max(...durations) : null;
-    const fastestTime = durations.length > 0 ? Math.min(...durations) : null;
-    const slowCount = durations.filter(d => d >= slowRequestThreshold).length;
-    const status2xx = logs.filter(l => l.status != null && l.status >= 200 && l.status < 300).length;
-    const status3xx = logs.filter(l => l.status != null && l.status >= 300 && l.status < 400).length;
-    const status4xx = logs.filter(l => l.status != null && l.status >= 400 && l.status < 500).length;
-    const status5xx = logs.filter(l => l.status != null && l.status >= 500).length;
-    const totalSignals = apiTotal + logTotal + analyticsTotal + webviewTotal;
-    const totalIssues = apiErrors + logErrors;
-    const activeModules = [
-        tabVisibility?.apis,
-        tabVisibility?.logs,
-        tabVisibility?.analytics,
-        tabVisibility?.webview,
-        tabVisibility?.redux,
-    ].filter(Boolean).length;
-    // Composite health score: success rate penalised by error volume and slow requests.
-    const healthScore = totalSignals === 0
-        ? 100
-        : Math.max(0, Math.min(100, Math.round(apiSuccessRate -
-            (logErrors > 0 ? Math.min(15, logErrors * 3) : 0) -
-            (slowCount > 0 ? Math.min(10, slowCount * 2) : 0))));
-    const healthColor = healthScore >= 90
-        ? AppColors.greenColor
-        : healthScore >= 70
-            ? AppColors.warningIconGold
-            : AppColors.errorColor;
-    const healthLabel = healthScore >= 90
-        ? 'Healthy'
-        : healthScore >= 70
-            ? 'Needs attention'
-            : 'Degraded';
-    return (<View style={styles.dashboardContainer}>
-      {/* Overview hero card */}
-      <View style={{
-            backgroundColor: AppColors.primaryLight,
-            borderRadius: 14,
-            borderWidth: 1,
-            borderColor: AppColors.grayBorderSecondary,
-            padding: 16,
-            marginBottom: 12,
-        }}>
-        <View style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 14,
-        }}>
-          {/* Health ring stand-in */}
-          <View style={{
-            width: 64,
-            height: 64,
-            borderRadius: 32,
-            borderWidth: 4,
-            borderColor: healthColor,
-            alignItems: 'center',
-            justifyContent: 'center',
-            backgroundColor: AppColors.purpleShade50,
-        }}>
-            <Text style={{
-            fontFamily: AppFonts.interBold,
-            fontSize: 18,
-            color: healthColor,
-        }}>
-              {healthScore}
-            </Text>
-            <Text style={{
-            fontFamily: AppFonts.interMedium,
-            fontSize: 7.5,
-            color: AppColors.grayTextWeak,
-            letterSpacing: 0.4,
-        }}>
-              HEALTH
-            </Text>
-          </View>
-          <View style={{ flex: 1 }}>
-            <Text style={{
-            fontFamily: AppFonts.interBold,
-            fontSize: 15,
-            color: AppColors.primaryBlack,
-        }}>
-              Session Overview
-            </Text>
-            <View style={{
-            flexDirection: 'row',
-            alignItems: 'center',
-            gap: 6,
-            marginTop: 3,
-        }}>
-              <View style={{
-            width: 7,
-            height: 7,
-            borderRadius: 3.5,
-            backgroundColor: healthColor,
-        }}/>
-              <Text style={{
-            fontFamily: AppFonts.interMedium,
-            fontSize: 11.5,
-            color: healthColor,
-        }}>
-                {healthLabel}
-              </Text>
-              <Text style={{
-            fontFamily: AppFonts.interRegular,
-            fontSize: 11.5,
-            color: AppColors.grayTextWeak,
-        }}>
-                • {activeModules} modules active
-              </Text>
-            </View>
-          </View>
-        </View>
-
-        {/* Quick totals strip */}
-        <View style={{
-            flexDirection: 'row',
-            marginTop: 14,
-            borderTopWidth: 1,
-            borderTopColor: AppColors.dividerColor,
-            paddingTop: 12,
-        }}>
-          <View style={{ flex: 1, alignItems: 'center' }}>
-            <Text style={{
-            fontFamily: AppFonts.interBold,
-            fontSize: 16,
-            color: AppColors.primaryBlack,
-        }}>
-              {totalSignals}
-            </Text>
-            <Text style={{
-            fontFamily: AppFonts.interRegular,
-            fontSize: 10,
-            color: AppColors.grayTextWeak,
-            marginTop: 1,
-        }}>
-              Signals
-            </Text>
-          </View>
-          <View style={{ width: 1, backgroundColor: AppColors.dividerColor }}/>
-          <View style={{ flex: 1, alignItems: 'center' }}>
-            <Text style={{
-            fontFamily: AppFonts.interBold,
-            fontSize: 16,
-            color: totalIssues > 0
-                ? AppColors.errorColor
-                : AppColors.primaryBlack,
-        }}>
-              {totalIssues}
-            </Text>
-            <Text style={{
-            fontFamily: AppFonts.interRegular,
-            fontSize: 10,
-            color: AppColors.grayTextWeak,
-            marginTop: 1,
-        }}>
-              Issues
-            </Text>
-          </View>
-          <View style={{ width: 1, backgroundColor: AppColors.dividerColor }}/>
-          <View style={{ flex: 1, alignItems: 'center' }}>
-            <Text style={{
-            fontFamily: AppFonts.interBold,
-            fontSize: 16,
-            color: slowCount > 0
-                ? AppColors.warningIconGold
-                : AppColors.primaryBlack,
-        }}>
-              {slowCount}
-            </Text>
-            <Text style={{
-            fontFamily: AppFonts.interRegular,
-            fontSize: 10,
-            color: AppColors.grayTextWeak,
-            marginTop: 1,
-        }}>
-              Slow ({slowRequestThreshold}ms+)
-            </Text>
-          </View>
-        </View>
-      </View>
-
-      {/* ── Insights Sub-Tab Selector ── */}
-      {(() => {
-            const insightTabs = [
-                {
-                    key: 'apis',
-                    label: 'APIs',
-                    icon: (c, s) => <SignalIcon color={c} size={s}/>,
-                    color: AppColors.purple,
-                    count: apiTotal,
-                    visible: !!tabVisibility?.apis,
-                },
-                {
-                    key: 'logs',
-                    label: 'Logs',
-                    icon: (c, s) => <TerminalIcon color={c} size={s}/>,
-                    color: '#0D9488',
-                    count: logTotal,
-                    visible: !!tabVisibility?.logs,
-                },
-                {
-                    key: 'analytics',
-                    label: 'Analytics',
-                    icon: (c, s) => <AnalyticsIcon color={c} size={s}/>,
-                    color: '#EA580C',
-                    count: analyticsTotal,
-                    visible: !!tabVisibility?.analytics,
-                },
-                {
-                    key: 'webview',
-                    label: 'WebView',
-                    icon: (c, s) => <GlobeIcon color={c} size={s}/>,
-                    color: '#2563EB',
-                    count: webviewTotal,
-                    visible: !!tabVisibility?.webview,
-                },
-                {
-                    key: 'redux',
-                    label: 'Redux',
-                    icon: (c, s) => <TerminalIcon color={c} size={s}/>,
-                    color: AppColors.purple,
-                    count: reduxState ? Object.keys(reduxState).length : 0,
-                    visible: !!tabVisibility?.redux,
-                },
-            ];
-            const visibleTabs = insightTabs.filter(t => t.visible);
-            if (visibleTabs.length === 0)
-                return null;
-            return (<>
-            <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
-                    paddingHorizontal: 2,
-                    paddingVertical: 2,
-                    gap: 8,
-                }} style={{
-                    marginBottom: 12,
-                    flexGrow: 0,
-                }}>
-              {visibleTabs.map(tab => {
-                    const isActive = insightsActiveSubTab === tab.key;
-                    return (<TouchableOpacity key={tab.key} onPress={() => {
-                            animateNextLayout();
-                            setInsightsActiveSubTab(tab.key);
-                        }} activeOpacity={0.7} style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 6,
-                            paddingHorizontal: 14,
-                            paddingVertical: 8,
-                            borderRadius: 20,
-                            backgroundColor: isActive
-                                ? tab.color
-                                : AppColors.primaryLight,
-                            borderWidth: 1,
-                            borderColor: isActive
-                                ? tab.color
-                                : AppColors.grayBorderSecondary,
-                        }}>
-                    {tab.icon(isActive ? '#FFFFFF' : tab.color, 14)}
-                    <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 11.5,
-                            color: isActive ? '#FFFFFF' : AppColors.grayTextStrong,
-                        }}>
-                      {tab.label}
-                    </Text>
-                    <View style={{
-                            minWidth: 20,
-                            height: 18,
-                            borderRadius: 9,
-                            paddingHorizontal: 5,
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            backgroundColor: isActive
-                                ? 'rgba(255,255,255,0.25)'
-                                : AppColors.grayBackground,
-                        }}>
-                      <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 9.5,
-                            color: isActive ? '#FFFFFF' : AppColors.grayTextWeak,
-                        }}>
-                        {tab.count}
-                      </Text>
-                    </View>
-                  </TouchableOpacity>);
-                })}
-            </ScrollView>
-
-            {/* ── Active Module Card ── */}
-            {insightsActiveSubTab === 'apis' && tabVisibility?.apis && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('apis')}>
-                <View style={styles.dashboardModuleHeader}>
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-                    <SignalIcon color={AppColors.purple} size={18}/>
-                    <Text style={styles.dashboardModuleTitle}>APIs & Network</Text>
-                  </View>
-                  <Text style={styles.dashboardModuleGoText}>View Details →</Text>
-                </View>
-                <View style={styles.dashboardModuleGrid}>
-                  <View style={styles.dashboardGridItem}>
-                    <Text style={styles.dashboardGridVal}>{apiTotal}</Text>
-                    <Text style={styles.dashboardGridLbl}>Requests</Text>
-                  </View>
-                  <View style={styles.dashboardGridItem}>
-                    <Text style={[
-                        styles.dashboardGridVal,
-                        apiSuccessRate < 90 && { color: AppColors.warningIconGold },
-                    ]}>
-                      {apiSuccessRate}%
-                    </Text>
-                    <Text style={styles.dashboardGridLbl}>Success Rate</Text>
-                  </View>
-                  <View style={styles.dashboardGridItem}>
-                    <Text style={[
-                        styles.dashboardGridVal,
-                        apiErrors > 0 && { color: AppColors.errorColor },
-                    ]}>
-                      {apiErrors}
-                    </Text>
-                    <Text style={styles.dashboardGridLbl}>Errors</Text>
-                  </View>
-                  <View style={styles.dashboardGridItem}>
-                    <Text style={styles.dashboardGridVal}>
-                      {avgTime != null ? `${avgTime}ms` : '—'}
-                    </Text>
-                    <Text style={styles.dashboardGridLbl}>Avg Latency</Text>
-                  </View>
-                </View>
-
-                {/* Status-class breakdown + latency range */}
-                <View style={{
-                        marginTop: 10,
-                        paddingTop: 10,
-                        borderTopWidth: 1,
-                        borderTopColor: AppColors.dividerColor,
-                        flexDirection: 'row',
-                        alignItems: 'center',
-                        flexWrap: 'wrap',
-                        gap: 6,
-                    }}>
-                  {[
-                        { label: '2xx', value: status2xx, color: AppColors.greenColor },
-                        { label: '3xx', value: status3xx, color: AppColors.skyBlue },
-                        {
-                            label: '4xx',
-                            value: status4xx,
-                            color: AppColors.warningIconGold,
-                        },
-                        { label: '5xx', value: status5xx, color: AppColors.errorColor },
-                    ].map(s => (<View key={s.label} style={{
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 4,
-                            backgroundColor: AppColors.grayBackground,
-                            borderRadius: 6,
-                            borderWidth: 1,
-                            borderColor: AppColors.dividerColor,
-                            paddingHorizontal: 7,
-                            paddingVertical: 3,
-                        }}>
-                      <View style={{
-                            width: 6,
-                            height: 6,
-                            borderRadius: 3,
-                            backgroundColor: s.color,
-                        }}/>
-                      <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 10,
-                            color: AppColors.grayTextStrong,
-                        }}>
-                        {s.label} {s.value}
-                      </Text>
-                    </View>))}
-                  {slowestTime != null && (<View style={{
-                            marginLeft: 'auto',
-                            flexDirection: 'row',
-                            alignItems: 'center',
-                            gap: 4,
-                        }}>
-                      <Text style={{
-                            fontFamily: AppFonts.interRegular,
-                            fontSize: 10,
-                            color: AppColors.grayTextWeak,
-                        }}>
-                        Range
-                      </Text>
-                      <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 10,
-                            color: AppColors.grayTextStrong,
-                        }}>
-                        {fastestTime}–{slowestTime}ms
-                      </Text>
-                    </View>)}
-                </View>
-              </TouchableScale>)}
-
-            {insightsActiveSubTab === 'logs' && tabVisibility?.logs && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('logs')}>
-                <View style={styles.dashboardModuleHeader}>
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-                    <TerminalIcon color="#0D9488" size={18}/>
-                    <Text style={styles.dashboardModuleTitle}>Console Logs</Text>
-                  </View>
-                  <Text style={styles.dashboardModuleGoText}>View Details →</Text>
-                </View>
-                <View style={styles.dashboardModuleGrid}>
-                  <View style={styles.dashboardGridItem}>
-                    <Text style={styles.dashboardGridVal}>{logTotal}</Text>
-                    <Text style={styles.dashboardGridLbl}>Total Logs</Text>
-                  </View>
-                  <View style={styles.dashboardGridItem}>
-                    <Text style={[styles.dashboardGridVal, { color: '#0D9488' }]}>
-                      {logInfos}
-                    </Text>
-                    <Text style={styles.dashboardGridLbl}>Info</Text>
-                  </View>
-                  <View style={styles.dashboardGridItem}>
-                    <Text style={[
-                        styles.dashboardGridVal,
-                        logWarns > 0 && { color: AppColors.warningIconGold },
-                    ]}>
-                      {logWarns}
-                    </Text>
-                    <Text style={styles.dashboardGridLbl}>Warnings</Text>
-                  </View>
-                  <View style={styles.dashboardGridItem}>
-                    <Text style={[
-                        styles.dashboardGridVal,
-                        logErrors > 0 && { color: AppColors.errorColor },
-                    ]}>
-                      {logErrors}
-                    </Text>
-                    <Text style={styles.dashboardGridLbl}>Errors</Text>
-                  </View>
-                </View>
-              </TouchableScale>)}
-
-            {insightsActiveSubTab === 'analytics' && tabVisibility?.analytics && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('analytics')}>
-                <View style={styles.dashboardModuleHeader}>
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-                    <AnalyticsIcon color="#EA580C" size={18}/>
-                    <Text style={styles.dashboardModuleTitle}>
-                      Analytics Events
-                    </Text>
-                  </View>
-                  <Text style={styles.dashboardModuleGoText}>View Details →</Text>
-                </View>
-                <View style={styles.dashboardModuleGrid}>
-                  <View style={styles.dashboardGridItem}>
-                    <Text style={styles.dashboardGridVal}>{analyticsTotal}</Text>
-                    <Text style={styles.dashboardGridLbl}>Total Events</Text>
-                  </View>
-                  <View style={styles.dashboardGridItem}>
-                    <Text style={[styles.dashboardGridVal, { color: '#EA580C' }]}>
-                      {uniqueEvents}
-                    </Text>
-                    <Text style={styles.dashboardGridLbl}>Unique Names</Text>
-                  </View>
-                  <View style={styles.dashboardGridItem}>
-                    <Text style={styles.dashboardGridVal}>{screenViews}</Text>
-                    <Text style={styles.dashboardGridLbl}>Screen Views</Text>
-                  </View>
-                  <View style={styles.dashboardGridItem}>
-                    <Text style={styles.dashboardGridVal}>
-                      {analyticsTotal > 0
-                        ? Math.round(analyticsTotal / Math.max(1, logs.length / 5))
-                        : 0}
-                    </Text>
-                    <Text style={styles.dashboardGridLbl}>Events Ratio</Text>
-                  </View>
-                </View>
-              </TouchableScale>)}
-
-            {insightsActiveSubTab === 'webview' && tabVisibility?.webview && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('webview')}>
-                <View style={styles.dashboardModuleHeader}>
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-                    <GlobeIcon color="#2563EB" size={18}/>
-                    <Text style={styles.dashboardModuleTitle}>
-                      WebView Captures
-                    </Text>
-                  </View>
-                  <Text style={styles.dashboardModuleGoText}>View Details →</Text>
-                </View>
-                <View style={styles.dashboardModuleGrid}>
-                  <View style={styles.dashboardGridItem}>
-                    <Text style={styles.dashboardGridVal}>{webviewTotal}</Text>
-                    <Text style={styles.dashboardGridLbl}>History Size</Text>
-                  </View>
-                  <View style={styles.dashboardGridItem}>
-                    <Text style={[styles.dashboardGridVal, { color: '#16A34A' }]}>
-                      Active
-                    </Text>
-                    <Text style={styles.dashboardGridLbl}>Status</Text>
-                  </View>
-                  <View style={styles.dashboardGridItem}>
-                    <Text numberOfLines={1} style={styles.dashboardGridVal}>
-                      {webviewTotal > 0
-                        ? `${webViewNavHistory[0]?.title?.substring(0, 10) ?? ''}...`
-                        : '—'}
-                    </Text>
-                    <Text style={styles.dashboardGridLbl}>Last URL</Text>
-                  </View>
-                </View>
-              </TouchableScale>)}
-
-            {insightsActiveSubTab === 'redux' && tabVisibility?.redux && (<TouchableScale style={styles.dashboardModuleCard} onPress={() => switchActiveTab('redux')}>
-                <View style={styles.dashboardModuleHeader}>
-                  <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
-                    <TerminalIcon color={AppColors.purple} size={18}/>
-                    <Text style={styles.dashboardModuleTitle}>
-                      Redux Store State
-                    </Text>
-                  </View>
-                  <Text style={styles.dashboardModuleGoText}>View Details →</Text>
-                </View>
-                {reduxState ? (<View style={{ paddingHorizontal: 12, paddingBottom: 12, gap: 6 }}>
-                    <View style={{
-                            flexDirection: 'row',
-                            justifyContent: 'space-between',
-                            marginBottom: 4,
-                        }}>
-                      <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 10,
-                            color: AppColors.grayTextWeak,
-                            letterSpacing: 0.5,
-                        }}>
-                        REDUCER NAME
-                      </Text>
-                      <Text style={{
-                            fontFamily: AppFonts.interBold,
-                            fontSize: 10,
-                            color: AppColors.grayTextWeak,
-                            letterSpacing: 0.5,
-                        }}>
-                        SIZE / FIELDS
-                      </Text>
-                    </View>
-                    {Object.keys(reduxState).map(key => {
-                            const val = reduxState[key];
-                            const fieldsCount = typeof val === 'object' && val !== null
-                                ? Object.keys(val).length
-                                : 0;
-                            const sizeStr = getSize(val);
-                            return (<View key={key} style={{
-                                    flexDirection: 'row',
-                                    justifyContent: 'space-between',
-                                    alignItems: 'center',
-                                    paddingVertical: 2,
-                                }}>
-                          <Text style={{
-                                    fontFamily: AppFonts.interMedium,
-                                    fontSize: 12,
-                                    color: AppColors.grayTextStrong,
-                                }}>
-                            {key}
-                          </Text>
-                          <Text style={{
-                                    fontFamily: AppFonts.interRegular,
-                                    fontSize: 11,
-                                    color: AppColors.grayTextWeak,
-                                }}>
-                            {sizeStr} ({fieldsCount} fields)
-                          </Text>
-                        </View>);
-                        })}
-                  </View>) : (<View style={{ padding: 12, alignItems: 'center' }}>
-                    <Text style={{
-                            fontFamily: AppFonts.interRegular,
-                            fontSize: 12,
-                            color: AppColors.grayTextWeak,
-                        }}>
-                      No connected Redux store.
-                    </Text>
-                  </View>)}
-              </TouchableScale>)}
-          </>);
-        })()}
-    </View>);
-};
-export default InsightsDashboard;

package/dist/esm/components/Inspector/WebViewTab.d.ts

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