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

package/dist/components/SegmentedPickerComponent.js

@@ -0,0 +1,221 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SegmentedPickerComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+// Helper to extract color from FillValue or string
+const extractColor = (fill, fallback = 'transparent') => {
+    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;
+};
+// Helper to apply selectedAppearance to child when selected
+const applySelectedAppearanceToChild = (child, isSelected) => {
+    if (!isSelected || !child.selectedAppearance) {
+        return child;
+    }
+    // Merge selectedAppearance into appearance for selected state
+    return {
+        ...child,
+        appearance: child.selectedAppearance,
+    };
+};
+const SegmentedPickerComponent = ({ component, stateManager, isPreviewMode = false, renderChild, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t;
+    const props = component.properties;
+    // Children arrive fully styled with selectedAppearance for state changes
+    // Selection properties
+    const defaultIndex = (_a = props.defaultSelectedIndex) !== null && _a !== void 0 ? _a : 0;
+    const disabled = (_b = props.disabled) !== null && _b !== void 0 ? _b : false;
+    const selectableSegments = props.selectableSegments !== false;
+    const bindToPackages = (_c = props.bindToPackages) !== null && _c !== void 0 ? _c : false;
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(defaultIndex);
+    // Get segment children (filter by role)
+    const segmentChildren = (0, react_1.useMemo)(() => {
+        if (!component.children)
+            return [];
+        return component.children.filter(child => {
+            const role = child.role;
+            return (role === null || role === void 0 ? void 0 : role.startsWith('segment-')) && role !== 'segment-label';
+        });
+    }, [component.children]);
+    // Register initial state
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            stateManager.updateState(`element:${component.id}.selectedIndex`, selectedIndex);
+        }
+    }, []);
+    // Subscribe to external state changes
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            return stateManager.subscribeToState(`element:${component.id}.selectedIndex`, (value) => {
+                if (value !== selectedIndex) {
+                    setSelectedIndex(value);
+                }
+            });
+        }
+    }, [component.id, stateManager]);
+    const handleSelect = (index) => {
+        if (!disabled && selectableSegments) {
+            setSelectedIndex(index);
+            if (stateManager) {
+                stateManager.updateState(`element:${component.id}.selectedIndex`, index);
+            }
+        }
+    };
+    // Container styling from props
+    const containerBackground = extractColor(props.containerBackground, '#f0f0f0');
+    const containerBorderRadius = (_d = props.borderRadius) !== null && _d !== void 0 ? _d : 8;
+    const containerPadding = (_e = props.padding) !== null && _e !== void 0 ? _e : 4;
+    const gap = (_f = props.gap) !== null && _f !== void 0 ? _f : 4;
+    // Get styling from component properties and appearance (direct properties architecture)
+    const componentAppearance = component.appearance || {};
+    const componentBorder = component.border || {};
+    // Segment styling - read from component.properties (canonical names)
+    const segmentFill = props.segmentFill;
+    const selectedSegmentFill = props.selectedSegmentFill;
+    const segmentBackground = extractColor(segmentFill, extractColor(componentAppearance.fill, 'transparent'));
+    const selectedBackground = extractColor(selectedSegmentFill, '#007AFF');
+    const segmentCornerRadius = (_g = componentAppearance.cornerRadius) !== null && _g !== void 0 ? _g : 6;
+    const segmentPadding = (_h = props.padding) !== null && _h !== void 0 ? _h : 8;
+    const segmentBorderColor = extractColor(componentBorder.color, 'transparent');
+    const segmentBorderWidth = (_j = componentBorder.width) !== null && _j !== void 0 ? _j : 0;
+    const selectedBorderColor = (_k = props.selectedBorderColor) !== null && _k !== void 0 ? _k : 'transparent';
+    const selectedBorderWidth = (_l = props.selectedBorderWidth) !== null && _l !== void 0 ? _l : 0;
+    // Render with children (child-based architecture)
+    if (segmentChildren.length > 0 && renderChild) {
+        return (<react_native_1.View style={[
+                styles.container,
+                {
+                    backgroundColor: containerBackground,
+                    borderRadius: containerBorderRadius,
+                    padding: containerPadding,
+                    gap,
+                },
+                disabled && styles.disabled,
+            ]}>
+        {segmentChildren.map((child, index) => {
+                var _a, _b;
+                const isActive = index === selectedIndex;
+                // Use child.selectedAppearance when active (children already have base styling)
+                const appearance = isActive ? child.selectedAppearance : child.appearance;
+                const bgColor = extractColor(appearance === null || appearance === void 0 ? void 0 : appearance.fill, isActive ? selectedBackground : segmentBackground);
+                const borderColor = isActive
+                    ? extractColor(appearance === null || appearance === void 0 ? void 0 : appearance.borderColor, selectedBorderColor)
+                    : extractColor(componentBorder.color, segmentBorderColor);
+                const borderWidth = isActive
+                    ? ((_a = appearance === null || appearance === void 0 ? void 0 : appearance.borderWidth) !== null && _a !== void 0 ? _a : selectedBorderWidth)
+                    : segmentBorderWidth;
+                // Apply selectedAppearance to child for rendering
+                const styledChild = applySelectedAppearanceToChild(child, isActive);
+                return (<react_native_1.TouchableOpacity key={child.id} onPress={() => handleSelect(index)} disabled={disabled || !selectableSegments} activeOpacity={0.7} style={[
+                        styles.segment,
+                        {
+                            backgroundColor: bgColor,
+                            borderRadius: (_b = appearance === null || appearance === void 0 ? void 0 : appearance.cornerRadius) !== null && _b !== void 0 ? _b : segmentCornerRadius,
+                            padding: segmentPadding,
+                            borderWidth,
+                            borderColor,
+                        },
+                    ]}>
+              {renderChild(styledChild, index, isActive)}
+            </react_native_1.TouchableOpacity>);
+            })}
+      </react_native_1.View>);
+    }
+    // Fallback: render simple text segments from legacy segments property or defaults
+    const legacySegments = (_m = props.segments) !== null && _m !== void 0 ? _m : ['Option 1', 'Option 2'];
+    const activeColor = extractColor(selectedSegmentFill, (_o = props.activeColor) !== null && _o !== void 0 ? _o : '#007AFF');
+    const inactiveColor = extractColor(segmentFill, (_p = props.inactiveColor) !== null && _p !== void 0 ? _p : 'transparent');
+    const activeTextColor = (_r = (_q = props.selectedTextColor) !== null && _q !== void 0 ? _q : props.activeTextColor) !== null && _r !== void 0 ? _r : '#fff';
+    const inactiveTextColor = (_t = (_s = props.textColor) !== null && _s !== void 0 ? _s : props.inactiveTextColor) !== null && _t !== void 0 ? _t : '#333';
+    return (<react_native_1.View style={[
+            styles.container,
+            {
+                backgroundColor: containerBackground,
+                borderRadius: containerBorderRadius,
+                padding: containerPadding,
+            },
+            disabled && styles.disabled,
+        ]}>
+      {legacySegments.map((segment, index) => {
+            var _a, _b;
+            const isActive = index === selectedIndex;
+            return (<react_native_1.TouchableOpacity key={index} onPress={() => handleSelect(index)} disabled={disabled || !selectableSegments} activeOpacity={0.7} style={[
+                    styles.segment,
+                    {
+                        backgroundColor: isActive ? activeColor : inactiveColor,
+                        borderRadius: segmentCornerRadius,
+                        padding: segmentPadding,
+                    },
+                ]}>
+            <react_native_1.Text style={[
+                    styles.segmentText,
+                    {
+                        color: isActive ? activeTextColor : inactiveTextColor,
+                        fontSize: (_a = props.labelFontSize) !== null && _a !== void 0 ? _a : 14,
+                        fontWeight: isActive ? '600' : ((_b = props.labelFontWeight) !== null && _b !== void 0 ? _b : 'normal'),
+                    },
+                ]}>
+              {segment}
+            </react_native_1.Text>
+          </react_native_1.TouchableOpacity>);
+        })}
+    </react_native_1.View>);
+};
+exports.SegmentedPickerComponent = SegmentedPickerComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+    },
+    disabled: {
+        opacity: 0.5,
+    },
+    segment: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    segmentText: {
+        textAlign: 'center',
+    },
+});

package/dist/components/ShareButtonsComponent.d.ts

@@ -0,0 +1,21 @@
+/**
+ * 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 from 'react';
+import { PaywallComponent } from '../types';
+interface ShareButtonsComponentProps {
+    component: PaywallComponent;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+    renderChild?: (child: PaywallComponent, index: number) => React.ReactNode;
+}
+export declare const ShareButtonsComponent: React.FC<ShareButtonsComponentProps>;
+export {};

package/dist/components/ShareButtonsComponent.js

@@ -0,0 +1,265 @@
+"use strict";
+/**
+ * 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
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShareButtonsComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+// Helper to extract color from fill value
+const getColorFromFill = (fill, fallback) => {
+    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 = {
+    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' },
+};
+const ShareButtonsComponent = ({ component, stateManager, isPreviewMode = false, renderChild, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s;
+    const props = component.properties;
+    // Children arrive fully styled with selectedAppearance for state changes
+    const children = component.children || [];
+    const visibleChildren = children.filter((c) => c.visible !== false);
+    const componentId = component.id;
+    // Platform toggles
+    const showNativeShare = props.showNativeShare !== false;
+    const showCopyLink = props.showCopyLink !== false;
+    const showTwitter = (_a = props.showTwitter) !== null && _a !== void 0 ? _a : false;
+    const showFacebook = (_b = props.showFacebook) !== null && _b !== void 0 ? _b : false;
+    const showLinkedIn = (_c = props.showLinkedIn) !== null && _c !== void 0 ? _c : false;
+    const showWhatsApp = (_d = props.showWhatsApp) !== null && _d !== void 0 ? _d : false;
+    const showTelegram = (_e = props.showTelegram) !== null && _e !== void 0 ? _e : false;
+    const showEmail = (_f = props.showEmail) !== null && _f !== void 0 ? _f : false;
+    // Build enabled platforms array
+    const enabledPlatforms = [];
+    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 = (_g = props.shareTitle) !== null && _g !== void 0 ? _g : 'Check this out!';
+    const shareText = (_h = props.shareText) !== null && _h !== void 0 ? _h : 'I found this amazing app!';
+    const shareUrl = (_j = props.shareUrl) !== null && _j !== void 0 ? _j : '';
+    // Layout
+    const layout = (_k = props.layout) !== null && _k !== void 0 ? _k : 'horizontal';
+    const buttonGap = (_l = props.buttonGap) !== null && _l !== void 0 ? _l : 8;
+    const alignment = (_m = props.alignment) !== null && _m !== void 0 ? _m : 'center';
+    // Button Styling - children arrive fully styled
+    const componentAppearance = component.appearance || {};
+    const buttonStyle = (_o = props.buttonStyle) !== null && _o !== void 0 ? _o : 'icon-only';
+    const buttonSize = (_p = props.buttonSize) !== null && _p !== void 0 ? _p : 44;
+    const buttonBorderRadius = (_r = (_q = componentAppearance.cornerRadius) !== null && _q !== void 0 ? _q : props.buttonBorderRadius) !== null && _r !== void 0 ? _r : 8;
+    const useBrandColors = props.useBrandColors !== false;
+    // Custom colors from component appearance
+    const customButtonBackground = getColorFromFill(componentAppearance.fill, '#E5E7EB');
+    const customIconColor = '#FFFFFF';
+    // Labels
+    const copiedLabel = (_s = props.copiedLabel) !== null && _s !== void 0 ? _s : 'Copied!';
+    const [copiedState, setCopiedState] = (0, react_1.useState)(false);
+    // Handle share for each platform
+    const handleShare = (0, react_1.useCallback)(async (platform) => {
+        const fullContent = shareUrl ? `${shareText} ${shareUrl}` : shareText;
+        switch (platform) {
+            case 'native':
+                try {
+                    await react_native_1.Share.share({
+                        message: fullContent,
+                        title: shareTitle,
+                    });
+                }
+                catch (err) {
+                    console.error('Share failed:', err);
+                }
+                break;
+            case 'copy':
+                try {
+                    react_native_1.Clipboard.setString(shareUrl || shareText);
+                    setCopiedState(true);
+                    setTimeout(() => setCopiedState(false), 2000);
+                }
+                catch (err) {
+                    console.error('Copy failed:', err);
+                }
+                break;
+            case 'twitter':
+                react_native_1.Linking.openURL(`https://twitter.com/intent/tweet?text=${encodeURIComponent(shareText)}&url=${encodeURIComponent(shareUrl)}`);
+                break;
+            case 'facebook':
+                react_native_1.Linking.openURL(`https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(shareUrl)}&quote=${encodeURIComponent(shareText)}`);
+                break;
+            case 'linkedin':
+                react_native_1.Linking.openURL(`https://www.linkedin.com/sharing/share-offsite/?url=${encodeURIComponent(shareUrl)}`);
+                break;
+            case 'whatsapp':
+                react_native_1.Linking.openURL(`whatsapp://send?text=${encodeURIComponent(fullContent)}`);
+                break;
+            case 'telegram':
+                react_native_1.Linking.openURL(`tg://msg?text=${encodeURIComponent(fullContent)}`);
+                break;
+            case 'email':
+                react_native_1.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) => {
+        var _a, _b;
+        if (platform === 'copy')
+            return copiedState ? copiedLabel : ((_a = PLATFORM_CONFIG[platform]) === null || _a === void 0 ? void 0 : _a.label) || platform;
+        return ((_b = PLATFORM_CONFIG[platform]) === null || _b === void 0 ? void 0 : _b.label) || platform;
+    };
+    // HYBRID MODE: Render children if available and renderChild is provided
+    if (visibleChildren.length > 0 && renderChild) {
+        return (<react_native_1.View style={[
+                styles.container,
+                {
+                    flexDirection: layout === 'vertical' ? 'column' : 'row',
+                    gap: buttonGap,
+                    justifyContent: alignment === 'start' ? 'flex-start' : alignment === 'end' ? 'flex-end' : 'center',
+                },
+            ]}>
+        {visibleChildren.map((child, index) => {
+                const platform = (child.role || '').replace('share-button-', '');
+                return (<react_native_1.TouchableOpacity key={child.id} onPress={() => handleShare(platform)} activeOpacity={0.7}>
+              {renderChild(child, index)}
+            </react_native_1.TouchableOpacity>);
+            })}
+      </react_native_1.View>);
+    }
+    // Show message if no platforms enabled
+    if (enabledPlatforms.length === 0) {
+        return (<react_native_1.View style={styles.emptyContainer}>
+        <react_native_1.Text style={styles.emptyText}>Enable at least one share platform</react_native_1.Text>
+      </react_native_1.View>);
+    }
+    // LEGACY MODE: Self-render buttons
+    return (<react_native_1.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 (<react_native_1.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' && (<react_native_1.Text style={{ fontSize: buttonSize * 0.45 }}>
+                {platform === 'copy' && copiedState ? '✓' : config.icon}
+              </react_native_1.Text>)}
+            {buttonStyle !== 'icon-only' && (<react_native_1.Text style={[styles.buttonText, { color: textColor }]}>
+                {getLabel(platform)}
+              </react_native_1.Text>)}
+          </react_native_1.TouchableOpacity>);
+        })}
+    </react_native_1.View>);
+};
+exports.ShareButtonsComponent = ShareButtonsComponent;
+const styles = react_native_1.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/dist/components/ShareCodeComponent.d.ts

@@ -0,0 +1,16 @@
+/**
+ * ShareCodeComponent - React Native
+ *
+ * Hybrid component with child-based architecture.
+ * Uses component.properties for styling; children arrive fully styled with selectedAppearance.
+ */
+import React from 'react';
+import { PaywallComponent } from '../types';
+interface ShareCodeComponentProps {
+    component: PaywallComponent;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+    renderChild?: (child: PaywallComponent, index: number) => React.ReactNode;
+}
+export declare const ShareCodeComponent: React.FC<ShareCodeComponentProps>;
+export {};