flowboard-react 0.1.0

package/src/Flowboard.ts

@@ -0,0 +1,223 @@
+import { Alert } from 'react-native';
+import { ClientContext } from './core/clientContext';
+import { ResolverService } from './core/resolverService';
+import { OnboardingRepository } from './core/onboardingRepository';
+import { AnalyticsManager } from './core/analyticsManager';
+import type { FlowboardData, FlowboardLaunchOptions } from './types/flowboard';
+
+export type LaunchPayload = {
+  data: FlowboardData;
+  options: FlowboardLaunchOptions;
+  initialStep: number;
+  initialFormData: Record<string, any>;
+};
+
+type LaunchListener = (payload: LaunchPayload) => void;
+
+export class Flowboard {
+  private static appId: string | null = null;
+  private static bundleId: string | null = null;
+  private static debug = false;
+  private static repository = new OnboardingRepository();
+  private static service = new ResolverService();
+  private static initPromise: Promise<void> | null = null;
+  private static listeners = new Set<LaunchListener>();
+
+  static subscribe(listener: LaunchListener): () => void {
+    Flowboard.listeners.add(listener);
+    return () => Flowboard.listeners.delete(listener);
+  }
+
+  static async init(params: {
+    appId: string;
+    bundleId: string;
+    debug?: boolean;
+    enableAnalytics?: boolean;
+  }): Promise<void> {
+    Flowboard.appId = params.appId;
+    Flowboard.bundleId = params.bundleId;
+    Flowboard.debug = params.debug ?? false;
+
+    Flowboard.log(
+      `Initialized with appId: ${Flowboard.appId}, bundleId: ${Flowboard.bundleId}`
+    );
+
+    try {
+      const clientContext = await ClientContext.create();
+      AnalyticsManager.instance.configure({
+        enabled: params.enableAnalytics ?? true,
+        context: clientContext,
+      });
+    } catch (error) {
+      Flowboard.log(`Failed to configure analytics: ${String(error)}`);
+    }
+
+    Flowboard.initPromise = Flowboard.initialize();
+  }
+
+  static async reinit(): Promise<void> {
+    Flowboard.log('Re-initializing. Clearing cache...');
+    await Flowboard.clearLocalCaches();
+    Flowboard.initPromise = Flowboard.fetchAndSave();
+    await Flowboard.initPromise;
+  }
+
+  static async launchOnboarding(
+    options: FlowboardLaunchOptions = {}
+  ): Promise<void> {
+    Flowboard.log('Attempting to launch onboarding...');
+    if (!Flowboard.appId) {
+      throw new Error(
+        'Flowboard.init() must be called before launchOnboarding'
+      );
+    }
+
+    try {
+      const context =
+        AnalyticsManager.instance.clientContextSnapshot ??
+        (await ClientContext.create());
+      AnalyticsManager.instance.configure({
+        enabled: options.enableAnalytics ?? true,
+        context,
+      });
+    } catch (error) {
+      Flowboard.log(
+        `Failed to configure analytics for launch: ${String(error)}`
+      );
+    }
+
+    let data = await Flowboard.repository.getOnboardingJson();
+
+    if (!data) {
+      Flowboard.log('Data not in cache. Waiting for initialization...');
+      if (Flowboard.initPromise) {
+        try {
+          await Flowboard.initPromise;
+        } catch (error) {
+          Flowboard.log(`Initialization failed during wait: ${String(error)}`);
+        }
+      }
+      data = await Flowboard.repository.getOnboardingJson();
+
+      if (!data) {
+        Flowboard.log('Data still null after wait. Retrying fetch...');
+        try {
+          await Flowboard.fetchAndSave();
+          data = await Flowboard.repository.getOnboardingJson();
+        } catch (error) {
+          Flowboard.log(`Retry fetch failed: ${String(error)}`);
+          Alert.alert('Failed to load onboarding', String(error));
+          return;
+        }
+      }
+    }
+
+    if (!data) {
+      Flowboard.log('Failed to launch: Data is null.');
+      return;
+    }
+
+    if (options.alwaysRestart) {
+      await Flowboard.repository.clearProgress();
+    }
+
+    let initialStep = 0;
+    let initialFormData: Record<string, any> = {};
+
+    if (!options.alwaysRestart) {
+      const flowId = data.flow_id as string | undefined;
+      if (flowId) {
+        const savedStep = await Flowboard.repository.getProgressStepForFlow(
+          flowId
+        );
+        const savedFormData =
+          await Flowboard.repository.getProgressFormDataForFlow(flowId);
+        if (savedStep !== null && savedStep !== undefined) {
+          const screens = Array.isArray(data.screens) ? data.screens : [];
+          if (screens.length > 0) {
+            const maxIndex = screens.length - 1;
+            if (savedStep <= 0) initialStep = 0;
+            else if (savedStep >= screens.length) initialStep = maxIndex;
+            else initialStep = savedStep;
+          }
+        }
+        if (savedFormData && Object.keys(savedFormData).length > 0) {
+          initialFormData = { ...savedFormData };
+        }
+      }
+    }
+
+    Flowboard.log(`Launching onboarding flow. ${data.flow_id ?? ''}`);
+    Flowboard.emitLaunch({
+      data,
+      options,
+      initialStep,
+      initialFormData,
+    });
+  }
+
+  private static async initialize(): Promise<void> {
+    Flowboard.log('Checking local cache...');
+    const cached = await Flowboard.repository.getOnboardingJson();
+    if (cached) {
+      Flowboard.log('Onboarding data found in cache.');
+      AnalyticsManager.instance.startSession({ flowData: cached });
+      return;
+    }
+
+    Flowboard.log('No cached data found. Fetching from remote...');
+    await Flowboard.fetchAndSave();
+  }
+
+  private static async fetchAndSave(): Promise<void> {
+    const startTime = Date.now();
+    if (!Flowboard.appId || !Flowboard.bundleId) {
+      throw new Error(
+        'Flowboard not initialized. Call Flowboard.init() first.'
+      );
+    }
+
+    try {
+      const context = await ClientContext.create();
+      Flowboard.log(
+        `Fetching onboarding JSON for installId: ${context.installId} | appId: ${Flowboard.appId} | bundleId: ${Flowboard.bundleId}`
+      );
+
+      const json = await Flowboard.service.fetchOnboardingJson({
+        context,
+        appId: Flowboard.appId,
+      });
+
+      Flowboard.log('Fetch successful. Saving to cache.');
+      await Flowboard.repository.saveOnboardingJson(json);
+
+      AnalyticsManager.instance.startSession({ flowData: json });
+
+      const duration = Date.now() - startTime;
+      AnalyticsManager.instance.trackOnboardLoaded({
+        durationMs: duration,
+        cached: false,
+      });
+    } catch (error) {
+      Flowboard.log(`Error fetching onboarding data: ${String(error)}`);
+      throw error;
+    }
+  }
+
+  private static async clearLocalCaches(): Promise<void> {
+    await Promise.all([
+      Flowboard.repository.clearProgress(),
+      Flowboard.repository.clearOnboardingJson(),
+    ]);
+  }
+
+  private static emitLaunch(payload: LaunchPayload): void {
+    Flowboard.listeners.forEach((listener) => listener(payload));
+  }
+
+  private static log(message: string): void {
+    if (Flowboard.debug) {
+      console.log(`\u{1F30A} Flowboard - ${message}`);
+    }
+  }
+}

package/src/FlowboardProvider.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, StyleSheet, View } from 'react-native';
+import { Flowboard, type LaunchPayload } from './Flowboard';
+import FlowboardFlow from './components/FlowboardFlow';
+
+const styles = StyleSheet.create({
+  modalContainer: {
+    flex: 1,
+    backgroundColor: 'transparent',
+  },
+});
+
+export default function FlowboardProvider({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  const [payload, setPayload] = useState<LaunchPayload | null>(null);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    const unsubscribe = Flowboard.subscribe((nextPayload) => {
+      setPayload(nextPayload);
+      setVisible(true);
+    });
+    return unsubscribe;
+  }, []);
+
+  const handleClose = () => {
+    setVisible(false);
+    setPayload(null);
+  };
+
+  return (
+    <>
+      {children}
+      <Modal
+        visible={visible}
+        animationType="slide"
+        transparent
+        onRequestClose={handleClose}
+      >
+        <View style={styles.modalContainer}>
+          {payload ? (
+            <FlowboardFlow
+              data={payload.data}
+              customScreenBuilder={payload.options.customScreenBuilder}
+              customActionBuilder={payload.options.customActionBuilder}
+              onOnboardEnd={payload.options.onOnboardEnd}
+              onStepChange={payload.options.onStepChange}
+              initialStep={payload.initialStep}
+              initialFormData={payload.initialFormData}
+              onClose={handleClose}
+            />
+          ) : null}
+        </View>
+      </Modal>
+    </>
+  );
+}

package/src/NativeFlowboardReact.ts

@@ -0,0 +1,7 @@
+import { TurboModuleRegistry, type TurboModule } from 'react-native';
+
+export interface Spec extends TurboModule {
+  multiply(a: number, b: number): number;
+}
+
+export default TurboModuleRegistry.getEnforcing<Spec>('FlowboardReact');