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

package/dist/components/DelayedXComponent.js

@@ -0,0 +1,240 @@
+"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.DelayedXComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const DelayedXComponent = ({ component, configuration, renderChild, stateManager, isPreviewMode = false, onButtonPress, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
+    const props = component.properties;
+    // Properties with full parity
+    const delay = (_a = props.delay) !== null && _a !== void 0 ? _a : 3;
+    const showCountdown = (_b = props.showCountdown) !== null && _b !== void 0 ? _b : false;
+    const countdownStyle = (_c = props.countdownStyle) !== null && _c !== void 0 ? _c : 'circular';
+    const animationType = (_d = props.animationType) !== null && _d !== void 0 ? _d : 'scale';
+    const disabled = (_e = props.disabled) !== null && _e !== void 0 ? _e : false;
+    const position = (_f = props.position) !== null && _f !== void 0 ? _f : 'top-right';
+    const buttonSize = (_g = props.buttonSize) !== null && _g !== void 0 ? _g : 32;
+    const backgroundColor = (_h = props.backgroundColor) !== null && _h !== void 0 ? _h : 'rgba(0, 0, 0, 0.3)';
+    const iconColor = (_j = props.iconColor) !== null && _j !== void 0 ? _j : '#FFFFFF';
+    const iconSize = (_k = props.iconSize) !== null && _k !== void 0 ? _k : 14;
+    const [isVisible, setIsVisible] = (0, react_1.useState)(!isPreviewMode);
+    const [remainingTime, setRemainingTime] = (0, react_1.useState)(delay);
+    const [hasError, setHasError] = (0, react_1.useState)(false);
+    const fadeAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const scaleAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(0.8)).current;
+    const slideAnim = (0, react_1.useRef)(new react_native_1.Animated.Value(-50)).current;
+    // Expose state to state manager
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (stateManager) {
+            (_a = stateManager.setState) === null || _a === void 0 ? void 0 : _a.call(stateManager, `element:${component.id}.isVisible`, isVisible);
+            (_b = stateManager.setState) === null || _b === void 0 ? void 0 : _b.call(stateManager, `element:${component.id}.remainingTime`, remainingTime);
+        }
+    }, [isVisible, remainingTime, component.id, stateManager]);
+    (0, react_1.useEffect)(() => {
+        // If disabled, never show
+        if (disabled) {
+            setIsVisible(false);
+            return;
+        }
+        // In builder mode, always show content
+        if (!isPreviewMode) {
+            setIsVisible(true);
+            fadeAnim.setValue(1);
+            scaleAnim.setValue(1);
+            slideAnim.setValue(0);
+            return;
+        }
+        setIsVisible(false);
+        setRemainingTime(delay);
+        fadeAnim.setValue(0);
+        scaleAnim.setValue(0.8);
+        slideAnim.setValue(-50);
+        let countdownInterval;
+        let showTimeout;
+        try {
+            // Countdown timer
+            countdownInterval = setInterval(() => {
+                setRemainingTime((prev) => {
+                    if (prev <= 1) {
+                        clearInterval(countdownInterval);
+                        return 0;
+                    }
+                    return prev - 1;
+                });
+            }, 1000);
+            // Show after delay with animation
+            showTimeout = setTimeout(() => {
+                setIsVisible(true);
+                runAppearAnimation();
+            }, delay * 1000);
+        }
+        catch (error) {
+            // Error handling: show immediately if timer fails
+            console.warn('DelayedXComponent timer error, showing immediately:', error);
+            setHasError(true);
+            setIsVisible(true);
+            fadeAnim.setValue(1);
+            scaleAnim.setValue(1);
+            slideAnim.setValue(0);
+        }
+        return () => {
+            clearInterval(countdownInterval);
+            clearTimeout(showTimeout);
+        };
+    }, [delay, isPreviewMode, disabled]);
+    const runAppearAnimation = () => {
+        const animations = [];
+        if (animationType === 'fade' || animationType === 'scale') {
+            animations.push(react_native_1.Animated.timing(fadeAnim, {
+                toValue: 1,
+                duration: 200,
+                useNativeDriver: true,
+            }));
+        }
+        if (animationType === 'scale') {
+            animations.push(react_native_1.Animated.spring(scaleAnim, {
+                toValue: 1,
+                useNativeDriver: true,
+                tension: 50,
+                friction: 8,
+            }));
+        }
+        if (animationType === 'slide') {
+            animations.push(react_native_1.Animated.timing(slideAnim, {
+                toValue: 0,
+                duration: 200,
+                useNativeDriver: true,
+            }));
+            animations.push(react_native_1.Animated.timing(fadeAnim, {
+                toValue: 1,
+                duration: 200,
+                useNativeDriver: true,
+            }));
+        }
+        if (animationType === 'none') {
+            fadeAnim.setValue(1);
+            scaleAnim.setValue(1);
+            slideAnim.setValue(0);
+        }
+        else {
+            react_native_1.Animated.parallel(animations).start();
+        }
+    };
+    const getAnimatedStyle = () => {
+        switch (animationType) {
+            case 'fade':
+                return { opacity: fadeAnim };
+            case 'scale':
+                return {
+                    opacity: fadeAnim,
+                    transform: [{ scale: scaleAnim }],
+                };
+            case 'slide':
+                return {
+                    opacity: fadeAnim,
+                    transform: [{ translateY: slideAnim }],
+                };
+            case 'none':
+            default:
+                return {};
+        }
+    };
+    const getPositionStyle = () => {
+        const base = { position: 'absolute' };
+        switch (position) {
+            case 'top-left':
+                return { ...base, top: 16, left: 16 };
+            case 'top-right':
+                return { ...base, top: 16, right: 16 };
+            case 'bottom-left':
+                return { ...base, bottom: 16, left: 16 };
+            case 'bottom-right':
+                return { ...base, bottom: 16, right: 16 };
+            default:
+                return { ...base, top: 16, right: 16 };
+        }
+    };
+    const handlePress = () => {
+        onButtonPress === null || onButtonPress === void 0 ? void 0 : onButtonPress(component.id, 'close');
+    };
+    // If disabled, render nothing
+    if (disabled) {
+        return null;
+    }
+    // In builder mode, always render children
+    if (!isPreviewMode) {
+        return (<react_native_1.View style={styles.container}>
+        {(_l = component.children) === null || _l === void 0 ? void 0 : _l.map((child) => renderChild ? renderChild(child) : null)}
+      </react_native_1.View>);
+    }
+    if (isVisible) {
+        return (<react_native_1.Animated.View style={[styles.container, getAnimatedStyle()]}>
+        {(_m = component.children) === null || _m === void 0 ? void 0 : _m.map((child) => renderChild ? renderChild(child) : null)}
+      </react_native_1.Animated.View>);
+    }
+    // Render countdown based on style
+    if (showCountdown && countdownStyle !== 'none') {
+        if (countdownStyle === 'circular') {
+            return (<react_native_1.View style={[styles.countdownContainer, { width: buttonSize, height: buttonSize, borderRadius: buttonSize / 2, backgroundColor }]}>
+          <react_native_1.Text style={[styles.countdownText, { color: iconColor, fontSize: iconSize }]}>{remainingTime}</react_native_1.Text>
+        </react_native_1.View>);
+        }
+        if (countdownStyle === 'text') {
+            return (<react_native_1.Text style={[styles.countdownTextOnly, { color: iconColor, fontSize: iconSize }]}>
+          {remainingTime}s
+        </react_native_1.Text>);
+        }
+    }
+    return null;
+};
+exports.DelayedXComponent = DelayedXComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+    // Container inherits layout from parent
+    },
+    countdownContainer: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    countdownText: {
+        fontWeight: '600',
+    },
+    countdownTextOnly: {
+        fontWeight: '600',
+        opacity: 0.6,
+    },
+});

package/dist/components/DrawerModalComponent.d.ts

@@ -0,0 +1,20 @@
+/**
+ * DrawerModalComponent - React Native
+ *
+ * Slide-in drawer/modal with overlay, animation, and gesture support.
+ * Features:
+ * - State integration for open/close control
+ * - Overlay tap to dismiss
+ * - Pan gesture to dismiss
+ * - Smooth animations
+ */
+import React from 'react';
+import { PaywallComponent } from '../types';
+interface DrawerModalComponentProps {
+    component: PaywallComponent;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+    renderComponent?: (component: PaywallComponent) => React.ReactNode;
+}
+export declare const DrawerModalComponent: React.FC<DrawerModalComponentProps>;
+export {};

package/dist/components/DrawerModalComponent.js

@@ -0,0 +1,286 @@
+"use strict";
+/**
+ * DrawerModalComponent - React Native
+ *
+ * Slide-in drawer/modal with overlay, animation, and gesture support.
+ * Features:
+ * - State integration for open/close control
+ * - Overlay tap to dismiss
+ * - Pan gesture to dismiss
+ * - Smooth animations
+ */
+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.DrawerModalComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = react_native_1.Dimensions.get('window');
+const DrawerModalComponent = ({ component, stateManager, isPreviewMode = false, renderComponent, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const props = component.properties;
+    const componentId = component.id;
+    // Configuration
+    const direction = props.direction || 'bottom';
+    const showOverlay = props.showOverlay !== false;
+    const overlayColor = props.overlayColor || '#000000';
+    const overlayOpacity = ((_a = props.overlayOpacity) !== null && _a !== void 0 ? _a : 50) / 100;
+    const closeOnOverlayClick = props.closeOnOverlayClick !== false;
+    const dismissType = props.dismissType || 'interactive';
+    // Animation settings
+    const animationDuration = props.animationDuration || 300;
+    // Sizing
+    const drawerWidthValue = ((_b = props.drawerWidth) === null || _b === void 0 ? void 0 : _b.value) || 85;
+    const drawerWidthUnit = ((_c = props.drawerWidth) === null || _c === void 0 ? void 0 : _c.unit) || '%';
+    const drawerHeightValue = ((_d = props.drawerHeight) === null || _d === void 0 ? void 0 : _d.value) || 400;
+    const drawerHeightUnit = ((_e = props.drawerHeight) === null || _e === void 0 ? void 0 : _e.unit) || 'px';
+    // Calculate actual dimensions
+    const drawerWidth = drawerWidthUnit === '%'
+        ? (SCREEN_WIDTH * drawerWidthValue / 100)
+        : drawerWidthValue;
+    const drawerHeight = drawerHeightUnit === '%'
+        ? (SCREEN_HEIGHT * drawerHeightValue / 100)
+        : drawerHeightValue;
+    // Corner radius
+    const cornerRadius = ((_f = props.cornerRadius) === null || _f === void 0 ? void 0 : _f.value) || 16;
+    // Background
+    const backgroundColor = ((_g = props.backgroundColor) === null || _g === void 0 ? void 0 : _g.color) || '#FFFFFF';
+    // State
+    const [isOpen, setIsOpen] = (0, react_1.useState)(props.isOpen !== false);
+    const animatedValue = (0, react_1.useRef)(new react_native_1.Animated.Value(isOpen ? 1 : 0)).current;
+    const panValue = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    // Get translation values based on direction
+    const getTranslation = (0, react_1.useCallback)(() => {
+        const isHorizontal = direction === 'left' || direction === 'right';
+        const size = isHorizontal ? drawerWidth : drawerHeight;
+        const multiplier = direction === 'right' || direction === 'bottom' ? 1 : -1;
+        return {
+            isHorizontal,
+            size,
+            multiplier,
+            closedValue: size * multiplier,
+        };
+    }, [direction, drawerWidth, drawerHeight]);
+    // Subscribe to state manager
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            // Initialize state
+            stateManager.updateState(`element:${componentId}.isOpen`, isOpen);
+            return stateManager.subscribeToState(`element:${componentId}.isOpen`, (value) => {
+                if (value !== isOpen) {
+                    setIsOpen(value);
+                }
+            });
+        }
+    }, [componentId, stateManager]);
+    // Animate when isOpen changes
+    (0, react_1.useEffect)(() => {
+        react_native_1.Animated.timing(animatedValue, {
+            toValue: isOpen ? 1 : 0,
+            duration: animationDuration,
+            useNativeDriver: true,
+        }).start();
+        if (stateManager) {
+            stateManager.updateState(`element:${componentId}.isOpen`, isOpen);
+            stateManager.updateState(`element:${componentId}.direction`, direction);
+        }
+    }, [isOpen, animationDuration, animatedValue, componentId, stateManager, direction]);
+    // Handle close
+    const handleClose = (0, react_1.useCallback)(() => {
+        setIsOpen(false);
+        if (stateManager) {
+            stateManager.updateState(`element:${componentId}.isOpen`, false);
+        }
+    }, [componentId, stateManager]);
+    // Pan responder for interactive dismiss
+    const panResponder = (0, react_1.useRef)(react_native_1.PanResponder.create({
+        onStartShouldSetPanResponder: () => dismissType === 'interactive',
+        onMoveShouldSetPanResponder: (_, gestureState) => {
+            if (dismissType !== 'interactive')
+                return false;
+            const { dx, dy } = gestureState;
+            const { isHorizontal, multiplier } = getTranslation();
+            // Only respond if dragging in the correct direction
+            if (isHorizontal) {
+                return Math.abs(dx) > Math.abs(dy) && dx * multiplier > 0;
+            }
+            else {
+                return Math.abs(dy) > Math.abs(dx) && dy * multiplier > 0;
+            }
+        },
+        onPanResponderMove: (_, gestureState) => {
+            const { isHorizontal, multiplier } = getTranslation();
+            const delta = isHorizontal ? gestureState.dx : gestureState.dy;
+            // Only allow dragging in dismiss direction
+            if (delta * multiplier > 0) {
+                panValue.setValue(delta);
+            }
+        },
+        onPanResponderRelease: (_, gestureState) => {
+            const { isHorizontal, size, multiplier } = getTranslation();
+            const delta = isHorizontal ? gestureState.dx : gestureState.dy;
+            const velocity = isHorizontal ? gestureState.vx : gestureState.vy;
+            // Dismiss if dragged more than 30% or with sufficient velocity
+            if ((Math.abs(delta) > size * 0.3) || (Math.abs(velocity) > 0.5 && delta * multiplier > 0)) {
+                // Animate out then close
+                react_native_1.Animated.timing(panValue, {
+                    toValue: size * multiplier,
+                    duration: 200,
+                    useNativeDriver: true,
+                }).start(() => {
+                    panValue.setValue(0);
+                    handleClose();
+                });
+            }
+            else {
+                // Snap back
+                react_native_1.Animated.spring(panValue, {
+                    toValue: 0,
+                    useNativeDriver: true,
+                }).start();
+            }
+        },
+    })).current;
+    // Calculate animated styles
+    const { isHorizontal, closedValue } = getTranslation();
+    const overlayAnimatedStyle = {
+        opacity: animatedValue.interpolate({
+            inputRange: [0, 1],
+            outputRange: [0, overlayOpacity],
+        }),
+    };
+    const drawerBaseTranslate = animatedValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [closedValue, 0],
+    });
+    const drawerTransform = isHorizontal
+        ? { translateX: react_native_1.Animated.add(drawerBaseTranslate, panValue) }
+        : { translateY: react_native_1.Animated.add(drawerBaseTranslate, panValue) };
+    // Position styles based on direction
+    const getPositionStyle = () => {
+        switch (direction) {
+            case 'left':
+                return { left: 0, top: 0, bottom: 0, width: drawerWidth };
+            case 'right':
+                return { right: 0, top: 0, bottom: 0, width: drawerWidth };
+            case 'top':
+                return { top: 0, left: 0, right: 0, height: drawerHeight };
+            case 'bottom':
+            default:
+                return { bottom: 0, left: 0, right: 0, height: drawerHeight };
+        }
+    };
+    // Border radius based on direction
+    const getBorderRadius = () => {
+        switch (direction) {
+            case 'left':
+                return { borderTopRightRadius: cornerRadius, borderBottomRightRadius: cornerRadius };
+            case 'right':
+                return { borderTopLeftRadius: cornerRadius, borderBottomLeftRadius: cornerRadius };
+            case 'top':
+                return { borderBottomLeftRadius: cornerRadius, borderBottomRightRadius: cornerRadius };
+            case 'bottom':
+            default:
+                return { borderTopLeftRadius: cornerRadius, borderTopRightRadius: cornerRadius };
+        }
+    };
+    // Don't render if not open and animation complete
+    if (!isOpen && animatedValue._value === 0) {
+        return null;
+    }
+    return (<react_native_1.Modal visible={isOpen} transparent animationType="none" onRequestClose={handleClose}>
+      <react_native_1.View style={styles.container}>
+        {/* Overlay */}
+        {showOverlay && (<react_native_1.TouchableWithoutFeedback onPress={closeOnOverlayClick ? handleClose : undefined}>
+            <react_native_1.Animated.View style={[
+                styles.overlay,
+                { backgroundColor: overlayColor },
+                overlayAnimatedStyle,
+            ]}/>
+          </react_native_1.TouchableWithoutFeedback>)}
+        
+        {/* Drawer */}
+        <react_native_1.Animated.View style={[
+            styles.drawer,
+            getPositionStyle(),
+            getBorderRadius(),
+            { backgroundColor },
+            { transform: [drawerTransform] },
+        ]} {...panResponder.panHandlers}>
+          {/* Drag handle for bottom/top drawers */}
+          {dismissType === 'interactive' && (direction === 'bottom' || direction === 'top') && (<react_native_1.View style={styles.dragHandleContainer}>
+              <react_native_1.View style={styles.dragHandle}/>
+            </react_native_1.View>)}
+          
+          {/* Children */}
+          <react_native_1.View style={styles.content}>
+            {(_h = component.children) === null || _h === void 0 ? void 0 : _h.map((child, index) => (<react_native_1.View key={child.id || index}>
+                {renderComponent === null || renderComponent === void 0 ? void 0 : renderComponent(child)}
+              </react_native_1.View>))}
+          </react_native_1.View>
+        </react_native_1.Animated.View>
+      </react_native_1.View>
+    </react_native_1.Modal>);
+};
+exports.DrawerModalComponent = DrawerModalComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    overlay: {
+        ...react_native_1.StyleSheet.absoluteFillObject,
+    },
+    drawer: {
+        position: 'absolute',
+        shadowColor: '#000',
+        shadowOffset: { width: 0, height: -4 },
+        shadowOpacity: 0.25,
+        shadowRadius: 12,
+        elevation: 16,
+    },
+    dragHandleContainer: {
+        alignItems: 'center',
+        paddingVertical: 8,
+    },
+    dragHandle: {
+        width: 36,
+        height: 4,
+        backgroundColor: '#D1D5DB',
+        borderRadius: 2,
+    },
+    content: {
+        flex: 1,
+        padding: 16,
+    },
+});

package/dist/components/GradientView.d.ts

@@ -0,0 +1,38 @@
+/**
+ * GradientView Component
+ * Wraps content with a gradient background using LinearGradient
+ * Falls back to solid color if LinearGradient is not available
+ */
+import React from 'react';
+import { ViewStyle, StyleProp } from 'react-native';
+import { GradientConfig } from '../utils/CSSConverter';
+export interface GradientViewProps {
+    gradient: GradientConfig;
+    fallbackColor?: string;
+    style?: StyleProp<ViewStyle>;
+    children?: React.ReactNode;
+    /** Border radius to apply to gradient */
+    borderRadius?: number;
+    /** Border width */
+    borderWidth?: number;
+    /** Border color */
+    borderColor?: string;
+}
+/**
+ * GradientView renders a gradient background
+ * Uses LinearGradient if available, falls back to first stop color otherwise
+ */
+export declare const GradientView: React.FC<GradientViewProps>;
+/**
+ * Check if LinearGradient is available
+ */
+export declare function isGradientSupported(): boolean;
+/**
+ * Get gradient background style or fallback color
+ * Use this when you need to decide between GradientView or regular View
+ */
+export declare function getGradientStyleOrFallback(gradient: GradientConfig | undefined, fallbackColor?: string): {
+    useGradient: boolean;
+    backgroundColor: string;
+    gradient?: GradientConfig;
+};