react-native-inapp-inspector 2.2.2 → 2.2.3

package/src/components/MetaAccordion.tsx

@@ -0,0 +1,340 @@
+import React, {useState} from 'react';
+import {useTranslation} from '../i18n';
+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, handleOpenExternalLink} from '../helpers';
+
+// Types
+import {MetaAccordionProps} from '../types';
+
+// Assets
+import {
+  ChevronIcon,
+  CalendarIcon,
+  StatusIcon,
+  ClockIcon,
+  SizeIcon,
+  TerminalIcon,
+  GlobeIcon,
+} from './NetworkIcons';
+
+// Components
+import TouchableScale from './TouchableScale';
+
+// Stylesheet
+import {AppColors} from '../styles/AppColors';
+import {AppFonts} from '../styles/AppFonts';
+import styles from '../styles';
+
+const MetaAccordion = ({
+  status,
+  statusColor,
+  duration,
+  size,
+  triggeredAt,
+  method,
+  contentType,
+  url,
+}: MetaAccordionProps) => {
+  const {t} = useTranslation();
+  const [urlExpanded, setUrlExpanded] = useState(false);
+  const {toggleOpen, chevronStyle, bodyStyle} = useAccordion(true, 800, 390);
+  const isFailed = status === 0 || status == null;
+
+  const renderFormattedUrl = (rawUrl: string) => {
+    if (!rawUrl) return '—';
+    try {
+      const doubleSlashIndex = rawUrl.indexOf('//');
+      let temp = rawUrl;
+      let protocol = '';
+      if (doubleSlashIndex !== -1) {
+        protocol = rawUrl.substring(0, doubleSlashIndex + 2);
+        temp = rawUrl.substring(doubleSlashIndex + 2);
+      }
+
+      const slashIndex = temp.indexOf('/');
+      let host = temp;
+      let pathAndSearch = '';
+      if (slashIndex !== -1) {
+        host = temp.substring(0, slashIndex);
+        pathAndSearch = temp.substring(slashIndex);
+      }
+
+      const queryIndex = pathAndSearch.indexOf('?');
+      let pathname = pathAndSearch;
+      let search = '';
+      if (queryIndex !== -1) {
+        pathname = pathAndSearch.substring(0, queryIndex);
+        search = pathAndSearch.substring(queryIndex);
+      }
+
+      return (
+        <Text style={{lineHeight: 16}}>
+          {protocol ? (
+            <Text style={{color: AppColors.slate400, fontFamily: AppFonts.interRegular}}>{protocol}</Text>
+          ) : null}
+          <Text style={{color: AppColors.purple, fontFamily: AppFonts.interBold}}>{host}</Text>
+          <Text style={{color: AppColors.slate700, fontFamily: AppFonts.interMedium}}>{pathname}</Text>
+          {search ? (
+            <Text style={{color: AppColors.teal600, fontFamily: AppFonts.interRegular}}>{search}</Text>
+          ) : null}
+        </Text>
+      );
+    } catch {
+      return rawUrl;
+    }
+  };
+
+  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}>{t('network.triggeredAt')}</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}>
+              <TerminalIcon color={AppColors.grayTextWeak} size={14} />
+              <Text style={styles.metaLabel}>{t('network.methodHeader')}</Text>
+            </View>
+            <View
+              style={[
+                styles.statusChip,
+                {
+                  borderColor: `${AppColors.brandPurple}40`,
+                  backgroundColor: `${AppColors.brandPurple}14`,
+                },
+              ]}>
+              <Text
+                style={[
+                  styles.statusText,
+                  {color: AppColors.purple, fontFamily: AppFonts.interBold},
+                ]}>
+                {method || 'GET'}
+              </Text>
+            </View>
+          </View>
+          <View style={styles.metaDivider} />
+
+          <View style={styles.metaRow}>
+            <View style={styles.metaLabelRow}>
+              <StatusIcon color={AppColors.grayTextWeak} />
+              <Text style={styles.metaLabel}>{t('network.statusHeader')}</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 ? t('network.failedNetworkError') : String(status)}
+              </Text>
+            </View>
+          </View>
+          <View style={styles.metaDivider} />
+
+          <View style={styles.metaRow}>
+            <View style={styles.metaLabelRow}>
+              <GlobeIcon color={AppColors.grayTextWeak} size={14} />
+              <Text style={styles.metaLabel}>{t('network.contentType')}</Text>
+            </View>
+            <Text style={styles.metaValue}>
+              {contentType || 'application/json'}
+            </Text>
+          </View>
+          <View style={styles.metaDivider} />
+
+          <View style={styles.metaRow}>
+            <View style={styles.metaLabelRow}>
+              <ClockIcon color={AppColors.grayTextWeak} size={14} />
+              <Text style={styles.metaLabel}>{t('network.durationHeader')}</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
+                      ? t('network.perf.fast')
+                      : duration < DURATION_SLOW_MS
+                      ? t('network.perf.moderate')
+                      : t('network.perf.slow')}
+                  </Text>
+                </View>
+              )}
+              <Text style={styles.metaValue}>
+                {duration != null ? `${duration} ms` : '—'}
+              </Text>
+            </View>
+          </View>
+
+          {/* Visual Latency Timing Breakdown Waterfall */}
+          {duration != null && !isFailed && (
+            <View style={{paddingVertical: 8, gap: 6}}>
+              <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
+                <Text style={{fontFamily: AppFonts.interBold, fontSize: 11, color: AppColors.primaryBlack}}>
+                  {t('network.timingWaterfall')}
+                </Text>
+                <Text style={{fontFamily: AppFonts.interMedium, fontSize: 10.5, color: getDurationColor(duration)}}>
+                  {duration < DURATION_FAST_MS
+                    ? t('network.perf.fast')
+                    : duration < DURATION_SLOW_MS
+                    ? t('network.perf.moderate')
+                    : t('network.perf.slow')}
+                </Text>
+              </View>
+
+              <View
+                style={{
+                  height: 6,
+                  backgroundColor: AppColors.grayBorderSecondary,
+                  borderRadius: 3,
+                  overflow: 'hidden',
+                }}>
+                <View
+                  style={{
+                    height: '100%',
+                    width: `${Math.min(100, Math.max(8, (duration / 1200) * 100))}%`,
+                    backgroundColor: getDurationColor(duration),
+                    borderRadius: 3,
+                  }}
+                />
+              </View>
+
+              <View style={{flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', marginTop: 1}}>
+                <Text style={{fontFamily: AppFonts.interRegular, fontSize: 9.5, color: AppColors.grayTextWeak}}>
+                  0 ms
+                </Text>
+                <Text style={{fontFamily: AppFonts.interBold, fontSize: 10, color: getDurationColor(duration)}}>
+                  {duration} ms
+                </Text>
+                <Text style={{fontFamily: AppFonts.interRegular, fontSize: 9.5, color: AppColors.grayTextWeak}}>
+                  1,200+ ms
+                </Text>
+              </View>
+            </View>
+          )}
+          <View style={styles.metaDivider} />
+
+          <View style={styles.metaRow}>
+            <View style={styles.metaLabelRow}>
+              <SizeIcon color={AppColors.grayTextWeak} />
+              <Text style={styles.metaLabel}>{t('network.sizeHeader')}</Text>
+            </View>
+            <Text style={styles.metaValue}>{size}</Text>
+          </View>
+          <View style={styles.metaDivider} />
+
+          <View style={[styles.metaRow, {alignItems: 'flex-start', flexDirection: 'column', gap: 6}]}>
+            <View style={{flexDirection: 'row', justifyContent: 'space-between', width: '100%', alignItems: 'center'}}>
+              <View style={styles.metaLabelRow}>
+                <GlobeIcon color={AppColors.grayTextWeak} size={14} />
+                <Text style={styles.metaLabel}>{t('network.fullUrl')}</Text>
+              </View>
+              
+              <View style={{flexDirection: 'row', alignItems: 'center', gap: 10}}>
+                {url && url.length > 50 && (
+                  <TouchableScale onPress={() => setUrlExpanded(prev => !prev)} hitSlop={8}>
+                    <Text style={{
+                      fontFamily: AppFonts.interBold,
+                      fontSize: 10.5,
+                      color: AppColors.purple,
+                    }}>
+                      {urlExpanded ? t('network.showLess') : t('network.showMore')}
+                    </Text>
+                  </TouchableScale>
+                )}
+                
+                {url && (
+                  <TouchableScale onPress={() => handleOpenExternalLink(url)} hitSlop={8}>
+                    <Text style={{
+                      fontFamily: AppFonts.interBold,
+                      fontSize: 10.5,
+                      color: AppColors.purple,
+                      textDecorationLine: 'underline',
+                    }}>
+                      {t('network.open')}
+                    </Text>
+                  </TouchableScale>
+                )}
+              </View>
+            </View>
+            
+            <View style={{
+              backgroundColor: AppColors.slate50,
+              borderRadius: 8,
+              padding: 8,
+              borderWidth: 1.5,
+              borderColor: AppColors.slate200,
+              width: '100%',
+              marginTop: 2,
+            }}>
+              <Text
+                selectable={true}
+                numberOfLines={urlExpanded ? undefined : 2}
+                ellipsizeMode="tail"
+                style={{
+                  fontSize: 11,
+                  textAlign: 'left',
+                  lineHeight: 16.5,
+                }}>
+                {renderFormattedUrl(url)}
+              </Text>
+            </View>
+          </View>
+        </View>
+      </Animated.View>
+    </View>
+  );
+};
+
+export default MetaAccordion;

package/src/components/MiniBarChart.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import Svg, {Rect} from 'react-native-svg';
+
+const MiniBarChart = ({
+  data,
+  color,
+  maxVal,
+}: {
+  data: number[];
+  color: string;
+  maxVal?: number;
+}) => {
+  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/src/components/MiniLineChart.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Svg, {Path} from 'react-native-svg';
+
+const MiniLineChart = ({data, color}: {data: number[]; color: string}) => {
+  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;