rn-backstage 1.1.0 → 1.2.1

package/src/components/NetworkTab.tsx

@@ -1,8 +1,9 @@
 import React, { useCallback, useMemo, useState } from 'react'
 import { FlatList, StyleSheet, Text, TextInput, TouchableOpacity, View } from 'react-native'
-import { DarkTheme, MonospaceFont, TestIDs } from '../constants'
+import { MonospaceFont, TestIDs } from '../constants'
+import { useBackstageTheme } from '../ThemeContext'
 import { NetworkState } from '../types'
-import type { NetworkEntry } from '../types'
+import type { NetworkEntry, BackstageTheme } from '../types'
 import { NetworkItem } from './NetworkItem'
 
 // ─── Types ───────────────────────────────────────────────────────────────────
@@ -12,17 +13,24 @@ interface NetworkTabProps {
   onRefresh: () => void
   onClear: () => void
   onCopy?: (text: string) => void
+  jsonMaxDepth?: number
 }
 
 // ─── Component ───────────────────────────────────────────────────────────────
 
-export const NetworkTab: React.FC<NetworkTabProps> = ({ entries, onRefresh, onClear, onCopy }) => {
+export const NetworkTab: React.FC<NetworkTabProps> = ({
+  entries,
+  onRefresh,
+  onClear,
+  onCopy,
+  jsonMaxDepth,
+}) => {
+  const theme = useBackstageTheme()
+  const s = useMemo(() => createStyles(theme), [theme])
   const [searchText, setSearchText] = useState('')
 
-  // Filter entries based on search text
   const filteredEntries = useMemo(() => {
     if (!searchText.trim()) return entries
-
     const query = searchText.toLowerCase()
     return entries.filter(entry => {
       return (
@@ -34,7 +42,6 @@ export const NetworkTab: React.FC<NetworkTabProps> = ({ entries, onRefresh, onCl
     })
   }, [entries, searchText])
 
-  // Summary stats
   const stats = useMemo(() => {
     const total = entries.length
     const errors = entries.filter(
@@ -48,28 +55,28 @@ export const NetworkTab: React.FC<NetworkTabProps> = ({ entries, onRefresh, onCl
       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} />,
+    ({ item }: { item: NetworkEntry }) => (
+      <NetworkItem item={item} onCopy={onCopy} jsonMaxDepth={jsonMaxDepth} />
+    ),
     [onCopy],
   )
 
   const keyExtractor = useCallback((item: NetworkEntry) => item.id, [])
 
   return (
-    <View style={styles.container}>
-      {/* Search Bar */}
-      <View style={styles.searchContainer}>
-        <View style={styles.searchInputWrapper}>
-          <Text style={styles.searchIcon}>⌕</Text>
+    <View style={s.container}>
+      <View style={s.searchContainer}>
+        <View style={s.searchInputWrapper}>
+          <Text style={s.searchIcon}>⌕</Text>
           <TextInput
             testID={TestIDs.networkTab.searchInput}
-            style={styles.searchInput}
+            style={s.searchInput}
             placeholder="Filter by URL, method, status..."
-            placeholderTextColor={DarkTheme.textMuted}
+            placeholderTextColor={theme.textMuted}
             value={searchText}
             onChangeText={setSearchText}
             autoCapitalize="none"
@@ -80,39 +87,37 @@ export const NetworkTab: React.FC<NetworkTabProps> = ({ entries, onRefresh, onCl
         </View>
         <TouchableOpacity
           testID={TestIDs.networkTab.clearButton}
-          style={styles.clearButton}
+          style={s.clearButton}
           onPress={onClear}
           activeOpacity={0.7}
         >
-          <Text style={styles.clearButtonText}>Clear</Text>
+          <Text style={s.clearButtonText}>Clear</Text>
         </TouchableOpacity>
       </View>
 
-      {/* Stats Bar */}
-      <View style={styles.statsBar}>
-        <View style={styles.statsRow}>
-          <Text style={styles.statText}>
+      <View 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={styles.statBadge}>
-              <Text style={styles.statBadgeError}>
+            <View style={s.statBadge}>
+              <Text style={s.statBadgeError}>
                 {stats.errors} error{stats.errors !== 1 ? 's' : ''}
               </Text>
             </View>
           )}
           {stats.pending > 0 && (
-            <View style={[styles.statBadge, styles.statBadgePending]}>
-              <Text style={styles.statBadgePendingText}>{stats.pending} pending</Text>
+            <View style={[s.statBadge, s.statBadgePending]}>
+              <Text style={s.statBadgePendingText}>{stats.pending} pending</Text>
             </View>
           )}
         </View>
-        {stats.avgDuration > 0 && <Text style={styles.avgText}>avg {stats.avgDuration}ms</Text>}
+        {stats.avgDuration > 0 && <Text style={s.avgText}>avg {stats.avgDuration}ms</Text>}
       </View>
 
-      {/* Request List */}
       <FlatList
         testID={TestIDs.networkTab.list}
         data={filteredEntries}
@@ -120,18 +125,17 @@ export const NetworkTab: React.FC<NetworkTabProps> = ({ entries, onRefresh, onCl
         keyExtractor={keyExtractor}
         refreshing={false}
         onRefresh={onRefresh}
-        style={styles.list}
-        contentContainerStyle={filteredEntries.length === 0 ? styles.emptyContainer : undefined}
+        style={s.list}
+        contentContainerStyle={filteredEntries.length === 0 ? s.emptyContainer : undefined}
         ListEmptyComponent={
-          <View style={styles.emptyState}>
-            <Text style={styles.emptyIcon}>🌐</Text>
-            <Text style={styles.emptyTitle}>No network requests</Text>
-            <Text style={styles.emptySubtitle}>
+          <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>
         }
-        // Perf optimizations
         maxToRenderPerBatch={20}
         windowSize={10}
         initialNumToRender={20}
@@ -143,132 +147,94 @@ export const NetworkTab: React.FC<NetworkTabProps> = ({ entries, onRefresh, onCl
 
 // ─── 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,
-  },
-  clearButton: {
-    backgroundColor: DarkTheme.errorDim,
-    borderRadius: 8,
-    borderWidth: 1,
-    borderColor: DarkTheme.error,
-    paddingHorizontal: 14,
-    height: 38,
-    justifyContent: 'center',
-  },
-  clearButtonText: {
-    fontFamily: MonospaceFont,
-    fontSize: 12,
-    fontWeight: '700',
-    color: DarkTheme.error,
-    letterSpacing: 0.5,
-  },
-  statsBar: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 6,
-    backgroundColor: DarkTheme.surface,
-  },
-  statsRow: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: 8,
-  },
-  statText: {
-    fontFamily: MonospaceFont,
-    fontSize: 11,
-    color: DarkTheme.textMuted,
-  },
-  statBadge: {
-    backgroundColor: DarkTheme.errorDim,
-    borderRadius: 4,
-    paddingHorizontal: 6,
-    paddingVertical: 1,
-  },
-  statBadgeError: {
-    fontFamily: MonospaceFont,
-    fontSize: 10,
-    fontWeight: '700',
-    color: DarkTheme.error,
-  },
-  statBadgePending: {
-    backgroundColor: DarkTheme.warningDim,
-  },
-  statBadgePendingText: {
-    fontFamily: MonospaceFont,
-    fontSize: 10,
-    fontWeight: '700',
-    color: DarkTheme.warning,
-  },
-  avgText: {
-    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',
-    lineHeight: 20,
-  },
-})
+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,
+    },
+  })

package/src/components/TabBar.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useRef, useEffect } from 'react'
+import React, { useCallback, useMemo, useRef, useEffect } from 'react'
 import {
   Animated,
   LayoutChangeEvent,
@@ -8,7 +8,8 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native'
-import { DarkTheme, MonospaceFont } from '../constants'
+import { MonospaceFont } from '../constants'
+import { useBackstageTheme } from '../ThemeContext'
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
@@ -27,6 +28,8 @@ interface TabBarProps {
 // ─── Component ───────────────────────────────────────────────────────────────
 
 export const TabBar: React.FC<TabBarProps> = ({ tabs, activeTab, onTabChange }) => {
+  const theme = useBackstageTheme()
+  const styles = useMemo(() => createStyles(theme), [theme])
   const indicatorAnim = useRef(new Animated.Value(0)).current
   const tabWidths = useRef<Record<string, number>>({})
   const tabOffsets = useRef<Record<string, number>>({})
@@ -103,48 +106,49 @@ export const TabBar: React.FC<TabBarProps> = ({ tabs, activeTab, onTabChange })
 
 // ─── Styles ──────────────────────────────────────────────────────────────────
 
-const styles = StyleSheet.create({
-  container: {
-    borderBottomWidth: 1,
-    borderBottomColor: DarkTheme.border,
-  },
-  scrollContent: {
-    flexDirection: 'row',
-    position: 'relative',
-    paddingBottom: 0,
-  },
-  tab: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    justifyContent: 'center',
-    paddingHorizontal: 20,
-    paddingVertical: 14,
-    minWidth: 80,
-  },
-  tabIcon: {
-    fontSize: 14,
-    marginRight: 6,
-    opacity: 0.5,
-  },
-  tabIconActive: {
-    opacity: 1,
-  },
-  tabText: {
-    fontFamily: MonospaceFont,
-    fontSize: 13,
-    fontWeight: '600',
-    color: DarkTheme.textMuted,
-    textTransform: 'uppercase',
-    letterSpacing: 1,
-  },
-  tabTextActive: {
-    color: DarkTheme.accent,
-  },
-  indicator: {
-    position: 'absolute',
-    bottom: 0,
-    height: 2,
-    backgroundColor: DarkTheme.accent,
-    borderRadius: 1,
-  },
-})
+const createStyles = (t: import('../types').BackstageTheme) =>
+  StyleSheet.create({
+    container: {
+      borderBottomWidth: 1,
+      borderBottomColor: t.border,
+    },
+    scrollContent: {
+      flexDirection: 'row',
+      position: 'relative',
+      paddingBottom: 0,
+    },
+    tab: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingHorizontal: 20,
+      paddingVertical: 14,
+      minWidth: 80,
+    },
+    tabIcon: {
+      fontSize: 14,
+      marginRight: 6,
+      opacity: 0.5,
+    },
+    tabIconActive: {
+      opacity: 1,
+    },
+    tabText: {
+      fontFamily: MonospaceFont,
+      fontSize: 13,
+      fontWeight: '600',
+      color: t.textMuted,
+      textTransform: 'uppercase',
+      letterSpacing: 1,
+    },
+    tabTextActive: {
+      color: t.accent,
+    },
+    indicator: {
+      position: 'absolute',
+      bottom: 0,
+      height: 2,
+      backgroundColor: t.accent,
+      borderRadius: 1,
+    },
+  })

package/src/constants.ts

@@ -41,6 +41,29 @@ export const DarkTheme: BackstageTheme = {
   debugDim: 'rgba(167, 139, 250, 0.12)',
 }
 
+// ─── Light Theme ─────────────────────────────────────────────────────────────
+
+export const LightTheme: BackstageTheme = {
+  background: '#F5F5F7',
+  surface: '#FFFFFF',
+  surfaceElevated: '#F0F0F4',
+  border: '#D8D8DC',
+  text: '#1C1C1E',
+  textSecondary: '#636366',
+  textMuted: '#AEAEB2',
+  accent: '#6A3DE8',
+  accentDim: 'rgba(106, 61, 232, 0.10)',
+  error: '#E5325F',
+  errorDim: 'rgba(229, 50, 95, 0.10)',
+  warning: '#E09400',
+  warningDim: 'rgba(224, 148, 0, 0.10)',
+  success: '#28A770',
+  info: '#0E8AD6',
+  infoDim: 'rgba(14, 138, 214, 0.10)',
+  debugColor: '#7C4DFF',
+  debugDim: 'rgba(124, 77, 255, 0.10)',
+}
+
 export const DEFAULT_MAX_LOGS = 500
 
 // ─── Network Defaults ────────────────────────────────────────────────────────

package/src/index.ts

@@ -7,9 +7,12 @@ export type {
   BackstageStyleOverrides,
   BackstageTheme,
   QuickAction,
+  FeatureFlag,
   AppInfoItem,
   LogEntry,
   NetworkEntry,
 } from './types'
 
 export { LogLevel, NetworkState } from './types'
+export { TestIDs, DarkTheme, LightTheme } from './constants'
+export type { ThemePreference } from './ThemeContext'

package/src/types.ts

@@ -63,6 +63,19 @@ export interface QuickAction {
   testID?: string
 }
 
+// ─── Feature Flags ─────────────────────────────────────────────────────────
+
+export interface FeatureFlag {
+  /** Unique key for this flag */
+  key: string
+  /** Display label */
+  label: string
+  /** Current value */
+  value: boolean
+  /** Optional description shown below the label */
+  description?: string
+}
+
 // ─── Extensible Tabs ─────────────────────────────────────────────────────────
 
 export interface BackstageTab {
@@ -101,6 +114,9 @@ export interface BackstageProps {
   /** Whether the floating pill trigger is visible. Default: true */
   visible?: boolean
 
+  /** Theme preference: 'light', 'dark', or 'auto' (follows device setting). Default: 'auto' */
+  theme?: 'light' | 'dark' | 'auto'
+
   /** App version string (e.g., "1.2.3") */
   appVersion?: string
 
@@ -119,6 +135,12 @@ export interface BackstageProps {
   /** Custom action buttons in the Info tab */
   quickActions?: QuickAction[]
 
+  /** Feature flags to display with toggle switches */
+  featureFlags?: FeatureFlag[]
+
+  /** Callback when a feature flag is toggled */
+  onToggleFeatureFlag?: (key: string, value: boolean) => void
+
   /** Maximum number of logs to retain in memory. Default: 500 */
   maxLogs?: number
 
@@ -160,6 +182,9 @@ export interface BackstageProps {
 
   /** Auto-filter console.logs from network callbacks (e.g., Axios interceptors) out of the Logs tab. Default: true */
   autoFilterNetworkLogs?: boolean
+
+  /** Max nesting depth for JSON tree views (state tree, log data, network bodies). Default: 10 */
+  jsonMaxDepth?: number
 }
 
 export interface BackstageStyleOverrides {