rn-backstage 1.4.0 → 1.4.2

package/src/components/TabBar.tsx

@@ -0,0 +1,154 @@
+import React, { useCallback, useMemo, useRef, useEffect } from 'react'
+import {
+  Animated,
+  LayoutChangeEvent,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+import { MonospaceFont } from '../constants'
+import { useBackstageTheme } from '../ThemeContext'
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface Tab {
+  key: string
+  title: string
+  icon?: string
+}
+
+interface TabBarProps {
+  tabs: Tab[]
+  activeTab: string
+  onTabChange: (key: string) => void
+}
+
+// ─── 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>>({})
+  const scrollRef = useRef<ScrollView>(null)
+
+  // Animate indicator when active tab changes
+  useEffect(() => {
+    const offset = tabOffsets.current[activeTab] || 0
+    Animated.spring(indicatorAnim, {
+      toValue: offset,
+      useNativeDriver: true,
+      friction: 8,
+      tension: 60,
+    }).start()
+  }, [activeTab, indicatorAnim])
+
+  const handleTabLayout = useCallback(
+    (key: string) => (e: LayoutChangeEvent) => {
+      const { x, width } = e.nativeEvent.layout
+      tabWidths.current[key] = width
+      tabOffsets.current[key] = x
+
+      // Re-animate if this is the active tab
+      if (key === activeTab) {
+        indicatorAnim.setValue(x)
+      }
+    },
+    [activeTab, indicatorAnim],
+  )
+
+  const activeWidth = tabWidths.current[activeTab] || 80
+
+  return (
+    <View style={styles.container}>
+      <ScrollView
+        ref={scrollRef}
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContent}
+      >
+        {tabs.map(tab => {
+          const isActive = tab.key === activeTab
+          return (
+            <TouchableOpacity
+              key={tab.key}
+              onPress={() => onTabChange(tab.key)}
+              onLayout={handleTabLayout(tab.key)}
+              style={styles.tab}
+              activeOpacity={0.7}
+              testID={`backstage.tab.${tab.key}`}
+            >
+              {tab.icon && (
+                <Text style={[styles.tabIcon, isActive && styles.tabIconActive]}>{tab.icon}</Text>
+              )}
+              <Text style={[styles.tabText, isActive && styles.tabTextActive]}>{tab.title}</Text>
+            </TouchableOpacity>
+          )
+        })}
+
+        {/* Animated underline */}
+        <Animated.View
+          style={[
+            styles.indicator,
+            {
+              width: activeWidth,
+              transform: [{ translateX: indicatorAnim }],
+            },
+          ]}
+        />
+      </ScrollView>
+    </View>
+  )
+}
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+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

@@ -0,0 +1,207 @@
+import { Dimensions, Platform } from 'react-native'
+import type { BackstageTheme } from './types'
+
+// ─── Metrics ─────────────────────────────────────────────────────────────────
+
+const { width: screenWidth, height: screenHeight } = Dimensions.get('window')
+
+export const Metrics = {
+  screenWidth,
+  screenHeight,
+  isIOS: Platform.OS === 'ios',
+  pillWidth: 72,
+  pillHeight: 32,
+  panelBorderRadius: 20,
+  tabBarHeight: 48,
+  headerHeight: 52,
+  sectionSpacing: 16,
+  contentPadding: 16,
+}
+
+// ─── Dark Theme ──────────────────────────────────────────────────────────────
+
+export const DarkTheme: BackstageTheme = {
+  background: '#0D0D12',
+  surface: '#16161E',
+  surfaceElevated: '#1E1E2A',
+  border: '#2A2A3A',
+  text: '#E8E8ED',
+  textSecondary: '#A0A0B0',
+  textMuted: '#606075',
+  accent: '#7C5CFC',
+  accentDim: 'rgba(124, 92, 252, 0.15)',
+  error: '#FF4D6A',
+  errorDim: 'rgba(255, 77, 106, 0.12)',
+  warning: '#FFB224',
+  warningDim: 'rgba(255, 178, 36, 0.12)',
+  success: '#34D399',
+  info: '#38BDF8',
+  infoDim: 'rgba(56, 189, 248, 0.12)',
+  debugColor: '#A78BFA',
+  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 ────────────────────────────────────────────────────────
+
+export const DEFAULT_MAX_NETWORK_ENTRIES = 500
+export const DEFAULT_MAX_NETWORK_BODY_SIZE = 65536 // 64 KB
+
+// ─── Monospace Font ──────────────────────────────────────────────────────────
+
+export const MonospaceFont = Platform.select({
+  ios: 'Menlo',
+  default: 'monospace',
+})
+
+// ─── 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: {
+    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: {
+    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: {
+    container: 'backstage.network',
+    searchInput: 'backstage.network.search',
+    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`,
+  },
+
+  // ── Bug Report ─────────────────────────────────
+  bugReport: {
+    triggerButton: 'backstage.bug-report.trigger',
+    modal: 'backstage.bug-report.modal',
+    titleInput: 'backstage.bug-report.title',
+    descriptionInput: 'backstage.bug-report.description',
+    severityPicker: 'backstage.bug-report.severity',
+    severityOption: (severity: string) => `backstage.bug-report.severity.${severity}`,
+    toggleDeviceInfo: 'backstage.bug-report.toggle.device-info',
+    toggleLogs: 'backstage.bug-report.toggle.logs',
+    toggleNetwork: 'backstage.bug-report.toggle.network',
+    toggleState: 'backstage.bug-report.toggle.state',
+    toggleScreenshot: 'backstage.bug-report.toggle.screenshot',
+    shareButton: 'backstage.bug-report.share',
+    cancelButton: 'backstage.bug-report.cancel',
+  },
+}

package/src/index.ts

@@ -0,0 +1,37 @@
+export { Backstage } from './Backstage'
+
+export type {
+  BackstageProps,
+  BackstageRef,
+  BackstageTab,
+  BackstageStyleOverrides,
+  BackstageTheme,
+  QuickAction,
+  FeatureFlag,
+  StorageAdapter,
+  BugReport,
+  BugReportConfig,
+  BugReportSeverity,
+  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 { BugReportComposer } from './components/BugReportComposer'
+export { JsonTreeView } from './components/JsonTreeView'

package/src/log-interceptor.ts

@@ -0,0 +1,148 @@
+import { LogLevel } from './types'
+import type { LogEntry } from './types'
+import { formatLogMessage } from './utils/stringify'
+import { DEFAULT_MAX_LOGS } from './constants'
+import { isInsideNetworkCallback } from './network-interceptor'
+
+// ─── Original Console Methods ────────────────────────────────────────────────
+
+const originalConsole = {
+  log: console.log,
+  debug: console.debug,
+  info: console.info,
+  warn: console.warn,
+  error: console.error,
+}
+
+type LogCallback = (entry: LogEntry) => void
+
+let activeCallback: LogCallback | null = null
+let isInstalled = false
+let autoFilterNetwork = false
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+function generateId(): string {
+  return `${Date.now()}_${Math.random().toString(36).substring(2, 9)}`
+}
+
+function createLogEntry(level: LogLevel, message: unknown, optionalParams: unknown[]): LogEntry {
+  const formattedMessage = formatLogMessage(message, optionalParams)
+  const hasObjectData =
+    (typeof message === 'object' && message !== null) ||
+    optionalParams.some(p => typeof p === 'object' && p !== null)
+
+  return {
+    id: generateId(),
+    level,
+    message: formattedMessage,
+    data: hasObjectData ? { message, params: optionalParams } : undefined,
+    timestamp: Date.now(),
+  }
+}
+
+function shouldLog(message: unknown, filters: string[]): boolean {
+  if (filters.length === 0) return true
+
+  const messageStr =
+    typeof message === 'string'
+      ? message.toLowerCase()
+      : typeof message === 'object' && message !== null
+        ? JSON.stringify(message).toLowerCase()
+        : String(message).toLowerCase()
+
+  return !filters.some(filter => messageStr.includes(filter.toLowerCase()))
+}
+
+// ─── Install / Uninstall ─────────────────────────────────────────────────────
+
+export function installInterceptor(
+  callback: LogCallback,
+  filters: string[] = [],
+  options: { autoFilterNetworkLogs?: boolean } = {},
+): void {
+  if (isInstalled) {
+    // Just update callback if already installed
+    activeCallback = callback
+    autoFilterNetwork = options.autoFilterNetworkLogs ?? true
+    return
+  }
+
+  activeCallback = callback
+  autoFilterNetwork = options.autoFilterNetworkLogs ?? true
+  isInstalled = true
+
+  const levels: Array<[LogLevel, keyof typeof originalConsole]> = [
+    [LogLevel.log, 'log'],
+    [LogLevel.debug, 'debug'],
+    [LogLevel.info, 'info'],
+    [LogLevel.warn, 'warn'],
+    [LogLevel.error, 'error'],
+  ]
+
+  for (const [level, method] of levels) {
+    console[method] = (message?: unknown, ...optionalParams: unknown[]) => {
+      // Always forward to original console
+      originalConsole[method](message, ...optionalParams)
+
+      // Check filters
+      if (!shouldLog(message, filters)) return
+
+      // Skip logs from inside network callbacks (e.g., Axios interceptors)
+      if (autoFilterNetwork && isInsideNetworkCallback()) return
+
+      // Create log entry and notify
+      if (activeCallback) {
+        const entry = createLogEntry(level, message, optionalParams)
+        activeCallback(entry)
+      }
+    }
+  }
+}
+
+export function uninstallInterceptor(): void {
+  if (!isInstalled) return
+
+  console.log = originalConsole.log
+  console.debug = originalConsole.debug
+  console.info = originalConsole.info
+  console.warn = originalConsole.warn
+  console.error = originalConsole.error
+
+  activeCallback = null
+  isInstalled = false
+}
+
+// ─── Log Buffer ──────────────────────────────────────────────────────────────
+
+export class LogBuffer {
+  private logs: LogEntry[] = []
+  private maxSize: number
+
+  constructor(maxSize = DEFAULT_MAX_LOGS) {
+    this.maxSize = maxSize
+  }
+
+  push(entry: LogEntry): void {
+    this.logs.unshift(entry)
+    if (this.logs.length > this.maxSize) {
+      this.logs = this.logs.slice(0, this.maxSize)
+    }
+  }
+
+  getAll(): LogEntry[] {
+    return [...this.logs]
+  }
+
+  clear(): void {
+    this.logs = []
+  }
+
+  get hasErrors(): boolean {
+    return this.logs.some(log => log.level === LogLevel.error)
+  }
+
+  get size(): number {
+    return this.logs.length
+  }
+}