react-native-inapp-inspector 1.0.0

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { AnalyticsEvent } from '../types';
+export declare function getEventColor(name: string): string;
+export interface AnalyticsEventCardProps {
+    event: AnalyticsEvent & {
+        count?: number;
+    };
+    onPress: () => void;
+    isNew?: boolean;
+    searchStr?: string;
+    isFirst: boolean;
+    isLast: boolean;
+    msSincePrev?: number;
+    showTimestamp?: boolean;
+    computedScreenName?: string;
+}
+declare const AnalyticsEventCard: React.NamedExoticComponent<AnalyticsEventCardProps>;
+export default AnalyticsEventCard;

package/dist/commonjs/components/AnalyticsEventCard.js

@@ -0,0 +1,327 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+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 HighlightText_1 = __importDefault(require("./HighlightText"));
+const TouchableScale_1 = __importDefault(require("./TouchableScale"));
+// ─── Palette (Google Analytics colours) ───────────────────────────────────────
+const EVENT_PALETTE = [
+    '#4285F4', // blue
+    '#34A853', // green
+    '#9C27B0', // purple
+    '#00897B', // teal
+    '#E53935', // red
+    '#F57C00', // orange
+    '#1565C0', // dark blue
+    '#2E7D32', // dark green
+];
+function getEventColor(name) {
+    let hash = 0;
+    for (let i = 0; i < name.length; i++) {
+        hash = (hash * 31 + name.charCodeAt(i)) | 0;
+    }
+    return EVENT_PALETTE[Math.abs(hash) % EVENT_PALETTE.length];
+}
+// ─── Helpers ──────────────────────────────────────────────────────────────────
+function formatTime(ts) {
+    const d = new Date(ts);
+    const hh = String(d.getHours()).padStart(2, '0');
+    const mm = String(d.getMinutes()).padStart(2, '0');
+    const ss = String(d.getSeconds()).padStart(2, '0');
+    const ms = String(d.getMilliseconds()).padStart(3, '0');
+    return `${hh}:${mm}:${ss}.${ms}`;
+}
+function formatGap(ms) {
+    if (ms < 1000)
+        return `+${ms}ms`;
+    const s = Math.round(ms / 1000);
+    if (s < 60)
+        return `+${s}s`;
+    const m = Math.floor(s / 60);
+    const rem = s % 60;
+    return rem > 0 ? `+${m}m ${rem}s` : `+${m}m`;
+}
+// ─── Component ────────────────────────────────────────────────────────────────
+const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ event, onPress, isNew = false, searchStr = '', msSincePrev, computedScreenName, }) {
+    const color = getEventColor(event.name);
+    const paramCount = event.params ? Object.keys(event.params).length : 0;
+    const userPropCount = event.userProperties
+        ? Object.keys(event.userProperties).length
+        : 0;
+    // Flash animation for newly logged events
+    const flashOpacity = (0, react_1.useRef)(new react_native_1.Animated.Value(isNew ? 1 : 0)).current;
+    (0, react_1.useEffect)(() => {
+        if (isNew) {
+            react_native_1.Animated.timing(flashOpacity, {
+                toValue: 0,
+                duration: 1200,
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [isNew]);
+    const showGap = msSincePrev != null && msSincePrev >= 2000;
+    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}>{formatGap(msSincePrev)}</react_native_1.Text>
+        </react_native_1.View>)}
+
+      {/* ── Main Card ─────────────────────────────────────────────────────── */}
+      <TouchableScale_1.default onPress={onPress} style={cardStyles.modernCard}>
+        <react_native_1.Animated.View style={[
+            react_native_1.StyleSheet.absoluteFill,
+            {
+                backgroundColor: color,
+                opacity: flashOpacity.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, 0.08],
+                }),
+            },
+        ]}/>
+
+        {/* Top Row: Event Name & Timestamp */}
+        <react_native_1.View style={cardStyles.cardHeader}>
+          <react_native_1.View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <react_native_1.View style={[
+            cardStyles.nameBadge,
+            { backgroundColor: `${color}1A`, borderColor: `${color}30` },
+        ]}>
+              <HighlightText_1.default text={event.name} search={searchStr} style={[cardStyles.eventName, { color: color }]} highlightStyle={cardStyles.highlight}/>
+            </react_native_1.View>
+
+            {event.count !== undefined ? (<react_native_1.View style={[
+                cardStyles.duplicateBadge,
+                event.count === 1 && {
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                },
+            ]}>
+                <react_native_1.Text style={[
+                cardStyles.duplicateText,
+                event.count === 1 && { color: AppColors_1.AppColors.grayTextStrong },
+            ]}>
+                  {event.count}×{event.count > 1 ? ' Duplicate' : ''}
+                </react_native_1.Text>
+              </react_native_1.View>) : null}
+          </react_native_1.View>
+          <react_native_1.Text style={cardStyles.timestamp}>
+            {formatTime(event.timestamp)}
+          </react_native_1.Text>
+        </react_native_1.View>
+
+        {/* Bottom Row: Metadata Chips & Sparkline */}
+        <react_native_1.View style={cardStyles.cardBody}>
+          <react_native_1.View style={cardStyles.chipsRow}>
+            {computedScreenName ||
+            event.screenName ||
+            event.params?.firebase_screen ||
+            event.params?.screen_name ||
+            event.params?.firebase_screen_class ? (<react_native_1.View style={cardStyles.chip}>
+                <react_native_1.View style={[cardStyles.screenDot, { backgroundColor: color }]}/>
+                <react_native_1.Text style={cardStyles.chipText} numberOfLines={1}>
+                  {computedScreenName ||
+                event.screenName ||
+                event.params?.firebase_screen ||
+                event.params?.screen_name ||
+                event.params?.firebase_screen_class}
+                </react_native_1.Text>
+              </react_native_1.View>) : null}
+
+            <react_native_1.View style={cardStyles.chip}>
+              <react_native_1.Text style={cardStyles.chipText}>
+                {'{} '} {paramCount} params
+              </react_native_1.Text>
+            </react_native_1.View>
+
+            {userPropCount > 0 && (<react_native_1.View style={cardStyles.chip}>
+                <react_native_1.Text style={cardStyles.chipText}>★ {userPropCount} props</react_native_1.Text>
+              </react_native_1.View>)}
+          </react_native_1.View>
+
+          {/* Inline Mini Graph for E-commerce Items */}
+          {(() => {
+            const items = event.params?.items;
+            if (!Array.isArray(items) || items.length === 0)
+                return null;
+            const prices = items
+                .map((item) => parseFloat(item.price || item.value))
+                .filter(p => !isNaN(p));
+            if (prices.length === 0)
+                return null;
+            const max = Math.max(...prices);
+            if (max === 0)
+                return null;
+            return (<react_native_1.View style={cardStyles.miniGraphWrapper}>
+                {prices.map((val, idx) => {
+                    const hPct = (val / max) * 100;
+                    return (<react_native_1.View key={idx} style={[
+                            cardStyles.miniGraphBar,
+                            {
+                                height: `${Math.max(15, hPct)}%`,
+                                backgroundColor: color,
+                            },
+                        ]}/>);
+                })}
+              </react_native_1.View>);
+        })()}
+        </react_native_1.View>
+      </TouchableScale_1.default>
+    </react_native_1.View>);
+});
+// ─── Styles ───────────────────────────────────────────────────────────────────
+const cardStyles = react_native_1.StyleSheet.create({
+    container: {
+        paddingHorizontal: 16,
+        paddingVertical: 4,
+    },
+    gapContainer: {
+        alignItems: 'center',
+        marginVertical: 4,
+    },
+    gapText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayTextWeak,
+        letterSpacing: 0.5,
+    },
+    modernCard: {
+        backgroundColor: '#FFFFFF',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: '#EFEFEF',
+        padding: 12,
+        shadowColor: '#000',
+        shadowOpacity: 0.03,
+        shadowRadius: 3,
+        shadowOffset: { width: 0, height: 1 },
+        elevation: 1,
+        overflow: 'hidden',
+    },
+    cardHeader: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        marginBottom: 8,
+    },
+    nameBadge: {
+        paddingHorizontal: 8,
+        paddingVertical: 4,
+        borderRadius: 6,
+        borderWidth: 1,
+    },
+    eventName: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 12,
+        letterSpacing: 0.2,
+    },
+    timestamp: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors_1.AppColors.grayTextWeak,
+    },
+    highlight: {
+        backgroundColor: '#FFE44D',
+        color: AppColors_1.AppColors.primaryBlack,
+        borderRadius: 2,
+    },
+    cardBody: {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        justifyContent: 'space-between',
+    },
+    chipsRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        flexWrap: 'wrap',
+        gap: 8,
+        flex: 1,
+    },
+    chip: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        backgroundColor: AppColors_1.AppColors.grayBackground,
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+    },
+    chipText: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        fontSize: 10,
+        color: AppColors_1.AppColors.grayText,
+    },
+    screenDot: {
+        width: 6,
+        height: 6,
+        borderRadius: 3,
+        marginRight: 4,
+    },
+    duplicateBadge: {
+        backgroundColor: '#FFE4E6',
+        borderColor: '#FCC2D7',
+        borderWidth: 1,
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 4,
+    },
+    duplicateText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9,
+        color: '#E11D48',
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    },
+    miniGraphWrapper: {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        height: 18,
+        gap: 2,
+        marginLeft: 12,
+    },
+    miniGraphBar: {
+        width: 4,
+        borderRadius: 2,
+        opacity: 0.7,
+    },
+});
+exports.default = AnalyticsEventCard;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { AnalyticsEvent } from '../types';
+interface Props {
+    event: AnalyticsEvent;
+    accentColor: string;
+}
+declare const AnalyticsGraph: ({ event, accentColor }: Props) => React.JSX.Element;
+export default AnalyticsGraph;