rn-backstage 1.3.0 → 1.4.0

package/src/components/BackstagePanel.tsx

@@ -1,277 +0,0 @@
-import React, { 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 type {
-  AppInfoItem,
-  BackstageStyleOverrides,
-  BackstageTab,
-  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
-
-  // 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,
-  styles: propStyles,
-  children,
-}) => {
-  const [activeTab, setActiveTab] = useState('info')
-  const theme = useBackstageTheme()
-  const styles = useMemo(() => createStyles(theme), [theme])
-
-  // 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>
-          <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>
-
-        {/* ── Tab Bar ─────────────────────────────────────────── */}
-        <TabBar tabs={allTabs} activeTab={activeTab} onTabChange={setActiveTab} />
-
-        {/* ── Tab Content ─────────────────────────────────────── */}
-        <View style={styles.content}>{renderTabContent()}</View>
-      </SafeAreaView>
-    </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',
-    },
-    content: {
-      flex: 1,
-    },
-  })

package/src/components/FlagsTab.tsx

@@ -1,200 +0,0 @@
-import React, { useMemo, useState } from 'react'
-import { ScrollView, StyleSheet, Switch, Text, TextInput, View } from 'react-native'
-import { MonospaceFont } from '../constants'
-import { useBackstageTheme } from '../ThemeContext'
-import type { FeatureFlag, BackstageTheme } from '../types'
-
-// ─── Types ───────────────────────────────────────────────────────────────────
-
-interface FlagsTabProps {
-  flags: FeatureFlag[]
-  onToggle?: (key: string, value: boolean) => void
-}
-
-// ─── Component ───────────────────────────────────────────────────────────────
-
-export const FlagsTab: React.FC<FlagsTabProps> = ({ flags, onToggle }) => {
-  const theme = useBackstageTheme()
-  const s = useMemo(() => createStyles(theme), [theme])
-  const [searchText, setSearchText] = useState('')
-
-  const filteredFlags = useMemo(() => {
-    if (!searchText.trim()) return flags
-    const query = searchText.toLowerCase()
-    return flags.filter(
-      f =>
-        f.label.toLowerCase().includes(query) ||
-        f.key.toLowerCase().includes(query) ||
-        (f.description && f.description.toLowerCase().includes(query)),
-    )
-  }, [flags, searchText])
-
-  const enabledCount = flags.filter(f => f.value).length
-
-  return (
-    <View style={s.container}>
-      <View style={s.searchContainer}>
-        <View style={s.searchInputWrapper}>
-          <Text style={s.searchIcon}>⌕</Text>
-          <TextInput
-            style={s.searchInput}
-            placeholder="Filter flags..."
-            placeholderTextColor={theme.textMuted}
-            value={searchText}
-            onChangeText={setSearchText}
-            autoCapitalize="none"
-            autoCorrect={false}
-            clearButtonMode="while-editing"
-            returnKeyType="search"
-          />
-        </View>
-      </View>
-
-      <View style={s.statsBar}>
-        <Text style={s.statText}>
-          {filteredFlags.length === flags.length
-            ? `${flags.length} flag${flags.length !== 1 ? 's' : ''}`
-            : `${filteredFlags.length} of ${flags.length}`}
-        </Text>
-        <Text style={s.statText}>
-          <Text style={s.statEnabled}>{enabledCount} on</Text>
-          {' · '}
-          <Text style={s.statDisabled}>{flags.length - enabledCount} off</Text>
-        </Text>
-      </View>
-
-      <ScrollView
-        style={s.list}
-        contentContainerStyle={filteredFlags.length === 0 ? s.emptyContainer : s.listContent}
-        showsVerticalScrollIndicator={false}
-      >
-        {filteredFlags.length === 0 ? (
-          <View style={s.emptyState}>
-            <Text style={s.emptyIcon}>🎚</Text>
-            <Text style={s.emptyTitle}>No flags match</Text>
-            <Text style={s.emptySubtitle}>Try adjusting your search</Text>
-          </View>
-        ) : (
-          filteredFlags.map((flag, index) => (
-            <View key={flag.key}>
-              <View style={s.flagRow}>
-                <View style={s.flagInfo}>
-                <View style={s.flagHeader}>
-                    <Text style={s.flagLabel} numberOfLines={2}>{flag.label}</Text>
-                  </View>
-                  <Text style={[s.flagKey, flag.value && s.flagKeyActive]}>{flag.key}</Text>
-                  {flag.description && <Text style={s.flagDescription}>{flag.description}</Text>}
-                </View>
-                <Switch
-                  testID={`backstage.flag.${flag.key}`}
-                  value={flag.value}
-                  onValueChange={(newValue: boolean) => onToggle?.(flag.key, newValue)}
-                  trackColor={{ false: theme.border, true: theme.accent }}
-                  thumbColor={flag.value ? '#FFFFFF' : theme.textMuted}
-                  ios_backgroundColor={theme.border}
-                />
-              </View>
-              {index < filteredFlags.length - 1 && <View style={s.divider} />}
-            </View>
-          ))
-        )}
-      </ScrollView>
-    </View>
-  )
-}
-
-// ─── Styles ──────────────────────────────────────────────────────────────────
-
-const createStyles = (t: BackstageTheme) =>
-  StyleSheet.create({
-    container: { flex: 1 },
-    searchContainer: {
-      paddingHorizontal: 14,
-      paddingVertical: 10,
-      borderBottomWidth: 1,
-      borderBottomColor: t.border,
-    },
-    searchInputWrapper: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      backgroundColor: t.surfaceElevated,
-      borderRadius: 10,
-      borderWidth: 1,
-      borderColor: t.border,
-      paddingHorizontal: 12,
-      height: 38,
-    },
-    searchIcon: { fontSize: 16, color: t.textMuted, marginRight: 8 },
-    searchInput: {
-      flex: 1,
-      fontFamily: MonospaceFont,
-      fontSize: 13,
-      color: t.text,
-      padding: 0,
-    },
-    statsBar: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      paddingHorizontal: 16,
-      paddingVertical: 6,
-      backgroundColor: t.surface,
-    },
-    statText: { fontFamily: MonospaceFont, fontSize: 11, color: t.textMuted },
-    statEnabled: { color: t.success, fontWeight: '700' },
-    statDisabled: { color: t.textMuted },
-    list: { flex: 1 },
-    listContent: { paddingHorizontal: 16, paddingVertical: 8 },
-    emptyContainer: { flex: 1, justifyContent: 'center' },
-    emptyState: { alignItems: 'center', justifyContent: 'center', padding: 40 },
-    emptyIcon: { fontSize: 48, marginBottom: 16, opacity: 0.5 },
-    emptyTitle: {
-      fontFamily: MonospaceFont,
-      fontSize: 16,
-      fontWeight: '700',
-      color: t.textSecondary,
-      marginBottom: 8,
-    },
-    emptySubtitle: {
-      fontFamily: MonospaceFont,
-      fontSize: 13,
-      color: t.textMuted,
-      textAlign: 'center',
-    },
-    flagRow: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      paddingVertical: 14,
-      paddingHorizontal: 4,
-    },
-    flagInfo: { flex: 1, marginRight: 16 },
-    flagHeader: { flexDirection: 'row', alignItems: 'center' },
-    flagLabel: {
-      fontFamily: MonospaceFont,
-      fontSize: 14,
-      color: t.text,
-      fontWeight: '600',
-    },
-    flagKey: {
-      fontFamily: MonospaceFont,
-      fontSize: 10,
-      color: t.textMuted,
-      backgroundColor: t.surfaceElevated,
-      borderRadius: 4,
-      paddingHorizontal: 6,
-      paddingVertical: 1,
-      overflow: 'hidden',
-      alignSelf: 'flex-start',
-      marginTop: 4,
-    },
-    flagKeyActive: { color: t.accent, backgroundColor: t.accentDim },
-    flagDescription: {
-      fontFamily: MonospaceFont,
-      fontSize: 12,
-      color: t.textMuted,
-      marginTop: 4,
-      lineHeight: 18,
-    },
-    divider: { height: 1, backgroundColor: t.border, marginHorizontal: 4 },
-  })