rn-backstage 1.4.0 → 1.4.2

package/src/components/NetworkItem.tsx

@@ -0,0 +1,425 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { MonospaceFont } from '../constants'
+import { useBackstageTheme } from '../ThemeContext'
+import { NetworkState } from '../types'
+import type { NetworkEntry, BackstageTheme } from '../types'
+import { formatTimestamp } from '../utils/formatTimestamp'
+import { JsonTreeView } from './JsonTreeView'
+import { toCurl } from '../network-interceptor'
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface NetworkItemProps {
+  item: NetworkEntry
+  onCopy?: (text: string) => void
+  jsonMaxDepth?: number
+}
+
+// ─── Status Badge Config ─────────────────────────────────────────────────────
+
+function getStatusConfig(
+  entry: NetworkEntry,
+  t: BackstageTheme,
+): { label: string; color: string; bgColor: string; rowBg: string } {
+  if (entry.state === NetworkState.pending) {
+    return { label: '…', color: t.warning, bgColor: t.warningDim, rowBg: 'transparent' }
+  }
+  if (entry.state === NetworkState.error) {
+    return { label: 'ERR', color: t.error, bgColor: t.errorDim, rowBg: 'rgba(255, 77, 106, 0.06)' }
+  }
+
+  const status = entry.status ?? 0
+
+  if (status >= 200 && status < 300) {
+    return {
+      label: String(status),
+      color: t.success,
+      bgColor: 'rgba(52, 211, 153, 0.12)',
+      rowBg: 'transparent',
+    }
+  }
+  if (status >= 300 && status < 400) {
+    return { label: String(status), color: t.info, bgColor: t.infoDim, rowBg: 'transparent' }
+  }
+  if (status >= 400 && status < 500) {
+    return {
+      label: String(status),
+      color: t.warning,
+      bgColor: t.warningDim,
+      rowBg: 'rgba(255, 178, 36, 0.06)',
+    }
+  }
+  // 5xx
+  return {
+    label: String(status),
+    color: t.error,
+    bgColor: t.errorDim,
+    rowBg: 'rgba(255, 77, 106, 0.06)',
+  }
+}
+
+// ─── Method Badge Colors ─────────────────────────────────────────────────────
+
+function getMethodColor(method: string, t: BackstageTheme): string {
+  switch (method) {
+    case 'GET':
+      return t.success
+    case 'POST':
+      return t.info
+    case 'PUT':
+    case 'PATCH':
+      return t.warning
+    case 'DELETE':
+      return t.error
+    default:
+      return t.textSecondary
+  }
+}
+
+// ─── URL Helpers ─────────────────────────────────────────────────────────────
+
+function extractPath(url: string): string {
+  try {
+    const parsed = new URL(url)
+    const path = parsed.pathname + parsed.search
+    return path.length > 60 ? path.substring(0, 57) + '...' : path
+  } catch {
+    return url.length > 60 ? url.substring(0, 57) + '...' : url
+  }
+}
+
+function extractHost(url: string): string {
+  try {
+    return new URL(url).host
+  } catch {
+    return ''
+  }
+}
+
+// ─── Format Duration ─────────────────────────────────────────────────────────
+
+function formatDuration(ms?: number): string {
+  if (ms === undefined) return '—'
+  if (ms < 1000) return `${ms}ms`
+  return `${(ms / 1000).toFixed(2)}s`
+}
+
+function formatSize(bytes?: number): string {
+  if (bytes === undefined) return ''
+  if (bytes < 1024) return `${bytes}B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)}KB`
+  return `${(bytes / (1024 * 1024)).toFixed(2)}MB`
+}
+
+// ─── Try Parse JSON ──────────────────────────────────────────────────────────
+
+function tryParseJSON(text?: string): unknown | null {
+  if (!text) return null
+  try {
+    return JSON.parse(text)
+  } catch {
+    return null
+  }
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export const NetworkItem: React.FC<NetworkItemProps> = React.memo(
+  ({ item, onCopy, jsonMaxDepth }) => {
+    const theme = useBackstageTheme()
+    const s = useMemo(() => createStyles(theme), [theme])
+    const [expanded, setExpanded] = useState(false)
+    const [detailSection, setDetailSection] = useState<'general' | 'request' | 'response'>(
+      'general',
+    )
+
+    const config = getStatusConfig(item, theme)
+    const methodColor = getMethodColor(item.method, theme)
+    const isPending = item.state === NetworkState.pending
+
+    const toggleExpand = useCallback(() => {
+      setExpanded(prev => !prev)
+    }, [])
+
+    const handleCopyCurl = useCallback(() => {
+      if (onCopy) {
+        onCopy(toCurl(item))
+      }
+    }, [item, onCopy])
+
+    // ─── Detail Row (inline) ─────────────────────────────────
+    const renderDetailRow = (
+      label: string,
+      value: string,
+      selectable?: boolean,
+      isError?: boolean,
+    ) => (
+      <View style={s.detailRow}>
+        <Text style={s.detailLabel}>{label}</Text>
+        <Text
+          style={[s.detailValue, isError && { color: theme.error }]}
+          numberOfLines={3}
+          selectable={selectable}
+        >
+          {value}
+        </Text>
+      </View>
+    )
+
+    return (
+      <TouchableOpacity
+        style={[s.container, { backgroundColor: config.rowBg }]}
+        onPress={toggleExpand}
+        onLongPress={handleCopyCurl}
+        activeOpacity={0.7}
+      >
+        {/* ── Collapsed Row ─────────────────────────────────────── */}
+        <View style={s.headerRow}>
+          <View style={[s.methodBadge, { borderColor: methodColor }]}>
+            <Text style={[s.methodText, { color: methodColor }]}>{item.method}</Text>
+          </View>
+          <View style={[s.statusBadge, { backgroundColor: config.bgColor }]}>
+            <Text style={[s.statusText, { color: config.color }]}>{config.label}</Text>
+          </View>
+          {!isPending && <Text style={s.duration}>{formatDuration(item.duration)}</Text>}
+          {isPending && <Text style={[s.duration, { color: theme.warning }]}>pending</Text>}
+          {item.responseSize !== undefined && (
+            <Text style={s.size}>{formatSize(item.responseSize)}</Text>
+          )}
+          <Text style={s.timestamp}>{formatTimestamp(item.startTime)}</Text>
+        </View>
+
+        <Text style={s.path} numberOfLines={expanded ? undefined : 1}>
+          {extractPath(item.url)}
+        </Text>
+        <Text style={s.host} numberOfLines={1}>
+          {extractHost(item.url)}
+        </Text>
+
+        {item.error && (
+          <Text style={s.errorText} numberOfLines={expanded ? undefined : 1}>
+            ✕ {item.error}
+          </Text>
+        )}
+
+        {/* ── Expanded Detail ───────────────────────────────────── */}
+        {expanded && (
+          <View style={s.detailContainer}>
+            <View style={s.sectionTabs}>
+              {(['general', 'request', 'response'] as const).map(section => (
+                <TouchableOpacity
+                  key={section}
+                  style={[s.sectionTab, detailSection === section && s.sectionTabActive]}
+                  onPress={() => setDetailSection(section)}
+                >
+                  <Text
+                    style={[s.sectionTabText, detailSection === section && s.sectionTabTextActive]}
+                  >
+                    {section.charAt(0).toUpperCase() + section.slice(1)}
+                  </Text>
+                </TouchableOpacity>
+              ))}
+            </View>
+
+            {detailSection === 'general' && (
+              <View style={s.sectionContent}>
+                {renderDetailRow('Method', item.method)}
+                {renderDetailRow('URL', item.url, true)}
+                {renderDetailRow(
+                  'Status',
+                  item.status ? `${item.status} ${item.statusText || ''}` : '—',
+                )}
+                {renderDetailRow('Duration', formatDuration(item.duration))}
+                {item.responseSize !== undefined &&
+                  renderDetailRow('Size', formatSize(item.responseSize))}
+                {item.error && renderDetailRow('Error', item.error, false, true)}
+              </View>
+            )}
+
+            {detailSection === 'request' && (
+              <View style={s.sectionContent}>
+                {item.requestHeaders && Object.keys(item.requestHeaders).length > 0 ? (
+                  <>
+                    <Text style={s.subsectionTitle}>HEADERS</Text>
+                    <View style={s.jsonContainer}>
+                      <JsonTreeView data={item.requestHeaders} hideRoot maxDepth={jsonMaxDepth} />
+                    </View>
+                  </>
+                ) : (
+                  <Text style={s.emptyNote}>No request headers captured</Text>
+                )}
+                {item.requestBody ? (
+                  <>
+                    <Text style={s.subsectionTitle}>BODY</Text>
+                    {tryParseJSON(item.requestBody) ? (
+                      <View style={s.jsonContainer}>
+                        <JsonTreeView
+                          data={tryParseJSON(item.requestBody)}
+                          hideRoot
+                          maxDepth={jsonMaxDepth}
+                        />
+                      </View>
+                    ) : (
+                      <Text style={s.bodyText} selectable>
+                        {item.requestBody}
+                      </Text>
+                    )}
+                  </>
+                ) : null}
+              </View>
+            )}
+
+            {detailSection === 'response' && (
+              <View style={s.sectionContent}>
+                {item.responseHeaders && Object.keys(item.responseHeaders).length > 0 ? (
+                  <>
+                    <Text style={s.subsectionTitle}>HEADERS</Text>
+                    <View style={s.jsonContainer}>
+                      <JsonTreeView data={item.responseHeaders} hideRoot maxDepth={jsonMaxDepth} />
+                    </View>
+                  </>
+                ) : (
+                  <Text style={s.emptyNote}>No response headers captured</Text>
+                )}
+                {item.responseBody ? (
+                  <>
+                    <Text style={s.subsectionTitle}>BODY</Text>
+                    {tryParseJSON(item.responseBody) ? (
+                      <View style={s.jsonContainer}>
+                        <JsonTreeView
+                          data={tryParseJSON(item.responseBody)}
+                          hideRoot
+                          maxDepth={jsonMaxDepth}
+                        />
+                      </View>
+                    ) : (
+                      <Text style={s.bodyText} selectable>
+                        {item.responseBody}
+                      </Text>
+                    )}
+                  </>
+                ) : (
+                  <Text style={s.emptyNote}>
+                    {isPending ? 'Awaiting response…' : 'No response body'}
+                  </Text>
+                )}
+              </View>
+            )}
+
+            {onCopy && (
+              <TouchableOpacity style={s.curlButton} onPress={handleCopyCurl} activeOpacity={0.7}>
+                <Text style={s.curlButtonText}>⧉ Copy as cURL</Text>
+              </TouchableOpacity>
+            )}
+          </View>
+        )}
+
+        {!expanded && <Text style={s.expandHint}>tap to inspect ▾</Text>}
+      </TouchableOpacity>
+    )
+  },
+)
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+const createStyles = (t: BackstageTheme) =>
+  StyleSheet.create({
+    container: {
+      paddingHorizontal: 14,
+      paddingVertical: 10,
+      borderBottomWidth: 1,
+      borderBottomColor: t.border,
+    },
+    headerRow: { flexDirection: 'row', alignItems: 'center', marginBottom: 4, gap: 6 },
+    methodBadge: { borderRadius: 4, borderWidth: 1, paddingHorizontal: 6, paddingVertical: 1 },
+    methodText: { fontFamily: MonospaceFont, fontSize: 10, fontWeight: '800', letterSpacing: 0.5 },
+    statusBadge: { borderRadius: 4, paddingHorizontal: 6, paddingVertical: 2 },
+    statusText: { fontFamily: MonospaceFont, fontSize: 10, fontWeight: '800', letterSpacing: 0.5 },
+    duration: { fontFamily: MonospaceFont, fontSize: 11, color: t.textMuted },
+    size: { fontFamily: MonospaceFont, fontSize: 10, color: t.textMuted, opacity: 0.7 },
+    timestamp: { fontFamily: MonospaceFont, fontSize: 10, color: t.textMuted, marginLeft: 'auto' },
+    path: { fontFamily: MonospaceFont, fontSize: 12, color: t.text, lineHeight: 18 },
+    host: { fontFamily: MonospaceFont, fontSize: 10, color: t.textMuted, marginTop: 1 },
+    errorText: { fontFamily: MonospaceFont, fontSize: 11, color: t.error, marginTop: 4 },
+    expandHint: {
+      fontFamily: MonospaceFont,
+      fontSize: 10,
+      color: t.textMuted,
+      marginTop: 4,
+      fontStyle: 'italic',
+    },
+    detailContainer: {
+      marginTop: 10,
+      paddingTop: 10,
+      borderTopWidth: 1,
+      borderTopColor: t.border,
+    },
+    sectionTabs: { flexDirection: 'row', gap: 4, marginBottom: 10 },
+    sectionTab: {
+      paddingHorizontal: 12,
+      paddingVertical: 6,
+      borderRadius: 6,
+      backgroundColor: t.surfaceElevated,
+      borderWidth: 1,
+      borderColor: t.border,
+    },
+    sectionTabActive: { backgroundColor: t.accentDim, borderColor: t.accent },
+    sectionTabText: {
+      fontFamily: MonospaceFont,
+      fontSize: 11,
+      fontWeight: '600',
+      color: t.textMuted,
+    },
+    sectionTabTextActive: { color: t.accent },
+    sectionContent: { marginBottom: 8 },
+    subsectionTitle: {
+      fontFamily: MonospaceFont,
+      fontSize: 10,
+      fontWeight: '700',
+      color: t.textMuted,
+      letterSpacing: 1.2,
+      marginBottom: 6,
+      marginTop: 8,
+    },
+    jsonContainer: {
+      backgroundColor: t.surfaceElevated,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: t.border,
+      padding: 8,
+    },
+    bodyText: {
+      fontFamily: MonospaceFont,
+      fontSize: 11,
+      color: t.text,
+      lineHeight: 16,
+      backgroundColor: t.surfaceElevated,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: t.border,
+      padding: 8,
+      overflow: 'hidden',
+    },
+    emptyNote: {
+      fontFamily: MonospaceFont,
+      fontSize: 11,
+      color: t.textMuted,
+      fontStyle: 'italic',
+      paddingVertical: 8,
+    },
+    detailRow: { flexDirection: 'row', paddingVertical: 4 },
+    detailLabel: { fontFamily: MonospaceFont, fontSize: 11, color: t.textMuted, width: 70 },
+    detailValue: { fontFamily: MonospaceFont, fontSize: 11, color: t.text, flex: 1 },
+    curlButton: {
+      marginTop: 10,
+      backgroundColor: t.accentDim,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: t.accent,
+      paddingVertical: 8,
+      paddingHorizontal: 14,
+      alignSelf: 'flex-start',
+    },
+    curlButtonText: { fontFamily: MonospaceFont, fontSize: 12, fontWeight: '700', color: t.accent },
+  })

package/src/components/NetworkTab.tsx

@@ -0,0 +1,239 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import { FlatList, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
+import { MonospaceFont, TestIDs } from '../constants'
+import { useBackstageTheme } from '../ThemeContext'
+import { NetworkState } from '../types'
+import type { NetworkEntry, BackstageTheme } from '../types'
+import { NetworkItem } from './NetworkItem'
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface NetworkTabProps {
+  entries: NetworkEntry[]
+  onRefresh: () => void
+  onClear: () => void
+  onCopy?: (text: string) => void
+  jsonMaxDepth?: number
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export const NetworkTab: React.FC<NetworkTabProps> = ({
+  entries,
+  onRefresh,
+  onClear,
+  onCopy,
+  jsonMaxDepth,
+}) => {
+  const theme = useBackstageTheme()
+  const s = useMemo(() => createStyles(theme), [theme])
+  const [searchText, setSearchText] = useState('')
+
+  const filteredEntries = useMemo(() => {
+    if (!searchText.trim()) return entries
+    const query = searchText.toLowerCase()
+    return entries.filter(entry => {
+      return (
+        entry.url.toLowerCase().includes(query) ||
+        entry.method.toLowerCase().includes(query) ||
+        (entry.status !== undefined && String(entry.status).includes(query)) ||
+        (entry.error && entry.error.toLowerCase().includes(query))
+      )
+    })
+  }, [entries, searchText])
+
+  const stats = useMemo(() => {
+    const total = entries.length
+    const errors = entries.filter(
+      e => e.state === NetworkState.error || (e.status !== undefined && e.status >= 400),
+    ).length
+    const pending = entries.filter(e => e.state === NetworkState.pending).length
+    const completed = entries.filter(
+      e => e.state === NetworkState.completed && e.duration !== undefined,
+    )
+    const avgDuration =
+      completed.length > 0
+        ? Math.round(completed.reduce((sum, e) => sum + (e.duration ?? 0), 0) / completed.length)
+        : 0
+    return { total, errors, pending, avgDuration }
+  }, [entries])
+
+  const renderItem = useCallback(
+    ({ item }: { item: NetworkEntry }) => (
+      <NetworkItem item={item} onCopy={onCopy} jsonMaxDepth={jsonMaxDepth} />
+    ),
+    [onCopy],
+  )
+
+  const keyExtractor = useCallback((item: NetworkEntry) => item.id, [])
+
+  return (
+    <View testID={TestIDs.networkTab.container} style={s.container}>
+      <View style={s.searchContainer}>
+        <View style={s.searchInputWrapper}>
+          <Text style={s.searchIcon}>⌕</Text>
+          <TextInput
+            testID={TestIDs.networkTab.searchInput}
+            style={s.searchInput}
+            placeholder="Filter by URL, method, status..."
+            placeholderTextColor={theme.textMuted}
+            value={searchText}
+            onChangeText={setSearchText}
+            autoCapitalize="none"
+            autoCorrect={false}
+            clearButtonMode="while-editing"
+            returnKeyType="search"
+          />
+        </View>
+        <TouchableOpacity
+          testID={TestIDs.networkTab.clearButton}
+          style={s.clearButton}
+          onPress={onClear}
+          activeOpacity={0.7}
+        >
+          <Text style={s.clearButtonText}>Clear</Text>
+        </TouchableOpacity>
+      </View>
+
+      <View testID={TestIDs.networkTab.statsBar} style={s.statsBar}>
+        <View style={s.statsRow}>
+          <Text style={s.statText}>
+            {filteredEntries.length === entries.length
+              ? `${stats.total} request${stats.total !== 1 ? 's' : ''}`
+              : `${filteredEntries.length} of ${stats.total}`}
+          </Text>
+          {stats.errors > 0 && (
+            <View style={s.statBadge}>
+              <Text style={s.statBadgeError}>
+                {stats.errors} error{stats.errors !== 1 ? 's' : ''}
+              </Text>
+            </View>
+          )}
+          {stats.pending > 0 && (
+            <View style={[s.statBadge, s.statBadgePending]}>
+              <Text style={s.statBadgePendingText}>{stats.pending} pending</Text>
+            </View>
+          )}
+        </View>
+        {stats.avgDuration > 0 && <Text style={s.avgText}>avg {stats.avgDuration}ms</Text>}
+      </View>
+
+      <FlatList
+        testID={TestIDs.networkTab.list}
+        data={filteredEntries}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        refreshing={false}
+        onRefresh={onRefresh}
+        style={s.list}
+        contentContainerStyle={filteredEntries.length === 0 ? s.emptyContainer : undefined}
+        ListEmptyComponent={
+          <View style={s.emptyState}>
+            <Text style={s.emptyIcon}>🌐</Text>
+            <Text style={s.emptyTitle}>No network requests</Text>
+            <Text style={s.emptySubtitle}>
+              HTTP requests made via fetch or XMLHttpRequest will appear here
+            </Text>
+          </View>
+        }
+        maxToRenderPerBatch={20}
+        windowSize={10}
+        initialNumToRender={20}
+      />
+    </View>
+  )
+}
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+const createStyles = (t: BackstageTheme) =>
+  StyleSheet.create({
+    container: { flex: 1 },
+    searchContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      paddingHorizontal: 14,
+      paddingVertical: 10,
+      gap: 10,
+      borderBottomWidth: 1,
+      borderBottomColor: t.border,
+    },
+    searchInputWrapper: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      backgroundColor: t.surfaceElevated,
+      borderRadius: 10,
+      borderWidth: 1,
+      borderColor: t.border,
+      paddingHorizontal: 12,
+      height: 38,
+    },
+    searchIcon: { fontSize: 16, color: t.textMuted, marginRight: 8 },
+    searchInput: {
+      flex: 1,
+      fontFamily: MonospaceFont,
+      fontSize: 13,
+      color: t.text,
+      padding: 0,
+    },
+    clearButton: {
+      backgroundColor: t.errorDim,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: t.error,
+      paddingHorizontal: 14,
+      height: 38,
+      justifyContent: 'center',
+    },
+    clearButtonText: {
+      fontFamily: MonospaceFont,
+      fontSize: 12,
+      fontWeight: '700',
+      color: t.error,
+      letterSpacing: 0.5,
+    },
+    statsBar: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: 16,
+      paddingVertical: 6,
+      backgroundColor: t.surface,
+    },
+    statsRow: { flexDirection: 'row', alignItems: 'center', gap: 8 },
+    statText: { fontFamily: MonospaceFont, fontSize: 11, color: t.textMuted },
+    statBadge: {
+      backgroundColor: t.errorDim,
+      borderRadius: 4,
+      paddingHorizontal: 6,
+      paddingVertical: 1,
+    },
+    statBadgeError: { fontFamily: MonospaceFont, fontSize: 10, fontWeight: '700', color: t.error },
+    statBadgePending: { backgroundColor: t.warningDim },
+    statBadgePendingText: {
+      fontFamily: MonospaceFont,
+      fontSize: 10,
+      fontWeight: '700',
+      color: t.warning,
+    },
+    avgText: { fontFamily: MonospaceFont, fontSize: 10, color: t.textMuted, fontStyle: 'italic' },
+    list: { flex: 1 },
+    emptyContainer: { flex: 1, justifyContent: 'center' },
+    emptyState: { alignItems: 'center', justifyContent: 'center', padding: 40 },
+    emptyIcon: { fontSize: 48, marginBottom: 16, opacity: 0.5 },
+    emptyTitle: {
+      fontFamily: MonospaceFont,
+      fontSize: 16,
+      fontWeight: '700',
+      color: t.textSecondary,
+      marginBottom: 8,
+    },
+    emptySubtitle: {
+      fontFamily: MonospaceFont,
+      fontSize: 13,
+      color: t.textMuted,
+      textAlign: 'center',
+      lineHeight: 20,
+    },
+  })