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

package/dist/components/CarouselComponent.js

@@ -0,0 +1,484 @@
+"use strict";
+/**
+ * Native React Native Carousel with swipe, pagination, and axis support
+ * Supports horizontal, vertical, and layered modes
+ */
+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.CarouselComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const ComponentRenderer_1 = require("../ComponentRenderer");
+// Enable LayoutAnimation on Android
+if (react_native_1.Platform.OS === 'android' && react_native_1.UIManager.setLayoutAnimationEnabledExperimental) {
+    react_native_1.UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+const CarouselComponent = ({ component, configuration, style, onButtonPress, onPageChange, stateManager, renderChild, }) => {
+    var _a, _b, _c, _d;
+    const props = component.properties || {};
+    const containerLayout = component.containerLayout;
+    // Properties
+    const showPagination = props.showPagination !== false;
+    const showArrows = props.showArrows === true;
+    const loop = props.loop === true;
+    const dragEnabled = props.dragEnabled !== false;
+    const animated = props.animated !== false;
+    const defaultIndex = (_a = props.defaultIndex) !== null && _a !== void 0 ? _a : 0;
+    const paginationColor = props.paginationColor || '#007AFF';
+    const paginationInactiveColor = props.paginationInactiveColor || '#CCCCCC';
+    // Slide display settings
+    const slideDisplay = props.slideDisplay || 'full'; // 'full' | 'peek'
+    const peekAmount = (_b = props.peekAmount) !== null && _b !== void 0 ? _b : 15; // percentage 5-40
+    // Transition settings (new)
+    const transition = props.transition || 'scroll'; // 'scroll' | 'fade' | 'slide' | 'push' | 'none'
+    const transitionDuration = (_c = props.transitionDuration) !== null && _c !== void 0 ? _c : 300; // milliseconds
+    const keyboardEnabled = props.keyboardEnabled !== false; // keyboard navigation
+    // Auto scroll settings
+    const autoScrollEnabled = props.autoScrollEnabled === true;
+    const autoScrollInterval = (_d = props.autoScrollInterval) !== null && _d !== void 0 ? _d : 3000;
+    const autoScrollDirection = props.autoScrollDirection || 'forward';
+    const pauseOnTouch = props.pauseOnHover !== false; // pauseOnHover maps to touch on mobile
+    // Axis support: horizontal (default), vertical, or layered
+    const axis = (containerLayout === null || containerLayout === void 0 ? void 0 : containerLayout.axis) || props.axis || 'horizontal';
+    const children = component.children || [];
+    const itemCount = children.length;
+    const [currentIndex, setCurrentIndex] = (0, react_1.useState)(Math.min(defaultIndex, Math.max(0, itemCount - 1)));
+    const [containerWidth, setContainerWidth] = (0, react_1.useState)(react_native_1.Dimensions.get('window').width);
+    const [containerHeight, setContainerHeight] = (0, react_1.useState)(200);
+    const scrollViewRef = (0, react_1.useRef)(null);
+    const isInitialized = (0, react_1.useRef)(false);
+    const isDragging = (0, react_1.useRef)(false);
+    const autoScrollTimerRef = (0, react_1.useRef)(null);
+    // Calculate slide width for peek mode
+    const slideWidth = slideDisplay === 'peek'
+        ? containerWidth * (1 - peekAmount / 100)
+        : containerWidth;
+    // Initialize scroll position on mount
+    (0, react_1.useEffect)(() => {
+        if (scrollViewRef.current && !isInitialized.current && axis !== 'layered') {
+            isInitialized.current = true;
+            const offset = axis === 'vertical'
+                ? { x: 0, y: currentIndex * containerHeight }
+                : { x: currentIndex * slideWidth, y: 0 };
+            setTimeout(() => {
+                var _a;
+                (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({ ...offset, animated: false });
+            }, 100);
+        }
+    }, [containerWidth, containerHeight, currentIndex, axis, slideWidth]);
+    // Auto scroll effect
+    (0, react_1.useEffect)(() => {
+        if (!autoScrollEnabled || itemCount <= 1) {
+            return;
+        }
+        const startAutoScroll = () => {
+            if (autoScrollTimerRef.current) {
+                clearInterval(autoScrollTimerRef.current);
+            }
+            autoScrollTimerRef.current = setInterval(() => {
+                if (isDragging.current && pauseOnTouch) {
+                    return;
+                }
+                setCurrentIndex((prevIndex) => {
+                    let nextIndex;
+                    if (autoScrollDirection === 'reverse') {
+                        nextIndex = prevIndex - 1;
+                        if (nextIndex < 0) {
+                            nextIndex = loop ? itemCount - 1 : 0;
+                        }
+                    }
+                    else {
+                        nextIndex = prevIndex + 1;
+                        if (nextIndex >= itemCount) {
+                            nextIndex = loop ? 0 : itemCount - 1;
+                        }
+                    }
+                    return nextIndex;
+                });
+            }, autoScrollInterval);
+        };
+        startAutoScroll();
+        return () => {
+            if (autoScrollTimerRef.current) {
+                clearInterval(autoScrollTimerRef.current);
+            }
+        };
+    }, [autoScrollEnabled, autoScrollInterval, autoScrollDirection, loop, itemCount, pauseOnTouch]);
+    // Update state manager when index changes (SDK parity)
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            stateManager.setState(`element:${component.id}.currentIndex`, currentIndex);
+            stateManager.setState(`element:${component.id}.totalPages`, itemCount);
+        }
+    }, [stateManager, component.id, currentIndex, itemCount]);
+    // Create custom LayoutAnimation based on transition type and duration
+    const getTransitionAnimation = (0, react_1.useCallback)(() => {
+        if (transition === 'none' || !animated) {
+            return null;
+        }
+        const duration = transitionDuration;
+        switch (transition) {
+            case 'fade':
+                return react_native_1.LayoutAnimation.create(duration, react_native_1.LayoutAnimation.Types.easeInEaseOut, react_native_1.LayoutAnimation.Properties.opacity);
+            case 'slide':
+            case 'push':
+                return react_native_1.LayoutAnimation.create(duration, react_native_1.LayoutAnimation.Types.easeInEaseOut, react_native_1.LayoutAnimation.Properties.scaleXY);
+            case 'scroll':
+            default:
+                return react_native_1.LayoutAnimation.create(duration, react_native_1.LayoutAnimation.Types.easeInEaseOut, react_native_1.LayoutAnimation.Properties.opacity);
+        }
+    }, [transition, transitionDuration, animated]);
+    const handleScroll = (0, react_1.useCallback)((event) => {
+        const offset = axis === 'vertical'
+            ? event.nativeEvent.contentOffset.y
+            : event.nativeEvent.contentOffset.x;
+        const size = axis === 'vertical' ? containerHeight : slideWidth;
+        const newIndex = Math.round(offset / size);
+        if (newIndex !== currentIndex && newIndex >= 0 && newIndex < itemCount) {
+            const transitionAnim = getTransitionAnimation();
+            if (transitionAnim) {
+                react_native_1.LayoutAnimation.configureNext(transitionAnim);
+            }
+            setCurrentIndex(newIndex);
+            onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(newIndex);
+            onButtonPress === null || onButtonPress === void 0 ? void 0 : onButtonPress(component.id, `page_changed:${newIndex}`);
+        }
+    }, [axis, slideWidth, containerHeight, currentIndex, itemCount, onPageChange, onButtonPress, component.id, getTransitionAnimation]);
+    const handleScrollBeginDrag = (0, react_1.useCallback)(() => {
+        isDragging.current = true;
+    }, []);
+    const handleScrollEndDrag = (0, react_1.useCallback)(() => {
+        isDragging.current = false;
+    }, []);
+    const scrollToIndex = (0, react_1.useCallback)((index) => {
+        var _a;
+        let targetIndex = index;
+        if (loop) {
+            if (index < 0) {
+                targetIndex = itemCount - 1;
+            }
+            else if (index >= itemCount) {
+                targetIndex = 0;
+            }
+        }
+        else {
+            targetIndex = Math.max(0, Math.min(itemCount - 1, index));
+        }
+        if (axis === 'layered') {
+            // For layered, just update the index with transition animation
+            const transitionAnim = getTransitionAnimation();
+            if (transitionAnim) {
+                react_native_1.LayoutAnimation.configureNext(transitionAnim);
+            }
+            setCurrentIndex(targetIndex);
+        }
+        else {
+            const offset = axis === 'vertical'
+                ? { x: 0, y: targetIndex * containerHeight }
+                : { x: targetIndex * slideWidth, y: 0 };
+            // Use animated based on transition type
+            const shouldAnimate = transition !== 'none' && animated;
+            (_a = scrollViewRef.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+                ...offset,
+                animated: shouldAnimate,
+            });
+        }
+        onPageChange === null || onPageChange === void 0 ? void 0 : onPageChange(targetIndex);
+        onButtonPress === null || onButtonPress === void 0 ? void 0 : onButtonPress(component.id, `page_changed:${targetIndex}`);
+    }, [loop, itemCount, axis, slideWidth, containerHeight, animated, transition, onPageChange, onButtonPress, component.id, getTransitionAnimation]);
+    // Listen for external state changes via state manager (placed after scrollToIndex)
+    (0, react_1.useEffect)(() => {
+        if (!stateManager)
+            return;
+        const unsubscribe = stateManager.subscribe(`element:${component.id}.currentIndex`, (value) => {
+            if (typeof value === 'number' && value !== currentIndex && value >= 0 && value < itemCount) {
+                scrollToIndex(value);
+            }
+        });
+        return unsubscribe;
+    }, [stateManager, component.id, currentIndex, itemCount, scrollToIndex]);
+    const goToPrevious = (0, react_1.useCallback)(() => {
+        scrollToIndex(currentIndex - 1);
+    }, [currentIndex, scrollToIndex]);
+    const goToNext = (0, react_1.useCallback)(() => {
+        scrollToIndex(currentIndex + 1);
+    }, [currentIndex, scrollToIndex]);
+    // Keyboard navigation for web platform
+    const handleKeyDown = (0, react_1.useCallback)((event) => {
+        var _a, _b, _c, _d, _e;
+        if (!keyboardEnabled || itemCount <= 1)
+            return;
+        const key = ((_a = event.nativeEvent) === null || _a === void 0 ? void 0 : _a.key) || event.key;
+        const isVertical = axis === 'vertical';
+        if (isVertical) {
+            if (key === 'ArrowUp') {
+                (_b = event.preventDefault) === null || _b === void 0 ? void 0 : _b.call(event);
+                goToPrevious();
+            }
+            else if (key === 'ArrowDown') {
+                (_c = event.preventDefault) === null || _c === void 0 ? void 0 : _c.call(event);
+                goToNext();
+            }
+        }
+        else {
+            if (key === 'ArrowLeft') {
+                (_d = event.preventDefault) === null || _d === void 0 ? void 0 : _d.call(event);
+                goToPrevious();
+            }
+            else if (key === 'ArrowRight') {
+                (_e = event.preventDefault) === null || _e === void 0 ? void 0 : _e.call(event);
+                goToNext();
+            }
+        }
+    }, [keyboardEnabled, itemCount, axis, goToPrevious, goToNext]);
+    // Empty placeholder
+    if (itemCount === 0) {
+        return (<react_native_1.View style={[styles.emptyContainer, style]}>
+        <react_native_1.Text style={styles.emptyText}>Add slides to the carousel</react_native_1.Text>
+      </react_native_1.View>);
+    }
+    const isVertical = axis === 'vertical';
+    const isLayered = axis === 'layered';
+    // Render layered carousel
+    if (isLayered) {
+        // Web keyboard props
+        const webKeyboardProps = react_native_1.Platform.OS === 'web' && keyboardEnabled ? {
+            tabIndex: 0,
+            onKeyDown: handleKeyDown,
+            style: { outline: 'none' },
+        } : {};
+        return (<react_native_1.Pressable style={[styles.container, style]} onLayout={(e) => {
+                setContainerWidth(e.nativeEvent.layout.width);
+                setContainerHeight(e.nativeEvent.layout.height);
+            }} {...webKeyboardProps}>
+        <react_native_1.View style={styles.layeredContainer}>
+          {children.map((child, index) => (<react_native_1.View key={child.id} style={[
+                    styles.layeredItem,
+                    { opacity: index === currentIndex ? 1 : 0 },
+                ]}>
+              {renderChild ? renderChild(child) : (<ComponentRenderer_1.ComponentRenderer component={child} configuration={configuration} onButtonPress={onButtonPress} stateManager={stateManager}/>)}
+            </react_native_1.View>))}
+        </react_native_1.View>
+        
+        {showPagination && itemCount > 1 && (<react_native_1.View style={styles.pagination}>
+            {children.map((_, index) => (<react_native_1.TouchableOpacity key={index} onPress={() => scrollToIndex(index)}>
+                <react_native_1.View style={[
+                        styles.dot,
+                        {
+                            backgroundColor: index === currentIndex ? paginationColor : paginationInactiveColor,
+                            transform: [{ scale: index === currentIndex ? 1.2 : 1 }],
+                        },
+                    ]}/>
+              </react_native_1.TouchableOpacity>))}
+          </react_native_1.View>)}
+      </react_native_1.Pressable>);
+    }
+    // Web keyboard props for horizontal/vertical carousels
+    const webKeyboardProps = react_native_1.Platform.OS === 'web' && keyboardEnabled ? {
+        tabIndex: 0,
+        onKeyDown: handleKeyDown,
+        style: { outline: 'none' },
+    } : {};
+    return (<react_native_1.Pressable style={[styles.container, style]} onLayout={(e) => {
+            setContainerWidth(e.nativeEvent.layout.width);
+            setContainerHeight(e.nativeEvent.layout.height);
+        }} {...webKeyboardProps}>
+      {/* Carousel content */}
+      <react_native_1.View style={styles.carouselContainer}>
+        <react_native_1.ScrollView ref={scrollViewRef} horizontal={!isVertical} pagingEnabled={slideDisplay !== 'peek'} showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} onMomentumScrollEnd={handleScroll} onScrollBeginDrag={handleScrollBeginDrag} onScrollEndDrag={handleScrollEndDrag} scrollEventThrottle={16} decelerationRate="fast" bounces={false} scrollEnabled={dragEnabled} snapToInterval={slideDisplay === 'peek' ? slideWidth : undefined} snapToAlignment={slideDisplay === 'peek' ? 'start' : undefined}>
+          {children.map((child) => (<react_native_1.View key={child.id} style={isVertical
+                ? { height: containerHeight, width: containerWidth }
+                : { width: slideWidth }}>
+              {renderChild ? renderChild(child) : (<ComponentRenderer_1.ComponentRenderer component={child} configuration={configuration} onButtonPress={onButtonPress} stateManager={stateManager}/>)}
+            </react_native_1.View>))}
+        </react_native_1.ScrollView>
+        
+        {/* Navigation arrows */}
+        {showArrows && itemCount > 1 && (<>
+            <react_native_1.TouchableOpacity style={[
+                styles.arrow,
+                isVertical ? styles.topArrow : styles.leftArrow,
+            ]} onPress={goToPrevious} disabled={!loop && currentIndex === 0}>
+              <react_native_1.View style={[
+                styles.arrowButton,
+                { opacity: (!loop && currentIndex === 0) ? 0.3 : 1 }
+            ]}>
+                <react_native_1.View style={[
+                styles.arrowIcon,
+                isVertical ? styles.upArrowIcon : styles.leftArrowIcon
+            ]}/>
+              </react_native_1.View>
+            </react_native_1.TouchableOpacity>
+            
+            <react_native_1.TouchableOpacity style={[
+                styles.arrow,
+                isVertical ? styles.bottomArrow : styles.rightArrow,
+            ]} onPress={goToNext} disabled={!loop && currentIndex === itemCount - 1}>
+              <react_native_1.View style={[
+                styles.arrowButton,
+                { opacity: (!loop && currentIndex === itemCount - 1) ? 0.3 : 1 }
+            ]}>
+                <react_native_1.View style={[
+                styles.arrowIcon,
+                isVertical ? styles.downArrowIcon : styles.rightArrowIcon
+            ]}/>
+              </react_native_1.View>
+            </react_native_1.TouchableOpacity>
+          </>)}
+      </react_native_1.View>
+      
+      {/* Pagination dots */}
+      {showPagination && itemCount > 1 && (<react_native_1.View style={[
+                styles.pagination,
+                isVertical && styles.verticalPagination,
+            ]}>
+          {children.map((_, index) => (<react_native_1.TouchableOpacity key={index} onPress={() => scrollToIndex(index)}>
+              <react_native_1.View style={[
+                    styles.dot,
+                    {
+                        backgroundColor: index === currentIndex
+                            ? paginationColor
+                            : paginationInactiveColor,
+                        transform: [{ scale: index === currentIndex ? 1.2 : 1 }],
+                    },
+                ]}/>
+            </react_native_1.TouchableOpacity>))}
+        </react_native_1.View>)}
+    </react_native_1.Pressable>);
+};
+exports.CarouselComponent = CarouselComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+    carouselContainer: {
+        position: 'relative',
+        overflow: 'hidden',
+    },
+    emptyContainer: {
+        height: 100,
+        backgroundColor: 'rgba(128, 128, 128, 0.1)',
+        borderRadius: 8,
+        borderWidth: 1,
+        borderColor: 'rgba(128, 128, 128, 0.3)',
+        borderStyle: 'dashed',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    emptyText: {
+        color: '#888',
+        fontSize: 12,
+    },
+    layeredContainer: {
+        position: 'relative',
+    },
+    layeredItem: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+    },
+    pagination: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        alignItems: 'center',
+        paddingVertical: 12,
+        gap: 8,
+    },
+    verticalPagination: {
+        position: 'absolute',
+        right: 8,
+        top: '50%',
+        flexDirection: 'column',
+        paddingVertical: 0,
+        paddingHorizontal: 8,
+    },
+    dot: {
+        width: 8,
+        height: 8,
+        borderRadius: 4,
+    },
+    arrow: {
+        position: 'absolute',
+        zIndex: 10,
+    },
+    leftArrow: {
+        left: 8,
+        top: '50%',
+        marginTop: -20,
+    },
+    rightArrow: {
+        right: 8,
+        top: '50%',
+        marginTop: -20,
+    },
+    topArrow: {
+        top: 8,
+        left: '50%',
+        marginLeft: -20,
+    },
+    bottomArrow: {
+        bottom: 8,
+        left: '50%',
+        marginLeft: -20,
+    },
+    arrowButton: {
+        width: 40,
+        height: 40,
+        borderRadius: 20,
+        backgroundColor: 'rgba(0, 0, 0, 0.5)',
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    arrowIcon: {
+        width: 12,
+        height: 12,
+        borderTopWidth: 2,
+        borderRightWidth: 2,
+        borderColor: '#FFFFFF',
+    },
+    leftArrowIcon: {
+        transform: [{ rotate: '-135deg' }, { translateX: 2 }],
+    },
+    rightArrowIcon: {
+        transform: [{ rotate: '45deg' }, { translateX: -2 }],
+    },
+    upArrowIcon: {
+        transform: [{ rotate: '-45deg' }, { translateY: 2 }],
+    },
+    downArrowIcon: {
+        transform: [{ rotate: '135deg' }, { translateY: -2 }],
+    },
+});

package/dist/components/ChartCurveComponent.d.ts

@@ -0,0 +1,13 @@
+/**
+ * ChartCurveComponent - Native React Native implementation
+ * Supports 6 curve types: ascending, descending, dip, rise, flat-end, s-curve
+ */
+import React from 'react';
+import { PaywallComponent } from '../types';
+interface ChartCurveComponentProps {
+    component: PaywallComponent;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+}
+export declare const ChartCurveComponent: React.FC<ChartCurveComponentProps>;
+export {};