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

package/dist/LayoutEngine.d.ts

@@ -0,0 +1,101 @@
+/**
+ * Layout Engine - Converts JSON layout to React Native StyleSheet
+ *
+ * PHASE 5 SIMPLIFIED: All colors are now pre-resolved to hex by the web exporter.
+ * Removed ThemeColorResolver, CSS variable resolution, and HSL parsing.
+ */
+import { ViewStyle } from 'react-native';
+import { Layout, Appearance, Size, BorderConfig, Shadow } from './types';
+export interface CustomCSSConfig {
+    styles?: string;
+    transitions?: string;
+    animations?: string;
+}
+/**
+ * Normalize a size value from any format to { type, value }
+ */
+declare function normalizeSizeValue(size: any): {
+    type: string;
+    value?: number;
+};
+export declare class LayoutEngine {
+    /**
+     * Normalize size value (exported for external use)
+     */
+    static normalizeSizeValue: typeof normalizeSizeValue;
+    /**
+     * Convert JSON layout and size to React Native flex layout
+     */
+    static getFlexLayout(layout: Layout, size?: Size): ViewStyle;
+    /**
+     * Convert size to React Native dimensions
+     * @deprecated Use getFlexLayout with size parameter instead
+     */
+    static getSize(size: Size, layout: Layout): ViewStyle;
+    /**
+     * Parse a color value - PHASE 5 SIMPLIFIED
+     * All colors are now pre-resolved to hex by the web exporter
+     */
+    private static parseColorValue;
+    /**
+     * Convert JSON appearance to React Native ViewStyle
+     */
+    static getAppearanceStyle(appearance: Appearance): ViewStyle;
+    /**
+     * Get appearance style with border config support
+     */
+    static getAppearanceStyleWithBorder(appearance: Appearance, border?: BorderConfig): ViewStyle;
+    /**
+     * Apply shadow to style
+     */
+    static applyShadow(style: ViewStyle, shadow: Shadow): ViewStyle;
+    /**
+     * Apply border sides (top, right, bottom, left individual borders)
+     */
+    static applyBorderSides(style: ViewStyle, appearance: Appearance): ViewStyle;
+    /**
+     * Apply custom CSS styles (for native rendering)
+     */
+    static applyCustomCSS(style: ViewStyle, customCSS?: CustomCSSConfig): {
+        style: ViewStyle;
+        warnings: string[];
+    };
+    /**
+     * Validate if custom CSS can be rendered natively
+     */
+    static validateCustomCSSForNative(customCSS?: CustomCSSConfig): {
+        isValid: boolean;
+        warnings: string[];
+    };
+    /**
+     * Get container style for stack/group components
+     */
+    static getContainerStyle(layout: Layout, size: Size, appearance: Appearance, containerLayout?: {
+        direction?: string;
+        distribution?: string;
+        alignment?: string;
+        gap?: number;
+    }): ViewStyle;
+    /**
+     * Build a combined ViewStyle for a single rendered component.
+     *
+     * Composes flex layout + appearance + optional custom CSS, then layers on
+     * absolute positioning and z-index when present. This delegates to the
+     * existing helpers so runtime behavior matches the per-helper output the
+     * renderer previously relied on.
+     */
+    static getComponentStyle(layout: Layout, appearance: Appearance, size: Size, _type?: string, _properties?: Record<string, any>, absolutePosition?: {
+        x: number;
+        y: number;
+    }, zIndex?: number, customCSS?: CustomCSSConfig): ViewStyle;
+}
+export declare const ThemeColorResolver: {
+    setTheme: (_config: any) => void;
+    setResolvedColors: (_colors: any) => void;
+    clearTheme: () => void;
+    isThemingEnabled: () => boolean;
+    getThemingMode: () => "disabled";
+    resolveVariable: (_name: string) => string | undefined;
+    getDefaultVariableColor: (_name: string) => string;
+};
+export {};

package/dist/LayoutEngine.js

@@ -0,0 +1,394 @@
+"use strict";
+/**
+ * Layout Engine - Converts JSON layout to React Native StyleSheet
+ *
+ * PHASE 5 SIMPLIFIED: All colors are now pre-resolved to hex by the web exporter.
+ * Removed ThemeColorResolver, CSS variable resolution, and HSL parsing.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ThemeColorResolver = exports.LayoutEngine = void 0;
+const CSSConverter_1 = require("./utils/CSSConverter");
+/**
+ * Normalize a size value from any format to { type, value }
+ */
+function normalizeSizeValue(size) {
+    // Already normalized format
+    if (size && typeof size === 'object' && 'type' in size) {
+        // Migrate 'hug' to 'fit' for consistency
+        const type = size.type === 'hug' ? 'fit' : size.type;
+        return { type, value: size.value };
+    }
+    // Number value = fixed
+    if (typeof size === 'number') {
+        return { type: 'fixed', value: size };
+    }
+    // String value
+    if (typeof size === 'string') {
+        const lower = size.toLowerCase();
+        if (lower === 'fill' || lower === '100%')
+            return { type: 'fill' };
+        if (lower === 'fit' || lower === 'auto' || lower === 'hug')
+            return { type: 'fit' };
+        // Try to parse as number
+        const num = parseFloat(size);
+        if (!isNaN(num))
+            return { type: 'fixed', value: num };
+        return { type: 'fit' };
+    }
+    // Default
+    return { type: 'fit' };
+}
+class LayoutEngine {
+    /**
+     * Convert JSON layout and size to React Native flex layout
+     */
+    static getFlexLayout(layout, size) {
+        const style = {};
+        // Normalize size values
+        const normalizedWidth = (size === null || size === void 0 ? void 0 : size.width) ? normalizeSizeValue(size.width) : { type: 'fit' };
+        const normalizedHeight = (size === null || size === void 0 ? void 0 : size.height) ? normalizeSizeValue(size.height) : { type: 'fit' };
+        // Width handling
+        switch (normalizedWidth.type) {
+            case 'fill':
+                style.alignSelf = 'stretch';
+                style.width = '100%';
+                break;
+            case 'fixed':
+                if (normalizedWidth.value && normalizedWidth.value > 0) {
+                    style.width = normalizedWidth.value;
+                }
+                break;
+            case 'fit':
+            default:
+                break;
+        }
+        // Height handling
+        switch (normalizedHeight.type) {
+            case 'fill':
+                style.flex = 1;
+                break;
+            case 'fixed':
+                if (normalizedHeight.value && normalizedHeight.value > 0) {
+                    style.height = normalizedHeight.value;
+                }
+                break;
+            case 'fit':
+            default:
+                break;
+        }
+        // Padding
+        if (layout.padding) {
+            if (layout.padding.top !== undefined)
+                style.paddingTop = layout.padding.top;
+            if (layout.padding.right !== undefined)
+                style.paddingRight = layout.padding.right;
+            if (layout.padding.bottom !== undefined)
+                style.paddingBottom = layout.padding.bottom;
+            if (layout.padding.left !== undefined)
+                style.paddingLeft = layout.padding.left;
+        }
+        // Margin
+        if (layout.margin) {
+            if (layout.margin.top !== undefined)
+                style.marginTop = layout.margin.top;
+            if (layout.margin.right !== undefined)
+                style.marginRight = layout.margin.right;
+            if (layout.margin.bottom !== undefined)
+                style.marginBottom = layout.margin.bottom;
+            if (layout.margin.left !== undefined)
+                style.marginLeft = layout.margin.left;
+        }
+        return style;
+    }
+    /**
+     * Convert size to React Native dimensions
+     * @deprecated Use getFlexLayout with size parameter instead
+     */
+    static getSize(size, layout) {
+        const style = {};
+        const normalizedWidth = normalizeSizeValue(size.width);
+        const normalizedHeight = normalizeSizeValue(size.height);
+        // Width
+        if (normalizedWidth.type === 'fixed' && normalizedWidth.value) {
+            style.width = normalizedWidth.value;
+        }
+        else if (normalizedWidth.type === 'fill') {
+            style.width = '100%';
+        }
+        // Height
+        if (normalizedHeight.type === 'fixed' && normalizedHeight.value) {
+            style.height = normalizedHeight.value;
+        }
+        return style;
+    }
+    /**
+     * Parse a color value - PHASE 5 SIMPLIFIED
+     * All colors are now pre-resolved to hex by the web exporter
+     */
+    static parseColorValue(color) {
+        var _a, _b;
+        if (!color)
+            return undefined;
+        if (typeof color === 'string') {
+            // Handle 8-character hex colors (#RRGGBBAA format)
+            if (color.length === 9 && color.startsWith('#')) {
+                // Convert RRGGBBAA to rgba for React Native
+                const r = parseInt(color.substring(1, 3), 16);
+                const g = parseInt(color.substring(3, 5), 16);
+                const b = parseInt(color.substring(5, 7), 16);
+                const a = parseInt(color.substring(7, 9), 16) / 255;
+                return `rgba(${r}, ${g}, ${b}, ${a.toFixed(2)})`;
+            }
+            return color;
+        }
+        // Handle object format { type: 'color'|'gradient', color?: string, gradient?: {...} }
+        if (typeof color === 'object') {
+            // Check resolvedColor first (pre-computed hex from web exporter)
+            if (color.resolvedColor)
+                return this.parseColorValue(color.resolvedColor);
+            // Direct color type with nested color
+            if (color.type === 'color' && color.color) {
+                return this.parseColorValue(color.color);
+            }
+            // Gradient type - fallback to first stop color
+            if (color.type === 'gradient' && ((_b = (_a = color.gradient) === null || _a === void 0 ? void 0 : _a.stops) === null || _b === void 0 ? void 0 : _b.length)) {
+                const firstStop = color.gradient.stops[0];
+                if (firstStop === null || firstStop === void 0 ? void 0 : firstStop.color) {
+                    return this.parseColorValue(firstStop.color);
+                }
+            }
+            // Fallback fields
+            if (color.color && typeof color.color === 'string')
+                return this.parseColorValue(color.color);
+            if (color.hex)
+                return color.hex;
+            if (color.value)
+                return color.value;
+        }
+        return undefined;
+    }
+    /**
+     * Convert JSON appearance to React Native ViewStyle
+     */
+    static getAppearanceStyle(appearance) {
+        var _a;
+        const style = {};
+        // Background color - check resolvedColor first.
+        // `fill` may be a plain color string or a structured fill object; only the
+        // object branch carries resolvedColor/color, so narrow before accessing.
+        const fillObj = typeof appearance.fill === 'object' ? appearance.fill : undefined;
+        const bgColor = this.parseColorValue(fillObj === null || fillObj === void 0 ? void 0 : fillObj.resolvedColor)
+            || this.parseColorValue(fillObj === null || fillObj === void 0 ? void 0 : fillObj.color)
+            || this.parseColorValue(typeof appearance.fill === 'string' ? appearance.fill : undefined)
+            || this.parseColorValue(appearance.backgroundColor);
+        if (bgColor) {
+            style.backgroundColor = bgColor;
+        }
+        // Border radius
+        const borderRadius = (_a = appearance.cornerRadius) !== null && _a !== void 0 ? _a : appearance.borderRadius;
+        if (borderRadius !== undefined && borderRadius > 0) {
+            style.borderRadius = borderRadius;
+        }
+        // Opacity
+        if (appearance.opacity !== undefined) {
+            style.opacity = appearance.opacity;
+        }
+        // Border
+        if (appearance.borderWidth !== undefined && appearance.borderWidth > 0) {
+            style.borderWidth = appearance.borderWidth;
+            const borderColor = this.parseColorValue(appearance.borderColorResolved)
+                || this.parseColorValue(appearance.borderColor);
+            if (borderColor) {
+                style.borderColor = borderColor;
+            }
+        }
+        return style;
+    }
+    /**
+     * Get appearance style with border config support
+     */
+    static getAppearanceStyleWithBorder(appearance, border) {
+        var _a;
+        const style = this.getAppearanceStyle(appearance);
+        if (border) {
+            if (border.width !== undefined && border.width > 0) {
+                style.borderWidth = border.width;
+            }
+            // Use resolvedColor first (pre-computed hex)
+            const borderColor = border.resolvedColor || border.color;
+            if (borderColor) {
+                style.borderColor = this.parseColorValue(borderColor);
+            }
+            if (((_a = border.radius) === null || _a === void 0 ? void 0 : _a.uniform) !== undefined) {
+                style.borderRadius = border.radius.uniform;
+            }
+        }
+        return style;
+    }
+    /**
+     * Apply shadow to style
+     */
+    static applyShadow(style, shadow) {
+        var _a, _b, _c, _d;
+        const result = { ...style };
+        const shadowColor = this.parseColorValue(shadow.color);
+        if (shadowColor) {
+            result.shadowColor = shadowColor;
+        }
+        result.shadowOffset = {
+            width: (_a = shadow.x) !== null && _a !== void 0 ? _a : 0,
+            height: (_b = shadow.y) !== null && _b !== void 0 ? _b : 0,
+        };
+        result.shadowOpacity = 1;
+        result.shadowRadius = (_c = shadow.blur) !== null && _c !== void 0 ? _c : 0;
+        // Android elevation
+        result.elevation = Math.max((_d = shadow.blur) !== null && _d !== void 0 ? _d : 0, 1);
+        return result;
+    }
+    /**
+     * Apply border sides (top, right, bottom, left individual borders)
+     */
+    static applyBorderSides(style, appearance) {
+        const result = { ...style };
+        const applyBorderSide = (side, prefix) => {
+            if (!side)
+                return;
+            if (side.width !== undefined && side.width > 0) {
+                result[`border${prefix}Width`] = side.width;
+            }
+            const color = side.resolvedColor || side.color;
+            if (color) {
+                result[`border${prefix}Color`] = this.parseColorValue(color);
+            }
+        };
+        applyBorderSide(appearance.borderTop, 'Top');
+        applyBorderSide(appearance.borderRight, 'Right');
+        applyBorderSide(appearance.borderBottom, 'Bottom');
+        applyBorderSide(appearance.borderLeft, 'Left');
+        return result;
+    }
+    /**
+     * Apply custom CSS styles (for native rendering)
+     */
+    static applyCustomCSS(style, customCSS) {
+        if (!(customCSS === null || customCSS === void 0 ? void 0 : customCSS.styles)) {
+            return { style, warnings: [] };
+        }
+        const result = (0, CSSConverter_1.convertCSSToReactNative)(customCSS.styles);
+        return {
+            style: { ...style, ...result.style },
+            warnings: result.warnings,
+        };
+    }
+    /**
+     * Validate if custom CSS can be rendered natively
+     */
+    static validateCustomCSSForNative(customCSS) {
+        if (!(customCSS === null || customCSS === void 0 ? void 0 : customCSS.styles)) {
+            return { isValid: true, warnings: [] };
+        }
+        const warnings = (0, CSSConverter_1.validateCSSForNative)(customCSS.styles);
+        return { isValid: warnings.length === 0, warnings };
+    }
+    /**
+     * Get container style for stack/group components
+     */
+    static getContainerStyle(layout, size, appearance, containerLayout) {
+        const style = {
+            ...this.getFlexLayout(layout, size),
+            ...this.getAppearanceStyle(appearance),
+        };
+        if (containerLayout) {
+            // Flex direction - uses canonical 'direction' property
+            style.flexDirection = containerLayout.direction === 'horizontal' ? 'row' : 'column';
+            // Distribution (justify-content)
+            switch (containerLayout.distribution) {
+                case 'start':
+                    style.justifyContent = 'flex-start';
+                    break;
+                case 'center':
+                    style.justifyContent = 'center';
+                    break;
+                case 'end':
+                    style.justifyContent = 'flex-end';
+                    break;
+                case 'space-between':
+                    style.justifyContent = 'space-between';
+                    break;
+                case 'space-around':
+                    style.justifyContent = 'space-around';
+                    break;
+                case 'space-evenly':
+                    style.justifyContent = 'space-evenly';
+                    break;
+            }
+            // Alignment (align-items)
+            switch (containerLayout.alignment) {
+                case 'start':
+                    style.alignItems = 'flex-start';
+                    break;
+                case 'center':
+                    style.alignItems = 'center';
+                    break;
+                case 'end':
+                    style.alignItems = 'flex-end';
+                    break;
+                case 'stretch':
+                    style.alignItems = 'stretch';
+                    break;
+            }
+            // Gap
+            if (containerLayout.gap !== undefined) {
+                style.gap = containerLayout.gap;
+            }
+        }
+        return style;
+    }
+    /**
+     * Build a combined ViewStyle for a single rendered component.
+     *
+     * Composes flex layout + appearance + optional custom CSS, then layers on
+     * absolute positioning and z-index when present. This delegates to the
+     * existing helpers so runtime behavior matches the per-helper output the
+     * renderer previously relied on.
+     */
+    static getComponentStyle(layout, appearance, size, _type, _properties, absolutePosition, zIndex, customCSS) {
+        let style = {
+            ...this.getFlexLayout(layout, size),
+            ...this.getAppearanceStyle(appearance),
+        };
+        if (customCSS) {
+            style = this.applyCustomCSS(style, customCSS).style;
+        }
+        if (absolutePosition) {
+            style.position = 'absolute';
+            style.left = absolutePosition.x;
+            style.top = absolutePosition.y;
+        }
+        if (zIndex !== undefined) {
+            style.zIndex = zIndex;
+        }
+        return style;
+    }
+}
+exports.LayoutEngine = LayoutEngine;
+/**
+ * Normalize size value (exported for external use)
+ */
+LayoutEngine.normalizeSizeValue = normalizeSizeValue;
+// Export for backward compatibility
+exports.ThemeColorResolver = {
+    setTheme: (_config) => {
+        console.log('[ThemeColorResolver] Phase 5: Colors pre-resolved, theme setup skipped');
+    },
+    setResolvedColors: (_colors) => { },
+    clearTheme: () => { },
+    isThemingEnabled: () => false,
+    getThemingMode: () => 'disabled',
+    // Phase 5: colors are pre-resolved upstream, so this runtime stub performs no
+    // variable resolution. resolveVariable returns undefined (caller falls through
+    // to its own fallback) and getDefaultVariableColor returns a neutral
+    // transparent default to keep the renderer's string-typed color pipeline valid.
+    resolveVariable: (_name) => undefined,
+    getDefaultVariableColor: (_name) => 'transparent',
+};

package/dist/LocalizationResolver.d.ts

@@ -0,0 +1,99 @@
+import { PaywallConfiguration, PaywallComponent } from './types';
+/**
+ * Client-side localization resolver for React Native SDK
+ * Resolves localized text based on device locale with fallback to baseLocale
+ */
+export declare class LocalizationResolver {
+    private localizations?;
+    private baseLocale;
+    private selectedLocale;
+    constructor(localizations?: Record<string, Record<string, string>>, baseLocale?: string, explicitLocale?: string);
+    /**
+     * Get the effective locale. Precedence mirrors Android
+     * `BillDogConfig.getEffectiveLocale` (BillDogConfig.kt:150-152):
+     *   runtime locale override > device locale > "en".
+     *
+     * Public + static so callers (e.g. WebViewPaywall's locale bridge) can
+     * resolve the active locale without constructing a resolver.
+     */
+    static getEffectiveLocale(): string;
+    /** Instance accessor — defers to the canonical static resolver. */
+    private getEffectiveLocale;
+    /**
+     * Returns true when `locale`'s language belongs to a right-to-left
+     * script. Matches against the language portion only (e.g. `ar-EG` → `ar`),
+     * mirroring Android `PaywallScreen.kt:431-458`.
+     */
+    static isRtlLocale(locale: string | null | undefined): boolean;
+    /** Detect the device locale from the platform native modules. */
+    static detectDeviceLocale(): string;
+    /**
+     * Set the active locale for resolution
+     */
+    setLocale(locale: string): void;
+    /**
+     * Get the currently selected locale
+     */
+    getSelectedLocale(): string;
+    /**
+     * Get the base locale (source language)
+     */
+    getBaseLocale(): string;
+    /**
+     * Find the matching locale key using the canonical 4-step matcher.
+     * Mirrors Android `LocalizationResolver.findLocaleKey` (LocalizationResolver.kt:50-86)
+     * and iOS `LocalizationResolver.findLocaleKey` exactly:
+     *   1. exact match
+     *   2. case-insensitive match
+     *   3. separator-normalized match (en-US ↔ en_US)
+     *   4. language-only fallback (en-US → en, or en → first en-* regional)
+     */
+    private findLocaleKey;
+    /**
+     * Check if current locale is the base locale
+     */
+    isBaseLocale(): boolean;
+    /**
+     * Get available locales from the localization data
+     */
+    getAvailableLocales(): Set<string>;
+    /**
+     * Resolve a localization key to its translated value
+     * Falls back to defaultValue if translation not found
+     */
+    resolve(key: string, defaultValue: string): string;
+    /**
+     * Resolve a variable value with localization support
+     * Variable keys are prefixed with locale for lookup
+     */
+    resolveVariable(variableKey: string, defaultValue: string): string;
+    /**
+     * Resolve all localizable properties in a component.
+     *
+     * Lookup keys are componentId-prefixed (`<componentId>.<propertyName>`),
+     * matching the shape the dashboard `LocalizationPanel` writes and the
+     * Android `VariableResolver.resolveComponent` runtime path
+     * (VariableResolver.kt:124-156) + iOS `LocalizationResolver.swift:194-198`.
+     * Previously this looked up the source string itself as the key, which
+     * never matched the dashboard-authored translation maps.
+     */
+    resolveComponent(component: PaywallComponent): PaywallComponent;
+    /**
+     * Resolve all components in a configuration
+     */
+    resolveConfiguration(config: PaywallConfiguration): PaywallConfiguration;
+    /**
+     * Create resolver from PaywallConfiguration
+     * Respects global locale override from BillDogConfiguration
+     */
+    static fromConfiguration(config: PaywallConfiguration): LocalizationResolver;
+    /**
+     * Create resolver with device locale auto-detected
+     * Respects global locale override from BillDogConfiguration
+     */
+    static withDeviceLocale(config: PaywallConfiguration): LocalizationResolver;
+    /**
+     * Create resolver with specific locale (overrides global config)
+     */
+    static withLocale(config: PaywallConfiguration, locale: string): LocalizationResolver;
+}