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

package/dist/components/AccordionComponent.js

@@ -0,0 +1,187 @@
+"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.AccordionComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+// Enable LayoutAnimation on Android
+if (react_native_1.Platform.OS === 'android' && react_native_1.UIManager.setLayoutAnimationEnabledExperimental) {
+    react_native_1.UIManager.setLayoutAnimationEnabledExperimental(true);
+}
+const AccordionComponent = ({ component, renderChild, stateManager, isPreviewMode = false, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const props = component.properties;
+    const allowMultiple = (_a = props.allowMultiple) !== null && _a !== void 0 ? _a : false;
+    const defaultExpanded = (_b = props.defaultExpandedIndex) !== null && _b !== void 0 ? _b : -1;
+    const animated = props.animated !== false;
+    const gap = (_c = props.gap) !== null && _c !== void 0 ? _c : 4;
+    const headerPadding = (_d = props.headerPadding) !== null && _d !== void 0 ? _d : 12;
+    const contentPadding = (_e = props.contentPadding) !== null && _e !== void 0 ? _e : 12;
+    const opacity = (_f = props.opacity) !== null && _f !== void 0 ? _f : 1;
+    const headerBackground = (_g = props.headerBackground) !== null && _g !== void 0 ? _g : '#f5f5f5';
+    const [expandedIndexes, setExpandedIndexes] = (0, react_1.useState)(defaultExpanded >= 0 ? [defaultExpanded] : []);
+    // Get items from children only
+    const items = component.children || [];
+    // Register initial state
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            const currentIndex = expandedIndexes.length > 0 ? expandedIndexes[0] : -1;
+            stateManager.updateState(`element:${component.id}.currentIndex`, currentIndex);
+            stateManager.updateState(`element:${component.id}.expandedIndexes`, expandedIndexes);
+            stateManager.updateState(`element:${component.id}.totalItems`, items.length);
+        }
+    }, []);
+    // Subscribe to external state changes
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            const unsubscribe = stateManager.subscribeToState(`element:${component.id}.currentIndex`, (value) => {
+                const current = expandedIndexes.length > 0 ? expandedIndexes[0] : -1;
+                if (value !== current) {
+                    if (animated) {
+                        react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
+                    }
+                    setExpandedIndexes(value >= 0 ? [value] : []);
+                }
+            });
+            const unsubscribeMultiple = stateManager.subscribeToState(`element:${component.id}.expandedIndexes`, (value) => {
+                if (Array.isArray(value) && allowMultiple) {
+                    if (animated) {
+                        react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
+                    }
+                    setExpandedIndexes(value);
+                }
+            });
+            return () => {
+                unsubscribe === null || unsubscribe === void 0 ? void 0 : unsubscribe();
+                unsubscribeMultiple === null || unsubscribeMultiple === void 0 ? void 0 : unsubscribeMultiple();
+            };
+        }
+    }, [component.id, stateManager, allowMultiple]);
+    const toggleItem = (index) => {
+        if (animated) {
+            react_native_1.LayoutAnimation.configureNext(react_native_1.LayoutAnimation.Presets.easeInEaseOut);
+        }
+        let newExpandedIndexes;
+        if (allowMultiple) {
+            newExpandedIndexes = expandedIndexes.includes(index)
+                ? expandedIndexes.filter(i => i !== index)
+                : [...expandedIndexes, index];
+        }
+        else {
+            newExpandedIndexes = expandedIndexes.includes(index) ? [] : [index];
+        }
+        setExpandedIndexes(newExpandedIndexes);
+        if (stateManager) {
+            const currentIndex = newExpandedIndexes.length > 0 ? newExpandedIndexes[0] : -1;
+            stateManager.updateState(`element:${component.id}.currentIndex`, currentIndex);
+            stateManager.updateState(`element:${component.id}.expandedIndexes`, newExpandedIndexes);
+        }
+    };
+    return (<react_native_1.View style={[styles.container, { opacity, gap }]}>
+      {items.map((item, index) => {
+            var _a, _b, _c, _d;
+            const isExpanded = expandedIndexes.includes(index);
+            const itemProps = item.properties;
+            const header = (_a = item.children) === null || _a === void 0 ? void 0 : _a.find((c) => { var _a; return ((_a = c.properties) === null || _a === void 0 ? void 0 : _a.role) === 'header' || c.type === 'accordion-header'; });
+            const contentChildren = ((_b = item.children) === null || _b === void 0 ? void 0 : _b.filter((c) => { var _a; return ((_a = c.properties) === null || _a === void 0 ? void 0 : _a.role) !== 'header' && c.type !== 'accordion-header'; })) || [];
+            return (<react_native_1.View key={item.id} style={styles.item}>
+            {/* Header */}
+            <react_native_1.TouchableOpacity onPress={() => toggleItem(index)} style={[
+                    styles.header,
+                    {
+                        backgroundColor: (_c = itemProps === null || itemProps === void 0 ? void 0 : itemProps.headerBackground) !== null && _c !== void 0 ? _c : headerBackground,
+                        padding: headerPadding,
+                    }
+                ]} activeOpacity={0.7}>
+              <react_native_1.View style={styles.headerContent}>
+                {header ? (renderChild(header)) : (<react_native_1.Text style={styles.headerText}>
+                    {(_d = itemProps === null || itemProps === void 0 ? void 0 : itemProps.title) !== null && _d !== void 0 ? _d : `Item ${index + 1}`}
+                  </react_native_1.Text>)}
+              </react_native_1.View>
+              <react_native_1.Text style={[
+                    styles.chevron,
+                    isExpanded && styles.chevronExpanded
+                ]}>
+                ▼
+              </react_native_1.Text>
+            </react_native_1.TouchableOpacity>
+
+            {/* Content */}
+            {isExpanded && (<react_native_1.View style={[styles.content, { padding: contentPadding }]}>
+                {contentChildren.length > 0
+                        ? contentChildren.map((child) => (<react_native_1.View key={child.id}>
+                        {renderChild(child)}
+                      </react_native_1.View>))
+                        : (itemProps === null || itemProps === void 0 ? void 0 : itemProps.content) && <react_native_1.Text>{itemProps.content}</react_native_1.Text>}
+              </react_native_1.View>)}
+          </react_native_1.View>);
+        })}
+    </react_native_1.View>);
+};
+exports.AccordionComponent = AccordionComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+    item: {
+        backgroundColor: '#f5f5f5',
+        borderRadius: 8,
+        overflow: 'hidden',
+    },
+    header: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    headerContent: {
+        flex: 1,
+    },
+    headerText: {
+        fontSize: 16,
+        fontWeight: '600',
+    },
+    chevron: {
+        fontSize: 12,
+        color: '#666',
+        marginLeft: 8,
+    },
+    chevronExpanded: {
+        transform: [{ rotate: '180deg' }],
+    },
+    content: {
+        borderTopWidth: 1,
+        borderTopColor: '#e0e0e0',
+    },
+});

package/dist/components/AnimatedWrapper.d.ts

@@ -0,0 +1,35 @@
+/**
+ * AnimatedWrapper - React Native animation component
+ * Wraps children with animations based on preset configurations
+ */
+import React from 'react';
+import { Animated, ViewStyle } from 'react-native';
+import { EasingType } from '../animations/presets';
+interface AnimatedWrapperProps {
+    preset?: string;
+    trigger?: 'enter' | 'loop' | 'tap';
+    duration?: number;
+    delay?: number;
+    easing?: EasingType;
+    iterations?: number;
+    children: React.ReactNode;
+    style?: ViewStyle;
+    onAnimationComplete?: () => void;
+}
+export declare const AnimatedWrapper: React.FC<AnimatedWrapperProps>;
+/**
+ * Hook to get animation style without wrapper component
+ */
+export declare function usePaywallAnimation(preset?: string, customParams?: {
+    duration?: number;
+    delay?: number;
+    easing?: EasingType;
+    iterations?: number;
+}): {
+    animatedValue: Animated.Value;
+    start: () => void;
+    stop: () => void;
+    reset: () => void;
+    presetConfig: import("../animations/presets").AnimationPresetConfig | undefined;
+};
+export default AnimatedWrapper;

package/dist/components/AnimatedWrapper.js

@@ -0,0 +1,277 @@
+"use strict";
+/**
+ * AnimatedWrapper - React Native animation component
+ * Wraps children with animations based on preset configurations
+ */
+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.AnimatedWrapper = void 0;
+exports.usePaywallAnimation = usePaywallAnimation;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+// Local copy of packages/core/src/animations/presets (see src/animations/presets.ts).
+// Imported locally because ANIMATION_PRESETS is a runtime value and tsc rootDir
+// cannot span files outside this package.
+const presets_1 = require("../animations/presets");
+/**
+ * Map easing type to React Native Easing function
+ */
+function getEasingFunction(easing) {
+    switch (easing) {
+        case 'linear':
+            return react_native_1.Easing.linear;
+        case 'ease':
+            return react_native_1.Easing.ease;
+        case 'ease-in':
+            return react_native_1.Easing.in(react_native_1.Easing.ease);
+        case 'ease-out':
+            return react_native_1.Easing.out(react_native_1.Easing.ease);
+        case 'ease-in-out':
+            return react_native_1.Easing.inOut(react_native_1.Easing.ease);
+        case 'spring':
+            return react_native_1.Easing.elastic(1);
+        default:
+            return react_native_1.Easing.ease;
+    }
+}
+/**
+ * Calculate interpolated value at a specific progress point
+ */
+function interpolateKeyframes(keyframes, property, progress) {
+    if (keyframes.length === 0)
+        return undefined;
+    // Find surrounding keyframes
+    let prevFrame = keyframes[0];
+    let nextFrame = keyframes[keyframes.length - 1];
+    for (let i = 0; i < keyframes.length - 1; i++) {
+        if (keyframes[i].offset <= progress && keyframes[i + 1].offset >= progress) {
+            prevFrame = keyframes[i];
+            nextFrame = keyframes[i + 1];
+            break;
+        }
+    }
+    const prevValue = prevFrame[property];
+    const nextValue = nextFrame[property];
+    if (prevValue === undefined || nextValue === undefined)
+        return undefined;
+    if (typeof prevValue !== 'number' || typeof nextValue !== 'number')
+        return undefined;
+    // Linear interpolation between keyframes
+    const range = nextFrame.offset - prevFrame.offset;
+    if (range === 0)
+        return prevValue;
+    const localProgress = (progress - prevFrame.offset) / range;
+    return prevValue + (nextValue - prevValue) * localProgress;
+}
+const AnimatedWrapper = ({ preset, trigger = 'enter', duration: customDuration, delay: customDelay, easing: customEasing, iterations: customIterations, children, style, onAnimationComplete, }) => {
+    const animatedValue = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    // Get preset configuration
+    const presetConfig = preset ? presets_1.ANIMATION_PRESETS[preset] : undefined;
+    // Merge custom parameters with preset defaults
+    const animationParams = (0, react_1.useMemo)(() => {
+        if (!presetConfig) {
+            return { duration: 300, delay: 0, easing: 'ease-out', iterations: 1 };
+        }
+        return {
+            duration: customDuration !== null && customDuration !== void 0 ? customDuration : presetConfig.defaultDuration,
+            delay: customDelay !== null && customDelay !== void 0 ? customDelay : presetConfig.defaultDelay,
+            easing: customEasing !== null && customEasing !== void 0 ? customEasing : presetConfig.defaultEasing,
+            iterations: customIterations !== null && customIterations !== void 0 ? customIterations : presetConfig.defaultIterations,
+        };
+    }, [presetConfig, customDuration, customDelay, customEasing, customIterations]);
+    // Run animation on mount or when trigger changes
+    (0, react_1.useEffect)(() => {
+        if (!presetConfig)
+            return;
+        const isLooping = animationParams.iterations === -1 || trigger === 'loop';
+        const runAnimation = () => {
+            animatedValue.setValue(0);
+            const animation = react_native_1.Animated.timing(animatedValue, {
+                toValue: 1,
+                duration: animationParams.duration,
+                delay: animationParams.delay,
+                easing: getEasingFunction(animationParams.easing),
+                useNativeDriver: true,
+            });
+            if (isLooping) {
+                react_native_1.Animated.loop(animation).start();
+            }
+            else {
+                animation.start(({ finished }) => {
+                    if (finished && onAnimationComplete) {
+                        onAnimationComplete();
+                    }
+                });
+            }
+        };
+        runAnimation();
+        return () => {
+            animatedValue.stopAnimation();
+        };
+    }, [preset, trigger, animationParams]);
+    // Build animated style from keyframes
+    const animatedStyle = (0, react_1.useMemo)(() => {
+        if (!presetConfig)
+            return {};
+        const { keyframes } = presetConfig;
+        const transforms = [];
+        // Extract unique offsets for input range
+        const offsets = keyframes.map(kf => kf.offset);
+        // Opacity interpolation
+        const opacityValues = keyframes.map(kf => kf.opacity).filter(v => v !== undefined);
+        const hasOpacity = opacityValues.length > 0;
+        // Scale interpolation
+        const scaleValues = keyframes.map(kf => { var _a; return (_a = kf.scale) !== null && _a !== void 0 ? _a : 1; });
+        const hasScale = keyframes.some(kf => kf.scale !== undefined);
+        // TranslateX interpolation
+        const translateXValues = keyframes.map(kf => {
+            const val = kf.translateX;
+            if (typeof val === 'string' && val.includes('%')) {
+                // Convert percentage to pixels (approximate with 300px width)
+                return parseFloat(val) * 3;
+            }
+            return typeof val === 'number' ? val : 0;
+        });
+        const hasTranslateX = keyframes.some(kf => kf.translateX !== undefined);
+        // TranslateY interpolation
+        const translateYValues = keyframes.map(kf => {
+            const val = kf.translateY;
+            if (typeof val === 'string' && val.includes('%')) {
+                return parseFloat(val) * 5; // Approximate with 500px height
+            }
+            return typeof val === 'number' ? val : 0;
+        });
+        const hasTranslateY = keyframes.some(kf => kf.translateY !== undefined);
+        // Rotate interpolation
+        const rotateValues = keyframes.map(kf => { var _a; return (_a = kf.rotate) !== null && _a !== void 0 ? _a : 0; });
+        const hasRotate = keyframes.some(kf => kf.rotate !== undefined);
+        // Build style object
+        const animStyle = {};
+        if (hasOpacity) {
+            animStyle.opacity = animatedValue.interpolate({
+                inputRange: offsets,
+                outputRange: keyframes.map(kf => { var _a; return (_a = kf.opacity) !== null && _a !== void 0 ? _a : 1; }),
+            });
+        }
+        if (hasScale) {
+            transforms.push({
+                scale: animatedValue.interpolate({
+                    inputRange: offsets,
+                    outputRange: scaleValues,
+                }),
+            });
+        }
+        if (hasTranslateX) {
+            transforms.push({
+                translateX: animatedValue.interpolate({
+                    inputRange: offsets,
+                    outputRange: translateXValues,
+                }),
+            });
+        }
+        if (hasTranslateY) {
+            transforms.push({
+                translateY: animatedValue.interpolate({
+                    inputRange: offsets,
+                    outputRange: translateYValues,
+                }),
+            });
+        }
+        if (hasRotate) {
+            transforms.push({
+                rotate: animatedValue.interpolate({
+                    inputRange: offsets,
+                    outputRange: rotateValues.map(r => `${r}deg`),
+                }),
+            });
+        }
+        if (transforms.length > 0) {
+            animStyle.transform = transforms;
+        }
+        return animStyle;
+    }, [presetConfig, animatedValue]);
+    // If no preset, render children without animation
+    if (!presetConfig) {
+        return <react_native_1.Animated.View style={style}>{children}</react_native_1.Animated.View>;
+    }
+    return (<react_native_1.Animated.View style={[style, animatedStyle]}>
+      {children}
+    </react_native_1.Animated.View>);
+};
+exports.AnimatedWrapper = AnimatedWrapper;
+/**
+ * Hook to get animation style without wrapper component
+ */
+function usePaywallAnimation(preset, customParams) {
+    const animatedValue = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    const presetConfig = preset ? presets_1.ANIMATION_PRESETS[preset] : undefined;
+    const params = (0, react_1.useMemo)(() => {
+        var _a, _b, _c, _d;
+        if (!presetConfig)
+            return null;
+        return {
+            duration: (_a = customParams === null || customParams === void 0 ? void 0 : customParams.duration) !== null && _a !== void 0 ? _a : presetConfig.defaultDuration,
+            delay: (_b = customParams === null || customParams === void 0 ? void 0 : customParams.delay) !== null && _b !== void 0 ? _b : presetConfig.defaultDelay,
+            easing: (_c = customParams === null || customParams === void 0 ? void 0 : customParams.easing) !== null && _c !== void 0 ? _c : presetConfig.defaultEasing,
+            iterations: (_d = customParams === null || customParams === void 0 ? void 0 : customParams.iterations) !== null && _d !== void 0 ? _d : presetConfig.defaultIterations,
+        };
+    }, [presetConfig, customParams]);
+    const start = () => {
+        if (!params)
+            return;
+        animatedValue.setValue(0);
+        const animation = react_native_1.Animated.timing(animatedValue, {
+            toValue: 1,
+            duration: params.duration,
+            delay: params.delay,
+            easing: getEasingFunction(params.easing),
+            useNativeDriver: true,
+        });
+        if (params.iterations === -1) {
+            react_native_1.Animated.loop(animation).start();
+        }
+        else {
+            animation.start();
+        }
+    };
+    const stop = () => {
+        animatedValue.stopAnimation();
+    };
+    const reset = () => {
+        animatedValue.setValue(0);
+    };
+    return { animatedValue, start, stop, reset, presetConfig };
+}
+exports.default = exports.AnimatedWrapper;

package/dist/components/CarouselComponent.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Native React Native Carousel with swipe, pagination, and axis support
+ * Supports horizontal, vertical, and layered modes
+ */
+import React from 'react';
+import { ViewStyle } from 'react-native';
+import { PaywallComponent, PaywallConfiguration } from '../types';
+interface StateManager {
+    setState: (key: string, value: any) => void;
+    getState: (key: string) => any;
+    subscribe: (key: string, callback: (value: any) => void) => () => void;
+}
+interface CarouselComponentProps {
+    component: PaywallComponent;
+    configuration: PaywallConfiguration;
+    style?: ViewStyle;
+    onButtonPress?: (componentId: string, action: string) => void;
+    onPageChange?: (page: number) => void;
+    stateManager?: StateManager;
+    renderChild?: (child: PaywallComponent) => React.ReactNode;
+}
+export declare const CarouselComponent: React.FC<CarouselComponentProps>;
+export {};