rn-backstage 1.1.0 → 1.2.1

package/src/components/JsonTreeView.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React, { useCallback, useMemo, useState } from 'react'
 import {
   LayoutAnimation,
   Platform,
@@ -8,7 +8,9 @@ import {
   UIManager,
   View,
 } from 'react-native'
-import { DarkTheme, MonospaceFont } from '../constants'
+import { MonospaceFont } from '../constants'
+import { useBackstageTheme } from '../ThemeContext'
+import type { BackstageTheme } from '../types'
 
 // Enable LayoutAnimation on Android
 if (Platform.OS === 'android' && UIManager.setLayoutAnimationEnabledExperimental) {
@@ -35,12 +37,12 @@ interface JsonNodeProps {
 
 // ─── 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 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 {
@@ -79,7 +81,9 @@ const JsonNode: React.FC<JsonNodeProps> = ({
   isLast,
   hideKey = false,
 }) => {
-  const [expanded, setExpanded] = useState(depth < 1)
+  const theme = useBackstageTheme()
+  const s = useMemo(() => createStyles(theme), [theme])
+  const [expanded, setExpanded] = useState(false)
   const expandable = isExpandable(value)
   const reachedMaxDepth = depth >= maxDepth
 
@@ -95,18 +99,18 @@ const JsonNode: React.FC<JsonNodeProps> = ({
     const displayValue = reachedMaxDepth && expandable ? getPreview(value) : formatValue(value)
 
     return (
-      <View style={[styles.row, { paddingLeft: indent }]}>
-        {!hideKey && keyName !== null && <Text style={styles.key}>{`${keyName}: `}</Text>}
+      <View style={[s.row, { paddingLeft: indent }]}>
+        {!hideKey && keyName !== null && <Text style={s.key}>{`${keyName}: `}</Text>}
         <Text
           style={[
-            styles.value,
-            { color: reachedMaxDepth ? DarkTheme.textMuted : getValueColor(value) },
+            s.value,
+            { color: reachedMaxDepth ? theme.textMuted : getValueColor(value, theme) },
           ]}
           numberOfLines={3}
         >
           {displayValue}
         </Text>
-        {!isLast && <Text style={styles.comma}>,</Text>}
+        {!isLast && <Text style={s.comma}>,</Text>}
       </View>
     )
   }
@@ -124,16 +128,16 @@ const JsonNode: React.FC<JsonNodeProps> = ({
       <TouchableOpacity
         onPress={toggleExpand}
         activeOpacity={0.7}
-        style={[styles.row, { paddingLeft: indent }]}
+        style={[s.row, { paddingLeft: indent }]}
       >
-        <Text style={styles.chevron}>{expanded ? '▼' : '▶'}</Text>
-        {!hideKey && keyName !== null && <Text style={styles.key}>{`${keyName}: `}</Text>}
-        <Text style={styles.bracket}>{bracketOpen}</Text>
+        <Text style={s.chevron}>{expanded ? '▼' : '▶'}</Text>
+        {!hideKey && keyName !== null && <Text style={s.key}>{`${keyName}: `}</Text>}
+        <Text style={s.bracket}>{bracketOpen}</Text>
         {!expanded && (
           <>
-            <Text style={styles.preview}>{` ${getPreview(value)} `}</Text>
-            <Text style={styles.bracket}>{bracketClose}</Text>
-            {!isLast && <Text style={styles.comma}>,</Text>}
+            <Text style={s.preview}>{` ${getPreview(value)} `}</Text>
+            <Text style={s.bracket}>{bracketClose}</Text>
+            {!isLast && <Text style={s.comma}>,</Text>}
           </>
         )}
       </TouchableOpacity>
@@ -150,9 +154,9 @@ const JsonNode: React.FC<JsonNodeProps> = ({
               isLast={i === entries.length - 1}
             />
           ))}
-          <View style={[styles.row, { paddingLeft: indent }]}>
-            <Text style={styles.bracket}>{bracketClose}</Text>
-            {!isLast && <Text style={styles.comma}>,</Text>}
+          <View style={[s.row, { paddingLeft: indent }]}>
+            <Text style={s.bracket}>{bracketClose}</Text>
+            {!isLast && <Text style={s.comma}>,</Text>}
           </View>
         </>
       )}
@@ -167,12 +171,15 @@ export const JsonTreeView: React.FC<JsonTreeViewProps> = ({
   hideRoot = false,
   maxDepth = 10,
 }) => {
+  const theme = useBackstageTheme()
+  const s = useMemo(() => createStyles(theme), [theme])
+
   if (data === null || data === undefined) {
-    return <Text style={[styles.value, { color: DarkTheme.textMuted }]}>{String(data)}</Text>
+    return <Text style={[s.value, { color: theme.textMuted }]}>{String(data)}</Text>
   }
 
   if (!isExpandable(data)) {
-    return <Text style={[styles.value, { color: getValueColor(data) }]}>{formatValue(data)}</Text>
+    return <Text style={[s.value, { color: getValueColor(data, theme) }]}>{formatValue(data)}</Text>
   }
 
   if (hideRoot) {
@@ -181,7 +188,7 @@ export const JsonTreeView: React.FC<JsonTreeViewProps> = ({
       : Object.entries(data as Record<string, unknown>)
 
     return (
-      <View style={styles.container}>
+      <View style={s.container}>
         {entries.map(([k, v], i) => (
           <JsonNode
             key={`${k}_${i}`}
@@ -197,7 +204,7 @@ export const JsonTreeView: React.FC<JsonTreeViewProps> = ({
   }
 
   return (
-    <View style={styles.container}>
+    <View style={s.container}>
       <JsonNode
         keyName={null}
         value={data}
@@ -212,48 +219,21 @@ export const JsonTreeView: React.FC<JsonTreeViewProps> = ({
 
 // ─── 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,
-  },
-})
+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,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 } 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,43 @@ export const LogItem: React.FC<LogItemProps> = React.memo(
 
     return (
       <TouchableOpacity
-        style={[styles.container, { backgroundColor: badge.rowBg }]}
+        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 style={[s.badge, { backgroundColor: badge.bgColor }]}>
+            <Text style={[s.badgeText, { color: badge.color }]}>{badge.label}</Text>
           </View>
-          <Text style={[styles.timestamp, propStyles?.logTimestampStyle]}>
+          <Text style={[s.timestamp, propStyles?.logTimestampStyle]}>
             {formatTimestamp(item.timestamp)}
           </Text>
           {onCopy && (
             <TouchableOpacity
-              style={styles.copyButton}
+              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]}
+          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 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 +118,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',
+    },
+  })