vibefast-cli 1.1.3 → 1.2.1

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/ui/onboarding-header.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { View } from 'react-native';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { useThemeConfig } from '@/lib/use-theme-config';
+import { Pressable } from '@/components/ui';
+
+interface OnboardingHeaderProps {
+  onBack: () => void;
+  canGoBack: boolean;
+  progress?: number;
+}
+
+export function OnboardingHeader({
+  onBack,
+  canGoBack,
+  progress = 0,
+}: OnboardingHeaderProps) {
+  const theme = useThemeConfig();
+  const progressValue = useSharedValue(0);
+
+  React.useEffect(() => {
+    progressValue.value = withTiming(progress, { duration: 500 });
+  }, [progress]);
+
+  const animatedProgressStyle = useAnimatedStyle(() => ({
+    width: `${progressValue.value * 100}%`,
+  }));
+
+  if (!canGoBack) return <View className="h-12" />;
+
+  return (
+    <View className="h-12 px-6 flex-row items-center">
+      <Pressable
+        onPress={onBack}
+        className="w-10 h-10 items-center justify-center -ml-2 rounded-full active:bg-muted/20 mr-4"
+      >
+        <MaterialCommunityIcons
+          name="chevron-left"
+          size={32}
+          color={theme.colors.foreground}
+        />
+      </Pressable>
+
+      {/* Progress Bar */}
+      <View className="flex-1 h-1 bg-muted rounded-full overflow-hidden">
+        <Animated.View
+          className="h-full bg-primary rounded-full"
+          style={animatedProgressStyle}
+        />
+      </View>
+    </View>
+  );
+}

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/constants.ts

@@ -0,0 +1,179 @@
+/**
+ * Demo Expense Tracker Onboarding - Currency Constants
+ *
+ * Contains currency data for the onboarding demo.
+ * This is a self-contained copy to avoid external dependencies.
+ */
+
+export const SUPPORTED_CURRENCIES = [
+  // Major Global Currencies
+  { code: 'USD', symbol: '$', name: 'US Dollar' },
+  { code: 'EUR', symbol: 'EUR', name: 'Euro' },
+  { code: 'GBP', symbol: 'GBP', name: 'British Pound' },
+  { code: 'JPY', symbol: 'JPY', name: 'Japanese Yen' },
+  { code: 'CHF', symbol: 'CHF', name: 'Swiss Franc' },
+  { code: 'CNY', symbol: 'CNY', name: 'Chinese Yuan' },
+  { code: 'CAD', symbol: 'CAD', name: 'Canadian Dollar' },
+  { code: 'AUD', symbol: 'AUD', name: 'Australian Dollar' },
+  { code: 'NZD', symbol: 'NZD', name: 'New Zealand Dollar' },
+  { code: 'SGD', symbol: 'SGD', name: 'Singapore Dollar' },
+  { code: 'HKD', symbol: 'HKD', name: 'Hong Kong Dollar' },
+
+  // Asian Currencies
+  { code: 'INR', symbol: 'INR', name: 'Indian Rupee' },
+  { code: 'PKR', symbol: 'PKR', name: 'Pakistani Rupee' },
+  { code: 'BDT', symbol: 'BDT', name: 'Bangladeshi Taka' },
+  { code: 'LKR', symbol: 'LKR', name: 'Sri Lankan Rupee' },
+  { code: 'THB', symbol: 'THB', name: 'Thai Baht' },
+  { code: 'MYR', symbol: 'MYR', name: 'Malaysian Ringgit' },
+  { code: 'IDR', symbol: 'IDR', name: 'Indonesian Rupiah' },
+  { code: 'PHP', symbol: 'PHP', name: 'Philippine Peso' },
+  { code: 'VND', symbol: 'VND', name: 'Vietnamese Dong' },
+  { code: 'KRW', symbol: 'KRW', name: 'South Korean Won' },
+  { code: 'TWD', symbol: 'TWD', name: 'Taiwan Dollar' },
+
+  // Middle Eastern Currencies
+  { code: 'AED', symbol: 'AED', name: 'UAE Dirham' },
+  { code: 'SAR', symbol: 'SAR', name: 'Saudi Riyal' },
+  { code: 'QAR', symbol: 'QAR', name: 'Qatari Riyal' },
+  { code: 'KWD', symbol: 'KWD', name: 'Kuwaiti Dinar' },
+  { code: 'BHD', symbol: 'BHD', name: 'Bahraini Dinar' },
+  { code: 'OMR', symbol: 'OMR', name: 'Omani Rial' },
+  { code: 'JOD', symbol: 'JOD', name: 'Jordanian Dinar' },
+  { code: 'LBP', symbol: 'LBP', name: 'Lebanese Pound' },
+  { code: 'EGP', symbol: 'EGP', name: 'Egyptian Pound' },
+  { code: 'ILS', symbol: 'ILS', name: 'Israeli Shekel' },
+  { code: 'TRY', symbol: 'TRY', name: 'Turkish Lira' },
+  { code: 'IRR', symbol: 'IRR', name: 'Iranian Rial' },
+
+  // European Currencies
+  { code: 'SEK', symbol: 'SEK', name: 'Swedish Krona' },
+  { code: 'NOK', symbol: 'NOK', name: 'Norwegian Krone' },
+  { code: 'DKK', symbol: 'DKK', name: 'Danish Krone' },
+  { code: 'PLN', symbol: 'PLN', name: 'Polish Zloty' },
+  { code: 'CZK', symbol: 'CZK', name: 'Czech Koruna' },
+  { code: 'HUF', symbol: 'HUF', name: 'Hungarian Forint' },
+  { code: 'RON', symbol: 'RON', name: 'Romanian Leu' },
+  { code: 'BGN', symbol: 'BGN', name: 'Bulgarian Lev' },
+  { code: 'HRK', symbol: 'HRK', name: 'Croatian Kuna' },
+  { code: 'RUB', symbol: 'RUB', name: 'Russian Ruble' },
+  { code: 'UAH', symbol: 'UAH', name: 'Ukrainian Hryvnia' },
+  { code: 'BYN', symbol: 'BYN', name: 'Belarusian Ruble' },
+
+  // Americas Currencies
+  { code: 'MXN', symbol: 'MXN', name: 'Mexican Peso' },
+  { code: 'BRL', symbol: 'BRL', name: 'Brazilian Real' },
+  { code: 'ARS', symbol: 'ARS', name: 'Argentine Peso' },
+  { code: 'CLP', symbol: 'CLP', name: 'Chilean Peso' },
+  { code: 'COP', symbol: 'COP', name: 'Colombian Peso' },
+  { code: 'PEN', symbol: 'PEN', name: 'Peruvian Sol' },
+  { code: 'UYU', symbol: 'UYU', name: 'Uruguayan Peso' },
+  { code: 'VEF', symbol: 'VEF', name: 'Venezuelan Bolivar' },
+
+  // African Currencies
+  { code: 'ZAR', symbol: 'ZAR', name: 'South African Rand' },
+  { code: 'NGN', symbol: 'NGN', name: 'Nigerian Naira' },
+  { code: 'GHS', symbol: 'GHS', name: 'Ghanaian Cedi' },
+  { code: 'KES', symbol: 'KES', name: 'Kenyan Shilling' },
+  { code: 'UGX', symbol: 'UGX', name: 'Ugandan Shilling' },
+  { code: 'ETB', symbol: 'ETB', name: 'Ethiopian Birr' },
+  { code: 'MAD', symbol: 'MAD', name: 'Moroccan Dirham' },
+  { code: 'TND', symbol: 'TND', name: 'Tunisian Dinar' },
+  { code: 'ZWL', symbol: 'ZWL', name: 'Zimbabwean Dollar' },
+
+  // Oceania & Pacific
+  { code: 'FJD', symbol: 'FJD', name: 'Fijian Dollar' },
+  { code: 'PGK', symbol: 'PGK', name: 'Papua New Guinean Kina' },
+] as const;
+
+/**
+ * Currency flag emojis for visual display
+ */
+export const CURRENCY_FLAGS: Record<string, string> = {
+  USD: '🇺🇸',
+  EUR: '🇪🇺',
+  GBP: '🇬🇧',
+  JPY: '🇯🇵',
+  CHF: '🇨🇭',
+  CNY: '🇨🇳',
+  CAD: '🇨🇦',
+  AUD: '🇦🇺',
+  NZD: '🇳🇿',
+  SGD: '🇸🇬',
+  HKD: '🇭🇰',
+  INR: '🇮🇳',
+  PKR: '🇵🇰',
+  BDT: '🇧🇩',
+  LKR: '🇱🇰',
+  THB: '🇹🇭',
+  MYR: '🇲🇾',
+  IDR: '🇮🇩',
+  PHP: '🇵🇭',
+  VND: '🇻🇳',
+  KRW: '🇰🇷',
+  TWD: '🇹🇼',
+  AED: '🇦🇪',
+  SAR: '🇸🇦',
+  QAR: '🇶🇦',
+  KWD: '🇰🇼',
+  BHD: '🇧🇭',
+  OMR: '🇴🇲',
+  JOD: '🇯🇴',
+  LBP: '🇱🇧',
+  EGP: '🇪🇬',
+  ILS: '🇮🇱',
+  TRY: '🇹🇷',
+  IRR: '🇮🇷',
+  SEK: '🇸🇪',
+  NOK: '🇳🇴',
+  DKK: '🇩🇰',
+  PLN: '🇵🇱',
+  CZK: '🇨🇿',
+  HUF: '🇭🇺',
+  RON: '🇷🇴',
+  BGN: '🇧🇬',
+  HRK: '🇭🇷',
+  RUB: '🇷🇺',
+  UAH: '🇺🇦',
+  BYN: '🇧🇾',
+  MXN: '🇲🇽',
+  BRL: '🇧🇷',
+  ARS: '🇦🇷',
+  CLP: '🇨🇱',
+  COP: '🇨🇴',
+  PEN: '🇵🇪',
+  UYU: '🇺🇾',
+  VEF: '🇻🇪',
+  ZAR: '🇿🇦',
+  NGN: '🇳🇬',
+  GHS: '🇬🇭',
+  KES: '🇰🇪',
+  UGX: '🇺🇬',
+  ETB: '🇪🇹',
+  MAD: '🇲🇦',
+  TND: '🇹🇳',
+  ZWL: '🇿🇼',
+  FJD: '🇫🇯',
+  PGK: '🇵🇬',
+};
+
+export function getCurrencyFlag(code: string): string {
+  return CURRENCY_FLAGS[code] || code;
+}
+
+export type SupportedCurrency = (typeof SUPPORTED_CURRENCIES)[number];
+export type CurrencyCode = SupportedCurrency['code'];
+
+/**
+ * Currency symbols (derived from SUPPORTED_CURRENCIES)
+ */
+export const CURRENCY_SYMBOLS: Record<string, string> = Object.fromEntries(
+  SUPPORTED_CURRENCIES.map((c) => [c.code, c.symbol]),
+);
+
+/**
+ * Get currency symbol for a currency code
+ */
+export function getCurrencySymbol(currency: string): string {
+  return CURRENCY_SYMBOLS[currency] || currency;
+}

package/recipes/onboarding/apps/native/src/features/onboarding/hooks/use-onboarding-analytics.ts

@@ -0,0 +1,323 @@
+import { useCallback, useEffect, useRef } from 'react';
+
+import { usePostHogAnalyticsAdapter } from '@/core/analytics';
+
+import type {
+  OnboardingFlowConfig,
+  OnboardingSession,
+} from '../services/onboarding-analytics';
+import { OnboardingAnalyticsService } from '../services/onboarding-analytics';
+
+/**
+ * Configuration for the onboarding analytics hook
+ */
+export type UseOnboardingAnalyticsConfig = {
+  flowConfig: OnboardingFlowConfig;
+  userType?: 'new' | 'returning' | 'migrated';
+  autoStart?: boolean; // Whether to automatically start tracking when hook is called
+};
+
+/**
+ * Return type for the onboarding analytics hook
+ */
+export type OnboardingAnalyticsActions = {
+  // Flow control
+  startFlow: () => Promise<string>;
+  completeFlow: () => Promise<void>;
+  abandonFlow: (reason?: string) => Promise<void>;
+
+  // Step tracking
+  trackStepViewed: (
+    stepId: string,
+    properties?: Record<string, any>,
+  ) => Promise<void>;
+  trackStepCompleted: (
+    stepId: string,
+    properties?: Record<string, any>,
+  ) => Promise<void>;
+  trackStepSkipped: (
+    stepId: string,
+    reason?: string,
+    properties?: Record<string, any>,
+  ) => Promise<void>;
+  trackStepRetried: (
+    stepId: string,
+    attempt: number,
+    properties?: Record<string, any>,
+  ) => Promise<void>;
+  trackStepHelp: (
+    stepId: string,
+    helpType?: string,
+    properties?: Record<string, any>,
+  ) => Promise<void>;
+
+  // Navigation tracking
+  trackNavigation: (
+    direction: 'back' | 'forward',
+    fromStepId: string,
+    toStepId: string,
+  ) => Promise<void>;
+
+  // State access
+  getCurrentSession: () => OnboardingSession | null;
+  getProgress: () => {
+    totalSteps: number;
+    currentStep: number;
+    completedSteps: number;
+    skippedSteps: number;
+    completionRate: number;
+  } | null;
+
+  // Utilities
+  isStepCompleted: (stepId: string) => boolean;
+  isStepSkipped: (stepId: string) => boolean;
+  getNextStep: (currentStepId: string) => string | null;
+  getPreviousStep: (currentStepId: string) => string | null;
+};
+
+/**
+ * Hook for tracking onboarding analytics with automatic step discovery.
+ * Provides a clean, React-friendly interface for onboarding event tracking.
+ *
+ * @example
+ * ```typescript
+ * const analytics = useOnboardingAnalytics({
+ *   flowConfig: {
+ *     flowId: 'main_onboarding',
+ *     flowName: 'Main App Onboarding',
+ *     steps: [
+ *       { id: 'welcome', name: 'Welcome Screen', index: 0 },
+ *       { id: 'permissions', name: 'Permissions Setup', index: 1 },
+ *       { id: 'profile', name: 'Profile Creation', index: 2, isOptional: true },
+ *     ]
+ *   },
+ *   userType: 'new',
+ *   autoStart: true
+ * });
+ *
+ * // In your component
+ * const handleStepComplete = () => {
+ *   analytics.trackStepCompleted('welcome', { interaction_method: 'button' });
+ * };
+ * ```
+ */
+export function useOnboardingAnalytics(
+  config: UseOnboardingAnalyticsConfig,
+): OnboardingAnalyticsActions {
+  const postHogAdapter = usePostHogAnalyticsAdapter();
+  const analyticsServiceRef = useRef<OnboardingAnalyticsService | null>(null);
+
+  // Initialize analytics service
+  useEffect(() => {
+    let isActive = true;
+    const service = new OnboardingAnalyticsService(postHogAdapter);
+    analyticsServiceRef.current = service;
+
+    const bootstrap = async () => {
+      try {
+        await postHogAdapter.initialize();
+        if (config.autoStart && isActive) {
+          await service.startFlow(config.flowConfig, config.userType);
+        }
+      } catch (error) {
+        console.warn(
+          '[useOnboardingAnalytics] Failed to initialize analytics service',
+          error,
+        );
+      }
+    };
+
+    void bootstrap();
+
+    // Cleanup on unmount - track abandonment if session is active
+    return () => {
+      isActive = false;
+      if (analyticsServiceRef.current?.getCurrentSession()) {
+        analyticsServiceRef.current.trackFlowAbandoned('component_unmount');
+      }
+    };
+  }, [postHogAdapter, config.autoStart, config.userType, config.flowConfig]);
+
+  // Flow control functions
+  const startFlow = useCallback(async (): Promise<string> => {
+    if (!analyticsServiceRef.current) {
+      throw new Error('Analytics service not initialized');
+    }
+    return analyticsServiceRef.current.startFlow(
+      config.flowConfig,
+      config.userType,
+    );
+  }, [config.flowConfig, config.userType]);
+
+  const completeFlow = useCallback(async (): Promise<void> => {
+    if (!analyticsServiceRef.current) return;
+    await analyticsServiceRef.current.trackFlowCompleted();
+  }, []);
+
+  const abandonFlow = useCallback(async (reason?: string): Promise<void> => {
+    if (!analyticsServiceRef.current) return;
+    await analyticsServiceRef.current.trackFlowAbandoned(reason);
+  }, []);
+
+  // Step tracking functions
+  const trackStepViewed = useCallback(
+    async (stepId: string, properties?: Record<string, any>): Promise<void> => {
+      if (!analyticsServiceRef.current) return;
+      await analyticsServiceRef.current.trackStepViewed(stepId, properties);
+    },
+    [],
+  );
+
+  const trackStepCompleted = useCallback(
+    async (stepId: string, properties?: Record<string, any>): Promise<void> => {
+      if (!analyticsServiceRef.current) return;
+      await analyticsServiceRef.current.trackStepCompleted(stepId, properties);
+    },
+    [],
+  );
+
+  const trackStepSkipped = useCallback(
+    async (
+      stepId: string,
+      reason?: string,
+      properties?: Record<string, any>,
+    ): Promise<void> => {
+      if (!analyticsServiceRef.current) return;
+      await analyticsServiceRef.current.trackStepSkipped(
+        stepId,
+        reason,
+        properties,
+      );
+    },
+    [],
+  );
+
+  const trackStepRetried = useCallback(
+    async (
+      stepId: string,
+      attempt: number,
+      properties?: Record<string, any>,
+    ): Promise<void> => {
+      if (!analyticsServiceRef.current) return;
+      await analyticsServiceRef.current.trackStepRetried(
+        stepId,
+        attempt,
+        properties,
+      );
+    },
+    [],
+  );
+
+  const trackStepHelp = useCallback(
+    async (
+      stepId: string,
+      helpType?: string,
+      properties?: Record<string, any>,
+    ): Promise<void> => {
+      if (!analyticsServiceRef.current) return;
+      await analyticsServiceRef.current.trackStepHelpAccessed(
+        stepId,
+        helpType,
+        properties,
+      );
+    },
+    [],
+  );
+
+  // Navigation tracking
+  const trackNavigation = useCallback(
+    async (
+      direction: 'back' | 'forward',
+      fromStepId: string,
+      toStepId: string,
+    ): Promise<void> => {
+      if (!analyticsServiceRef.current) return;
+      await analyticsServiceRef.current.trackNavigation(
+        direction,
+        fromStepId,
+        toStepId,
+      );
+    },
+    [],
+  );
+
+  // State access functions
+  const getCurrentSession = useCallback((): OnboardingSession | null => {
+    return analyticsServiceRef.current?.getCurrentSession() || null;
+  }, []);
+
+  const getProgress = useCallback(() => {
+    return analyticsServiceRef.current?.getFlowProgress() || null;
+  }, []);
+
+  // Utility functions
+  const isStepCompleted = useCallback(
+    (stepId: string): boolean => {
+      const session = getCurrentSession();
+      return session?.completedSteps.includes(stepId) || false;
+    },
+    [getCurrentSession],
+  );
+
+  const isStepSkipped = useCallback(
+    (stepId: string): boolean => {
+      const session = getCurrentSession();
+      return session?.skippedSteps.includes(stepId) || false;
+    },
+    [getCurrentSession],
+  );
+
+  const getNextStep = useCallback(
+    (currentStepId: string): string | null => {
+      const step = config.flowConfig.steps.find((s) => s.id === currentStepId);
+      if (!step || step.index >= config.flowConfig.steps.length - 1)
+        return null;
+
+      const nextStep = config.flowConfig.steps.find(
+        (s) => s.index === step.index + 1,
+      );
+      return nextStep?.id || null;
+    },
+    [config.flowConfig.steps],
+  );
+
+  const getPreviousStep = useCallback(
+    (currentStepId: string): string | null => {
+      const step = config.flowConfig.steps.find((s) => s.id === currentStepId);
+      if (!step || step.index <= 0) return null;
+
+      const prevStep = config.flowConfig.steps.find(
+        (s) => s.index === step.index - 1,
+      );
+      return prevStep?.id || null;
+    },
+    [config.flowConfig.steps],
+  );
+
+  return {
+    // Flow control
+    startFlow,
+    completeFlow,
+    abandonFlow,
+
+    // Step tracking
+    trackStepViewed,
+    trackStepCompleted,
+    trackStepSkipped,
+    trackStepRetried,
+    trackStepHelp,
+
+    // Navigation
+    trackNavigation,
+
+    // State access
+    getCurrentSession,
+    getProgress,
+
+    // Utilities
+    isStepCompleted,
+    isStepSkipped,
+    getNextStep,
+    getPreviousStep,
+  };
+}