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

package/dist/components/ChartCurveComponent.js

@@ -0,0 +1,333 @@
+"use strict";
+/**
+ * ChartCurveComponent - Native React Native implementation
+ * Supports 6 curve types: ascending, descending, dip, rise, flat-end, s-curve
+ */
+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.ChartCurveComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const react_native_svg_1 = __importStar(require("react-native-svg"));
+// Curve path definitions (relative to viewBox 0 0 100 100)
+const CURVE_PATHS = {
+    ascending: 'M 0 80 Q 25 75, 50 50 T 100 10',
+    descending: 'M 0 10 Q 25 25, 50 50 T 100 80',
+    dip: 'M 0 30 Q 25 70, 50 80 T 100 30',
+    rise: 'M 0 70 Q 25 30, 50 20 T 100 70',
+    'flat-end': 'M 0 80 Q 30 40, 60 25 T 100 25',
+    's-curve': 'M 0 80 C 25 80, 35 20, 50 20 S 75 80, 100 20',
+};
+// Helper to extract color from fill value
+const getColorFromFill = (fill, fallback) => {
+    var _a;
+    if (!fill)
+        return fallback;
+    if (typeof fill === 'string')
+        return fill;
+    if (typeof fill === 'object') {
+        if (fill.type === 'solid' && fill.color)
+            return fill.color;
+        if (fill.type === 'gradient' && ((_a = fill.stops) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+            return fill.stops[0].color || fallback;
+        }
+        if (fill.color)
+            return fill.color;
+    }
+    return fallback;
+};
+// Helper to extract gradient stops
+const getGradientStops = (fill) => {
+    var _a;
+    if (!fill || typeof fill !== 'object')
+        return null;
+    if (fill.type === 'gradient' && ((_a = fill.stops) === null || _a === void 0 ? void 0 : _a.length) > 0) {
+        return fill.stops.map((stop) => {
+            var _a;
+            return ({
+                color: stop.color || '#3B82F6',
+                offset: ((_a = stop.position) !== null && _a !== void 0 ? _a : 0) / 100,
+            });
+        });
+    }
+    return null;
+};
+// Generate date labels based on date range
+const generateDateLabels = (startDate, endDate, unit, count = 5) => {
+    const labels = [];
+    if (!startDate || !endDate) {
+        // Generate placeholder labels
+        for (let i = 0; i < count; i++) {
+            labels.push(`Day ${i + 1}`);
+        }
+        return labels;
+    }
+    const start = new Date(startDate);
+    const end = new Date(endDate);
+    const diff = end.getTime() - start.getTime();
+    for (let i = 0; i < count; i++) {
+        const date = new Date(start.getTime() + (diff * i) / (count - 1));
+        switch (unit) {
+            case 'day':
+                labels.push(date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }));
+                break;
+            case 'week':
+                labels.push(`W${Math.ceil(date.getDate() / 7)}`);
+                break;
+            case 'month':
+                labels.push(date.toLocaleDateString('en-US', { month: 'short' }));
+                break;
+            case 'year':
+                labels.push(date.getFullYear().toString());
+                break;
+            default:
+                labels.push(date.toLocaleDateString('en-US', { month: 'short', day: 'numeric' }));
+        }
+    }
+    return labels;
+};
+const ChartCurveComponent = ({ component, stateManager, isPreviewMode = false, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h;
+    const props = component.properties;
+    // Curve configuration
+    const curveType = props.curveType || 'ascending';
+    const curvePath = CURVE_PATHS[curveType] || CURVE_PATHS.ascending;
+    // Badge configuration
+    const showLeftBadge = props.showLeftBadge !== false;
+    const showRightBadge = props.showRightBadge !== false;
+    const leftBadgeText = props.leftBadgeText || 'Start';
+    const rightBadgeText = props.rightBadgeText || 'End';
+    const badgeFill = getColorFromFill(props.badgeFill, '#EFF6FF');
+    const badgeTextFill = getColorFromFill(props.badgeTextFill, '#1E40AF');
+    const badgeBorderRadius = (_a = props.badgeBorderRadius) !== null && _a !== void 0 ? _a : 4;
+    const badgeFontSize = (_b = props.badgeFontSize) !== null && _b !== void 0 ? _b : 10;
+    // Line styling
+    const lineStroke = getColorFromFill(props.lineStroke, '#3B82F6');
+    const lineStrokeGradient = getGradientStops(props.lineStroke);
+    const lineWidth = (_c = props.lineWidth) !== null && _c !== void 0 ? _c : 2;
+    // Area configuration
+    const showArea = (_d = props.showArea) !== null && _d !== void 0 ? _d : true;
+    const areaFill = getColorFromFill(props.areaFill, '#3B82F6');
+    const areaFillGradient = getGradientStops(props.areaFill);
+    // Dots configuration
+    const showDots = (_e = props.showDots) !== null && _e !== void 0 ? _e : false;
+    const dotSize = (_f = props.dotSize) !== null && _f !== void 0 ? _f : 4;
+    const dotFill = getColorFromFill(props.dotFill, '#3B82F6');
+    // Animation configuration
+    const animated = props.animated !== false;
+    const animationDuration = (_g = props.animationDuration) !== null && _g !== void 0 ? _g : 1000;
+    // Grid/axis configuration
+    const showGrid = (_h = props.showGrid) !== null && _h !== void 0 ? _h : false;
+    const showXAxis = props.showXAxis !== false;
+    const gridColor = getColorFromFill(props.gridColor, '#E5E7EB');
+    const axisColor = getColorFromFill(props.axisColor, '#9CA3AF');
+    // X-axis label configuration
+    const xLabelMode = props.xLabelMode || 'none';
+    const dateRange = props.dateRange || {};
+    const dateUnit = props.dateUnit || 'day';
+    const customLabels = props.customLabels || [];
+    // Get X-axis labels
+    const getXLabels = () => {
+        switch (xLabelMode) {
+            case 'date-range':
+                return generateDateLabels(dateRange.start, dateRange.end, dateUnit);
+            case 'custom':
+                return customLabels.length > 0 ? customLabels : ['', '', '', '', ''];
+            default:
+                return [];
+        }
+    };
+    const xLabels = getXLabels();
+    // Animation
+    const animatedProgress = (0, react_1.useRef)(new react_native_1.Animated.Value(0)).current;
+    (0, react_1.useEffect)(() => {
+        if (animated) {
+            animatedProgress.setValue(0);
+            react_native_1.Animated.timing(animatedProgress, {
+                toValue: 1,
+                duration: animationDuration,
+                easing: react_native_1.Easing.out(react_native_1.Easing.quad),
+                useNativeDriver: false,
+            }).start();
+        }
+        else {
+            animatedProgress.setValue(1);
+        }
+    }, [animated, animationDuration, animatedProgress]);
+    // Get curve endpoint positions for badges
+    const getCurveEndpoints = (curveType) => {
+        switch (curveType) {
+            case 'ascending':
+                return { left: { x: 0, y: 80 }, right: { x: 100, y: 10 } };
+            case 'descending':
+                return { left: { x: 0, y: 10 }, right: { x: 100, y: 80 } };
+            case 'dip':
+                return { left: { x: 0, y: 30 }, right: { x: 100, y: 30 } };
+            case 'rise':
+                return { left: { x: 0, y: 70 }, right: { x: 100, y: 70 } };
+            case 'flat-end':
+                return { left: { x: 0, y: 80 }, right: { x: 100, y: 25 } };
+            case 's-curve':
+                return { left: { x: 0, y: 80 }, right: { x: 100, y: 20 } };
+            default:
+                return { left: { x: 0, y: 80 }, right: { x: 100, y: 10 } };
+        }
+    };
+    const endpoints = getCurveEndpoints(curveType);
+    // Create area path (curve + bottom closing)
+    const getAreaPath = () => {
+        return `${curvePath} L 100 100 L 0 100 Z`;
+    };
+    // Calculate dot positions along the curve
+    const getDotPositions = () => {
+        // Simplified: place dots at key points
+        const positions = [];
+        const points = 5;
+        for (let i = 0; i < points; i++) {
+            const t = i / (points - 1);
+            const x = t * 100;
+            // Approximate y based on curve type
+            let y;
+            switch (curveType) {
+                case 'ascending':
+                    y = 80 - (70 * t);
+                    break;
+                case 'descending':
+                    y = 10 + (70 * t);
+                    break;
+                case 'dip':
+                    y = 30 + 50 * Math.sin(Math.PI * t);
+                    break;
+                case 'rise':
+                    y = 70 - 50 * Math.sin(Math.PI * t);
+                    break;
+                case 'flat-end':
+                    y = 80 - 55 * Math.min(1, t * 1.5);
+                    break;
+                case 's-curve':
+                    y = t < 0.5 ? 80 - 60 * (2 * t) : 20 + 60 * (2 * t - 1) - 60;
+                    break;
+                default:
+                    y = 50;
+            }
+            positions.push({ x, y: Math.max(10, Math.min(90, y)) });
+        }
+        return positions;
+    };
+    const dotPositions = showDots ? getDotPositions() : [];
+    return (<react_native_1.View style={styles.container}>
+      <react_native_1.View style={styles.chartContainer}>
+        <react_native_svg_1.default width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
+          <react_native_svg_1.Defs>
+            {/* Line gradient */}
+            {lineStrokeGradient && (<react_native_svg_1.LinearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+                {lineStrokeGradient.map((stop, index) => (<react_native_svg_1.Stop key={index} offset={`${stop.offset * 100}%`} stopColor={stop.color}/>))}
+              </react_native_svg_1.LinearGradient>)}
+            
+            {/* Area gradient */}
+            <react_native_svg_1.LinearGradient id="areaGradient" x1="0%" y1="0%" x2="0%" y2="100%">
+              {areaFillGradient ? (areaFillGradient.map((stop, index) => (<react_native_svg_1.Stop key={index} offset={`${stop.offset * 100}%`} stopColor={stop.color} stopOpacity={0.3}/>))) : ([
+            <react_native_svg_1.Stop key="area-start" offset="0%" stopColor={areaFill} stopOpacity={0.3}/>,
+            <react_native_svg_1.Stop key="area-end" offset="100%" stopColor={areaFill} stopOpacity={0.05}/>,
+        ])}
+            </react_native_svg_1.LinearGradient>
+          </react_native_svg_1.Defs>
+          
+          {/* Grid lines */}
+          {showGrid && (<react_native_svg_1.G>
+              {[20, 40, 60, 80].map((y) => (<react_native_svg_1.Line key={`h-${y}`} x1="0" y1={y} x2="100" y2={y} stroke={gridColor} strokeWidth={0.5} strokeDasharray="2,2"/>))}
+              {[20, 40, 60, 80].map((x) => (<react_native_svg_1.Line key={`v-${x}`} x1={x} y1="0" x2={x} y2="100" stroke={gridColor} strokeWidth={0.5} strokeDasharray="2,2"/>))}
+            </react_native_svg_1.G>)}
+          
+          {/* Area fill */}
+          {showArea && (<react_native_svg_1.Path d={getAreaPath()} fill="url(#areaGradient)"/>)}
+          
+          {/* Curve line */}
+          <react_native_svg_1.Path d={curvePath} stroke={lineStrokeGradient ? 'url(#lineGradient)' : lineStroke} strokeWidth={lineWidth} fill="none" strokeLinecap="round" strokeLinejoin="round"/>
+          
+          {/* Data points */}
+          {showDots && dotPositions.map((pos, index) => (<react_native_svg_1.Circle key={index} cx={pos.x} cy={pos.y} r={dotSize / 2} fill={dotFill}/>))}
+          
+          {/* X-axis line */}
+          {showXAxis && (<react_native_svg_1.Line x1="0" y1="100" x2="100" y2="100" stroke={axisColor} strokeWidth={1}/>)}
+          
+          {/* Left badge */}
+          {showLeftBadge && (<react_native_svg_1.G>
+              <react_native_svg_1.Rect x={endpoints.left.x} y={endpoints.left.y - 8} width={30} height={16} rx={badgeBorderRadius} fill={badgeFill}/>
+              <react_native_svg_1.Text x={endpoints.left.x + 15} y={endpoints.left.y + 1} fontSize={badgeFontSize} fill={badgeTextFill} textAnchor="middle" alignmentBaseline="middle">
+                {leftBadgeText}
+              </react_native_svg_1.Text>
+            </react_native_svg_1.G>)}
+          
+          {/* Right badge */}
+          {showRightBadge && (<react_native_svg_1.G>
+              <react_native_svg_1.Rect x={endpoints.right.x - 30} y={endpoints.right.y - 8} width={30} height={16} rx={badgeBorderRadius} fill={badgeFill}/>
+              <react_native_svg_1.Text x={endpoints.right.x - 15} y={endpoints.right.y + 1} fontSize={badgeFontSize} fill={badgeTextFill} textAnchor="middle" alignmentBaseline="middle">
+                {rightBadgeText}
+              </react_native_svg_1.Text>
+            </react_native_svg_1.G>)}
+        </react_native_svg_1.default>
+      </react_native_1.View>
+      
+      {/* X-axis labels */}
+      {xLabelMode !== 'none' && xLabels.length > 0 && (<react_native_1.View style={styles.xAxisLabels}>
+          {xLabels.map((label, index) => (<react_native_1.Text key={index} style={[styles.xAxisLabel, { color: axisColor }]}>
+              {label}
+            </react_native_1.Text>))}
+        </react_native_1.View>)}
+    </react_native_1.View>);
+};
+exports.ChartCurveComponent = ChartCurveComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        width: '100%',
+        aspectRatio: 2,
+    },
+    chartContainer: {
+        flex: 1,
+        paddingTop: 16,
+        paddingBottom: 8,
+    },
+    xAxisLabels: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingHorizontal: 4,
+        marginTop: 4,
+    },
+    xAxisLabel: {
+        fontSize: 10,
+        textAlign: 'center',
+    },
+});

package/dist/components/CheckboxComponent.d.ts

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

package/dist/components/CheckboxComponent.js

@@ -0,0 +1,172 @@
+"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.CheckboxComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+// Size mappings matching web schema
+const SIZE_MAP = {
+    sm: 20,
+    md: 24,
+    lg: 32,
+};
+// Check icon mappings
+const CHECK_ICONS = {
+    check: '✓',
+    cross: '✕',
+    circle: '●',
+};
+const CheckboxComponent = ({ component, stateManager, isPreviewMode = false, }) => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
+    const props = component.properties;
+    const defaultChecked = (_a = props.defaultValue) !== null && _a !== void 0 ? _a : false;
+    const disabled = (_b = props.disabled) !== null && _b !== void 0 ? _b : false;
+    const label = props.label;
+    const variant = (_c = props.variant) !== null && _c !== void 0 ? _c : 'default';
+    const checkIcon = (_d = props.checkIcon) !== null && _d !== void 0 ? _d : 'check';
+    const labelPosition = (_e = props.labelPosition) !== null && _e !== void 0 ? _e : 'right';
+    // Size handling - support both select values (sm/md/lg) and numeric values
+    const sizeValue = (_f = props.size) !== null && _f !== void 0 ? _f : 'md';
+    const size = typeof sizeValue === 'number'
+        ? sizeValue
+        : ((_g = SIZE_MAP[sizeValue]) !== null && _g !== void 0 ? _g : SIZE_MAP.md);
+    const checkColor = (_h = props.checkColor) !== null && _h !== void 0 ? _h : '#FFFFFF';
+    const uncheckedColor = (_j = props.uncheckedColor) !== null && _j !== void 0 ? _j : '#d1d5db';
+    const checkedBackgroundColor = (_k = props.checkedBackgroundColor) !== null && _k !== void 0 ? _k : '#007AFF';
+    const [isChecked, setIsChecked] = (0, react_1.useState)(defaultChecked);
+    // Register initial state
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            stateManager.updateState(`element:${component.id}.isChecked`, isChecked);
+        }
+    }, []);
+    // Subscribe to external state changes
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            return stateManager.subscribeToState(`element:${component.id}.isChecked`, (value) => {
+                if (value !== isChecked) {
+                    setIsChecked(value);
+                }
+            });
+        }
+    }, [component.id, stateManager]);
+    const handleToggle = () => {
+        if (!disabled) {
+            const newValue = !isChecked;
+            setIsChecked(newValue);
+            if (stateManager) {
+                stateManager.updateState(`element:${component.id}.isChecked`, newValue);
+            }
+        }
+    };
+    // Get variant-specific styling
+    const getCheckboxStyle = () => {
+        const baseStyle = {
+            width: size,
+            height: size,
+            borderRadius: variant === 'outlined' ? size / 2 : 4,
+        };
+        switch (variant) {
+            case 'filled':
+                return {
+                    ...baseStyle,
+                    borderColor: isChecked ? checkedBackgroundColor : uncheckedColor,
+                    backgroundColor: isChecked ? checkedBackgroundColor : uncheckedColor,
+                    borderWidth: 0,
+                };
+            case 'outlined':
+                return {
+                    ...baseStyle,
+                    borderColor: isChecked ? checkedBackgroundColor : uncheckedColor,
+                    backgroundColor: isChecked ? checkedBackgroundColor : 'transparent',
+                    borderWidth: 2,
+                };
+            default: // 'default'
+                return {
+                    ...baseStyle,
+                    borderColor: isChecked ? checkedBackgroundColor : uncheckedColor,
+                    backgroundColor: isChecked ? checkedBackgroundColor : 'transparent',
+                    borderWidth: 2,
+                };
+        }
+    };
+    const checkIconChar = (_l = CHECK_ICONS[checkIcon]) !== null && _l !== void 0 ? _l : CHECK_ICONS.check;
+    const renderCheckbox = () => (<react_native_1.View style={[styles.checkbox, getCheckboxStyle()]}>
+      {isChecked && (<react_native_1.Text style={[styles.checkmark, { fontSize: size * 0.6, color: checkColor }]}>
+          {checkIconChar}
+        </react_native_1.Text>)}
+    </react_native_1.View>);
+    const renderLabel = () => (label ? (<react_native_1.Text style={[
+            styles.label,
+            disabled && styles.disabledText,
+            labelPosition === 'left' ? styles.labelLeft : styles.labelRight
+        ]}>
+        {label}
+      </react_native_1.Text>) : null);
+    return (<react_native_1.TouchableOpacity onPress={handleToggle} disabled={disabled} activeOpacity={0.7} style={[styles.container, disabled && styles.disabled]}>
+      {labelPosition === 'left' && renderLabel()}
+      {renderCheckbox()}
+      {labelPosition === 'right' && renderLabel()}
+    </react_native_1.TouchableOpacity>);
+};
+exports.CheckboxComponent = CheckboxComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    disabled: {
+        opacity: 0.5,
+    },
+    checkbox: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    checkmark: {
+        fontWeight: 'bold',
+    },
+    label: {
+        fontSize: 16,
+    },
+    labelLeft: {
+        marginRight: 12,
+    },
+    labelRight: {
+        marginLeft: 12,
+    },
+    disabledText: {
+        color: '#999',
+    },
+});

package/dist/components/ConfettiComponent.d.ts

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