react-native-inapp-inspector 1.0.0

package/dist/esm/components/HeadersSection.js

@@ -0,0 +1,117 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { View, Pressable, Text, Animated } from 'react-native';
+// Components
+import CopyButton from './CopyButton';
+import TouchableScale from './TouchableScale';
+// Helpers
+import { copyToClipboard } from '../helpers';
+// Custom Hooks
+import useAccordion from '../customHooks/useAccordion';
+// Assets
+import { HeadersIcon, ChevronIcon, CopyIcon } from './NetworkIcons';
+// Stylesheet
+import { AppColors } from '../styles/AppColors';
+import styles from '../styles';
+const HeaderRow = React.memo(function HeaderRow({ headerKey, value, isLast, index, }) {
+    const [expanded, setExpanded] = useState(false);
+    const isLong = value.length > 35;
+    const entryAnim = useRef(new Animated.Value(0)).current;
+    useEffect(() => {
+        Animated.timing(entryAnim, {
+            toValue: 1,
+            duration: 220,
+            delay: index * 30,
+            useNativeDriver: true,
+        }).start();
+    }, []);
+    const rowAnimStyle = {
+        opacity: entryAnim,
+        transform: [
+            {
+                translateY: entryAnim.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [8, 0],
+                }),
+            },
+        ],
+    };
+    return (<Animated.View style={[styles.htRow, !isLast && styles.htRowBorder, rowAnimStyle]}>
+      <View style={styles.htKeyCell}>
+        <Text style={styles.htKey} numberOfLines={2}>
+          {headerKey}
+        </Text>
+      </View>
+      <View style={styles.htCellDivider}/>
+      <Pressable style={styles.htValueCell} onPress={() => isLong && setExpanded(v => !v)} hitSlop={8}>
+        <Text style={styles.htValue} selectable numberOfLines={expanded ? undefined : 3}>
+          {value}
+        </Text>
+        {isLong && (<View style={styles.htExpandRow}>
+            <Text style={styles.htExpandText}>
+              {expanded ? '▲ less' : '▼ more'}
+            </Text>
+          </View>)}
+      </Pressable>
+      <TouchableScale onPress={() => copyToClipboard(value, headerKey)} hitSlop={8} style={styles.htCopyBtn}>
+        <CopyIcon color={AppColors.grayTextWeak} size={14}/>
+      </TouchableScale>
+    </Animated.View>);
+});
+const HeadersSection = ({ title, headers, search, resetKey, }) => {
+    const { toggleOpen, forceOpen, chevronStyle, bodyStyle } = useAccordion(false, 2400, 300);
+    useEffect(() => {
+        forceOpen(false);
+    }, [resetKey]);
+    const entries = useMemo(() => (headers ? Object.entries(headers) : []), [headers]);
+    const filtered = useMemo(() => {
+        if (!search)
+            return entries;
+        const q = search.toLowerCase();
+        return entries.filter(([k, v]) => k.toLowerCase().includes(q) || v.toLowerCase().includes(q));
+    }, [entries, search]);
+    if (entries.length === 0)
+        return null;
+    const isRequest = title.toLowerCase().includes('request') ||
+        title.toLowerCase().includes('api');
+    const accentColor = isRequest ? AppColors.offerPurple : AppColors.greenColor;
+    const accentBg = isRequest
+        ? `${AppColors.offerPurple}10`
+        : `${AppColors.greenColor}10`;
+    return (<View style={[styles.htCard, { borderLeftColor: accentColor }]}>
+      <Pressable onPress={toggleOpen} hitSlop={10}>
+        <View style={styles.htCardHeader}>
+          <View style={[styles.htIconWrap, { backgroundColor: accentBg }]}>
+            <HeadersIcon color={accentColor}/>
+          </View>
+          <Text style={styles.htTitle}>{title}</Text>
+          <View style={[
+            styles.htBadge,
+            { backgroundColor: accentBg, borderColor: accentColor },
+        ]}>
+            <Text style={[styles.htBadgeText, { color: accentColor }]}>
+              {entries.length}
+            </Text>
+          </View>
+          <View style={styles.htHeaderSpacer}/>
+          <CopyButton value={headers} label={title}/>
+          <View style={styles.htChevronBtn}>
+            <Animated.View style={chevronStyle}>
+              <ChevronIcon color={AppColors.grayTextStrong} size={14}/>
+            </Animated.View>
+          </View>
+        </View>
+      </Pressable>
+
+      <Animated.View style={bodyStyle}>
+        <View style={styles.htColHeadRow}>
+          <Text style={[styles.htColHead, { width: '30%' }]}>KEY</Text>
+          <Text style={[styles.htColHead, { flex: 1 }]}>VALUE</Text>
+        </View>
+
+        {filtered.length > 0 ? (filtered.map(([k, v], i) => (<HeaderRow key={k} headerKey={k} value={v} isLast={i === filtered.length - 1} index={i}/>))) : (<View style={styles.htEmpty}>
+            <Text style={styles.htEmptyText}>No matching headers</Text>
+          </View>)}
+      </Animated.View>
+    </View>);
+};
+export default HeadersSection;

package/dist/esm/components/HighlightText.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+declare const HighlightText: ({ text, search, style, highlightStyle, detectLinks, ...rest }: any) => React.JSX.Element;
+export default HighlightText;

package/dist/esm/components/HighlightText.js

@@ -0,0 +1,52 @@
+import React from 'react';
+import { Text, Linking } from 'react-native';
+// Helpers
+import { escapeRegex } from '../helpers';
+const HighlightText = ({ text, search, style, highlightStyle, detectLinks, ...rest }) => {
+    const hasNumberOfLines = 'numberOfLines' in rest;
+    const numLines = hasNumberOfLines ? rest.numberOfLines : 1;
+    // Regex to detect absolute URLs
+    const URL_REGEX = /(https?:\/\/[^\s]+)/g;
+    const renderNormalOrHighlighted = (subText, keyPrefix) => {
+        if (!search) {
+            return <Text key={keyPrefix}>{subText}</Text>;
+        }
+        const regex = new RegExp(`(${escapeRegex(search)})`, 'gi');
+        const parts = subText.split(regex);
+        return (<Text key={keyPrefix}>
+        {parts.map((part, i) => part.toLowerCase() === search.toLowerCase() ? (<Text key={i} style={highlightStyle}>
+              {part}
+            </Text>) : (<Text key={i}>{part}</Text>))}
+      </Text>);
+    };
+    if (detectLinks && text) {
+        const parts = text.split(URL_REGEX);
+        return (<Text style={style} numberOfLines={numLines} {...rest}>
+        {parts.map((part, i) => {
+                if (part.match(URL_REGEX)) {
+                    return (<Text key={`link-${i}`} style={{
+                            color: '#007AFF', // skyBlue link color
+                            textDecorationLine: 'underline',
+                        }} onPress={() => {
+                            Linking.openURL(part).catch(() => { });
+                        }}>
+                {part}
+              </Text>);
+                }
+                return renderNormalOrHighlighted(part, `text-${i}`);
+            })}
+      </Text>);
+    }
+    if (!search)
+        return (<Text style={style} numberOfLines={numLines} {...rest}>
+        {text}
+      </Text>);
+    const regex = new RegExp(`(${escapeRegex(search)})`, 'gi');
+    const parts = text.split(regex);
+    return (<Text style={style} numberOfLines={numLines} {...rest}>
+      {parts.map((part, i) => part.toLowerCase() === search.toLowerCase() ? (<Text key={i} style={highlightStyle}>
+            {part}
+          </Text>) : (<Text key={i}>{part}</Text>))}
+    </Text>);
+};
+export default HighlightText;

package/dist/esm/components/JsonViewer.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const JsonViewer: ({ data, search, forceOpen, }: {
+    data: unknown;
+    search?: string;
+    forceOpen?: boolean;
+}) => React.JSX.Element;
+export default JsonViewer;

package/dist/esm/components/JsonViewer.js

@@ -0,0 +1,14 @@
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+// Components
+import TreeNode from './TreeNode';
+// Stylesheet
+import styles from '../styles';
+const JsonViewer = ({ data, search, forceOpen, }) => {
+    return (<ScrollView horizontal showsHorizontalScrollIndicator={true} style={styles.codeBlockScroll}>
+      <View style={styles.codeBlock}>
+        <TreeNode data={data} search={search} forceOpen={forceOpen}/>
+      </View>
+    </ScrollView>);
+};
+export default JsonViewer;

package/dist/esm/components/LogCard.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { LogCardProps } from '../types';
+declare const LogCard: React.NamedExoticComponent<LogCardProps>;
+export default LogCard;

package/dist/esm/components/LogCard.js

@@ -0,0 +1,141 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, View, Pressable, Text, StyleSheet } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import { AppColors } from '../styles/AppColors';
+import { METHOD_COLORS } from '../constants';
+import { getStatusColor, getDurationColor, getPath, formatDateTime, } from '../helpers';
+import { CalendarIcon, ClockIcon } from './NetworkIcons';
+import styles from '../styles';
+import HighlightText from './HighlightText';
+import TouchableScale from './TouchableScale';
+const LogCard = React.memo(function LogCard({ item, onPress, timelineMinStart, timelineTotalRange, isNew, isSelected, onToggleSelect, searchStr, }) {
+    const methodColor = METHOD_COLORS[item.method] ?? METHOD_COLORS.ALL;
+    const isFailed = item.status === 0 || (item.status != null && item.status >= 400);
+    const isLoading = item.status == null;
+    const statusColor = getStatusColor(item.status);
+    const durationColor = getDurationColor(item.duration);
+    const cardStatusColor = isLoading
+        ? AppColors.darkOrange
+        : isFailed
+            ? AppColors.errorColor
+            : AppColors.greenColor;
+    const leftPercent = timelineTotalRange > 0
+        ? ((item.startTime - timelineMinStart) / timelineTotalRange) * 100
+        : 0;
+    const widthPercent = timelineTotalRange > 0
+        ? ((item.duration || 10) / timelineTotalRange) * 100
+        : 100;
+    const shimmerOpacity = useRef(new Animated.Value(isNew ? 0.35 : 0)).current;
+    useEffect(() => {
+        if (isNew) {
+            Animated.timing(shimmerOpacity, {
+                toValue: 0,
+                duration: 1200,
+                useNativeDriver: true,
+            }).start();
+        }
+    }, [isNew]);
+    const path = getPath(item.url);
+    const triggeredAt = formatDateTime(item.startTime);
+    const isJson = item.url.split('?')[0].toLowerCase().endsWith('.json');
+    return (<TouchableScale onPress={onPress} style={[
+            styles.card,
+            {
+                borderLeftWidth: 4,
+                borderLeftColor: cardStatusColor,
+            },
+        ]}>
+      <View style={styles.cardBody}>
+        <View style={styles.cardTopRow}>
+          <Pressable onPress={() => onToggleSelect(item.id)} hitSlop={12} style={[
+            styles.smallCheckbox,
+            isSelected && styles.smallCheckboxChecked,
+        ]}>
+            {isSelected && (<Svg width={9} height={9} viewBox="0 0 24 24" fill="none">
+                <Path d="M20 6L9 17l-5-5" stroke="#FFF" strokeWidth="4" strokeLinecap="round" strokeLinejoin="round"/>
+              </Svg>)}
+          </Pressable>
+
+          <Text style={styles.serialNumber}>#{item.id + 1}</Text>
+
+          <View style={[styles.methodBadge, { backgroundColor: `${methodColor}15` }]}>
+            <Text style={[styles.methodBadgeText, { color: methodColor }]}>
+              {item.method}
+            </Text>
+          </View>
+
+          <HighlightText text={path} search={searchStr} style={styles.urlPathText} highlightStyle={styles.highlight}/>
+
+          {isJson && (<View style={[
+                styles.chip,
+                {
+                    backgroundColor: `${AppColors.darkOrange}15`,
+                    borderColor: `${AppColors.darkOrange}30`,
+                    marginLeft: 6,
+                },
+            ]}>
+              <Text style={[styles.chipText, { color: AppColors.darkOrange }]}>
+                .json
+              </Text>
+            </View>)}
+        </View>
+
+        <View style={styles.cardBottomRow}>
+          <View style={styles.cardDateRow}>
+            <CalendarIcon color={AppColors.grayTextWeak} size={11}/>
+            <Text style={styles.cardDateText}>{triggeredAt}</Text>
+          </View>
+
+          <View style={styles.cardMetaRow}>
+            {item.duration != null && !isFailed && (<View style={[
+                styles.chip,
+                {
+                    backgroundColor: `${durationColor}15`,
+                    borderColor: `${durationColor}30`,
+                },
+            ]}>
+                <ClockIcon color={durationColor} size={10}/>
+                <Text style={[styles.chipText, { color: durationColor }]}>
+                  {item.duration}ms
+                </Text>
+              </View>)}
+
+            <View style={[
+            styles.chip,
+            {
+                backgroundColor: isFailed
+                    ? `${AppColors.errorColor}15`
+                    : `${statusColor}15`,
+                borderColor: isFailed
+                    ? `${AppColors.errorColor}30`
+                    : `${statusColor}30`,
+            },
+        ]}>
+              <Text style={[
+            styles.chipText,
+            { color: isFailed ? AppColors.errorColor : statusColor },
+        ]}>
+                {isFailed ? 'Failed' : item.status}
+              </Text>
+            </View>
+          </View>
+        </View>
+
+        <View style={styles.timelineTrack}>
+          <View style={[
+            styles.timelineBar,
+            {
+                left: `${Math.max(0, leftPercent)}%`,
+                width: `${Math.min(100, widthPercent)}%`,
+                backgroundColor: methodColor,
+            },
+        ]}/>
+        </View>
+      </View>
+      <Animated.View pointerEvents="none" style={[
+            StyleSheet.absoluteFill,
+            { backgroundColor: methodColor, opacity: shimmerOpacity },
+        ]}/>
+    </TouchableScale>);
+});
+export default LogCard;

package/dist/esm/components/MetaAccordion.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { MetaAccordionProps } from '../types';
+declare const MetaAccordion: ({ status, statusColor, duration, size, triggeredAt, }: MetaAccordionProps) => React.JSX.Element;
+export default MetaAccordion;

package/dist/esm/components/MetaAccordion.js

@@ -0,0 +1,108 @@
+import React from 'react';
+import { View, Pressable, Text, Animated } from 'react-native';
+// Constants
+import { DURATION_FAST_MS, DURATION_SLOW_MS } from '../constants';
+// Custom Hooks
+import useAccordion from '../customHooks/useAccordion';
+// Helpers
+import { getDurationColor } from '../helpers';
+// Assets
+import { ChevronIcon, CalendarIcon, StatusIcon, ClockIcon, SizeIcon, } from './NetworkIcons';
+// Stylesheet
+import { AppColors } from '../styles/AppColors';
+import styles from '../styles';
+const MetaAccordion = ({ status, statusColor, duration, size, triggeredAt, }) => {
+    const { toggleOpen, chevronStyle, bodyStyle } = useAccordion(true, 400, 260);
+    const isFailed = status === 0 || status == null;
+    return (<View style={styles.metaContainer}>
+      <Pressable onPress={toggleOpen} hitSlop={12}>
+        <View style={styles.metaHeader}>
+          <Text style={styles.metaTitle}>Metadata</Text>
+          <Animated.View style={chevronStyle}>
+            <ChevronIcon color={AppColors.grayTextWeak} size={14}/>
+          </Animated.View>
+        </View>
+      </Pressable>
+
+      <Animated.View style={bodyStyle}>
+        <View style={styles.metaBody}>
+          <View style={styles.metaRow}>
+            <View style={styles.metaLabelRow}>
+              <CalendarIcon color={AppColors.grayTextWeak} size={14}/>
+              <Text style={styles.metaLabel}>Triggered At</Text>
+            </View>
+            <Text style={[
+            styles.metaValue,
+            { color: AppColors.purple, fontSize: 12 },
+        ]}>
+              {triggeredAt}
+            </Text>
+          </View>
+          <View style={styles.metaDivider}/>
+          <View style={styles.metaRow}>
+            <View style={styles.metaLabelRow}>
+              <StatusIcon color={AppColors.grayTextWeak}/>
+              <Text style={styles.metaLabel}>Status</Text>
+            </View>
+            <View style={[
+            styles.statusChip,
+            {
+                borderColor: isFailed
+                    ? `${AppColors.errorColor}40`
+                    : `${statusColor}40`,
+                backgroundColor: isFailed
+                    ? `${AppColors.errorColor}15`
+                    : `${statusColor}15`,
+            },
+        ]}>
+              <Text style={[
+            styles.statusText,
+            { color: isFailed ? AppColors.errorColor : statusColor },
+        ]}>
+                {isFailed ? 'Failed (Network Error)' : String(status)}
+              </Text>
+            </View>
+          </View>
+          <View style={styles.metaDivider}/>
+          <View style={styles.metaRow}>
+            <View style={styles.metaLabelRow}>
+              <ClockIcon color={AppColors.grayTextWeak} size={14}/>
+              <Text style={styles.metaLabel}>Duration</Text>
+            </View>
+            <View style={styles.metaValueRow}>
+              {duration != null && !isFailed && (<View style={[
+                styles.perfBadge,
+                {
+                    backgroundColor: `${getDurationColor(duration)}15`,
+                    borderColor: `${getDurationColor(duration)}40`,
+                },
+            ]}>
+                  <Text style={[
+                styles.perfBadgeText,
+                { color: getDurationColor(duration) },
+            ]}>
+                    {duration < DURATION_FAST_MS
+                ? 'Fast'
+                : duration < DURATION_SLOW_MS
+                    ? 'Moderate'
+                    : 'Slow'}
+                  </Text>
+                </View>)}
+              <Text style={styles.metaValue}>
+                {duration != null ? `${duration} ms` : '—'}
+              </Text>
+            </View>
+          </View>
+          <View style={styles.metaDivider}/>
+          <View style={styles.metaRow}>
+            <View style={styles.metaLabelRow}>
+              <SizeIcon color={AppColors.grayTextWeak}/>
+              <Text style={styles.metaLabel}>Size</Text>
+            </View>
+            <Text style={styles.metaValue}>{size}</Text>
+          </View>
+        </View>
+      </Animated.View>
+    </View>);
+};
+export default MetaAccordion;

package/dist/esm/components/MiniBarChart.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare const MiniBarChart: ({ data, color, maxVal, }: {
+    data: number[];
+    color: string;
+    maxVal?: number;
+}) => React.JSX.Element;
+export default MiniBarChart;

package/dist/esm/components/MiniBarChart.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import Svg, { Rect } from 'react-native-svg';
+const MiniBarChart = ({ data, color, maxVal, }) => {
+    if (!data || data.length === 0)
+        return <Svg width={40} height={16}/>;
+    const max = maxVal || Math.max(...data, 1);
+    const paddedData = data.length < 10
+        ? [...Array(10 - data.length).fill(0), ...data]
+        : data.slice(-10);
+    return (<Svg width={40} height={16} viewBox="0 0 40 16">
+      {paddedData.map((val, i) => {
+            const h = Math.max((val / max) * 16, 2);
+            const opacity = val === 0 && maxVal === 1 ? 0.2 : 1;
+            return (<Rect key={i} x={i * 4} y={16 - h} width={2.5} height={h} fill={color} rx={1} opacity={opacity}/>);
+        })}
+    </Svg>);
+};
+export default MiniBarChart;

package/dist/esm/components/MiniLineChart.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+declare const MiniLineChart: ({ data, color }: {
+    data: number[];
+    color: string;
+}) => React.JSX.Element;
+export default MiniLineChart;

package/dist/esm/components/MiniLineChart.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import Svg, { Path } from 'react-native-svg';
+const MiniLineChart = ({ data, color }) => {
+    if (!data || data.length === 0)
+        return <Svg width={40} height={16}/>;
+    const paddedData = data.length < 10
+        ? [...Array(10 - data.length).fill(data[0] || 0), ...data]
+        : data.slice(-10);
+    const max = Math.max(...paddedData, 1);
+    const min = Math.min(...paddedData, 0);
+    const range = max - min || 1;
+    const dx = 40 / 9;
+    const points = paddedData
+        .map((d, i) => `${i * dx},${14 - ((d - min) / range) * 12}`)
+        .join(' L ');
+    return (<Svg width={40} height={16} viewBox="0 0 40 16">
+      <Path d={`M ${points}`} fill="none" stroke={color} strokeWidth={1.5} strokeLinecap="round" strokeLinejoin="round"/>
+    </Svg>);
+};
+export default MiniLineChart;

package/dist/esm/components/NetworkIcons.d.ts

@@ -0,0 +1,31 @@
+import React from 'react';
+export declare const EmptyRadarIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const MapPinIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ScreenIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ExpandCollapseIcon: ({ isExpanded, color, size, }: any) => React.JSX.Element;
+export declare const SearchIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const ClearIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const ClockIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const CalendarIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const StatusIcon: ({ color }: any) => React.JSX.Element;
+export declare const SizeIcon: ({ color }: any) => React.JSX.Element;
+export declare const RequestIcon: ({ color }: any) => React.JSX.Element;
+export declare const ResponseIcon: ({ color }: any) => React.JSX.Element;
+export declare const HeadersIcon: ({ color }: any) => React.JSX.Element;
+export declare const CopyIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const FetchIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const TerminalIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const CheckIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const FailIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const TrashIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const HeaderPauseIcon: ({ isPaused, color, size, }: any) => React.JSX.Element;
+export declare const ExportIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const SignalIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const DiffIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const GlobeIcon: ({ color, size }: any) => React.JSX.Element;
+export declare const SortArrowIcon: ({ color, size, direction, }: any) => React.JSX.Element;
+export declare const ChevronIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const FilterIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const DownloadIcon: ({ color, size, }: any) => React.JSX.Element;
+export declare const CloseWhite: ({ color, size }: any) => React.JSX.Element;
+export declare const WhiteBackNavigation: ({ color, size }: any) => React.JSX.Element;