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

package/src/components/RawTextView.tsx

@@ -0,0 +1,163 @@
+import React, { useCallback, useEffect, useMemo } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { useTheme, type Theme } from '../theme';
+import { findLineMatches, splitHighlights, toLines } from '../utils/search';
+import { CodeList } from './CodeList';
+
+interface Props {
+  text: string;
+  query?: string;
+  activeMatch?: number;
+  onMatchCountChange?: (count: number) => void;
+}
+
+/**
+ * Renders text one line per row with line numbers, no wrapping and horizontal
+ * scrolling, so pretty-printed JSON keeps its indentation structure intact.
+ */
+const RawTextView = ({
+  text,
+  query = '',
+  activeMatch = 0,
+  onMatchCountChange,
+}: Props) => {
+  const theme = useTheme();
+  const lines = useMemo(() => toLines(text), [text]);
+  const matches = useMemo(() => findLineMatches(lines, query), [lines, query]);
+
+  useEffect(() => {
+    onMatchCountChange?.(matches.length);
+  }, [matches.length, onMatchCountChange]);
+
+  const matchedLines = useMemo(
+    () => new Set(matches.map((m) => m.line)),
+    [matches]
+  );
+  const activeLine =
+    matches[Math.min(activeMatch, Math.max(matches.length - 1, 0))]?.line;
+
+  const gutterChars = String(lines.length).length;
+  const charWidth = theme.sizes.codeFontSize * 0.62;
+  const contentWidth = useMemo(() => {
+    let max = 0;
+    for (const line of lines) if (line.length > max) max = line.length;
+    return (max + gutterChars + 3) * charWidth + 32;
+  }, [lines, gutterChars, charWidth]);
+
+  const rowHeight = theme.sizes.codeLineHeight;
+
+  const renderItem = useCallback(
+    ({ item, index }: { item: string; index: number }) => (
+      <Line
+        text={item}
+        index={index}
+        gutterChars={gutterChars}
+        theme={theme}
+        query={query}
+        matched={matchedLines.has(index)}
+        active={index === activeLine}
+        height={rowHeight}
+      />
+    ),
+    [gutterChars, theme, query, matchedLines, activeLine, rowHeight]
+  );
+
+  return (
+    <CodeList
+      data={lines}
+      renderItem={renderItem}
+      keyExtractor={keyExtractor}
+      contentWidth={contentWidth}
+      rowHeight={rowHeight}
+      activeIndex={activeLine}
+      extraData={`${query}:${activeLine ?? ''}`}
+    />
+  );
+};
+
+const keyExtractor = (_: string, index: number) => String(index);
+
+const Line = React.memo(function LineInner({
+  text,
+  index,
+  gutterChars,
+  theme,
+  query,
+  matched,
+  active,
+  height,
+}: {
+  text: string;
+  index: number;
+  gutterChars: number;
+  theme: Theme;
+  query: string;
+  matched: boolean;
+  active: boolean;
+  height: number;
+}) {
+  const codeStyle = {
+    fontFamily: theme.fonts.mono,
+    fontSize: theme.sizes.codeFontSize,
+    lineHeight: theme.sizes.codeLineHeight,
+  };
+  const segments = matched ? splitHighlights(text, query) : null;
+  return (
+    <View
+      style={[
+        styles.line,
+        { height },
+        active
+          ? { backgroundColor: `${theme.colors.highlightActive}33` }
+          : matched
+            ? { backgroundColor: `${theme.colors.highlight}55` }
+            : null,
+      ]}
+    >
+      <Text
+        style={[
+          codeStyle,
+          styles.gutter,
+          {
+            color: theme.colors.textMuted,
+            width: (gutterChars + 1) * theme.sizes.codeFontSize * 0.62 + 8,
+          },
+        ]}
+      >
+        {index + 1}
+      </Text>
+      <Text
+        numberOfLines={1}
+        selectable
+        style={[codeStyle, { color: theme.colors.text }]}
+      >
+        {segments
+          ? segments.map((segment, i) => (
+              <Text
+                key={i}
+                style={
+                  segment.highlighted
+                    ? {
+                        backgroundColor: active
+                          ? theme.colors.highlightActive
+                          : theme.colors.highlight,
+                        color: theme.colors.onHighlight,
+                      }
+                    : undefined
+                }
+              >
+                {segment.text}
+              </Text>
+            ))
+          : text}
+      </Text>
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  line: { flexDirection: 'row', alignItems: 'center', paddingRight: 16 },
+  gutter: { textAlign: 'right', paddingRight: 8, marginRight: 8, opacity: 0.8 },
+});
+
+export default RawTextView;

package/src/components/RequestDetails/RequestDetails.tsx

@@ -0,0 +1,313 @@
+import { useState } from 'react';
+import {
+  Pressable,
+  ScrollView,
+  Share,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import type NetworkRequest from '../../core/NetworkRequest';
+import { useAsyncValue } from '../../hooks';
+import { methodColor, statusColor, useTheme } from '../../theme';
+import {
+  formatBytes,
+  formatDateTime,
+  formatDuration,
+  formatTime,
+} from '../../utils/format';
+import BodyViewer from '../BodyViewer';
+import {
+  IconButton,
+  KeyValueList,
+  Pill,
+  Section,
+  SegmentedControl,
+  TextButton,
+} from '../ui';
+
+type Tab = 'overview' | 'request' | 'response';
+
+interface Props {
+  request: NetworkRequest;
+  onClose: () => void;
+  copyToClipboard?: (text: string) => void;
+}
+
+const share = (text: string) =>
+  Share.share({ message: text }).catch(() => undefined);
+
+const statusLabel = (request: NetworkRequest) => {
+  if (request.state === 'failed')
+    return (request.failureReason ?? 'failed').toUpperCase();
+  return request.status > 0 ? String(request.status) : 'PENDING';
+};
+
+const RequestDetails = ({ request, onClose, copyToClipboard }: Props) => {
+  const theme = useTheme();
+  const [tab, setTab] = useState<Tab>('overview');
+  const [urlExpanded, setUrlExpanded] = useState(false);
+
+  const failed = request.state === 'failed';
+  const requestBody = request.getRequestBody();
+  const { value: responseBody, loading } = useAsyncValue(
+    () => request.getResponseBody(),
+    [request, request.updatedAt]
+  );
+
+  const summary = [
+    request.duration >= 0 && formatDuration(request.duration),
+    request.responseSize > 0 && formatBytes(request.responseSize),
+    formatTime(request.startTime, true),
+  ]
+    .filter(Boolean)
+    .join(' · ');
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: theme.colors.background }]}
+    >
+      <View
+        style={[
+          styles.header,
+          {
+            backgroundColor: theme.colors.surface,
+            borderBottomColor: theme.colors.border,
+          },
+        ]}
+      >
+        <View style={styles.headerRow}>
+          <Pill
+            label={request.method}
+            color={methodColor(theme, request.method)}
+            filled
+          />
+          <Pill
+            label={statusLabel(request)}
+            color={statusColor(theme, request.status, failed)}
+          />
+          <Text
+            style={[styles.summary, { color: theme.colors.textMuted }]}
+            numberOfLines={1}
+          >
+            {summary}
+          </Text>
+          <IconButton
+            glyph="✕"
+            accessibilityLabel="Back to list"
+            onPress={onClose}
+          />
+        </View>
+        <Pressable
+          onPress={() => setUrlExpanded((v) => !v)}
+          accessibilityRole="button"
+          accessibilityLabel="Toggle full URL"
+        >
+          <Text
+            selectable
+            numberOfLines={urlExpanded ? undefined : 2}
+            style={[styles.url, { color: theme.colors.text }]}
+          >
+            {request.url}
+          </Text>
+        </Pressable>
+        {request.gqlOperation ? (
+          <Text style={[styles.gql, { color: theme.colors.primary }]}>
+            gql: {request.gqlOperation}
+          </Text>
+        ) : null}
+        <SegmentedControl<Tab>
+          value={tab}
+          onChange={setTab}
+          style={styles.tabs}
+          options={[
+            { value: 'overview', label: 'Overview' },
+            {
+              value: 'request',
+              label: 'Request',
+              badge: requestBody.kind !== 'empty',
+            },
+            {
+              value: 'response',
+              label: 'Response',
+              badge: !!responseBody && responseBody.kind !== 'empty',
+            },
+          ]}
+        />
+      </View>
+
+      {tab === 'overview' && (
+        <OverviewTab request={request} copyToClipboard={copyToClipboard} />
+      )}
+      {tab === 'request' && (
+        <BodyViewer
+          body={requestBody}
+          emptyTitle="No request body"
+          emptySubtitle={`${request.method} requests usually carry no payload.`}
+          copyToClipboard={copyToClipboard}
+        />
+      )}
+      {tab === 'response' && (
+        <BodyViewer
+          body={responseBody}
+          loading={loading || request.state === 'pending'}
+          emptyTitle={
+            failed
+              ? `Request ${request.failureReason ?? 'failed'}`
+              : 'No response body'
+          }
+          emptySubtitle={
+            failed
+              ? 'The server never answered, so there is nothing to show.'
+              : undefined
+          }
+          copyToClipboard={copyToClipboard}
+        />
+      )}
+    </View>
+  );
+};
+
+const OverviewTab = ({
+  request,
+  copyToClipboard,
+}: {
+  request: NetworkRequest;
+  copyToClipboard?: (text: string) => void;
+}) => {
+  const theme = useTheme();
+  const query = Object.entries(request.parsedUrl.query);
+
+  const general: [string, string][] = [
+    ['URL', request.url],
+    ['Method', request.method],
+    [
+      'Status',
+      request.state === 'failed'
+        ? `Failed (${request.failureReason ?? 'error'})`
+        : statusLabel(request),
+    ],
+    [
+      'Duration',
+      request.duration >= 0 ? formatDuration(request.duration) : '—',
+    ],
+    ['Started', request.startTime ? formatDateTime(request.startTime) : '—'],
+    [
+      'Response size',
+      request.responseSize > 0 ? formatBytes(request.responseSize) : '—',
+    ],
+    ['Content type', request.responseContentType || '—'],
+  ];
+  if (request.responseURL && request.responseURL !== request.url) {
+    general.push(['Final URL', request.responseURL]);
+  }
+
+  const actions = (text: string) => (
+    <View style={styles.sectionActions}>
+      {copyToClipboard && (
+        <TextButton
+          label="Copy"
+          onPress={() => copyToClipboard(text)}
+          style={styles.smallButton}
+        />
+      )}
+      <TextButton
+        label="Share"
+        onPress={() => share(text)}
+        style={styles.smallButton}
+      />
+    </View>
+  );
+
+  return (
+    <ScrollView
+      contentContainerStyle={styles.overview}
+      keyboardShouldPersistTaps="handled"
+    >
+      <Section title="General">
+        <KeyValueList entries={general} />
+      </Section>
+      {query.length > 0 && (
+        <Section
+          title="Query parameters"
+          right={actions(JSON.stringify(request.parsedUrl.query, null, 2))}
+        >
+          <KeyValueList entries={query} mono />
+        </Section>
+      )}
+      <Section
+        title={`Request headers (${Object.keys(request.requestHeaders).length})`}
+        right={actions(JSON.stringify(request.requestHeaders, null, 2))}
+      >
+        <KeyValueList
+          entries={Object.entries(request.requestHeaders)}
+          mono
+          emptyLabel="No request headers"
+        />
+      </Section>
+      <Section
+        title={`Response headers (${Object.keys(request.responseHeaders).length})`}
+        right={actions(JSON.stringify(request.responseHeaders, null, 2))}
+      >
+        <KeyValueList
+          entries={Object.entries(request.responseHeaders)}
+          mono
+          emptyLabel="No response headers yet"
+        />
+      </Section>
+      <Section title="Export">
+        <View style={styles.exportRow}>
+          <TextButton
+            label="Share as cURL"
+            onPress={() => share(request.curl)}
+            style={styles.exportButton}
+          />
+          <TextButton
+            label="Share full request"
+            onPress={async () =>
+              share(JSON.stringify(await request.toJSON(), null, 2))
+            }
+            style={styles.exportButton}
+          />
+          {copyToClipboard && (
+            <TextButton
+              label="Copy cURL"
+              onPress={() => copyToClipboard(request.curl)}
+              style={styles.exportButton}
+            />
+          )}
+        </View>
+      </Section>
+      <Text style={[styles.footer, { color: theme.colors.textMuted }]}>
+        Request #{request.id}
+      </Text>
+    </ScrollView>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  header: {
+    paddingHorizontal: 12,
+    paddingVertical: 10,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  headerRow: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+  summary: { flex: 1, fontSize: 12, fontVariant: ['tabular-nums'] },
+  url: { fontSize: 14, marginTop: 8, lineHeight: 19 },
+  gql: { fontSize: 12, marginTop: 4, fontWeight: '600' },
+  tabs: { marginTop: 10 },
+  overview: { paddingBottom: 24 },
+  sectionActions: { flexDirection: 'row', gap: 6 },
+  smallButton: { paddingVertical: 3, paddingHorizontal: 8 },
+  exportRow: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 8,
+    paddingVertical: 8,
+  },
+  exportButton: { paddingVertical: 8 },
+  footer: { textAlign: 'center', fontSize: 11, marginTop: 20 },
+});
+
+export default RequestDetails;

package/src/components/RequestList/FilterBar.tsx

@@ -0,0 +1,168 @@
+import React from 'react';
+import { ScrollView, StyleSheet, Text, View } from 'react-native';
+import { methodColor, statusColor, useTheme } from '../../theme';
+import type { StatusGroup } from '../../types';
+import { TextButton } from '../ui';
+import {
+  STATUS_GROUPS,
+  isFilterActive,
+  toggleHost,
+  toggleMethod,
+  toggleStatusGroup,
+  type RequestFilter,
+} from './filters';
+
+interface Props {
+  filter: RequestFilter;
+  onChange: (filter: RequestFilter) => void;
+  methods: string[];
+  hosts: string[];
+  onClear: () => void;
+}
+
+const statusGroupColor = (
+  theme: ReturnType<typeof useTheme>,
+  group: StatusGroup
+) => {
+  switch (group) {
+    case '2xx':
+      return statusColor(theme, 200);
+    case '3xx':
+      return statusColor(theme, 300);
+    case '4xx':
+      return statusColor(theme, 400);
+    case '5xx':
+      return statusColor(theme, 500);
+    case 'failed':
+      return theme.colors.statusBad;
+    default:
+      return theme.colors.statusPending;
+  }
+};
+
+const Chip = ({
+  label,
+  selected,
+  color,
+  onPress,
+}: {
+  label: string;
+  selected: boolean;
+  color: string;
+  onPress: () => void;
+}) => (
+  <TextButton
+    label={label}
+    onPress={onPress}
+    active={selected}
+    style={[styles.chip, selected && { backgroundColor: color }]}
+    textStyle={!selected ? { color } : undefined}
+  />
+);
+
+const FilterBar = ({ filter, onChange, methods, hosts, onClear }: Props) => {
+  const theme = useTheme();
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          borderBottomColor: theme.colors.border,
+          backgroundColor: theme.colors.surface,
+        },
+      ]}
+    >
+      <Row label="Method">
+        {methods.map((method) => (
+          <Chip
+            key={method}
+            label={method}
+            selected={filter.methods.has(method)}
+            color={methodColor(theme, method)}
+            onPress={() => onChange(toggleMethod(filter, method))}
+          />
+        ))}
+      </Row>
+      <Row label="Status">
+        {STATUS_GROUPS.map((group) => (
+          <Chip
+            key={group}
+            label={group}
+            selected={filter.statusGroups.has(group)}
+            color={statusGroupColor(theme, group)}
+            onPress={() => onChange(toggleStatusGroup(filter, group))}
+          />
+        ))}
+      </Row>
+      {hosts.length > 1 && (
+        <Row label="Host">
+          {hosts.map((host) => (
+            <Chip
+              key={host || '(none)'}
+              label={host || '(none)'}
+              selected={filter.hosts.has(host)}
+              color={theme.colors.primary}
+              onPress={() => onChange(toggleHost(filter, host))}
+            />
+          ))}
+        </Row>
+      )}
+      {isFilterActive(filter) && (
+        <TextButton
+          label="Clear filters"
+          onPress={onClear}
+          style={styles.clear}
+        />
+      )}
+    </View>
+  );
+};
+
+const Row = ({
+  label,
+  children,
+}: {
+  label: string;
+  children: React.ReactNode;
+}) => {
+  const theme = useTheme();
+  return (
+    <View style={styles.row}>
+      <Text style={[styles.rowLabel, { color: theme.colors.textMuted }]}>
+        {label}
+      </Text>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.chips}
+      >
+        {children}
+      </ScrollView>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 6,
+    borderBottomWidth: StyleSheet.hairlineWidth,
+  },
+  row: { flexDirection: 'row', alignItems: 'center', paddingVertical: 3 },
+  rowLabel: {
+    width: 64,
+    fontSize: 11,
+    fontWeight: '700',
+    paddingLeft: 12,
+    letterSpacing: 0.5,
+  },
+  chips: { paddingRight: 12, gap: 6 },
+  chip: { paddingVertical: 4, paddingHorizontal: 10 },
+  clear: {
+    alignSelf: 'flex-end',
+    marginRight: 12,
+    marginTop: 4,
+    paddingVertical: 4,
+  },
+});
+
+export default FilterBar;