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

package/src/components/ShareButtonsComponent.tsx

@@ -0,0 +1,299 @@
+/**
+ * ShareButtonsComponent - React Native
+ * 
+ * Social share buttons with Stack Child-Based Hybrid architecture and Layout Assistant.
+ * Features:
+ * - Hybrid mode: renders children via renderChild when available
+ * - Legacy mode: self-renders buttons when no children
+ * - Native share sheet
+ * - Platform-specific sharing (Twitter, Facebook, etc.)
+ * - Copy link functionality
+ */
+
+import React, { useState, useCallback } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Share,
+  Linking,
+  Clipboard,
+} from 'react-native';
+import { PaywallComponent } from '../types';
+
+interface ShareButtonsComponentProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+  renderChild?: (child: PaywallComponent, index: number) => React.ReactNode;
+}
+
+// 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.resolvedColor) return fill.resolvedColor;
+  if (fill.type === 'color' && fill.color) return fill.color;
+  return fallback;
+};
+
+// Platform configurations with brand colors
+const PLATFORM_CONFIG: Record<string, { icon: string; label: string; color: string }> = {
+  native: { icon: '📤', label: 'Share', color: '#3B82F6' },
+  copy: { icon: '🔗', label: 'Copy', color: '#6B7280' },
+  twitter: { icon: '🐦', label: 'Twitter', color: '#1DA1F2' },
+  facebook: { icon: '📘', label: 'Facebook', color: '#1877F2' },
+  linkedin: { icon: '💼', label: 'LinkedIn', color: '#0A66C2' },
+  whatsapp: { icon: '💬', label: 'WhatsApp', color: '#25D366' },
+  telegram: { icon: '✈️', label: 'Telegram', color: '#0088cc' },
+  email: { icon: '✉️', label: 'Email', color: '#6B7280' },
+};
+
+export const ShareButtonsComponent: React.FC<ShareButtonsComponentProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+  renderChild,
+}) => {
+  const props = component.properties as any;
+  // Children arrive fully styled with selectedAppearance for state changes
+  const children = component.children || [];
+  const visibleChildren = children.filter((c: any) => c.visible !== false);
+  const componentId = component.id;
+  
+  // Platform toggles
+  const showNativeShare = props.showNativeShare !== false;
+  const showCopyLink = props.showCopyLink !== false;
+  const showTwitter = props.showTwitter ?? false;
+  const showFacebook = props.showFacebook ?? false;
+  const showLinkedIn = props.showLinkedIn ?? false;
+  const showWhatsApp = props.showWhatsApp ?? false;
+  const showTelegram = props.showTelegram ?? false;
+  const showEmail = props.showEmail ?? false;
+  
+  // Build enabled platforms array
+  const enabledPlatforms: string[] = [];
+  if (showNativeShare) enabledPlatforms.push('native');
+  if (showCopyLink) enabledPlatforms.push('copy');
+  if (showTwitter) enabledPlatforms.push('twitter');
+  if (showFacebook) enabledPlatforms.push('facebook');
+  if (showLinkedIn) enabledPlatforms.push('linkedin');
+  if (showWhatsApp) enabledPlatforms.push('whatsapp');
+  if (showTelegram) enabledPlatforms.push('telegram');
+  if (showEmail) enabledPlatforms.push('email');
+  
+  // Share Content
+  const shareTitle = props.shareTitle ?? 'Check this out!';
+  const shareText = props.shareText ?? 'I found this amazing app!';
+  const shareUrl = props.shareUrl ?? '';
+  
+  // Layout
+  const layout = props.layout ?? 'horizontal';
+  const buttonGap = props.buttonGap ?? 8;
+  const alignment = props.alignment ?? 'center';
+  
+  // Button Styling - children arrive fully styled
+  const componentAppearance = (component as any).appearance || {};
+  const buttonStyle = props.buttonStyle ?? 'icon-only';
+  const buttonSize = props.buttonSize ?? 44;
+  const buttonBorderRadius = componentAppearance.cornerRadius ?? props.buttonBorderRadius ?? 8;
+  const useBrandColors = props.useBrandColors !== false;
+  
+  // Custom colors from component appearance
+  const customButtonBackground = getColorFromFill(componentAppearance.fill, '#E5E7EB');
+  const customIconColor = '#FFFFFF';
+  
+  // Labels
+  const copiedLabel = props.copiedLabel ?? 'Copied!';
+  
+  const [copiedState, setCopiedState] = useState(false);
+  
+  // Handle share for each platform
+  const handleShare = useCallback(async (platform: string) => {
+    const fullContent = shareUrl ? `${shareText} ${shareUrl}` : shareText;
+    
+    switch (platform) {
+      case 'native':
+        try {
+          await Share.share({
+            message: fullContent,
+            title: shareTitle,
+          });
+        } catch (err) {
+          console.error('Share failed:', err);
+        }
+        break;
+        
+      case 'copy':
+        try {
+          Clipboard.setString(shareUrl || shareText);
+          setCopiedState(true);
+          setTimeout(() => setCopiedState(false), 2000);
+        } catch (err) {
+          console.error('Copy failed:', err);
+        }
+        break;
+        
+      case 'twitter':
+        Linking.openURL(
+          `https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}`
+        );
+        break;
+        
+      case 'facebook':
+        Linking.openURL(
+          `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}&quote=${encodeURIComponent(shareText)}`
+        );
+        break;
+        
+      case 'linkedin':
+        Linking.openURL(
+          `https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`
+        );
+        break;
+        
+      case 'whatsapp':
+        Linking.openURL(
+          `whatsapp://send?text=${encodeURIComponent(fullContent)}`
+        );
+        break;
+        
+      case 'telegram':
+        Linking.openURL(
+          `tg://msg?text=${encodeURIComponent(fullContent)}`
+        );
+        break;
+        
+      case 'email':
+        Linking.openURL(
+          `mailto:?subject=${encodeURIComponent(shareTitle)}&body=${encodeURIComponent(fullContent)}`
+        );
+        break;
+    }
+    
+    // Track share event
+    if (stateManager) {
+      stateManager.updateState(`element:${componentId}.lastShared`, platform);
+    }
+  }, [shareTitle, shareText, shareUrl, componentId, stateManager]);
+  
+  const getLabel = (platform: string): string => {
+    if (platform === 'copy') return copiedState ? copiedLabel : PLATFORM_CONFIG[platform]?.label || platform;
+    return PLATFORM_CONFIG[platform]?.label || platform;
+  };
+  
+  // HYBRID MODE: Render children if available and renderChild is provided
+  if (visibleChildren.length > 0 && renderChild) {
+    return (
+      <View
+        style={[
+          styles.container,
+          {
+            flexDirection: layout === 'vertical' ? 'column' : 'row',
+            gap: buttonGap,
+            justifyContent: alignment === 'start' ? 'flex-start' : alignment === 'end' ? 'flex-end' : 'center',
+          },
+        ]}
+      >
+        {visibleChildren.map((child: PaywallComponent, index: number) => {
+          const platform = (child.role || '').replace('share-button-', '');
+          return (
+            <TouchableOpacity
+              key={child.id}
+              onPress={() => handleShare(platform)}
+              activeOpacity={0.7}
+            >
+              {renderChild(child, index)}
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    );
+  }
+  
+  // Show message if no platforms enabled
+  if (enabledPlatforms.length === 0) {
+    return (
+      <View style={styles.emptyContainer}>
+        <Text style={styles.emptyText}>Enable at least one share platform</Text>
+      </View>
+    );
+  }
+  
+  // LEGACY MODE: Self-render buttons
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          flexDirection: layout === 'vertical' ? 'column' : 'row',
+          gap: buttonGap,
+          justifyContent: alignment === 'start' ? 'flex-start' : alignment === 'end' ? 'flex-end' : 'center',
+        },
+      ]}
+    >
+      {enabledPlatforms.map((platform) => {
+        const config = PLATFORM_CONFIG[platform];
+        if (!config) return null;
+        
+        const bgColor = useBrandColors ? config.color : customButtonBackground;
+        const textColor = useBrandColors ? '#FFFFFF' : customIconColor;
+        
+        return (
+          <TouchableOpacity
+            key={platform}
+            onPress={() => handleShare(platform)}
+            activeOpacity={0.7}
+            style={[
+              styles.button,
+              {
+                width: buttonStyle === 'text-only' ? undefined : buttonSize,
+                height: buttonSize,
+                borderRadius: buttonBorderRadius,
+                backgroundColor: bgColor,
+                paddingHorizontal: buttonStyle === 'text-only' ? 16 : 0,
+              },
+            ]}
+          >
+            {buttonStyle !== 'text-only' && (
+              <Text style={{ fontSize: buttonSize * 0.45 }}>
+                {platform === 'copy' && copiedState ? '✓' : config.icon}
+              </Text>
+            )}
+            {buttonStyle !== 'icon-only' && (
+              <Text style={[styles.buttonText, { color: textColor }]}>
+                {getLabel(platform)}
+              </Text>
+            )}
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexWrap: 'wrap',
+    alignItems: 'center',
+  },
+  emptyContainer: {
+    padding: 16,
+    alignItems: 'center',
+  },
+  emptyText: {
+    fontSize: 14,
+    color: '#6B7280',
+  },
+  button: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+  },
+  buttonText: {
+    fontSize: 13,
+    fontWeight: '500',
+  },
+});

package/src/components/ShareCodeComponent.tsx

@@ -0,0 +1,303 @@
+/**
+ * ShareCodeComponent - React Native
+ * 
+ * Hybrid component with child-based architecture.
+ * Uses component.properties for styling; children arrive fully styled with selectedAppearance.
+ */
+
+import React, { useState, useEffect, useCallback } from 'react';
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Share,
+  Clipboard,
+  Animated,
+} from 'react-native';
+import { PaywallComponent } from '../types';
+
+interface ShareCodeComponentProps {
+  component: PaywallComponent;
+  stateManager?: any;
+  isPreviewMode?: boolean;
+  renderChild?: (child: PaywallComponent, index: number) => React.ReactNode;
+}
+
+// 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;
+  if (fill.resolvedColor) return fill.resolvedColor;
+  return fallback;
+};
+
+export const ShareCodeComponent: React.FC<ShareCodeComponentProps> = ({
+  component,
+  stateManager,
+  isPreviewMode = false,
+  renderChild,
+}) => {
+  const props = component.properties as any;
+  // Children arrive fully styled with selectedAppearance for state changes
+  const children = component.children || [];
+  const componentId = component.id;
+  
+  // Properties from schema
+  const code = props.code ?? 'SAVE20';
+  const codeLabel = props.codeLabel ?? '';
+  const codeDescription = props.codeDescription ?? '';
+  const showCopyButton = props.showCopyButton !== false;
+  const showShareButton = props.showShareButton ?? false;
+  const showQRCode = props.showQRCode ?? false;
+  const layout = props.layout ?? 'vertical';
+  const copyButtonText = props.copyButtonText ?? 'Copy Code';
+  const copiedFeedback = props.copiedFeedback ?? 'Copied!';
+  const shareButtonText = props.shareButtonText ?? 'Share';
+  const shareMessage = (props.shareMessage ?? 'Use my code: {{code}} to get a discount!').replace('{{code}}', code);
+  const shareUrl = props.shareUrl ?? '';
+
+  // Styling from component appearance (children arrive fully styled)
+  const componentAppearance = (component as any).appearance || {};
+  const codeContainerFill = getColorFromFill(componentAppearance.fill, '#F3F4F6');
+  const buttonFill = '#3B82F6'; // Default, buttons have their own styling
+  const codeTextColor = props.codeTextColor ?? '#1F2937';
+  const labelColor = props.labelColor ?? '#6B7280';
+  const descriptionColor = props.descriptionColor ?? '#6B7280';
+  const buttonTextColor = '#FFFFFF';
+  const codeFontSize = props.codeFontSize ?? 24;
+  const containerBorderRadius = componentAppearance.cornerRadius ?? 12;
+  const containerPadding = props.containerPadding ?? 16;
+  
+  const [copied, setCopied] = useState(false);
+  const [copyAnim] = useState(new Animated.Value(1));
+  
+  // Connect to state manager
+  useEffect(() => {
+    if (stateManager) {
+      stateManager.updateState(`element:${componentId}.code`, code);
+      stateManager.updateState(`element:${componentId}.copied`, copied);
+    }
+  }, [code, copied, componentId, stateManager]);
+  
+  // Copy to clipboard
+  const handleCopy = useCallback(async () => {
+    try {
+      Clipboard.setString(code);
+      setCopied(true);
+      
+      Animated.sequence([
+        Animated.timing(copyAnim, {
+          toValue: 0.9,
+          duration: 100,
+          useNativeDriver: true,
+        }),
+        Animated.timing(copyAnim, {
+          toValue: 1,
+          duration: 100,
+          useNativeDriver: true,
+        }),
+      ]).start();
+      
+      if (stateManager) {
+        stateManager.updateState(`element:${componentId}.copied`, true);
+      }
+      
+      setTimeout(() => {
+        setCopied(false);
+        if (stateManager) {
+          stateManager.updateState(`element:${componentId}.copied`, false);
+        }
+      }, 2000);
+    } catch (err) {
+      console.error('Failed to copy:', err);
+    }
+  }, [code, copyAnim, componentId, stateManager]);
+  
+  // Share functionality
+  const handleShare = useCallback(async () => {
+    try {
+      await Share.share({
+        message: shareUrl ? `${shareMessage} ${shareUrl}` : shareMessage,
+        title: codeLabel || 'Share Code',
+      });
+      
+      if (stateManager) {
+        stateManager.updateState(`element:${componentId}.shared`, true);
+      }
+    } catch (err) {
+      console.error('Share failed:', err);
+    }
+  }, [shareMessage, shareUrl, codeLabel, componentId, stateManager]);
+  
+  const isHorizontal = layout === 'horizontal';
+  
+  // Helper to get visible children
+  const visibleChildren = children.filter(
+    (child: PaywallComponent) => child.visible !== false
+  );
+
+  // Hybrid mode: render children from Layers panel
+  if (visibleChildren.length > 0 && renderChild) {
+    return (
+      <View
+        style={[
+          styles.container,
+          { flexDirection: isHorizontal ? 'row' : 'column' },
+        ]}
+      >
+        {visibleChildren.map((child: PaywallComponent, index: number) => (
+          <React.Fragment key={child.id}>
+            {renderChild(child, index)}
+          </React.Fragment>
+        ))}
+      </View>
+    );
+  }
+  
+  // Legacy mode: self-contained rendering
+  return (
+    <View
+      style={[
+        styles.container,
+        { flexDirection: isHorizontal ? 'row' : 'column' },
+      ]}
+    >
+      <View
+        style={[
+          styles.mainContent,
+          { alignItems: isHorizontal ? 'flex-start' : 'center' },
+        ]}
+      >
+        {/* Label */}
+        {codeLabel ? (
+          <Text style={[styles.label, { fontSize: 14, color: labelColor }]}>
+            {codeLabel}
+          </Text>
+        ) : null}
+        
+        {/* Code Display */}
+        <View
+          style={[
+            styles.codeContainer,
+            {
+              backgroundColor: codeContainerFill,
+              borderRadius: containerBorderRadius,
+              paddingHorizontal: containerPadding,
+              paddingVertical: containerPadding * 0.75,
+            },
+          ]}
+        >
+          <Text
+            style={[
+              styles.codeText,
+              {
+                fontSize: codeFontSize,
+                fontWeight: '700',
+                color: codeTextColor,
+              },
+            ]}
+          >
+            {code}
+          </Text>
+          
+          {showCopyButton && (
+            <TouchableOpacity onPress={handleCopy} activeOpacity={0.7}>
+              <Animated.View
+                style={[
+                  styles.copyButton,
+                  {
+                    backgroundColor: buttonFill,
+                    borderRadius: 8,
+                    transform: [{ scale: copyAnim }],
+                  },
+                ]}
+              >
+                <Text style={[styles.buttonText, { color: copied ? '#22C55E' : buttonTextColor }]}>
+                  {copied ? copiedFeedback : copyButtonText}
+                </Text>
+              </Animated.View>
+            </TouchableOpacity>
+          )}
+        </View>
+        
+        {/* Description */}
+        {codeDescription ? (
+          <Text
+            style={[
+              styles.description,
+              {
+                fontSize: 12,
+                color: descriptionColor,
+                textAlign: isHorizontal ? 'left' : 'center',
+              },
+            ]}
+          >
+            {codeDescription}
+          </Text>
+        ) : null}
+        
+        {/* Share Button */}
+        {showShareButton && (
+          <TouchableOpacity
+            onPress={handleShare}
+            style={[
+              styles.shareButton,
+              {
+                backgroundColor: buttonFill,
+                borderRadius: 8,
+                width: isHorizontal ? 'auto' : '100%',
+              },
+            ]}
+            activeOpacity={0.7}
+          >
+            <Text style={[styles.buttonText, { color: buttonTextColor }]}>
+              📤 {shareButtonText}
+            </Text>
+          </TouchableOpacity>
+        )}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: '100%',
+    gap: 12,
+  },
+  mainContent: {
+    flex: 1,
+    gap: 12,
+  },
+  label: {},
+  codeContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 12,
+    width: '100%',
+  },
+  codeText: {
+    fontFamily: 'monospace',
+    letterSpacing: 2,
+  },
+  copyButton: {
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+  },
+  buttonText: {
+    fontSize: 14,
+    fontWeight: '500',
+  },
+  description: {},
+  shareButton: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 6,
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+});