react-native-inapp-inspector 1.1.21 → 1.1.23

package/dist/commonjs/components/AnalyticsDetail.js

@@ -47,7 +47,9 @@ const AppFonts_1 = require("../styles/AppFonts");
 const helpers_1 = require("../helpers");
 // Stylesheet
 const AppColors_1 = require("../styles/AppColors");
+const i18n_1 = require("../i18n");
 const AnalyticsDetail = ({ event, }) => {
+    const { t } = (0, i18n_1.useTranslation)();
     const [expandDepth, setExpandDepth] = (0, react_1.useState)(1);
     const [treeKey, setTreeKey] = (0, react_1.useState)(0);
     const params = event.params ?? {};
@@ -67,7 +69,7 @@ const AnalyticsDetail = ({ event, }) => {
     }
     else if (isArray) {
         typeLabel = 'array';
-        countLabel = `${jsonData.length} items`;
+        countLabel = `${jsonData.length} ${t('analytics.items')}`;
     }
     else if (isObject) {
         typeLabel = 'object';
@@ -107,7 +109,7 @@ const AnalyticsDetail = ({ event, }) => {
             fontSize: 12,
             color: AppColors_1.AppColors.purple,
         }}>
-              {expandDepth === 99 ? 'Collapse All' : 'Expand All'}
+              {expandDepth === 99 ? t('common.collapseAll') : t('common.expandAll')}
             </react_native_1.Text>
           </TouchableScale_1.default>
           <react_native_1.View style={{
@@ -144,7 +146,7 @@ const AnalyticsDetail = ({ event, }) => {
           </react_native_1.View>
         </react_native_1.View>
 
-        <CopyButton_1.default value={JSON.stringify(jsonData, null, 2)} label="Copy JSON"/>
+        <CopyButton_1.default value={JSON.stringify(jsonData, null, 2)} label={t('common.copyJson')}/>
       </react_native_1.View>
 
       {/* Direct JSON Viewer View */}

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

@@ -1,5 +1,4 @@
 import React from 'react';
 import { AnalyticsEventCardProps } from '../types';
-export declare function getEventColor(name: string): string;
 declare const AnalyticsEventCard: React.NamedExoticComponent<AnalyticsEventCardProps>;
 export default AnalyticsEventCard;

package/dist/commonjs/components/AnalyticsEventCard.js

@@ -36,94 +36,19 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getEventColor = getEventColor;
 const react_1 = __importStar(require("react"));
 const react_native_1 = require("react-native");
 const AppColors_1 = require("../styles/AppColors");
 const AppFonts_1 = require("../styles/AppFonts");
 const helpers_1 = require("../helpers");
+const i18n_1 = require("../i18n");
 const HighlightText_1 = __importDefault(require("./HighlightText"));
 const TouchableScale_1 = __importDefault(require("./TouchableScale"));
-// ─── Palette (Google Analytics colours) ───────────────────────────────────────
-const EVENT_PALETTE = [
-    AppColors_1.AppColors.googleBlue, // blue
-    AppColors_1.AppColors.googleGreen, // green
-    AppColors_1.AppColors.googlePurple, // purple
-    AppColors_1.AppColors.googleTeal, // teal
-    AppColors_1.AppColors.googleRed, // red
-    AppColors_1.AppColors.googleOrange, // orange
-    AppColors_1.AppColors.blue700, // dark blue
-    AppColors_1.AppColors.materialGreen, // dark green
-];
-function getEventColor(name) {
-    const safeName = typeof name === 'string' ? name : String(name || '');
-    let hash = 0;
-    for (let i = 0; i < safeName.length; i++) {
-        hash = (hash * 31 + safeName.charCodeAt(i)) | 0;
-    }
-    return EVENT_PALETTE[Math.abs(hash) % EVENT_PALETTE.length];
-}
-// ─── Helpers ──────────────────────────────────────────────────────────────────
-function getEventCategory(name) {
-    if (!name)
-        return 'Custom';
-    const lowercaseName = name.toLowerCase();
-    if (lowercaseName === 'screen_view' || lowercaseName === 'page_view') {
-        return 'Page View';
-    }
-    // Ecommerce events
-    const ecommerceEvents = [
-        'purchase', 'add_to_cart', 'begin_checkout', 'view_item',
-        'select_item', 'remove_from_cart', 'view_cart',
-        'add_shipping_info', 'add_payment_info', 'refund',
-        'view_item_list', 'select_promotion', 'view_promotion'
-    ];
-    if (ecommerceEvents.includes(lowercaseName)) {
-        return 'Ecommerce';
-    }
-    // Firebase System Auto-events
-    const systemEvents = [
-        'first_open', 'session_start', 'user_engagement',
-        'app_clear_data', 'app_exception', 'app_update', 'os_update',
-        'notification_receive', 'notification_open', 'notification_dismiss',
-        'screen_active', 'screen_inactive'
-    ];
-    if (systemEvents.includes(lowercaseName) || lowercaseName.startsWith('firebase_') || lowercaseName.startsWith('_')) {
-        return 'System';
-    }
-    return 'Custom';
-}
-function getCategoryColors(category) {
-    switch (category) {
-        case 'Page View':
-            return {
-                bg: AppColors_1.AppColors.blueBg,
-                border: AppColors_1.AppColors.blueBorder,
-                text: AppColors_1.AppColors.blue800,
-            };
-        case 'Ecommerce':
-            return {
-                bg: AppColors_1.AppColors.greenBg,
-                border: AppColors_1.AppColors.greenBorder,
-                text: AppColors_1.AppColors.materialGreen,
-            };
-        case 'System':
-            return {
-                bg: AppColors_1.AppColors.greyBg,
-                border: AppColors_1.AppColors.greyBorder,
-                text: AppColors_1.AppColors.grey600,
-            };
-        default:
-            return {
-                bg: AppColors_1.AppColors.purpleBg,
-                border: AppColors_1.AppColors.purpleBorder,
-                text: AppColors_1.AppColors.purpleText,
-            };
-    }
-}
+const NetworkIcons_1 = require("./NetworkIcons");
 // ─── Component ────────────────────────────────────────────────────────────────
 const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ event, onPress, isNew = false, searchStr = '', msSincePrev, computedScreenName, }) {
-    const color = getEventColor(event.name);
+    const { t } = (0, i18n_1.useTranslation)();
+    const color = (0, helpers_1.getEventColor)(event.name);
     const paramCount = event.params ? Object.keys(event.params).length : 0;
     const userPropCount = event.userProperties
         ? Object.keys(event.userProperties).length
@@ -143,11 +68,19 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
     return (<react_native_1.View style={cardStyles.container}>
       {/* ── Gap Indicator ─────────────────────────────────────────────────── */}
       {showGap && (<react_native_1.View style={cardStyles.gapContainer}>
-          <react_native_1.Text style={[cardStyles.gapText, { color: AppColors_1.AppColors.grayTextWeak }]}>{(0, helpers_1.formatGap)(msSincePrev)}</react_native_1.Text>
+          <react_native_1.Text style={[cardStyles.gapText, { color: AppColors_1.AppColors.grayTextWeak }]}>
+            {(0, helpers_1.formatGap)(msSincePrev)}
+          </react_native_1.Text>
         </react_native_1.View>)}
 
       {/* ── Main Card ─────────────────────────────────────────────────────── */}
-      <TouchableScale_1.default onPress={onPress} style={[cardStyles.modernCard, { backgroundColor: AppColors_1.AppColors.primaryLight, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
+      <TouchableScale_1.default onPress={onPress} style={[
+            cardStyles.modernCard,
+            {
+                backgroundColor: AppColors_1.AppColors.primaryLight,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+            },
+        ]}>
         <react_native_1.Animated.View style={[
             react_native_1.StyleSheet.absoluteFill,
             {
@@ -170,14 +103,21 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             </react_native_1.View>
 
             {(() => {
-            const category = getEventCategory(event.name);
-            const tagColors = getCategoryColors(category);
+            const catKey = (0, helpers_1.getEventCategory)(event.name);
+            const tagColors = (0, helpers_1.getCategoryColors)(catKey);
+            const categoryLabel = catKey === 'page_view'
+                ? t('analytics.pageViewCategory')
+                : catKey === 'ecommerce'
+                    ? t('analytics.ecommerceCategory')
+                    : catKey === 'system'
+                        ? t('analytics.systemCategory')
+                        : t('analytics.customCategory');
             return (<react_native_1.View style={[
                     cardStyles.categoryBadge,
                     { backgroundColor: tagColors.bg, borderColor: tagColors.border },
                 ]}>
                   <react_native_1.Text style={[cardStyles.categoryText, { color: tagColors.text }]}>
-                    {category}
+                    {categoryLabel}
                   </react_native_1.Text>
                 </react_native_1.View>);
         })()}
@@ -193,7 +133,8 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
                 cardStyles.duplicateText,
                 event.count === 1 && { color: AppColors_1.AppColors.grayTextStrong },
             ]}>
-                  {event.count}×{event.count > 1 ? ' Duplicate' : ''}
+                  {event.count}×
+                  {event.count > 1 ? ` ${t('analytics.duplicate')}` : ''}
                 </react_native_1.Text>
               </react_native_1.View>) : null}
           </react_native_1.View>
@@ -216,7 +157,13 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             const screenNameStr = typeof rawScreenName === 'object'
                 ? JSON.stringify(rawScreenName)
                 : String(rawScreenName);
-            return (<react_native_1.View style={[cardStyles.chip, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
+            return (<react_native_1.View style={[
+                    cardStyles.chip,
+                    {
+                        backgroundColor: AppColors_1.AppColors.grayBackground,
+                        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                    },
+                ]}>
                   <react_native_1.View style={[cardStyles.screenDot, { backgroundColor: color }]}/>
                   <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]} numberOfLines={1}>
                     {screenNameStr}
@@ -224,22 +171,52 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
                 </react_native_1.View>);
         })()}
 
-            <react_native_1.View style={[cardStyles.chip, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
+            <react_native_1.View style={[
+            cardStyles.chip,
+            {
+                backgroundColor: AppColors_1.AppColors.grayBackground,
+                borderColor: AppColors_1.AppColors.grayBorderSecondary,
+            },
+        ]}>
               <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]}>
-                {'{} '} {paramCount} params
+                {'{} '} {paramCount} {t('analytics.params')}
               </react_native_1.Text>
             </react_native_1.View>
 
-            {userPropCount > 0 && (<react_native_1.View style={[cardStyles.chip, { backgroundColor: AppColors_1.AppColors.grayBackground, borderColor: AppColors_1.AppColors.grayBorderSecondary }]}>
-                <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]}>★ {userPropCount} props</react_native_1.Text>
+            {userPropCount > 0 && (<react_native_1.View style={[
+                cardStyles.chip,
+                {
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                },
+            ]}>
+                <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]}>
+                  ★ {userPropCount} {t('analytics.props')}
+                </react_native_1.Text>
               </react_native_1.View>)}
 
             {(() => {
             const items = event.params?.items;
             if (Array.isArray(items) && items.length > 0) {
-                return (<react_native_1.View style={[cardStyles.chip, { backgroundColor: AppColors_1.AppColors.amberBg, borderColor: AppColors_1.AppColors.amberBorder }]}>
-                    <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.amber700, fontFamily: AppFonts_1.AppFonts.interBold }]}>
-                      🛒 {items.length} {items.length === 1 ? 'item' : 'items'}
+                return (<react_native_1.View style={[
+                        cardStyles.chip,
+                        {
+                            backgroundColor: AppColors_1.AppColors.amberBg,
+                            borderColor: AppColors_1.AppColors.amberBorder,
+                        },
+                    ]}>
+                    <NetworkIcons_1.CartIcon color={AppColors_1.AppColors.amber700} size={12}/>
+                    <react_native_1.Text style={[
+                        cardStyles.chipText,
+                        {
+                            color: AppColors_1.AppColors.amber700,
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                        },
+                    ]}>
+                      {items.length}{' '}
+                      {items.length === 1
+                        ? t('analytics.item')
+                        : t('analytics.items')}
                     </react_native_1.Text>
                   </react_native_1.View>);
             }
@@ -251,10 +228,25 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             const currency = event.params?.currency ?? '';
             const isPrimitive = typeof val === 'string' || typeof val === 'number';
             if (isPrimitive) {
-                const currencyStr = typeof currency === 'string' || typeof currency === 'number' ? String(currency) : '';
-                return (<react_native_1.View style={[cardStyles.chip, { backgroundColor: AppColors_1.AppColors.emeraldBg, borderColor: AppColors_1.AppColors.emeraldBorder }]}>
-                    <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.emerald600, fontFamily: AppFonts_1.AppFonts.interBold }]}>
-                      💰 {String(val)} {currencyStr}
+                const currencyStr = typeof currency === 'string' || typeof currency === 'number'
+                    ? String(currency)
+                    : '';
+                return (<react_native_1.View style={[
+                        cardStyles.chip,
+                        {
+                            backgroundColor: AppColors_1.AppColors.emeraldBg,
+                            borderColor: AppColors_1.AppColors.emeraldBorder,
+                        },
+                    ]}>
+                    <NetworkIcons_1.MoneyIcon color={AppColors_1.AppColors.emerald600} size={12}/>
+                    <react_native_1.Text style={[
+                        cardStyles.chipText,
+                        {
+                            color: AppColors_1.AppColors.emerald600,
+                            fontFamily: AppFonts_1.AppFonts.interBold,
+                        },
+                    ]}>
+                      {String(val)} {currencyStr}
                     </react_native_1.Text>
                   </react_native_1.View>);
             }

package/dist/commonjs/components/ErrorBoundary.js

@@ -39,6 +39,7 @@ const react_native_1 = require("react-native");
 const AppColors_1 = require("../styles/AppColors");
 const AppFonts_1 = require("../styles/AppFonts");
 const helpers_1 = require("../helpers");
+const NetworkIcons_1 = require("./NetworkIcons");
 function parseStackTrace(stack) {
     if (!stack)
         return null;
@@ -110,7 +111,10 @@ ${error.stack}`;
             const isInline = this.props.fallbackType === 'inline';
             if (isInline) {
                 return (<react_native_1.View style={styles.inlineContainer}>
-            <react_native_1.Text style={styles.inlineTitle}>⚠️ Inspector Crash</react_native_1.Text>
+            <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              <NetworkIcons_1.WarningTriangleIcon color={AppColors_1.AppColors.redErrorText} size={14}/>
+              <react_native_1.Text style={styles.inlineTitle}>Inspector Crash</react_native_1.Text>
+            </react_native_1.View>
             <react_native_1.TouchableOpacity style={styles.inlineResetBtn} onPress={this.handleReset}>
               <react_native_1.Text style={styles.inlineResetText}>Reload</react_native_1.Text>
             </react_native_1.TouchableOpacity>
@@ -121,7 +125,9 @@ ${error.stack}`;
             const parsed = error && error.stack ? parseStackTrace(error.stack) : null;
             return (<react_native_1.View style={styles.container}>
           <react_native_1.View style={styles.card}>
-            <react_native_1.Text style={styles.emoji}>⚠️</react_native_1.Text>
+            <react_native_1.View style={{ marginBottom: 12, alignItems: 'center' }}>
+            <NetworkIcons_1.WarningTriangleIcon color={AppColors_1.AppColors.amber500} size={44}/>
+          </react_native_1.View>
             <react_native_1.Text style={styles.title}>Something went wrong</react_native_1.Text>
             
             <react_native_1.View style={{
@@ -134,13 +140,19 @@ ${error.stack}`;
                     marginBottom: 12,
                     gap: 4
                 }}>
+              <react_native_1.View style={{
+                    width: 8,
+                    height: 8,
+                    borderRadius: 4,
+                    backgroundColor: isNativeCrash ? AppColors_1.AppColors.errorColor : AppColors_1.AppColors.amber500,
+                }}/>
               <react_native_1.Text style={{
                     fontSize: 10,
                     fontWeight: 'bold',
                     color: isNativeCrash ? AppColors_1.AppColors.errorColor : AppColors_1.AppColors.amber500,
                     fontFamily: AppFonts_1.AppFonts.interBold || 'System'
                 }}>
-                {isNativeCrash ? '🔴 NATIVE CRASH' : '🟡 JAVASCRIPT CRASH'}
+                {isNativeCrash ? 'NATIVE CRASH' : 'JAVASCRIPT CRASH'}
               </react_native_1.Text>
             </react_native_1.View>
 
@@ -187,8 +199,9 @@ ${error.stack}`;
                     flexDirection: 'row',
                     gap: 6
                 }} onPress={this.handleCopyTrace}>
+                <NetworkIcons_1.CopyIcon color={AppColors_1.AppColors.white} size={14}/>
                 <react_native_1.Text style={{ color: AppColors_1.AppColors.white, fontSize: 12, fontWeight: 'bold', fontFamily: AppFonts_1.AppFonts.interBold || 'System' }}>
-                  📋 Copy Crash Traceback
+                  Copy Crash Traceback
                 </react_native_1.Text>
               </react_native_1.TouchableOpacity>
             </react_native_1.View>
@@ -231,10 +244,6 @@ const styles = react_native_1.StyleSheet.create({
         shadowRadius: 12,
         elevation: 8,
     },
-    emoji: {
-        fontSize: 40,
-        marginBottom: 12,
-    },
     title: {
         fontFamily: AppFonts_1.AppFonts.interBold || 'System',
         fontSize: 18,

package/dist/commonjs/components/Inspector/BundleTab.d.ts

@@ -32,6 +32,7 @@ export interface BundlePackageItem {
     lastActive?: string;
     npmUrl?: string;
 }
+export type BundleIconType = 'source' | 'deps' | 'media' | 'overhead' | 'image' | 'typescript' | 'javascript' | 'font' | 'json' | 'folder' | 'ban' | 'bolt';
 export interface TreeNode {
     id: string;
     name: string;