rn-backstage 1.2.0 → 1.3.0

package/src/components/FlagsTab.tsx

@@ -1,7 +1,8 @@
 import React, { useMemo, useState } from 'react'
 import { ScrollView, StyleSheet, Switch, Text, TextInput, View } from 'react-native'
-import { DarkTheme, MonospaceFont } from '../constants'
-import type { FeatureFlag } from '../types'
+import { MonospaceFont } from '../constants'
+import { useBackstageTheme } from '../ThemeContext'
+import type { FeatureFlag, BackstageTheme } from '../types'
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
@@ -13,6 +14,8 @@ interface FlagsTabProps {
 // ─── 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(() => {
@@ -26,19 +29,17 @@ export const FlagsTab: React.FC<FlagsTabProps> = ({ flags, onToggle }) => {
     )
   }, [flags, searchText])
 
-  // Stats
   const enabledCount = flags.filter(f => f.value).length
 
   return (
-    <View style={styles.container}>
-      {/* Search Bar */}
-      <View style={styles.searchContainer}>
-        <View style={styles.searchInputWrapper}>
-          <Text style={styles.searchIcon}>⌕</Text>
+    <View style={s.container}>
+      <View style={s.searchContainer}>
+        <View style={s.searchInputWrapper}>
+          <Text style={s.searchIcon}>⌕</Text>
           <TextInput
-            style={styles.searchInput}
+            style={s.searchInput}
             placeholder="Filter flags..."
-            placeholderTextColor={DarkTheme.textMuted}
+            placeholderTextColor={theme.textMuted}
             value={searchText}
             onChangeText={setSearchText}
             autoCapitalize="none"
@@ -49,59 +50,51 @@ export const FlagsTab: React.FC<FlagsTabProps> = ({ flags, onToggle }) => {
         </View>
       </View>
 
-      {/* Stats Bar */}
-      <View style={styles.statsBar}>
-        <Text style={styles.statText}>
+      <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={styles.statText}>
-          <Text style={styles.statEnabled}>{enabledCount} on</Text>
+        <Text style={s.statText}>
+          <Text style={s.statEnabled}>{enabledCount} on</Text>
           {' · '}
-          <Text style={styles.statDisabled}>{flags.length - enabledCount} off</Text>
+          <Text style={s.statDisabled}>{flags.length - enabledCount} off</Text>
         </Text>
       </View>
 
-      {/* Flag List */}
       <ScrollView
-        style={styles.list}
-        contentContainerStyle={
-          filteredFlags.length === 0 ? styles.emptyContainer : styles.listContent
-        }
+        style={s.list}
+        contentContainerStyle={filteredFlags.length === 0 ? s.emptyContainer : s.listContent}
         showsVerticalScrollIndicator={false}
       >
         {filteredFlags.length === 0 ? (
-          <View style={styles.emptyState}>
-            <Text style={styles.emptyIcon}>🎚</Text>
-            <Text style={styles.emptyTitle}>No flags match</Text>
-            <Text style={styles.emptySubtitle}>Try adjusting your search</Text>
+          <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={styles.flagRow}>
-                <View style={styles.flagInfo}>
-                  <View style={styles.flagHeader}>
-                    <Text style={styles.flagLabel}>{flag.label}</Text>
-                    <Text style={[styles.flagKey, flag.value && styles.flagKeyActive]}>
-                      {flag.key}
-                    </Text>
+              <View style={s.flagRow}>
+                <View style={s.flagInfo}>
+                <View style={s.flagHeader}>
+                    <Text style={s.flagLabel} numberOfLines={2}>{flag.label}</Text>
                   </View>
-                  {flag.description && (
-                    <Text style={styles.flagDescription}>{flag.description}</Text>
-                  )}
+                  <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: DarkTheme.border, true: DarkTheme.accent }}
-                  thumbColor={flag.value ? '#FFFFFF' : DarkTheme.textMuted}
-                  ios_backgroundColor={DarkTheme.border}
+                  trackColor={{ false: theme.border, true: theme.accent }}
+                  thumbColor={flag.value ? '#FFFFFF' : theme.textMuted}
+                  ios_backgroundColor={theme.border}
                 />
               </View>
-              {index < filteredFlags.length - 1 && <View style={styles.divider} />}
+              {index < filteredFlags.length - 1 && <View style={s.divider} />}
             </View>
           ))
         )}
@@ -112,138 +105,96 @@ export const FlagsTab: React.FC<FlagsTabProps> = ({ flags, onToggle }) => {
 
 // ─── Styles ──────────────────────────────────────────────────────────────────
 
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-  },
-  searchContainer: {
-    paddingHorizontal: 14,
-    paddingVertical: 10,
-    borderBottomWidth: 1,
-    borderBottomColor: DarkTheme.border,
-  },
-  searchInputWrapper: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    backgroundColor: DarkTheme.surfaceElevated,
-    borderRadius: 10,
-    borderWidth: 1,
-    borderColor: DarkTheme.border,
-    paddingHorizontal: 12,
-    height: 38,
-  },
-  searchIcon: {
-    fontSize: 16,
-    color: DarkTheme.textMuted,
-    marginRight: 8,
-  },
-  searchInput: {
-    flex: 1,
-    fontFamily: MonospaceFont,
-    fontSize: 13,
-    color: DarkTheme.text,
-    padding: 0,
-  },
-  statsBar: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center',
-    paddingHorizontal: 16,
-    paddingVertical: 6,
-    backgroundColor: DarkTheme.surface,
-  },
-  statText: {
-    fontFamily: MonospaceFont,
-    fontSize: 11,
-    color: DarkTheme.textMuted,
-  },
-  statEnabled: {
-    color: DarkTheme.success,
-    fontWeight: '700',
-  },
-  statDisabled: {
-    color: DarkTheme.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: DarkTheme.textSecondary,
-    marginBottom: 8,
-  },
-  emptySubtitle: {
-    fontFamily: MonospaceFont,
-    fontSize: 13,
-    color: DarkTheme.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',
-    gap: 8,
-  },
-  flagLabel: {
-    fontFamily: MonospaceFont,
-    fontSize: 14,
-    color: DarkTheme.text,
-    fontWeight: '600',
-  },
-  flagKey: {
-    fontFamily: MonospaceFont,
-    fontSize: 10,
-    color: DarkTheme.textMuted,
-    backgroundColor: DarkTheme.surfaceElevated,
-    borderRadius: 4,
-    paddingHorizontal: 6,
-    paddingVertical: 1,
-    overflow: 'hidden',
-  },
-  flagKeyActive: {
-    color: DarkTheme.accent,
-    backgroundColor: DarkTheme.accentDim,
-  },
-  flagDescription: {
-    fontFamily: MonospaceFont,
-    fontSize: 12,
-    color: DarkTheme.textMuted,
-    marginTop: 4,
-    lineHeight: 18,
-  },
-  divider: {
-    height: 1,
-    backgroundColor: DarkTheme.border,
-    marginHorizontal: 4,
-  },
-})
+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 },
+  })

package/src/components/FloatingPill.tsx

@@ -1,6 +1,16 @@
-import React, { useRef } from 'react'
-import { Animated, Dimensions, PanResponder, StyleSheet, Text } from 'react-native'
-import { DarkTheme, Metrics, MonospaceFont } from '../constants'
+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 ───────────────────────────────────────────────────────────────────
@@ -11,6 +21,8 @@ interface FloatingPillProps {
   onPress: () => void
   initialX?: number
   initialY?: number
+  pillWidth?: number
+  pillHeight?: number
   styles?: BackstageStyleOverrides
 }
 
@@ -19,12 +31,32 @@ interface FloatingPillProps {
 const PILL_WIDTH = Metrics.pillWidth
 const PILL_HEIGHT = Metrics.pillHeight
 const DRAG_THRESHOLD = 5
+const INSET_PADDING = 8 // extra padding from safe area edges
 
-function clampPosition(x: number, y: number): { x: number; y: number } {
+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(0, Math.min(x, width - PILL_WIDTH)),
-    y: Math.max(0, Math.min(y, height - PILL_HEIGHT)),
+    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),
+    ),
   }
 }
 
@@ -36,17 +68,55 @@ export const FloatingPill: React.FC<FloatingPillProps> = ({
   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 - PILL_WIDTH - 16
-  const defaultY = initialY ?? screenH - PILL_HEIGHT - 120
+  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,
@@ -71,6 +141,8 @@ export const FloatingPill: React.FC<FloatingPillProps> = ({
         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)
@@ -81,6 +153,9 @@ export const FloatingPill: React.FC<FloatingPillProps> = ({
         const newPos = clampPosition(
           lastPosition.current.x + gestureState.dx,
           lastPosition.current.y + gestureState.dy,
+          insetsRef.current,
+          pillW,
+          pillH,
         )
 
         lastPosition.current = newPos
@@ -100,37 +175,51 @@ export const FloatingPill: React.FC<FloatingPillProps> = ({
     }),
   ).current
 
-  const backgroundColor = hasError ? DarkTheme.error : DarkTheme.accent
-  const shadowColor = hasError ? DarkTheme.error : DarkTheme.accent
+  const theme = useBackstageTheme()
+
+  const backgroundColor = hasError ? theme.error : theme.accent
+  const shadowColor = hasError ? theme.error : theme.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>
+    <>
+      {/* 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 styles = StyleSheet.create({
+const componentStyles = StyleSheet.create({
   pill: {
     position: 'absolute',
-    minWidth: PILL_WIDTH,
-    height: PILL_HEIGHT,
-    borderRadius: PILL_HEIGHT / 2,
     paddingHorizontal: 14,
     alignItems: 'center',
     justifyContent: 'center',
@@ -147,4 +236,12 @@ const styles = StyleSheet.create({
     color: '#FFFFFF',
     letterSpacing: 0.5,
   },
+  measurer: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: -1,
+    opacity: 0,
+  },
+  measurerInner: {
+    flex: 1,
+  },
 })