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

package/dist/components/ShareCodeComponent.js

@@ -0,0 +1,274 @@
+"use strict";
+/**
+ * ShareCodeComponent - React Native
+ *
+ * Hybrid component with child-based architecture.
+ * Uses component.properties for styling; children arrive fully styled with selectedAppearance.
+ */
+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.ShareCodeComponent = 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.type === 'color' && fill.color)
+        return fill.color;
+    if (fill.resolvedColor)
+        return fill.resolvedColor;
+    return fallback;
+};
+const ShareCodeComponent = ({ 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 componentId = component.id;
+    // Properties from schema
+    const code = (_a = props.code) !== null && _a !== void 0 ? _a : 'SAVE20';
+    const codeLabel = (_b = props.codeLabel) !== null && _b !== void 0 ? _b : '';
+    const codeDescription = (_c = props.codeDescription) !== null && _c !== void 0 ? _c : '';
+    const showCopyButton = props.showCopyButton !== false;
+    const showShareButton = (_d = props.showShareButton) !== null && _d !== void 0 ? _d : false;
+    const showQRCode = (_e = props.showQRCode) !== null && _e !== void 0 ? _e : false;
+    const layout = (_f = props.layout) !== null && _f !== void 0 ? _f : 'vertical';
+    const copyButtonText = (_g = props.copyButtonText) !== null && _g !== void 0 ? _g : 'Copy Code';
+    const copiedFeedback = (_h = props.copiedFeedback) !== null && _h !== void 0 ? _h : 'Copied!';
+    const shareButtonText = (_j = props.shareButtonText) !== null && _j !== void 0 ? _j : 'Share';
+    const shareMessage = ((_k = props.shareMessage) !== null && _k !== void 0 ? _k : 'Use my code: {{code}} to get a discount!').replace('{{code}}', code);
+    const shareUrl = (_l = props.shareUrl) !== null && _l !== void 0 ? _l : '';
+    // Styling from component appearance (children arrive fully styled)
+    const componentAppearance = component.appearance || {};
+    const codeContainerFill = getColorFromFill(componentAppearance.fill, '#F3F4F6');
+    const buttonFill = '#3B82F6'; // Default, buttons have their own styling
+    const codeTextColor = (_m = props.codeTextColor) !== null && _m !== void 0 ? _m : '#1F2937';
+    const labelColor = (_o = props.labelColor) !== null && _o !== void 0 ? _o : '#6B7280';
+    const descriptionColor = (_p = props.descriptionColor) !== null && _p !== void 0 ? _p : '#6B7280';
+    const buttonTextColor = '#FFFFFF';
+    const codeFontSize = (_q = props.codeFontSize) !== null && _q !== void 0 ? _q : 24;
+    const containerBorderRadius = (_r = componentAppearance.cornerRadius) !== null && _r !== void 0 ? _r : 12;
+    const containerPadding = (_s = props.containerPadding) !== null && _s !== void 0 ? _s : 16;
+    const [copied, setCopied] = (0, react_1.useState)(false);
+    const [copyAnim] = (0, react_1.useState)(new react_native_1.Animated.Value(1));
+    // Connect to state manager
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            stateManager.updateState(`element:${componentId}.code`, code);
+            stateManager.updateState(`element:${componentId}.copied`, copied);
+        }
+    }, [code, copied, componentId, stateManager]);
+    // Copy to clipboard
+    const handleCopy = (0, react_1.useCallback)(async () => {
+        try {
+            react_native_1.Clipboard.setString(code);
+            setCopied(true);
+            react_native_1.Animated.sequence([
+                react_native_1.Animated.timing(copyAnim, {
+                    toValue: 0.9,
+                    duration: 100,
+                    useNativeDriver: true,
+                }),
+                react_native_1.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 = (0, react_1.useCallback)(async () => {
+        try {
+            await react_native_1.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) => child.visible !== false);
+    // Hybrid mode: render children from Layers panel
+    if (visibleChildren.length > 0 && renderChild) {
+        return (<react_native_1.View style={[
+                styles.container,
+                { flexDirection: isHorizontal ? 'row' : 'column' },
+            ]}>
+        {visibleChildren.map((child, index) => (<react_1.default.Fragment key={child.id}>
+            {renderChild(child, index)}
+          </react_1.default.Fragment>))}
+      </react_native_1.View>);
+    }
+    // Legacy mode: self-contained rendering
+    return (<react_native_1.View style={[
+            styles.container,
+            { flexDirection: isHorizontal ? 'row' : 'column' },
+        ]}>
+      <react_native_1.View style={[
+            styles.mainContent,
+            { alignItems: isHorizontal ? 'flex-start' : 'center' },
+        ]}>
+        {/* Label */}
+        {codeLabel ? (<react_native_1.Text style={[styles.label, { fontSize: 14, color: labelColor }]}>
+            {codeLabel}
+          </react_native_1.Text>) : null}
+        
+        {/* Code Display */}
+        <react_native_1.View style={[
+            styles.codeContainer,
+            {
+                backgroundColor: codeContainerFill,
+                borderRadius: containerBorderRadius,
+                paddingHorizontal: containerPadding,
+                paddingVertical: containerPadding * 0.75,
+            },
+        ]}>
+          <react_native_1.Text style={[
+            styles.codeText,
+            {
+                fontSize: codeFontSize,
+                fontWeight: '700',
+                color: codeTextColor,
+            },
+        ]}>
+            {code}
+          </react_native_1.Text>
+          
+          {showCopyButton && (<react_native_1.TouchableOpacity onPress={handleCopy} activeOpacity={0.7}>
+              <react_native_1.Animated.View style={[
+                styles.copyButton,
+                {
+                    backgroundColor: buttonFill,
+                    borderRadius: 8,
+                    transform: [{ scale: copyAnim }],
+                },
+            ]}>
+                <react_native_1.Text style={[styles.buttonText, { color: copied ? '#22C55E' : buttonTextColor }]}>
+                  {copied ? copiedFeedback : copyButtonText}
+                </react_native_1.Text>
+              </react_native_1.Animated.View>
+            </react_native_1.TouchableOpacity>)}
+        </react_native_1.View>
+        
+        {/* Description */}
+        {codeDescription ? (<react_native_1.Text style={[
+                styles.description,
+                {
+                    fontSize: 12,
+                    color: descriptionColor,
+                    textAlign: isHorizontal ? 'left' : 'center',
+                },
+            ]}>
+            {codeDescription}
+          </react_native_1.Text>) : null}
+        
+        {/* Share Button */}
+        {showShareButton && (<react_native_1.TouchableOpacity onPress={handleShare} style={[
+                styles.shareButton,
+                {
+                    backgroundColor: buttonFill,
+                    borderRadius: 8,
+                    width: isHorizontal ? 'auto' : '100%',
+                },
+            ]} activeOpacity={0.7}>
+            <react_native_1.Text style={[styles.buttonText, { color: buttonTextColor }]}>
+              📤 {shareButtonText}
+            </react_native_1.Text>
+          </react_native_1.TouchableOpacity>)}
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+exports.ShareCodeComponent = ShareCodeComponent;
+const styles = react_native_1.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,
+    },
+});

package/dist/components/SingleChoiceGridComponent.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Single Choice Grid Component for React Native
+ * Radio button style grid selection (single selection)
+ */
+import React from 'react';
+import { PaywallComponent } from '../types';
+interface SingleChoiceGridProps {
+    component: PaywallComponent;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+}
+export declare const SingleChoiceGridComponent: React.FC<SingleChoiceGridProps>;
+export {};

package/dist/components/SingleChoiceGridComponent.js

@@ -0,0 +1,210 @@
+"use strict";
+/**
+ * Single Choice Grid Component for React Native
+ * Radio button style grid selection (single selection)
+ */
+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.SingleChoiceGridComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const SIZE_MAP = { sm: 16, md: 20, lg: 24 };
+const SingleChoiceGridComponent = ({ component, stateManager, isPreviewMode = false, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j;
+    const props = component.properties || {};
+    // Parse options
+    const optionsStr = props.options || 'Option 1,Option 2,Option 3,Option 4';
+    const options = optionsStr.split(',').map((o) => o.trim()).filter(Boolean);
+    const descriptionsStr = props.optionDescriptions || '';
+    const descriptions = descriptionsStr.split(',').map((d) => d.trim());
+    // Grid settings
+    const columns = props.columns || 2;
+    const gap = parseFloat(((_a = props.gap) === null || _a === void 0 ? void 0 : _a.value) || props.gap) || 12;
+    const minItemHeight = parseFloat(((_b = props.minItemHeight) === null || _b === void 0 ? void 0 : _b.value) || props.minItemHeight) || 80;
+    // Selection settings
+    const defaultIndex = (_c = props.defaultSelectedIndex) !== null && _c !== void 0 ? _c : 0;
+    const allowDeselect = (_d = props.allowDeselect) !== null && _d !== void 0 ? _d : false;
+    const disabled = (_e = props.disabled) !== null && _e !== void 0 ? _e : false;
+    // State
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(defaultIndex);
+    // State manager integration
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (!stateManager)
+            return;
+        const stateId = `element:${component.id}.selectedIndex`;
+        (_a = stateManager.registerState) === null || _a === void 0 ? void 0 : _a.call(stateManager, stateId, selectedIndex);
+        return (_b = stateManager.subscribeToState) === null || _b === void 0 ? void 0 : _b.call(stateManager, stateId, (value) => {
+            if (value !== selectedIndex)
+                setSelectedIndex(value);
+        });
+    }, [component.id, selectedIndex, stateManager]);
+    const handleSelect = (index) => {
+        var _a, _b;
+        if (disabled)
+            return;
+        const newIndex = (allowDeselect && selectedIndex === index) ? -1 : index;
+        setSelectedIndex(newIndex);
+        (_a = stateManager === null || stateManager === void 0 ? void 0 : stateManager.updateState) === null || _a === void 0 ? void 0 : _a.call(stateManager, `element:${component.id}.selectedIndex`, newIndex);
+        (_b = stateManager === null || stateManager === void 0 ? void 0 : stateManager.updateState) === null || _b === void 0 ? void 0 : _b.call(stateManager, `element:${component.id}.selectedValue`, newIndex >= 0 ? options[newIndex] : '');
+    };
+    // Styling
+    const showIndicator = (_f = props.showIndicator) !== null && _f !== void 0 ? _f : true;
+    const indicatorPosition = props.indicatorPosition || 'top-right';
+    const indicatorSize = SIZE_MAP[props.indicatorSize] || SIZE_MAP.md;
+    const indicatorColor = props.indicatorColor || '#007AFF';
+    const indicatorBorderColor = props.indicatorBorderColor || '#d1d5db';
+    const cardBorderRadius = parseFloat(((_g = props.cardBorderRadius) === null || _g === void 0 ? void 0 : _g.value) || props.cardBorderRadius) || 12;
+    const cardBorderColor = props.cardBorderColor || '#e5e7eb';
+    const selectedBorderColor = props.selectedBorderColor || '#007AFF';
+    const labelFontSize = parseFloat(((_h = props.labelFontSize) === null || _h === void 0 ? void 0 : _h.value) || props.labelFontSize) || 16;
+    const labelFontWeight = String(props.labelFontWeight || '500');
+    const labelColor = props.labelColor || '#1f2937';
+    const selectedLabelColor = props.selectedLabelColor || '#007AFF';
+    const descriptionFontSize = parseFloat(((_j = props.descriptionFontSize) === null || _j === void 0 ? void 0 : _j.value) || props.descriptionFontSize) || 12;
+    const descriptionColor = props.descriptionColor || '#6b7280';
+    // Background color helper
+    const getBackgroundColor = (fill) => {
+        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.cardBackground);
+    const selectedCardBackground = getBackgroundColor(props.selectedCardBackground);
+    // Indicator position style
+    const getIndicatorPositionStyle = () => {
+        const base = { 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 = `${(100 - (columns - 1) * 2) / columns}%`;
+    return (<react_native_1.View style={[styles.container, { opacity: disabled ? 0.6 : 1 }]}>
+      <react_native_1.View style={[styles.grid, { gap }]}>
+        {options.map((option, index) => {
+            const isSelected = selectedIndex === index;
+            const description = descriptions[index] || '';
+            return (<react_native_1.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 && (<react_native_1.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 && (<react_native_1.View style={{
+                            width: indicatorSize * 0.4,
+                            height: indicatorSize * 0.4,
+                            borderRadius: indicatorSize * 0.2,
+                            backgroundColor: '#ffffff',
+                        }}/>)}
+                </react_native_1.View>)}
+              
+              {/* Label */}
+              <react_native_1.Text style={[
+                    styles.label,
+                    {
+                        fontSize: labelFontSize,
+                        fontWeight: labelFontWeight,
+                        color: isSelected ? selectedLabelColor : labelColor,
+                    },
+                ]}>
+                {option}
+              </react_native_1.Text>
+              
+              {/* Description */}
+              {description ? (<react_native_1.Text style={[
+                        styles.description,
+                        {
+                            fontSize: descriptionFontSize,
+                            color: descriptionColor,
+                        },
+                    ]}>
+                  {description}
+                </react_native_1.Text>) : null}
+            </react_native_1.TouchableOpacity>);
+        })}
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+exports.SingleChoiceGridComponent = SingleChoiceGridComponent;
+const styles = react_native_1.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/dist/components/SliderComponent.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { PaywallComponent } from '../types';
+interface SliderComponentProps {
+    component: PaywallComponent;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+}
+export declare const SliderComponent: React.FC<SliderComponentProps>;
+export {};