rn-backstage 1.0.0

package/src/components/BackstagePanel.tsx

@@ -0,0 +1,208 @@
+import React, { useState } from 'react'
+import {
+  Modal,
+  SafeAreaView,
+  StatusBar,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  View,
+} from 'react-native'
+import { DarkTheme, MonospaceFont, TestIDs } from '../constants'
+import { TabBar } from './TabBar'
+import { InfoTab } from './InfoTab'
+import { LogsTab } from './LogsTab'
+import type {
+  AppInfoItem,
+  BackstageStyleOverrides,
+  BackstageTab,
+  LogEntry,
+  QuickAction,
+} 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[]
+
+  // Logs tab props
+  logs: LogEntry[]
+  onRefreshLogs: () => void
+  onCopyLogs?: (logs: string) => void
+
+  // Extensibility
+  extraTabs?: BackstageTab[]
+
+  // Styling
+  styles?: BackstageStyleOverrides
+  children?: React.ReactNode
+}
+
+// ─── Built-in Tab Definitions ────────────────────────────────────────────────
+
+const BUILT_IN_TABS = [
+  { key: 'info', title: 'Info', icon: 'ℹ️' },
+  { key: 'logs', title: 'Logs', icon: '📋' },
+]
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export const BackstagePanel: React.FC<BackstagePanelProps> = ({
+  visible,
+  onClose,
+  appVersion,
+  buildNumber,
+  bundleId,
+  deviceInfo,
+  state,
+  quickActions,
+  logs,
+  onRefreshLogs,
+  onCopyLogs,
+  extraTabs = [],
+  styles: propStyles,
+  children,
+}) => {
+  const [activeTab, setActiveTab] = useState('info')
+
+  // Compose all tabs: built-in + extra
+  const allTabs = [
+    ...BUILT_IN_TABS,
+    ...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}
+            onClosePanel={onClose}
+            styles={propStyles}
+          >
+            {children}
+          </InfoTab>
+        )
+      case 'logs':
+        return (
+          <LogsTab
+            logs={logs}
+            onRefresh={onRefreshLogs}
+            onCopyLogs={onCopyLogs}
+            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.panel}
+      animationType="slide"
+      transparent={false}
+      visible={visible}
+      onRequestClose={onClose}
+      statusBarTranslucent
+    >
+      <StatusBar barStyle="light-content" backgroundColor={DarkTheme.background} />
+      <SafeAreaView style={[styles.safeArea, propStyles?.panelStyle]}>
+        {/* ── Header ──────────────────────────────────────────── */}
+        <View style={styles.header}>
+          <View style={styles.headerLeft}>
+            <Text style={styles.headerBrand}>⚙</Text>
+            <Text 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 styles = StyleSheet.create({
+  safeArea: {
+    flex: 1,
+    backgroundColor: DarkTheme.background,
+  },
+  header: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    borderBottomWidth: 1,
+    borderBottomColor: DarkTheme.border,
+  },
+  headerLeft: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  headerBrand: {
+    fontSize: 20,
+    marginRight: 8,
+  },
+  headerTitle: {
+    fontFamily: MonospaceFont,
+    fontSize: 18,
+    fontWeight: '800',
+    color: DarkTheme.text,
+    letterSpacing: 1,
+  },
+  closeButton: {
+    width: 32,
+    height: 32,
+    borderRadius: 16,
+    backgroundColor: DarkTheme.surfaceElevated,
+    borderWidth: 1,
+    borderColor: DarkTheme.border,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  closeButtonText: {
+    fontSize: 14,
+    color: DarkTheme.textSecondary,
+    fontWeight: '700',
+  },
+  content: {
+    flex: 1,
+  },
+})

package/src/components/FloatingPill.tsx

@@ -0,0 +1,150 @@
+import React, { useRef } from 'react'
+import { Animated, Dimensions, PanResponder, StyleSheet, Text } from 'react-native'
+import { DarkTheme, Metrics, MonospaceFont } from '../constants'
+import type { BackstageStyleOverrides } from '../types'
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface FloatingPillProps {
+  text: string
+  hasError: boolean
+  onPress: () => void
+  initialX?: number
+  initialY?: number
+  styles?: BackstageStyleOverrides
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+const PILL_WIDTH = Metrics.pillWidth
+const PILL_HEIGHT = Metrics.pillHeight
+const DRAG_THRESHOLD = 5
+
+function clampPosition(x: number, y: number): { x: number; y: number } {
+  const { width, height } = Dimensions.get('window')
+  return {
+    x: Math.max(0, Math.min(x, width - PILL_WIDTH)),
+    y: Math.max(0, Math.min(y, height - PILL_HEIGHT)),
+  }
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export const FloatingPill: React.FC<FloatingPillProps> = ({
+  text,
+  hasError,
+  onPress,
+  initialX,
+  initialY,
+  styles: propStyles,
+}) => {
+  const { width: screenW, height: screenH } = Dimensions.get('window')
+  const defaultX = initialX ?? screenW - PILL_WIDTH - 16
+  const defaultY = initialY ?? screenH - PILL_HEIGHT - 120
+
+  const pan = useRef(new Animated.ValueXY({ x: defaultX, y: defaultY })).current
+  const lastPosition = useRef({ x: defaultX, y: defaultY })
+  const isDragging = useRef(false)
+  const dragDistance = useRef(0)
+
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => true,
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        return (
+          Math.abs(gestureState.dx) > DRAG_THRESHOLD || Math.abs(gestureState.dy) > DRAG_THRESHOLD
+        )
+      },
+      onPanResponderGrant: () => {
+        isDragging.current = false
+        dragDistance.current = 0
+        pan.setOffset({
+          x: lastPosition.current.x,
+          y: lastPosition.current.y,
+        })
+        pan.setValue({ x: 0, y: 0 })
+      },
+      onPanResponderMove: (_, gestureState) => {
+        dragDistance.current = Math.sqrt(
+          gestureState.dx * gestureState.dx + gestureState.dy * gestureState.dy,
+        )
+        if (dragDistance.current > DRAG_THRESHOLD) {
+          isDragging.current = true
+        }
+        Animated.event([null, { dx: pan.x, dy: pan.y }], {
+          useNativeDriver: false,
+        })(_, gestureState)
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        pan.flattenOffset()
+
+        const newPos = clampPosition(
+          lastPosition.current.x + gestureState.dx,
+          lastPosition.current.y + gestureState.dy,
+        )
+
+        lastPosition.current = newPos
+
+        Animated.spring(pan, {
+          toValue: newPos,
+          useNativeDriver: false,
+          friction: 7,
+          tension: 40,
+        }).start()
+
+        // Only trigger tap if drag distance was minimal
+        if (!isDragging.current) {
+          onPress()
+        }
+      },
+    }),
+  ).current
+
+  const backgroundColor = hasError ? DarkTheme.error : DarkTheme.accent
+  const shadowColor = hasError ? DarkTheme.error : DarkTheme.accent
+
+  return (
+    <Animated.View
+      {...panResponder.panHandlers}
+      style={[
+        styles.pill,
+        {
+          backgroundColor,
+          transform: pan.getTranslateTransform(),
+          shadowColor,
+        },
+        propStyles?.pillStyle,
+      ]}
+    >
+      <Text style={[styles.pillText, propStyles?.pillTextStyle]} numberOfLines={1}>
+        {text}
+      </Text>
+    </Animated.View>
+  )
+}
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  pill: {
+    position: 'absolute',
+    minWidth: PILL_WIDTH,
+    height: PILL_HEIGHT,
+    borderRadius: PILL_HEIGHT / 2,
+    paddingHorizontal: 14,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 99999,
+    elevation: 10,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.4,
+    shadowRadius: 8,
+  },
+  pillText: {
+    fontFamily: MonospaceFont,
+    fontSize: 12,
+    fontWeight: '700',
+    color: '#FFFFFF',
+    letterSpacing: 0.5,
+  },
+})

package/src/components/InfoTab.tsx

@@ -0,0 +1,264 @@
+import React from 'react'
+import { Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { DarkTheme, MonospaceFont } from '../constants'
+import { JsonTreeView } from './JsonTreeView'
+import type { AppInfoItem, BackstageStyleOverrides, QuickAction } from '../types'
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface InfoTabProps {
+  appVersion?: string
+  buildNumber?: string
+  bundleId?: string
+  deviceInfo?: AppInfoItem[]
+  state?: Record<string, unknown>
+  quickActions?: QuickAction[]
+  onClosePanel?: () => void
+  styles?: BackstageStyleOverrides
+  children?: React.ReactNode
+}
+
+// ─── Info Row ────────────────────────────────────────────────────────────────
+
+const InfoRow: React.FC<{
+  label: string
+  value: string
+  labelStyle?: BackstageStyleOverrides['infoLabelStyle']
+  valueStyle?: BackstageStyleOverrides['infoValueStyle']
+}> = ({ label, value, labelStyle, valueStyle }) => (
+  <View style={styles.infoRow}>
+    <Text style={[styles.infoLabel, labelStyle]} numberOfLines={1}>
+      {label}
+    </Text>
+    <Text style={[styles.infoValue, valueStyle]} numberOfLines={2} selectable>
+      {value}
+    </Text>
+  </View>
+)
+
+// ─── Section Header ──────────────────────────────────────────────────────────
+
+const SectionHeader: React.FC<{
+  title: string
+  titleStyle?: BackstageStyleOverrides['sectionTitleStyle']
+}> = ({ title, titleStyle }) => <Text style={[styles.sectionTitle, titleStyle]}>{title}</Text>
+
+// ─── Action Button ───────────────────────────────────────────────────────────
+
+const ActionButton: React.FC<{
+  action: QuickAction
+  onClosePanel?: () => void
+  buttonStyle?: BackstageStyleOverrides['actionButtonStyle']
+  buttonTitleStyle?: BackstageStyleOverrides['actionButtonTitleStyle']
+}> = ({ action, onClosePanel, buttonStyle, buttonTitleStyle }) => {
+  const handlePress = () => {
+    action.onPress()
+    if (action.closeOnPress && onClosePanel) {
+      onClosePanel()
+    }
+  }
+
+  return (
+    <TouchableOpacity
+      testID={action.testID}
+      style={[
+        styles.actionButton,
+        action.destructive && styles.actionButtonDestructive,
+        buttonStyle,
+      ]}
+      onPress={handlePress}
+      activeOpacity={0.7}
+    >
+      {action.icon && <Text style={styles.actionIcon}>{action.icon}</Text>}
+      <Text
+        style={[
+          styles.actionButtonTitle,
+          action.destructive && styles.actionButtonTitleDestructive,
+          buttonTitleStyle,
+        ]}
+      >
+        {action.title}
+      </Text>
+    </TouchableOpacity>
+  )
+}
+
+// ─── Main Component ──────────────────────────────────────────────────────────
+
+export const InfoTab: React.FC<InfoTabProps> = ({
+  appVersion,
+  buildNumber,
+  bundleId,
+  deviceInfo = [],
+  state,
+  quickActions = [],
+  onClosePanel,
+  styles: propStyles,
+  children,
+}) => {
+  // Built-in device info from Platform API
+  const builtInInfo: AppInfoItem[] = [
+    { label: 'Platform', value: Platform.OS.toUpperCase() },
+    { label: 'OS Version', value: String(Platform.Version) },
+  ]
+
+  if (appVersion) {
+    builtInInfo.push({ label: 'App Version', value: appVersion })
+  }
+  if (buildNumber) {
+    builtInInfo.push({ label: 'Build Number', value: buildNumber })
+  }
+  if (bundleId) {
+    builtInInfo.push({ label: 'Bundle ID', value: bundleId })
+  }
+
+  const allInfo = [...builtInInfo, ...deviceInfo]
+
+  return (
+    <ScrollView
+      style={styles.container}
+      contentContainerStyle={styles.scrollContent}
+      showsVerticalScrollIndicator={false}
+    >
+      {/* ── Device Info Section ─────────────────────────────────── */}
+      <View style={styles.section}>
+        <SectionHeader title="DEVICE INFO" titleStyle={propStyles?.sectionTitleStyle} />
+        <View style={styles.card}>
+          {allInfo.map((item, index) => (
+            <React.Fragment key={`info_${index}`}>
+              <InfoRow
+                label={item.label}
+                value={item.value}
+                labelStyle={propStyles?.infoLabelStyle}
+                valueStyle={propStyles?.infoValueStyle}
+              />
+              {index < allInfo.length - 1 && <View style={styles.divider} />}
+            </React.Fragment>
+          ))}
+        </View>
+      </View>
+
+      {/* ── State Tree Section ──────────────────────────────────── */}
+      {state && Object.keys(state).length > 0 && (
+        <View style={styles.section}>
+          <SectionHeader title="STATE TREE" titleStyle={propStyles?.sectionTitleStyle} />
+          <View style={styles.card}>
+            <JsonTreeView data={state} hideRoot />
+          </View>
+        </View>
+      )}
+
+      {/* ── Quick Actions Section ───────────────────────────────── */}
+      {quickActions.length > 0 && (
+        <View style={styles.section}>
+          <SectionHeader title="QUICK ACTIONS" titleStyle={propStyles?.sectionTitleStyle} />
+          <View style={styles.actionsGrid}>
+            {quickActions.map((action, index) => (
+              <ActionButton
+                key={`action_${index}`}
+                action={action}
+                onClosePanel={onClosePanel}
+                buttonStyle={propStyles?.actionButtonStyle}
+                buttonTitleStyle={propStyles?.actionButtonTitleStyle}
+              />
+            ))}
+          </View>
+        </View>
+      )}
+
+      {/* ── Custom Children ─────────────────────────────────────── */}
+      {children && <View style={styles.section}>{children}</View>}
+    </ScrollView>
+  )
+}
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContent: {
+    padding: 16,
+    paddingBottom: 32,
+  },
+  section: {
+    marginBottom: 20,
+  },
+  sectionTitle: {
+    fontFamily: MonospaceFont,
+    fontSize: 11,
+    fontWeight: '700',
+    color: DarkTheme.textMuted,
+    letterSpacing: 1.5,
+    marginBottom: 8,
+    paddingLeft: 4,
+  },
+  card: {
+    backgroundColor: DarkTheme.surfaceElevated,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: DarkTheme.border,
+    padding: 12,
+    overflow: 'hidden',
+  },
+  infoRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingVertical: 8,
+    paddingHorizontal: 4,
+  },
+  infoLabel: {
+    fontFamily: MonospaceFont,
+    fontSize: 13,
+    color: DarkTheme.textSecondary,
+    flex: 1,
+  },
+  infoValue: {
+    fontFamily: MonospaceFont,
+    fontSize: 13,
+    color: DarkTheme.text,
+    fontWeight: '600',
+    textAlign: 'right',
+    flex: 1,
+    marginLeft: 12,
+  },
+  divider: {
+    height: 1,
+    backgroundColor: DarkTheme.border,
+    marginHorizontal: 4,
+  },
+  actionsGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 10,
+  },
+  actionButton: {
+    backgroundColor: DarkTheme.accentDim,
+    borderRadius: 10,
+    borderWidth: 1,
+    borderColor: DarkTheme.accent,
+    paddingVertical: 10,
+    paddingHorizontal: 18,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  actionButtonDestructive: {
+    backgroundColor: DarkTheme.errorDim,
+    borderColor: DarkTheme.error,
+  },
+  actionIcon: {
+    fontSize: 14,
+    marginRight: 6,
+  },
+  actionButtonTitle: {
+    fontFamily: MonospaceFont,
+    fontSize: 13,
+    fontWeight: '600',
+    color: DarkTheme.accent,
+  },
+  actionButtonTitleDestructive: {
+    color: DarkTheme.error,
+  },
+})