rn-backstage 1.4.2 → 1.4.3

package/src/components/FlagsTab.tsx

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

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

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