rn-backstage 1.0.0

package/src/components/JsonTreeView.tsx

@@ -0,0 +1,259 @@
+import React, { useCallback, useState } from 'react'
+import {
+  LayoutAnimation,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  UIManager,
+  View,
+} from 'react-native'
+import { DarkTheme, MonospaceFont } from '../constants'
+
+// Enable LayoutAnimation on Android
+if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
+  UIManager.setLayoutAnimationEnabledExperimental(true)
+}
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface JsonTreeViewProps {
+  data: unknown
+  hideRoot?: boolean
+  initialExpanded?: boolean
+  maxDepth?: number
+}
+
+interface JsonNodeProps {
+  keyName: string | null
+  value: unknown
+  depth: number
+  maxDepth: number
+  isLast: boolean
+  hideKey?: boolean
+}
+
+// ─── Color Mapping ───────────────────────────────────────────────────────────
+
+function getValueColor(value: unknown): string {
+  if (value === null || value === undefined) return DarkTheme.textMuted
+  if (typeof value === 'string') return '#98C379' // green
+  if (typeof value === 'number') return '#61AFEF' // cyan
+  if (typeof value === 'boolean') return '#C678DD' // purple
+  return DarkTheme.text
+}
+
+function getPreview(value: unknown): string {
+  if (Array.isArray(value)) {
+    return `[ ${value.length} item${value.length !== 1 ? 's' : ''} ]`
+  }
+  if (typeof value === 'object' && value !== null) {
+    const keys = Object.keys(value)
+    return `{ ${keys.length} key${keys.length !== 1 ? 's' : ''} }`
+  }
+  return ''
+}
+
+function formatValue(value: unknown): string {
+  if (value === null) return 'null'
+  if (value === undefined) return 'undefined'
+  if (typeof value === 'string') return `"${value}"`
+  if (typeof value === 'boolean') return value ? 'true' : 'false'
+  if (typeof value === 'number') return String(value)
+  if (typeof value === 'function') return `[Function: ${value.name || 'anonymous'}]`
+  if (typeof value === 'symbol') return value.toString()
+  return String(value)
+}
+
+function isExpandable(value: unknown): boolean {
+  return (typeof value === 'object' && value !== null) || Array.isArray(value)
+}
+
+// ─── JsonNode Component ──────────────────────────────────────────────────────
+
+const JsonNode: React.FC<JsonNodeProps> = ({
+  keyName,
+  value,
+  depth,
+  maxDepth,
+  isLast,
+  hideKey = false,
+}) => {
+  const [expanded, setExpanded] = useState(depth < 1)
+  const expandable = isExpandable(value)
+  const reachedMaxDepth = depth >= maxDepth
+
+  const toggleExpand = useCallback(() => {
+    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
+    setExpanded(prev => !prev)
+  }, [])
+
+  const indent = depth * 16
+
+  // Primitive value
+  if (!expandable || reachedMaxDepth) {
+    const displayValue = reachedMaxDepth && expandable ? getPreview(value) : formatValue(value)
+
+    return (
+      <View style={[styles.row, { paddingLeft: indent }]}>
+        {!hideKey && keyName !== null && <Text style={styles.key}>{`${keyName}: `}</Text>}
+        <Text
+          style={[
+            styles.value,
+            { color: reachedMaxDepth ? DarkTheme.textMuted : getValueColor(value) },
+          ]}
+          numberOfLines={3}
+        >
+          {displayValue}
+        </Text>
+        {!isLast && <Text style={styles.comma}>,</Text>}
+      </View>
+    )
+  }
+
+  // Expandable object/array
+  const entries = Array.isArray(value)
+    ? value.map((v, i) => [String(i), v] as const)
+    : Object.entries(value as Record<string, unknown>)
+
+  const bracketOpen = Array.isArray(value) ? '[' : '{'
+  const bracketClose = Array.isArray(value) ? ']' : '}'
+
+  return (
+    <View>
+      <TouchableOpacity
+        onPress={toggleExpand}
+        activeOpacity={0.7}
+        style={[styles.row, { paddingLeft: indent }]}
+      >
+        <Text style={styles.chevron}>{expanded ? '▼' : '▶'}</Text>
+        {!hideKey && keyName !== null && <Text style={styles.key}>{`${keyName}: `}</Text>}
+        <Text style={styles.bracket}>{bracketOpen}</Text>
+        {!expanded && (
+          <>
+            <Text style={styles.preview}>{` ${getPreview(value)} `}</Text>
+            <Text style={styles.bracket}>{bracketClose}</Text>
+            {!isLast && <Text style={styles.comma}>,</Text>}
+          </>
+        )}
+      </TouchableOpacity>
+
+      {expanded && (
+        <>
+          {entries.map(([k, v], i) => (
+            <JsonNode
+              key={`${k}_${i}`}
+              keyName={Array.isArray(value) ? String(i) : k}
+              value={v}
+              depth={depth + 1}
+              maxDepth={maxDepth}
+              isLast={i === entries.length - 1}
+            />
+          ))}
+          <View style={[styles.row, { paddingLeft: indent }]}>
+            <Text style={styles.bracket}>{bracketClose}</Text>
+            {!isLast && <Text style={styles.comma}>,</Text>}
+          </View>
+        </>
+      )}
+    </View>
+  )
+}
+
+// ─── Main Component ──────────────────────────────────────────────────────────
+
+export const JsonTreeView: React.FC<JsonTreeViewProps> = ({
+  data,
+  hideRoot = false,
+  maxDepth = 10,
+}) => {
+  if (data === null || data === undefined) {
+    return <Text style={[styles.value, { color: DarkTheme.textMuted }]}>{String(data)}</Text>
+  }
+
+  if (!isExpandable(data)) {
+    return <Text style={[styles.value, { color: getValueColor(data) }]}>{formatValue(data)}</Text>
+  }
+
+  if (hideRoot) {
+    const entries = Array.isArray(data)
+      ? data.map((v, i) => [String(i), v] as const)
+      : Object.entries(data as Record<string, unknown>)
+
+    return (
+      <View style={styles.container}>
+        {entries.map(([k, v], i) => (
+          <JsonNode
+            key={`${k}_${i}`}
+            keyName={k}
+            value={v}
+            depth={0}
+            maxDepth={maxDepth}
+            isLast={i === entries.length - 1}
+          />
+        ))}
+      </View>
+    )
+  }
+
+  return (
+    <View style={styles.container}>
+      <JsonNode
+        keyName={null}
+        value={data}
+        depth={0}
+        maxDepth={maxDepth}
+        isLast={true}
+        hideKey={true}
+      />
+    </View>
+  )
+}
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    paddingVertical: 4,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'flex-start',
+    paddingVertical: 2,
+    flexWrap: 'wrap',
+  },
+  chevron: {
+    fontFamily: MonospaceFont,
+    fontSize: 10,
+    color: DarkTheme.textMuted,
+    marginRight: 6,
+    marginTop: 2,
+    width: 12,
+  },
+  key: {
+    fontFamily: MonospaceFont,
+    fontSize: 13,
+    color: '#E06C75', // red-ish for keys
+  },
+  value: {
+    fontFamily: MonospaceFont,
+    fontSize: 13,
+    flexShrink: 1,
+  },
+  bracket: {
+    fontFamily: MonospaceFont,
+    fontSize: 13,
+    color: DarkTheme.textSecondary,
+  },
+  preview: {
+    fontFamily: MonospaceFont,
+    fontSize: 13,
+    color: DarkTheme.textMuted,
+    fontStyle: 'italic',
+  },
+  comma: {
+    fontFamily: MonospaceFont,
+    fontSize: 13,
+    color: DarkTheme.textMuted,
+  },
+})

package/src/components/LogItem.tsx

@@ -0,0 +1,189 @@
+import React, { useCallback, useState } from 'react'
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { DarkTheme, MonospaceFont } from '../constants'
+import { LogLevel } from '../types'
+import type { LogEntry, BackstageStyleOverrides } from '../types'
+import { formatTimestamp } from '../utils/formatTimestamp'
+import { JsonTreeView } from './JsonTreeView'
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface LogItemProps {
+  item: LogEntry
+  onCopy?: (text: string) => void
+  styles?: BackstageStyleOverrides
+}
+
+// ─── Badge Colors ────────────────────────────────────────────────────────────
+
+function getBadgeConfig(level: LogLevel): {
+  label: string
+  color: string
+  bgColor: string
+  rowBg: string
+} {
+  switch (level) {
+    case LogLevel.error:
+      return {
+        label: 'ERROR',
+        color: DarkTheme.error,
+        bgColor: DarkTheme.errorDim,
+        rowBg: 'rgba(255, 77, 106, 0.06)',
+      }
+    case LogLevel.warn:
+      return {
+        label: 'WARN',
+        color: DarkTheme.warning,
+        bgColor: DarkTheme.warningDim,
+        rowBg: 'rgba(255, 178, 36, 0.06)',
+      }
+    case LogLevel.info:
+      return {
+        label: 'INFO',
+        color: DarkTheme.info,
+        bgColor: DarkTheme.infoDim,
+        rowBg: 'transparent',
+      }
+    case LogLevel.debug:
+      return {
+        label: 'DEBUG',
+        color: DarkTheme.debugColor,
+        bgColor: DarkTheme.debugDim,
+        rowBg: 'transparent',
+      }
+    default:
+      return {
+        label: 'LOG',
+        color: DarkTheme.textSecondary,
+        bgColor: 'rgba(160, 160, 176, 0.1)',
+        rowBg: 'transparent',
+      }
+  }
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export const LogItem: React.FC<LogItemProps> = React.memo(
+  ({ item, onCopy, styles: propStyles }) => {
+    const [expanded, setExpanded] = useState(false)
+    const badge = getBadgeConfig(item.level)
+    const hasData = item.data !== undefined
+
+    const toggleExpand = useCallback(() => {
+      setExpanded(prev => !prev)
+    }, [])
+
+    const handleCopy = useCallback(() => {
+      if (onCopy) {
+        const text = `[${badge.label}] ${formatTimestamp(item.timestamp)} ${item.message}`
+        onCopy(text)
+      }
+    }, [item, badge.label, onCopy])
+
+    return (
+      <TouchableOpacity
+        style={[styles.container, { backgroundColor: badge.rowBg }]}
+        onPress={hasData ? toggleExpand : undefined}
+        onLongPress={handleCopy}
+        activeOpacity={hasData ? 0.7 : 1}
+      >
+        {/* Header row: badge + timestamp + copy */}
+        <View style={styles.headerRow}>
+          <View style={[styles.badge, { backgroundColor: badge.bgColor }]}>
+            <Text style={[styles.badgeText, { color: badge.color }]}>{badge.label}</Text>
+          </View>
+          <Text style={[styles.timestamp, propStyles?.logTimestampStyle]}>
+            {formatTimestamp(item.timestamp)}
+          </Text>
+          {onCopy && (
+            <TouchableOpacity
+              style={styles.copyButton}
+              onPress={handleCopy}
+              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
+            >
+              <Text style={styles.copyButtonText}>⧉</Text>
+            </TouchableOpacity>
+          )}
+        </View>
+
+        {/* Message */}
+        <Text
+          style={[styles.message, propStyles?.logMessageStyle]}
+          numberOfLines={expanded ? undefined : 3}
+        >
+          {item.message}
+        </Text>
+
+        {/* Expandable data */}
+        {expanded && hasData && (
+          <View style={styles.dataContainer}>
+            <JsonTreeView data={item.data} hideRoot maxDepth={5} />
+          </View>
+        )}
+
+        {/* Expand hint */}
+        {hasData && !expanded && <Text style={styles.expandHint}>tap to expand ▾</Text>}
+      </TouchableOpacity>
+    )
+  },
+)
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: DarkTheme.border,
+  },
+  headerRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginBottom: 4,
+  },
+  badge: {
+    borderRadius: 4,
+    paddingHorizontal: 6,
+    paddingVertical: 2,
+    marginRight: 8,
+  },
+  badgeText: {
+    fontFamily: MonospaceFont,
+    fontSize: 10,
+    fontWeight: '800',
+    letterSpacing: 0.5,
+  },
+  timestamp: {
+    fontFamily: MonospaceFont,
+    fontSize: 11,
+    color: DarkTheme.textMuted,
+    flex: 1,
+  },
+  copyButton: {
+    padding: 4,
+  },
+  copyButtonText: {
+    fontSize: 16,
+    color: DarkTheme.textMuted,
+  },
+  message: {
+    fontFamily: MonospaceFont,
+    fontSize: 12,
+    color: DarkTheme.text,
+    lineHeight: 18,
+  },
+  dataContainer: {
+    marginTop: 8,
+    paddingTop: 8,
+    borderTopWidth: 1,
+    borderTopColor: DarkTheme.border,
+  },
+  expandHint: {
+    fontFamily: MonospaceFont,
+    fontSize: 10,
+    color: DarkTheme.textMuted,
+    marginTop: 4,
+    fontStyle: 'italic',
+  },
+})

package/src/components/LogsTab.tsx

@@ -0,0 +1,239 @@
+import React, { useCallback, useMemo, useState } from 'react'
+import { FlatList, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
+import { DarkTheme, MonospaceFont, TestIDs } from '../constants'
+import type { LogEntry, BackstageStyleOverrides } from '../types'
+import { LogItem } from './LogItem'
+import { formatTimestamp } from '../utils/formatTimestamp'
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface LogsTabProps {
+  logs: LogEntry[]
+  onRefresh: () => void
+  onCopyLogs?: (logs: string) => void
+  styles?: BackstageStyleOverrides
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export const LogsTab: React.FC<LogsTabProps> = ({
+  logs,
+  onRefresh,
+  onCopyLogs,
+  styles: propStyles,
+}) => {
+  const [searchText, setSearchText] = useState('')
+
+  // Filter logs based on search text
+  const filteredLogs = useMemo(() => {
+    if (!searchText.trim()) return logs
+
+    const query = searchText.toLowerCase()
+    return logs.filter(log => {
+      return log.message.toLowerCase().includes(query) || log.level.toLowerCase().includes(query)
+    })
+  }, [logs, searchText])
+
+  // Copy all visible logs to text
+  const handleCopyAll = useCallback(() => {
+    if (!onCopyLogs) return
+
+    const text = filteredLogs
+      .map(log => `[${log.level.toUpperCase()}] ${formatTimestamp(log.timestamp)} ${log.message}`)
+      .join('\n')
+    onCopyLogs(text)
+  }, [filteredLogs, onCopyLogs])
+
+  // Copy individual log
+  const handleCopyItem = useCallback(
+    (text: string) => {
+      if (onCopyLogs) {
+        onCopyLogs(text)
+      }
+    },
+    [onCopyLogs],
+  )
+
+  // Render log item
+  const renderItem = useCallback(
+    ({ item }: { item: LogEntry }) => (
+      <LogItem item={item} onCopy={onCopyLogs ? handleCopyItem : undefined} styles={propStyles} />
+    ),
+    [handleCopyItem, onCopyLogs, propStyles],
+  )
+
+  const keyExtractor = useCallback((item: LogEntry) => item.id, [])
+
+  return (
+    <View style={styles.container}>
+      {/* Search Bar */}
+      <View style={styles.searchContainer}>
+        <View style={styles.searchInputWrapper}>
+          <Text style={styles.searchIcon}>⌕</Text>
+          <TextInput
+            testID={TestIDs.logsTab.searchInput}
+            style={styles.searchInput}
+            placeholder="Filter logs..."
+            placeholderTextColor={DarkTheme.textMuted}
+            value={searchText}
+            onChangeText={setSearchText}
+            autoCapitalize="none"
+            autoCorrect={false}
+            clearButtonMode="while-editing"
+            returnKeyType="search"
+          />
+        </View>
+        {onCopyLogs && (
+          <TouchableOpacity
+            testID={TestIDs.logsTab.copyButton}
+            style={styles.copyAllButton}
+            onPress={handleCopyAll}
+            activeOpacity={0.7}
+          >
+            <Text style={styles.copyAllText}>Copy All</Text>
+          </TouchableOpacity>
+        )}
+      </View>
+
+      {/* Log Count */}
+      <View style={styles.countBar}>
+        <Text style={styles.countText}>
+          {filteredLogs.length === logs.length
+            ? `${logs.length} log${logs.length !== 1 ? 's' : ''}`
+            : `${filteredLogs.length} of ${logs.length} logs`}
+        </Text>
+        <Text style={styles.pullHint}>↓ pull to refresh</Text>
+      </View>
+
+      {/* Log List */}
+      <FlatList
+        testID={TestIDs.logsTab.list}
+        data={filteredLogs}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        refreshing={false}
+        onRefresh={onRefresh}
+        style={styles.list}
+        contentContainerStyle={filteredLogs.length === 0 ? styles.emptyContainer : undefined}
+        ListEmptyComponent={
+          <View style={styles.emptyState}>
+            <Text style={styles.emptyIcon}>📋</Text>
+            <Text style={styles.emptyTitle}>No logs yet</Text>
+            <Text style={styles.emptySubtitle}>Console output will appear here</Text>
+          </View>
+        }
+        // Perf optimizations
+        maxToRenderPerBatch={20}
+        windowSize={10}
+        initialNumToRender={20}
+        removeClippedSubviews={true}
+        getItemLayout={undefined}
+      />
+    </View>
+  )
+}
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  searchContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingHorizontal: 14,
+    paddingVertical: 10,
+    gap: 10,
+    borderBottomWidth: 1,
+    borderBottomColor: DarkTheme.border,
+  },
+  searchInputWrapper: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+    backgroundColor: DarkTheme.surfaceElevated,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: DarkTheme.border,
+    paddingHorizontal: 12,
+    height: 38,
+  },
+  searchIcon: {
+    fontSize: 16,
+    color: DarkTheme.textMuted,
+    marginRight: 8,
+  },
+  searchInput: {
+    flex: 1,
+    fontFamily: MonospaceFont,
+    fontSize: 13,
+    color: DarkTheme.text,
+    padding: 0,
+  },
+  copyAllButton: {
+    backgroundColor: DarkTheme.accentDim,
+    borderRadius: 8,
+    borderWidth: 1,
+    borderColor: DarkTheme.accent,
+    paddingHorizontal: 14,
+    height: 38,
+    justifyContent: 'center',
+  },
+  copyAllText: {
+    fontFamily: MonospaceFont,
+    fontSize: 12,
+    fontWeight: '700',
+    color: DarkTheme.accent,
+    letterSpacing: 0.5,
+  },
+  countBar: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingHorizontal: 16,
+    paddingVertical: 6,
+    backgroundColor: DarkTheme.surface,
+  },
+  countText: {
+    fontFamily: MonospaceFont,
+    fontSize: 11,
+    color: DarkTheme.textMuted,
+  },
+  pullHint: {
+    fontFamily: MonospaceFont,
+    fontSize: 10,
+    color: DarkTheme.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: DarkTheme.textSecondary,
+    marginBottom: 8,
+  },
+  emptySubtitle: {
+    fontFamily: MonospaceFont,
+    fontSize: 13,
+    color: DarkTheme.textMuted,
+    textAlign: 'center',
+  },
+})