rn-backstage 1.2.0 → 1.3.0

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 ────────────────────────────────────────────────────────
@@ -58,34 +81,110 @@ export const MonospaceFont = Platform.select({
 // ─── Test IDs ────────────────────────────────────────────────────────────────
 
 export const TestIDs = {
+  // ── Floating Pill ──────────────────────────────
   floatingPill: 'backstage.floating-pill',
+  floatingPillText: 'backstage.floating-pill.text',
+
+  // ── Panel ──────────────────────────────────────
   panel: 'backstage.panel',
+  panelModal: 'backstage.panel.modal',
+
+  // ── Header ─────────────────────────────────────
   header: {
     container: 'backstage.header',
     title: 'backstage.header.title',
     closeButton: 'backstage.header.close',
   },
+
+  // ── Tab Bar ────────────────────────────────────
   tabBar: 'backstage.tab-bar',
   tabs: {
     info: 'backstage.tab.info',
+    network: 'backstage.tab.network',
+    flags: 'backstage.tab.flags',
+    storage: 'backstage.tab.storage',
     logs: 'backstage.tab.logs',
   },
+
+  // ── Info Tab ───────────────────────────────────
   infoTab: {
-    section: 'backstage.info',
+    container: 'backstage.info',
     deviceInfo: 'backstage.info.device',
     stateTree: 'backstage.info.state-tree',
     quickActions: 'backstage.info.quick-actions',
+    /** Dynamic: backstage.info.action.{index} */
+    actionButton: (index: number) => `backstage.info.action.${index}`,
   },
+
+  // ── Logs Tab ───────────────────────────────────
   logsTab: {
-    section: 'backstage.logs',
+    container: 'backstage.logs',
     searchInput: 'backstage.logs.search',
     copyButton: 'backstage.logs.copy',
     list: 'backstage.logs.list',
+    statsBar: 'backstage.logs.stats',
+  },
+
+  // ── Log Item ───────────────────────────────────
+  logItem: {
+    /** Dynamic: backstage.log-item.{id} */
+    container: (id: string) => `backstage.log-item.${id}`,
+    badge: (id: string) => `backstage.log-item.${id}.badge`,
+    message: (id: string) => `backstage.log-item.${id}.message`,
+    timestamp: (id: string) => `backstage.log-item.${id}.timestamp`,
+    dataContainer: (id: string) => `backstage.log-item.${id}.data`,
+    copyButton: (id: string) => `backstage.log-item.${id}.copy`,
   },
+
+  // ── Network Tab ────────────────────────────────
   networkTab: {
-    section: 'backstage.network',
+    container: 'backstage.network',
     searchInput: 'backstage.network.search',
-    list: 'backstage.network.list',
     clearButton: 'backstage.network.clear',
+    list: 'backstage.network.list',
+    statsBar: 'backstage.network.stats',
+  },
+
+  // ── Network Item ───────────────────────────────
+  networkItem: {
+    /** Dynamic: backstage.network-item.{id} */
+    container: (id: string) => `backstage.network-item.${id}`,
+    methodBadge: (id: string) => `backstage.network-item.${id}.method`,
+    statusBadge: (id: string) => `backstage.network-item.${id}.status`,
+    url: (id: string) => `backstage.network-item.${id}.url`,
+    sectionTab: (id: string, section: string) => `backstage.network-item.${id}.section.${section}`,
+    curlButton: (id: string) => `backstage.network-item.${id}.curl`,
+  },
+
+  // ── Flags Tab ──────────────────────────────────
+  flagsTab: {
+    container: 'backstage.flags',
+    searchInput: 'backstage.flags.search',
+    statsBar: 'backstage.flags.stats',
+    list: 'backstage.flags.list',
+    /** Dynamic: backstage.flag.{key} — applied to the Switch */
+    flagSwitch: (key: string) => `backstage.flag.${key}`,
+    flagLabel: (key: string) => `backstage.flag.${key}.label`,
+    flagRow: (key: string) => `backstage.flag.${key}.row`,
+  },
+
+  // ── Storage Tab ────────────────────────────────
+  storageTab: {
+    container: 'backstage.storage',
+    searchInput: 'backstage.storage.search',
+    addButton: 'backstage.storage.add-button',
+    addForm: 'backstage.storage.add-form',
+    addKeyInput: 'backstage.storage.add-form.key',
+    addValueInput: 'backstage.storage.add-form.value',
+    addSubmitButton: 'backstage.storage.add-form.submit',
+    statsBar: 'backstage.storage.stats',
+    list: 'backstage.storage.list',
+    /** Dynamic: backstage.storage.entry.{key} */
+    entryRow: (key: string) => `backstage.storage.entry.${key}`,
+    entryEditButton: (key: string) => `backstage.storage.entry.${key}.edit`,
+    entryDeleteButton: (key: string) => `backstage.storage.entry.${key}.delete`,
+    entryEditInput: (key: string) => `backstage.storage.entry.${key}.edit-input`,
+    entrySaveButton: (key: string) => `backstage.storage.entry.${key}.save`,
+    entryCancelButton: (key: string) => `backstage.storage.entry.${key}.cancel`,
   },
 }

package/src/index.ts

@@ -8,9 +8,26 @@ export type {
   BackstageTheme,
   QuickAction,
   FeatureFlag,
+  StorageAdapter,
   AppInfoItem,
   LogEntry,
   NetworkEntry,
 } from './types'
 
 export { LogLevel, NetworkState } from './types'
+export { TestIDs, DarkTheme, LightTheme } from './constants'
+export type { ThemePreference } from './ThemeContext'
+
+// ─── Individual Components ───────────────────────────────────────────────────
+
+export { BackstagePanel } from './components/BackstagePanel'
+export { FloatingPill } from './components/FloatingPill'
+export { TabBar } from './components/TabBar'
+export { InfoTab } from './components/InfoTab'
+export { LogsTab } from './components/LogsTab'
+export { LogItem } from './components/LogItem'
+export { NetworkTab } from './components/NetworkTab'
+export { NetworkItem } from './components/NetworkItem'
+export { FlagsTab } from './components/FlagsTab'
+export { StorageTab } from './components/StorageTab'
+export { JsonTreeView } from './components/JsonTreeView'

package/src/types.ts

@@ -76,6 +76,19 @@ export interface FeatureFlag {
   description?: string
 }
 
+// ─── Storage Adapter ─────────────────────────────────────────────────────────
+
+export interface StorageAdapter {
+  /** Return all stored keys */
+  getAllKeys: () => Promise<string[]>
+  /** Get value for a key. Return null if not found */
+  getItem: (key: string) => Promise<string | null>
+  /** Set a value for a key */
+  setItem: (key: string, value: string) => Promise<void>
+  /** Remove an entry by key */
+  removeItem: (key: string) => Promise<void>
+}
+
 // ─── Extensible Tabs ─────────────────────────────────────────────────────────
 
 export interface BackstageTab {
@@ -114,6 +127,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
 
@@ -138,6 +154,9 @@ export interface BackstageProps {
   /** Callback when a feature flag is toggled */
   onToggleFeatureFlag?: (key: string, value: boolean) => void
 
+  /** Storage adapter for the Storage Viewer tab (AsyncStorage, MMKV, etc.) */
+  storageAdapter?: StorageAdapter
+
   /** Maximum number of logs to retain in memory. Default: 500 */
   maxLogs?: number
 
@@ -165,6 +184,12 @@ export interface BackstageProps {
   /** Text displayed on the floating pill. Defaults to appVersion or "DEV" */
   pillText?: string
 
+  /** Width of the floating pill. Default: 60 */
+  pillWidth?: number
+
+  /** Height of the floating pill. Default: 32 */
+  pillHeight?: number
+
   /** Whether to enable network request interception. Default: true */
   enableNetworkInspector?: boolean
 
@@ -179,6 +204,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 {