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

package/src/components/ChartCurveComponent.tsx

@@ -0,0 +1,452 @@
+/**
+ * ChartCurveComponent - Native React Native implementation
+ * Supports 6 curve types: ascending, descending, dip, rise, flat-end, s-curve
+ */
+
+import React, { useEffect, useRef } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  Animated,
+  Easing,
+} from 'react-native';
+import Svg, {
+  Path,
+  Line,
+  Circle,
+  Rect,
+  Text as SvgText,
+  Defs,
+  LinearGradient,
+  Stop,
+  ClipPath,
+  G,
+} from 'react-native-svg';
+import { PaywallComponent } from '../types';
+
+interface ChartCurveComponentProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+}
+
+// Curve path definitions (relative to viewBox 0 0 100 100)
+const CURVE_PATHS: Record<string, string> = {
+  ascending: 'M 0 80 Q 25 75, 50 50 T 100 10',
+  descending: 'M 0 10 Q 25 25, 50 50 T 100 80',
+  dip: 'M 0 30 Q 25 70, 50 80 T 100 30',
+  rise: 'M 0 70 Q 25 30, 50 20 T 100 70',
+  'flat-end': 'M 0 80 Q 30 40, 60 25 T 100 25',
+  's-curve': 'M 0 80 C 25 80, 35 20, 50 20 S 75 80, 100 20',
+};
+
+// 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 (typeof fill === 'object') {
+    if (fill.type === 'solid' && fill.color) return fill.color;
+    if (fill.type === 'gradient' && fill.stops?.length > 0) {
+      return fill.stops[0].color || fallback;
+    }
+    if (fill.color) return fill.color;
+  }
+  
+  return fallback;
+};
+
+// Helper to extract gradient stops
+const getGradientStops = (fill: any): Array<{ color: string; offset: number }> | null => {
+  if (!fill || typeof fill !== 'object') return null;
+  if (fill.type === 'gradient' && fill.stops?.length > 0) {
+    return fill.stops.map((stop: any) => ({
+      color: stop.color || '#3B82F6',
+      offset: (stop.position ?? 0) / 100,
+    }));
+  }
+  return null;
+};
+
+// Generate date labels based on date range
+const generateDateLabels = (
+  startDate: string | undefined,
+  endDate: string | undefined,
+  unit: string,
+  count: number = 5
+): string[] => {
+  const labels: string[] = [];
+  
+  if (!startDate || !endDate) {
+    // Generate placeholder labels
+    for (let i = 0; i < count; i++) {
+      labels.push(`Day ${i + 1}`);
+    }
+    return labels;
+  }
+  
+  const start = new Date(startDate);
+  const end = new Date(endDate);
+  const diff = end.getTime() - start.getTime();
+  
+  for (let i = 0; i < count; i++) {
+    const date = new Date(start.getTime() + (diff * i) / (count - 1));
+    
+    switch (unit) {
+      case 'day':
+        labels.push(date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }));
+        break;
+      case 'week':
+        labels.push(`W${Math.ceil(date.getDate() / 7)}`);
+        break;
+      case 'month':
+        labels.push(date.toLocaleDateString('en-US', { month: 'short' }));
+        break;
+      case 'year':
+        labels.push(date.getFullYear().toString());
+        break;
+      default:
+        labels.push(date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }));
+    }
+  }
+  
+  return labels;
+};
+
+export const ChartCurveComponent: React.FC<ChartCurveComponentProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+}) => {
+  const props = component.properties as any;
+  
+  // Curve configuration
+  const curveType = props.curveType || 'ascending';
+  const curvePath = CURVE_PATHS[curveType] || CURVE_PATHS.ascending;
+  
+  // Badge configuration
+  const showLeftBadge = props.showLeftBadge !== false;
+  const showRightBadge = props.showRightBadge !== false;
+  const leftBadgeText = props.leftBadgeText || 'Start';
+  const rightBadgeText = props.rightBadgeText || 'End';
+  const badgeFill = getColorFromFill(props.badgeFill, '#EFF6FF');
+  const badgeTextFill = getColorFromFill(props.badgeTextFill, '#1E40AF');
+  const badgeBorderRadius = props.badgeBorderRadius ?? 4;
+  const badgeFontSize = props.badgeFontSize ?? 10;
+  
+  // Line styling
+  const lineStroke = getColorFromFill(props.lineStroke, '#3B82F6');
+  const lineStrokeGradient = getGradientStops(props.lineStroke);
+  const lineWidth = props.lineWidth ?? 2;
+  
+  // Area configuration
+  const showArea = props.showArea ?? true;
+  const areaFill = getColorFromFill(props.areaFill, '#3B82F6');
+  const areaFillGradient = getGradientStops(props.areaFill);
+  
+  // Dots configuration
+  const showDots = props.showDots ?? false;
+  const dotSize = props.dotSize ?? 4;
+  const dotFill = getColorFromFill(props.dotFill, '#3B82F6');
+  
+  // Animation configuration
+  const animated = props.animated !== false;
+  const animationDuration = props.animationDuration ?? 1000;
+  
+  // Grid/axis configuration
+  const showGrid = props.showGrid ?? false;
+  const showXAxis = props.showXAxis !== false;
+  const gridColor = getColorFromFill(props.gridColor, '#E5E7EB');
+  const axisColor = getColorFromFill(props.axisColor, '#9CA3AF');
+  
+  // X-axis label configuration
+  const xLabelMode = props.xLabelMode || 'none';
+  const dateRange = props.dateRange || {};
+  const dateUnit = props.dateUnit || 'day';
+  const customLabels = props.customLabels || [];
+  
+  // Get X-axis labels
+  const getXLabels = (): string[] => {
+    switch (xLabelMode) {
+      case 'date-range':
+        return generateDateLabels(dateRange.start, dateRange.end, dateUnit);
+      case 'custom':
+        return customLabels.length > 0 ? customLabels : ['', '', '', '', ''];
+      default:
+        return [];
+    }
+  };
+  
+  const xLabels = getXLabels();
+  
+  // Animation
+  const animatedProgress = useRef(new Animated.Value(0)).current;
+  
+  useEffect(() => {
+    if (animated) {
+      animatedProgress.setValue(0);
+      Animated.timing(animatedProgress, {
+        toValue: 1,
+        duration: animationDuration,
+        easing: Easing.out(Easing.quad),
+        useNativeDriver: false,
+      }).start();
+    } else {
+      animatedProgress.setValue(1);
+    }
+  }, [animated, animationDuration, animatedProgress]);
+  
+  // Get curve endpoint positions for badges
+  const getCurveEndpoints = (curveType: string): { left: { x: number; y: number }; right: { x: number; y: number } } => {
+    switch (curveType) {
+      case 'ascending':
+        return { left: { x: 0, y: 80 }, right: { x: 100, y: 10 } };
+      case 'descending':
+        return { left: { x: 0, y: 10 }, right: { x: 100, y: 80 } };
+      case 'dip':
+        return { left: { x: 0, y: 30 }, right: { x: 100, y: 30 } };
+      case 'rise':
+        return { left: { x: 0, y: 70 }, right: { x: 100, y: 70 } };
+      case 'flat-end':
+        return { left: { x: 0, y: 80 }, right: { x: 100, y: 25 } };
+      case 's-curve':
+        return { left: { x: 0, y: 80 }, right: { x: 100, y: 20 } };
+      default:
+        return { left: { x: 0, y: 80 }, right: { x: 100, y: 10 } };
+    }
+  };
+  
+  const endpoints = getCurveEndpoints(curveType);
+  
+  // Create area path (curve + bottom closing)
+  const getAreaPath = (): string => {
+    return `${curvePath} L 100 100 L 0 100 Z`;
+  };
+  
+  // Calculate dot positions along the curve
+  const getDotPositions = (): Array<{ x: number; y: number }> => {
+    // Simplified: place dots at key points
+    const positions: Array<{ x: number; y: number }> = [];
+    const points = 5;
+    
+    for (let i = 0; i < points; i++) {
+      const t = i / (points - 1);
+      const x = t * 100;
+      // Approximate y based on curve type
+      let y: number;
+      switch (curveType) {
+        case 'ascending':
+          y = 80 - (70 * t);
+          break;
+        case 'descending':
+          y = 10 + (70 * t);
+          break;
+        case 'dip':
+          y = 30 + 50 * Math.sin(Math.PI * t);
+          break;
+        case 'rise':
+          y = 70 - 50 * Math.sin(Math.PI * t);
+          break;
+        case 'flat-end':
+          y = 80 - 55 * Math.min(1, t * 1.5);
+          break;
+        case 's-curve':
+          y = t < 0.5 ? 80 - 60 * (2 * t) : 20 + 60 * (2 * t - 1) - 60;
+          break;
+        default:
+          y = 50;
+      }
+      positions.push({ x, y: Math.max(10, Math.min(90, y)) });
+    }
+    
+    return positions;
+  };
+  
+  const dotPositions = showDots ? getDotPositions() : [];
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.chartContainer}>
+        <Svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
+          <Defs>
+            {/* Line gradient */}
+            {lineStrokeGradient && (
+              <LinearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                {lineStrokeGradient.map((stop, index) => (
+                  <Stop key={index} offset={`${stop.offset * 100}%`} stopColor={stop.color} />
+                ))}
+              </LinearGradient>
+            )}
+            
+            {/* Area gradient */}
+            <LinearGradient id="areaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+              {areaFillGradient ? (
+                areaFillGradient.map((stop, index) => (
+                  <Stop key={index} offset={`${stop.offset * 100}%`} stopColor={stop.color} stopOpacity={0.3} />
+                ))
+              ) : (
+                [
+                  <Stop key="area-start" offset="0%" stopColor={areaFill} stopOpacity={0.3} />,
+                  <Stop key="area-end" offset="100%" stopColor={areaFill} stopOpacity={0.05} />,
+                ]
+              )}
+            </LinearGradient>
+          </Defs>
+          
+          {/* Grid lines */}
+          {showGrid && (
+            <G>
+              {[20, 40, 60, 80].map((y) => (
+                <Line
+                  key={`h-${y}`}
+                  x1="0"
+                  y1={y}
+                  x2="100"
+                  y2={y}
+                  stroke={gridColor}
+                  strokeWidth={0.5}
+                  strokeDasharray="2,2"
+                />
+              ))}
+              {[20, 40, 60, 80].map((x) => (
+                <Line
+                  key={`v-${x}`}
+                  x1={x}
+                  y1="0"
+                  x2={x}
+                  y2="100"
+                  stroke={gridColor}
+                  strokeWidth={0.5}
+                  strokeDasharray="2,2"
+                />
+              ))}
+            </G>
+          )}
+          
+          {/* Area fill */}
+          {showArea && (
+            <Path
+              d={getAreaPath()}
+              fill="url(#areaGradient)"
+            />
+          )}
+          
+          {/* Curve line */}
+          <Path
+            d={curvePath}
+            stroke={lineStrokeGradient ? 'url(#lineGradient)' : lineStroke}
+            strokeWidth={lineWidth}
+            fill="none"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          
+          {/* Data points */}
+          {showDots && dotPositions.map((pos, index) => (
+            <Circle
+              key={index}
+              cx={pos.x}
+              cy={pos.y}
+              r={dotSize / 2}
+              fill={dotFill}
+            />
+          ))}
+          
+          {/* X-axis line */}
+          {showXAxis && (
+            <Line
+              x1="0"
+              y1="100"
+              x2="100"
+              y2="100"
+              stroke={axisColor}
+              strokeWidth={1}
+            />
+          )}
+          
+          {/* Left badge */}
+          {showLeftBadge && (
+            <G>
+              <Rect
+                x={endpoints.left.x}
+                y={endpoints.left.y - 8}
+                width={30}
+                height={16}
+                rx={badgeBorderRadius}
+                fill={badgeFill}
+              />
+              <SvgText
+                x={endpoints.left.x + 15}
+                y={endpoints.left.y + 1}
+                fontSize={badgeFontSize}
+                fill={badgeTextFill}
+                textAnchor="middle"
+                alignmentBaseline="middle"
+              >
+                {leftBadgeText}
+              </SvgText>
+            </G>
+          )}
+          
+          {/* Right badge */}
+          {showRightBadge && (
+            <G>
+              <Rect
+                x={endpoints.right.x - 30}
+                y={endpoints.right.y - 8}
+                width={30}
+                height={16}
+                rx={badgeBorderRadius}
+                fill={badgeFill}
+              />
+              <SvgText
+                x={endpoints.right.x - 15}
+                y={endpoints.right.y + 1}
+                fontSize={badgeFontSize}
+                fill={badgeTextFill}
+                textAnchor="middle"
+                alignmentBaseline="middle"
+              >
+                {rightBadgeText}
+              </SvgText>
+            </G>
+          )}
+        </Svg>
+      </View>
+      
+      {/* X-axis labels */}
+      {xLabelMode !== 'none' && xLabels.length > 0 && (
+        <View style={styles.xAxisLabels}>
+          {xLabels.map((label, index) => (
+            <Text key={index} style={[styles.xAxisLabel, { color: axisColor }]}>
+              {label}
+            </Text>
+          ))}
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    aspectRatio: 2,
+  },
+  chartContainer: {
+    flex: 1,
+    paddingTop: 16,
+    paddingBottom: 8,
+  },
+  xAxisLabels: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingHorizontal: 4,
+    marginTop: 4,
+  },
+  xAxisLabel: {
+    fontSize: 10,
+    textAlign: 'center',
+  },
+});

package/src/components/CheckboxComponent.tsx

@@ -0,0 +1,185 @@
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+} from 'react-native';
+import { PaywallComponent } from '../types';
+
+interface CheckboxComponentProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+}
+
+// Size mappings matching web schema
+const SIZE_MAP = {
+  sm: 20,
+  md: 24,
+  lg: 32,
+};
+
+// Check icon mappings
+const CHECK_ICONS = {
+  check: '✓',
+  cross: '✕',
+  circle: '●',
+};
+
+export const CheckboxComponent: React.FC<CheckboxComponentProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+}) => {
+  const props = component.properties as any;
+  
+  const defaultChecked = props.defaultValue ?? false;
+  const disabled = props.disabled ?? false;
+  const label = props.label;
+  const variant = props.variant ?? 'default';
+  const checkIcon = props.checkIcon ?? 'check';
+  const labelPosition = props.labelPosition ?? 'right';
+  
+  // Size handling - support both select values (sm/md/lg) and numeric values
+  const sizeValue = props.size ?? 'md';
+  const size = typeof sizeValue === 'number' 
+    ? sizeValue 
+    : (SIZE_MAP[sizeValue as keyof typeof SIZE_MAP] ?? SIZE_MAP.md);
+  
+  const checkColor = props.checkColor ?? '#FFFFFF';
+  const uncheckedColor = props.uncheckedColor ?? '#d1d5db';
+  const checkedBackgroundColor = props.checkedBackgroundColor ?? '#007AFF';
+
+  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 = () => {
+    if (!disabled) {
+      const newValue = !isChecked;
+      setIsChecked(newValue);
+      if (stateManager) {
+        stateManager.updateState(`element:${component.id}.isChecked`, newValue);
+      }
+    }
+  };
+
+  // Get variant-specific styling
+  const getCheckboxStyle = () => {
+    const baseStyle = {
+      width: size,
+      height: size,
+      borderRadius: variant === 'outlined' ? size / 2 : 4,
+    };
+    
+    switch (variant) {
+      case 'filled':
+        return {
+          ...baseStyle,
+          borderColor: isChecked ? checkedBackgroundColor : uncheckedColor,
+          backgroundColor: isChecked ? checkedBackgroundColor : uncheckedColor,
+          borderWidth: 0,
+        };
+      case 'outlined':
+        return {
+          ...baseStyle,
+          borderColor: isChecked ? checkedBackgroundColor : uncheckedColor,
+          backgroundColor: isChecked ? checkedBackgroundColor : 'transparent',
+          borderWidth: 2,
+        };
+      default: // 'default'
+        return {
+          ...baseStyle,
+          borderColor: isChecked ? checkedBackgroundColor : uncheckedColor,
+          backgroundColor: isChecked ? checkedBackgroundColor : 'transparent',
+          borderWidth: 2,
+        };
+    }
+  };
+
+  const checkIconChar = CHECK_ICONS[checkIcon as keyof typeof CHECK_ICONS] ?? CHECK_ICONS.check;
+
+  const renderCheckbox = () => (
+    <View style={[styles.checkbox, getCheckboxStyle()]}>
+      {isChecked && (
+        <Text style={[styles.checkmark, { fontSize: size * 0.6, color: checkColor }]}>
+          {checkIconChar}
+        </Text>
+      )}
+    </View>
+  );
+
+  const renderLabel = () => (
+    label ? (
+      <Text style={[
+        styles.label, 
+        disabled && styles.disabledText,
+        labelPosition === 'left' ? styles.labelLeft : styles.labelRight
+      ]}>
+        {label}
+      </Text>
+    ) : null
+  );
+
+  return (
+    <TouchableOpacity
+      onPress={handleToggle}
+      disabled={disabled}
+      activeOpacity={0.7}
+      style={[styles.container, disabled && styles.disabled]}
+    >
+      {labelPosition === 'left' && renderLabel()}
+      {renderCheckbox()}
+      {labelPosition === 'right' && renderLabel()}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  checkbox: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  checkmark: {
+    fontWeight: 'bold',
+  },
+  label: {
+    fontSize: 16,
+  },
+  labelLeft: {
+    marginRight: 12,
+  },
+  labelRight: {
+    marginLeft: 12,
+  },
+  disabledText: {
+    color: '#999',
+  },
+});