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

package/dist/components/MultiChoiceGridComponent.js

@@ -0,0 +1,234 @@
+"use strict";
+/**
+ * Multi Choice Grid Component for React Native
+ * Checkbox style grid selection (multiple selection)
+ */
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MultiChoiceGridComponent = 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"));
+const SIZE_MAP = { sm: 16, md: 20, lg: 24 };
+// Check icon paths
+const CHECK_PATHS = {
+    check: 'M20 6L9 17L4 12',
+    cross: 'M18 6L6 18M6 6L18 18',
+    circle: 'M12 12m-8 0a8 8 0 1 0 16 0a8 8 0 1 0 -16 0',
+};
+const MultiChoiceGridComponent = ({ component, stateManager, isPreviewMode = false, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const props = component.properties || {};
+    // Parse options
+    const optionsStr = props.options || 'Option 1,Option 2,Option 3,Option 4';
+    const options = optionsStr.split(',').map((o) => o.trim()).filter(Boolean);
+    const descriptionsStr = props.optionDescriptions || '';
+    const descriptions = descriptionsStr.split(',').map((d) => d.trim());
+    // Grid settings
+    const columns = props.columns || 2;
+    const gap = parseFloat(((_a = props.gap) === null || _a === void 0 ? void 0 : _a.value) || props.gap) || 12;
+    const minItemHeight = parseFloat(((_b = props.minItemHeight) === null || _b === void 0 ? void 0 : _b.value) || props.minItemHeight) || 80;
+    // Selection settings
+    const defaultIndicesStr = props.defaultSelectedIndices || '';
+    const defaultIndices = defaultIndicesStr
+        .split(',')
+        .map((s) => parseInt(s.trim(), 10))
+        .filter((n) => !isNaN(n));
+    const minSelections = props.minSelections || 0;
+    const maxSelections = props.maxSelections || 0;
+    const disabled = (_c = props.disabled) !== null && _c !== void 0 ? _c : false;
+    // State
+    const [selectedIndices, setSelectedIndices] = (0, react_1.useState)(defaultIndices);
+    // State manager integration
+    (0, react_1.useEffect)(() => {
+        var _a, _b;
+        if (!stateManager)
+            return;
+        const stateId = `element:${component.id}.selectedIndices`;
+        (_a = stateManager.registerState) === null || _a === void 0 ? void 0 : _a.call(stateManager, stateId, selectedIndices);
+        return (_b = stateManager.subscribeToState) === null || _b === void 0 ? void 0 : _b.call(stateManager, stateId, (value) => {
+            if (JSON.stringify(value) !== JSON.stringify(selectedIndices)) {
+                setSelectedIndices(value);
+            }
+        });
+    }, [component.id, selectedIndices, stateManager]);
+    const handleSelect = (index) => {
+        var _a, _b;
+        if (disabled)
+            return;
+        let newIndices;
+        if (selectedIndices.includes(index)) {
+            if (minSelections > 0 && selectedIndices.length <= minSelections) {
+                return;
+            }
+            newIndices = selectedIndices.filter(i => i !== index);
+        }
+        else {
+            if (maxSelections > 0 && selectedIndices.length >= maxSelections) {
+                return;
+            }
+            newIndices = [...selectedIndices, index].sort((a, b) => a - b);
+        }
+        setSelectedIndices(newIndices);
+        (_a = stateManager === null || stateManager === void 0 ? void 0 : stateManager.updateState) === null || _a === void 0 ? void 0 : _a.call(stateManager, `element:${component.id}.selectedIndices`, newIndices);
+        (_b = stateManager === null || stateManager === void 0 ? void 0 : stateManager.updateState) === null || _b === void 0 ? void 0 : _b.call(stateManager, `element:${component.id}.selectedValues`, newIndices.map(i => options[i]));
+    };
+    // Styling
+    const showIndicator = (_d = props.showIndicator) !== null && _d !== void 0 ? _d : true;
+    const indicatorPosition = props.indicatorPosition || 'top-right';
+    const checkIcon = props.checkIcon || 'check';
+    const indicatorSize = SIZE_MAP[props.indicatorSize] || SIZE_MAP.md;
+    const indicatorColor = props.indicatorColor || '#ffffff';
+    const indicatorBackground = props.indicatorBackground || '#007AFF';
+    const indicatorBorderColor = props.indicatorBorderColor || '#d1d5db';
+    const cardBorderRadius = parseFloat(((_e = props.cardBorderRadius) === null || _e === void 0 ? void 0 : _e.value) || props.cardBorderRadius) || 12;
+    const cardBorderColor = props.cardBorderColor || '#e5e7eb';
+    const selectedBorderColor = props.selectedBorderColor || '#007AFF';
+    const labelFontSize = parseFloat(((_f = props.labelFontSize) === null || _f === void 0 ? void 0 : _f.value) || props.labelFontSize) || 16;
+    const labelFontWeight = String(props.labelFontWeight || '500');
+    const labelColor = props.labelColor || '#1f2937';
+    const selectedLabelColor = props.selectedLabelColor || '#007AFF';
+    const descriptionFontSize = parseFloat(((_g = props.descriptionFontSize) === null || _g === void 0 ? void 0 : _g.value) || props.descriptionFontSize) || 12;
+    const descriptionColor = props.descriptionColor || '#6b7280';
+    // Background color helper
+    const getBackgroundColor = (fill) => {
+        if (!fill)
+            return '#ffffff';
+        if (typeof fill === 'string')
+            return fill;
+        if (fill.type === 'color')
+            return fill.color || '#ffffff';
+        if (fill.resolvedColor)
+            return fill.resolvedColor;
+        return '#ffffff';
+    };
+    const cardBackground = getBackgroundColor(props.cardBackground);
+    const selectedCardBackground = getBackgroundColor(props.selectedCardBackground);
+    // Indicator position style
+    const getIndicatorPositionStyle = () => {
+        const base = { position: 'absolute' };
+        switch (indicatorPosition) {
+            case 'top-left': return { ...base, top: 8, left: 8 };
+            case 'top-right': return { ...base, top: 8, right: 8 };
+            case 'bottom-left': return { ...base, bottom: 8, left: 8 };
+            case 'bottom-right': return { ...base, bottom: 8, right: 8 };
+            default: return { ...base, top: 8, right: 8 };
+        }
+    };
+    // Calculate item width based on columns
+    const itemWidth = `${(100 - (columns - 1) * 2) / columns}%`;
+    return (<react_native_1.View style={[styles.container, { opacity: disabled ? 0.6 : 1 }]}>
+      <react_native_1.View style={[styles.grid, { gap }]}>
+        {options.map((option, index) => {
+            const isSelected = selectedIndices.includes(index);
+            const description = descriptions[index] || '';
+            return (<react_native_1.TouchableOpacity key={index} onPress={() => handleSelect(index)} disabled={disabled} activeOpacity={0.7} style={[
+                    styles.card,
+                    {
+                        width: itemWidth,
+                        minHeight: minItemHeight,
+                        backgroundColor: isSelected ? selectedCardBackground : cardBackground,
+                        borderColor: isSelected ? selectedBorderColor : cardBorderColor,
+                        borderRadius: cardBorderRadius,
+                    },
+                ]}>
+              {/* Checkbox Indicator */}
+              {showIndicator && (<react_native_1.View style={[
+                        getIndicatorPositionStyle(),
+                        {
+                            width: indicatorSize,
+                            height: indicatorSize,
+                            borderRadius: 4,
+                            borderWidth: 2,
+                            borderColor: isSelected ? indicatorBackground : indicatorBorderColor,
+                            backgroundColor: isSelected ? indicatorBackground : 'transparent',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                        },
+                    ]}>
+                  {isSelected && (<react_native_svg_1.default width={indicatorSize * 0.7} height={indicatorSize * 0.7} viewBox="0 0 24 24" fill="none">
+                      <react_native_svg_1.Path d={CHECK_PATHS[checkIcon] || CHECK_PATHS.check} stroke={indicatorColor} strokeWidth={3} strokeLinecap="round" strokeLinejoin="round"/>
+                    </react_native_svg_1.default>)}
+                </react_native_1.View>)}
+              
+              {/* Label */}
+              <react_native_1.Text style={[
+                    styles.label,
+                    {
+                        fontSize: labelFontSize,
+                        fontWeight: labelFontWeight,
+                        color: isSelected ? selectedLabelColor : labelColor,
+                    },
+                ]}>
+                {option}
+              </react_native_1.Text>
+              
+              {/* Description */}
+              {description ? (<react_native_1.Text style={[
+                        styles.description,
+                        {
+                            fontSize: descriptionFontSize,
+                            color: descriptionColor,
+                        },
+                    ]}>
+                  {description}
+                </react_native_1.Text>) : null}
+            </react_native_1.TouchableOpacity>);
+        })}
+      </react_native_1.View>
+    </react_native_1.View>);
+};
+exports.MultiChoiceGridComponent = MultiChoiceGridComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+    grid: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+    },
+    card: {
+        position: 'relative',
+        borderWidth: 2,
+        padding: 16,
+        justifyContent: 'center',
+    },
+    label: {
+        marginTop: 4,
+    },
+    description: {
+        marginTop: 4,
+    },
+});

package/dist/components/NPSScaleComponent.d.ts

@@ -0,0 +1,16 @@
+/**
+ * NPSScaleComponent - React Native
+ *
+ * Net Promoter Score scale with child-based architecture.
+ * Renders children with nps-button-* roles, applies selectedAppearance for selected state.
+ */
+import React from 'react';
+import { PaywallComponent } from '../types';
+interface NPSScaleComponentProps {
+    component: PaywallComponent;
+    stateManager?: any;
+    isPreviewMode?: boolean;
+    renderChild?: (child: PaywallComponent) => React.ReactNode;
+}
+export declare const NPSScaleComponent: React.FC<NPSScaleComponentProps>;
+export {};

package/dist/components/NPSScaleComponent.js

@@ -0,0 +1,260 @@
+"use strict";
+/**
+ * NPSScaleComponent - React Native
+ *
+ * Net Promoter Score scale with child-based architecture.
+ * Renders children with nps-button-* roles, applies selectedAppearance for selected state.
+ */
+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.NPSScaleComponent = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+// NPS Categories
+const getNPSCategory = (value, min, max) => {
+    const normalizedMax = max - min;
+    const normalizedValue = value - min;
+    const percentage = normalizedValue / normalizedMax;
+    if (percentage <= 0.6)
+        return 'detractor';
+    if (percentage <= 0.8)
+        return 'passive';
+    return 'promoter';
+};
+// Extract value from role like "nps-button-5"
+const extractValueFromRole = (role) => {
+    if (!role || !role.startsWith('nps-button-'))
+        return 0;
+    const valueStr = role.replace('nps-button-', '');
+    return parseInt(valueStr, 10) || 0;
+};
+const NPSScaleComponent = ({ component, stateManager, isPreviewMode = false, renderChild, }) => {
+    var _a, _b, _c;
+    const props = component.properties;
+    const componentId = component.id;
+    // Configuration
+    const minValue = (_a = props.minValue) !== null && _a !== void 0 ? _a : 0;
+    const maxValue = (_b = props.maxValue) !== null && _b !== void 0 ? _b : 10;
+    const defaultValue = (_c = props.defaultValue) !== null && _c !== void 0 ? _c : -1;
+    const showLabels = props.showLabels !== false;
+    const minLabel = props.minLabel || 'Not at all likely';
+    const maxLabel = props.maxLabel || 'Extremely likely';
+    const buttonGap = props.buttonGap || 4;
+    const [selectedValue, setSelectedValue] = (0, react_1.useState)(defaultValue);
+    const [animatedValues] = (0, react_1.useState)(() => Array.from({ length: maxValue - minValue + 1 }, () => new react_native_1.Animated.Value(1)));
+    // Get NPS button children sorted by value
+    const npsButtonChildren = (0, react_1.useMemo)(() => {
+        const children = component.children || [];
+        return children
+            .filter((child) => { var _a; return (_a = child.role) === null || _a === void 0 ? void 0 : _a.startsWith('nps-button-'); })
+            .sort((a, b) => {
+            const valueA = extractValueFromRole(a.role);
+            const valueB = extractValueFromRole(b.role);
+            return valueA - valueB;
+        });
+    }, [component.children]);
+    const hasChildren = npsButtonChildren.length > 0 && renderChild;
+    // Update state manager when value changes
+    (0, react_1.useEffect)(() => {
+        if (stateManager && selectedValue >= minValue) {
+            const category = getNPSCategory(selectedValue, minValue, maxValue);
+            stateManager.updateState(`element:${componentId}.score`, selectedValue);
+            stateManager.updateState(`element:${componentId}.category`, category);
+            stateManager.updateState(`element:${componentId}.isValid`, true);
+        }
+    }, [selectedValue, componentId, minValue, maxValue, stateManager]);
+    // Subscribe to external state changes
+    (0, react_1.useEffect)(() => {
+        if (stateManager) {
+            return stateManager.subscribeToState(`element:${componentId}.score`, (value) => {
+                if (value !== selectedValue) {
+                    setSelectedValue(value);
+                }
+            });
+        }
+    }, [componentId, stateManager, selectedValue]);
+    // Handle value selection
+    const handleSelect = (0, react_1.useCallback)((value, index) => {
+        // Animate button
+        react_native_1.Animated.sequence([
+            react_native_1.Animated.timing(animatedValues[index], {
+                toValue: 0.9,
+                duration: 50,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(animatedValues[index], {
+                toValue: 1.1,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+            react_native_1.Animated.timing(animatedValues[index], {
+                toValue: 1,
+                duration: 100,
+                useNativeDriver: true,
+            }),
+        ]).start();
+        setSelectedValue(value);
+    }, [animatedValues]);
+    // Apply selectedAppearance to child when selected
+    const applySelectedAppearance = (0, react_1.useCallback)((child, isSelected) => {
+        if (!isSelected || !child.selectedAppearance) {
+            return child;
+        }
+        // Create a copy with selectedAppearance merged into appearance
+        return {
+            ...child,
+            appearance: child.selectedAppearance,
+        };
+    }, []);
+    // Get styling from component.properties for fallback rendering (canonical direct properties)
+    const getSelectionStyles = (0, react_1.useCallback)(() => {
+        var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p;
+        const componentAppearance = component.appearance || {};
+        // Read from component.properties (canonical names per Property Parity Contract)
+        const buttonFill = props.buttonFill;
+        const selectedFill = props.selectedFill;
+        const buttonSize = (_a = props.buttonSize) !== null && _a !== void 0 ? _a : 40;
+        const borderRadius = (_c = (_b = componentAppearance.cornerRadius) !== null && _b !== void 0 ? _b : props.borderRadius) !== null && _c !== void 0 ? _c : 8;
+        const fontSize = (_d = props.labelFontSize) !== null && _d !== void 0 ? _d : 14;
+        // Extract colors from FillValue objects
+        const activeBackground = (_f = (_e = selectedFill === null || selectedFill === void 0 ? void 0 : selectedFill.resolvedColor) !== null && _e !== void 0 ? _e : selectedFill === null || selectedFill === void 0 ? void 0 : selectedFill.color) !== null && _f !== void 0 ? _f : '#3B82F6';
+        const inactiveBackground = (_m = (_k = (_h = (_g = buttonFill === null || buttonFill === void 0 ? void 0 : buttonFill.resolvedColor) !== null && _g !== void 0 ? _g : buttonFill === null || buttonFill === void 0 ? void 0 : buttonFill.color) !== null && _h !== void 0 ? _h : (_j = componentAppearance.fill) === null || _j === void 0 ? void 0 : _j.resolvedColor) !== null && _k !== void 0 ? _k : (_l = componentAppearance.fill) === null || _l === void 0 ? void 0 : _l.color) !== null && _m !== void 0 ? _m : '#E5E7EB';
+        const activeTextColor = (_o = props.selectedTextColor) !== null && _o !== void 0 ? _o : '#FFFFFF';
+        const inactiveTextColor = (_p = props.textColor) !== null && _p !== void 0 ? _p : '#6B7280';
+        return {
+            buttonSize,
+            borderRadius,
+            fontSize,
+            activeBackground,
+            inactiveBackground,
+            activeTextColor,
+            inactiveTextColor,
+        };
+    }, [component, props]);
+    const selectionStyles = getSelectionStyles();
+    // Render child-based buttons
+    const renderChildBasedButtons = () => {
+        return npsButtonChildren.map((child, index) => {
+            const value = extractValueFromRole(child.role);
+            const isSelected = selectedValue === value;
+            return (<react_native_1.TouchableOpacity key={child.id} onPress={() => handleSelect(value, index)} activeOpacity={0.7} style={{ marginHorizontal: buttonGap / 2 }}>
+          <react_native_1.Animated.View style={{
+                    transform: [{ scale: animatedValues[index] }],
+                }}>
+            {renderChild(applySelectedAppearance(child, isSelected))}
+          </react_native_1.Animated.View>
+        </react_native_1.TouchableOpacity>);
+        });
+    };
+    // Render fallback buttons when no children available
+    const renderFallbackButtons = () => {
+        const values = [];
+        for (let i = minValue; i <= maxValue; i++) {
+            values.push(i);
+        }
+        return values.map((value, index) => {
+            const isSelected = selectedValue === value;
+            const backgroundColor = isSelected
+                ? selectionStyles.activeBackground
+                : selectionStyles.inactiveBackground;
+            const textColor = isSelected
+                ? selectionStyles.activeTextColor
+                : selectionStyles.inactiveTextColor;
+            return (<react_native_1.TouchableOpacity key={value} onPress={() => handleSelect(value, index)} activeOpacity={0.7} style={{ marginHorizontal: buttonGap / 2 }}>
+          <react_native_1.Animated.View style={[
+                    styles.button,
+                    {
+                        width: selectionStyles.buttonSize,
+                        height: selectionStyles.buttonSize,
+                        borderRadius: selectionStyles.borderRadius,
+                        backgroundColor,
+                        transform: [{ scale: animatedValues[index] }],
+                    },
+                ]}>
+            <react_native_1.Text style={[
+                    styles.buttonText,
+                    {
+                        fontSize: selectionStyles.fontSize,
+                        color: textColor,
+                        fontWeight: isSelected ? '600' : '500',
+                    }
+                ]}>
+              {value}
+            </react_native_1.Text>
+          </react_native_1.Animated.View>
+        </react_native_1.TouchableOpacity>);
+        });
+    };
+    return (<react_native_1.View style={styles.container}>
+      {/* Scale Buttons */}
+      <react_native_1.View style={[styles.scaleContainer, { gap: buttonGap }]}>
+        {hasChildren ? renderChildBasedButtons() : renderFallbackButtons()}
+      </react_native_1.View>
+      
+      {/* Labels */}
+      {showLabels && (<react_native_1.View style={styles.labelsContainer}>
+          <react_native_1.Text style={styles.labelText}>{minLabel}</react_native_1.Text>
+          <react_native_1.Text style={styles.labelText}>{maxLabel}</react_native_1.Text>
+        </react_native_1.View>)}
+    </react_native_1.View>);
+};
+exports.NPSScaleComponent = NPSScaleComponent;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        width: '100%',
+        gap: 16,
+    },
+    scaleContainer: {
+        flexDirection: 'row',
+        flexWrap: 'wrap',
+        justifyContent: 'center',
+    },
+    button: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    buttonText: {
+        fontWeight: '500',
+    },
+    labelsContainer: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        paddingHorizontal: 4,
+    },
+    labelText: {
+        fontSize: 12,
+        color: '#6B7280',
+    },
+});

package/dist/components/NavigationComponent.d.ts

@@ -0,0 +1,26 @@
+/**
+ * NavigationComponent - React Native
+ *
+ * Multi-screen paywall navigation with state management.
+ * Features:
+ * - Page stack navigation
+ * - State integration for current page tracking
+ * - Transition animations (slide, fade, push, none)
+ * - Swipe gesture navigation
+ * - Forward/back navigation
+ * - Entry/exit condition support
+ */
+import React from 'react';
+import { PaywallComponent } from '../types';
+interface NavigationComponentProps {
+    component: PaywallComponent;
+    /** Child components to render within the navigation (defaults to component.children) */
+    children?: PaywallComponent[];
+    stateManager?: any;
+    isPreviewMode?: boolean;
+    renderComponent?: (component: PaywallComponent) => React.ReactNode;
+    /** Alias for renderComponent used by ComponentRenderer */
+    renderChild?: (child: PaywallComponent, index?: number) => React.ReactNode;
+}
+export declare const NavigationComponent: React.FC<NavigationComponentProps>;
+export {};