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

package/src/components/BodyViewer.tsx

@@ -0,0 +1,250 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { ActivityIndicator, Share, StyleSheet, Text, View } from 'react-native';
+import { useTheme } from '../theme';
+import type { ParsedBody } from '../types';
+import { bodySize, stringifyJson } from '../utils/body';
+import { formatBytes } from '../utils/format';
+import JsonTreeView, { type JsonTreeHandle } from './JsonTree/JsonTreeView';
+import RawTextView from './RawTextView';
+import {
+  ActionSheet,
+  EmptyState,
+  SearchInput,
+  SegmentedControl,
+  TextButton,
+} from './ui';
+
+type ViewMode = 'tree' | 'raw';
+
+interface Props {
+  body: ParsedBody | undefined;
+  loading?: boolean;
+  emptyTitle: string;
+  emptySubtitle?: string;
+  copyToClipboard?: (text: string) => void;
+}
+
+const KIND_LABEL: Record<ParsedBody['kind'], string> = {
+  json: 'JSON',
+  form: 'Form data',
+  text: 'Text',
+  binary: 'Binary',
+  empty: 'Empty',
+};
+
+const share = (text: string) =>
+  Share.share({ message: text }).catch(() => undefined);
+const valueText = (value: unknown) =>
+  typeof value === 'string' ? value : stringifyJson(value);
+
+/**
+ * Payload viewer used by the Request and Response tabs. Structured bodies can
+ * be shown as a collapsible tree or as pretty-printed raw text; both keep lines
+ * unwrapped, scroll horizontally and support search with next/previous.
+ */
+const BodyViewer = ({
+  body,
+  loading,
+  emptyTitle,
+  emptySubtitle,
+  copyToClipboard,
+}: Props) => {
+  const theme = useTheme();
+  const structured = body?.kind === 'json' || body?.kind === 'form';
+  const [mode, setMode] = useState<ViewMode>('tree');
+  const [query, setQuery] = useState('');
+  const [matchCount, setMatchCount] = useState(0);
+  const [matchIndex, setMatchIndex] = useState(0);
+  const [nodeMenu, setNodeMenu] = useState<{
+    path: string;
+    value: unknown;
+  } | null>(null);
+  const treeRef = useRef<JsonTreeHandle>(null);
+
+  const effectiveMode: ViewMode = structured ? mode : 'raw';
+
+  useEffect(() => setMatchIndex(0), [query, effectiveMode, body]);
+
+  const onMatchCountChange = useCallback((count: number) => {
+    setMatchCount(count);
+    setMatchIndex((index) => (count === 0 ? 0 : Math.min(index, count - 1)));
+  }, []);
+
+  const matches = {
+    count: matchCount,
+    index: matchIndex,
+    onNext: () => matchCount && setMatchIndex((i) => (i + 1) % matchCount),
+    onPrev: () =>
+      matchCount && setMatchIndex((i) => (i - 1 + matchCount) % matchCount),
+  };
+
+  const meta = useMemo(() => {
+    if (!body || body.kind === 'empty') return '';
+    const parts = [KIND_LABEL[body.kind]];
+    if (body.kind === 'binary' && body.mimeType) parts.push(body.mimeType);
+    const size = bodySize(body);
+    if (size) parts.push(formatBytes(size));
+    if (body.kind !== 'binary')
+      parts.push(`${body.text.split('\n').length} lines`);
+    return parts.join(' · ');
+  }, [body]);
+
+  if (loading) {
+    return (
+      <View style={styles.center}>
+        <ActivityIndicator color={theme.colors.primary} />
+      </View>
+    );
+  }
+  if (!body || body.kind === 'empty') {
+    return <EmptyState title={emptyTitle} subtitle={emptySubtitle} />;
+  }
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.toolbar}>
+        {structured ? (
+          <SegmentedControl<ViewMode>
+            value={effectiveMode}
+            onChange={setMode}
+            options={[
+              { value: 'tree', label: 'Tree' },
+              { value: 'raw', label: 'Raw' },
+            ]}
+            style={styles.modeSwitch}
+          />
+        ) : (
+          <Text
+            style={[styles.meta, { color: theme.colors.textMuted }]}
+            numberOfLines={1}
+          >
+            {meta}
+          </Text>
+        )}
+        <View style={styles.spacer} />
+        {effectiveMode === 'tree' && (
+          <>
+            <TextButton
+              label="Expand"
+              onPress={() => treeRef.current?.expandAll()}
+              style={styles.toolButton}
+            />
+            <TextButton
+              label="Collapse"
+              onPress={() => treeRef.current?.collapseAll()}
+              style={styles.toolButton}
+            />
+          </>
+        )}
+        {copyToClipboard && body.kind !== 'binary' && (
+          <TextButton
+            label="Copy"
+            onPress={() => copyToClipboard(body.text)}
+            style={styles.toolButton}
+          />
+        )}
+        <TextButton
+          label="Share"
+          onPress={() => share(body.text)}
+          style={styles.toolButton}
+        />
+      </View>
+      {body.kind !== 'binary' && (
+        <SearchInput
+          value={query}
+          onChangeText={setQuery}
+          placeholder={
+            effectiveMode === 'tree' ? 'Search keys and values' : 'Search text'
+          }
+          matches={matches}
+          style={styles.search}
+        />
+      )}
+      {structured && (
+        <Text
+          style={[
+            styles.meta,
+            styles.metaBelow,
+            { color: theme.colors.textMuted },
+          ]}
+          numberOfLines={1}
+        >
+          {meta}
+        </Text>
+      )}
+      <View style={[styles.viewer, { borderColor: theme.colors.border }]}>
+        {body.kind === 'binary' ? (
+          <EmptyState title="Binary content" subtitle={body.text} />
+        ) : effectiveMode === 'tree' && structured ? (
+          <JsonTreeView
+            ref={treeRef}
+            value={body.value}
+            query={query}
+            activeMatch={matchIndex}
+            onMatchCountChange={onMatchCountChange}
+            onLongPressNode={setNodeMenu}
+          />
+        ) : (
+          <RawTextView
+            text={body.text}
+            query={query}
+            activeMatch={matchIndex}
+            onMatchCountChange={onMatchCountChange}
+          />
+        )}
+      </View>
+      <ActionSheet
+        visible={nodeMenu !== null}
+        onClose={() => setNodeMenu(null)}
+        title={nodeMenu?.path}
+        actions={
+          nodeMenu
+            ? [
+                ...(copyToClipboard
+                  ? [
+                      {
+                        label: 'Copy value',
+                        onPress: () =>
+                          copyToClipboard(valueText(nodeMenu.value)),
+                      },
+                    ]
+                  : []),
+                {
+                  label: 'Share value',
+                  onPress: () => share(valueText(nodeMenu.value)),
+                },
+                ...(copyToClipboard
+                  ? [
+                      {
+                        label: 'Copy path',
+                        onPress: () => copyToClipboard(nodeMenu.path),
+                      },
+                    ]
+                  : []),
+              ]
+            : []
+        }
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  center: { flex: 1, alignItems: 'center', justifyContent: 'center' },
+  toolbar: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 12,
+    paddingTop: 10,
+  },
+  modeSwitch: { width: 130 },
+  toolButton: { marginLeft: 6 },
+  spacer: { flex: 1 },
+  search: { marginHorizontal: 12, marginTop: 8 },
+  meta: { fontSize: 12, flexShrink: 1 },
+  metaBelow: { paddingHorizontal: 14, paddingTop: 6 },
+  viewer: { flex: 1, marginTop: 8, borderTopWidth: StyleSheet.hairlineWidth },
+});
+
+export default BodyViewer;

package/src/components/CodeList.tsx

@@ -0,0 +1,120 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  FlatList,
+  ScrollView,
+  StyleSheet,
+  View,
+  type ListRenderItem,
+} from 'react-native';
+import { useTheme } from '../theme';
+
+interface Props<T> {
+  data: T[];
+  renderItem: ListRenderItem<T>;
+  keyExtractor: (item: T, index: number) => string;
+  /** Estimated width of the widest row, in px. */
+  contentWidth: number;
+  rowHeight: number;
+  /** Row index that should be scrolled into view (e.g. the active search match). */
+  activeIndex?: number;
+  extraData?: unknown;
+}
+
+/**
+ * A vertical FlatList inside a horizontal ScrollView. Rows are fixed height and
+ * never wrap, so long JSON lines stay on one line and can be panned sideways,
+ * just like a code editor. We measure the container once and size the inner
+ * list explicitly, which keeps both scroll axes stable while rows virtualise.
+ */
+export function CodeList<T>({
+  data,
+  renderItem,
+  keyExtractor,
+  contentWidth,
+  rowHeight,
+  activeIndex,
+  extraData,
+}: Props<T>) {
+  const theme = useTheme();
+  const listRef = useRef<FlatList<T>>(null);
+  const [layout, setLayout] = useState({ width: 0, height: 0 });
+
+  const getItemLayout = useCallback(
+    (_: ArrayLike<T> | null | undefined, index: number) => ({
+      length: rowHeight,
+      offset: rowHeight * index,
+      index,
+    }),
+    [rowHeight]
+  );
+
+  useEffect(() => {
+    if (
+      activeIndex === undefined ||
+      activeIndex < 0 ||
+      activeIndex >= data.length
+    )
+      return;
+    // Defer so a freshly expanded tree has rendered before we scroll.
+    const handle = setTimeout(() => {
+      listRef.current?.scrollToIndex({
+        index: activeIndex,
+        viewPosition: 0.3,
+        animated: true,
+      });
+    }, 16);
+    return () => clearTimeout(handle);
+  }, [activeIndex, data.length]);
+
+  const width = Math.max(contentWidth, layout.width);
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: theme.colors.surface }]}
+      onLayout={(event) => {
+        const { width: w, height: h } = event.nativeEvent.layout;
+        setLayout((prev) =>
+          prev.width === w && prev.height === h ? prev : { width: w, height: h }
+        );
+      }}
+    >
+      {layout.height > 0 && (
+        <ScrollView
+          horizontal
+          bounces={false}
+          showsHorizontalScrollIndicator
+          nestedScrollEnabled
+          keyboardShouldPersistTaps="handled"
+        >
+          <FlatList
+            ref={listRef}
+            data={data}
+            extraData={extraData}
+            renderItem={renderItem}
+            keyExtractor={keyExtractor}
+            getItemLayout={getItemLayout}
+            nestedScrollEnabled
+            keyboardShouldPersistTaps="handled"
+            initialNumToRender={30}
+            maxToRenderPerBatch={40}
+            windowSize={9}
+            removeClippedSubviews={false}
+            onScrollToIndexFailed={({ index }) => {
+              listRef.current?.scrollToOffset({
+                offset: index * rowHeight,
+                animated: false,
+              });
+            }}
+            style={{ width, height: layout.height }}
+            contentContainerStyle={styles.content}
+          />
+        </ScrollView>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1 },
+  content: { paddingVertical: 6 },
+});

package/src/components/JsonTree/JsonTreeView.tsx

@@ -0,0 +1,304 @@
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useState,
+} from 'react';
+import { Pressable, StyleSheet, Text } from 'react-native';
+import { useTheme, type Theme } from '../../theme';
+import { splitHighlights } from '../../utils/search';
+import { CodeList } from '../CodeList';
+import {
+  MAX_VALUE_CHARS,
+  ROOT_PATH,
+  allPaths,
+  collapsedPreview,
+  displayValue,
+  flattenJson,
+  pathsToDepth,
+  rowCharCount,
+  searchJson,
+  subtreePaths,
+  type JsonRow,
+} from './model';
+
+export interface JsonTreeHandle {
+  expandAll: () => void;
+  collapseAll: () => void;
+}
+
+interface Props {
+  value: unknown;
+  /** Search query; matching keys/values are highlighted and auto-expanded. */
+  query?: string;
+  /** Index into the ordered list of matches that should be focused. */
+  activeMatch?: number;
+  onMatchCountChange?: (count: number) => void;
+  onLongPressNode?: (info: { path: string; value: unknown }) => void;
+  /** How many levels to open initially. @default 1 */
+  initialDepth?: number;
+}
+
+const INDENT = 16;
+const INDENT_CHARS = 2;
+
+const JsonTreeView = forwardRef<JsonTreeHandle, Props>(
+  function JsonTreeViewInner(
+    {
+      value,
+      query = '',
+      activeMatch = 0,
+      onMatchCountChange,
+      onLongPressNode,
+      initialDepth = 1,
+    },
+    ref
+  ) {
+    const theme = useTheme();
+    const [expanded, setExpanded] = useState<Set<string>>(() =>
+      pathsToDepth(value, initialDepth)
+    );
+
+    // Reset when a different value is shown.
+    useEffect(() => {
+      setExpanded(pathsToDepth(value, initialDepth));
+    }, [value, initialDepth]);
+
+    const hits = useMemo(() => searchJson(value, query), [value, query]);
+    const matchedPaths = useMemo(
+      () => new Set(hits.map((hit) => hit.path)),
+      [hits]
+    );
+
+    useEffect(() => {
+      onMatchCountChange?.(hits.length);
+    }, [hits.length, onMatchCountChange]);
+
+    // Make every hit reachable by expanding its ancestors.
+    useEffect(() => {
+      if (hits.length === 0) return;
+      setExpanded((prev) => {
+        let changed = false;
+        const next = new Set(prev);
+        for (const hit of hits) {
+          for (const ancestor of hit.ancestors) {
+            if (!next.has(ancestor)) {
+              next.add(ancestor);
+              changed = true;
+            }
+          }
+        }
+        return changed ? next : prev;
+      });
+    }, [hits]);
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        expandAll: () => setExpanded(allPaths(value)),
+        collapseAll: () => setExpanded(new Set([ROOT_PATH])),
+      }),
+      [value]
+    );
+
+    const rows = useMemo(() => flattenJson(value, expanded), [value, expanded]);
+
+    const activePath =
+      hits[Math.min(activeMatch, Math.max(hits.length - 1, 0))]?.path;
+    const activeIndex = useMemo(
+      () =>
+        activePath ? rows.findIndex((row) => row.path === activePath) : -1,
+      [rows, activePath]
+    );
+
+    const contentWidth = useMemo(() => {
+      let maxChars = 0;
+      for (const row of rows)
+        maxChars = Math.max(maxChars, rowCharCount(row, INDENT_CHARS));
+      return maxChars * theme.sizes.codeFontSize * 0.62 + 40;
+    }, [rows, theme.sizes.codeFontSize]);
+
+    const toggle = useCallback((row: JsonRow) => {
+      setExpanded((prev) => {
+        const next = new Set(prev);
+        if (next.has(row.path)) {
+          // Collapse the whole subtree so re-opening starts clean.
+          for (const path of subtreePaths(row.value, row.path))
+            next.delete(path);
+        } else {
+          next.add(row.path);
+        }
+        return next;
+      });
+    }, []);
+
+    const rowHeight = theme.sizes.codeLineHeight + 4;
+
+    const renderItem = useCallback(
+      ({ item }: { item: JsonRow }) => (
+        <TreeRow
+          row={item}
+          theme={theme}
+          query={query}
+          matched={matchedPaths.has(item.path)}
+          active={item.path === activePath}
+          onToggle={toggle}
+          onLongPress={onLongPressNode}
+          height={rowHeight}
+        />
+      ),
+      [
+        theme,
+        query,
+        matchedPaths,
+        activePath,
+        toggle,
+        onLongPressNode,
+        rowHeight,
+      ]
+    );
+
+    return (
+      <CodeList
+        data={rows}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        contentWidth={contentWidth}
+        rowHeight={rowHeight}
+        activeIndex={activeIndex >= 0 ? activeIndex : undefined}
+        extraData={`${query}:${activePath ?? ''}`}
+      />
+    );
+  }
+);
+
+const keyExtractor = (row: JsonRow) => row.path;
+
+const TreeRow = memo(function TreeRowInner({
+  row,
+  theme,
+  query,
+  matched,
+  active,
+  onToggle,
+  onLongPress,
+  height,
+}: {
+  row: JsonRow;
+  theme: Theme;
+  query: string;
+  matched: boolean;
+  active: boolean;
+  onToggle: (row: JsonRow) => void;
+  onLongPress?: (info: { path: string; value: unknown }) => void;
+  height: number;
+}) {
+  const codeStyle = {
+    fontFamily: theme.fonts.mono,
+    fontSize: theme.sizes.codeFontSize,
+    lineHeight: theme.sizes.codeLineHeight,
+  };
+  const valueColor = (() => {
+    switch (row.type) {
+      case 'string':
+        return theme.colors.jsonString;
+      case 'number':
+        return theme.colors.jsonNumber;
+      case 'boolean':
+        return theme.colors.jsonBoolean;
+      case 'null':
+      case 'undefined':
+        return theme.colors.jsonNull;
+      default:
+        return theme.colors.textMuted;
+    }
+  })();
+
+  let valueText: string;
+  if (row.expandable) {
+    valueText = row.expanded
+      ? row.type === 'array'
+        ? `Array(${row.childCount})`
+        : `Object (${row.childCount})`
+      : collapsedPreview(row.value);
+  } else {
+    const full = displayValue(row.value);
+    valueText =
+      full.length > MAX_VALUE_CHARS
+        ? `${full.slice(0, MAX_VALUE_CHARS)}… (+${full.length - MAX_VALUE_CHARS})`
+        : full;
+  }
+
+  const highlightStyle = {
+    backgroundColor: active
+      ? theme.colors.highlightActive
+      : theme.colors.highlight,
+    color: theme.colors.onHighlight,
+  };
+
+  const renderHighlighted = (text: string, color: string) =>
+    matched && query
+      ? splitHighlights(text, query).map((segment, index) => (
+          <Text
+            key={index}
+            style={segment.highlighted ? highlightStyle : { color }}
+          >
+            {segment.text}
+          </Text>
+        ))
+      : text;
+
+  const rowBackground = active
+    ? { backgroundColor: `${theme.colors.highlightActive}33` }
+    : matched
+      ? { backgroundColor: `${theme.colors.highlight}55` }
+      : null;
+
+  return (
+    <Pressable
+      onPress={row.expandable ? () => onToggle(row) : undefined}
+      onLongPress={
+        onLongPress
+          ? () => onLongPress({ path: row.path, value: row.value })
+          : undefined
+      }
+      delayLongPress={350}
+      accessibilityRole={row.expandable ? 'button' : 'text'}
+      accessibilityState={
+        row.expandable ? { expanded: row.expanded } : undefined
+      }
+      style={[
+        styles.row,
+        { height, paddingLeft: 8 + row.depth * INDENT },
+        rowBackground,
+      ]}
+    >
+      <Text
+        style={[styles.arrow, codeStyle, { color: theme.colors.textMuted }]}
+      >
+        {row.expandable ? (row.expanded ? '▾' : '▸') : ' '}
+      </Text>
+      <Text numberOfLines={1} style={[codeStyle, { color: theme.colors.text }]}>
+        {row.key !== null && (
+          <Text style={{ color: theme.colors.jsonKey }}>
+            {renderHighlighted(row.key, theme.colors.jsonKey)}
+            <Text style={{ color: theme.colors.textMuted }}>: </Text>
+          </Text>
+        )}
+        <Text style={{ color: valueColor }}>
+          {renderHighlighted(valueText, valueColor)}
+        </Text>
+      </Text>
+    </Pressable>
+  );
+});
+
+const styles = StyleSheet.create({
+  row: { flexDirection: 'row', alignItems: 'center', paddingRight: 16 },
+  arrow: { width: 16, textAlign: 'center' },
+});
+
+export default JsonTreeView;