rn-backstage 1.4.2 → 1.4.3

package/src/components/TabBar.tsx

@@ -1,154 +0,0 @@
-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

@@ -1,207 +0,0 @@
-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

@@ -1,37 +0,0 @@
-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

@@ -1,148 +0,0 @@
-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
-  }
-}