vibefast-cli 1.1.5 → 1.3.0

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

@@ -0,0 +1,189 @@
+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/recipes/onboarding/apps/native/src/features/onboarding/demo-one/app/index.tsx

@@ -0,0 +1,42 @@
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import React from 'react';
+
+import { FocusAwareStatusBar, SafeAreaView } 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/recipes/onboarding/apps/native/src/features/onboarding/demo-one/data.ts

@@ -0,0 +1,32 @@
+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/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/app/index.tsx

@@ -0,0 +1,43 @@
+/**
+ * Expense Tracker Demo Onboarding Screen
+ * Entry point that wraps InteractiveOnboarding with navigation handling.
+ */
+import { useLocalSearchParams, useRouter } from 'expo-router';
+import React from 'react';
+import { View } from 'react-native';
+
+import { FocusAwareStatusBar } from '@/components/ui';
+import { useIsFirstTime } from '@/lib/hooks';
+
+import { InteractiveOnboarding } from '../components/interactive-onboarding';
+
+export default function ExpenseTrackerOnboarding() {
+  const router = useRouter();
+  const params = useLocalSearchParams<{ returnTo?: string }>();
+  const [, completeOnboarding] = useIsFirstTime();
+
+  const handleComplete = () => {
+    completeOnboarding();
+    const returnTo = params.returnTo as string | undefined;
+    if (returnTo) {
+      router.replace(returnTo as any);
+      return;
+    }
+    router.replace('/(auth)/welcome-signup');
+  };
+
+  const handleSignIn = () => {
+    completeOnboarding();
+    router.replace('/(auth)/login');
+  };
+
+  return (
+    <View className="flex-1 bg-background">
+      <FocusAwareStatusBar />
+      <InteractiveOnboarding
+        onComplete={handleComplete}
+        onSignIn={handleSignIn}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,222 @@
+import React, { useState } from 'react';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+
+import { OnboardingHeader } from './ui/onboarding-header';
+
+import { WelcomeStep } from './steps/welcome-step';
+import { FeatureAIStep } from './steps/feature-ai-step';
+import { FeatureScanStep } from './steps/feature-scan-step';
+import { FeatureManualStep } from './steps/feature-manual-step';
+import { FeatureChatbotStep } from './steps/feature-chatbot-step';
+import { CurrencyStep } from './steps/currency-step';
+import { MainReasonStep } from './steps/main-reason-step';
+import { StruggleStep } from './steps/struggle-step';
+import { OverspendStep } from './steps/overspend-step';
+import { AIToneStep } from './steps/ai-tone-step';
+import { ReminderStep } from './steps/reminder-step';
+import { NotificationStep } from './steps/notification-step';
+import { SafetyStep } from './steps/safety-step';
+import { RatingStep } from './steps/rating-step';
+import { PersonalizingStep } from './steps/personalizing-step';
+import { SafeAreaView } from '@/components/ui';
+
+type OnboardingStep =
+  | 'welcome'
+  | 'feature_ai'
+  | 'feature_scan'
+  | 'feature_manual'
+  | 'feature_chatbot'
+  | 'currency'
+  | 'main_reason'
+  | 'struggle'
+  | 'overspend'
+  | 'spend_level'
+  | 'ai_tone'
+  | 'reminder'
+  | 'notification'
+  | 'safety'
+  | 'rating'
+  | 'personalizing';
+
+const STEPS_ORDER: OnboardingStep[] = [
+  'welcome',
+  'feature_ai',
+  'feature_scan',
+  'feature_manual',
+  'feature_chatbot',
+  'currency',
+  'main_reason',
+  'struggle',
+  'overspend',
+  // 'spend_level',
+  'ai_tone',
+  'reminder',
+  'notification',
+  'safety',
+  'rating',
+  'personalizing',
+];
+
+interface InteractiveOnboardingProps {
+  onComplete: () => void;
+  onSignIn: () => void;
+}
+
+export function InteractiveOnboarding({
+  onComplete,
+  onSignIn,
+}: InteractiveOnboardingProps) {
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+  const [direction, setDirection] = useState<'forward' | 'backward'>('forward');
+
+  // State for all steps
+  const [currency, setCurrency] = useState<string | null>(null);
+  const [mainReason, setMainReason] = useState<string | null>(null);
+  const [struggle, setStruggle] = useState<string | null>(null);
+  const [overspendCategories, setOverspendCategories] = useState<string[]>([]);
+  const [aiTone, setAiTone] = useState<string | null>(null);
+  const [reminderFreq, setReminderFreq] = useState<string | null>(null);
+  const [reminderTime, setReminderTime] = useState<string>('9 PM');
+
+  // Spend Level State (Min/Max)
+  const [minSpend, setMinSpend] = useState('');
+  const [maxSpend, setMaxSpend] = useState('');
+
+  const currentStep = STEPS_ORDER[currentStepIndex];
+
+  const handleNext = () => {
+    if (currentStepIndex < STEPS_ORDER.length - 1) {
+      setDirection('forward');
+      setCurrentStepIndex((prev) => prev + 1);
+    } else {
+      onComplete();
+    }
+  };
+
+  const handleBack = () => {
+    if (currentStepIndex > 0) {
+      setDirection('backward');
+      setCurrentStepIndex((prev) => prev - 1);
+    }
+  };
+
+  const toggleOverspendCategory = (id: string) => {
+    setOverspendCategories((prev) =>
+      prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id],
+    );
+  };
+
+  // Custom entering/exiting animations based on direction
+  // Using Fade for premium feel as requested
+  return (
+    <SafeAreaView className="flex-1 bg-background items-center">
+      <Animated.View className="flex-1 w-full md:max-w-4xl">
+        {currentStep !== 'welcome' && currentStep !== 'personalizing' && (
+          <OnboardingHeader
+            onBack={handleBack}
+            canGoBack={currentStepIndex > 0}
+            progress={(currentStepIndex + 1) / STEPS_ORDER.length}
+          />
+        )}
+
+        {/* We use a key to force re-render and trigger animations */}
+        <Animated.View
+          key={currentStep}
+          className="flex-1"
+          entering={FadeIn.duration(600)}
+          exiting={FadeOut.duration(400)}
+        >
+          {currentStep === 'welcome' && (
+            <WelcomeStep onNext={handleNext} onSignIn={onSignIn} />
+          )}
+
+          {currentStep === 'feature_ai' && (
+            <FeatureAIStep onNext={handleNext} />
+          )}
+          {currentStep === 'feature_scan' && (
+            <FeatureScanStep onNext={handleNext} />
+          )}
+          {currentStep === 'feature_manual' && (
+            <FeatureManualStep onNext={handleNext} />
+          )}
+          {currentStep === 'feature_chatbot' && (
+            <FeatureChatbotStep onNext={handleNext} />
+          )}
+
+          {currentStep === 'currency' && (
+            <CurrencyStep
+              selectedCurrency={currency}
+              onSelectCurrency={setCurrency}
+              onNext={handleNext}
+            />
+          )}
+
+          {currentStep === 'main_reason' && (
+            <MainReasonStep
+              selectedReason={mainReason}
+              onSelectReason={setMainReason}
+              onNext={handleNext}
+            />
+          )}
+
+          {currentStep === 'struggle' && (
+            <StruggleStep
+              selectedStruggle={struggle}
+              onSelectStruggle={setStruggle}
+              onNext={handleNext}
+            />
+          )}
+
+          {currentStep === 'overspend' && (
+            <OverspendStep
+              selectedCategories={overspendCategories}
+              onToggleCategory={toggleOverspendCategory}
+              onNext={handleNext}
+            />
+          )}
+
+          {/* {currentStep === 'spend_level' && (
+          <SpendLevelStep
+            currencyCode={currency}
+            minSpend={minSpend}
+            maxSpend={maxSpend}
+            onSetMinSpend={setMinSpend}
+            onSetMaxSpend={setMaxSpend}
+            onNext={handleNext}
+          />
+        )} */}
+
+          {currentStep === 'ai_tone' && (
+            <AIToneStep
+              selectedTone={aiTone}
+              onSelectTone={setAiTone}
+              onNext={handleNext}
+            />
+          )}
+
+          {currentStep === 'reminder' && (
+            <ReminderStep
+              selectedFrequency={reminderFreq}
+              selectedTime={reminderTime}
+              onSelectFrequency={setReminderFreq}
+              onSelectTime={setReminderTime}
+              onNext={handleNext}
+            />
+          )}
+
+          {currentStep === 'notification' && (
+            <NotificationStep onEnable={handleNext} onSkip={handleNext} />
+          )}
+
+          {currentStep === 'safety' && <SafetyStep onComplete={handleNext} />}
+
+          {currentStep === 'rating' && <RatingStep onNext={handleNext} />}
+
+          {currentStep === 'personalizing' && (
+            <PersonalizingStep onComplete={onComplete} />
+          )}
+        </Animated.View>
+      </Animated.View>
+    </SafeAreaView>
+  );
+}

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/steps/ai-tone-step.tsx

@@ -0,0 +1,133 @@
+import React from 'react';
+import { View } from 'react-native';
+import Animated, { FadeIn, FadeOut, FadeInDown } from 'react-native-reanimated';
+import { Text, Button, Pressable } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import * as Haptics from 'expo-haptics';
+
+interface AIToneStepProps {
+  selectedTone: string | null;
+  onSelectTone: (tone: string) => void;
+  onNext: () => void;
+}
+
+const TONES = [
+  {
+    id: 'gentle',
+    label: 'Gentle and encouraging',
+    emoji: '😊',
+    desc: 'Positive reinforcement, soft nudges.',
+    color: '#10B981',
+  },
+  {
+    id: 'honest',
+    label: 'Honest but respectful',
+    emoji: '💬',
+    desc: 'Direct facts, no fluff.',
+    color: '#3B82F6',
+  },
+  {
+    id: 'brutal',
+    label: 'Brutally honest',
+    emoji: '🔥',
+    desc: 'Roast me if I overspend.',
+    color: '#EF4444',
+  },
+];
+
+export function AIToneStep({
+  selectedTone,
+  onSelectTone,
+  onNext,
+}: AIToneStepProps) {
+  const theme = useThemeConfig();
+
+  return (
+    <Animated.View
+      entering={FadeIn}
+      exiting={FadeOut}
+      className="flex-1 px-6 pt-4"
+    >
+      <Text className="text-3xl font-bold mb-3">
+        How honest should the AI be?
+      </Text>
+      <Text className="text-lg text-muted-foreground mb-8">
+        Choose your coach's personality.
+      </Text>
+
+      <View className="gap-4 mt-auto">
+        {TONES.map((item, index) => (
+          <Animated.View
+            entering={FadeInDown.delay(index * 100).duration(400)}
+            key={item.id}
+          >
+            <Pressable
+              onPress={() => onSelectTone(item.id)}
+              className={`p-5 rounded-3xl border relative overflow-hidden ${
+                selectedTone === item.id
+                  ? 'border-transparent'
+                  : 'border-border bg-card'
+              }`}
+              style={
+                selectedTone === item.id
+                  ? { borderColor: item.color, borderWidth: 1 }
+                  : {}
+              }
+            >
+              {selectedTone === item.id && (
+                <View
+                  className="absolute inset-0 opacity-10"
+                  style={{ backgroundColor: item.color }}
+                />
+              )}
+
+              <View className="flex-row items-center mb-2">
+                <View
+                  className="w-12 h-12 rounded-full items-center justify-center mr-4"
+                  style={{ backgroundColor: item.color + '20' }}
+                >
+                  <Text className="text-2xl">{item.emoji}</Text>
+                </View>
+                <View className="flex-1">
+                  <Text
+                    className={`text-xl font-bold ${
+                      selectedTone === item.id
+                        ? 'text-foreground'
+                        : 'text-foreground'
+                    }`}
+                  >
+                    {item.label}
+                  </Text>
+                  <Text className="text-muted-foreground leading-5">
+                    {item.desc}
+                  </Text>
+                </View>
+                {selectedTone === item.id && (
+                  <MaterialCommunityIcons
+                    name="check-circle"
+                    size={24}
+                    color={item.color}
+                  />
+                )}
+              </View>
+            </Pressable>
+          </Animated.View>
+        ))}
+      </View>
+
+      <View className="pt-4 border-t border-border bg-background mt-auto">
+        <Button
+          label="Continue"
+          onPress={() => {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+            onNext();
+          }}
+          disabled={!selectedTone}
+          size="lg"
+          className="w-full m-0"
+        />
+      </View>
+    </Animated.View>
+  );
+}