noboarding 0.1.0-alpha

package/lib/OnboardingFlow.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { OnboardingFlowProps } from './types';
+export declare const OnboardingFlow: React.FC<OnboardingFlowProps>;

package/lib/OnboardingFlow.js

@@ -0,0 +1,235 @@
+"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.OnboardingFlow = void 0;
+const react_1 = __importStar(require("react"));
+const react_native_1 = require("react-native");
+const api_1 = require("./api");
+const analytics_1 = require("./analytics");
+const variableUtils_1 = require("./variableUtils");
+const ElementRenderer_1 = require("./components/ElementRenderer");
+// Generate unique IDs
+const generateUserId = () => {
+    return `user_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+};
+const generateSessionId = () => {
+    return `session_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
+};
+const OnboardingFlow = ({ apiKey, onComplete, onSkip, baseUrl, initialVariables, customComponents, onUserIdGenerated, }) => {
+    const [loading, setLoading] = (0, react_1.useState)(true);
+    const [error, setError] = (0, react_1.useState)(null);
+    const [screens, setScreens] = (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 || {});
+    const apiRef = (0, react_1.useRef)(null);
+    const analyticsRef = (0, react_1.useRef)(null);
+    const userIdRef = (0, react_1.useRef)(generateUserId());
+    const sessionIdRef = (0, react_1.useRef)(generateSessionId());
+    (0, react_1.useEffect)(() => {
+        // Notify parent of the generated user ID
+        if (onUserIdGenerated) {
+            onUserIdGenerated(userIdRef.current);
+        }
+        initializeFlow();
+        return () => {
+            // Cleanup: flush remaining analytics
+            if (analyticsRef.current) {
+                analyticsRef.current.destroy();
+            }
+        };
+    }, []);
+    const initializeFlow = async () => {
+        try {
+            setLoading(true);
+            setError(null);
+            // Initialize API client
+            const api = new api_1.API(apiKey, baseUrl);
+            apiRef.current = api;
+            // Initialize analytics
+            const analytics = new analytics_1.AnalyticsManager(api, userIdRef.current, sessionIdRef.current);
+            analyticsRef.current = analytics;
+            // Track onboarding start
+            analytics.track('onboarding_started');
+            // Fetch configuration
+            const configResponse = await api.getConfig();
+            // Backward compatibility: normalize legacy 'custom_screen' (with elements) to 'noboard_screen'
+            const normalizedScreens = configResponse.config.screens.map(s => (Object.assign(Object.assign({}, s), { type: (s.type === 'custom_screen' && s.elements) ? 'noboard_screen' : s.type })));
+            setScreens(normalizedScreens);
+            setLoading(false);
+        }
+        catch (err) {
+            console.error('Failed to initialize onboarding flow:', err);
+            setError('Failed to load onboarding. Please try again.');
+            setLoading(false);
+        }
+    };
+    const handleNext = (data) => {
+        // Collect data from this screen
+        if (data) {
+            setCollectedData((prev) => (Object.assign(Object.assign({}, prev), data)));
+        }
+        // Check if this is the last screen
+        if (currentIndex >= screens.length - 1) {
+            handleComplete(data);
+        }
+        else {
+            setCurrentIndex((prev) => prev + 1);
+        }
+    };
+    const handleSkipScreen = () => {
+        // Move to next screen or complete
+        if (currentIndex >= screens.length - 1) {
+            handleComplete();
+        }
+        else {
+            setCurrentIndex((prev) => prev + 1);
+        }
+    };
+    const handleSetVariable = (0, react_1.useCallback)((name, value) => {
+        setVariables(prev => (Object.assign(Object.assign({}, prev), { [name]: value })));
+    }, []);
+    const handleComplete = async (lastScreenData) => {
+        const finalData = Object.assign(Object.assign(Object.assign({}, collectedData), (lastScreenData || {})), { _variables: variables });
+        // Track completion
+        if (analyticsRef.current) {
+            analyticsRef.current.track('onboarding_completed');
+            await analyticsRef.current.flush();
+        }
+        // Call developer's completion callback with collected data
+        onComplete(finalData);
+    };
+    const handleSkipAll = async () => {
+        if (analyticsRef.current) {
+            analyticsRef.current.track('onboarding_abandoned', {
+                current_screen_index: currentIndex,
+            });
+            await analyticsRef.current.flush();
+        }
+        if (onSkip) {
+            onSkip();
+        }
+    };
+    if (loading) {
+        return (<react_native_1.View style={styles.centerContainer}>
+        <react_native_1.ActivityIndicator size="large" color="#007AFF"/>
+        <react_native_1.Text style={styles.loadingText}>Loading...</react_native_1.Text>
+      </react_native_1.View>);
+    }
+    if (error) {
+        return (<react_native_1.View style={styles.centerContainer}>
+        <react_native_1.Text style={styles.errorText}>{error}</react_native_1.Text>
+      </react_native_1.View>);
+    }
+    if (screens.length === 0) {
+        return (<react_native_1.View style={styles.centerContainer}>
+        <react_native_1.Text style={styles.errorText}>No onboarding screens configured</react_native_1.Text>
+      </react_native_1.View>);
+    }
+    const currentScreen = screens[currentIndex];
+    // Handle noboard_screen type — render with ElementRenderer
+    if (currentScreen.type === 'noboard_screen' && currentScreen.elements) {
+        const handleElementNavigate = (destination) => {
+            const resolved = (0, variableUtils_1.resolveDestination)(destination, variables);
+            if (!resolved)
+                return;
+            if (resolved === 'next') {
+                handleNext();
+            }
+            else if (resolved === 'previous') {
+                setCurrentIndex((prev) => Math.max(0, prev - 1));
+            }
+            else {
+                // Navigate to specific screen by ID
+                const targetIndex = screens.findIndex((s) => s.id === resolved);
+                if (targetIndex >= 0) {
+                    setCurrentIndex(targetIndex);
+                }
+                else {
+                    handleNext();
+                }
+            }
+        };
+        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={variables} onSetVariable={handleSetVariable}/>
+      </react_native_1.View>);
+    }
+    // Handle custom_screen type — developer-registered React Native components
+    if (currentScreen.type === 'custom_screen') {
+        const componentName = currentScreen.custom_component_name;
+        const CustomComponent = customComponents === null || customComponents === void 0 ? void 0 : customComponents[componentName || ''];
+        if (!CustomComponent) {
+            return (<react_native_1.View style={styles.centerContainer}>
+          <react_native_1.Text style={styles.errorText}>
+            Component "{componentName}" not found.
+          </react_native_1.Text>
+          <react_native_1.TouchableOpacity style={{ marginTop: 16, padding: 12 }} onPress={() => handleNext()}>
+            <react_native_1.Text style={{ color: '#007AFF', fontSize: 16 }}>Skip</react_native_1.Text>
+          </react_native_1.TouchableOpacity>
+        </react_native_1.View>);
+        }
+        return (<react_native_1.View style={styles.container}>
+        <CustomComponent analytics={analyticsRef.current} onNext={() => handleNext()} onSkip={onSkip ? handleSkipAll : undefined} data={collectedData} onDataUpdate={(newData) => setCollectedData(prev => (Object.assign(Object.assign({}, prev), newData)))}/>
+      </react_native_1.View>);
+    }
+    // Unknown screen type fallback
+    return (<react_native_1.View style={styles.centerContainer}>
+      <react_native_1.Text style={styles.errorText}>
+        Unknown screen type: "{currentScreen.type}"
+      </react_native_1.Text>
+    </react_native_1.View>);
+};
+exports.OnboardingFlow = OnboardingFlow;
+const styles = react_native_1.StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    centerContainer: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        padding: 24,
+    },
+    loadingText: {
+        marginTop: 16,
+        fontSize: 16,
+        color: '#000000',
+    },
+    errorText: {
+        fontSize: 16,
+        color: '#FF3B30',
+        textAlign: 'center',
+    },
+});

package/lib/analytics.d.ts

@@ -0,0 +1,25 @@
+import { API } from './api';
+export declare class AnalyticsManager {
+    private api;
+    private events;
+    private userId;
+    private sessionId;
+    private flushTimer;
+    constructor(api: API, userId: string, sessionId: string);
+    /**
+     * Track an analytics event
+     */
+    track(eventName: string, properties?: Record<string, any>): void;
+    /**
+     * Manually flush events to backend
+     */
+    flush(): Promise<void>;
+    /**
+     * Start auto-flush timer
+     */
+    private startFlushTimer;
+    /**
+     * Stop auto-flush timer and flush remaining events
+     */
+    destroy(): Promise<void>;
+}

package/lib/analytics.js

@@ -0,0 +1,72 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.AnalyticsManager = void 0;
+const BATCH_SIZE = 10;
+const FLUSH_INTERVAL_MS = 10000; // 10 seconds
+class AnalyticsManager {
+    constructor(api, userId, sessionId) {
+        this.events = [];
+        this.flushTimer = null;
+        this.api = api;
+        this.userId = userId;
+        this.sessionId = sessionId;
+        // Start auto-flush timer
+        this.startFlushTimer();
+    }
+    /**
+     * Track an analytics event
+     */
+    track(eventName, properties) {
+        const event = {
+            event: eventName,
+            user_id: this.userId,
+            session_id: this.sessionId,
+            timestamp: Date.now(),
+            properties: properties || {},
+        };
+        this.events.push(event);
+        // Auto-flush if batch size reached
+        if (this.events.length >= BATCH_SIZE) {
+            this.flush();
+        }
+    }
+    /**
+     * Manually flush events to backend
+     */
+    async flush() {
+        if (this.events.length === 0) {
+            return;
+        }
+        // Take current events and clear queue
+        const eventsToSend = [...this.events];
+        this.events = [];
+        try {
+            await this.api.trackEvents(eventsToSend);
+            console.log(`Flushed ${eventsToSend.length} events`);
+        }
+        catch (error) {
+            console.error('Failed to flush events:', error);
+            // Put events back in queue to retry later
+            this.events.unshift(...eventsToSend);
+        }
+    }
+    /**
+     * Start auto-flush timer
+     */
+    startFlushTimer() {
+        this.flushTimer = setInterval(() => {
+            this.flush();
+        }, FLUSH_INTERVAL_MS);
+    }
+    /**
+     * Stop auto-flush timer and flush remaining events
+     */
+    async destroy() {
+        if (this.flushTimer) {
+            clearInterval(this.flushTimer);
+            this.flushTimer = null;
+        }
+        await this.flush();
+    }
+}
+exports.AnalyticsManager = AnalyticsManager;

package/lib/api.d.ts

@@ -0,0 +1,31 @@
+import { GetConfigResponse, AnalyticsEvent, TrackEventsResponse, AssignVariantResponse } from './types';
+export declare class API {
+    private apiKey;
+    private baseUrl;
+    private supabaseAnonKey;
+    constructor(apiKey: string, baseUrl?: string);
+    /**
+     * Fetch onboarding configuration from API
+     */
+    getConfig(): Promise<GetConfigResponse>;
+    /**
+     * Get cached configuration
+     */
+    getCachedConfig(): Promise<GetConfigResponse | null>;
+    /**
+     * Cache configuration locally
+     */
+    private cacheConfig;
+    /**
+     * Send analytics events to backend
+     */
+    trackEvents(events: AnalyticsEvent[]): Promise<TrackEventsResponse>;
+    /**
+     * Get A/B test variant assignment
+     */
+    assignVariant(experimentId: string, userId: string): Promise<AssignVariantResponse>;
+    /**
+     * Clear cached config
+     */
+    clearCache(): Promise<void>;
+}

package/lib/api.js

@@ -0,0 +1,149 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.API = void 0;
+const async_storage_1 = __importDefault(require("@react-native-async-storage/async-storage"));
+const CACHE_KEY = '@noboarding:config';
+const CACHE_EXPIRY_MS = 60 * 60 * 1000; // 1 hour
+class API {
+    constructor(apiKey, baseUrl) {
+        this.supabaseAnonKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImhobW16bXJzcHRlZ3ByZnp0cXRxIiwicm9sZSI6ImFub24iLCJpYXQiOjE3NzA3ODM1MDUsImV4cCI6MjA4NjM1OTUwNX0.otIIs3ZyWTHTnDZ1NbZolzeHjWv__wmHekxZevhKryI';
+        this.apiKey = apiKey;
+        this.baseUrl = baseUrl || 'https://hhmmzmrsptegprfztqtq.supabase.co/functions/v1';
+    }
+    /**
+     * Fetch onboarding configuration from API
+     */
+    async getConfig() {
+        try {
+            const response = await fetch(`${this.baseUrl}/get-config`, {
+                method: 'GET',
+                headers: {
+                    'Authorization': `Bearer ${this.supabaseAnonKey}`,
+                    'x-api-key': this.apiKey,
+                    'Content-Type': 'application/json',
+                },
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to fetch config: ${response.status}`);
+            }
+            const data = await response.json();
+            // Cache the config
+            await this.cacheConfig(data);
+            return data;
+        }
+        catch (error) {
+            console.error('Error fetching config:', error);
+            // Try to return cached config as fallback
+            const cached = await this.getCachedConfig();
+            if (cached) {
+                console.log('Using cached config as fallback');
+                return cached;
+            }
+            throw error;
+        }
+    }
+    /**
+     * Get cached configuration
+     */
+    async getCachedConfig() {
+        try {
+            const cached = await async_storage_1.default.getItem(CACHE_KEY);
+            if (!cached) {
+                return null;
+            }
+            const parsedCache = JSON.parse(cached);
+            const now = Date.now();
+            // Check if cache is expired
+            if (now - parsedCache.timestamp > CACHE_EXPIRY_MS) {
+                await async_storage_1.default.removeItem(CACHE_KEY);
+                return null;
+            }
+            return parsedCache.config;
+        }
+        catch (error) {
+            console.error('Error reading cached config:', error);
+            return null;
+        }
+    }
+    /**
+     * Cache configuration locally
+     */
+    async cacheConfig(config) {
+        try {
+            const cacheData = {
+                config,
+                timestamp: Date.now(),
+            };
+            await async_storage_1.default.setItem(CACHE_KEY, JSON.stringify(cacheData));
+        }
+        catch (error) {
+            console.error('Error caching config:', error);
+        }
+    }
+    /**
+     * Send analytics events to backend
+     */
+    async trackEvents(events) {
+        try {
+            const response = await fetch(`${this.baseUrl}/track-events`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${this.supabaseAnonKey}`,
+                    'x-api-key': this.apiKey,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({ events }),
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to track events: ${response.status}`);
+            }
+            return await response.json();
+        }
+        catch (error) {
+            console.error('Error tracking events:', error);
+            throw error;
+        }
+    }
+    /**
+     * Get A/B test variant assignment
+     */
+    async assignVariant(experimentId, userId) {
+        try {
+            const response = await fetch(`${this.baseUrl}/assign-variant`, {
+                method: 'POST',
+                headers: {
+                    'Authorization': `Bearer ${this.supabaseAnonKey}`,
+                    'x-api-key': this.apiKey,
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify({
+                    experiment_id: experimentId,
+                    user_id: userId,
+                }),
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to assign variant: ${response.status}`);
+            }
+            return await response.json();
+        }
+        catch (error) {
+            console.error('Error assigning variant:', error);
+            throw error;
+        }
+    }
+    /**
+     * Clear cached config
+     */
+    async clearCache() {
+        try {
+            await async_storage_1.default.removeItem(CACHE_KEY);
+        }
+        catch (error) {
+            console.error('Error clearing cache:', error);
+        }
+    }
+}
+exports.API = API;

package/lib/components/ElementRenderer.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ElementNode, Analytics, ConditionalDestination, ConditionalRoutes } from '../types';
+interface ElementRendererProps {
+    elements: ElementNode[];
+    analytics?: Analytics;
+    screenId?: string;
+    onNavigate?: (destination: string | ConditionalDestination | ConditionalRoutes) => void;
+    onDismiss?: () => void;
+    variables?: Record<string, any>;
+    onSetVariable?: (name: string, value: any) => void;
+}
+export declare const ElementRenderer: React.FC<ElementRendererProps>;
+export {};