react-native-inapp-inspector 2.2.2 → 2.2.3

package/src/components/SectionHeader.tsx

@@ -0,0 +1,113 @@
+import React, {useRef, useEffect} from 'react';
+import {Animated, View, Pressable, Text} from 'react-native';
+
+// Stylesheet
+import {AppColors} from '../styles/AppColors';
+
+// Components
+import CopyButton from './CopyButton';
+import TouchableScale from './TouchableScale';
+
+// Assets
+import {
+  RequestIcon,
+  ResponseIcon,
+  HeadersIcon,
+  DiffIcon,
+  ChevronIcon,
+  SearchIcon,
+} from './NetworkIcons';
+
+// Stylesheet
+import styles from '../styles';
+
+// Type Definition
+import {SectionHeaderProps} from '../types';
+
+const SectionHeader = ({
+  title,
+  value,
+  expanded,
+  onToggleExpand,
+  showDiff,
+  isDiffing,
+  onToggleDiff,
+  showSearch,
+  isSearching,
+  onToggleSearch,
+}: SectionHeaderProps) => {
+  const isOpen = expanded === undefined ? false : !!expanded;
+  const chevronAnim = useRef(new Animated.Value(isOpen ? 1 : 0)).current;
+  useEffect(() => {
+    Animated.timing(chevronAnim, {
+      toValue: isOpen ? 1 : 0,
+      duration: 220,
+      useNativeDriver: true,
+    }).start();
+  }, [isOpen]);
+  const chevronRotate = chevronAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '180deg'],
+  });
+
+  return (
+    <View style={styles.sectionHeaderGradient}>
+      <View style={styles.sectionHeaderRow}>
+        <Pressable
+          style={styles.sectionTitleRow}
+          onPress={onToggleExpand}
+          hitSlop={12}>
+          {title === 'Request' || title === 'API' ? (
+            <RequestIcon color={AppColors.offerPurple} />
+          ) : title === 'Response' ? (
+            <ResponseIcon color={AppColors.greenColor} />
+          ) : (
+            <HeadersIcon color={AppColors.skyBlue} />
+          )}
+          <Text style={styles.sectionTitle}>{title}</Text>
+        </Pressable>
+        <View style={styles.sectionHeaderActions}>
+          {showSearch && (
+            <TouchableScale
+              onPress={onToggleSearch}
+              hitSlop={12}
+              style={[
+                styles.iconSquareBtn,
+                isSearching ? styles.iconSquareBtnActive : null,
+              ]}>
+              <SearchIcon
+                color={isSearching ? AppColors.skyBlue : AppColors.grayTextWeak}
+                size={14}
+              />
+            </TouchableScale>
+          )}
+          {showDiff && (
+            <TouchableScale
+              onPress={onToggleDiff}
+              hitSlop={12}
+              style={[
+                styles.iconSquareBtn,
+                isDiffing ? styles.iconSquareBtnActive : null,
+              ]}>
+              <DiffIcon
+                color={isDiffing ? AppColors.skyBlue : AppColors.grayTextWeak}
+                size={14}
+              />
+            </TouchableScale>
+          )}
+          <CopyButton value={value} label={title} />
+          <TouchableScale
+            onPress={onToggleExpand}
+            hitSlop={12}
+            style={styles.iconSquareBtn}>
+            <Animated.View style={{transform: [{rotate: chevronRotate}]}}>
+              <ChevronIcon color={AppColors.grayTextStrong} size={14} />
+            </Animated.View>
+          </TouchableScale>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default SectionHeader;

package/src/components/SegmentedTabs.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import {Pressable, Text, View, ViewStyle} from 'react-native';
+import {AppColors} from '../styles/AppColors';
+import {AppFonts} from '../styles/AppFonts';
+
+export interface SegmentedTab {
+  key: string;
+  label: string;
+  icon?: (isActive: boolean) => React.ReactNode;
+}
+
+interface SegmentedTabsProps {
+  tabs: SegmentedTab[];
+  activeKey: string;
+  onChange: (key: string) => void;
+  style?: ViewStyle | ViewStyle[];
+}
+
+const SegmentedTabs = React.memo(({tabs, activeKey, onChange, style}: SegmentedTabsProps) => (
+  <View
+    style={[
+      {
+        flexDirection: 'row',
+        borderRadius: 10,
+        backgroundColor: `${AppColors.slate200}80`,
+        padding: 3,
+        borderWidth: 1,
+        borderColor: AppColors.dividerColor,
+        gap: 3,
+      },
+      style,
+    ]}>
+    {tabs.map((tab) => {
+      const isActive = activeKey === tab.key;
+      return (
+        <Pressable
+          key={tab.key}
+          onPress={() => onChange(tab.key)}
+          style={({pressed}) => [
+            {
+              flex: 1,
+              paddingVertical: 7,
+              paddingHorizontal: 6,
+              borderRadius: 7,
+              backgroundColor: isActive
+                ? AppColors.brandPurple
+                : 'transparent',
+              alignItems: 'center',
+              justifyContent: 'center',
+              gap: 4.5,
+              flexDirection: 'row',
+              opacity: pressed ? 0.8 : 1,
+            },
+            isActive && {
+              shadowColor: AppColors.brandPurple,
+              shadowOffset: {width: 0, height: 1},
+              shadowOpacity: 0.25,
+              shadowRadius: 3,
+              elevation: 2,
+            },
+          ]}>
+          {tab.icon ? tab.icon(isActive) : null}
+          <Text
+            numberOfLines={1}
+            ellipsizeMode="tail"
+            style={{
+              flexShrink: 1,
+              fontFamily: AppFonts.interBold,
+              fontSize: 10.5,
+              color: isActive
+                ? AppColors.white
+                : AppColors.grayText,
+              letterSpacing: 0.2,
+            }}>
+            {tab.label}
+          </Text>
+        </Pressable>
+      );
+    })}
+  </View>
+));
+
+export default SegmentedTabs;

package/src/components/Slider.tsx

@@ -0,0 +1,300 @@
+import React, {useRef, useState, useCallback, useMemo} from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  PanResponder,
+  LayoutChangeEvent,
+  GestureResponderEvent,
+  PanResponderGestureState,
+} from 'react-native';
+import {AppColors} from '../styles/AppColors';
+import {AppFonts} from '../styles/AppFonts';
+import TouchableScale from './TouchableScale';
+
+export interface SliderProps {
+  value: number;
+  onValueChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  step?: number;
+  formatLabel?: (value: number) => string;
+  quickPresets?: number[];
+  disabled?: boolean;
+}
+
+export const Slider: React.FC<SliderProps> = React.memo(
+  ({
+    value,
+    onValueChange,
+    min = 50,
+    max = 90,
+    step = 5,
+    formatLabel = val => `${Math.round(val)}%`,
+    quickPresets = [50, 60, 70, 80, 90],
+    disabled = false,
+  }) => {
+    const trackWidthRef = useRef<number>(0);
+    const [trackWidth, setTrackWidth] = useState<number>(0);
+    const [isDragging, setIsDragging] = useState<boolean>(false);
+
+    const clampedValue = Math.max(min, Math.min(max, value));
+    const percentage = (clampedValue - min) / (max - min || 1);
+
+    const updateValueFromPosition = useCallback(
+      (pageX: number, trackPageX: number) => {
+        if (trackWidthRef.current <= 0) return;
+        const relativeX = Math.max(
+          0,
+          Math.min(trackWidthRef.current, pageX - trackPageX),
+        );
+        const rawRatio = relativeX / trackWidthRef.current;
+        let newValue = min + rawRatio * (max - min);
+
+        if (step > 0) {
+          newValue = Math.round(newValue / step) * step;
+        }
+        newValue = Math.max(min, Math.min(max, newValue));
+        onValueChange(newValue);
+      },
+      [min, max, step, onValueChange],
+    );
+
+    const trackContainerRef = useRef<View>(null);
+    const trackPageXRef = useRef<number>(0);
+
+    const measureTrack = useCallback(() => {
+      if (trackContainerRef.current) {
+        trackContainerRef.current.measure((_x, _y, _width, _height, pageX) => {
+          trackPageXRef.current = pageX;
+        });
+      }
+    }, []);
+
+    const panResponder = useMemo(
+      () =>
+        PanResponder.create({
+          onStartShouldSetPanResponder: () => !disabled,
+          onMoveShouldSetPanResponder: () => !disabled,
+          onPanResponderGrant: (evt: GestureResponderEvent) => {
+            setIsDragging(true);
+            measureTrack();
+            updateValueFromPosition(evt.nativeEvent.pageX, trackPageXRef.current);
+          },
+          onPanResponderMove: (
+            evt: GestureResponderEvent,
+            _gestureState: PanResponderGestureState,
+          ) => {
+            updateValueFromPosition(evt.nativeEvent.pageX, trackPageXRef.current);
+          },
+          onPanResponderRelease: () => {
+            setIsDragging(false);
+          },
+          onPanResponderTerminate: () => {
+            setIsDragging(false);
+          },
+        }),
+      [disabled, measureTrack, updateValueFromPosition],
+    );
+
+    const handleLayout = (e: LayoutChangeEvent) => {
+      const w = e.nativeEvent.layout.width;
+      trackWidthRef.current = w;
+      setTrackWidth(w);
+      measureTrack();
+    };
+
+    const thumbPosition = percentage * (trackWidth || 0);
+
+    return (
+      <View style={styles.container}>
+        {/* Value Display Row */}
+        <View style={styles.valueRow}>
+          <Text style={styles.rangeText}>{min}%</Text>
+          <View
+            style={[
+              styles.currentValueBadge,
+              isDragging && styles.currentValueBadgeActive,
+            ]}>
+            <Text style={styles.currentValueText}>{formatLabel(clampedValue)}</Text>
+          </View>
+          <Text style={styles.rangeText}>{max}%</Text>
+        </View>
+
+        {/* Interactive Track Area */}
+        <View
+          ref={trackContainerRef}
+          onLayout={handleLayout}
+          {...panResponder.panHandlers}
+          style={styles.touchArea}>
+          {/* Background Rail */}
+          <View style={styles.rail}>
+            {/* Active Filled Bar */}
+            <View
+              style={[
+                styles.fillBar,
+                {width: `${Math.round(percentage * 100)}%`},
+              ]}
+            />
+          </View>
+
+          {/* Draggable Thumb */}
+          <View
+            style={[
+              styles.thumb,
+              {
+                left: Math.max(
+                  0,
+                  Math.min(
+                    (trackWidth || 0) - 24,
+                    thumbPosition - 12,
+                  ),
+                ),
+              },
+              isDragging && styles.thumbActive,
+            ]}>
+            <View style={styles.thumbCenterDot} />
+          </View>
+        </View>
+
+        {/* Quick Presets */}
+        {quickPresets && quickPresets.length > 0 && (
+          <View style={styles.presetRow}>
+            {quickPresets.map(preset => {
+              const isSelected = Math.round(clampedValue) === preset;
+              return (
+                <TouchableScale
+                  key={preset}
+                  onPress={() => onValueChange(preset)}
+                  style={[
+                    styles.presetButton,
+                    isSelected && styles.presetButtonActive,
+                  ]}>
+                  <Text
+                    style={[
+                      styles.presetText,
+                      isSelected && styles.presetTextActive,
+                    ]}>
+                    {preset}%
+                  </Text>
+                </TouchableScale>
+              );
+            })}
+          </View>
+        )}
+      </View>
+    );
+  },
+);
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 4,
+    gap: 8,
+  },
+  valueRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 2,
+  },
+  rangeText: {
+    fontFamily: AppFonts.interMedium,
+    fontSize: 11,
+    color: AppColors.grayText,
+  },
+  currentValueBadge: {
+    backgroundColor: `${AppColors.purple}1A`,
+    borderColor: `${AppColors.purple}33`,
+    borderWidth: 1,
+    borderRadius: 8,
+    paddingHorizontal: 10,
+    paddingVertical: 2.5,
+  },
+  currentValueBadgeActive: {
+    backgroundColor: AppColors.purple,
+    borderColor: AppColors.purple,
+    transform: [{scale: 1.05}],
+  },
+  currentValueText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 12,
+    color: AppColors.purple,
+  },
+  touchArea: {
+    height: 36,
+    justifyContent: 'center',
+    position: 'relative',
+  },
+  rail: {
+    height: 8,
+    backgroundColor: `${AppColors.grayTextWeak}2B`,
+    borderRadius: 4,
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  fillBar: {
+    height: '100%',
+    backgroundColor: AppColors.purple,
+    borderRadius: 4,
+  },
+  thumb: {
+    position: 'absolute',
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    backgroundColor: AppColors.white,
+    borderWidth: 2.5,
+    borderColor: AppColors.purple,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: AppColors.black,
+    shadowOffset: {width: 0, height: 2},
+    shadowOpacity: 0.18,
+    shadowRadius: 3.5,
+    elevation: 4,
+  },
+  thumbActive: {
+    transform: [{scale: 1.15}],
+    shadowOpacity: 0.28,
+    shadowRadius: 5,
+    elevation: 6,
+    borderColor: AppColors.purple,
+  },
+  thumbCenterDot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+    backgroundColor: AppColors.purple,
+  },
+  presetRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 8,
+    marginTop: 2,
+  },
+  presetButton: {
+    flex: 1,
+    paddingVertical: 5,
+    borderRadius: 7,
+    alignItems: 'center',
+    backgroundColor: AppColors.grayBackground,
+    borderWidth: 1,
+    borderColor: AppColors.dividerColor,
+  },
+  presetButtonActive: {
+    backgroundColor: `${AppColors.purple}20`,
+    borderColor: AppColors.purple,
+  },
+  presetText: {
+    fontFamily: AppFonts.interBold,
+    fontSize: 10.5,
+    color: AppColors.grayText,
+  },
+  presetTextActive: {
+    color: AppColors.purple,
+  },
+});
+
+export default Slider;

package/src/components/SourcePageCard.tsx

@@ -0,0 +1,148 @@
+import React from 'react';
+import {View, Pressable, Text, Animated} from 'react-native';
+import Svg, {Rect, Path} from 'react-native-svg';
+
+// Components
+import CopyButton from './CopyButton';
+
+// Custom Hooks
+import useAccordion from '../customHooks/useAccordion';
+
+// Assets
+import {ChevronIcon} from './NetworkIcons';
+
+// Type Definition
+import {SourcePageCardProps} from '../types';
+
+// Stylesheet
+import {AppColors} from '../styles/AppColors';
+import styles from '../styles';
+
+const SourcePageCard = ({routeInfo}: SourcePageCardProps) => {
+  const main = useAccordion(true, 600, 280);
+  const params = useAccordion(false, 800, 260);
+
+  const hasParams =
+    routeInfo.params && Object.keys(routeInfo.params).length > 0;
+
+  return (
+    <View style={styles.sourcePageCard}>
+      <Pressable onPress={main.toggleOpen} hitSlop={12}>
+        <View style={styles.sourcePageAccordionHeader}>
+          <View style={styles.sourcePageTop}>
+            <View style={styles.sourcePageIcon}>
+              <Svg width={14} height={14} viewBox="0 0 24 24" fill="none">
+                <Rect
+                  x="3"
+                  y="3"
+                  width="7"
+                  height="7"
+                  rx="1.5"
+                  stroke={AppColors.purple}
+                  strokeWidth="2"
+                />
+                <Rect
+                  x="14"
+                  y="3"
+                  width="7"
+                  height="7"
+                  rx="1.5"
+                  stroke={AppColors.purple}
+                  strokeWidth="2"
+                />
+                <Rect
+                  x="3"
+                  y="14"
+                  width="7"
+                  height="7"
+                  rx="1.5"
+                  stroke={AppColors.purple}
+                  strokeWidth="2"
+                />
+                <Path
+                  d="M14 17.5h7M17.5 14v7"
+                  stroke={AppColors.purple}
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                />
+              </Svg>
+            </View>
+            <View style={{flex: 1}}>
+              <Text style={styles.sourcePageLabel}>Source Page</Text>
+              <Text style={styles.sourcePageValue} numberOfLines={1}>
+                {routeInfo.path}
+              </Text>
+            </View>
+          </View>
+          <View style={styles.sourcePageHeaderRight}>
+            <CopyButton value={routeInfo.path} label="Source Path" />
+            <View style={styles.iconSquareBtn}>
+              <Animated.View style={main.chevronStyle}>
+                <ChevronIcon color={AppColors.grayTextStrong} size={14} />
+              </Animated.View>
+            </View>
+          </View>
+        </View>
+      </Pressable>
+
+      <Animated.View style={main.bodyStyle}>
+        {hasParams && (
+          <View style={styles.sourceParamsBox}>
+            <Pressable onPress={params.toggleOpen} hitSlop={10}>
+              <View style={styles.paramsAccordionHeader}>
+                <View style={styles.paramsAccordionLeft}>
+                  <Text style={styles.sourceParamsLabel}>Parameters</Text>
+                  <View style={styles.headerCountBadge}>
+                    <Text style={styles.headerCountText}>
+                      {Object.keys(routeInfo.params).length}
+                    </Text>
+                  </View>
+                </View>
+                <View style={styles.paramsAccordionRight}>
+                  <CopyButton value={routeInfo.params} label="Parameters" />
+                  <View style={styles.iconSquareBtn}>
+                    <Animated.View style={params.chevronStyle}>
+                      <ChevronIcon color={AppColors.grayTextStrong} size={14} />
+                    </Animated.View>
+                  </View>
+                </View>
+              </View>
+            </Pressable>
+
+            <Animated.View style={params.bodyStyle}>
+              <View style={styles.paramsBody}>
+                {Object.entries(routeInfo.params).map(([key, val], i, arr) => (
+                  <View
+                    key={key}
+                    style={[
+                      styles.paramRow,
+                      i < arr.length - 1 ? styles.paramRowBorder : null,
+                    ]}>
+                    <Text style={styles.paramKey}>{key}</Text>
+                    <View style={styles.paramValueRow}>
+                      <Text selectable style={styles.paramValue}>
+                        {typeof val === 'object'
+                          ? JSON.stringify(val)
+                          : String(val)}
+                      </Text>
+                      <CopyButton
+                        value={
+                          typeof val === 'object'
+                            ? JSON.stringify(val)
+                            : String(val)
+                        }
+                        label={key}
+                      />
+                    </View>
+                  </View>
+                ))}
+              </View>
+            </Animated.View>
+          </View>
+        )}
+      </Animated.View>
+    </View>
+  );
+};
+
+export default SourcePageCard;