rn-backstage 1.3.0 → 1.4.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,
-    },
-  })