vibefast-cli 0.7.0 → 0.7.1

package/2/apps/native/src/features/onboarding/config/onboarding-flow-config.ts

@@ -1,189 +0,0 @@
-import type { OnboardingFlowConfig } from '../services/onboarding-analytics';
-
-/**
- * Demo One: Multi-step animated onboarding flow
- * A comprehensive onboarding with multiple screens and Lottie animations
- */
-export const DEMO_ONE_ONBOARDING_FLOW: OnboardingFlowConfig = {
-  flowId: 'demo_one_flow',
-  flowName: 'Multi-Step Animated Onboarding',
-  version: '1.0',
-  steps: [
-    {
-      id: 'welcome_screen',
-      name: 'Welcome to VibeFast',
-      index: 0,
-      category: 'intro',
-      isOptional: false,
-    },
-    {
-      id: 'ai_features',
-      name: 'AI-Powered Development',
-      index: 1,
-      category: 'features',
-      isOptional: false,
-    },
-    {
-      id: 'production_ready',
-      name: 'Production Ready',
-      index: 2,
-      category: 'features',
-      isOptional: false,
-    },
-    {
-      id: 'developer_experience',
-      name: 'Developer Experience',
-      index: 3,
-      category: 'features',
-      isOptional: false,
-    },
-  ],
-};
-
-/**
- * Demo Two: Simple single-screen onboarding
- * A minimal onboarding with feature highlights and direct CTA
- */
-export const DEMO_TWO_ONBOARDING_FLOW: OnboardingFlowConfig = {
-  flowId: 'demo_two_flow',
-  flowName: 'Simple Feature Highlights Onboarding',
-  version: '1.0',
-  steps: [
-    {
-      id: 'feature_overview',
-      name: 'Feature Overview Screen',
-      index: 0,
-      category: 'overview',
-      isOptional: false,
-    },
-  ],
-};
-
-/**
- * Feature-specific onboarding flows for different parts of your app
- */
-export const FEATURE_ONBOARDING_FLOWS = {
-  imageAnalyzer: {
-    flowId: 'image_analyzer_onboarding',
-    flowName: 'Image Analyzer Onboarding',
-    version: '1.0',
-    steps: [
-      {
-        id: 'camera_permission',
-        name: 'Camera Permission Request',
-        index: 0,
-        category: 'permissions',
-        isOptional: false,
-      },
-      {
-        id: 'first_analysis',
-        name: 'First Image Analysis',
-        index: 1,
-        category: 'tutorial',
-        isOptional: false,
-      },
-      {
-        id: 'results_explanation',
-        name: 'Understanding Results',
-        index: 2,
-        category: 'tutorial',
-        isOptional: true,
-      },
-    ],
-  },
-  payments: {
-    flowId: 'payments_onboarding',
-    flowName: 'Premium Features Onboarding',
-    version: '1.0',
-    steps: [
-      {
-        id: 'paywall_intro',
-        name: 'Premium Features Introduction',
-        index: 0,
-        category: 'monetization',
-        isOptional: false,
-      },
-      {
-        id: 'subscription_selection',
-        name: 'Subscription Plan Selection',
-        index: 1,
-        category: 'monetization',
-        isOptional: false,
-      },
-      {
-        id: 'payment_completion',
-        name: 'Payment Completion',
-        index: 2,
-        category: 'monetization',
-        isOptional: false,
-      },
-    ],
-  },
-} as const satisfies Record<string, OnboardingFlowConfig>;
-
-/**
- * A/B test variants for different onboarding approaches
- */
-export const ONBOARDING_VARIANTS = {
-  demoOneControl: {
-    ...DEMO_ONE_ONBOARDING_FLOW,
-    variant: 'control',
-  },
-  demoOneExperimental: {
-    ...DEMO_ONE_ONBOARDING_FLOW,
-    flowId: 'demo_one_flow_experimental',
-    variant: 'experimental',
-    // Add experimental steps or modify existing ones
-    steps: [
-      ...DEMO_ONE_ONBOARDING_FLOW.steps,
-      {
-        id: 'personalization_survey',
-        name: 'Quick Personalization Survey',
-        index: 4,
-        category: 'personalization',
-        isOptional: true,
-      },
-    ],
-  },
-  demoTwoControl: {
-    ...DEMO_TWO_ONBOARDING_FLOW,
-    variant: 'control',
-  },
-  demoTwoExperimental: {
-    ...DEMO_TWO_ONBOARDING_FLOW,
-    flowId: 'demo_two_flow_experimental',
-    variant: 'experimental',
-    // Could add more steps to test if single-screen vs multi-screen performs better
-  },
-};
-
-/**
- * Helper function to get onboarding flow config based on choice and variant
- */
-export function getOnboardingFlowConfig(
-  flowType: 'demoOne' | 'demoTwo' | 'imageAnalyzer' | 'payments' = 'demoOne',
-  variant?: 'control' | 'experimental',
-): OnboardingFlowConfig {
-  if (flowType === 'demoOne') {
-    if (variant === 'experimental') {
-      return ONBOARDING_VARIANTS.demoOneExperimental;
-    }
-    return variant
-      ? ONBOARDING_VARIANTS.demoOneControl
-      : DEMO_ONE_ONBOARDING_FLOW;
-  }
-
-  if (flowType === 'demoTwo') {
-    if (variant === 'experimental') {
-      return ONBOARDING_VARIANTS.demoTwoExperimental;
-    }
-    return variant
-      ? ONBOARDING_VARIANTS.demoTwoControl
-      : DEMO_TWO_ONBOARDING_FLOW;
-  }
-
-  return FEATURE_ONBOARDING_FLOWS[flowType];
-}
-
-// Export the main flows for easy access
-export const MAIN_ONBOARDING_FLOW = DEMO_ONE_ONBOARDING_FLOW; // Default export for backward compatibility

package/2/apps/native/src/features/onboarding/demo-one/app/index.tsx

@@ -1,43 +0,0 @@
-import { useLocalSearchParams, useRouter } from 'expo-router';
-import React from 'react';
-import { SafeAreaView } from 'react-native-safe-area-context';
-
-import { FocusAwareStatusBar } from '@/components/ui';
-import { useIsFirstTime } from '@/lib/hooks';
-
-import { Onboarding } from '../../components/onboarding';
-import { AppOnboardingData } from '../data';
-
-/**
- * Demo One Onboarding Screen
- * Displays the new multi-step onboarding flow with animations
- */
-export default function DemoOneOnboarding() {
-  const router = useRouter();
-  const params = useLocalSearchParams<{ returnTo?: string }>();
-  const [, completeOnboarding] = useIsFirstTime();
-
-  const handleComplete = () => {
-    console.log('[DemoOneOnboarding] Completing onboarding…');
-    completeOnboarding(); // ← writes flag & flushes
-    const returnTo = params.returnTo as string | undefined;
-    if (returnTo) {
-      console.log(`[DemoOneOnboarding] Returning to ${returnTo}…`);
-      router.replace(returnTo as any);
-      return;
-    }
-    console.log('[DemoOneOnboarding] Navigating to login…');
-    router.replace('/(auth)/login'); // default behavior
-  };
-
-  return (
-    <SafeAreaView className="flex-1">
-      <FocusAwareStatusBar />
-      <Onboarding
-        data={AppOnboardingData}
-        onComplete={handleComplete}
-        testID="demo-one-onboarding"
-      />
-    </SafeAreaView>
-  );
-}

package/2/apps/native/src/features/onboarding/demo-one/data.ts

@@ -1,32 +0,0 @@
-import type { OnboardingItem } from '../components/onboarding';
-
-export const AppOnboardingData: OnboardingItem[] = [
-  {
-    id: '1',
-    title: 'Welcome to VibeFast',
-    description:
-      'Build and ship your React Native apps faster with our production-ready starter kit. Save weeks of development time with our proven architecture.',
-    lottieAnim: require('@assets/lottie-animations/onboarding-1.json'),
-  },
-  {
-    id: '2',
-    title: 'AI-Powered Development',
-    description:
-      'Leverage cutting-edge AI features built right into your app. From chatbots to image analysis, everything is ready to use out of the box.',
-    lottieAnim: require('@assets/lottie-animations/onboarding-2.json'),
-  },
-  {
-    id: '3',
-    title: 'Production Ready',
-    description:
-      'Complete with authentication, payments, push notifications, and more. Deploy to the App Store and Google Play with confidence.',
-    lottieAnim: require('@assets/lottie-animations/onboarding-3.json'),
-  },
-  {
-    id: '4',
-    title: 'Developer Experience',
-    description:
-      'TypeScript, Testing, Linting, and CI/CD all configured. Focus on building features, not setting up tooling.',
-    lottieAnim: require('@assets/lottie-animations/onboarding-4.json'),
-  },
-];

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

@@ -1,323 +0,0 @@
-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,
-  };
-}