rn-backstage 1.2.1 → 1.3.0

package/src/constants.ts

@@ -81,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,6 +8,7 @@ export type {
   BackstageTheme,
   QuickAction,
   FeatureFlag,
+  StorageAdapter,
   AppInfoItem,
   LogEntry,
   NetworkEntry,
@@ -16,3 +17,17 @@ export type {
 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 {
@@ -141,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
 
@@ -168,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