@billdog.io/react-native 1.0.0-beta.2

package/src/components/NPSScaleComponent.tsx

@@ -0,0 +1,294 @@
+/**
+ * NPSScaleComponent - React Native
+ * 
+ * Net Promoter Score scale with child-based architecture.
+ * Renders children with nps-button-* roles, applies selectedAppearance for selected state.
+ */
+
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Animated,
+} from 'react-native';
+import { PaywallComponent } from '../types';
+
+interface NPSScaleComponentProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+  renderChild?: (child: PaywallComponent) => React.ReactNode;
+}
+
+// NPS Categories
+const getNPSCategory = (value: number, min: number, max: number): string => {
+  const normalizedMax = max - min;
+  const normalizedValue = value - min;
+  const percentage = normalizedValue / normalizedMax;
+  
+  if (percentage <= 0.6) return 'detractor';
+  if (percentage <= 0.8) return 'passive';
+  return 'promoter';
+};
+
+// Extract value from role like "nps-button-5"
+const extractValueFromRole = (role?: string): number => {
+  if (!role || !role.startsWith('nps-button-')) return 0;
+  const valueStr = role.replace('nps-button-', '');
+  return parseInt(valueStr, 10) || 0;
+};
+
+export const NPSScaleComponent: React.FC<NPSScaleComponentProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+  renderChild,
+}) => {
+  const props = component.properties as any;
+  const componentId = component.id;
+  
+  // Configuration
+  const minValue = props.minValue ?? 0;
+  const maxValue = props.maxValue ?? 10;
+  const defaultValue = props.defaultValue ?? -1;
+  const showLabels = props.showLabels !== false;
+  const minLabel = props.minLabel || 'Not at all likely';
+  const maxLabel = props.maxLabel || 'Extremely likely';
+  const buttonGap = props.buttonGap || 4;
+  
+  const [selectedValue, setSelectedValue] = useState<number>(defaultValue);
+  const [animatedValues] = useState(() =>
+    Array.from({ length: maxValue - minValue + 1 }, () => new Animated.Value(1))
+  );
+  
+  // Get NPS button children sorted by value
+  const npsButtonChildren = useMemo(() => {
+    const children = component.children || [];
+    return children
+      .filter((child: PaywallComponent) => child.role?.startsWith('nps-button-'))
+      .sort((a: PaywallComponent, b: PaywallComponent) => {
+        const valueA = extractValueFromRole(a.role);
+        const valueB = extractValueFromRole(b.role);
+        return valueA - valueB;
+      });
+  }, [component.children]);
+  
+  const hasChildren = npsButtonChildren.length > 0 && renderChild;
+  
+  // Update state manager when value changes
+  useEffect(() => {
+    if (stateManager && selectedValue >= minValue) {
+      const category = getNPSCategory(selectedValue, minValue, maxValue);
+      
+      stateManager.updateState(`element:${componentId}.score`, selectedValue);
+      stateManager.updateState(`element:${componentId}.category`, category);
+      stateManager.updateState(`element:${componentId}.isValid`, true);
+    }
+  }, [selectedValue, componentId, minValue, maxValue, stateManager]);
+  
+  // Subscribe to external state changes
+  useEffect(() => {
+    if (stateManager) {
+      return stateManager.subscribeToState(
+        `element:${componentId}.score`,
+        (value: number) => {
+          if (value !== selectedValue) {
+            setSelectedValue(value);
+          }
+        }
+      );
+    }
+  }, [componentId, stateManager, selectedValue]);
+  
+  // Handle value selection
+  const handleSelect = useCallback((value: number, index: number) => {
+    // Animate button
+    Animated.sequence([
+      Animated.timing(animatedValues[index], {
+        toValue: 0.9,
+        duration: 50,
+        useNativeDriver: true,
+      }),
+      Animated.timing(animatedValues[index], {
+        toValue: 1.1,
+        duration: 100,
+        useNativeDriver: true,
+      }),
+      Animated.timing(animatedValues[index], {
+        toValue: 1,
+        duration: 100,
+        useNativeDriver: true,
+      }),
+    ]).start();
+    
+    setSelectedValue(value);
+  }, [animatedValues]);
+  
+  // Apply selectedAppearance to child when selected
+  const applySelectedAppearance = useCallback((child: PaywallComponent, isSelected: boolean): PaywallComponent => {
+    if (!isSelected || !child.selectedAppearance) {
+      return child;
+    }
+    
+    // Create a copy with selectedAppearance merged into appearance
+    return {
+      ...child,
+      appearance: child.selectedAppearance,
+    };
+  }, []);
+  
+  // Get styling from component.properties for fallback rendering (canonical direct properties)
+  const getSelectionStyles = useCallback(() => {
+    const componentAppearance = (component as any).appearance || {};
+    
+    // Read from component.properties (canonical names per Property Parity Contract)
+    const buttonFill = props.buttonFill;
+    const selectedFill = props.selectedFill;
+    
+    const buttonSize = props.buttonSize ?? 40;
+    const borderRadius = componentAppearance.cornerRadius ?? props.borderRadius ?? 8;
+    const fontSize = props.labelFontSize ?? 14;
+    
+    // Extract colors from FillValue objects
+    const activeBackground = selectedFill?.resolvedColor ?? selectedFill?.color ?? '#3B82F6';
+    const inactiveBackground = buttonFill?.resolvedColor ?? buttonFill?.color ?? 
+      componentAppearance.fill?.resolvedColor ?? componentAppearance.fill?.color ?? '#E5E7EB';
+    const activeTextColor = props.selectedTextColor ?? '#FFFFFF';
+    const inactiveTextColor = props.textColor ?? '#6B7280';
+    
+    return {
+      buttonSize,
+      borderRadius,
+      fontSize,
+      activeBackground,
+      inactiveBackground,
+      activeTextColor,
+      inactiveTextColor,
+    };
+  }, [component, props]);
+  
+  const selectionStyles = getSelectionStyles();
+  
+  // Render child-based buttons
+  const renderChildBasedButtons = () => {
+    return npsButtonChildren.map((child: PaywallComponent, index: number) => {
+      const value = extractValueFromRole(child.role);
+      const isSelected = selectedValue === value;
+      
+      return (
+        <TouchableOpacity
+          key={child.id}
+          onPress={() => handleSelect(value, index)}
+          activeOpacity={0.7}
+          style={{ marginHorizontal: buttonGap / 2 }}
+        >
+          <Animated.View
+            style={{
+              transform: [{ scale: animatedValues[index] }],
+            }}
+          >
+            {renderChild!(applySelectedAppearance(child, isSelected))}
+          </Animated.View>
+        </TouchableOpacity>
+      );
+    });
+  };
+  
+  // Render fallback buttons when no children available
+  const renderFallbackButtons = () => {
+    const values: number[] = [];
+    for (let i = minValue; i <= maxValue; i++) {
+      values.push(i);
+    }
+    
+    return values.map((value, index) => {
+      const isSelected = selectedValue === value;
+      const backgroundColor = isSelected 
+        ? selectionStyles.activeBackground 
+        : selectionStyles.inactiveBackground;
+      const textColor = isSelected 
+        ? selectionStyles.activeTextColor 
+        : selectionStyles.inactiveTextColor;
+      
+      return (
+        <TouchableOpacity
+          key={value}
+          onPress={() => handleSelect(value, index)}
+          activeOpacity={0.7}
+          style={{ marginHorizontal: buttonGap / 2 }}
+        >
+          <Animated.View
+            style={[
+              styles.button,
+              {
+                width: selectionStyles.buttonSize,
+                height: selectionStyles.buttonSize,
+                borderRadius: selectionStyles.borderRadius,
+                backgroundColor,
+                transform: [{ scale: animatedValues[index] }],
+              },
+            ]}
+          >
+            <Text style={[
+              styles.buttonText, 
+              { 
+                fontSize: selectionStyles.fontSize, 
+                color: textColor,
+                fontWeight: isSelected ? '600' : '500',
+              }
+            ]}>
+              {value}
+            </Text>
+          </Animated.View>
+        </TouchableOpacity>
+      );
+    });
+  };
+  
+  return (
+    <View style={styles.container}>
+      {/* Scale Buttons */}
+      <View style={[styles.scaleContainer, { gap: buttonGap }]}>
+        {hasChildren ? renderChildBasedButtons() : renderFallbackButtons()}
+      </View>
+      
+      {/* Labels */}
+      {showLabels && (
+        <View style={styles.labelsContainer}>
+          <Text style={styles.labelText}>{minLabel}</Text>
+          <Text style={styles.labelText}>{maxLabel}</Text>
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    gap: 16,
+  },
+  scaleContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'center',
+  },
+  button: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  buttonText: {
+    fontWeight: '500',
+  },
+  labelsContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 4,
+  },
+  labelText: {
+    fontSize: 12,
+    color: '#6B7280',
+  },
+});

package/src/components/NavigationComponent.tsx

@@ -0,0 +1,329 @@
+/**
+ * NavigationComponent - React Native
+ * 
+ * Multi-screen paywall navigation with state management.
+ * Features:
+ * - Page stack navigation
+ * - State integration for current page tracking
+ * - Transition animations (slide, fade, push, none)
+ * - Swipe gesture navigation
+ * - Forward/back navigation
+ * - Entry/exit condition support
+ */
+
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import {
+  View,
+  Animated,
+  PanResponder,
+  Dimensions,
+  StyleSheet,
+} from 'react-native';
+import { PaywallComponent } from '../types';
+
+interface NavigationComponentProps {
+  component: PaywallComponent;
+  /** Child components to render within the navigation (defaults to component.children) */
+  children?: PaywallComponent[];
+  stateManager?: any;
+  isPreviewMode?: boolean;
+  renderComponent?: (component: PaywallComponent) => React.ReactNode;
+  /** Alias for renderComponent used by ComponentRenderer */
+  renderChild?: (child: PaywallComponent, index?: number) => React.ReactNode;
+}
+
+type TransitionType = 'slide' | 'fade' | 'push' | 'none';
+type TransitionDirection = 'horizontal' | 'vertical';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+export const NavigationComponent: React.FC<NavigationComponentProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+  renderComponent,
+}) => {
+  const props = component.properties as any;
+  const componentId = component.id;
+  
+  // Configuration
+  const transition: TransitionType = props.transition || 'slide';
+  const transitionDirection: TransitionDirection = props.transitionDirection || 'horizontal';
+  const transitionDuration = props.transitionDuration || 300;
+  const swipeEnabled = props.swipeEnabled !== false;
+  const swipeThreshold = props.swipeThreshold || 0.3;
+  const initialPage = props.initialPage || 0;
+  
+  // Get pages from children
+  const pages = component.children || [];
+  const totalPages = pages.length;
+  
+  // State
+  const [currentIndex, setCurrentIndex] = useState(initialPage);
+  const [history, setHistory] = useState<number[]>([initialPage]);
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const panValue = useRef(new Animated.Value(0)).current;
+  
+  // State manager integration
+  useEffect(() => {
+    if (stateManager) {
+      // Initialize state
+      stateManager.updateState(`element:${componentId}.currentIndex`, currentIndex);
+      stateManager.updateState(`element:${componentId}.totalPages`, totalPages);
+      stateManager.updateState(`element:${componentId}.canGoBack`, history.length > 1);
+      stateManager.updateState(`element:${componentId}.history`, history);
+      
+      // Subscribe to external navigation commands
+      const unsubscribe = stateManager.subscribeToState(
+        `element:${componentId}.navigateTo`,
+        (value: number | null) => {
+          if (value !== null && value >= 0 && value < totalPages && value !== currentIndex) {
+            navigateToPage(value);
+          }
+        }
+      );
+      
+      return unsubscribe;
+    }
+  }, [componentId, stateManager, currentIndex, totalPages, history]);
+  
+  // Update state manager when current index changes
+  useEffect(() => {
+    if (stateManager) {
+      stateManager.updateState(`element:${componentId}.currentIndex`, currentIndex);
+      stateManager.updateState(`element:${componentId}.canGoBack`, history.length > 1);
+      stateManager.updateState(`element:${componentId}.history`, history);
+    }
+  }, [currentIndex, history, componentId, stateManager]);
+  
+  // Navigate to a specific page
+  const navigateToPage = useCallback((pageIndex: number, options?: { replace?: boolean }) => {
+    if (pageIndex < 0 || pageIndex >= totalPages || pageIndex === currentIndex) return;
+    
+    const direction = pageIndex > currentIndex ? 1 : -1;
+    
+    // Animate transition
+    Animated.timing(animatedValue, {
+      toValue: direction,
+      duration: transitionDuration,
+      useNativeDriver: true,
+    }).start(() => {
+      setCurrentIndex(pageIndex);
+      
+      // Update history
+      if (options?.replace) {
+        setHistory(prev => [...prev.slice(0, -1), pageIndex]);
+      } else {
+        setHistory(prev => [...prev, pageIndex]);
+      }
+      
+      animatedValue.setValue(0);
+    });
+  }, [currentIndex, totalPages, transitionDuration, animatedValue]);
+  
+  // Go back in history
+  const goBack = useCallback(() => {
+    if (history.length <= 1) return;
+    
+    const newHistory = [...history];
+    newHistory.pop();
+    const previousPage = newHistory[newHistory.length - 1];
+    
+    Animated.timing(animatedValue, {
+      toValue: -1,
+      duration: transitionDuration,
+      useNativeDriver: true,
+    }).start(() => {
+      setCurrentIndex(previousPage);
+      setHistory(newHistory);
+      animatedValue.setValue(0);
+    });
+    
+    if (stateManager) {
+      stateManager.updateState(`element:${componentId}.currentIndex`, previousPage);
+    }
+  }, [history, transitionDuration, animatedValue, componentId, stateManager]);
+  
+  // Go to next page
+  const goNext = useCallback(() => {
+    if (currentIndex < totalPages - 1) {
+      navigateToPage(currentIndex + 1);
+    }
+  }, [currentIndex, totalPages, navigateToPage]);
+  
+  // Go to previous page
+  const goPrevious = useCallback(() => {
+    if (currentIndex > 0) {
+      navigateToPage(currentIndex - 1);
+    }
+  }, [currentIndex, navigateToPage]);
+  
+  // Pan responder for swipe navigation
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => false,
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        if (!swipeEnabled) return false;
+        
+        const { dx, dy } = gestureState;
+        const isHorizontal = transitionDirection === 'horizontal';
+        
+        if (isHorizontal) {
+          return Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 10;
+        } else {
+          return Math.abs(dy) > Math.abs(dx) && Math.abs(dy) > 10;
+        }
+      },
+      onPanResponderMove: (_, gestureState) => {
+        const { dx, dy } = gestureState;
+        const isHorizontal = transitionDirection === 'horizontal';
+        const delta = isHorizontal ? dx : dy;
+        const size = isHorizontal ? SCREEN_WIDTH : SCREEN_HEIGHT;
+        
+        // Normalize pan value between -1 and 1
+        const normalizedDelta = delta / size;
+        
+        // Check boundaries
+        if (normalizedDelta > 0 && currentIndex === 0) {
+          panValue.setValue(normalizedDelta * 0.2); // Resistance at start
+        } else if (normalizedDelta < 0 && currentIndex === totalPages - 1) {
+          panValue.setValue(normalizedDelta * 0.2); // Resistance at end
+        } else {
+          panValue.setValue(normalizedDelta);
+        }
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        const { dx, dy, vx, vy } = gestureState;
+        const isHorizontal = transitionDirection === 'horizontal';
+        const delta = isHorizontal ? dx : dy;
+        const velocity = isHorizontal ? vx : vy;
+        const size = isHorizontal ? SCREEN_WIDTH : SCREEN_HEIGHT;
+        
+        const normalizedDelta = delta / size;
+        
+        // Determine if we should navigate
+        if (Math.abs(normalizedDelta) > swipeThreshold || Math.abs(velocity) > 0.5) {
+          if (normalizedDelta > 0 && currentIndex > 0) {
+            // Swipe right/down - go back
+            Animated.timing(panValue, {
+              toValue: 1,
+              duration: 200,
+              useNativeDriver: true,
+            }).start(() => {
+              panValue.setValue(0);
+              goPrevious();
+            });
+          } else if (normalizedDelta < 0 && currentIndex < totalPages - 1) {
+            // Swipe left/up - go forward
+            Animated.timing(panValue, {
+              toValue: -1,
+              duration: 200,
+              useNativeDriver: true,
+            }).start(() => {
+              panValue.setValue(0);
+              goNext();
+            });
+          } else {
+            // Snap back
+            Animated.spring(panValue, {
+              toValue: 0,
+              useNativeDriver: true,
+            }).start();
+          }
+        } else {
+          // Snap back
+          Animated.spring(panValue, {
+            toValue: 0,
+            useNativeDriver: true,
+          }).start();
+        }
+      },
+    })
+  ).current;
+  
+  // Calculate animated transform based on transition type
+  const getTransformStyle = (pageOffset: number) => {
+    const isHorizontal = transitionDirection === 'horizontal';
+    const size = isHorizontal ? SCREEN_WIDTH : SCREEN_HEIGHT;
+    
+    const combinedOffset = Animated.add(
+      animatedValue,
+      panValue
+    );
+    
+    switch (transition) {
+      case 'slide':
+        const translateX = isHorizontal
+          ? Animated.multiply(combinedOffset, new Animated.Value(-size)).interpolate({
+              inputRange: [-1, 0, 1],
+              outputRange: [size + pageOffset * size, pageOffset * size, -size + pageOffset * size],
+            })
+          : 0;
+        const translateY = !isHorizontal
+          ? Animated.multiply(combinedOffset, new Animated.Value(-size)).interpolate({
+              inputRange: [-1, 0, 1],
+              outputRange: [size + pageOffset * size, pageOffset * size, -size + pageOffset * size],
+            })
+          : 0;
+        return { transform: [{ translateX }, { translateY }] };
+        
+      case 'fade':
+        return {
+          opacity: combinedOffset.interpolate({
+            inputRange: [-1, 0, 1],
+            outputRange: pageOffset === 0 ? [0, 1, 0] : [1, 0, 1],
+          }),
+        };
+        
+      case 'push':
+        const pushTranslate = isHorizontal
+          ? combinedOffset.interpolate({
+              inputRange: [-1, 0, 1],
+              outputRange: [size * 0.3, pageOffset * size, -size * 0.3],
+            })
+          : combinedOffset.interpolate({
+              inputRange: [-1, 0, 1],
+              outputRange: [size * 0.3, pageOffset * size, -size * 0.3],
+            });
+        const scale = combinedOffset.interpolate({
+          inputRange: [-1, 0, 1],
+          outputRange: pageOffset === 0 ? [0.9, 1, 0.9] : [1, 0.9, 1],
+        });
+        return {
+          transform: [
+            isHorizontal ? { translateX: pushTranslate } : { translateY: pushTranslate },
+            { scale },
+          ],
+        };
+        
+      case 'none':
+      default:
+        return {};
+    }
+  };
+  
+  // Render current page
+  const currentPage = pages[currentIndex];
+  
+  if (!currentPage) {
+    return null;
+  }
+  
+  return (
+    <View style={styles.container} {...panResponder.panHandlers}>
+      <Animated.View style={[styles.page, getTransformStyle(0)]}>
+        {renderComponent?.(currentPage)}
+      </Animated.View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    overflow: 'hidden',
+  },
+  page: {
+    ...StyleSheet.absoluteFillObject,
+  },
+});