rn-backstage 1.2.0 → 1.3.0

package/src/components/LogItem.tsx

@@ -1,8 +1,9 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import { StyleSheet, Text, TouchableOpacity, View } from 'react-native'
-import { DarkTheme, MonospaceFont } from '../constants'
+import { MonospaceFont, TestIDs } from '../constants'
+import { useBackstageTheme } from '../ThemeContext'
 import { LogLevel } from '../types'
-import type { LogEntry, BackstageStyleOverrides } from '../types'
+import type { LogEntry, BackstageStyleOverrides, BackstageTheme } from '../types'
 import { formatTimestamp } from '../utils/formatTimestamp'
 import { JsonTreeView } from './JsonTreeView'
 
@@ -11,50 +12,39 @@ import { JsonTreeView } from './JsonTreeView'
 interface LogItemProps {
   item: LogEntry
   onCopy?: (text: string) => void
+  jsonMaxDepth?: number
   styles?: BackstageStyleOverrides
 }
 
 // ─── Badge Colors ────────────────────────────────────────────────────────────
 
-function getBadgeConfig(level: LogLevel): {
-  label: string
-  color: string
-  bgColor: string
-  rowBg: string
-} {
+function getBadgeConfig(
+  level: LogLevel,
+  t: BackstageTheme,
+): { label: string; color: string; bgColor: string; rowBg: string } {
   switch (level) {
     case LogLevel.error:
       return {
         label: 'ERROR',
-        color: DarkTheme.error,
-        bgColor: DarkTheme.errorDim,
+        color: t.error,
+        bgColor: t.errorDim,
         rowBg: 'rgba(255, 77, 106, 0.06)',
       }
     case LogLevel.warn:
       return {
         label: 'WARN',
-        color: DarkTheme.warning,
-        bgColor: DarkTheme.warningDim,
+        color: t.warning,
+        bgColor: t.warningDim,
         rowBg: 'rgba(255, 178, 36, 0.06)',
       }
     case LogLevel.info:
-      return {
-        label: 'INFO',
-        color: DarkTheme.info,
-        bgColor: DarkTheme.infoDim,
-        rowBg: 'transparent',
-      }
+      return { label: 'INFO', color: t.info, bgColor: t.infoDim, rowBg: 'transparent' }
     case LogLevel.debug:
-      return {
-        label: 'DEBUG',
-        color: DarkTheme.debugColor,
-        bgColor: DarkTheme.debugDim,
-        rowBg: 'transparent',
-      }
+      return { label: 'DEBUG', color: t.debugColor, bgColor: t.debugDim, rowBg: 'transparent' }
     default:
       return {
         label: 'LOG',
-        color: DarkTheme.textSecondary,
+        color: t.textSecondary,
         bgColor: 'rgba(160, 160, 176, 0.1)',
         rowBg: 'transparent',
       }
@@ -64,9 +54,11 @@ function getBadgeConfig(level: LogLevel): {
 // ─── Component ───────────────────────────────────────────────────────────────
 
 export const LogItem: React.FC<LogItemProps> = React.memo(
-  ({ item, onCopy, styles: propStyles }) => {
+  ({ item, onCopy, jsonMaxDepth, styles: propStyles }) => {
+    const theme = useBackstageTheme()
+    const s = useMemo(() => createStyles(theme), [theme])
     const [expanded, setExpanded] = useState(false)
-    const badge = getBadgeConfig(item.level)
+    const badge = getBadgeConfig(item.level, theme)
     const hasData = item.data !== undefined
 
     const toggleExpand = useCallback(() => {
@@ -82,47 +74,52 @@ export const LogItem: React.FC<LogItemProps> = React.memo(
 
     return (
       <TouchableOpacity
-        style={[styles.container, { backgroundColor: badge.rowBg }]}
+        testID={TestIDs.logItem.container(item.id)}
+        style={[s.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 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 style={[styles.timestamp, propStyles?.logTimestampStyle]}>
+          <Text
+            testID={TestIDs.logItem.timestamp(item.id)}
+            style={[s.timestamp, propStyles?.logTimestampStyle]}
+          >
             {formatTimestamp(item.timestamp)}
           </Text>
           {onCopy && (
             <TouchableOpacity
-              style={styles.copyButton}
+              testID={TestIDs.logItem.copyButton(item.id)}
+              style={s.copyButton}
               onPress={handleCopy}
               hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
             >
-              <Text style={styles.copyButtonText}>⧉</Text>
+              <Text style={s.copyButtonText}>⧉</Text>
             </TouchableOpacity>
           )}
         </View>
 
-        {/* Message */}
         <Text
-          style={[styles.message, propStyles?.logMessageStyle]}
+          testID={TestIDs.logItem.message(item.id)}
+          style={[s.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 testID={TestIDs.logItem.dataContainer(item.id)} style={s.dataContainer}>
+            <JsonTreeView data={item.data} hideRoot maxDepth={jsonMaxDepth} />
           </View>
         )}
 
-        {/* Expand hint */}
-        {hasData && !expanded && <Text style={styles.expandHint}>tap to expand ▾</Text>}
+        {hasData && !expanded && <Text style={s.expandHint}>tap to expand ▾</Text>}
       </TouchableOpacity>
     )
   },
@@ -130,60 +127,27 @@ export const LogItem: React.FC<LogItemProps> = React.memo(
 
 // ─── 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',
-  },
-})
+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,7 +1,8 @@
 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 { MonospaceFont, TestIDs } from '../constants'
+import { useBackstageTheme } from '../ThemeContext'
+import type { LogEntry, BackstageStyleOverrides, BackstageTheme } from '../types'
 import { LogItem } from './LogItem'
 import { formatTimestamp } from '../utils/formatTimestamp'
 
@@ -11,6 +12,7 @@ interface LogsTabProps {
   logs: LogEntry[]
   onRefresh: () => void
   onCopyLogs?: (logs: string) => void
+  jsonMaxDepth?: number
   styles?: BackstageStyleOverrides
 }
 
@@ -20,31 +22,29 @@ 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('')
 
-  // 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) {
@@ -54,10 +54,14 @@ export const LogsTab: React.FC<LogsTabProps> = ({
     [onCopyLogs],
   )
 
-  // Render log item
   const renderItem = useCallback(
     ({ item }: { item: LogEntry }) => (
-      <LogItem item={item} onCopy={onCopyLogs ? handleCopyItem : undefined} styles={propStyles} />
+      <LogItem
+        item={item}
+        onCopy={onCopyLogs ? handleCopyItem : undefined}
+        jsonMaxDepth={jsonMaxDepth}
+        styles={propStyles}
+      />
     ),
     [handleCopyItem, onCopyLogs, propStyles],
   )
@@ -65,16 +69,15 @@ export const LogsTab: React.FC<LogsTabProps> = ({
   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>
+    <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={styles.searchInput}
+            style={s.searchInput}
             placeholder="Filter logs..."
-            placeholderTextColor={DarkTheme.textMuted}
+            placeholderTextColor={theme.textMuted}
             value={searchText}
             onChangeText={setSearchText}
             autoCapitalize="none"
@@ -86,26 +89,24 @@ export const LogsTab: React.FC<LogsTabProps> = ({
         {onCopyLogs && (
           <TouchableOpacity
             testID={TestIDs.logsTab.copyButton}
-            style={styles.copyAllButton}
+            style={s.copyAllButton}
             onPress={handleCopyAll}
             activeOpacity={0.7}
           >
-            <Text style={styles.copyAllText}>Copy All</Text>
+            <Text style={s.copyAllText}>Copy All</Text>
           </TouchableOpacity>
         )}
       </View>
 
-      {/* Log Count */}
-      <View style={styles.countBar}>
-        <Text style={styles.countText}>
+      <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={styles.pullHint}>↓ pull to refresh</Text>
+        <Text style={s.pullHint}>↓ pull to refresh</Text>
       </View>
 
-      {/* Log List */}
       <FlatList
         testID={TestIDs.logsTab.list}
         data={filteredLogs}
@@ -113,16 +114,15 @@ export const LogsTab: React.FC<LogsTabProps> = ({
         keyExtractor={keyExtractor}
         refreshing={false}
         onRefresh={onRefresh}
-        style={styles.list}
-        contentContainerStyle={filteredLogs.length === 0 ? styles.emptyContainer : undefined}
+        style={s.list}
+        contentContainerStyle={filteredLogs.length === 0 ? s.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 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>
         }
-        // Perf optimizations
         maxToRenderPerBatch={20}
         windowSize={10}
         initialNumToRender={20}
@@ -135,105 +135,83 @@ export const LogsTab: React.FC<LogsTabProps> = ({
 
 // ─── 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',
-  },
-})
+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',
+    },
+  })