rn-backstage 1.4.2 → 1.4.3

package/src/components/JsonTreeView.tsx

@@ -1,239 +0,0 @@
-import React, { useCallback, useMemo, useState } from 'react'
-import {
-  LayoutAnimation,
-  Platform,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  UIManager,
-  View,
-} from 'react-native'
-import { MonospaceFont } from '../constants'
-import { useBackstageTheme } from '../ThemeContext'
-import type { BackstageTheme } from '../types'
-
-// 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, t: BackstageTheme): string {
-  if (value === null || value === undefined) return t.textMuted
-  if (typeof value === 'string') return '#98C379'
-  if (typeof value === 'number') return '#61AFEF'
-  if (typeof value === 'boolean') return '#C678DD'
-  return t.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 theme = useBackstageTheme()
-  const s = useMemo(() => createStyles(theme), [theme])
-  const [expanded, setExpanded] = useState(false)
-  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={[s.row, { paddingLeft: indent }]}>
-        {!hideKey && keyName !== null && <Text style={s.key}>{`${keyName}: `}</Text>}
-        <Text
-          style={[
-            s.value,
-            { color: reachedMaxDepth ? theme.textMuted : getValueColor(value, theme) },
-          ]}
-          numberOfLines={3}
-        >
-          {displayValue}
-        </Text>
-        {!isLast && <Text style={s.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={[s.row, { paddingLeft: indent }]}
-      >
-        <Text style={s.chevron}>{expanded ? '▼' : '▶'}</Text>
-        {!hideKey && keyName !== null && <Text style={s.key}>{`${keyName}: `}</Text>}
-        <Text style={s.bracket}>{bracketOpen}</Text>
-        {!expanded && (
-          <>
-            <Text style={s.preview}>{` ${getPreview(value)} `}</Text>
-            <Text style={s.bracket}>{bracketClose}</Text>
-            {!isLast && <Text style={s.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={[s.row, { paddingLeft: indent }]}>
-            <Text style={s.bracket}>{bracketClose}</Text>
-            {!isLast && <Text style={s.comma}>,</Text>}
-          </View>
-        </>
-      )}
-    </View>
-  )
-}
-
-// ─── Main Component ──────────────────────────────────────────────────────────
-
-export const JsonTreeView: React.FC<JsonTreeViewProps> = ({
-  data,
-  hideRoot = false,
-  maxDepth = 10,
-}) => {
-  const theme = useBackstageTheme()
-  const s = useMemo(() => createStyles(theme), [theme])
-
-  if (data === null || data === undefined) {
-    return <Text style={[s.value, { color: theme.textMuted }]}>{String(data)}</Text>
-  }
-
-  if (!isExpandable(data)) {
-    return <Text style={[s.value, { color: getValueColor(data, theme) }]}>{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={s.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={s.container}>
-      <JsonNode
-        keyName={null}
-        value={data}
-        depth={0}
-        maxDepth={maxDepth}
-        isLast={true}
-        hideKey={true}
-      />
-    </View>
-  )
-}
-
-// ─── Styles ──────────────────────────────────────────────────────────────────
-
-const createStyles = (t: BackstageTheme) =>
-  StyleSheet.create({
-    container: { paddingVertical: 4 },
-    row: { flexDirection: 'row', alignItems: 'flex-start', paddingVertical: 2, flexWrap: 'wrap' },
-    chevron: {
-      fontFamily: MonospaceFont,
-      fontSize: 10,
-      color: t.textMuted,
-      marginRight: 6,
-      marginTop: 2,
-      width: 12,
-    },
-    key: { fontFamily: MonospaceFont, fontSize: 13, color: '#E06C75' },
-    value: { fontFamily: MonospaceFont, fontSize: 13, flexShrink: 1 },
-    bracket: { fontFamily: MonospaceFont, fontSize: 13, color: t.textSecondary },
-    preview: { fontFamily: MonospaceFont, fontSize: 13, color: t.textMuted, fontStyle: 'italic' },
-    comma: { fontFamily: MonospaceFont, fontSize: 13, color: t.textMuted },
-  })

package/src/components/LogItem.tsx

@@ -1,153 +0,0 @@
-import React, { useCallback, useMemo, useState } from 'react'
-import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
-import { MonospaceFont, TestIDs } from '../constants'
-import { useBackstageTheme } from '../ThemeContext'
-import { LogLevel } from '../types'
-import type { LogEntry, BackstageStyleOverrides, BackstageTheme } from '../types'
-import { formatTimestamp } from '../utils/formatTimestamp'
-import { JsonTreeView } from './JsonTreeView'
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-interface LogItemProps {
-  item: LogEntry
-  onCopy?: (text: string) => void
-  jsonMaxDepth?: number
-  styles?: BackstageStyleOverrides
-}
-
-// ─── Badge Colors ────────────────────────────────────────────────────────────
-
-function getBadgeConfig(
-  level: LogLevel,
-  t: BackstageTheme,
-): { label: string; color: string; bgColor: string; rowBg: string } {
-  switch (level) {
-    case LogLevel.error:
-      return {
-        label: 'ERROR',
-        color: t.error,
-        bgColor: t.errorDim,
-        rowBg: 'rgba(255, 77, 106, 0.06)',
-      }
-    case LogLevel.warn:
-      return {
-        label: 'WARN',
-        color: t.warning,
-        bgColor: t.warningDim,
-        rowBg: 'rgba(255, 178, 36, 0.06)',
-      }
-    case LogLevel.info:
-      return { label: 'INFO', color: t.info, bgColor: t.infoDim, rowBg: 'transparent' }
-    case LogLevel.debug:
-      return { label: 'DEBUG', color: t.debugColor, bgColor: t.debugDim, rowBg: 'transparent' }
-    default:
-      return {
-        label: 'LOG',
-        color: t.textSecondary,
-        bgColor: 'rgba(160, 160, 176, 0.1)',
-        rowBg: 'transparent',
-      }
-  }
-}
-
-// ─── Component ───────────────────────────────────────────────────────────────
-
-export const LogItem: React.FC<LogItemProps> = React.memo(
-  ({ item, onCopy, jsonMaxDepth, styles: propStyles }) => {
-    const theme = useBackstageTheme()
-    const s = useMemo(() => createStyles(theme), [theme])
-    const [expanded, setExpanded] = useState(false)
-    const badge = getBadgeConfig(item.level, theme)
-    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
-        testID={TestIDs.logItem.container(item.id)}
-        style={[s.container, { backgroundColor: badge.rowBg }]}
-        onPress={hasData ? toggleExpand : undefined}
-        onLongPress={handleCopy}
-        activeOpacity={hasData ? 0.7 : 1}
-      >
-        <View style={s.headerRow}>
-          <View
-            testID={TestIDs.logItem.badge(item.id)}
-            style={[s.badge, { backgroundColor: badge.bgColor }]}
-          >
-            <Text style={[s.badgeText, { color: badge.color }]}>{badge.label}</Text>
-          </View>
-          <Text
-            testID={TestIDs.logItem.timestamp(item.id)}
-            style={[s.timestamp, propStyles?.logTimestampStyle]}
-          >
-            {formatTimestamp(item.timestamp)}
-          </Text>
-          {onCopy && (
-            <TouchableOpacity
-              testID={TestIDs.logItem.copyButton(item.id)}
-              style={s.copyButton}
-              onPress={handleCopy}
-              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-            >
-              <Text style={s.copyButtonText}>⧉</Text>
-            </TouchableOpacity>
-          )}
-        </View>
-
-        <Text
-          testID={TestIDs.logItem.message(item.id)}
-          style={[s.message, propStyles?.logMessageStyle]}
-          numberOfLines={expanded ? undefined : 3}
-        >
-          {item.message}
-        </Text>
-
-        {expanded && hasData && (
-          <View testID={TestIDs.logItem.dataContainer(item.id)} style={s.dataContainer}>
-            <JsonTreeView data={item.data} hideRoot maxDepth={jsonMaxDepth} />
-          </View>
-        )}
-
-        {hasData && !expanded && <Text style={s.expandHint}>tap to expand ▾</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 },
-    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: t.textMuted, flex: 1 },
-    copyButton: { padding: 4 },
-    copyButtonText: { fontSize: 16, color: t.textMuted },
-    message: { fontFamily: MonospaceFont, fontSize: 12, color: t.text, lineHeight: 18 },
-    dataContainer: { marginTop: 8, paddingTop: 8, borderTopWidth: 1, borderTopColor: t.border },
-    expandHint: {
-      fontFamily: MonospaceFont,
-      fontSize: 10,
-      color: t.textMuted,
-      marginTop: 4,
-      fontStyle: 'italic',
-    },
-  })

package/src/components/LogsTab.tsx

@@ -1,215 +0,0 @@
-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 type { LogEntry, BackstageStyleOverrides, BackstageTheme } from '../types'
-import { LogItem } from './LogItem'
-import { formatTimestamp } from '../utils/formatTimestamp'
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-interface LogsTabProps {
-  logs: LogEntry[]
-  onRefresh: () => void
-  onCopyLogs?: (logs: string) => void
-  jsonMaxDepth?: number
-  styles?: BackstageStyleOverrides
-}
-
-// ─── Component ───────────────────────────────────────────────────────────────
-
-export const LogsTab: React.FC<LogsTabProps> = ({
-  logs,
-  onRefresh,
-  onCopyLogs,
-  jsonMaxDepth,
-  styles: propStyles,
-}) => {
-  const theme = useBackstageTheme()
-  const s = useMemo(() => createStyles(theme), [theme])
-  const [searchText, setSearchText] = useState('')
-
-  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])
-
-  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])
-
-  const handleCopyItem = useCallback(
-    (text: string) => {
-      if (onCopyLogs) {
-        onCopyLogs(text)
-      }
-    },
-    [onCopyLogs],
-  )
-
-  const renderItem = useCallback(
-    ({ item }: { item: LogEntry }) => (
-      <LogItem
-        item={item}
-        onCopy={onCopyLogs ? handleCopyItem : undefined}
-        jsonMaxDepth={jsonMaxDepth}
-        styles={propStyles}
-      />
-    ),
-    [handleCopyItem, onCopyLogs, propStyles],
-  )
-
-  const keyExtractor = useCallback((item: LogEntry) => item.id, [])
-
-  return (
-    <View testID={TestIDs.logsTab.container} style={s.container}>
-      <View style={s.searchContainer}>
-        <View style={s.searchInputWrapper}>
-          <Text style={s.searchIcon}>⌕</Text>
-          <TextInput
-            testID={TestIDs.logsTab.searchInput}
-            style={s.searchInput}
-            placeholder="Filter logs..."
-            placeholderTextColor={theme.textMuted}
-            value={searchText}
-            onChangeText={setSearchText}
-            autoCapitalize="none"
-            autoCorrect={false}
-            clearButtonMode="while-editing"
-            returnKeyType="search"
-          />
-        </View>
-        {onCopyLogs && (
-          <TouchableOpacity
-            testID={TestIDs.logsTab.copyButton}
-            style={s.copyAllButton}
-            onPress={handleCopyAll}
-            activeOpacity={0.7}
-          >
-            <Text style={s.copyAllText}>Copy All</Text>
-          </TouchableOpacity>
-        )}
-      </View>
-
-      <View testID={TestIDs.logsTab.statsBar} style={s.countBar}>
-        <Text style={s.countText}>
-          {filteredLogs.length === logs.length
-            ? `${logs.length} log${logs.length !== 1 ? 's' : ''}`
-            : `${filteredLogs.length} of ${logs.length} logs`}
-        </Text>
-        <Text style={s.pullHint}>↓ pull to refresh</Text>
-      </View>
-
-      <FlatList
-        testID={TestIDs.logsTab.list}
-        data={filteredLogs}
-        renderItem={renderItem}
-        keyExtractor={keyExtractor}
-        refreshing={false}
-        onRefresh={onRefresh}
-        style={s.list}
-        contentContainerStyle={filteredLogs.length === 0 ? s.emptyContainer : undefined}
-        ListEmptyComponent={
-          <View style={s.emptyState}>
-            <Text style={s.emptyIcon}>📋</Text>
-            <Text style={s.emptyTitle}>No logs yet</Text>
-            <Text style={s.emptySubtitle}>Console output 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,
-    },
-    copyAllButton: {
-      backgroundColor: t.accentDim,
-      borderRadius: 8,
-      borderWidth: 1,
-      borderColor: t.accent,
-      paddingHorizontal: 14,
-      height: 38,
-      justifyContent: 'center',
-    },
-    copyAllText: {
-      fontFamily: MonospaceFont,
-      fontSize: 12,
-      fontWeight: '700',
-      color: t.accent,
-      letterSpacing: 0.5,
-    },
-    countBar: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      paddingHorizontal: 16,
-      paddingVertical: 6,
-      backgroundColor: t.surface,
-    },
-    countText: { fontFamily: MonospaceFont, fontSize: 11, color: t.textMuted },
-    pullHint: {
-      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',
-    },
-  })