react-native-inapp-inspector 1.0.0

package/dist/commonjs/components/AnalyticsGraph.js

@@ -0,0 +1,416 @@
+"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 });
+const react_1 = __importDefault(require("react"));
+const react_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+const AppColors_1 = require("../styles/AppColors");
+const AppFonts_1 = require("../styles/AppFonts");
+const BAR_HEIGHT = 24;
+const PADDING_Y = 12;
+const AnalyticsGraph = ({ event, accentColor }) => {
+    const params = event.params || {};
+    // 1. Check for E-commerce items array
+    const itemsArray = Array.isArray(params.items) ? params.items : null;
+    const filteredItems = itemsArray?.filter((item) => typeof item.price === 'number') || [];
+    // 2. Discover root-level numeric fields (exclude ids)
+    const rootNumericKeys = [];
+    Object.entries(params).forEach(([k, v]) => {
+        if (typeof v === 'number' &&
+            !k.toLowerCase().includes('id') &&
+            !k.toLowerCase().includes('timestamp')) {
+            rootNumericKeys.push({ key: k, value: v });
+        }
+    });
+    // 3. Discover dates (YYYY-MM-DD format commonly used in booking/flights)
+    const dateKeys = [];
+    Object.entries(params).forEach(([k, v]) => {
+        if (typeof v === 'string' &&
+            v.length >= 10 &&
+            /^\d{4}-\d{2}-\d{2}/.test(v)) {
+            const d = new Date(v);
+            if (!isNaN(d.getTime())) {
+                dateKeys.push({ key: k, date: d });
+            }
+        }
+    });
+    // 4. Calculate parameter types
+    const paramTypes = { string: 0, number: 0, boolean: 0, object: 0 };
+    const strings = [];
+    Object.entries(params).forEach(([k, v]) => {
+        const t = typeof v;
+        if (t === 'string') {
+            paramTypes.string++;
+            strings.push({ label: k, value: v.length });
+        }
+        else if (t === 'number') {
+            paramTypes.number++;
+        }
+        else if (t === 'boolean') {
+            paramTypes.boolean++;
+        }
+        else if (t === 'object' && v !== null) {
+            paramTypes.object++;
+        }
+    });
+    const typeData = [
+        { label: 'Strings', value: paramTypes.string, color: AppColors_1.AppColors.purple },
+        { label: 'Numbers', value: paramTypes.number, color: AppColors_1.AppColors.skyBlue },
+        { label: 'Booleans', value: paramTypes.boolean, color: '#F59E0B' }, // Amber
+        { label: 'Objects', value: paramTypes.object, color: AppColors_1.AppColors.greenColor },
+    ].filter(d => d.value > 0);
+    strings.sort((a, b) => b.value - a.value);
+    const topStrings = strings.slice(0, 5);
+    const hasItemsChart = filteredItems.length > 0;
+    const hasRootNumericChart = rootNumericKeys.length > 0;
+    const hasDatesChart = dateKeys.length > 0;
+    const hasStringsChart = topStrings.length > 0;
+    const hasTypeData = typeData.length > 0;
+    const screenWidth = react_native_1.Dimensions.get('window').width - 60; // Padding adjustments
+    const rightMargin = 40; // Space for labels at the end of the bar
+    const maxBarWidth = screenWidth - rightMargin;
+    return (<react_native_1.View style={graphStyles.container}>
+      <react_native_1.Text style={graphStyles.headerTitle}>Data Visualization</react_native_1.Text>
+
+      {hasTypeData && (<react_native_1.View style={graphStyles.chartBlock}>
+          <react_native_1.Text style={graphStyles.chartTitle}>Data Types Breakdown</react_native_1.Text>
+          <DonutChart data={typeData}/>
+        </react_native_1.View>)}
+
+      {hasStringsChart && (<react_native_1.View style={graphStyles.chartBlock}>
+          <react_native_1.Text style={graphStyles.chartTitle}>Highest Payload Strings</react_native_1.Text>
+          <BarChart data={topStrings} accentColor={AppColors_1.AppColors.purple} maxBarWidth={maxBarWidth} isGradient/>
+        </react_native_1.View>)}
+
+      {hasRootNumericChart && (<react_native_1.View style={graphStyles.chartBlock}>
+          <react_native_1.Text style={graphStyles.chartTitle}>Top-Level Metrics</react_native_1.Text>
+          <GaugeChart data={rootNumericKeys.map(d => ({ label: d.key, value: d.value }))} accentColor={accentColor}/>
+        </react_native_1.View>)}
+
+      {hasDatesChart && (<react_native_1.View style={graphStyles.chartBlock}>
+          <react_native_1.Text style={graphStyles.chartTitle}>Important Dates</react_native_1.Text>
+          <CalendarChart data={dateKeys.map(d => ({ label: d.key, date: d.date }))} accentColor={accentColor}/>
+        </react_native_1.View>)}
+
+      {hasItemsChart && (<react_native_1.View style={graphStyles.chartBlock}>
+          <react_native_1.Text style={graphStyles.chartTitle}>Item Prices</react_native_1.Text>
+          <BarChart data={filteredItems.map((item, i) => ({
+                label: item.item_name || item.item_id || `Item ${i + 1}`,
+                value: item.price,
+            }))} accentColor={AppColors_1.AppColors.successGreen || '#22C55E'} maxBarWidth={maxBarWidth} isGradient={false}/>
+        </react_native_1.View>)}
+    </react_native_1.View>);
+};
+// --- Donut Chart Helpers ---
+const polarToCartesian = (centerX, centerY, radius, angleInDegrees) => {
+    const angleInRadians = ((angleInDegrees - 90) * Math.PI) / 180.0;
+    return {
+        x: centerX + radius * Math.cos(angleInRadians),
+        y: centerY + radius * Math.sin(angleInRadians),
+    };
+};
+const getPiePath = (x, y, radius, innerRadius, startAngle, endAngle) => {
+    const start = polarToCartesian(x, y, radius, endAngle);
+    const end = polarToCartesian(x, y, radius, startAngle);
+    const startInner = polarToCartesian(x, y, innerRadius, endAngle);
+    const endInner = polarToCartesian(x, y, innerRadius, startAngle);
+    const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+    return `
+    M ${start.x} ${start.y}
+    A ${radius} ${radius} 0 ${largeArcFlag} 0 ${end.x} ${end.y}
+    L ${endInner.x} ${endInner.y}
+    A ${innerRadius} ${innerRadius} 0 ${largeArcFlag} 1 ${startInner.x} ${startInner.y}
+    Z
+  `;
+};
+const DonutChart = ({ data, }) => {
+    const total = data.reduce((sum, d) => sum + d.value, 0);
+    if (total === 0)
+        return null;
+    let currentAngle = 0;
+    const radius = 50;
+    const innerRadius = 30;
+    const center = 60;
+    return (<react_native_1.View style={{ flexDirection: 'row', alignItems: 'center' }}>
+      <react_native_svg_1.default width="120" height="120" viewBox="0 0 120 120">
+        {data.map((d, i) => {
+            if (d.value === 0)
+                return null;
+            const angle = (d.value / total) * 360;
+            const startAngle = currentAngle;
+            const endAngle = currentAngle + angle;
+            currentAngle += angle;
+            if (angle === 360) {
+                return (<react_1.default.Fragment key={i}>
+                <react_native_svg_1.Circle cx={center} cy={center} r={radius} fill={d.color}/>
+                <react_native_svg_1.Circle cx={center} cy={center} r={innerRadius} fill={AppColors_1.AppColors.primaryLight}/>
+              </react_1.default.Fragment>);
+            }
+            const path = getPiePath(center, center, radius, innerRadius, startAngle, endAngle);
+            return <react_native_svg_1.Path key={i} d={path} fill={d.color}/>;
+        })}
+      </react_native_svg_1.default>
+      <react_native_1.View style={{ marginLeft: 16, flex: 1, gap: 6 }}>
+        {data.map((d, i) => {
+            if (d.value === 0)
+                return null;
+            return (<react_native_1.View key={i} style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              <react_native_1.View style={{
+                    width: 10,
+                    height: 10,
+                    borderRadius: 5,
+                    backgroundColor: d.color,
+                }}/>
+              <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 11,
+                    color: AppColors_1.AppColors.grayTextStrong,
+                }}>
+                {d.label} ({d.value})
+              </react_native_1.Text>
+            </react_native_1.View>);
+        })}
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+const GaugeChart = ({ data, accentColor, }) => {
+    const maxVal = Math.max(...data.map(d => Math.abs(d.value)), 1);
+    const radius = 26;
+    const stroke = 5;
+    const circumference = 2 * Math.PI * radius;
+    return (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+            gap: 16,
+            paddingRight: 16,
+            paddingTop: 6,
+            paddingBottom: 6,
+        }}>
+      {data.map((d, i) => {
+            const fillPct = Math.min(Math.abs(d.value) / maxVal, 1);
+            const strokeDashoffset = Math.max(circumference - fillPct * circumference, 0.001); // avoid exact 0
+            return (<react_native_1.View key={d.label} style={{ alignItems: 'center', width: 70 }}>
+            <react_native_svg_1.default width="60" height="60" viewBox="0 0 60 60">
+              <react_native_svg_1.Circle cx="30" cy="30" r={radius} stroke="#F3F4F6" strokeWidth={stroke} fill="none"/>
+              <react_native_svg_1.Circle cx="30" cy="30" r={radius} stroke={accentColor} strokeWidth={stroke} fill="none" strokeLinecap="round" strokeDasharray={circumference} strokeDashoffset={strokeDashoffset} rotation="-90" origin="30, 30"/>
+            </react_native_svg_1.default>
+            <react_native_1.View style={{
+                    position: 'absolute',
+                    top: 20,
+                    height: 20,
+                    width: 60,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }}>
+              <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 13,
+                    color: AppColors_1.AppColors.primaryBlack,
+                    textAlign: 'center',
+                }}>
+                {d.value >= 1000 ? (d.value / 1000).toFixed(1) + 'k' : d.value}
+              </react_native_1.Text>
+            </react_native_1.View>
+            <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 10,
+                    color: AppColors_1.AppColors.grayTextWeak,
+                    marginTop: 6,
+                    textAlign: 'center',
+                }} numberOfLines={1}>
+              {d.label}
+            </react_native_1.Text>
+          </react_native_1.View>);
+        })}
+    </react_native_1.ScrollView>);
+};
+const CalendarChart = ({ data, accentColor, }) => {
+    const months = [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec',
+    ];
+    return (<react_native_1.ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{
+            gap: 16,
+            paddingRight: 16,
+            paddingTop: 6,
+            paddingBottom: 6,
+        }}>
+      {data.map((d, i) => {
+            const monthText = months[d.date.getMonth()];
+            const dayText = d.date.getDate();
+            const yearText = d.date.getFullYear();
+            return (<react_native_1.View key={d.label + i} style={{ width: 70, alignItems: 'center' }}>
+            <react_native_1.View style={{
+                    width: 58,
+                    height: 62,
+                    backgroundColor: '#FFFFFF',
+                    borderRadius: 8,
+                    borderWidth: 1,
+                    borderColor: AppColors_1.AppColors.grayBorderSecondary,
+                    overflow: 'hidden',
+                    shadowColor: '#000',
+                    shadowOpacity: 0.05,
+                    shadowRadius: 4,
+                    shadowOffset: { width: 0, height: 2 },
+                    elevation: 2,
+                }}>
+              {/* Calendar Header with Accent Color */}
+              <react_native_1.View style={{
+                    backgroundColor: accentColor,
+                    height: 18,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }}>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 9,
+                    color: '#FFF',
+                    textTransform: 'uppercase',
+                    letterSpacing: 0.5,
+                }}>
+                  {monthText} {yearText}
+                </react_native_1.Text>
+              </react_native_1.View>
+              {/* Calendar Body */}
+              <react_native_1.View style={{
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    backgroundColor: '#FAFAFA',
+                }}>
+                <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interBold,
+                    fontSize: 24,
+                    color: AppColors_1.AppColors.primaryBlack,
+                }}>
+                  {dayText}
+                </react_native_1.Text>
+              </react_native_1.View>
+            </react_native_1.View>
+
+            <react_native_1.Text style={{
+                    fontFamily: AppFonts_1.AppFonts.interMedium,
+                    fontSize: 10,
+                    color: AppColors_1.AppColors.grayTextWeak,
+                    marginTop: 8,
+                    textAlign: 'center',
+                }} numberOfLines={2}>
+              {d.label.replace(/_/g, ' ')}
+            </react_native_1.Text>
+          </react_native_1.View>);
+        })}
+    </react_native_1.ScrollView>);
+};
+const BarChart = ({ data, accentColor, maxBarWidth, isGradient = false, }) => {
+    const maxVal = Math.max(...data.map(d => d.value), 1);
+    const chartHeight = data.length * (BAR_HEIGHT + PADDING_Y) + 10;
+    return (<react_native_1.View style={graphStyles.svgContainer}>
+      <react_native_svg_1.default width="100%" height={chartHeight}>
+        <react_native_svg_1.Defs>
+          <react_native_svg_1.LinearGradient id="barGrad" x1="0" y1="0" x2="1" y2="0">
+            <react_native_svg_1.Stop offset="0" stopColor={accentColor} stopOpacity="0.6"/>
+            <react_native_svg_1.Stop offset="1" stopColor={accentColor} stopOpacity="1"/>
+          </react_native_svg_1.LinearGradient>
+        </react_native_svg_1.Defs>
+        {data.map((d, i) => {
+            const y = i * (BAR_HEIGHT + PADDING_Y);
+            const barWidth = Math.max((d.value / maxVal) * maxBarWidth, 2);
+            return (<react_1.default.Fragment key={d.label}>
+              {/* Label above bar */}
+              <react_native_svg_1.Text x={0} y={y + 12} fill={AppColors_1.AppColors.grayTextStrong} fontSize="11" fontFamily={AppFonts_1.AppFonts.interMedium}>
+                {d.label}
+              </react_native_svg_1.Text>
+
+              {/* Background trace line */}
+              <react_native_svg_1.Line x1={0} y1={y + 24} x2={maxBarWidth} y2={y + 24} stroke={AppColors_1.AppColors.grayBorderSecondary} strokeDasharray="4"/>
+
+              {/* The actual Bar */}
+              <react_native_svg_1.Rect x={0} y={y + 16} width={barWidth} height={14} fill={isGradient ? 'url(#barGrad)' : accentColor} rx={4} opacity={0.85}/>
+
+              {/* Value Text at the end of the bar */}
+              <react_native_svg_1.Text x={barWidth + 6} y={y + 26} fill={AppColors_1.AppColors.primaryBlack} fontSize="11" fontFamily={AppFonts_1.AppFonts.interBold}>
+                {d.value}
+              </react_native_svg_1.Text>
+            </react_1.default.Fragment>);
+        })}
+      </react_native_svg_1.default>
+    </react_native_1.View>);
+};
+const graphStyles = react_native_1.StyleSheet.create({
+    container: {
+        backgroundColor: AppColors_1.AppColors.primaryLight,
+        borderWidth: 1,
+        borderColor: AppColors_1.AppColors.grayBorderSecondary,
+        borderRadius: 12,
+        marginBottom: 10,
+        padding: 14,
+        overflow: 'hidden',
+    },
+    headerTitle: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        color: AppColors_1.AppColors.primaryBlack,
+        fontSize: 14,
+        marginBottom: 12,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors_1.AppColors.dividerColor,
+        paddingBottom: 8,
+    },
+    chartBlock: {
+        marginBottom: 16,
+    },
+    chartTitle: {
+        fontFamily: AppFonts_1.AppFonts.interMedium,
+        color: AppColors_1.AppColors.grayTextWeak,
+        fontSize: 12,
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+        marginBottom: 8,
+    },
+    svgContainer: {
+        marginTop: 4,
+    },
+});
+exports.default = AnalyticsGraph;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+interface CodeSnippetProps {
+    code: string;
+    language: 'html' | 'css' | 'javascript';
+    search?: string;
+}
+declare const CodeSnippet: React.FC<CodeSnippetProps>;
+export default CodeSnippet;