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

package/src/components/StarRatingInputComponent.tsx

@@ -0,0 +1,223 @@
+/**
+ * StarRatingInputComponent - React Native
+ * 
+ * Interactive star rating with customizable appearance.
+ * Features:
+ * - Configurable max stars
+ * - Half-star support
+ * - State manager integration
+ * - Animated feedback
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Animated,
+} from 'react-native';
+import { PaywallComponent } from '../types';
+
+interface StarRatingInputComponentProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+  renderComponent?: (component: PaywallComponent) => React.ReactNode;
+}
+
+export const StarRatingInputComponent: React.FC<StarRatingInputComponentProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+  renderComponent,
+}) => {
+  const props = component.properties as any;
+  const componentId = component.id;
+  
+  // Rating configuration
+  const maxStars = props.maxStars ?? 5;
+  const defaultRating = Math.min(Math.max(props.defaultRating ?? 0, 0), maxStars);
+  const allowHalfStars = props.allowHalfStars ?? false;
+  const allowZeroRating = props.allowZeroRating ?? true;
+  const disabled = props.disabled ?? false;
+  const tapSameToDeselect = props.tapSameToDeselect ?? true;
+  
+  // Label configuration
+  const showLabel = props.showLabel ?? true;
+  const labelText = props.labelText ?? 'Rate your experience';
+  const labelFontSize = props.labelFontSize?.value ?? 16;
+  const labelFontWeight = props.labelFontWeight ?? '600';
+  const labelTextColor = props.labelTextColor ?? '#1F2937';
+  
+  // Star appearance
+  const starSize = props.starSize ?? 32;
+  const starSpacing = props.starSpacing ?? 4;
+  const activeColor = props.activeColor ?? '#FFD700';
+  const inactiveColor = props.inactiveColor ?? '#D1D5DB';
+  
+  // Display options
+  const showRatingText = props.showRatingText ?? true;
+  const ratingTextFormat = props.ratingTextFormat ?? 'fraction';
+  const ratingTextFontSize = props.ratingTextFontSize?.value ?? 14;
+  const ratingTextColor = props.ratingTextColor ?? '#6B7280';
+  
+  const [currentRating, setCurrentRating] = useState(defaultRating);
+  const [animatedScales] = useState(() => 
+    Array.from({ length: maxStars }, () => new Animated.Value(1))
+  );
+  
+  // Connect to state manager
+  useEffect(() => {
+    if (stateManager) {
+      // Subscribe to external changes
+      return stateManager.subscribeToState(
+        `element:${componentId}.rating`,
+        (value: number) => {
+          if (value !== currentRating) {
+            setCurrentRating(value);
+          }
+        }
+      );
+    }
+  }, [componentId, stateManager, currentRating]);
+  
+  // Update state manager when rating changes
+  useEffect(() => {
+    if (stateManager) {
+      stateManager.updateState(`element:${componentId}.rating`, currentRating);
+    }
+  }, [componentId, currentRating, stateManager]);
+  
+  // Handle star press
+  const handleStarPress = useCallback((starIndex: number) => {
+    if (disabled) return;
+    
+    let newRating = starIndex + 1;
+    
+    // Tap same to deselect
+    if (tapSameToDeselect && newRating === currentRating) {
+      newRating = allowZeroRating ? 0 : 1;
+    }
+    
+    // Clamp rating
+    newRating = Math.max(allowZeroRating ? 0 : 1, Math.min(maxStars, newRating));
+    
+    // Animate the star
+    Animated.sequence([
+      Animated.timing(animatedScales[starIndex], {
+        toValue: 1.3,
+        duration: 100,
+        useNativeDriver: true,
+      }),
+      Animated.timing(animatedScales[starIndex], {
+        toValue: 1,
+        duration: 100,
+        useNativeDriver: true,
+      }),
+    ]).start();
+    
+    setCurrentRating(newRating);
+  }, [disabled, tapSameToDeselect, currentRating, allowZeroRating, maxStars, animatedScales]);
+  
+  // Format rating text
+  const formatRatingText = useCallback(() => {
+    switch (ratingTextFormat) {
+      case 'written':
+        return `${currentRating} of ${maxStars}`;
+      case 'stars':
+        return `${currentRating} ${currentRating === 1 ? 'star' : 'stars'}`;
+      case 'percentage':
+        return `${Math.round((currentRating / maxStars) * 100)}%`;
+      case 'fraction':
+      default:
+        return `${currentRating}/${maxStars}`;
+    }
+  }, [currentRating, maxStars, ratingTextFormat]);
+  
+  return (
+    <View style={[styles.container, disabled && styles.disabled]}>
+      {/* Label */}
+      {showLabel && labelText && (
+        <Text
+          style={[
+            styles.label,
+            {
+              fontSize: labelFontSize,
+              fontWeight: labelFontWeight as any,
+              color: labelTextColor,
+            },
+          ]}
+        >
+          {labelText}
+        </Text>
+      )}
+      
+      {/* Stars Row */}
+      <View style={[styles.starsRow, { gap: starSpacing }]}>
+        {Array.from({ length: maxStars }, (_, index) => {
+          const isFilled = index < currentRating;
+          
+          return (
+            <TouchableOpacity
+              key={index}
+              onPress={() => handleStarPress(index)}
+              disabled={disabled}
+              activeOpacity={0.7}
+            >
+              <Animated.View
+                style={{
+                  transform: [{ scale: animatedScales[index] }],
+                }}
+              >
+                <Text
+                  style={{
+                    fontSize: starSize,
+                    color: isFilled ? activeColor : inactiveColor,
+                  }}
+                >
+                  ★
+                </Text>
+              </Animated.View>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+      
+      {/* Rating Text */}
+      {showRatingText && (
+        <Text
+          style={[
+            styles.ratingText,
+            {
+              fontSize: ratingTextFontSize,
+              color: ratingTextColor,
+            },
+          ]}
+        >
+          {formatRatingText()}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    gap: 12,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  label: {
+    textAlign: 'center',
+  },
+  starsRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  ratingText: {
+    textAlign: 'center',
+  },
+});

package/src/components/StickerCompositeComponent.tsx

@@ -0,0 +1,168 @@
+/**
+ * StickerCompositeComponent - Native React Native implementation
+ * Positioned overlay sticker with rotation, icons, images, and text
+ */
+
+import React from 'react';
+import {
+  View,
+  Text,
+  Image,
+  StyleSheet,
+} from 'react-native';
+import { PaywallComponent } from '../types';
+
+interface StickerCompositeComponentProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+}
+
+// Icon mapping for common icon names
+const ICON_MAP: Record<string, string> = {
+  star: '⭐',
+  heart: '❤️',
+  fire: '🔥',
+  check: '✅',
+  crown: '👑',
+  lightning: '⚡',
+  trophy: '🏆',
+  diamond: '💎',
+  rocket: '🚀',
+  gift: '🎁',
+  medal: '🏅',
+  sparkle: '✨',
+  thumbsup: '👍',
+  badge: '🏷️',
+};
+
+const getColorFromValue = (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 StickerCompositeComponent: React.FC<StickerCompositeComponentProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+}) => {
+  const props = component.properties as any;
+  
+  // Properties
+  const imageUrl = props.imageUrl as string | undefined;
+  const iconName = props.iconName as string | undefined;
+  const text = props.text as string | undefined;
+  const rotation = (props.rotation as number) || 0;
+  const backgroundColor = getColorFromValue(props.backgroundColor, '#FFEB3B');
+  const borderRadius = (props.borderRadius as number) ?? 8;
+  const borderColor = props.borderColor ? getColorFromValue(props.borderColor, 'transparent') : undefined;
+  const borderWidth = (props.borderWidth as number) ?? 0;
+  const shadowColor = props.shadowColor ? getColorFromValue(props.shadowColor, 'rgba(0,0,0,0.2)') : undefined;
+  const shadowBlur = (props.shadowBlur as number) ?? 8;
+  const paddingHorizontal = (props.paddingHorizontal as number) ?? 16;
+  const paddingVertical = (props.paddingVertical as number) ?? 8;
+  const fontSize = (props.fontSize as number) ?? 14;
+  const textColor = getColorFromValue(props.textColor, '#000000');
+  const fontWeight = (props.fontWeight as string) ?? '600';
+  const iconSize = (props.iconSize as number) ?? 24;
+  const iconColor = props.iconColor ? getColorFromValue(props.iconColor, textColor) : textColor;
+  
+  // Get icon emoji
+  const iconEmoji = iconName ? ICON_MAP[iconName.toLowerCase()] || '🏷️' : null;
+  
+  // Build content
+  const hasIcon = !!iconEmoji;
+  const hasImage = !!imageUrl;
+  const hasText = !!text;
+  
+  if (!hasIcon && !hasImage && !hasText) {
+    return null;
+  }
+  
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          transform: [{ rotate: `${rotation}deg` }],
+          backgroundColor,
+          borderRadius,
+          paddingHorizontal,
+          paddingVertical,
+          ...(borderColor && borderWidth > 0 && {
+            borderColor,
+            borderWidth,
+          }),
+          ...(shadowColor && {
+            shadowColor,
+            shadowOffset: { width: 2, height: 2 },
+            shadowOpacity: 0.3,
+            shadowRadius: shadowBlur / 2,
+            elevation: 4,
+          }),
+        },
+      ]}
+    >
+      {/* Icon */}
+      {hasIcon && (
+        <Text style={[styles.icon, { fontSize: iconSize }]}>
+          {iconEmoji}
+        </Text>
+      )}
+      
+      {/* Image */}
+      {hasImage && (
+        <Image
+          source={{ uri: imageUrl }}
+          style={[
+            styles.image,
+            {
+              width: iconSize,
+              height: iconSize,
+              borderRadius: borderRadius / 2,
+            },
+          ]}
+          resizeMode="cover"
+        />
+      )}
+      
+      {/* Text */}
+      {hasText && (
+        <Text
+          style={[
+            styles.text,
+            {
+              fontSize,
+              color: textColor,
+              fontWeight: fontWeight as any,
+              marginLeft: (hasIcon || hasImage) ? 8 : 0,
+            },
+          ]}
+        >
+          {text}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    alignSelf: 'flex-start',
+  },
+  icon: {
+    textAlign: 'center',
+  },
+  image: {
+    overflow: 'hidden',
+  },
+  text: {
+    textAlign: 'center',
+  },
+});
+
+export default StickerCompositeComponent;