react-native-inapp-inspector 1.1.13 → 1.1.15

package/README.md

@@ -14,7 +14,7 @@
   <a href="https://github.com/vengatmacuser/react-native-inapp-inspector"><img src="https://img.shields.io/badge/platform-iOS%20%7C%20Android-blue" alt="platform" /></a>
 </p>
 
-A self-contained in-app debugging overlay for React Native. Inspect network traffic, console output, analytics events, Redux state, and WebView activity directly inside your app.
+A self-contained in-app debugging overlay for React Native. Inspect network traffic, console output, analytics events, and Redux state directly inside your app.
 
 <p align="center">
   <img src="https://raw.githubusercontent.com/vengatmacuser/react-native-inapp-inspector/main/assets/walkthrough.gif" alt="React Native In-App Inspector Walkthrough" width="360" style="border-radius: 20px;" />
@@ -27,11 +27,9 @@ A self-contained in-app debugging overlay for React Native. Inspect network traf
 | Feature            | Description                                                                                                                                                                 |
 | ------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | Network inspector  | Captures `fetch` and axios `GET`, `POST`, `PUT`, `PATCH`, and `DELETE` calls with URL, method, status, headers, body, response, duration, caller, cURL, and fetch snippets. |
-| Insights dashboard | Shows request totals, status breakdowns, latency, payload size, slow requests, and recent activity charts.                                                                  |
 | Console logger     | Captures `console.log`, `console.info`, `console.warn`, and `console.error` with source method and caller details.                                                          |
 | Analytics tracker  | Captures manual analytics events and patched `@react-native-firebase/analytics` calls including `logEvent`, `logScreenView`, user properties, and user id.                  |
 | Redux inspector    | Connects to a Redux store, displays the live state tree, tracks dispatched actions, affected slices, and action history.                                                    |
-| WebView inspector  | Provides an instrumented `WebView` with console capture, navigation history, HTML/CSS/JS snapshots, and optional loading overlay.                                           |
 | Error boundary     | Exports an `ErrorBoundary` for catching React errors and wrapping the inspector safely.                                                                                     |
 
 ---
@@ -54,10 +52,10 @@ yarn add -D react-native-inapp-inspector axios
 
 The package has React and React Native as peer dependencies. It depends on `@react-navigation/native`, `react-native-linear-gradient`, and `react-native-svg`. The current network logger imports `axios` for axios interception, so install `axios` even if most of your requests use `fetch`.
 
-Install optional integrations when you use WebView or Firebase Analytics capture:
+Install optional integrations when you use Firebase Analytics capture:
 
 ```bash
-npm install react-native-webview @react-native-firebase/analytics
+npm install @react-native-firebase/analytics
 ```
 
 For iOS, install pods after adding native dependencies:
@@ -107,6 +105,12 @@ You can disable the overlay without removing it from your tree:
 <NetworkInspector enabled={false} />
 ```
 
+Use `isEnabled` (defaults to `true`) to fully hide the floating launcher button:
+
+```tsx
+<NetworkInspector isEnabled={false} />
+```
+
 ---
 
 ## Settings Persistence
@@ -249,26 +253,6 @@ The Redux tab shows the latest state tree, recent dispatches, payloads, and chan
 
 ---
 
-## WebView Inspection
-
-Use the exported `WebView` as a drop-in wrapper around `react-native-webview`.
-
-```tsx
-import {WebView} from 'react-native-inapp-inspector';
-
-<WebView source={{uri: 'https://example.com'}} />;
-```
-
-The wrapper forwards your props and ref, preserves your `onMessage`, `onNavigationStateChange`, `onLoadStart`, and `onLoadEnd` handlers, and injects scripts for WebView console logs, navigation history, and source snapshots.
-
-Disable the loading overlay with `showLoader={false}`:
-
-```tsx
-<WebView source={{uri: 'https://example.com'}} showLoader={false} />
-```
-
----
-
 ## Error Boundary
 
 ```tsx
@@ -303,15 +287,6 @@ import {ErrorBoundary} from 'react-native-inapp-inspector';
 | `subscribeReduxState(callback)`                     | function          | Subscribes to Redux state updates and returns an unsubscribe function.     |
 | `getActionHistory()`                                | function          | Returns the recent dispatched Redux actions.                               |
 | `clearActionHistory()`                              | function          | Clears the Redux action history.                                           |
-| `WebView`                                           | component         | Instrumented WebView wrapper.                                              |
-| `getWebViewLogs()`                                  | function          | Returns captured WebView console logs.                                     |
-| `getWebViewNavHistory()`                            | function          | Returns captured WebView navigation history.                               |
-| `getWebViewHtml()`                                  | function          | Returns the latest captured WebView HTML.                                  |
-| `getWebViewCss()`                                   | function          | Returns the latest captured WebView CSS.                                   |
-| `getWebViewJs()`                                    | function          | Returns the latest captured WebView JavaScript.                            |
-| `getWebViewHtmlUrl()`                               | function          | Returns the URL for the latest captured WebView source snapshot.           |
-| `clearWebViewData()`                                | function          | Clears captured WebView logs, navigation, and source data.                 |
-| `subscribeWebView(callback)`                        | function          | Subscribes to WebView data changes and returns an unsubscribe function.    |
 | `ErrorBoundary`                                     | component         | React error boundary component.                                            |
 
 ---

package/dist/commonjs/assets/svgAssets.d.ts

@@ -0,0 +1,3 @@
+export declare const PRETTY_SVG = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M5 3C3.9 3 3 3.9 3 5v1.5c0 .8-.7 1.5-1.5 1.5S0 7.3 0 6.5V5c0-2.8 2.2-5 5-5 .6 0 1 .4 1 1s-.4 1-1 1zm6 0c-1.1 0-2 .9-2 2v1.5c0 .8-.7 1.5-1.5 1.5S6 9.3 6 8.5V5c0-2.8 2.2-5 5-5 .6 0 1 .4 1 1s-.4 1-1 1z\" fill=\"currentColor\" opacity=\"0.9\"/>\n  <path d=\"M3 11v1.5c0 .8.7 1.5 1.5 1.5S6 13.3 6 12.5V11H3zm7 0v1.5c0 .8.7 1.5 1.5 1.5S13 13.3 13 12.5V11H10z\" fill=\"currentColor\" opacity=\"0.6\"/>\n</svg>";
+export declare const RAW_SVG = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"1\" y=\"2\" width=\"10\" height=\"1.5\" rx=\"0.75\" fill=\"currentColor\" opacity=\"0.9\"/>\n  <rect x=\"1\" y=\"5.5\" width=\"14\" height=\"1.5\" rx=\"0.75\" fill=\"currentColor\" opacity=\"0.6\"/>\n  <rect x=\"1\" y=\"9\" width=\"8\" height=\"1.5\" rx=\"0.75\" fill=\"currentColor\" opacity=\"0.45\"/>\n  <rect x=\"1\" y=\"12.5\" width=\"12\" height=\"1.5\" rx=\"0.75\" fill=\"currentColor\" opacity=\"0.3\"/>\n</svg>";
+export declare const TABLE_SVG = "<svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n  <rect x=\"1\" y=\"1\" width=\"14\" height=\"14\" rx=\"2\" stroke=\"currentColor\" stroke-width=\"1.2\" opacity=\"0.7\"/>\n  <path d=\"M1 5.5h14M1 10h14M5.5 1v14M10.5 1v14\" stroke=\"currentColor\" stroke-width=\"0.8\" opacity=\"0.5\"/>\n</svg>";

package/dist/commonjs/assets/svgAssets.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TABLE_SVG = exports.RAW_SVG = exports.PRETTY_SVG = void 0;
+exports.PRETTY_SVG = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M5 3C3.9 3 3 3.9 3 5v1.5c0 .8-.7 1.5-1.5 1.5S0 7.3 0 6.5V5c0-2.8 2.2-5 5-5 .6 0 1 .4 1 1s-.4 1-1 1zm6 0c-1.1 0-2 .9-2 2v1.5c0 .8-.7 1.5-1.5 1.5S6 9.3 6 8.5V5c0-2.8 2.2-5 5-5 .6 0 1 .4 1 1s-.4 1-1 1z" fill="currentColor" opacity="0.9"/>
+  <path d="M3 11v1.5c0 .8.7 1.5 1.5 1.5S6 13.3 6 12.5V11H3zm7 0v1.5c0 .8.7 1.5 1.5 1.5S13 13.3 13 12.5V11H10z" fill="currentColor" opacity="0.6"/>
+</svg>`;
+exports.RAW_SVG = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1" y="2" width="10" height="1.5" rx="0.75" fill="currentColor" opacity="0.9"/>
+  <rect x="1" y="5.5" width="14" height="1.5" rx="0.75" fill="currentColor" opacity="0.6"/>
+  <rect x="1" y="9" width="8" height="1.5" rx="0.75" fill="currentColor" opacity="0.45"/>
+  <rect x="1" y="12.5" width="12" height="1.5" rx="0.75" fill="currentColor" opacity="0.3"/>
+</svg>`;
+exports.TABLE_SVG = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <rect x="1" y="1" width="14" height="14" rx="2" stroke="currentColor" stroke-width="1.2" opacity="0.7"/>
+  <path d="M1 5.5h14M1 10h14M5.5 1v14M10.5 1v14" stroke="currentColor" stroke-width="0.8" opacity="0.5"/>
+</svg>`;

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

@@ -1,18 +1,5 @@
 import React from 'react';
-import { AnalyticsEvent } from '../types';
+import { AnalyticsEventCardProps } 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

@@ -41,44 +41,85 @@ 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 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
+    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 < name.length; i++) {
-        hash = (hash * 31 + name.charCodeAt(i)) | 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 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 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 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`;
+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,
+            };
+    }
 }
 // ─── Component ────────────────────────────────────────────────────────────────
 const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ event, onPress, isNew = false, searchStr = '', msSincePrev, computedScreenName, }) {
@@ -102,7 +143,7 @@ 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 }]}>{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 ─────────────────────────────────────────────────────── */}
@@ -128,6 +169,19 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
               <HighlightText_1.default text={event.name} search={searchStr} style={[cardStyles.eventName, { color: color }]} highlightStyle={cardStyles.highlight}/>
             </react_native_1.View>
 
+            {(() => {
+            const category = getEventCategory(event.name);
+            const tagColors = getCategoryColors(category);
+            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}
+                  </react_native_1.Text>
+                </react_native_1.View>);
+        })()}
+
             {event.count !== undefined ? (<react_native_1.View style={[
                 cardStyles.duplicateBadge,
                 event.count === 1 && {
@@ -144,27 +198,31 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
               </react_native_1.View>) : null}
           </react_native_1.View>
           <react_native_1.Text style={[cardStyles.timestamp, { color: AppColors_1.AppColors.grayTextWeak }]}>
-            {formatTime(event.timestamp)}
+            {(0, helpers_1.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, { 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}>
-                  {computedScreenName ||
+            {(() => {
+            const rawScreenName = 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}
+                event.params?.firebase_screen_class;
+            if (!rawScreenName)
+                return null;
+            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 }]}>
+                  <react_native_1.View style={[cardStyles.screenDot, { backgroundColor: color }]}/>
+                  <react_native_1.Text style={[cardStyles.chipText, { color: AppColors_1.AppColors.grayText }]} numberOfLines={1}>
+                    {screenNameStr}
+                  </react_native_1.Text>
+                </react_native_1.View>);
+        })()}
 
             <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 }]}>
@@ -179,8 +237,8 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             {(() => {
             const items = event.params?.items;
             if (Array.isArray(items) && items.length > 0) {
-                return (<react_native_1.View style={[cardStyles.chip, { backgroundColor: '#FEF3C7', borderColor: '#FDE68A' }]}>
-                    <react_native_1.Text style={[cardStyles.chipText, { color: '#D97706', fontFamily: AppFonts_1.AppFonts.interBold }]}>
+                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'}
                     </react_native_1.Text>
                   </react_native_1.View>);
@@ -194,8 +252,8 @@ const AnalyticsEventCard = react_1.default.memo(function AnalyticsEventCard({ ev
             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: '#ECFDF5', borderColor: '#A7F3D0' }]}>
-                    <react_native_1.Text style={[cardStyles.chipText, { color: '#059669', fontFamily: AppFonts_1.AppFonts.interBold }]}>
+                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}
                     </react_native_1.Text>
                   </react_native_1.View>);
@@ -224,12 +282,12 @@ const cardStyles = react_native_1.StyleSheet.create({
         letterSpacing: 0.5,
     },
     modernCard: {
-        backgroundColor: '#FFFFFF',
+        backgroundColor: AppColors_1.AppColors.white,
         borderRadius: 8,
         borderWidth: 1,
-        borderColor: '#EFEFEF',
+        borderColor: AppColors_1.AppColors.dividerColor,
         padding: 8,
-        shadowColor: '#000',
+        shadowColor: AppColors_1.AppColors.black,
         shadowOpacity: 0.03,
         shadowRadius: 3,
         shadowOffset: { width: 0, height: 1 },
@@ -259,7 +317,7 @@ const cardStyles = react_native_1.StyleSheet.create({
         color: AppColors_1.AppColors.grayTextWeak,
     },
     highlight: {
-        backgroundColor: '#FFE44D',
+        backgroundColor: AppColors_1.AppColors.yellowHighlight,
         color: AppColors_1.AppColors.primaryBlack,
         borderRadius: 2,
     },
@@ -297,8 +355,8 @@ const cardStyles = react_native_1.StyleSheet.create({
         marginRight: 4,
     },
     duplicateBadge: {
-        backgroundColor: '#FFE4E6',
-        borderColor: '#FCC2D7',
+        backgroundColor: AppColors_1.AppColors.roseBg,
+        borderColor: AppColors_1.AppColors.roseBorder,
         borderWidth: 1,
         paddingHorizontal: 5,
         paddingVertical: 2,
@@ -307,7 +365,19 @@ const cardStyles = react_native_1.StyleSheet.create({
     duplicateText: {
         fontFamily: AppFonts_1.AppFonts.interBold,
         fontSize: 9,
-        color: '#E11D48',
+        color: AppColors_1.AppColors.rose600,
+        textTransform: 'uppercase',
+        letterSpacing: 0.5,
+    },
+    categoryBadge: {
+        borderWidth: 1,
+        paddingHorizontal: 5,
+        paddingVertical: 2,
+        borderRadius: 4,
+    },
+    categoryText: {
+        fontFamily: AppFonts_1.AppFonts.interBold,
+        fontSize: 9,
         textTransform: 'uppercase',
         letterSpacing: 0.5,
     },

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

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

package/dist/commonjs/components/AnalyticsGraph.js

@@ -91,7 +91,7 @@ const AnalyticsGraph = ({ event, accentColor }) => {
     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: 'Booleans', value: paramTypes.boolean, color: AppColors_1.AppColors.amber500 }, // Amber
         { label: 'Objects', value: paramTypes.object, color: AppColors_1.AppColors.greenColor },
     ].filter(d => d.value > 0);
     strings.sort((a, b) => b.value - a.value);
@@ -132,7 +132,7 @@ const AnalyticsGraph = ({ event, accentColor }) => {
           <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}/>
+            }))} accentColor={AppColors_1.AppColors.successGreen} maxBarWidth={maxBarWidth} isGradient={false}/>
         </react_native_1.View>)}
     </react_native_1.View>);
 };
@@ -219,12 +219,12 @@ const GaugeChart = ({ data, accentColor, }) => {
             paddingTop: 6,
             paddingBottom: 6,
         }}>
-      {data.map((d, i) => {
+      {data.map(d => {
             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={AppColors_1.AppColors.grayBorderSecondary} 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={{
@@ -286,12 +286,12 @@ const CalendarChart = ({ data, accentColor, }) => {
             <react_native_1.View style={{
                     width: 58,
                     height: 62,
-                    backgroundColor: '#FFFFFF',
+                    backgroundColor: AppColors_1.AppColors.white,
                     borderRadius: 8,
                     borderWidth: 1,
                     borderColor: AppColors_1.AppColors.grayBorderSecondary,
                     overflow: 'hidden',
-                    shadowColor: '#000',
+                    shadowColor: AppColors_1.AppColors.black,
                     shadowOpacity: 0.05,
                     shadowRadius: 4,
                     shadowOffset: { width: 0, height: 2 },
@@ -307,7 +307,7 @@ const CalendarChart = ({ data, accentColor, }) => {
                 <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,
                     fontSize: 9,
-                    color: '#FFF',
+                    color: AppColors_1.AppColors.white,
                     textTransform: 'uppercase',
                     letterSpacing: 0.5,
                 }}>
@@ -319,7 +319,7 @@ const CalendarChart = ({ data, accentColor, }) => {
                     flex: 1,
                     justifyContent: 'center',
                     alignItems: 'center',
-                    backgroundColor: '#FAFAFA',
+                    backgroundColor: AppColors_1.AppColors.grayBackground,
                 }}>
                 <react_native_1.Text style={{
                     fontFamily: AppFonts_1.AppFonts.interBold,

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import { AnalyticsEvent } from '../types';
+interface AnalyticsTabViewProps {
+    analyticsSearch: string;
+    onSetAnalyticsSearch: (val: string) => void;
+    onDeleteEvents: () => void;
+    selectedEvent: AnalyticsEvent | null;
+    onSelectEvent: (event: AnalyticsEvent | null) => void;
+    filteredAnalyticsEvents: AnalyticsEvent[];
+    visibleAnalyticsEvents: AnalyticsEvent[];
+    currentUserProperties: Record<string, any>;
+    currentUserId: string | null;
+}
+export declare const AnalyticsTabView: React.FC<AnalyticsTabViewProps>;
+export default AnalyticsTabView;