rn-backstage 1.4.1 → 1.4.2

package/src/components/FlagsTab.tsx

@@ -0,0 +1,207 @@
+import React, { useMemo, useState } from 'react'
+import { Platform, ScrollView, StyleSheet, Switch, Text, TextInput, View } from 'react-native'
+import { MonospaceFont } from '../constants'
+import { useBackstageTheme } from '../ThemeContext'
+import type { FeatureFlag, BackstageTheme } from '../types'
+
+// iOS 26+ uses the Liquid Glass design system which conflicts with custom
+// ios_backgroundColor / thumbColor on Switch — let the system style it instead.
+const isLiquidGlass =
+  Platform.OS === 'ios' && parseInt(String(Platform.Version), 10) >= 26
+
+// ─── 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={isLiquidGlass ? undefined : (flag.value ? '#FFFFFF' : theme.textMuted)}
+                  ios_backgroundColor={isLiquidGlass ? undefined : theme.border}
+                  style={s.switch}
+                />
+              </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 },
+    switch: { flexShrink: 0 },
+  })

package/src/components/FloatingPill.tsx

@@ -0,0 +1,247 @@
+import React, { useCallback, useRef, useState } from 'react'
+import {
+  Animated,
+  Dimensions,
+  LayoutChangeEvent,
+  PanResponder,
+  SafeAreaView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native'
+import { Metrics, MonospaceFont, TestIDs } from '../constants'
+import { useBackstageTheme } from '../ThemeContext'
+import type { BackstageStyleOverrides } from '../types'
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface FloatingPillProps {
+  text: string
+  hasError: boolean
+  onPress: () => void
+  initialX?: number
+  initialY?: number
+  pillWidth?: number
+  pillHeight?: number
+  styles?: BackstageStyleOverrides
+}
+
+// ─── Helpers ─────────────────────────────────────────────────────────────────
+
+const PILL_WIDTH = Metrics.pillWidth
+const PILL_HEIGHT = Metrics.pillHeight
+const DRAG_THRESHOLD = 5
+const INSET_PADDING = 8 // extra padding from safe area edges
+
+interface SafeAreaInsets {
+  top: number
+  bottom: number
+  left: number
+  right: number
+}
+
+function clampPosition(
+  x: number,
+  y: number,
+  insets: SafeAreaInsets,
+  pillW: number,
+  pillH: number,
+): { x: number; y: number } {
+  const { width, height } = Dimensions.get('window')
+  return {
+    x: Math.max(
+      insets.left + INSET_PADDING,
+      Math.min(x, width - pillW - insets.right - INSET_PADDING),
+    ),
+    y: Math.max(
+      insets.top + INSET_PADDING,
+      Math.min(y, height - pillH - insets.bottom - INSET_PADDING),
+    ),
+  }
+}
+
+// ─── Component ───────────────────────────────────────────────────────────────
+
+export const FloatingPill: React.FC<FloatingPillProps> = ({
+  text,
+  hasError,
+  onPress,
+  initialX,
+  initialY,
+  pillWidth: propWidth,
+  pillHeight: propHeight,
+  styles: propStyles,
+}) => {
+  const pillW = propWidth ?? PILL_WIDTH
+  const pillH = propHeight ?? PILL_HEIGHT
+
+  const { width: screenW, height: screenH } = Dimensions.get('window')
+  const defaultX = initialX ?? screenW - pillW - 16
+  const defaultY = initialY ?? screenH - pillH - 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)
+
+  // Safe area insets measured from invisible SafeAreaView
+  const [insets, setInsets] = useState<SafeAreaInsets>({
+    top: 0,
+    bottom: 0,
+    left: 0,
+    right: 0,
+  })
+
+  const handleSafeAreaLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      const { x, y, width, height } = event.nativeEvent.layout
+      const screen = Dimensions.get('window')
+      const newInsets: SafeAreaInsets = {
+        top: y,
+        left: x,
+        bottom: screen.height - y - height,
+        right: screen.width - x - width,
+      }
+      setInsets(newInsets)
+
+      // Re-clamp current position to new safe area
+      const clamped = clampPosition(lastPosition.current.x, lastPosition.current.y, newInsets, pillW, pillH)
+      if (clamped.x !== lastPosition.current.x || clamped.y !== lastPosition.current.y) {
+        lastPosition.current = clamped
+        pan.setValue(clamped)
+      }
+    },
+    [pan],
+  )
+
+  const insetsRef = useRef(insets)
+  insetsRef.current = insets
+
+  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
+        }
+
+        // Allow free dragging — bounce back happens on release
+        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,
+          insetsRef.current,
+          pillW,
+          pillH,
+        )
+
+        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 theme = useBackstageTheme()
+
+  const backgroundColor = hasError ? theme.error : theme.accent
+  const shadowColor = hasError ? theme.error : theme.accent
+
+  return (
+    <>
+      {/* Invisible SafeAreaView to measure insets */}
+      <SafeAreaView style={componentStyles.measurer} pointerEvents="none">
+        <View style={componentStyles.measurerInner} onLayout={handleSafeAreaLayout} />
+      </SafeAreaView>
+
+      <Animated.View
+        testID={TestIDs.floatingPill}
+        {...panResponder.panHandlers}
+        style={[
+          componentStyles.pill,
+          {
+            minWidth: pillW,
+            height: pillH,
+            borderRadius: pillH / 2,
+            backgroundColor,
+            transform: pan.getTranslateTransform(),
+            shadowColor,
+          },
+          propStyles?.pillStyle,
+        ]}
+      >
+        <Text
+          testID={TestIDs.floatingPillText}
+          style={[componentStyles.pillText, propStyles?.pillTextStyle]}
+          numberOfLines={1}
+        >
+          {text}
+        </Text>
+      </Animated.View>
+    </>
+  )
+}
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+const componentStyles = StyleSheet.create({
+  pill: {
+    position: 'absolute',
+    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,
+  },
+  measurer: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: -1,
+    opacity: 0,
+  },
+  measurerInner: {
+    flex: 1,
+  },
+})

package/src/components/InfoTab.tsx

@@ -0,0 +1,231 @@
+import React, { useMemo } from 'react'
+import { Platform, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native'
+import { MonospaceFont, TestIDs } from '../constants'
+import { useBackstageTheme } from '../ThemeContext'
+import { JsonTreeView } from './JsonTreeView'
+import type { AppInfoItem, BackstageStyleOverrides, BackstageTheme, QuickAction } from '../types'
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface InfoTabProps {
+  appVersion?: string
+  buildNumber?: string
+  bundleId?: string
+  deviceInfo?: AppInfoItem[]
+  state?: Record<string, unknown>
+  quickActions?: QuickAction[]
+  jsonMaxDepth?: number
+  onClosePanel?: () => void
+  styles?: BackstageStyleOverrides
+  children?: React.ReactNode
+}
+
+// ─── Main Component ──────────────────────────────────────────────────────────
+
+export const InfoTab: React.FC<InfoTabProps> = ({
+  appVersion,
+  buildNumber,
+  bundleId,
+  deviceInfo = [],
+  state,
+  quickActions = [],
+  jsonMaxDepth,
+  onClosePanel,
+  styles: propStyles,
+  children,
+}) => {
+  const theme = useBackstageTheme()
+  const s = useMemo(() => createStyles(theme), [theme])
+
+  // 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
+      testID={TestIDs.infoTab.container}
+      style={s.container}
+      contentContainerStyle={s.scrollContent}
+      showsVerticalScrollIndicator={false}
+    >
+      {/* ── Device Info Section ─────────────────────────────────── */}
+      <View testID={TestIDs.infoTab.deviceInfo} style={s.section}>
+        <Text style={[s.sectionTitle, propStyles?.sectionTitleStyle]}>DEVICE INFO</Text>
+        <View style={s.card}>
+          {allInfo.map((item, index) => (
+            <React.Fragment key={`info_${index}`}>
+              <View style={s.infoRow}>
+                <Text style={[s.infoLabel, propStyles?.infoLabelStyle]} numberOfLines={1}>
+                  {item.label}
+                </Text>
+                <Text style={[s.infoValue, propStyles?.infoValueStyle]} selectable>
+                  {item.value}
+                </Text>
+              </View>
+              {index < allInfo.length - 1 && <View style={s.divider} />}
+            </React.Fragment>
+          ))}
+        </View>
+      </View>
+
+      {/* ── State Tree Section ──────────────────────────────────── */}
+      {state && Object.keys(state).length > 0 && (
+        <View testID={TestIDs.infoTab.stateTree} style={s.section}>
+          <Text style={[s.sectionTitle, propStyles?.sectionTitleStyle]}>STATE TREE</Text>
+          <View style={s.card}>
+            <JsonTreeView data={state} hideRoot maxDepth={jsonMaxDepth} />
+          </View>
+        </View>
+      )}
+
+      {/* ── Quick Actions Section ─────────────────────────────────── */}
+      {quickActions.length > 0 && (
+        <View testID={TestIDs.infoTab.quickActions} style={s.section}>
+          <Text style={[s.sectionTitle, propStyles?.sectionTitleStyle]}>QUICK ACTIONS</Text>
+          <View style={s.actionsGrid}>
+            {quickActions.map((action, index) => {
+              const handlePress = () => {
+                action.onPress()
+                if (action.closeOnPress && onClosePanel) {
+                  onClosePanel()
+                }
+              }
+              return (
+                <TouchableOpacity
+                  key={`action_${index}`}
+                  testID={action.testID || TestIDs.infoTab.actionButton(index)}
+                  style={[
+                    s.actionButton,
+                    action.destructive && s.actionButtonDestructive,
+                    propStyles?.actionButtonStyle,
+                  ]}
+                  onPress={handlePress}
+                  activeOpacity={0.7}
+                >
+                  {action.icon && <Text style={s.actionIcon}>{action.icon}</Text>}
+                  <Text
+                    style={[
+                      s.actionButtonTitle,
+                      action.destructive && s.actionButtonTitleDestructive,
+                      propStyles?.actionButtonTitleStyle,
+                    ]}
+                  >
+                    {action.title}
+                  </Text>
+                </TouchableOpacity>
+              )
+            })}
+          </View>
+        </View>
+      )}
+
+      {/* ── Custom Children ─────────────────────────────────────── */}
+      {children && <View style={s.section}>{children}</View>}
+    </ScrollView>
+  )
+}
+
+// ─── Styles ──────────────────────────────────────────────────────────────────
+
+const createStyles = (t: BackstageTheme) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+    },
+    scrollContent: {
+      padding: 16,
+      paddingBottom: 32,
+    },
+    section: {
+      marginBottom: 20,
+    },
+    sectionTitle: {
+      fontFamily: MonospaceFont,
+      fontSize: 11,
+      fontWeight: '700',
+      color: t.textMuted,
+      letterSpacing: 1.5,
+      marginBottom: 8,
+      paddingLeft: 4,
+    },
+    card: {
+      backgroundColor: t.surfaceElevated,
+      borderRadius: 12,
+      borderWidth: 1,
+      borderColor: t.border,
+      padding: 12,
+      overflow: 'hidden',
+    },
+    infoRow: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingVertical: 8,
+      paddingHorizontal: 4,
+    },
+    infoLabel: {
+      fontFamily: MonospaceFont,
+      fontSize: 13,
+      color: t.textSecondary,
+    },
+    infoValue: {
+      fontFamily: MonospaceFont,
+      fontSize: 13,
+      color: t.text,
+      fontWeight: '600',
+      textAlign: 'right',
+      flex: 1,
+      marginLeft: 12,
+    },
+    divider: {
+      height: 1,
+      backgroundColor: t.border,
+      marginHorizontal: 4,
+    },
+    actionsGrid: {
+      flexDirection: 'row',
+      flexWrap: 'wrap',
+      gap: 10,
+    },
+    actionButton: {
+      backgroundColor: t.accentDim,
+      borderRadius: 10,
+      borderWidth: 1,
+      borderColor: t.accent,
+      paddingVertical: 10,
+      paddingHorizontal: 18,
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    actionButtonDestructive: {
+      backgroundColor: t.errorDim,
+      borderColor: t.error,
+    },
+    actionIcon: {
+      fontSize: 14,
+      marginRight: 6,
+    },
+    actionButtonTitle: {
+      fontFamily: MonospaceFont,
+      fontSize: 13,
+      fontWeight: '600',
+      color: t.accent,
+    },
+    actionButtonTitleDestructive: {
+      color: t.error,
+    },
+  })