flowboard-react 0.1.0

package/src/components/widgets/sliderRegistry.tsx

@@ -0,0 +1,56 @@
+import React, { createContext, useContext } from 'react';
+
+export class SliderRegistry {
+  private current = new Map<string, number>();
+  private counts = new Map<string, number>();
+  private listeners = new Map<string, Set<(value: number) => void>>();
+
+  getNotifier(id: string, callback: (value: number) => void): () => void {
+    if (!this.listeners.has(id)) {
+      this.listeners.set(id, new Set());
+    }
+    const set = this.listeners.get(id)!;
+    set.add(callback);
+    callback(this.getCurrent(id));
+    return () => {
+      set.delete(callback);
+    };
+  }
+
+  update(id: string, page: number, count: number): void {
+    this.current.set(id, page);
+    this.counts.set(id, count);
+    const set = this.listeners.get(id);
+    if (set) {
+      set.forEach((listener) => listener(page));
+    }
+  }
+
+  getPageCount(id: string): number {
+    return this.counts.get(id) ?? 0;
+  }
+
+  getCurrent(id: string): number {
+    return this.current.get(id) ?? 0;
+  }
+}
+
+const SliderRegistryContext = createContext<SliderRegistry | null>(null);
+
+export function SliderRegistryProvider({
+  registry,
+  children,
+}: {
+  registry: SliderRegistry;
+  children: React.ReactNode;
+}) {
+  return (
+    <SliderRegistryContext.Provider value={registry}>
+      {children}
+    </SliderRegistryContext.Provider>
+  );
+}
+
+export function useSliderRegistry(): SliderRegistry | null {
+  return useContext(SliderRegistryContext);
+}

package/src/core/analyticsManager.ts

@@ -0,0 +1,125 @@
+import { Platform } from 'react-native';
+import { v4 as uuidv4 } from 'uuid';
+import 'react-native-get-random-values';
+import type { ClientContext } from './clientContext';
+
+export enum OnboardingOutcome {
+  completed = 'completed',
+  dismissed = 'dismissed',
+  purchased = 'purchased',
+  failed = 'failed',
+}
+
+const ANALYTICS_ENDPOINT = 'https://track-638704832888.europe-west1.run.app';
+
+export class AnalyticsManager {
+  private static _instance = new AnalyticsManager();
+  static get instance(): AnalyticsManager {
+    return AnalyticsManager._instance;
+  }
+
+  private enabled = true;
+  private clientContext: ClientContext | null = null;
+  private flowContext: Record<string, any> = {};
+
+  get clientContextSnapshot(): ClientContext | null {
+    return this.clientContext;
+  }
+
+  configure(params: { enabled?: boolean; context: ClientContext }): void {
+    this.enabled = params.enabled ?? true;
+    this.clientContext = params.context;
+  }
+
+  startSession(params: { flowData: Record<string, any> }): void {
+    this.flowContext = { ...params.flowData };
+    delete this.flowContext.screens;
+    const sessionId = uuidv4();
+    this.flowContext.session_id = sessionId;
+  }
+
+  endSession(): void {
+    this.flowContext = {};
+  }
+
+  track(eventName: string, properties: Record<string, any>): void {
+    if (!this.enabled) return;
+    try {
+      const eventId = uuidv4();
+      const timestamp = new Date().toISOString();
+      const context = this.clientContext;
+
+      const payload = {
+        event_id: eventId,
+        name: eventName,
+        timestamp,
+        bundle_id: context?.bundleId,
+        flow_id: this.flowContext.flow_id,
+        context: {
+          user_id: null,
+          device_id: context?.installId ?? 'unknown',
+          platform: context?.os ?? Platform.OS,
+          app_version: context?.appVersion ?? 'unknown',
+          sdk_version: '1.0.0',
+          locale: context?.locale,
+        },
+        flow_context: this.flowContext,
+        properties,
+      };
+
+      this.transmit(payload);
+    } catch {
+      // silent
+    }
+  }
+
+  private async transmit(payload: Record<string, any>): Promise<void> {
+    try {
+      const response = await fetch(ANALYTICS_ENDPOINT, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+      if (!response.ok) {
+        // swallow
+      }
+    } catch {
+      // swallow
+    }
+  }
+
+  trackOnboardLoaded(params: { durationMs: number; cached: boolean }): void {
+    this.track('onboard_loaded', {
+      duration_ms: params.durationMs,
+      cached: params.cached,
+    });
+  }
+
+  trackOnboardStarted(): void {
+    this.track('onboard_started', {});
+  }
+
+  trackScreenView(params: {
+    stepId: string;
+    stepIndex: number;
+    stepName?: string | null;
+  }): void {
+    this.track('screen_view', {
+      step_id: params.stepId,
+      step_index: params.stepIndex,
+      ...(params.stepName ? { step_name: params.stepName } : {}),
+    });
+  }
+
+  trackOnboardEnded(params: {
+    outcome: OnboardingOutcome;
+    totalDurationMs: number;
+    finalStepId: string;
+  }): void {
+    this.track('onboard_ended', {
+      outcome: params.outcome,
+      total_duration_ms: params.totalDurationMs,
+      final_step_id: params.finalStepId,
+    });
+  }
+}

package/src/core/assetPreloader.ts

@@ -0,0 +1,103 @@
+import { Image } from 'react-native';
+
+export class AssetPreloader {
+  private preloadedUrls = new Set<string>();
+
+  async preloadScreenAssets(screenData: Record<string, any>): Promise<void> {
+    const assets = this.extractAssets(screenData);
+    if (
+      assets.networkImages.length === 0 &&
+      assets.networkLotties.length === 0
+    ) {
+      return;
+    }
+
+    const tasks: Promise<any>[] = [];
+
+    for (const url of assets.networkImages) {
+      if (this.preloadedUrls.has(url)) continue;
+      this.preloadedUrls.add(url);
+      tasks.push(Image.prefetch(url).catch(() => null));
+    }
+
+    for (const url of assets.networkLotties) {
+      if (this.preloadedUrls.has(url)) continue;
+      this.preloadedUrls.add(url);
+      tasks.push(
+        fetch(url)
+          .then(() => null)
+          .catch(() => null)
+      );
+    }
+
+    if (tasks.length > 0) {
+      await Promise.all(tasks);
+    }
+  }
+
+  clear(): void {
+    this.preloadedUrls.clear();
+  }
+
+  private extractAssets(data: Record<string, any>): {
+    networkImages: string[];
+    networkLotties: string[];
+  } {
+    const assets = {
+      networkImages: [] as string[],
+      networkLotties: [] as string[],
+    };
+    this.scanWidget(data, assets, 0);
+    return assets;
+  }
+
+  private scanWidget(
+    widget: any,
+    assets: { networkImages: string[]; networkLotties: string[] },
+    depth: number
+  ): void {
+    if (!widget || depth > 50) return;
+
+    if (Array.isArray(widget)) {
+      widget.forEach((item) => this.scanWidget(item, assets, depth));
+      return;
+    }
+
+    if (typeof widget !== 'object') return;
+
+    const type = widget.type;
+    const props = widget.properties ?? widget;
+
+    if (type === 'image') {
+      const source = props.source;
+      const url = props.url;
+      if (source === 'network' && url) {
+        assets.networkImages.push(url);
+      }
+    }
+
+    if (type === 'lottie') {
+      const source = props.source;
+      const url = props.url;
+      if (source === 'network' && url) {
+        assets.networkLotties.push(url);
+      }
+    }
+
+    const background = widget.background ?? props.background;
+    if (
+      background &&
+      typeof background === 'object' &&
+      background.type === 'image'
+    ) {
+      const url = background.url;
+      if (url) assets.networkImages.push(url);
+    }
+
+    Object.values(widget).forEach((value) => {
+      if (typeof value === 'object') {
+        this.scanWidget(value, assets, depth + 1);
+      }
+    });
+  }
+}

package/src/core/clientContext.ts

@@ -0,0 +1,132 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import DeviceInfo from 'react-native-device-info';
+import { Platform } from 'react-native';
+import { v4 as uuidv4 } from 'uuid';
+import 'react-native-get-random-values';
+
+export type ClientContextData = {
+  appVersion: string;
+  buildNumber: string;
+  locale: string;
+  country: string;
+  os: string;
+  osVersion: string;
+  deviceType: string;
+  installId: string;
+  bundleId: string;
+};
+
+const INSTALL_ID_KEY = 'flowboard_install_id';
+
+export class ClientContext {
+  appVersion: string;
+  buildNumber: string;
+  locale: string;
+  country: string;
+  os: string;
+  osVersion: string;
+  deviceType: string;
+  installId: string;
+  bundleId: string;
+
+  private constructor(data: ClientContextData) {
+    this.appVersion = data.appVersion;
+    this.buildNumber = data.buildNumber;
+    this.locale = data.locale;
+    this.country = data.country;
+    this.os = data.os;
+    this.osVersion = data.osVersion;
+    this.deviceType = data.deviceType;
+    this.installId = data.installId;
+    this.bundleId = data.bundleId;
+  }
+
+  static async create(): Promise<ClientContext> {
+    const installId = await getOrCreateInstallId();
+
+    const appVersion = DeviceInfo.getVersion();
+    const buildNumber = DeviceInfo.getBuildNumber();
+    const bundleId = DeviceInfo.getBundleId();
+
+    const locale = await getDeviceLocale();
+    const country = locale.includes('_') ? locale.split('_').pop() ?? '' : '';
+
+    const os = Platform.OS;
+    const osVersion = DeviceInfo.getSystemVersion();
+    const deviceType = mapDeviceType(await DeviceInfo.getDeviceType());
+
+    return new ClientContext({
+      appVersion,
+      buildNumber,
+      locale,
+      country,
+      os,
+      osVersion,
+      deviceType,
+      installId,
+      bundleId,
+    });
+  }
+
+  toJson(): Record<string, any> {
+    return {
+      app: {
+        version: this.appVersion,
+        build: this.buildNumber,
+        bundleId: this.bundleId,
+      },
+      user: { locale: this.locale, country: this.country },
+      platform: {
+        os: this.os,
+        osVersion: this.osVersion,
+        deviceType: this.deviceType,
+      },
+      device: { installId: this.installId },
+    };
+  }
+}
+
+async function getOrCreateInstallId(): Promise<string> {
+  const stored = await AsyncStorage.getItem(INSTALL_ID_KEY);
+  if (stored) return stored;
+  const installId = uuidv4();
+  await AsyncStorage.setItem(INSTALL_ID_KEY, installId);
+  return installId;
+}
+
+async function getDeviceLocale(): Promise<string> {
+  const deviceInfoAny = DeviceInfo as any;
+  if (typeof deviceInfoAny.getDeviceLocale === 'function') {
+    const locale = await deviceInfoAny.getDeviceLocale();
+    if (locale) return locale;
+  }
+  if (typeof deviceInfoAny.getDeviceLocales === 'function') {
+    const locales = await deviceInfoAny.getDeviceLocales();
+    if (Array.isArray(locales) && locales.length > 0) {
+      const first = locales[0];
+      if (typeof first === 'string') return first;
+      if (first?.languageTag) return first.languageTag;
+      if (first?.languageCode) {
+        return first.countryCode
+          ? `${first.languageCode}_${first.countryCode}`
+          : first.languageCode;
+      }
+    }
+  }
+  return 'en_US';
+}
+
+function mapDeviceType(deviceType: string): string {
+  switch (deviceType?.toLowerCase()) {
+    case 'handset':
+      return 'phone';
+    case 'tablet':
+      return 'tablet';
+    case 'desktop':
+      return 'desktop';
+    case 'tv':
+      return 'desktop';
+    default:
+      return 'phone';
+  }
+}

package/src/core/fontAwesome.ts

@@ -0,0 +1,90 @@
+import FontAwesome6 from 'react-native-vector-icons/FontAwesome6';
+
+const hexRegex = /^(0x)?[a-fA-F0-9]{4,5}$/;
+
+export type FontAwesomeStyle =
+  | 'brands'
+  | 'regular'
+  | 'solid'
+  | 'light'
+  | 'thin'
+  | 'duotone'
+  | 'sharpthin'
+  | 'sharplight'
+  | 'sharpregular'
+  | 'sharpsolid';
+
+export function resolveFontAwesomeIcon(
+  name?: string,
+  style: string = 'solid'
+): { name: string | null; props: Record<string, any> } {
+  if (!name) return { name: null, props: styleProps(style) };
+
+  if (hexRegex.test(name)) {
+    const codePoint = parseInt(name.replace(/^0x/, ''), 16);
+    const glyphMap = getGlyphMap();
+    if (glyphMap) {
+      let fallback: string | null = null;
+      for (const [iconName, value] of Object.entries(glyphMap)) {
+        if (value === codePoint) {
+          fallback = iconName;
+          if (style === 'solid' && iconName.toLowerCase().startsWith('solid')) {
+            return { name: iconName, props: styleProps(style) };
+          }
+          if (
+            style === 'regular' &&
+            iconName.toLowerCase().startsWith('regular')
+          ) {
+            return { name: iconName, props: styleProps(style) };
+          }
+          if (style === 'brands' && iconName.toLowerCase().includes('brand')) {
+            return { name: iconName, props: styleProps(style) };
+          }
+        }
+      }
+      if (fallback) return { name: fallback, props: styleProps(style) };
+    }
+  }
+
+  return { name, props: styleProps(style) };
+}
+
+function getGlyphMap(): Record<string, number> | null {
+  const anyIcon = FontAwesome6 as any;
+  if (typeof anyIcon.getRawGlyphMap === 'function') {
+    return anyIcon.getRawGlyphMap();
+  }
+  if (anyIcon.glyphMap) {
+    return anyIcon.glyphMap as Record<string, number>;
+  }
+  return null;
+}
+
+function styleProps(style: string): Record<string, any> {
+  const normalized = style.toLowerCase().replace(/-/g, '');
+  switch (normalized) {
+    case 'brands':
+      return { brand: true };
+    case 'regular':
+      return { regular: true };
+    case 'light':
+      return { light: true };
+    case 'thin':
+      return { thin: true };
+    case 'duotone':
+      return { duotone: true };
+    case 'sharpthin':
+      return { sharp: true, thin: true };
+    case 'sharplight':
+      return { sharp: true, light: true };
+    case 'sharpregular':
+      return { sharp: true, regular: true };
+    case 'sharpsolid':
+      return { sharp: true, solid: true };
+    case 'solid':
+    default:
+      return { solid: true };
+  }
+}
+
+export { FontAwesome6 };

package/src/core/onboardingRepository.ts

@@ -0,0 +1,79 @@
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import type { FlowboardData } from '../types/flowboard';
+
+const STORAGE_KEY = 'flowboard_onboarding_json';
+const FETCH_TIME_KEY = 'flowboard_fetch_time';
+const PROGRESS_FLOW_KEY = 'flowboard_progress_flow_id';
+const PROGRESS_STEP_KEY = 'flowboard_progress_step';
+const PROGRESS_FORM_DATA_KEY = 'flowboard_progress_form_data';
+
+export class OnboardingRepository {
+  async saveOnboardingJson(json: FlowboardData): Promise<void> {
+    await AsyncStorage.setItem(STORAGE_KEY, JSON.stringify(json));
+    await AsyncStorage.setItem(FETCH_TIME_KEY, Date.now().toString());
+  }
+
+  async getOnboardingJson(): Promise<FlowboardData | null> {
+    const jsonString = await AsyncStorage.getItem(STORAGE_KEY);
+    if (!jsonString) return null;
+    try {
+      return JSON.parse(jsonString) as FlowboardData;
+    } catch {
+      await this.clearOnboardingJson();
+      return null;
+    }
+  }
+
+  async clearOnboardingJson(): Promise<void> {
+    await AsyncStorage.multiRemove([STORAGE_KEY, FETCH_TIME_KEY]);
+  }
+
+  async saveProgress(params: {
+    flowId: string;
+    stepIndex: number;
+    formData: Record<string, any>;
+  }): Promise<void> {
+    await AsyncStorage.setItem(PROGRESS_FLOW_KEY, params.flowId);
+    await AsyncStorage.setItem(PROGRESS_STEP_KEY, params.stepIndex.toString());
+    await AsyncStorage.setItem(
+      PROGRESS_FORM_DATA_KEY,
+      JSON.stringify(params.formData)
+    );
+  }
+
+  async getProgressStepForFlow(flowId: string): Promise<number | null> {
+    const storedFlowId = await AsyncStorage.getItem(PROGRESS_FLOW_KEY);
+    if (storedFlowId !== flowId) return null;
+    const value = await AsyncStorage.getItem(PROGRESS_STEP_KEY);
+    if (!value) return null;
+    const parsed = Number(value);
+    return Number.isNaN(parsed) ? null : parsed;
+  }
+
+  async getProgressFormDataForFlow(
+    flowId: string
+  ): Promise<Record<string, any> | null> {
+    const storedFlowId = await AsyncStorage.getItem(PROGRESS_FLOW_KEY);
+    if (storedFlowId !== flowId) return null;
+    const jsonString = await AsyncStorage.getItem(PROGRESS_FORM_DATA_KEY);
+    if (!jsonString) return null;
+    try {
+      const decoded = JSON.parse(jsonString);
+      if (decoded && typeof decoded === 'object') {
+        return { ...decoded } as Record<string, any>;
+      }
+      return null;
+    } catch {
+      await this.clearProgress();
+      return null;
+    }
+  }
+
+  async clearProgress(): Promise<void> {
+    await AsyncStorage.multiRemove([
+      PROGRESS_FLOW_KEY,
+      PROGRESS_STEP_KEY,
+      PROGRESS_FORM_DATA_KEY,
+    ]);
+  }
+}

package/src/core/resolverService.ts

@@ -0,0 +1,69 @@
+import type { ClientContext } from './clientContext';
+import type { FlowboardData } from '../types/flowboard';
+
+const DEFAULT_ENDPOINT = 'https://test-638704832888.europe-west1.run.app';
+
+export class ResolverService {
+  private endpoint: string;
+
+  constructor(endpoint?: string) {
+    this.endpoint = endpoint ?? DEFAULT_ENDPOINT;
+  }
+
+  async fetchOnboardingJson(params: {
+    context: ClientContext;
+    appId: string;
+  }): Promise<FlowboardData> {
+    const { context, appId } = params;
+    const payload = context.toJson();
+    payload.appId = appId;
+    payload.installId = context.installId;
+    payload.bundleId = context.bundleId;
+
+    payload.appVersion = context.appVersion;
+    payload.buildNumber = context.buildNumber;
+    payload.os = context.os;
+    payload.osVersion = context.osVersion;
+    payload.deviceType = context.deviceType;
+    payload.locale = context.locale;
+    payload.country = context.country;
+
+    payload.sdk = {
+      name: 'flowboard',
+      version: '1.0.0',
+    };
+
+    let response: Response;
+    try {
+      response = await fetch(this.endpoint, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify(payload),
+      });
+    } catch (error) {
+      throw new Error(`Failed to connect to resolver: ${String(error)}`);
+    }
+
+    if (!response.ok) {
+      const body = await response.text();
+      throw new Error(
+        `Failed to load onboarding config: ${response.status} ${body}`
+      );
+    }
+
+    const body = (await response.json()) as FlowboardData;
+
+    const flowId = response.headers.get('x-flowboard-flow-id');
+    if (flowId) body.flow_id = flowId;
+    const variantId = response.headers.get('x-flowboard-variant-id');
+    if (variantId) body.variant_id = variantId;
+    const audienceId = response.headers.get('x-flowboard-audience-id');
+    if (audienceId) body.audience_id = audienceId;
+    const bucket = response.headers.get('x-flowboard-bucket');
+    if (bucket) body.bucket = bucket;
+    const experimentId = response.headers.get('x-flowboard-experiment-id');
+    if (experimentId) body.experiment_id = experimentId;
+
+    return body;
+  }
+}

package/src/index.tsx

@@ -0,0 +1,11 @@
+export { Flowboard } from './Flowboard';
+export { default as FlowboardProvider } from './FlowboardProvider';
+export type {
+  FlowboardContext,
+  CustomScreenBuilder,
+  CustomActionBuilder,
+  OnboardingEndCallback,
+  OnStepChangeCallback,
+  FlowboardLaunchOptions,
+  FlowboardData,
+} from './types/flowboard';