react-native-network-lens 0.0.0-stage → 0.1.1

package/src/components/RequestList/RequestList.tsx

@@ -0,0 +1,226 @@
+import { useCallback, useMemo, useState, type ReactNode } from 'react';
+import { FlatList, Share, StyleSheet, Text, View } from 'react-native';
+import type NetworkRequest from '../../core/NetworkRequest';
+import { useTheme } from '../../theme';
+import type { NetworkRequestRow } from '../../types';
+import {
+  ActionSheet,
+  EmptyState,
+  IconButton,
+  SearchInput,
+  type ActionItem,
+} from '../ui';
+import FilterBar from './FilterBar';
+import RequestRow from './RequestRow';
+import {
+  applyFilter,
+  collectHosts,
+  collectMethods,
+  emptyFilter,
+  isFilterActive,
+  type RequestFilter,
+} from './filters';
+
+interface Props {
+  requests: NetworkRequest[];
+  sort: 'asc' | 'desc';
+  compact: boolean;
+  maxRows?: number;
+  paused: boolean;
+  loggingEnabled: boolean;
+  onPressItem: (id: string) => void;
+  menuActions: ActionItem[];
+  /** Optional row rendered above the search bar (used by the overlay for title + close). */
+  header?: ReactNode;
+}
+
+const keyExtractor = (row: NetworkRequestRow) => row.id;
+
+const summaryText = (total: number, shown: number, failed: number) => {
+  const parts = [`${total} request${total === 1 ? '' : 's'}`];
+  if (shown !== total) parts.push(`${shown} shown`);
+  if (failed) parts.push(`${failed} with errors`);
+  return parts.join(' · ');
+};
+
+const RequestList = ({
+  requests,
+  sort,
+  compact,
+  maxRows,
+  paused,
+  loggingEnabled,
+  onPressItem,
+  menuActions,
+  header,
+}: Props) => {
+  const theme = useTheme();
+  const [search, setSearch] = useState('');
+  const [filter, setFilter] = useState<RequestFilter>(emptyFilter);
+  const [showFilters, setShowFilters] = useState(false);
+  const [menuVisible, setMenuVisible] = useState(false);
+
+  const rows = useMemo(() => {
+    const mapped = requests.map((request) => request.toRow());
+    return sort === 'asc' ? mapped.reverse() : mapped;
+  }, [requests, sort]);
+
+  const filtered = useMemo(() => {
+    const result = applyFilter(rows, search, filter);
+    return maxRows ? result.slice(0, maxRows) : result;
+  }, [rows, search, filter, maxRows]);
+
+  const methods = useMemo(() => collectMethods(rows), [rows]);
+  const hosts = useMemo(() => collectHosts(rows), [rows]);
+  const failedCount = useMemo(
+    () =>
+      rows.filter(
+        (r) =>
+          r.statusGroup === 'failed' ||
+          r.statusGroup === '4xx' ||
+          r.statusGroup === '5xx'
+      ).length,
+    [rows]
+  );
+
+  const onLongPress = useCallback(
+    (id: string) => {
+      const request = requests.find((r) => r.id === id);
+      if (request)
+        Share.share({ message: request.curl }).catch(() => undefined);
+    },
+    [requests]
+  );
+
+  const renderItem = useCallback(
+    ({ item }: { item: NetworkRequestRow }) => (
+      <RequestRow
+        row={item}
+        compact={compact}
+        onPress={onPressItem}
+        onLongPress={onLongPress}
+      />
+    ),
+    [compact, onPressItem, onLongPress]
+  );
+
+  const emptyState = !loggingEnabled ? (
+    <EmptyState
+      title="Network logging is disabled"
+      subtitle="Call startNetworkLogging() with enabled: true before rendering the inspector."
+    />
+  ) : rows.length === 0 ? (
+    <EmptyState
+      title="No requests yet"
+      subtitle="Requests made with fetch, axios or XMLHttpRequest will appear here."
+    />
+  ) : (
+    <EmptyState
+      title="No matching requests"
+      subtitle="Try a different search term or clear the filters."
+    />
+  );
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: theme.colors.background }]}
+    >
+      <View
+        style={[
+          styles.toolbar,
+          {
+            backgroundColor: theme.colors.surface,
+            borderBottomColor: theme.colors.border,
+          },
+        ]}
+      >
+        {header}
+        <View style={styles.searchRow}>
+          <SearchInput
+            value={search}
+            onChangeText={setSearch}
+            placeholder="Filter by URL, method or status"
+            style={styles.search}
+          />
+          <IconButton
+            glyph="≡"
+            accessibilityLabel="Toggle filters"
+            active={showFilters || isFilterActive(filter)}
+            onPress={() => setShowFilters((v) => !v)}
+          />
+          <IconButton
+            glyph="⋮"
+            accessibilityLabel="More options"
+            onPress={() => setMenuVisible(true)}
+          />
+        </View>
+      </View>
+      {showFilters && (
+        <FilterBar
+          filter={filter}
+          onChange={setFilter}
+          methods={methods}
+          hosts={hosts}
+          onClear={() => setFilter(emptyFilter())}
+        />
+      )}
+      <View
+        style={[
+          styles.statusBar,
+          {
+            backgroundColor: paused
+              ? theme.colors.statusWarning
+              : theme.colors.surfaceAlt,
+          },
+        ]}
+      >
+        <Text
+          style={[
+            styles.statusText,
+            paused
+              ? styles.statusTextPaused
+              : { color: theme.colors.textMuted },
+          ]}
+          numberOfLines={1}
+        >
+          {paused
+            ? 'Paused — new requests are captured but hidden until you resume'
+            : summaryText(rows.length, filtered.length, failedCount)}
+        </Text>
+      </View>
+      <FlatList
+        data={filtered}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        keyboardShouldPersistTaps="handled"
+        keyboardDismissMode="on-drag"
+        initialNumToRender={15}
+        windowSize={7}
+        ListEmptyComponent={emptyState}
+        contentContainerStyle={filtered.length === 0 && styles.emptyContent}
+      />
+      <ActionSheet
+        visible={menuVisible}
+        onClose={() => setMenuVisible(false)}
+        actions={menuActions}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  toolbar: {
+    paddingHorizontal: 8,
+    paddingVertical: 8,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  searchRow: { flexDirection: 'row', alignItems: 'center' },
+  search: { flex: 1, marginRight: 4 },
+  statusBar: { paddingHorizontal: 12, paddingVertical: 4 },
+  statusText: { fontSize: 11, fontWeight: '600' },
+  statusTextPaused: { color: '#ffffff' },
+  emptyContent: { flexGrow: 1 },
+});
+
+export default RequestList;

package/src/components/RequestList/RequestRow.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import {
+  ActivityIndicator,
+  Pressable,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { methodColor, statusColor, useTheme } from '../../theme';
+import type { NetworkRequestRow } from '../../types';
+import { formatBytes, formatDuration, formatTime } from '../../utils/format';
+import { Pill } from '../ui';
+
+interface Props {
+  row: NetworkRequestRow;
+  compact: boolean;
+  onPress: (id: string) => void;
+  onLongPress?: (id: string) => void;
+}
+
+const RequestRow = ({ row, compact, onPress, onLongPress }: Props) => {
+  const theme = useTheme();
+  const failed = row.state === 'failed';
+  const pending = row.state === 'pending';
+  const color = statusColor(theme, row.status, failed);
+  const statusLabel = failed
+    ? (row.failureReason ?? 'ERR').toUpperCase()
+    : row.status > 0
+      ? String(row.status)
+      : '…';
+  const pathAndQuery =
+    row.url.slice(row.url.indexOf(row.host) + row.host.length) || row.url;
+
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={`${row.method} ${row.url}, status ${statusLabel}`}
+      onPress={() => onPress(row.id)}
+      onLongPress={onLongPress ? () => onLongPress(row.id) : undefined}
+      delayLongPress={350}
+      style={({ pressed }) => [
+        styles.row,
+        compact && styles.rowCompact,
+        {
+          backgroundColor: pressed
+            ? theme.colors.surfaceAlt
+            : theme.colors.surface,
+          borderBottomColor: theme.colors.border,
+        },
+      ]}
+    >
+      <View style={[styles.accent, { backgroundColor: color }]} />
+      <View style={styles.left}>
+        <Pill
+          label={row.method}
+          color={methodColor(theme, row.method)}
+          small
+          style={styles.methodPill}
+        />
+        {pending ? (
+          <ActivityIndicator
+            size="small"
+            color={theme.colors.statusPending}
+            style={styles.spinner}
+          />
+        ) : (
+          <Text style={[styles.status, { color }]}>{statusLabel}</Text>
+        )}
+      </View>
+      <View style={styles.center}>
+        <Text
+          numberOfLines={compact ? 1 : 2}
+          style={[
+            styles.path,
+            { color: failed || row.status >= 400 ? color : theme.colors.text },
+          ]}
+        >
+          {pathAndQuery}
+        </Text>
+        {!compact && (
+          <Text
+            numberOfLines={1}
+            style={[styles.host, { color: theme.colors.textMuted }]}
+          >
+            {row.host || '—'}
+            {row.gqlOperation ? (
+              <Text style={{ color: theme.colors.primary }}>
+                {' '}
+                gql: {row.gqlOperation}
+              </Text>
+            ) : null}
+          </Text>
+        )}
+      </View>
+      <View style={styles.right}>
+        <Text style={[styles.meta, { color: theme.colors.textMuted }]}>
+          {formatTime(row.startTime)}
+        </Text>
+        <Text style={[styles.meta, { color: theme.colors.textMuted }]}>
+          {row.duration >= 0
+            ? formatDuration(row.duration)
+            : pending
+              ? 'pending'
+              : ''}
+        </Text>
+        {!compact && row.responseSize > 0 && (
+          <Text style={[styles.meta, { color: theme.colors.textMuted }]}>
+            {formatBytes(row.responseSize)}
+          </Text>
+        )}
+      </View>
+    </Pressable>
+  );
+};
+
+const areEqual = (prev: Props, next: Props) =>
+  prev.row.updatedAt === next.row.updatedAt &&
+  prev.row.id === next.row.id &&
+  prev.compact === next.compact &&
+  prev.onPress === next.onPress &&
+  prev.onLongPress === next.onLongPress;
+
+export default React.memo(RequestRow, areEqual);
+
+const styles = StyleSheet.create({
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 10,
+    paddingRight: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+    minHeight: 60,
+  },
+  rowCompact: { paddingVertical: 6, minHeight: 44 },
+  accent: { width: 3, alignSelf: 'stretch', borderRadius: 2, marginLeft: 6 },
+  left: { width: 64, alignItems: 'center', marginLeft: 6 },
+  methodPill: { alignSelf: 'center', minWidth: 52, alignItems: 'center' },
+  status: {
+    fontSize: 12,
+    fontWeight: '700',
+    marginTop: 4,
+    fontVariant: ['tabular-nums'],
+  },
+  spinner: { marginTop: 2, transform: [{ scale: 0.7 }] },
+  center: { flex: 1, paddingHorizontal: 8 },
+  path: { fontSize: 14, fontWeight: '500', lineHeight: 18 },
+  host: { fontSize: 12, marginTop: 2 },
+  right: { alignItems: 'flex-end', minWidth: 56 },
+  meta: { fontSize: 11, lineHeight: 15, fontVariant: ['tabular-nums'] },
+});

package/src/components/RequestList/filters.ts

@@ -0,0 +1,98 @@
+import type { NetworkRequestRow, StatusGroup } from '../../types';
+
+export interface RequestFilter {
+  methods: Set<string>;
+  statusGroups: Set<StatusGroup>;
+  hosts: Set<string>;
+}
+
+export const emptyFilter = (): RequestFilter => ({
+  methods: new Set(),
+  statusGroups: new Set(),
+  hosts: new Set(),
+});
+
+export const isFilterActive = (filter: RequestFilter): boolean =>
+  filter.methods.size > 0 ||
+  filter.statusGroups.size > 0 ||
+  filter.hosts.size > 0;
+
+export const STATUS_GROUPS: StatusGroup[] = [
+  '2xx',
+  '3xx',
+  '4xx',
+  '5xx',
+  'pending',
+  'failed',
+];
+
+export const applyFilter = (
+  rows: NetworkRequestRow[],
+  search: string,
+  filter: RequestFilter
+): NetworkRequestRow[] => {
+  const needle = search.trim().toLowerCase();
+  return rows.filter((row) => {
+    if (needle) {
+      const haystack =
+        `${row.method} ${row.url} ${row.gqlOperation ?? ''} ${row.status}`.toLowerCase();
+      if (!haystack.includes(needle)) return false;
+    }
+    if (filter.methods.size && !filter.methods.has(row.method)) return false;
+    if (filter.statusGroups.size && !filter.statusGroups.has(row.statusGroup))
+      return false;
+    if (filter.hosts.size && !filter.hosts.has(row.host)) return false;
+    return true;
+  });
+};
+
+const toggleIn = <T>(set: Set<T>, value: T): Set<T> => {
+  const next = new Set(set);
+  if (next.has(value)) next.delete(value);
+  else next.add(value);
+  return next;
+};
+
+export const toggleMethod = (
+  filter: RequestFilter,
+  method: string
+): RequestFilter => ({
+  ...filter,
+  methods: toggleIn(filter.methods, method),
+});
+
+export const toggleStatusGroup = (
+  filter: RequestFilter,
+  group: StatusGroup
+): RequestFilter => ({
+  ...filter,
+  statusGroups: toggleIn(filter.statusGroups, group),
+});
+
+export const toggleHost = (
+  filter: RequestFilter,
+  host: string
+): RequestFilter => ({
+  ...filter,
+  hosts: toggleIn(filter.hosts, host),
+});
+
+/** Hosts seen in the captured requests, most frequent first. */
+export const collectHosts = (rows: NetworkRequestRow[]): string[] => {
+  const counts = new Map<string, number>();
+  for (const row of rows) counts.set(row.host, (counts.get(row.host) ?? 0) + 1);
+  return [...counts.entries()]
+    .sort((a, b) => b[1] - a[1])
+    .map(([host]) => host);
+};
+
+export const collectMethods = (rows: NetworkRequestRow[]): string[] => {
+  const seen = new Set<string>();
+  for (const row of rows) seen.add(row.method);
+  const order = ['GET', 'POST', 'PUT', 'PATCH', 'DELETE'];
+  return [...seen].sort((a, b) => {
+    const ia = order.indexOf(a);
+    const ib = order.indexOf(b);
+    return (ia === -1 ? 99 : ia) - (ib === -1 ? 99 : ib) || a.localeCompare(b);
+  });
+};

package/src/components/ui/ActionSheet.tsx

@@ -0,0 +1,109 @@
+import {
+  Modal,
+  Pressable,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import { useTheme } from '../../theme';
+
+export interface ActionItem {
+  label: string;
+  onPress: () => void;
+  destructive?: boolean;
+}
+
+interface Props {
+  visible: boolean;
+  onClose: () => void;
+  actions: ActionItem[];
+  title?: string;
+}
+
+/** Cross-platform bottom sheet built on Modal, so no native dependency is needed. */
+export const ActionSheet = ({ visible, onClose, actions, title }: Props) => {
+  const theme = useTheme();
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onClose}
+    >
+      <Pressable
+        style={styles.backdrop}
+        onPress={onClose}
+        accessibilityLabel="Close menu"
+      />
+      <View style={[styles.sheet, { backgroundColor: theme.colors.surface }]}>
+        {title ? (
+          <Text
+            numberOfLines={1}
+            style={[styles.title, { color: theme.colors.textMuted }]}
+          >
+            {title}
+          </Text>
+        ) : null}
+        <ScrollView bounces={false}>
+          {actions.map((action) => (
+            <Pressable
+              key={action.label}
+              accessibilityRole="button"
+              onPress={() => {
+                onClose();
+                action.onPress();
+              }}
+              style={({ pressed }) => [
+                styles.item,
+                { borderTopColor: theme.colors.border },
+                pressed && styles.pressed,
+              ]}
+            >
+              <Text
+                style={[
+                  styles.label,
+                  {
+                    color: action.destructive
+                      ? theme.colors.statusBad
+                      : theme.colors.text,
+                  },
+                ]}
+              >
+                {action.label}
+              </Text>
+            </Pressable>
+          ))}
+        </ScrollView>
+      </View>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  backdrop: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    backgroundColor: 'rgba(0,0,0,0.35)',
+  },
+  sheet: {
+    position: 'absolute',
+    left: 12,
+    right: 12,
+    bottom: 24,
+    borderRadius: 14,
+    overflow: 'hidden',
+    maxHeight: '70%',
+  },
+  title: { fontSize: 12, fontWeight: '700', padding: 12, letterSpacing: 0.6 },
+  item: {
+    paddingVertical: 14,
+    paddingHorizontal: 16,
+    borderTopWidth: StyleSheet.hairlineWidth,
+  },
+  label: { fontSize: 16, fontWeight: '500' },
+  pressed: { opacity: 0.6 },
+});

package/src/components/ui/Button.tsx

@@ -0,0 +1,124 @@
+import {
+  Pressable,
+  StyleSheet,
+  Text,
+  type StyleProp,
+  type TextStyle,
+  type ViewStyle,
+} from 'react-native';
+import { useTheme } from '../../theme';
+
+// Object form keeps compatibility with React Native versions before numeric hitSlop.
+const HIT_SLOP_SMALL = { top: 6, bottom: 6, left: 6, right: 6 };
+const HIT_SLOP = { top: 8, bottom: 8, left: 8, right: 8 };
+
+interface TextButtonProps {
+  label: string;
+  onPress?: () => void;
+  disabled?: boolean;
+  active?: boolean;
+  style?: StyleProp<ViewStyle>;
+  textStyle?: StyleProp<TextStyle>;
+}
+
+export const TextButton = ({
+  label,
+  onPress,
+  disabled,
+  active,
+  style,
+  textStyle,
+}: TextButtonProps) => {
+  const theme = useTheme();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      disabled={disabled}
+      onPress={onPress}
+      hitSlop={HIT_SLOP_SMALL}
+      style={({ pressed }) => [
+        styles.button,
+        {
+          backgroundColor: active
+            ? theme.colors.primary
+            : theme.colors.surfaceAlt,
+        },
+        disabled ? styles.disabled : pressed && styles.pressed,
+        style,
+      ]}
+    >
+      <Text
+        style={[
+          styles.label,
+          { color: active ? theme.colors.onPrimary : theme.colors.text },
+          textStyle,
+        ]}
+      >
+        {label}
+      </Text>
+    </Pressable>
+  );
+};
+
+interface IconButtonProps {
+  /** A unicode glyph; the library ships no image assets. */
+  glyph: string;
+  accessibilityLabel: string;
+  onPress?: () => void;
+  disabled?: boolean;
+  active?: boolean;
+}
+
+export const IconButton = ({
+  glyph,
+  accessibilityLabel,
+  onPress,
+  disabled,
+  active,
+}: IconButtonProps) => {
+  const theme = useTheme();
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={accessibilityLabel}
+      disabled={disabled}
+      onPress={onPress}
+      hitSlop={HIT_SLOP}
+      style={({ pressed }) => [
+        styles.icon,
+        active && { backgroundColor: theme.colors.primary },
+        disabled ? styles.disabled : pressed && styles.pressed,
+      ]}
+    >
+      <Text
+        style={[
+          styles.glyph,
+          { color: active ? theme.colors.onPrimary : theme.colors.text },
+        ]}
+      >
+        {glyph}
+      </Text>
+    </Pressable>
+  );
+};
+
+const styles = StyleSheet.create({
+  button: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: { fontSize: 13, fontWeight: '600' },
+  icon: {
+    width: 32,
+    height: 32,
+    borderRadius: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  glyph: { fontSize: 16, fontWeight: '600' },
+  disabled: { opacity: 0.35 },
+  pressed: { opacity: 0.6 },
+});