react-native-inapp-inspector 1.0.0

package/dist/esm/components/AnalyticsEventCard.js

@@ -0,0 +1,288 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet, Text, View } from 'react-native';
+import { AppColors } from '../styles/AppColors';
+import { AppFonts } from '../styles/AppFonts';
+import HighlightText from './HighlightText';
+import TouchableScale from './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
+];
+export 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.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 = useRef(new Animated.Value(isNew ? 1 : 0)).current;
+    useEffect(() => {
+        if (isNew) {
+            Animated.timing(flashOpacity, {
+                toValue: 0,
+                duration: 1200,
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [isNew]);
+    const showGap = msSincePrev != null && msSincePrev >= 2000;
+    return (<View style={cardStyles.container}>
+      {/* ── Gap Indicator ─────────────────────────────────────────────────── */}
+      {showGap && (<View style={cardStyles.gapContainer}>
+          <Text style={cardStyles.gapText}>{formatGap(msSincePrev)}</Text>
+        </View>)}
+
+      {/* ── Main Card ─────────────────────────────────────────────────────── */}
+      <TouchableScale onPress={onPress} style={cardStyles.modernCard}>
+        <Animated.View style={[
+            StyleSheet.absoluteFill,
+            {
+                backgroundColor: color,
+                opacity: flashOpacity.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [0, 0.08],
+                }),
+            },
+        ]}/>
+
+        {/* Top Row: Event Name & Timestamp */}
+        <View style={cardStyles.cardHeader}>
+          <View style={{ flexDirection: 'row', alignItems: 'center', gap: 8 }}>
+            <View style={[
+            cardStyles.nameBadge,
+            { backgroundColor: `${color}1A`, borderColor: `${color}30` },
+        ]}>
+              <HighlightText text={event.name} search={searchStr} style={[cardStyles.eventName, { color: color }]} highlightStyle={cardStyles.highlight}/>
+            </View>
+
+            {event.count !== undefined ? (<View style={[
+                cardStyles.duplicateBadge,
+                event.count === 1 && {
+                    backgroundColor: AppColors.grayBackground,
+                    borderColor: AppColors.grayBorderSecondary,
+                },
+            ]}>
+                <Text style={[
+                cardStyles.duplicateText,
+                event.count === 1 && { color: AppColors.grayTextStrong },
+            ]}>
+                  {event.count}×{event.count > 1 ? ' Duplicate' : ''}
+                </Text>
+              </View>) : null}
+          </View>
+          <Text style={cardStyles.timestamp}>
+            {formatTime(event.timestamp)}
+          </Text>
+        </View>
+
+        {/* Bottom Row: Metadata Chips & Sparkline */}
+        <View style={cardStyles.cardBody}>
+          <View style={cardStyles.chipsRow}>
+            {computedScreenName ||
+            event.screenName ||
+            event.params?.firebase_screen ||
+            event.params?.screen_name ||
+            event.params?.firebase_screen_class ? (<View style={cardStyles.chip}>
+                <View style={[cardStyles.screenDot, { backgroundColor: color }]}/>
+                <Text style={cardStyles.chipText} numberOfLines={1}>
+                  {computedScreenName ||
+                event.screenName ||
+                event.params?.firebase_screen ||
+                event.params?.screen_name ||
+                event.params?.firebase_screen_class}
+                </Text>
+              </View>) : null}
+
+            <View style={cardStyles.chip}>
+              <Text style={cardStyles.chipText}>
+                {'{} '} {paramCount} params
+              </Text>
+            </View>
+
+            {userPropCount > 0 && (<View style={cardStyles.chip}>
+                <Text style={cardStyles.chipText}>★ {userPropCount} props</Text>
+              </View>)}
+          </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 (<View style={cardStyles.miniGraphWrapper}>
+                {prices.map((val, idx) => {
+                    const hPct = (val / max) * 100;
+                    return (<View key={idx} style={[
+                            cardStyles.miniGraphBar,
+                            {
+                                height: `${Math.max(15, hPct)}%`,
+                                backgroundColor: color,
+                            },
+                        ]}/>);
+                })}
+              </View>);
+        })()}
+        </View>
+      </TouchableScale>
+    </View>);
+});
+// ─── Styles ───────────────────────────────────────────────────────────────────
+const cardStyles = StyleSheet.create({
+    container: {
+        paddingHorizontal: 16,
+        paddingVertical: 4,
+    },
+    gapContainer: {
+        alignItems: 'center',
+        marginVertical: 4,
+    },
+    gapText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 10,
+        color: 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.interBold,
+        fontSize: 12,
+        letterSpacing: 0.2,
+    },
+    timestamp: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 11,
+        color: AppColors.grayTextWeak,
+    },
+    highlight: {
+        backgroundColor: '#FFE44D',
+        color: 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.grayBackground,
+        paddingHorizontal: 6,
+        paddingVertical: 3,
+        borderRadius: 4,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+    },
+    chipText: {
+        fontFamily: AppFonts.interMedium,
+        fontSize: 10,
+        color: 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.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,
+    },
+});
+export default AnalyticsEventCard;

package/dist/esm/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;

package/dist/esm/components/AnalyticsGraph.js

@@ -0,0 +1,378 @@
+import React from 'react';
+import { View, Text, ScrollView, Dimensions, StyleSheet } from 'react-native';
+import Svg, { Rect, Text as SvgText, Line, Circle, Path, Defs, LinearGradient, Stop, } from 'react-native-svg';
+import { AppColors } from '../styles/AppColors';
+import { AppFonts } from '../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.purple },
+        { label: 'Numbers', value: paramTypes.number, color: AppColors.skyBlue },
+        { label: 'Booleans', value: paramTypes.boolean, color: '#F59E0B' }, // Amber
+        { label: 'Objects', value: paramTypes.object, color: 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 = Dimensions.get('window').width - 60; // Padding adjustments
+    const rightMargin = 40; // Space for labels at the end of the bar
+    const maxBarWidth = screenWidth - rightMargin;
+    return (<View style={graphStyles.container}>
+      <Text style={graphStyles.headerTitle}>Data Visualization</Text>
+
+      {hasTypeData && (<View style={graphStyles.chartBlock}>
+          <Text style={graphStyles.chartTitle}>Data Types Breakdown</Text>
+          <DonutChart data={typeData}/>
+        </View>)}
+
+      {hasStringsChart && (<View style={graphStyles.chartBlock}>
+          <Text style={graphStyles.chartTitle}>Highest Payload Strings</Text>
+          <BarChart data={topStrings} accentColor={AppColors.purple} maxBarWidth={maxBarWidth} isGradient/>
+        </View>)}
+
+      {hasRootNumericChart && (<View style={graphStyles.chartBlock}>
+          <Text style={graphStyles.chartTitle}>Top-Level Metrics</Text>
+          <GaugeChart data={rootNumericKeys.map(d => ({ label: d.key, value: d.value }))} accentColor={accentColor}/>
+        </View>)}
+
+      {hasDatesChart && (<View style={graphStyles.chartBlock}>
+          <Text style={graphStyles.chartTitle}>Important Dates</Text>
+          <CalendarChart data={dateKeys.map(d => ({ label: d.key, date: d.date }))} accentColor={accentColor}/>
+        </View>)}
+
+      {hasItemsChart && (<View style={graphStyles.chartBlock}>
+          <Text style={graphStyles.chartTitle}>Item Prices</Text>
+          <BarChart data={filteredItems.map((item, i) => ({
+                label: item.item_name || item.item_id || `Item ${i + 1}`,
+                value: item.price,
+            }))} accentColor={AppColors.successGreen || '#22C55E'} maxBarWidth={maxBarWidth} isGradient={false}/>
+        </View>)}
+    </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 (<View style={{ flexDirection: 'row', alignItems: 'center' }}>
+      <Svg 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.Fragment key={i}>
+                <Circle cx={center} cy={center} r={radius} fill={d.color}/>
+                <Circle cx={center} cy={center} r={innerRadius} fill={AppColors.primaryLight}/>
+              </React.Fragment>);
+            }
+            const path = getPiePath(center, center, radius, innerRadius, startAngle, endAngle);
+            return <Path key={i} d={path} fill={d.color}/>;
+        })}
+      </Svg>
+      <View style={{ marginLeft: 16, flex: 1, gap: 6 }}>
+        {data.map((d, i) => {
+            if (d.value === 0)
+                return null;
+            return (<View key={i} style={{ flexDirection: 'row', alignItems: 'center', gap: 6 }}>
+              <View style={{
+                    width: 10,
+                    height: 10,
+                    borderRadius: 5,
+                    backgroundColor: d.color,
+                }}/>
+              <Text style={{
+                    fontFamily: AppFonts.interMedium,
+                    fontSize: 11,
+                    color: AppColors.grayTextStrong,
+                }}>
+                {d.label} ({d.value})
+              </Text>
+            </View>);
+        })}
+      </View>
+    </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 (<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 (<View key={d.label} style={{ alignItems: 'center', width: 70 }}>
+            <Svg width="60" height="60" viewBox="0 0 60 60">
+              <Circle cx="30" cy="30" r={radius} stroke="#F3F4F6" strokeWidth={stroke} fill="none"/>
+              <Circle cx="30" cy="30" r={radius} stroke={accentColor} strokeWidth={stroke} fill="none" strokeLinecap="round" strokeDasharray={circumference} strokeDashoffset={strokeDashoffset} rotation="-90" origin="30, 30"/>
+            </Svg>
+            <View style={{
+                    position: 'absolute',
+                    top: 20,
+                    height: 20,
+                    width: 60,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }}>
+              <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 13,
+                    color: AppColors.primaryBlack,
+                    textAlign: 'center',
+                }}>
+                {d.value >= 1000 ? (d.value / 1000).toFixed(1) + 'k' : d.value}
+              </Text>
+            </View>
+            <Text style={{
+                    fontFamily: AppFonts.interMedium,
+                    fontSize: 10,
+                    color: AppColors.grayTextWeak,
+                    marginTop: 6,
+                    textAlign: 'center',
+                }} numberOfLines={1}>
+              {d.label}
+            </Text>
+          </View>);
+        })}
+    </ScrollView>);
+};
+const CalendarChart = ({ data, accentColor, }) => {
+    const months = [
+        'Jan',
+        'Feb',
+        'Mar',
+        'Apr',
+        'May',
+        'Jun',
+        'Jul',
+        'Aug',
+        'Sep',
+        'Oct',
+        'Nov',
+        'Dec',
+    ];
+    return (<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 (<View key={d.label + i} style={{ width: 70, alignItems: 'center' }}>
+            <View style={{
+                    width: 58,
+                    height: 62,
+                    backgroundColor: '#FFFFFF',
+                    borderRadius: 8,
+                    borderWidth: 1,
+                    borderColor: AppColors.grayBorderSecondary,
+                    overflow: 'hidden',
+                    shadowColor: '#000',
+                    shadowOpacity: 0.05,
+                    shadowRadius: 4,
+                    shadowOffset: { width: 0, height: 2 },
+                    elevation: 2,
+                }}>
+              {/* Calendar Header with Accent Color */}
+              <View style={{
+                    backgroundColor: accentColor,
+                    height: 18,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                }}>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 9,
+                    color: '#FFF',
+                    textTransform: 'uppercase',
+                    letterSpacing: 0.5,
+                }}>
+                  {monthText} {yearText}
+                </Text>
+              </View>
+              {/* Calendar Body */}
+              <View style={{
+                    flex: 1,
+                    justifyContent: 'center',
+                    alignItems: 'center',
+                    backgroundColor: '#FAFAFA',
+                }}>
+                <Text style={{
+                    fontFamily: AppFonts.interBold,
+                    fontSize: 24,
+                    color: AppColors.primaryBlack,
+                }}>
+                  {dayText}
+                </Text>
+              </View>
+            </View>
+
+            <Text style={{
+                    fontFamily: AppFonts.interMedium,
+                    fontSize: 10,
+                    color: AppColors.grayTextWeak,
+                    marginTop: 8,
+                    textAlign: 'center',
+                }} numberOfLines={2}>
+              {d.label.replace(/_/g, ' ')}
+            </Text>
+          </View>);
+        })}
+    </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 (<View style={graphStyles.svgContainer}>
+      <Svg width="100%" height={chartHeight}>
+        <Defs>
+          <LinearGradient id="barGrad" x1="0" y1="0" x2="1" y2="0">
+            <Stop offset="0" stopColor={accentColor} stopOpacity="0.6"/>
+            <Stop offset="1" stopColor={accentColor} stopOpacity="1"/>
+          </LinearGradient>
+        </Defs>
+        {data.map((d, i) => {
+            const y = i * (BAR_HEIGHT + PADDING_Y);
+            const barWidth = Math.max((d.value / maxVal) * maxBarWidth, 2);
+            return (<React.Fragment key={d.label}>
+              {/* Label above bar */}
+              <SvgText x={0} y={y + 12} fill={AppColors.grayTextStrong} fontSize="11" fontFamily={AppFonts.interMedium}>
+                {d.label}
+              </SvgText>
+
+              {/* Background trace line */}
+              <Line x1={0} y1={y + 24} x2={maxBarWidth} y2={y + 24} stroke={AppColors.grayBorderSecondary} strokeDasharray="4"/>
+
+              {/* The actual Bar */}
+              <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 */}
+              <SvgText x={barWidth + 6} y={y + 26} fill={AppColors.primaryBlack} fontSize="11" fontFamily={AppFonts.interBold}>
+                {d.value}
+              </SvgText>
+            </React.Fragment>);
+        })}
+      </Svg>
+    </View>);
+};
+const graphStyles = StyleSheet.create({
+    container: {
+        backgroundColor: AppColors.primaryLight,
+        borderWidth: 1,
+        borderColor: AppColors.grayBorderSecondary,
+        borderRadius: 12,
+        marginBottom: 10,
+        padding: 14,
+        overflow: 'hidden',
+    },
+    headerTitle: {
+        fontFamily: AppFonts.interBold,
+        color: AppColors.primaryBlack,
+        fontSize: 14,
+        marginBottom: 12,
+        borderBottomWidth: 1,
+        borderBottomColor: AppColors.dividerColor,
+        paddingBottom: 8,
+    },
+    chartBlock: {
+        marginBottom: 16,
+    },
+    chartTitle: {
+        fontFamily: AppFonts.interMedium,
+        color: AppColors.grayTextWeak,
+        fontSize: 12,
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+        marginBottom: 8,
+    },
+    svgContainer: {
+        marginTop: 4,
+    },
+});
+export default AnalyticsGraph;

package/dist/esm/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;