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

package/src/components/SingleChoiceGridComponent.tsx

@@ -0,0 +1,229 @@
+/**
+ * Single Choice Grid Component for React Native
+ * Radio button style grid selection (single selection)
+ */
+
+import React, { useState, useEffect } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+  DimensionValue,
+} from 'react-native';
+import { PaywallComponent } from '../types';
+
+interface SingleChoiceGridProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+}
+
+const SIZE_MAP = { sm: 16, md: 20, lg: 24 };
+
+export const SingleChoiceGridComponent: React.FC<SingleChoiceGridProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+}) => {
+  const props = component.properties || {};
+  
+  // Parse options
+  const optionsStr = (props as any).options || 'Option 1,Option 2,Option 3,Option 4';
+  const options = optionsStr.split(',').map((o: string) => o.trim()).filter(Boolean);
+  const descriptionsStr = (props as any).optionDescriptions || '';
+  const descriptions = descriptionsStr.split(',').map((d: string) => d.trim());
+  
+  // Grid settings
+  const columns = (props as any).columns || 2;
+  const gap = parseFloat((props as any).gap?.value || (props as any).gap) || 12;
+  const minItemHeight = parseFloat((props as any).minItemHeight?.value || (props as any).minItemHeight) || 80;
+  
+  // Selection settings
+  const defaultIndex = (props as any).defaultSelectedIndex ?? 0;
+  const allowDeselect = (props as any).allowDeselect ?? false;
+  const disabled = (props as any).disabled ?? false;
+  
+  // State
+  const [selectedIndex, setSelectedIndex] = useState<number>(defaultIndex);
+  
+  // State manager integration
+  useEffect(() => {
+    if (!stateManager) return;
+    
+    const stateId = `element:${component.id}.selectedIndex`;
+    stateManager.registerState?.(stateId, selectedIndex);
+    
+    return stateManager.subscribeToState?.(stateId, (value: number) => {
+      if (value !== selectedIndex) setSelectedIndex(value);
+    });
+  }, [component.id, selectedIndex, stateManager]);
+  
+  const handleSelect = (index: number) => {
+    if (disabled) return;
+    
+    const newIndex = (allowDeselect && selectedIndex === index) ? -1 : index;
+    setSelectedIndex(newIndex);
+    
+    stateManager?.updateState?.(`element:${component.id}.selectedIndex`, newIndex);
+    stateManager?.updateState?.(`element:${component.id}.selectedValue`, newIndex >= 0 ? options[newIndex] : '');
+  };
+  
+  // Styling
+  const showIndicator = (props as any).showIndicator ?? true;
+  const indicatorPosition = (props as any).indicatorPosition || 'top-right';
+  const indicatorSize = SIZE_MAP[(props as any).indicatorSize as keyof typeof SIZE_MAP] || SIZE_MAP.md;
+  const indicatorColor = (props as any).indicatorColor || '#007AFF';
+  const indicatorBorderColor = (props as any).indicatorBorderColor || '#d1d5db';
+  
+  const cardBorderRadius = parseFloat((props as any).cardBorderRadius?.value || (props as any).cardBorderRadius) || 12;
+  const cardBorderColor = (props as any).cardBorderColor || '#e5e7eb';
+  const selectedBorderColor = (props as any).selectedBorderColor || '#007AFF';
+  
+  const labelFontSize = parseFloat((props as any).labelFontSize?.value || (props as any).labelFontSize) || 16;
+  const labelFontWeight = String((props as any).labelFontWeight || '500') as TextStyle['fontWeight'];
+  const labelColor = (props as any).labelColor || '#1f2937';
+  const selectedLabelColor = (props as any).selectedLabelColor || '#007AFF';
+  const descriptionFontSize = parseFloat((props as any).descriptionFontSize?.value || (props as any).descriptionFontSize) || 12;
+  const descriptionColor = (props as any).descriptionColor || '#6b7280';
+  
+  // Background color helper
+  const getBackgroundColor = (fill: any): string => {
+    if (!fill) return '#ffffff';
+    if (typeof fill === 'string') return fill;
+    if (fill.type === 'color') return fill.color || '#ffffff';
+    if (fill.resolvedColor) return fill.resolvedColor;
+    return '#ffffff';
+  };
+  
+  const cardBackground = getBackgroundColor((props as any).cardBackground);
+  const selectedCardBackground = getBackgroundColor((props as any).selectedCardBackground);
+  
+  // Indicator position style
+  const getIndicatorPositionStyle = (): ViewStyle => {
+    const base: ViewStyle = { position: 'absolute' };
+    switch (indicatorPosition) {
+      case 'top-left': return { ...base, top: 8, left: 8 };
+      case 'top-right': return { ...base, top: 8, right: 8 };
+      case 'bottom-left': return { ...base, bottom: 8, left: 8 };
+      case 'bottom-right': return { ...base, bottom: 8, right: 8 };
+      default: return { ...base, top: 8, right: 8 };
+    }
+  };
+  
+  // Calculate item width based on columns
+  const itemWidth: DimensionValue = `${(100 - (columns - 1) * 2) / columns}%`;
+
+  return (
+    <View style={[styles.container, { opacity: disabled ? 0.6 : 1 }]}>
+      <View style={[styles.grid, { gap }]}>
+        {options.map((option: string, index: number) => {
+          const isSelected = selectedIndex === index;
+          const description = descriptions[index] || '';
+          
+          return (
+            <TouchableOpacity
+              key={index}
+              onPress={() => handleSelect(index)}
+              disabled={disabled}
+              activeOpacity={0.7}
+              style={[
+                styles.card,
+                {
+                  width: itemWidth,
+                  minHeight: minItemHeight,
+                  backgroundColor: isSelected ? selectedCardBackground : cardBackground,
+                  borderColor: isSelected ? selectedBorderColor : cardBorderColor,
+                  borderRadius: cardBorderRadius,
+                },
+              ]}
+            >
+              {/* Radio Indicator */}
+              {showIndicator && (
+                <View
+                  style={[
+                    getIndicatorPositionStyle(),
+                    {
+                      width: indicatorSize,
+                      height: indicatorSize,
+                      borderRadius: indicatorSize / 2,
+                      borderWidth: 2,
+                      borderColor: isSelected ? indicatorColor : indicatorBorderColor,
+                      backgroundColor: isSelected ? indicatorColor : 'transparent',
+                      alignItems: 'center',
+                      justifyContent: 'center',
+                    },
+                  ]}
+                >
+                  {isSelected && (
+                    <View
+                      style={{
+                        width: indicatorSize * 0.4,
+                        height: indicatorSize * 0.4,
+                        borderRadius: indicatorSize * 0.2,
+                        backgroundColor: '#ffffff',
+                      }}
+                    />
+                  )}
+                </View>
+              )}
+              
+              {/* Label */}
+              <Text
+                style={[
+                  styles.label,
+                  {
+                    fontSize: labelFontSize,
+                    fontWeight: labelFontWeight,
+                    color: isSelected ? selectedLabelColor : labelColor,
+                  },
+                ]}
+              >
+                {option}
+              </Text>
+              
+              {/* Description */}
+              {description ? (
+                <Text
+                  style={[
+                    styles.description,
+                    {
+                      fontSize: descriptionFontSize,
+                      color: descriptionColor,
+                    },
+                  ]}
+                >
+                  {description}
+                </Text>
+              ) : null}
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+  },
+  grid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  card: {
+    position: 'relative',
+    borderWidth: 2,
+    padding: 16,
+    justifyContent: 'center',
+  },
+  label: {
+    marginTop: 4,
+  },
+  description: {
+    marginTop: 4,
+  },
+});

package/src/components/SliderComponent.tsx

@@ -0,0 +1,280 @@
+import React, { useState, useEffect, useRef, useCallback } from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  PanResponder,
+  Animated,
+  LayoutChangeEvent,
+} from 'react-native';
+import { PaywallComponent } from '../types';
+
+interface SliderComponentProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+}
+
+export const SliderComponent: React.FC<SliderComponentProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+}) => {
+  const props = component.properties as any;
+  const minValue = props.minValue ?? 0;
+  const maxValue = props.maxValue ?? 100;
+  const step = props.step ?? 1;
+  const defaultValue = props.defaultValue ?? minValue;
+  const disabled = props.disabled ?? false;
+  const showValue = props.showValue !== false;
+  const label = props.sliderLabel || props.label;
+  const valuePrefix = props.valuePrefix ?? '';
+  const valueSuffix = props.valueSuffix ?? '';
+
+  // Colors
+  const activeColor = props.activeColor ?? '#007AFF';
+  const trackColor = props.trackColor ?? '#e0e0e0';
+  const thumbColor = props.thumbColor ?? activeColor;
+
+  const [currentValue, setCurrentValue] = useState(defaultValue);
+  const [trackWidth, setTrackWidth] = useState(0);
+  const animatedValue = useRef(new Animated.Value(0)).current;
+  const isDragging = useRef(false);
+
+  // Calculate value from position
+  const positionToValue = useCallback((position: number): number => {
+    if (trackWidth === 0) return minValue;
+    const ratio = Math.max(0, Math.min(1, position / trackWidth));
+    const rawValue = minValue + ratio * (maxValue - minValue);
+    // Apply step
+    const steppedValue = Math.round(rawValue / step) * step;
+    return Math.max(minValue, Math.min(maxValue, steppedValue));
+  }, [trackWidth, minValue, maxValue, step]);
+
+  // Calculate position from value
+  const valueToPosition = useCallback((value: number): number => {
+    if (maxValue === minValue) return 0;
+    const ratio = (value - minValue) / (maxValue - minValue);
+    return ratio * trackWidth;
+  }, [trackWidth, minValue, maxValue]);
+
+  // Update animated value when currentValue or trackWidth changes
+  useEffect(() => {
+    const position = valueToPosition(currentValue);
+    animatedValue.setValue(position);
+  }, [currentValue, trackWidth, valueToPosition, animatedValue]);
+
+  // Register initial state
+  useEffect(() => {
+    if (stateManager) {
+      stateManager.updateState(`element:${component.id}.currentValue`, currentValue);
+    }
+  }, []);
+
+  // Subscribe to external state changes
+  useEffect(() => {
+    if (stateManager) {
+      return stateManager.subscribeToState(
+        `element:${component.id}.currentValue`,
+        (value: number) => {
+          if (value !== currentValue && !isDragging.current) {
+            setCurrentValue(value);
+          }
+        }
+      );
+    }
+  }, [component.id, stateManager, currentValue]);
+
+  // Pan responder for drag handling
+  const panResponder = useRef(
+    PanResponder.create({
+      onStartShouldSetPanResponder: () => !disabled,
+      onMoveShouldSetPanResponder: () => !disabled,
+      onPanResponderGrant: (_, gestureState) => {
+        isDragging.current = true;
+        // Calculate initial position from touch
+        const touchX = gestureState.x0;
+        // This needs adjustment based on actual component position
+      },
+      onPanResponderMove: (_, gestureState) => {
+        if (disabled || trackWidth === 0) return;
+        
+        // Calculate new position based on accumulated movement
+        const currentPosition = valueToPosition(currentValue);
+        const newPosition = Math.max(0, Math.min(trackWidth, currentPosition + gestureState.dx));
+        const newValue = positionToValue(newPosition);
+        
+        if (newValue !== currentValue) {
+          setCurrentValue(newValue);
+          animatedValue.setValue(newPosition);
+        }
+      },
+      onPanResponderRelease: () => {
+        isDragging.current = false;
+        // Update state manager on release
+        if (stateManager) {
+          stateManager.updateState(`element:${component.id}.currentValue`, currentValue);
+        }
+      },
+      onPanResponderTerminate: () => {
+        isDragging.current = false;
+      },
+    })
+  ).current;
+
+  // Handle track layout
+  const onTrackLayout = (event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    setTrackWidth(width);
+  };
+
+  // Handle direct tap on track
+  const handleTrackPress = (event: any) => {
+    if (disabled || trackWidth === 0) return;
+    
+    const touchX = event.nativeEvent.locationX;
+    const newValue = positionToValue(touchX);
+    setCurrentValue(newValue);
+    
+    if (stateManager) {
+      stateManager.updateState(`element:${component.id}.currentValue`, newValue);
+    }
+  };
+
+  const formatValue = (value: number): string => {
+    if (step >= 1) {
+      return Math.round(value).toString();
+    } else if (step >= 0.1) {
+      return value.toFixed(1);
+    }
+    return value.toFixed(2);
+  };
+
+  // Calculate progress percentage
+  const progress = trackWidth > 0 ? ((currentValue - minValue) / (maxValue - minValue)) * 100 : 0;
+
+  return (
+    <View style={[styles.container, disabled && styles.disabled]}>
+      {(label || showValue) && (
+        <View style={styles.header}>
+          {label && <Text style={styles.label}>{label}</Text>}
+          {showValue && (
+            <Text style={styles.value}>
+              {valuePrefix}{formatValue(currentValue)}{valueSuffix}
+            </Text>
+          )}
+        </View>
+      )}
+      
+      <View 
+        style={styles.sliderContainer}
+        onStartShouldSetResponder={() => !disabled}
+        onResponderGrant={handleTrackPress}
+        {...panResponder.panHandlers}
+      >
+        <View 
+          style={[styles.track, { backgroundColor: trackColor }]}
+          onLayout={onTrackLayout}
+        >
+          <Animated.View 
+            style={[
+              styles.fill, 
+              { 
+                backgroundColor: activeColor,
+                width: animatedValue.interpolate({
+                  inputRange: [0, trackWidth || 1],
+                  outputRange: ['0%', '100%'],
+                  extrapolate: 'clamp',
+                }),
+              }
+            ]} 
+          />
+        </View>
+        <Animated.View 
+          style={[
+            styles.thumb,
+            { 
+              backgroundColor: thumbColor,
+              transform: [{
+                translateX: animatedValue.interpolate({
+                  inputRange: [0, trackWidth || 1],
+                  outputRange: [0, trackWidth || 0],
+                  extrapolate: 'clamp',
+                }),
+              }],
+            }
+          ]} 
+        />
+      </View>
+      
+      <View style={styles.rangeLabels}>
+        <Text style={styles.rangeLabel}>{minValue}</Text>
+        <Text style={styles.rangeLabel}>{maxValue}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    paddingVertical: 8,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  header: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    marginBottom: 12,
+  },
+  label: {
+    fontSize: 16,
+    fontWeight: '500',
+    color: '#333',
+  },
+  value: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#007AFF',
+  },
+  sliderContainer: {
+    height: 44,
+    justifyContent: 'center',
+    paddingHorizontal: 10, // Padding for thumb
+  },
+  track: {
+    height: 6,
+    borderRadius: 3,
+    overflow: 'hidden',
+  },
+  fill: {
+    height: '100%',
+    borderRadius: 3,
+  },
+  thumb: {
+    position: 'absolute',
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    marginLeft: -2, // Center thumb on track edge
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 4,
+    borderWidth: 2,
+    borderColor: '#fff',
+  },
+  rangeLabels: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    marginTop: 8,
+    paddingHorizontal: 4,
+  },
+  rangeLabel: {
+    fontSize: 12,
+    color: '#999',
+  },
+});