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

package/src/components/TextInputComponent.tsx

@@ -0,0 +1,258 @@
+/**
+ * TextInputComponent - React Native
+ * 
+ * Form field for text/email/password input with validation.
+ * Features:
+ * - Multiple field types (text, email, password, phone, number)
+ * - Real-time validation
+ * - State manager integration for form data collection
+ */
+
+import React, { useState, useCallback, useEffect, useMemo } from 'react';
+import {
+  View,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  StyleSheet,
+  KeyboardTypeOptions,
+} from 'react-native';
+import { PaywallComponent } from '../types';
+
+interface TextInputComponentProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+}
+
+// Validation patterns
+const VALIDATION_PATTERNS = {
+  email: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
+  phone: /^[\d\s\-+()]{7,20}$/,
+  url: /^(https?:\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/,
+};
+
+export const TextInputComponent: React.FC<TextInputComponentProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+}) => {
+  const props = component.properties as any;
+  const componentId = component.id;
+  
+  // Extract props
+  const fieldType = props.fieldType || 'text';
+  const placeholder = props.placeholder || 'Enter text...';
+  const label = props.label;
+  const helperText = props.helperText;
+  const defaultValue = props.defaultValue || '';
+  
+  const required = props.required || false;
+  const minLength = props.minLength || 0;
+  const maxLength = props.maxLength || 255;
+  
+  const fontSize = props.fontSize || 16;
+  const textColor = props.textColor || '#000000';
+  const placeholderColor = props.placeholderColor || '#9CA3AF';
+  const labelColor = props.labelColor || '#374151';
+  const errorColor = props.errorColor || '#EF4444';
+  
+  const backgroundColor = props.backgroundColor?.color || '#FFFFFF';
+  const borderColor = props.borderColor || '#D1D5DB';
+  const focusBorderColor = props.focusBorderColor || '#3B82F6';
+  const errorBorderColor = props.errorBorderColor || '#EF4444';
+  const borderRadius = props.borderRadius || 8;
+  const borderWidth = props.borderWidth || 1;
+  
+  const inputHeight = props.inputHeight || 48;
+  
+  const [value, setValue] = useState(defaultValue);
+  const [isFocused, setIsFocused] = useState(false);
+  const [showPassword, setShowPassword] = useState(false);
+  const [errors, setErrors] = useState<string[]>([]);
+  const [touched, setTouched] = useState(false);
+  
+  // Validate value
+  const validate = useCallback((val: string): string[] => {
+    const validationErrors: string[] = [];
+    
+    if (required && !val.trim()) {
+      validationErrors.push('This field is required');
+    }
+    if (val.length > 0 && minLength > 0 && val.length < minLength) {
+      validationErrors.push(`Must be at least ${minLength} characters`);
+    }
+    if (val.length > maxLength) {
+      validationErrors.push(`Must be less than ${maxLength} characters`);
+    }
+    if (fieldType === 'email' && val && !VALIDATION_PATTERNS.email.test(val)) {
+      validationErrors.push('Please enter a valid email address');
+    }
+    if (fieldType === 'phone' && val && !VALIDATION_PATTERNS.phone.test(val)) {
+      validationErrors.push('Please enter a valid phone number');
+    }
+    
+    return validationErrors;
+  }, [required, minLength, maxLength, fieldType]);
+  
+  // Update state manager when value changes
+  useEffect(() => {
+    if (stateManager) {
+      const validationErrors = validate(value);
+      const isValid = validationErrors.length === 0;
+      
+      stateManager.updateState(`element:${componentId}.value`, value);
+      stateManager.updateState(`element:${componentId}.isValid`, isValid);
+      stateManager.updateState(`element:${componentId}.fieldData`, {
+        fieldId: componentId,
+        fieldType,
+        value,
+        isValid,
+        validationErrors,
+      });
+    }
+  }, [value, componentId, fieldType, stateManager, validate]);
+  
+  // Subscribe to external state changes
+  useEffect(() => {
+    if (stateManager) {
+      return stateManager.subscribeToState(
+        `element:${componentId}.value`,
+        (newValue: string) => {
+          if (newValue !== value) {
+            setValue(newValue);
+          }
+        }
+      );
+    }
+  }, [componentId, stateManager, value]);
+  
+  // Handle input change
+  const handleChange = useCallback((text: string) => {
+    setValue(text);
+    if (touched) {
+      setErrors(validate(text));
+    }
+  }, [touched, validate]);
+  
+  // Handle blur
+  const handleBlur = useCallback(() => {
+    setIsFocused(false);
+    setTouched(true);
+    setErrors(validate(value));
+  }, [value, validate]);
+  
+  // Determine keyboard type
+  const keyboardType: KeyboardTypeOptions = useMemo(() => {
+    switch (fieldType) {
+      case 'email': return 'email-address';
+      case 'phone': return 'phone-pad';
+      case 'number': return 'numeric';
+      default: return 'default';
+    }
+  }, [fieldType]);
+  
+  // Current border color
+  const currentBorderColor = errors.length > 0 && touched
+    ? errorBorderColor
+    : isFocused
+      ? focusBorderColor
+      : borderColor;
+  
+  const hasError = errors.length > 0 && touched;
+  
+  return (
+    <View style={styles.container}>
+      {/* Label */}
+      {label && (
+        <Text style={[styles.label, { fontSize: fontSize - 2, color: labelColor }]}>
+          {label}
+          {required && <Text style={{ color: errorColor }}> *</Text>}
+        </Text>
+      )}
+      
+      {/* Input Container */}
+      <View style={styles.inputContainer}>
+        <TextInput
+          value={value}
+          onChangeText={handleChange}
+          onFocus={() => setIsFocused(true)}
+          onBlur={handleBlur}
+          placeholder={placeholder}
+          placeholderTextColor={placeholderColor}
+          maxLength={maxLength}
+          keyboardType={keyboardType}
+          secureTextEntry={fieldType === 'password' && !showPassword}
+          autoCapitalize={fieldType === 'email' ? 'none' : 'sentences'}
+          autoCorrect={fieldType !== 'email' && fieldType !== 'password'}
+          style={[
+            styles.input,
+            {
+              height: inputHeight,
+              fontSize,
+              color: textColor,
+              backgroundColor,
+              borderColor: currentBorderColor,
+              borderRadius,
+              borderWidth,
+              paddingRight: fieldType === 'password' ? 48 : 16,
+            },
+          ]}
+        />
+        
+        {/* Password Toggle */}
+        {fieldType === 'password' && (
+          <TouchableOpacity
+            style={styles.passwordToggle}
+            onPress={() => setShowPassword(!showPassword)}
+          >
+            <Text style={{ color: placeholderColor, fontSize: 12 }}>
+              {showPassword ? 'HIDE' : 'SHOW'}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
+      
+      {/* Helper Text / Error */}
+      {(helperText || hasError) && (
+        <Text
+          style={[
+            styles.helperText,
+            { 
+              fontSize: fontSize - 4,
+              color: hasError ? errorColor : placeholderColor,
+            },
+          ]}
+        >
+          {hasError ? errors[0] : helperText}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  label: {
+    fontWeight: '500',
+    marginBottom: 6,
+  },
+  inputContainer: {
+    position: 'relative',
+  },
+  input: {
+    paddingHorizontal: 16,
+  },
+  passwordToggle: {
+    position: 'absolute',
+    right: 16,
+    top: 0,
+    bottom: 0,
+    justifyContent: 'center',
+  },
+  helperText: {
+    marginTop: 4,
+  },
+});

package/src/components/TimelineComponent.tsx

@@ -0,0 +1,129 @@
+/**
+ * TimelineComponent - React Native
+ * 
+ * Renders a connected timeline with event markers and content.
+ * Features:
+ * - Vertical timeline layout with connecting lines
+ * - Customizable markers and line styles
+ * - Support for icons in markers
+ */
+
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+} from 'react-native';
+import { PaywallComponent } from '../types';
+
+interface TimelineComponentProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+  renderComponent?: (component: PaywallComponent) => React.ReactNode;
+}
+
+// Helper to parse color from various formats
+const parseColor = (value: any, fallback: string): string => {
+  if (!value) return fallback;
+  if (typeof value === 'string') return value;
+  if (typeof value === 'object' && value.color) return value.color;
+  return fallback;
+};
+
+export const TimelineComponent: React.FC<TimelineComponentProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+  renderComponent,
+}) => {
+  const props = component.properties as any;
+  
+  // Extract timeline-specific styling
+  const markerColor = parseColor(props.markerColor, '#3B82F6');
+  const markerSize = props.markerSize || 32;
+  const markerRadius = props.markerRadius ?? markerSize / 2;
+  
+  const lineColor = parseColor(props.lineColor, '#3B82F6');
+  const lineWidthRaw = props.lineWidth;
+  const lineWidth = typeof lineWidthRaw === 'object' ? lineWidthRaw.value : (lineWidthRaw || 2);
+  const lineStyle = props.lineStyle || 'solid';
+  
+  const eventGap = props.eventGap || 0;
+  const contentGap = props.contentGap || 16;
+  
+  const children = component.children || [];
+  
+  return (
+    <View style={[styles.container, { gap: eventGap }]}>
+      {children.map((child, index) => {
+        const isLast = index === children.length - 1;
+        
+        return (
+          <View key={child.id || index} style={styles.eventRow}>
+            {/* Marker Column */}
+            <View style={[styles.markerColumn, { width: markerSize }]}>
+              {/* Marker Circle */}
+              <View
+                style={[
+                  styles.marker,
+                  {
+                    width: markerSize,
+                    height: markerSize,
+                    borderRadius: markerRadius,
+                    backgroundColor: markerColor,
+                  },
+                ]}
+              />
+              
+              {/* Connecting Line */}
+              {!isLast && (
+                <View
+                  style={[
+                    styles.line,
+                    {
+                      width: lineWidth,
+                      backgroundColor: lineStyle === 'solid' ? lineColor : undefined,
+                      borderStyle: lineStyle === 'dashed' ? 'dashed' : lineStyle === 'dotted' ? 'dotted' : undefined,
+                      borderWidth: lineStyle !== 'solid' ? lineWidth : 0,
+                      borderColor: lineColor,
+                    },
+                  ]}
+                />
+              )}
+            </View>
+            
+            {/* Content Column */}
+            <View style={[styles.contentColumn, { marginLeft: contentGap }]}>
+              {renderComponent?.(child)}
+            </View>
+          </View>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  eventRow: {
+    flexDirection: 'row',
+  },
+  markerColumn: {
+    alignItems: 'center',
+  },
+  marker: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  line: {
+    flex: 1,
+    marginTop: 4,
+    marginBottom: 4,
+  },
+  contentColumn: {
+    flex: 1,
+    paddingBottom: 16,
+  },
+});

package/src/components/ToggleComponent.tsx

@@ -0,0 +1,142 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Switch,
+  StyleSheet,
+} from 'react-native';
+import { PaywallComponent } from '../types';
+
+interface ToggleComponentProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+  renderComponent?: (component: PaywallComponent) => React.ReactNode;
+}
+
+// Size mappings matching web schema
+const SIZE_MAP = {
+  sm: { width: 40, height: 20 },
+  md: { width: 50, height: 26 },
+  lg: { width: 60, height: 32 },
+};
+
+/**
+ * ToggleComponent - Hybrid component that renders children (label/description) + switch
+ * Children are rendered via renderComponent callback, switch is functional
+ */
+export const ToggleComponent: React.FC<ToggleComponentProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+  renderComponent,
+}) => {
+  const props = component.properties as any;
+  
+  const defaultChecked = props.defaultValue ?? false;
+  const disabled = props.disabled ?? false;
+  const size = props.size ?? 'md';
+  
+  const trackOnColor = props.trackOnColor ?? '#007AFF';
+  const trackOffColor = props.trackOffColor ?? '#767577';
+
+  const [isChecked, setIsChecked] = useState(defaultChecked);
+
+  // Register initial state
+  useEffect(() => {
+    if (stateManager) {
+      stateManager.updateState(`element:${component.id}.isChecked`, isChecked);
+    }
+  }, []);
+
+  // Subscribe to external state changes
+  useEffect(() => {
+    if (stateManager) {
+      return stateManager.subscribeToState(
+        `element:${component.id}.isChecked`,
+        (value: boolean) => {
+          if (value !== isChecked) {
+            setIsChecked(value);
+          }
+        }
+      );
+    }
+  }, [component.id, stateManager]);
+
+  const handleToggle = (value: boolean) => {
+    if (!disabled) {
+      const previousValue = isChecked;
+      setIsChecked(value);
+      if (stateManager) {
+        stateManager.updateState(`element:${component.id}.isChecked`, value);
+        
+        // Emit toggle_change event for analytics
+        stateManager.trackEvent?.('toggle_change', {
+          componentId: component.id,
+          previousValue,
+          newValue: value,
+        });
+      }
+    }
+  };
+
+  // Structural inference: content container is the first child where type === 'stack'
+  // Label container is the first stack child within content container
+  const contentContainer = component.children?.find(child => child.type === 'stack');
+  const labelContainer = contentContainer?.children?.find(child => child.type === 'stack');
+
+  // Fallback: find text children directly if no nested structure
+  const textChildren = !labelContainer && contentContainer?.children?.filter(child =>
+    child.type === 'text'
+  );
+
+  // Get size dimensions
+  const sizeConfig = SIZE_MAP[size as keyof typeof SIZE_MAP] ?? SIZE_MAP.md;
+
+  return (
+    <View style={[styles.container, disabled && styles.disabled]}>
+      {/* Render label-container children */}
+      {labelContainer && renderComponent && (
+        <View style={styles.labelContainer}>
+          {renderComponent(labelContainer)}
+        </View>
+      )}
+      
+      {/* Backward compatibility: render text children directly */}
+      {!labelContainer && textChildren && renderComponent && textChildren.map(child => (
+        <View key={child.id} style={styles.labelContainer}>
+          {renderComponent(child)}
+        </View>
+      ))}
+      
+      {/* Functional Switch control */}
+      <Switch
+        value={isChecked}
+        onValueChange={handleToggle}
+        disabled={disabled}
+        trackColor={{ false: trackOffColor, true: trackOnColor }}
+        thumbColor={isChecked ? '#fff' : '#f4f3f4'}
+        style={{
+          transform: [
+            { scaleX: sizeConfig.width / 50 },
+            { scaleY: sizeConfig.height / 26 }
+          ]
+        }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    gap: 12,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  labelContainer: {
+    flex: 1,
+  },
+});