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

package/src/components/ProgressStepperComponent.tsx

@@ -0,0 +1,250 @@
+/**
+ * ProgressStepperComponent - React Native
+ * 
+ * Multi-step progress indicator with customizable appearance.
+ * Features:
+ * - Horizontal/vertical orientation
+ * - Animated transitions
+ * - State manager integration
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+} from 'react-native';
+import { PaywallComponent } from '../types';
+
+interface ProgressStepperComponentProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+}
+
+// Helper to extract color from fill value
+const getColorFromFill = (fill: any, fallback: string): string => {
+  if (!fill) return fallback;
+  if (typeof fill === 'string') return fill;
+  if (fill.type === 'color' && fill.color) return fill.color;
+  return fallback;
+};
+
+export const ProgressStepperComponent: React.FC<ProgressStepperComponentProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+}) => {
+  const props = component.properties as any;
+  const componentId = component.id;
+  
+  // Configuration
+  const totalSteps = Math.max(2, Math.min(10, props.totalSteps ?? 4));
+  const initialStep = Math.max(1, Math.min(totalSteps, props.currentStep ?? 1));
+  const orientation = props.orientation ?? 'horizontal';
+  
+  // Labels
+  const showLabels = props.showLabels ?? false;
+  const showNumbers = props.showNumbers ?? true;
+  const labels: string[] = [];
+  for (let i = 1; i <= totalSteps; i++) {
+    labels.push(props[`step${i}Label`] ?? `Step ${i}`);
+  }
+  
+  // Styling
+  const stepSize = props.stepSize ?? 32;
+  const lineThickness = props.lineThickness ?? 2;
+  const stepGap = props.stepGap ?? 8;
+  
+  // Colors
+  const completedColor = getColorFromFill(props.completedFill, '#3B82F6');
+  const activeColor = getColorFromFill(props.activeFill, '#3B82F6');
+  const inactiveColor = getColorFromFill(props.inactiveFill, '#E5E7EB');
+  const lineColor = getColorFromFill(props.lineFill, '#E5E7EB');
+  const completedLineColor = getColorFromFill(props.completedLineFill, '#3B82F6');
+  const textColor = getColorFromFill(props.textFill, '#FFFFFF');
+  const labelColor = getColorFromFill(props.labelFill, '#6B7280');
+  
+  // Animation
+  const animated = props.animated ?? true;
+  
+  const [currentStep, setCurrentStep] = useState(initialStep);
+  const [animatedValues] = useState(() =>
+    Array.from({ length: totalSteps }, () => new Animated.Value(1))
+  );
+  
+  // Connect to state manager
+  useEffect(() => {
+    if (stateManager) {
+      // Initialize state
+      stateManager.updateState(`element:${componentId}.currentStep`, currentStep);
+      stateManager.updateState(`element:${componentId}.totalSteps`, totalSteps);
+      stateManager.updateState(`element:${componentId}.progress`, currentStep / totalSteps);
+      stateManager.updateState(`element:${componentId}.isComplete`, currentStep >= totalSteps);
+      
+      // Subscribe to external changes
+      return stateManager.subscribeToState(
+        `element:${componentId}.currentStep`,
+        (value: number) => {
+          if (typeof value === 'number' && value !== currentStep) {
+            setCurrentStep(Math.min(Math.max(1, value), totalSteps));
+          }
+        }
+      );
+    }
+  }, [componentId, totalSteps, currentStep, stateManager]);
+  
+  // Animate when step changes
+  useEffect(() => {
+    if (animated) {
+      // Animate current step
+      Animated.sequence([
+        Animated.timing(animatedValues[currentStep - 1], {
+          toValue: 1.15,
+          duration: 100,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValues[currentStep - 1], {
+          toValue: 1,
+          duration: 100,
+          useNativeDriver: true,
+        }),
+      ]).start();
+    }
+    
+    if (stateManager) {
+      stateManager.updateState(`element:${componentId}.currentStep`, currentStep);
+      stateManager.updateState(`element:${componentId}.progress`, currentStep / totalSteps);
+      stateManager.updateState(`element:${componentId}.isComplete`, currentStep >= totalSteps);
+    }
+  }, [currentStep, animated, animatedValues, componentId, totalSteps, stateManager]);
+  
+  const isHorizontal = orientation === 'horizontal';
+  
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          flexDirection: isHorizontal ? 'row' : 'column',
+          gap: stepGap,
+        },
+      ]}
+    >
+      {Array.from({ length: totalSteps }).map((_, index) => {
+        const stepNumber = index + 1;
+        const isCompleted = stepNumber < currentStep;
+        const isActive = stepNumber === currentStep;
+        const isLast = index === totalSteps - 1;
+        
+        const bgColor = isCompleted ? completedColor : isActive ? activeColor : inactiveColor;
+        const currentLineColor = isCompleted ? completedLineColor : lineColor;
+        
+        return (
+          <View
+            key={index}
+            style={[
+              styles.stepContainer,
+              {
+                flexDirection: isHorizontal ? 'row' : 'column',
+                flex: isLast ? undefined : 1,
+              },
+            ]}
+          >
+            {/* Step with optional label */}
+            <View style={styles.stepContent}>
+              {/* Step Circle */}
+              <Animated.View
+                style={[
+                  styles.stepCircle,
+                  {
+                    width: stepSize,
+                    height: stepSize,
+                    borderRadius: stepSize / 2,
+                    backgroundColor: bgColor,
+                    transform: [{ scale: animatedValues[index] }],
+                  },
+                ]}
+              >
+                {isCompleted ? (
+                  <Text style={[styles.stepIcon, { color: textColor, fontSize: stepSize * 0.5 }]}>
+                    ✓
+                  </Text>
+                ) : showNumbers ? (
+                  <Text style={[styles.stepNumber, { color: isActive ? textColor : '#6B7280', fontSize: stepSize * 0.4 }]}>
+                    {stepNumber}
+                  </Text>
+                ) : null}
+              </Animated.View>
+              
+              {/* Step Label */}
+              {showLabels && (
+                <Text
+                  style={[
+                    styles.stepLabel,
+                    {
+                      color: isCompleted || isActive ? textColor : labelColor,
+                      fontSize: 12,
+                    },
+                  ]}
+                  numberOfLines={1}
+                >
+                  {labels[index]}
+                </Text>
+              )}
+            </View>
+            
+            {/* Connecting Line */}
+            {!isLast && (
+              <View
+                style={[
+                  styles.line,
+                  {
+                    backgroundColor: currentLineColor,
+                    height: isHorizontal ? lineThickness : undefined,
+                    width: isHorizontal ? undefined : lineThickness,
+                    flex: 1,
+                    minWidth: isHorizontal ? 20 : undefined,
+                    minHeight: isHorizontal ? undefined : 20,
+                    marginHorizontal: isHorizontal ? stepGap : 0,
+                    marginVertical: isHorizontal ? 0 : stepGap,
+                    borderRadius: lineThickness / 2,
+                  },
+                ]}
+              />
+            )}
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    alignItems: 'center',
+  },
+  stepContainer: {
+    alignItems: 'center',
+  },
+  stepContent: {
+    alignItems: 'center',
+    gap: 4,
+  },
+  stepCircle: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  stepNumber: {
+    fontWeight: '600',
+  },
+  stepIcon: {
+    fontWeight: 'bold',
+  },
+  stepLabel: {
+    textAlign: 'center',
+  },
+  line: {},
+});

package/src/components/SegmentedPickerComponent.tsx

@@ -0,0 +1,245 @@
+import React, { useState, useEffect, useMemo } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import { PaywallComponent } from '../types';
+
+interface SegmentedPickerComponentProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+  renderChild?: (child: PaywallComponent, index: number, isSelected: boolean) => React.ReactNode;
+}
+
+// Helper to extract color from FillValue or string
+const extractColor = (fill: any, fallback: string = 'transparent'): string => {
+  if (!fill) return fallback;
+  if (typeof fill === 'string') return fill;
+  if (fill.type === 'color' && fill.color) return fill.color;
+  if (fill.resolvedColor) return fill.resolvedColor;
+  return fallback;
+};
+
+// Helper to apply selectedAppearance to child when selected
+const applySelectedAppearanceToChild = (
+  child: PaywallComponent,
+  isSelected: boolean
+): PaywallComponent => {
+  if (!isSelected || !child.selectedAppearance) {
+    return child;
+  }
+  // Merge selectedAppearance into appearance for selected state
+  return {
+    ...child,
+    appearance: child.selectedAppearance,
+  };
+};
+
+export const SegmentedPickerComponent: React.FC<SegmentedPickerComponentProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+  renderChild,
+}) => {
+  const props = component.properties as any;
+  // Children arrive fully styled with selectedAppearance for state changes
+  
+  // Selection properties
+  const defaultIndex = props.defaultSelectedIndex ?? 0;
+  const disabled = props.disabled ?? false;
+  const selectableSegments = props.selectableSegments !== false;
+  const bindToPackages = props.bindToPackages ?? false;
+
+  const [selectedIndex, setSelectedIndex] = useState(defaultIndex);
+
+  // Get segment children (filter by role)
+  const segmentChildren = useMemo(() => {
+    if (!component.children) return [];
+    return component.children.filter(child => {
+      const role = (child as any).role;
+      return role?.startsWith('segment-') && role !== 'segment-label';
+    });
+  }, [component.children]);
+
+  // Register initial state
+  useEffect(() => {
+    if (stateManager) {
+      stateManager.updateState(`element:${component.id}.selectedIndex`, selectedIndex);
+    }
+  }, []);
+
+  // Subscribe to external state changes
+  useEffect(() => {
+    if (stateManager) {
+      return stateManager.subscribeToState(
+        `element:${component.id}.selectedIndex`,
+        (value: number) => {
+          if (value !== selectedIndex) {
+            setSelectedIndex(value);
+          }
+        }
+      );
+    }
+  }, [component.id, stateManager]);
+
+  const handleSelect = (index: number) => {
+    if (!disabled && selectableSegments) {
+      setSelectedIndex(index);
+      if (stateManager) {
+        stateManager.updateState(`element:${component.id}.selectedIndex`, index);
+      }
+    }
+  };
+
+  // Container styling from props
+  const containerBackground = extractColor(props.containerBackground, '#f0f0f0');
+  const containerBorderRadius = props.borderRadius ?? 8;
+  const containerPadding = props.padding ?? 4;
+  const gap = props.gap ?? 4;
+
+  // Get styling from component properties and appearance (direct properties architecture)
+  const componentAppearance = (component as any).appearance || {};
+  const componentBorder = (component as any).border || {};
+
+  // Segment styling - read from component.properties (canonical names)
+  const segmentFill = props.segmentFill;
+  const selectedSegmentFill = props.selectedSegmentFill;
+  
+  const segmentBackground = extractColor(segmentFill, extractColor(componentAppearance.fill, 'transparent'));
+  const selectedBackground = extractColor(selectedSegmentFill, '#007AFF');
+  const segmentCornerRadius = componentAppearance.cornerRadius ?? 6;
+  const segmentPadding = props.padding ?? 8;
+  const segmentBorderColor = extractColor(componentBorder.color, 'transparent');
+  const segmentBorderWidth = componentBorder.width ?? 0;
+  const selectedBorderColor = props.selectedBorderColor ?? 'transparent';
+  const selectedBorderWidth = props.selectedBorderWidth ?? 0;
+
+  // Render with children (child-based architecture)
+  if (segmentChildren.length > 0 && renderChild) {
+    return (
+      <View style={[
+        styles.container,
+        { 
+          backgroundColor: containerBackground,
+          borderRadius: containerBorderRadius,
+          padding: containerPadding,
+          gap,
+        },
+        disabled && styles.disabled,
+      ]}>
+        {segmentChildren.map((child, index) => {
+          const isActive = index === selectedIndex;
+          
+          // Use child.selectedAppearance when active (children already have base styling)
+          const appearance = isActive ? child.selectedAppearance : child.appearance;
+          
+          const bgColor = extractColor(appearance?.fill, isActive ? selectedBackground : segmentBackground);
+          const borderColor = isActive 
+            ? extractColor(appearance?.borderColor, selectedBorderColor)
+            : extractColor(componentBorder.color, segmentBorderColor);
+          const borderWidth = isActive 
+            ? (appearance?.borderWidth ?? selectedBorderWidth)
+            : segmentBorderWidth;
+
+          // Apply selectedAppearance to child for rendering
+          const styledChild = applySelectedAppearanceToChild(child, isActive);
+
+          return (
+            <TouchableOpacity
+              key={child.id}
+              onPress={() => handleSelect(index)}
+              disabled={disabled || !selectableSegments}
+              activeOpacity={0.7}
+              style={[
+                styles.segment,
+                {
+                  backgroundColor: bgColor,
+                  borderRadius: appearance?.cornerRadius ?? segmentCornerRadius,
+                  padding: segmentPadding,
+                  borderWidth,
+                  borderColor,
+                },
+              ]}
+            >
+              {renderChild(styledChild, index, isActive)}
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    );
+  }
+
+  // Fallback: render simple text segments from legacy segments property or defaults
+  const legacySegments: string[] = props.segments ?? ['Option 1', 'Option 2'];
+  const activeColor = extractColor(selectedSegmentFill, props.activeColor ?? '#007AFF');
+  const inactiveColor = extractColor(segmentFill, props.inactiveColor ?? 'transparent');
+  const activeTextColor = props.selectedTextColor ?? props.activeTextColor ?? '#fff';
+  const inactiveTextColor = props.textColor ?? props.inactiveTextColor ?? '#333';
+
+  return (
+    <View style={[
+      styles.container,
+      { 
+        backgroundColor: containerBackground,
+        borderRadius: containerBorderRadius,
+        padding: containerPadding,
+      },
+      disabled && styles.disabled,
+    ]}>
+      {legacySegments.map((segment, index) => {
+        const isActive = index === selectedIndex;
+        return (
+          <TouchableOpacity
+            key={index}
+            onPress={() => handleSelect(index)}
+            disabled={disabled || !selectableSegments}
+            activeOpacity={0.7}
+            style={[
+              styles.segment,
+              {
+                backgroundColor: isActive ? activeColor : inactiveColor,
+                borderRadius: segmentCornerRadius,
+                padding: segmentPadding,
+              },
+            ]}
+          >
+            <Text
+              style={[
+                styles.segmentText,
+                { 
+                  color: isActive ? activeTextColor : inactiveTextColor,
+                  fontSize: props.labelFontSize ?? 14,
+                  fontWeight: isActive ? '600' : (props.labelFontWeight ?? 'normal'),
+                },
+              ]}
+            >
+              {segment}
+            </Text>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+  } as ViewStyle,
+  disabled: {
+    opacity: 0.5,
+  } as ViewStyle,
+  segment: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  } as ViewStyle,
+  segmentText: {
+    textAlign: 'center',
+  } as TextStyle,
+});