react-native-inapp-inspector 2.2.2 → 2.2.3

package/src/components/DiffViewer.tsx

@@ -0,0 +1,82 @@
+import {useTranslation} from '../i18n';
+import React, {useMemo} from 'react';
+import {View, Text, ScrollView} from 'react-native';
+
+// Helpers
+import {getDiff} from '../helpers';
+
+// Stylesheet
+import {AppColors} from '../styles/AppColors';
+import styles from '../styles';
+
+const DiffViewer = React.memo(
+  ({
+    oldData,
+    newData,
+    forceOpen,
+  }: {
+    oldData: any;
+    newData: any;
+    forceOpen?: boolean;
+  }) => {
+    const {t} = useTranslation();
+    const diffs = useMemo(() => getDiff(oldData, newData), [oldData, newData]);
+
+    if (forceOpen === false) {
+      return (
+        <View style={styles.codeBlock}>
+          <Text style={[styles.codeText, {color: AppColors.grayTextWeak}]}>
+            {t('network.diffHidden')}
+          </Text>
+        </View>
+      );
+    }
+
+    if (diffs.length === 0) {
+      return (
+        <View style={styles.codeBlock}>
+          <Text style={styles.codeText}>{t('network.noDiff')}</Text>
+        </View>
+      );
+    }
+
+    return (
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={true}
+        style={styles.codeBlockScroll}>
+        <View style={styles.diffBlock}>
+          {diffs.map((d, i) => {
+            const key = d.path === 'root' ? '' : `"${d.path}": `;
+            if (d.type === 'added') {
+              return (
+                <Text key={i} selectable={true} style={styles.diffAdded}>
+                  + <Text style={styles.codeKey}>{key}</Text>
+                  {JSON.stringify(d.newVal)}
+                </Text>
+              );
+            }
+            if (d.type === 'removed') {
+              return (
+                <Text key={i} selectable={true} style={styles.diffRemoved}>
+                  - <Text style={styles.codeKey}>{key}</Text>
+                  {JSON.stringify(d.oldVal)}
+                </Text>
+              );
+            }
+            return (
+              <Text key={i} selectable={true} style={styles.diffChanged}>
+                ~ <Text style={styles.codeKey}>{key}</Text>
+                {JSON.stringify(d.oldVal)}{' '}
+                <Text style={{color: AppColors.grayTextWeak}}>➔</Text>{' '}
+                {JSON.stringify(d.newVal)}
+              </Text>
+            );
+          })}
+        </View>
+      </ScrollView>
+    );
+  },
+);
+
+export default DiffViewer;

package/src/components/DomainHeader.tsx

@@ -0,0 +1,237 @@
+import React, {useEffect, useRef} from 'react';
+import {Animated, Pressable, View, Text} from 'react-native';
+
+// Stylesheet
+import {AppColors} from '../styles/AppColors';
+import {AppFonts} from '../styles/AppFonts';
+
+// Helpers
+import {formatDateTime} from '../helpers';
+
+// Assets
+import {
+  ChevronIcon,
+  ScreenIcon,
+  CheckIcon,
+  FailIcon,
+  ClockIcon,
+} from './NetworkIcons';
+
+// Stylesheet
+import styles from '../styles';
+
+// Type Definition
+import {LocalFilter} from '../types';
+
+const DomainHeader = ({
+  pageName,
+  color,
+  stats,
+  activeFilters,
+  onToggleFilter,
+  isCollapsed,
+  onToggleCollapse,
+  isFirst,
+  timestamp,
+}: {
+  pageName: string;
+  color: string;
+  stats: {success: number; failed: number; loading: number};
+  activeFilters: Set<LocalFilter>;
+  onToggleFilter: (pageName: string, filter: LocalFilter) => void;
+  isCollapsed: boolean;
+  onToggleCollapse: (pageName: string) => void;
+  isFirst: boolean;
+  timestamp: number;
+}) => {
+  const chevronAnim = useRef(new Animated.Value(isCollapsed ? 0 : 1)).current;
+  useEffect(() => {
+    Animated.timing(chevronAnim, {
+      toValue: isCollapsed ? 0 : 1,
+      duration: 220,
+      useNativeDriver: true,
+    }).start();
+  }, [isCollapsed]);
+
+  const chevronRotate = chevronAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['-90deg', '0deg'],
+  });
+
+  const visibleStats = ['success', 'failed', 'loading'];
+
+  const total = stats.success + stats.failed + stats.loading;
+  const pctSuccess =
+    total > 0 ? Math.round((stats.success / total) * 100) : 0;
+  const pctFailed =
+    total > 0 ? Math.round((stats.failed / total) * 100) : 0;
+  const pctLoading =
+    total > 0 ? Math.round((stats.loading / total) * 100) : 0;
+
+  return (
+    <Pressable
+      style={[
+        styles.domainHeaderCard,
+        !isCollapsed && styles.domainHeaderCardExpanded,
+      ]}
+      onPress={() => onToggleCollapse(pageName)}>
+      <View style={styles.domainHeaderTopRow}>
+        <View style={styles.domainHeaderLeft}>
+          <Animated.View style={{transform: [{rotate: chevronRotate}], flexShrink: 0}}>
+            <ChevronIcon color={AppColors.grayTextWeak} size={13} />
+          </Animated.View>
+          <View style={[styles.domainIconWrap, {backgroundColor: `${color}18`, flexShrink: 0}]}>
+            <ScreenIcon color={color} size={14} />
+          </View>
+          <View style={{flex: 1, justifyContent: 'center', minWidth: 0}}>
+            <View style={{flexDirection: 'row', alignItems: 'center', gap: 6, minWidth: 0}}>
+              <Text
+                style={[styles.domainTitleText, {flexShrink: 1}]}
+                numberOfLines={1}
+                ellipsizeMode="tail">
+                {pageName}
+              </Text>
+              {total > 0 && (
+                <View
+                  style={{
+                    flexDirection: 'row',
+                    alignItems: 'center',
+                    gap: 4,
+                    backgroundColor:
+                      stats.failed > 0
+                        ? AppColors.red100
+                        : stats.loading > 0
+                        ? AppColors.amber100
+                        : AppColors.emerald100,
+                    paddingHorizontal: 5,
+                    paddingVertical: 1.5,
+                    borderRadius: 4,
+                    flexShrink: 0,
+                  }}>
+                  <View
+                    style={{
+                      width: 22,
+                      height: 3.5,
+                      borderRadius: 2,
+                      backgroundColor: AppColors.gray200,
+                      flexDirection: 'row',
+                      overflow: 'hidden',
+                    }}>
+                    {pctSuccess > 0 && (
+                      <View
+                        style={{
+                          width: `${pctSuccess}%`,
+                          height: '100%',
+                          backgroundColor: AppColors.emerald500,
+                        }}
+                      />
+                    )}
+                    {pctFailed > 0 && (
+                      <View
+                        style={{
+                          width: `${pctFailed}%`,
+                          height: '100%',
+                          backgroundColor: AppColors.red500,
+                        }}
+                      />
+                    )}
+                    {pctLoading > 0 && (
+                      <View
+                        style={{
+                          width: `${pctLoading}%`,
+                          height: '100%',
+                          backgroundColor: AppColors.amber500,
+                        }}
+                      />
+                    )}
+                  </View>
+                  <Text
+                    style={{
+                      fontFamily: AppFonts.interBold,
+                      fontSize: 8.5,
+                      color:
+                        stats.failed > 0
+                          ? AppColors.redErrorText
+                          : stats.loading > 0
+                          ? AppColors.amber800Warm
+                          : AppColors.emerald700,
+                    }}>
+                    {pctSuccess}%
+                  </Text>
+                </View>
+              )}
+            </View>
+            <Text style={styles.domainSummaryText} numberOfLines={1} ellipsizeMode="tail">
+              {formatDateTime(timestamp)}
+            </Text>
+          </View>
+        </View>
+
+        <View style={styles.domainStatsGroup}>
+          {visibleStats.map(type => {
+            const isActive = activeFilters.has(type as LocalFilter);
+
+            let IconComponent;
+            let activeColor = '';
+            let count = 0;
+
+            if (type === 'success') {
+              IconComponent = CheckIcon;
+              activeColor = AppColors.greenColor;
+              count = stats.success;
+            } else if (type === 'failed') {
+              IconComponent = FailIcon;
+              activeColor = AppColors.errorColor;
+              count = stats.failed;
+            } else {
+              IconComponent = ClockIcon;
+              activeColor = AppColors.darkOrange;
+              count = stats.loading;
+            }
+
+            return (
+              <Pressable
+                key={type}
+                onPress={() => onToggleFilter(pageName, type as LocalFilter)}
+                hitSlop={6}
+                style={[
+                  styles.domainStatPill,
+                  isActive && {
+                    borderColor: `${activeColor}40`,
+                    backgroundColor: `${activeColor}12`,
+                  },
+                ]}>
+                <View
+                  style={[
+                    styles.filterCheckbox,
+                    {marginRight: 0, width: 11, height: 11, borderRadius: 2.5},
+                    isActive && [
+                      styles.filterCheckboxActive,
+                      {backgroundColor: activeColor},
+                    ],
+                  ]}>
+                  {isActive && (
+                    <CheckIcon color={AppColors.white} size={7} />
+                  )}
+                </View>
+                <IconComponent
+                  color={isActive ? activeColor : AppColors.grayTextWeak}
+                  size={type === 'failed' ? 8 : 10}
+                />
+                <Text
+                  style={[
+                    styles.domainStatText,
+                    {color: isActive ? activeColor : AppColors.grayTextWeak},
+                  ]}>
+                  {count}
+                </Text>
+              </Pressable>
+            );
+          })}
+        </View>
+      </View>
+    </Pressable>
+  );
+};
+
+export default DomainHeader;

package/src/components/EmptyState.tsx

@@ -0,0 +1,73 @@
+import React, {useEffect, useRef} from 'react';
+import {Animated, DevSettings, Alert, View, Text} from 'react-native';
+
+// Components
+import TouchableScale from './TouchableScale';
+import AnimatedEntrance from './AnimatedEntrance';
+
+// Assets
+import {EmptyRadarIcon} from './NetworkIcons';
+
+// Stylesheet
+import {AppColors} from '../styles/AppColors';
+import styles from '../styles';
+
+const EmptyState = React.memo(function EmptyState({isSearch}: {isSearch?: boolean}) {
+  const iconPulse = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    const loop = Animated.loop(
+      Animated.sequence([
+        Animated.timing(iconPulse, {
+          toValue: 1.06,
+          duration: 900,
+          useNativeDriver: true,
+        }),
+        Animated.timing(iconPulse, {
+          toValue: 1,
+          duration: 900,
+          useNativeDriver: true,
+        }),
+      ]),
+    );
+
+    loop.start();
+    return () => loop.stop();
+  }, [iconPulse]);
+
+  const handleReload = () => {
+    if (__DEV__ && DevSettings && DevSettings.reload) {
+      DevSettings.reload();
+      return;
+    }
+
+    Alert.alert(
+      'Reload',
+      'App reload is typically only available in development mode.',
+    );
+  };
+
+  return (
+    <AnimatedEntrance style={styles.emptyContainer} distance={14}>
+      <Animated.View
+        style={[styles.emptyIconWrap, {transform: [{scale: iconPulse}]}]}>
+        <EmptyRadarIcon color={AppColors.purple} size={32} />
+      </Animated.View>
+      <Text style={styles.emptyTitle}>
+        {isSearch ? 'No matching APIs' : 'No network activity'}
+      </Text>
+      <Text style={styles.emptySub}>
+        {isSearch
+          ? 'Try adjusting your filters or search.'
+          : 'Listening for incoming API calls...'}
+      </Text>
+      {!isSearch && (
+        <TouchableScale style={styles.reloadBtn} onPress={handleReload}>
+          <Text style={styles.reloadBtnText}>Reload App</Text>
+        </TouchableScale>
+      )}
+    </AnimatedEntrance>
+  );
+});
+
+export default EmptyState;

package/src/components/EndOfListFooter.tsx

@@ -0,0 +1,100 @@
+import React from 'react';
+import {Platform, StyleSheet, Text, View} from 'react-native';
+import {AppColors} from '../styles/AppColors';
+import {AppFonts} from '../styles/AppFonts';
+import {CheckIcon} from './NetworkIcons';
+
+interface EndOfListFooterProps {
+  count?: number;
+  label?: string;
+  message?: string;
+}
+
+export const EndOfListFooter: React.FC<EndOfListFooterProps> = React.memo(({
+  count,
+  label,
+  message = "You've reached the end of the list",
+}) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.dividerLine} />
+      <View style={styles.badgePill}>
+        <View style={styles.iconCircle}>
+          <CheckIcon color={AppColors.purple} size={8} />
+        </View>
+        <Text style={styles.messageText}>{message}</Text>
+        {count != null && count > 0 && (
+          <View style={styles.countBadge}>
+            <Text style={styles.countText}>
+              {count} {label ? (count === 1 ? label.replace(/s$/, '') : label) : ''}
+            </Text>
+          </View>
+        )}
+      </View>
+      <View style={styles.dividerLine} />
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: Platform.OS === 'ios' ? 44 : 32,
+    gap: 8,
+  },
+  dividerLine: {
+    flex: 1,
+    height: 1,
+    backgroundColor: AppColors.dividerColor,
+    opacity: 0.7,
+  },
+  badgePill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    paddingHorizontal: 10,
+    paddingVertical: 5,
+    borderRadius: 999,
+    backgroundColor: AppColors.primaryLight,
+    borderWidth: 1,
+    borderColor: AppColors.grayBorderSecondary,
+    shadowColor: AppColors.black,
+    shadowOffset: {width: 0, height: 1},
+    shadowOpacity: 0.04,
+    shadowRadius: 2,
+    elevation: 1,
+  },
+  iconCircle: {
+    width: 14,
+    height: 14,
+    borderRadius: 7,
+    backgroundColor: `${AppColors.purple}18`,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  messageText: {
+    fontFamily: AppFonts.interMedium,
+    fontSize: 11,
+    color: AppColors.grayTextWeak,
+    letterSpacing: 0.1,
+  },
+  countBadge: {
+    paddingHorizontal: 5,
+    paddingVertical: 1,
+    borderRadius: 6,
+    backgroundColor: AppColors.grayBackground,
+    borderWidth: 1,
+    borderColor: AppColors.grayBorderSecondary,
+  },
+  countText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 9.5,
+    color: AppColors.grayTextStrong,
+  },
+});
+
+export default EndOfListFooter;