vibefast-cli 1.1.3 → 1.2.1

package/recipes/ios-widget/recipe.json

@@ -96,44 +96,35 @@
   "dependencies": {
     "expo": ["@bacons/apple-targets"]
   },
+  "plugins": [
+    {
+      "name": "@bacons/apple-targets",
+      "config": "{\n      targets: [\n        {\n          name: 'VibeFastWidget',\n          type: 'widget',\n          bundleIdentifier: `${Env.BUNDLE_ID}.widget`,\n          entitlements: {\n            'com.apple.security.application-groups': [\n              `group.${Env.BUNDLE_ID}.shared`,\n            ],\n          },\n        },\n      ],\n    }"
+    }
+  ],
+  "iosConfig": {
+    "appleTeamId": "Env.APPLE_TEAM_ID",
+    "entitlements": "{\n      'com.apple.security.application-groups': [`group.${Env.BUNDLE_ID}.shared`],\n    }"
+  },
   "env": [
     {
       "key": "APPLE_TEAM_ID",
       "description": "Apple Developer Team ID (used to sign widgets).",
       "example": "ABCDE12345",
       "link": "https://developer.apple.com/account/#/membership",
-      "file": "apps/native/.env.local"
+      "file": "apps/native/env.js"
     }
   ],
   "configuration": {
     "env": {
-      "constants": [
-        "const APPLE_TEAM_ID = 'replace_me';"
-      ],
+      "constants": ["const APPLE_TEAM_ID = 'replace_me';"],
       "buildTime": {
-        "schema": [
-          "  APPLE_TEAM_ID: z.string(),"
-        ],
-        "env": [
-          "  APPLE_TEAM_ID: process.env.APPLE_TEAM_ID,"
-        ]
+        "schema": ["  APPLE_TEAM_ID: z.string(),"],
+        "env": ["  APPLE_TEAM_ID,"]
       }
     }
   },
-  "manualSteps": [
-    {
-      "title": "Verify widget plugin",
-      "description": "The CLI adds the @bacons/apple-targets plugin automatically. Confirm it exists in app.config.ts.",
-      "file": "apps/native/app.config.ts",
-      "content": "[\n  '@bacons/apple-targets',\n  {\n    targets: [\n      {\n        name: 'VibeFastWidget',\n        type: 'widget',\n        bundleIdentifier: `${Env.BUNDLE_ID}.widget`,\n        entitlements: {\n          'com.apple.security.application-groups': [\n            'group.com.vibefast.vibefast',\n          ],\n        },\n      },\n    ],\n  },\n]"
-    },
-    {
-      "title": "Configure App Groups",
-      "description": "Ensure your main app has App Groups entitlements in app.config.ts",
-      "file": "apps/native/app.config.ts",
-      "content": "ios: {\n  entitlements: {\n    'com.apple.security.application-groups': ['group.com.vibefast.shared'],\n  },\n}"
-    }
-  ],
+  "manualSteps": [],
   "postInstall": {
     "instructions": [
       "Widget target files have been added",

package/recipes/onboarding/apps/native/src/features/onboarding/analytics/index.ts

@@ -0,0 +1,9 @@
+// Export analytics service and types
+
+// Export enhanced components
+export * from '../components/onboarding-with-analytics';
+// Export configuration
+export * from '../config/onboarding-flow-config';
+// Export React hooks
+export * from '../hooks/use-onboarding-analytics';
+export * from '../services/onboarding-analytics';

package/recipes/onboarding/apps/native/src/features/onboarding/components/onboarding-with-analytics.tsx

@@ -0,0 +1,141 @@
+import React, { useCallback, useEffect } from 'react';
+
+import { MAIN_ONBOARDING_FLOW } from '../config/onboarding-flow-config';
+import { useOnboardingAnalytics } from '../hooks/use-onboarding-analytics';
+import { Onboarding } from './onboarding';
+
+/**
+ * Props for the analytics-enabled onboarding component
+ */
+export type OnboardingWithAnalyticsProps = {
+  userType?: 'new' | 'returning' | 'migrated';
+  variant?: 'control' | 'experimental';
+  onComplete?: () => void;
+  onSkip?: () => void;
+};
+
+/**
+ * Enhanced onboarding component that automatically tracks user progress
+ * and behavior through the onboarding flow with PostHog analytics.
+ *
+ * This component wraps your existing Onboarding component and adds:
+ * - Automatic step tracking
+ * - Flow completion analytics
+ * - User abandonment detection
+ * - A/B test variant tracking
+ *
+ * Usage:
+ * ```tsx
+ * <OnboardingWithAnalytics
+ *   userType="new"
+ *   variant="experimental"
+ *   onComplete={() => router.push('/home')}
+ * />
+ * ```
+ */
+export function OnboardingWithAnalytics({
+  userType = 'new',
+  variant,
+  onComplete,
+  onSkip,
+}: OnboardingWithAnalyticsProps) {
+  // Get the appropriate flow configuration
+  const flowConfig = variant
+    ? { ...MAIN_ONBOARDING_FLOW, variant }
+    : MAIN_ONBOARDING_FLOW;
+
+  // Initialize onboarding analytics
+  const analytics = useOnboardingAnalytics({
+    flowConfig,
+    userType,
+    autoStart: true, // Automatically start tracking when component mounts
+  });
+
+  // Track when component mounts (onboarding starts)
+  useEffect(() => {
+    // Analytics are auto-started, but we can add additional properties
+    analytics.startFlow().then((sessionId) => {
+      console.log(`Onboarding session started: ${sessionId}`);
+    });
+  }, [analytics]);
+
+  // Enhanced completion handler with analytics
+  const handleComplete = useCallback(async () => {
+    await analytics.completeFlow();
+    onComplete?.();
+  }, [analytics, onComplete]);
+
+  // Enhanced skip handler with analytics (unused but kept for future use)
+  // const handleSkip = useCallback(async () => {
+  //   await analytics.abandonFlow('user_skipped');
+  //   onSkip?.();
+  // }, [analytics, onSkip]);
+
+  // Example handlers for step-level tracking (unused but kept for future use)
+  // const handleStepTransition = useCallback(
+  //   async (stepId: string, action: 'viewed' | 'completed') => {
+  //     if (action === 'viewed') {
+  //       await analytics.trackStepViewed(stepId, {
+  //         timestamp: new Date().toISOString(),
+  //         user_type: userType,
+  //         variant: variant || 'default',
+  //       });
+  //     } else if (action === 'completed') {
+  //       await analytics.trackStepCompleted(stepId, {
+  //         timestamp: new Date().toISOString(),
+  //         interaction_method: 'button', // Could be 'swipe', 'tap', etc.
+  //       });
+  //     }
+  //   },
+  //   [analytics, userType, variant]
+  // );
+
+  // Pass enhanced handlers to your existing Onboarding component
+  // Note: You'll need to provide the actual onboarding data
+  return (
+    <Onboarding
+      data={
+        [
+          // Add your actual onboarding data here
+          // This is just a placeholder structure
+        ]
+      }
+      onComplete={handleComplete}
+      testID="onboarding-with-analytics"
+    />
+  );
+}
+
+/**
+ * Example of how to integrate with your demo screens:
+ * You can enhance your existing demo-one.tsx and demo-two.tsx files
+ * to include step tracking like this:
+ */
+
+/*
+// In your demo-one.tsx file:
+export default function DemoOneScreen() {
+  const { trackStepViewed, trackStepCompleted } = useContext(OnboardingAnalyticsContext);
+  
+  useEffect(() => {
+    trackStepViewed('demo_one');
+  }, []);
+
+  const handleContinue = () => {
+    trackStepCompleted('demo_one', { 
+      interaction_method: 'button',
+      time_spent_seconds: Math.floor((Date.now() - startTime) / 1000)
+    });
+    // Navigate to next step
+  };
+
+  const handleSkip = () => {
+    trackStepSkipped('demo_one', 'user_choice');
+    // Skip to end or next step
+  };
+
+  return (
+    // Your existing UI
+  );
+}
+*/

package/recipes/onboarding/apps/native/src/features/onboarding/components/onboarding.tsx

@@ -0,0 +1,173 @@
+import LottieView from 'lottie-react-native';
+import React, { useRef, useState } from 'react';
+import { Dimensions, View, type ViewToken } from 'react-native';
+import Animated, {
+  useAnimatedScrollHandler,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+import { Button, Text } from '@/components/ui';
+import ScrollingPaginationDots from '@/components/ui/core/pagination-dots';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export type OnboardingItem = {
+  id: string;
+  title: string;
+  description: string;
+  lottieAnim: any; // Lottie animation source
+};
+
+export type OnboardingProps = {
+  data: OnboardingItem[];
+  onComplete: () => void;
+  testID?: string;
+};
+
+/**
+ * Reusable Onboarding component with horizontal swipeable screens,
+ * Lottie animations, and progress dots
+ */
+export function Onboarding({ data, onComplete, testID }: OnboardingProps) {
+  const theme = useThemeConfig();
+  const scrollX = useSharedValue(0);
+  const flatListRef = useRef<Animated.FlatList<OnboardingItem>>(null);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const handleScroll = useAnimatedScrollHandler((event) => {
+    scrollX.value = event.contentOffset.x;
+  });
+
+  const onViewableItemsChanged = ({
+    viewableItems,
+  }: {
+    viewableItems: ViewToken[];
+  }) => {
+    if (viewableItems.length > 0) {
+      const index = viewableItems[0].index || 0;
+      setCurrentIndex(index);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentIndex < data.length - 1) {
+      flatListRef.current?.scrollToIndex({
+        index: currentIndex + 1,
+        animated: true,
+      });
+    } else {
+      onComplete();
+    }
+  };
+
+  const handleSkip = () => {
+    onComplete();
+  };
+
+  const renderItem = ({ item }: { item: OnboardingItem }) => (
+    <View
+      style={{ width: SCREEN_WIDTH }}
+      className="flex-1 items-center justify-center px-8"
+    >
+      {/* Lottie Animation */}
+      <View className="h-80 w-full items-center justify-center">
+        <LottieView
+          source={item.lottieAnim}
+          autoPlay
+          loop
+          style={{
+            width: 250,
+            height: 250,
+          }}
+          testID={`${testID}-lottie-${item.id}`}
+        />
+      </View>
+
+      {/* Title */}
+      <Text
+        className="my-4 text-center text-4xl font-bold"
+        testID={`${testID}-title-${item.id}`}
+      >
+        {item.title}
+      </Text>
+
+      {/* Description */}
+      <Text
+        className="text-center text-lg leading-6"
+        style={{ color: theme.colors.mutedForeground }}
+        testID={`${testID}-description-${item.id}`}
+      >
+        {item.description}
+      </Text>
+    </View>
+  );
+
+  const isLastSlide = currentIndex === data.length - 1;
+
+  return (
+    <View className="flex-1" testID={testID}>
+      {/* Main Content */}
+      <View className="flex-1">
+        <Animated.FlatList
+          ref={flatListRef}
+          data={data}
+          keyExtractor={(item) => item.id}
+          renderItem={renderItem}
+          horizontal
+          pagingEnabled
+          showsHorizontalScrollIndicator={false}
+          onScroll={handleScroll}
+          onViewableItemsChanged={onViewableItemsChanged}
+          viewabilityConfig={{
+            itemVisiblePercentThreshold: 50,
+          }}
+          scrollEventThrottle={16}
+          testID={`${testID}-flatlist`}
+        />
+      </View>
+
+      {/* Progress Dots */}
+      <View className="items-center py-6">
+        <ScrollingPaginationDots
+          count={data.length}
+          scrollX={scrollX}
+          slideWidth={SCREEN_WIDTH}
+          dotColor={theme.colors.primary}
+          inactiveDotColor={theme.colors.mutedForeground}
+          dotSize={10}
+          spacing={12}
+          inactiveDotOpacity={0.3}
+          maxVisibleDots={5}
+        />
+      </View>
+
+      {/* Action Buttons */}
+      <View className="flex-row items-center justify-between px-8 pb-8">
+        <Button
+          variant="ghost"
+          label={translate('onboarding.skip')}
+          onPress={handleSkip}
+          testID={`${testID}-skip-button`}
+          className="flex-1"
+        />
+
+        <View className="w-4" />
+
+        <Button
+          label={
+            isLastSlide
+              ? translate('onboarding.get_started')
+              : translate('onboarding.next')
+          }
+          onPress={handleNext}
+          testID={`${testID}-${isLastSlide ? 'complete' : 'next'}-button`}
+          className="flex-1"
+        />
+      </View>
+    </View>
+  );
+}
+
+export default Onboarding;

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>
+  );
+}