noboarding 1.0.3-beta → 1.0.6-beta

package/lib/OnboardingFlow.js

@@ -96,6 +96,7 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
     const [loading, setLoading] = (0, react_1.useState)(true);
     const [error, setError] = (0, react_1.useState)(null);
     const [screens, setScreens] = (0, react_1.useState)([]);
+    const [assets, setAssets] = (0, react_1.useState)([]);
     const [currentIndex, setCurrentIndex] = (0, react_1.useState)(0);
     const [collectedData, setCollectedData] = (0, react_1.useState)({});
     const [variables, setVariables] = (0, react_1.useState)(initialVariables || {});
@@ -136,7 +137,7 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
         }
     }, [currentIndex, screens]);
     const initializeFlow = async () => {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g;
         try {
             setLoading(true);
             setError(null);
@@ -154,6 +155,10 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
             const configResponse = await api.getConfig();
             // Store flow_id for analytics
             flowIdRef.current = configResponse.config_id;
+            // Store assets from config
+            if (configResponse.config.assets) {
+                setAssets(configResponse.config.assets);
+            }
             // Handle A/B test experiment assignment
             let screensToUse = configResponse.config.screens;
             if (configResponse.experiments && configResponse.experiments.length > 0) {
@@ -161,11 +166,23 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
                 const experiment = configResponse.experiments[0];
                 try {
                     const assignment = await api.assignVariant(experiment.id, userIdRef.current);
+                    console.log('🧪 A/B Test Assignment:', {
+                        experiment_id: experiment.id,
+                        experiment_name: experiment.name,
+                        variant_id: assignment.variant_id,
+                        has_variant_screens: ((_b = (_a = assignment.variant_config) === null || _a === void 0 ? void 0 : _a.screens) === null || _b === void 0 ? void 0 : _b.length) > 0,
+                        variant_screen_count: ((_d = (_c = assignment.variant_config) === null || _c === void 0 ? void 0 : _c.screens) === null || _d === void 0 ? void 0 : _d.length) || 0,
+                        cached: assignment.cached,
+                    });
                     // Set experiment context so all events get tagged
                     analytics.setExperimentContext(experiment.id, assignment.variant_id);
                     // Use variant screens if available
-                    if (((_b = (_a = assignment.variant_config) === null || _a === void 0 ? void 0 : _a.screens) === null || _b === void 0 ? void 0 : _b.length) > 0) {
+                    if (((_f = (_e = assignment.variant_config) === null || _e === void 0 ? void 0 : _e.screens) === null || _f === void 0 ? void 0 : _f.length) > 0) {
                         screensToUse = assignment.variant_config.screens;
+                        console.log('📱 Using variant screens:', assignment.variant_config.screens.length, 'screens');
+                    }
+                    else {
+                        console.log('📱 Using base flow screens (variant has no screens defined)');
                     }
                 }
                 catch (err) {
@@ -181,7 +198,7 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
             // Track onboarding start with first screen
             analytics.track('onboarding_started', {
                 flow_id: flowIdRef.current,
-                screen_id: (_c = normalizedScreens[0]) === null || _c === void 0 ? void 0 : _c.id,
+                screen_id: (_g = normalizedScreens[0]) === null || _g === void 0 ? void 0 : _g.id,
             });
             setLoading(false);
         }
@@ -302,7 +319,7 @@ const OnboardingFlow = ({ apiKey, testKey, productionKey, onComplete, onSkip, ba
             }
         };
         return (<react_native_1.View style={styles.container}>
-        <ElementRenderer_1.ElementRenderer elements={currentScreen.elements} analytics={analyticsRef.current} screenId={currentScreen.id} onNavigate={handleElementNavigate} onDismiss={onSkip ? handleSkipAll : handleNext} variables={allVariables} onSetVariable={handleSetVariable}/>
+        <ElementRenderer_1.ElementRenderer elements={currentScreen.elements} analytics={analyticsRef.current} screenId={currentScreen.id} onNavigate={handleElementNavigate} onDismiss={onSkip ? handleSkipAll : handleNext} variables={allVariables} onSetVariable={handleSetVariable} assets={assets}/>
       </react_native_1.View>);
     }
     // Handle custom_screen type — developer-registered React Native components

package/lib/animationUtils.d.ts

@@ -0,0 +1,19 @@
+import { Animated } from 'react-native';
+import type { EntranceAnimation, InteractiveAnimation, HapticType } from './types';
+export declare const triggerHaptic: (type?: HapticType) => void;
+export declare const getEasing: (easingType?: string) => import("react-native").EasingFunction;
+export interface EntranceAnimationValues {
+    opacity: Animated.Value;
+    translateY: Animated.Value;
+    translateX: Animated.Value;
+    scale: Animated.Value;
+}
+export declare const createEntranceAnimationValues: () => EntranceAnimationValues;
+export declare const startEntranceAnimation: (config: EntranceAnimation, values: EntranceAnimationValues, delay?: number) => void;
+export declare const startInteractiveAnimation: (config: InteractiveAnimation, animatedValue: Animated.Value) => void;
+export interface TypewriterState {
+    displayedText: string;
+    currentIndex: number;
+    isComplete: boolean;
+}
+export declare const shouldTriggerHaptic: (index: number, frequency: string) => boolean;

package/lib/animationUtils.js

@@ -0,0 +1,252 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.shouldTriggerHaptic = exports.startInteractiveAnimation = exports.startEntranceAnimation = exports.createEntranceAnimationValues = exports.getEasing = exports.triggerHaptic = void 0;
+const react_native_1 = require("react-native");
+// Lazy load haptics to avoid errors if not installed
+let Haptics = null;
+try {
+    Haptics = require('expo-haptics');
+}
+catch (e) {
+    console.warn('expo-haptics not installed, haptic feedback will be disabled');
+}
+// ─── Haptic Feedback Helper ───
+const triggerHaptic = (type = 'light') => {
+    if (!Haptics) {
+        // Silently skip if expo-haptics not available
+        return;
+    }
+    try {
+        switch (type) {
+            case 'light':
+                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+                break;
+            case 'medium':
+                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+                break;
+            case 'heavy':
+                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
+                break;
+            case 'success':
+                Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+                break;
+            case 'warning':
+                Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
+                break;
+            case 'error':
+                Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+                break;
+        }
+    }
+    catch (error) {
+        console.warn('Haptic feedback failed:', error);
+    }
+};
+exports.triggerHaptic = triggerHaptic;
+// ─── Easing Function Mapper ───
+const getEasing = (easingType) => {
+    switch (easingType) {
+        case 'linear':
+            return react_native_1.Easing.linear;
+        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.inOut(react_native_1.Easing.ease);
+    }
+};
+exports.getEasing = getEasing;
+const createEntranceAnimationValues = () => ({
+    opacity: new react_native_1.Animated.Value(0),
+    translateY: new react_native_1.Animated.Value(0),
+    translateX: new react_native_1.Animated.Value(0),
+    scale: new react_native_1.Animated.Value(1),
+});
+exports.createEntranceAnimationValues = createEntranceAnimationValues;
+const startEntranceAnimation = (config, values, delay = 0) => {
+    const duration = config.duration || 400;
+    const totalDelay = (config.delay || 0) + delay;
+    const easing = (0, exports.getEasing)(config.easing);
+    // Set initial values based on animation type
+    switch (config.type) {
+        case 'fadeIn':
+            values.opacity.setValue(0);
+            break;
+        case 'slideUp':
+            values.opacity.setValue(0);
+            values.translateY.setValue(30);
+            break;
+        case 'slideDown':
+            values.opacity.setValue(0);
+            values.translateY.setValue(-30);
+            break;
+        case 'slideLeft':
+            values.opacity.setValue(0);
+            values.translateX.setValue(30);
+            break;
+        case 'slideRight':
+            values.opacity.setValue(0);
+            values.translateX.setValue(-30);
+            break;
+        case 'scaleIn':
+            values.opacity.setValue(0);
+            values.scale.setValue(0.8);
+            break;
+        case 'none':
+            values.opacity.setValue(1);
+            return;
+    }
+    // Animate to final values
+    react_native_1.Animated.parallel([
+        react_native_1.Animated.timing(values.opacity, {
+            toValue: 1,
+            duration,
+            delay: totalDelay,
+            easing,
+            useNativeDriver: true,
+        }),
+        react_native_1.Animated.timing(values.translateY, {
+            toValue: 0,
+            duration,
+            delay: totalDelay,
+            easing,
+            useNativeDriver: true,
+        }),
+        react_native_1.Animated.timing(values.translateX, {
+            toValue: 0,
+            duration,
+            delay: totalDelay,
+            easing,
+            useNativeDriver: true,
+        }),
+        react_native_1.Animated.timing(values.scale, {
+            toValue: 1,
+            duration,
+            delay: totalDelay,
+            easing,
+            useNativeDriver: true,
+        }),
+    ]).start();
+};
+exports.startEntranceAnimation = startEntranceAnimation;
+// ─── Interactive Animations ───
+const startInteractiveAnimation = (config, animatedValue) => {
+    const duration = config.duration || 200;
+    const intensity = config.intensity || (config.type === 'scale' ? 0.95 : 10);
+    // Trigger haptic if enabled
+    if (config.haptic && config.hapticType) {
+        (0, exports.triggerHaptic)(config.hapticType);
+    }
+    switch (config.type) {
+        case 'scale':
+            react_native_1.Animated.sequence([
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: intensity,
+                    duration: duration / 2,
+                    easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: 1,
+                    duration: duration / 2,
+                    easing: react_native_1.Easing.in(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+            ]).start();
+            break;
+        case 'pulse':
+            const pulseSequence = react_native_1.Animated.sequence([
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: 1.05,
+                    duration: duration,
+                    easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: 1,
+                    duration: duration,
+                    easing: react_native_1.Easing.inOut(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+            ]);
+            if (config.repeat) {
+                react_native_1.Animated.loop(pulseSequence).start();
+            }
+            else {
+                pulseSequence.start();
+            }
+            break;
+        case 'shake':
+            react_native_1.Animated.sequence([
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: intensity,
+                    duration: duration / 8,
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: -intensity,
+                    duration: duration / 4,
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: intensity,
+                    duration: duration / 4,
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: -intensity,
+                    duration: duration / 4,
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: 0,
+                    duration: duration / 8,
+                    useNativeDriver: true,
+                }),
+            ]).start();
+            break;
+        case 'bounce':
+            react_native_1.Animated.sequence([
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: -20,
+                    duration: duration / 3,
+                    easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: 5,
+                    duration: duration / 3,
+                    easing: react_native_1.Easing.in(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+                react_native_1.Animated.timing(animatedValue, {
+                    toValue: 0,
+                    duration: duration / 3,
+                    easing: react_native_1.Easing.out(react_native_1.Easing.ease),
+                    useNativeDriver: true,
+                }),
+            ]).start();
+            break;
+    }
+};
+exports.startInteractiveAnimation = startInteractiveAnimation;
+const shouldTriggerHaptic = (index, frequency) => {
+    switch (frequency) {
+        case 'every':
+            return true;
+        case 'every-2':
+            return index % 2 === 0;
+        case 'every-3':
+            return index % 3 === 0;
+        case 'every-5':
+            return index % 5 === 0;
+        default:
+            return false;
+    }
+};
+exports.shouldTriggerHaptic = shouldTriggerHaptic;

package/lib/components/ElementRenderer.d.ts

@@ -8,6 +8,11 @@ interface ElementRendererProps {
     onDismiss?: () => void;
     variables?: Record<string, any>;
     onSetVariable?: (name: string, value: any) => void;
+    assets?: Array<{
+        name: string;
+        type: string;
+        data: string;
+    }>;
 }
 export declare const ElementRenderer: React.FC<ElementRendererProps>;
 export {};