rn-backstage 1.4.2 → 1.4.3

package/src/components/BackstagePanel.tsx

@@ -1,349 +0,0 @@
-import React, { useEffect, useMemo, useState } from 'react'
-import {
-  Modal,
-  SafeAreaView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  TouchableOpacity,
-  View,
-} from 'react-native'
-import { MonospaceFont, TestIDs } from '../constants'
-import { useBackstageTheme } from '../ThemeContext'
-import { TabBar } from './TabBar'
-import { InfoTab } from './InfoTab'
-import { LogsTab } from './LogsTab'
-import { NetworkTab } from './NetworkTab'
-import { FlagsTab } from './FlagsTab'
-import { StorageTab } from './StorageTab'
-import { BugReportComposer } from './BugReportComposer'
-import type {
-  AppInfoItem,
-  BackstageStyleOverrides,
-  BackstageTab,
-  BugReportConfig,
-  FeatureFlag,
-  LogEntry,
-  NetworkEntry,
-  QuickAction,
-  StorageAdapter,
-} from '../types'
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-interface BackstagePanelProps {
-  visible: boolean
-  onClose: () => void
-
-  // Info tab props
-  appVersion?: string
-  buildNumber?: string
-  bundleId?: string
-  deviceInfo?: AppInfoItem[]
-  state?: Record<string, unknown>
-  quickActions?: QuickAction[]
-  featureFlags?: FeatureFlag[]
-  onToggleFeatureFlag?: (key: string, value: boolean) => void
-
-  // Logs tab props
-  logs: LogEntry[]
-  onRefreshLogs: () => void
-  onCopyLogs?: (logs: string) => void
-
-  // Network tab props
-  networkEntries: NetworkEntry[]
-  onRefreshNetwork: () => void
-  onClearNetwork: () => void
-  onCopyNetwork?: (text: string) => void
-
-  // Extensibility
-  extraTabs?: BackstageTab[]
-
-  // JSON tree
-  jsonMaxDepth?: number
-
-  // Storage
-  storageAdapter?: StorageAdapter
-
-  // Bug report
-  bugReportConfig?: BugReportConfig
-  bugReportOpenerRef?: React.MutableRefObject<(() => void) | null>
-
-  // Styling
-  styles?: BackstageStyleOverrides
-  children?: React.ReactNode
-}
-
-// ─── Built-in Tab Definitions ────────────────────────────────────────────
-
-const ALWAYS_ON_TABS = [
-  { key: 'info', title: 'Info', icon: 'ℹ️' },
-  { key: 'network', title: 'Network', icon: '🌐' },
-]
-
-const FLAGS_TAB = { key: 'flags', title: 'Flags', icon: '🎚' }
-
-const STORAGE_TAB = { key: 'storage', title: 'Storage', icon: '🗄' }
-
-const LOGS_TAB = { key: 'logs', title: 'Logs', icon: '📋' }
-
-// ─── Component ───────────────────────────────────────────────────────────────
-
-export const BackstagePanel: React.FC<BackstagePanelProps> = ({
-  visible,
-  onClose,
-  appVersion,
-  buildNumber,
-  bundleId,
-  deviceInfo,
-  state,
-  quickActions,
-  featureFlags,
-  onToggleFeatureFlag,
-  logs,
-  onRefreshLogs,
-  onCopyLogs,
-  networkEntries,
-  onRefreshNetwork,
-  onClearNetwork,
-  onCopyNetwork,
-  extraTabs = [],
-  jsonMaxDepth,
-  storageAdapter,
-  bugReportConfig,
-  bugReportOpenerRef,
-  styles: propStyles,
-  children,
-}) => {
-  const [activeTab, setActiveTab] = useState('info')
-  const [bugReportVisible, setBugReportVisible] = useState(false)
-  const theme = useBackstageTheme()
-  const styles = useMemo(() => createStyles(theme), [theme])
-
-  // Reset to Info tab when panel closes so indicator and content stay in sync
-  useEffect(() => {
-    if (!visible) {
-      setActiveTab('info')
-    }
-  }, [visible])
-
-  // Register opener callback for the parent ref
-  useEffect(() => {
-    if (!bugReportOpenerRef) return
-    bugReportOpenerRef.current = () => setBugReportVisible(true)
-    return () => {
-      bugReportOpenerRef.current = null
-    }
-  }, [bugReportOpenerRef])
-
-  // Compose all tabs: built-in (conditionally including Flags) + extra
-  const hasFlags = featureFlags && featureFlags.length > 0
-  const hasStorage = !!storageAdapter
-  const allTabs = [
-    ...ALWAYS_ON_TABS,
-    ...(hasFlags ? [FLAGS_TAB] : []),
-    ...(hasStorage ? [STORAGE_TAB] : []),
-    LOGS_TAB,
-    ...extraTabs.map(t => ({ key: t.key, title: t.title, icon: t.icon })),
-  ]
-
-  // Render active tab content
-  const renderTabContent = () => {
-    switch (activeTab) {
-      case 'info':
-        return (
-          <InfoTab
-            appVersion={appVersion}
-            buildNumber={buildNumber}
-            bundleId={bundleId}
-            deviceInfo={deviceInfo}
-            state={state}
-            quickActions={quickActions}
-            jsonMaxDepth={jsonMaxDepth}
-            onClosePanel={onClose}
-            styles={propStyles}
-          >
-            {children}
-          </InfoTab>
-        )
-      case 'flags':
-        return <FlagsTab flags={featureFlags ?? []} onToggle={onToggleFeatureFlag} />
-      case 'storage':
-        return storageAdapter ? (
-          <StorageTab adapter={storageAdapter} jsonMaxDepth={jsonMaxDepth} />
-        ) : null
-      case 'network':
-        return (
-          <NetworkTab
-            entries={networkEntries}
-            onRefresh={onRefreshNetwork}
-            onClear={onClearNetwork}
-            onCopy={onCopyNetwork}
-            jsonMaxDepth={jsonMaxDepth}
-          />
-        )
-      case 'logs':
-        return (
-          <LogsTab
-            logs={logs}
-            onRefresh={onRefreshLogs}
-            onCopyLogs={onCopyLogs}
-            jsonMaxDepth={jsonMaxDepth}
-            styles={propStyles}
-          />
-        )
-      default: {
-        // Render extra tab content
-        const extraTab = extraTabs.find(t => t.key === activeTab)
-        if (extraTab) {
-          return <>{extraTab.render()}</>
-        }
-        return null
-      }
-    }
-  }
-
-  return (
-    <Modal
-      testID={TestIDs.panelModal}
-      animationType="slide"
-      transparent={false}
-      visible={visible}
-      onRequestClose={onClose}
-      statusBarTranslucent
-    >
-      <StatusBar
-        barStyle={theme.background < '#888' ? 'light-content' : 'dark-content'}
-        backgroundColor={theme.background}
-      />
-      <SafeAreaView testID={TestIDs.panel} style={[styles.safeArea, propStyles?.panelStyle]}>
-        {/* ── Header ──────────────────────────────────────────── */}
-        <View testID={TestIDs.header.container} style={styles.header}>
-          <View style={styles.headerLeft}>
-            <Text style={styles.headerBrand}>⚙</Text>
-            <Text
-              testID={TestIDs.header.title}
-              style={[styles.headerTitle, propStyles?.headerTitleStyle]}
-            >
-              Backstage
-            </Text>
-          </View>
-          <View style={styles.headerRight}>
-            {bugReportConfig && (
-              <TouchableOpacity
-                testID={TestIDs.bugReport.triggerButton}
-                style={styles.headerButton}
-                onPress={() => setBugReportVisible(true)}
-                activeOpacity={0.7}
-                hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-              >
-                <Text style={styles.headerButtonText}>🐛</Text>
-              </TouchableOpacity>
-            )}
-            <TouchableOpacity
-              testID={TestIDs.header.closeButton}
-              style={styles.closeButton}
-              onPress={onClose}
-              activeOpacity={0.7}
-              hitSlop={{ top: 8, bottom: 8, left: 8, right: 8 }}
-            >
-              <Text style={styles.closeButtonText}>✕</Text>
-            </TouchableOpacity>
-          </View>
-        </View>
-
-        {/* ── Tab Bar ─────────────────────────────────────────── */}
-        <TabBar tabs={allTabs} activeTab={activeTab} onTabChange={setActiveTab} />
-
-        {/* ── Tab Content ─────────────────────────────────────── */}
-        <View style={styles.content}>{renderTabContent()}</View>
-      </SafeAreaView>
-
-      {/* ── Bug Report Composer ───────────────────────────────── */}
-      {bugReportConfig && (
-        <BugReportComposer
-          visible={bugReportVisible}
-          onClose={() => setBugReportVisible(false)}
-          config={bugReportConfig}
-          logs={logs}
-          networkEntries={networkEntries}
-          state={state}
-          appVersion={appVersion}
-          buildNumber={buildNumber}
-          bundleId={bundleId}
-          deviceInfo={deviceInfo}
-        />
-      )}
-    </Modal>
-  )
-}
-
-// ─── Styles ──────────────────────────────────────────────────────────────────
-
-const createStyles = (t: import('../types').BackstageTheme) =>
-  StyleSheet.create({
-    safeArea: {
-      flex: 1,
-      backgroundColor: t.background,
-    },
-    header: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      justifyContent: 'space-between',
-      paddingHorizontal: 16,
-      paddingVertical: 12,
-      borderBottomWidth: 1,
-      borderBottomColor: t.border,
-    },
-    headerLeft: {
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-    headerBrand: {
-      fontSize: 20,
-      marginRight: 8,
-    },
-    headerTitle: {
-      fontFamily: MonospaceFont,
-      fontSize: 18,
-      fontWeight: '800',
-      color: t.text,
-      letterSpacing: 1,
-    },
-    closeButton: {
-      width: 32,
-      height: 32,
-      borderRadius: 16,
-      backgroundColor: t.surfaceElevated,
-      borderWidth: 1,
-      borderColor: t.border,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    closeButtonText: {
-      fontSize: 14,
-      color: t.textSecondary,
-      fontWeight: '700',
-    },
-    headerRight: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      gap: 8,
-    },
-    headerButton: {
-      width: 32,
-      height: 32,
-      borderRadius: 16,
-      backgroundColor: t.surfaceElevated,
-      borderWidth: 1,
-      borderColor: t.border,
-      alignItems: 'center',
-      justifyContent: 'center',
-    },
-    headerButtonText: {
-      fontSize: 16,
-    },
-    content: {
-      flex: 1,
-    },
-  })