vibefast-cli 1.2.1 → 1.3.1

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

@@ -1,6 +1,9 @@
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import * as Haptics from 'expo-haptics';
 import React, { useEffect } from 'react';
 import { View } from 'react-native';
 import Animated, {
+  Easing,
   FadeIn,
   FadeOut,
   useAnimatedStyle,
@@ -8,12 +11,10 @@ import Animated, {
   withRepeat,
   withSequence,
   withTiming,
-  Easing,
 } from 'react-native-reanimated';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { Text, Button } from '@/components/ui';
+
+import { Button, Text } from '@/components/ui';
 import { useThemeConfig } from '@/lib/use-theme-config';
-import * as Haptics from 'expo-haptics';
 
 const ScanDemo = () => {
   const theme = useThemeConfig();
@@ -37,7 +38,7 @@ const ScanDemo = () => {
       -1,
       true,
     );
-  }, []);
+  }, [checkmarkScale, scanLineY]);
 
   const animatedLineStyle = useAnimatedStyle(() => ({
     transform: [{ translateY: scanLineY.value }],

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

@@ -1,10 +1,10 @@
-import React from 'react';
-import { View, ScrollView } 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';
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import Animated, { FadeIn, FadeInDown, FadeOut } from 'react-native-reanimated';
+
+import { Button, Pressable, Text } from '@/components/ui';
 
 interface MainReasonStepProps {
   selectedReason: string | null;
@@ -50,8 +50,6 @@ export function MainReasonStep({
   onSelectReason,
   onNext,
 }: MainReasonStepProps) {
-  const theme = useThemeConfig();
-
   return (
     <Animated.View
       entering={FadeIn}

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

@@ -1,11 +1,12 @@
-import React, { useState } from 'react';
-import { View, Alert, Linking } from 'react-native';
-import Animated, { ZoomIn, FadeIn, FadeOut } from 'react-native-reanimated';
-import { Text, Button } from '@/components/ui';
-import { useThemeConfig } from '@/lib/use-theme-config';
 import { MaterialCommunityIcons } from '@expo/vector-icons';
-import * as Notifications from 'expo-notifications';
 import * as Haptics from 'expo-haptics';
+import * as Notifications from 'expo-notifications';
+import React, { useState } from 'react';
+import { Alert, Linking, View } from 'react-native';
+import Animated, { FadeIn, FadeOut, ZoomIn } from 'react-native-reanimated';
+
+import { Button, Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
 
 interface NotificationStepProps {
   onEnable: () => void;

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

@@ -1,10 +1,10 @@
-import React from 'react';
-import { View, ScrollView } 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';
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import Animated, { FadeIn, FadeInDown, FadeOut } from 'react-native-reanimated';
+
+import { Button, Pressable, Text } from '@/components/ui';
 
 interface OverspendStepProps {
   selectedCategories: string[];
@@ -57,8 +57,6 @@ export function OverspendStep({
   onToggleCategory,
   onNext,
 }: OverspendStepProps) {
-  const theme = useThemeConfig();
-
   return (
     <Animated.View
       entering={FadeIn}

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

@@ -1,19 +1,20 @@
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
 import React, { useEffect, useState } from 'react';
-import { View, Dimensions } from 'react-native';
+import { Dimensions, View } from 'react-native';
 import Animated, {
+  Easing,
   FadeIn,
+  interpolate,
   useAnimatedStyle,
   useSharedValue,
   withRepeat,
   withSequence,
   withTiming,
-  Easing,
-  interpolate,
 } from 'react-native-reanimated';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
+
 import { Text } from '@/components/ui';
 import { useThemeConfig } from '@/lib/use-theme-config';
-import { LinearGradient } from 'expo-linear-gradient';
 
 interface PersonalizingStepProps {
   onComplete: () => void;
@@ -86,13 +87,13 @@ export function PersonalizingStep({ onComplete }: PersonalizingStepProps) {
     }, 2000);
 
     return () => clearInterval(interval);
-  }, []);
+  }, [circleScale, iconOpacity, onComplete, ringRotation]);
 
   useEffect(() => {
     progress.value = withTiming((currentStep + 1) / STEPS.length, {
       duration: 500,
     });
-  }, [currentStep]);
+  }, [currentStep, progress]);
 
   const animatedRingStyle = useAnimatedStyle(() => ({
     transform: [{ rotate: `${ringRotation.value}deg` }],

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

@@ -1,11 +1,12 @@
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import * as Haptics from 'expo-haptics';
+import * as StoreReview from 'expo-store-review';
 import React, { useState } from 'react';
 import { View } from 'react-native';
-import Animated, { FadeInDown, FadeIn, FadeOut } from 'react-native-reanimated';
-import { Text, Button, Pressable } from '@/components/ui';
+import Animated, { FadeIn, FadeInDown, FadeOut } from 'react-native-reanimated';
+
+import { Button, Pressable, Text } from '@/components/ui';
 import { useThemeConfig } from '@/lib/use-theme-config';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import * as StoreReview from 'expo-store-review';
-import * as Haptics from 'expo-haptics';
 
 interface RatingStepProps {
   onNext: () => void;

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

@@ -1,10 +1,10 @@
+import * as Haptics from 'expo-haptics';
 import React, { useState } from 'react';
-import { View, ScrollView } from 'react-native';
-import Animated, { FadeInDown, FadeIn, FadeOut } from 'react-native-reanimated';
-import { Text, Button, Pressable } from '@/components/ui';
-import { useThemeConfig } from '@/lib/use-theme-config';
+import { ScrollView, View } from 'react-native';
+import Animated, { FadeIn, FadeInDown, FadeOut } from 'react-native-reanimated';
+
+import { Button, Pressable, Text } from '@/components/ui';
 import { DateTimePickerComponent } from '@/components/ui/date-time-picker';
-import * as Haptics from 'expo-haptics';
 
 interface ReminderStepProps {
   selectedFrequency: string | null;
@@ -30,7 +30,6 @@ export function ReminderStep({
   onSelectTime,
   onNext,
 }: ReminderStepProps) {
-  const theme = useThemeConfig();
   const showTimePicker =
     selectedFrequency === 'daily' || selectedFrequency === 'purchase';
   const [customDate, setCustomDate] = useState(new Date());

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

@@ -1,10 +1,11 @@
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import * as Haptics from 'expo-haptics';
 import React from 'react';
 import { View } from 'react-native';
-import Animated, { ZoomIn, FadeIn, FadeOut } from 'react-native-reanimated';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { Text, Button } from '@/components/ui';
+import Animated, { FadeIn, FadeOut, ZoomIn } from 'react-native-reanimated';
+
+import { Button, Text } from '@/components/ui';
 import { useThemeConfig } from '@/lib/use-theme-config';
-import * as Haptics from 'expo-haptics';
 
 interface SafetyStepProps {
   onComplete: () => void;

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

@@ -1,10 +1,10 @@
-import React from 'react';
-import { View, ScrollView } 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';
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import Animated, { FadeIn, FadeInDown, FadeOut } from 'react-native-reanimated';
+
+import { Button, Pressable, Text } from '@/components/ui';
 
 interface StruggleStepProps {
   selectedStruggle: string | null;
@@ -50,8 +50,6 @@ export function StruggleStep({
   onSelectStruggle,
   onNext,
 }: StruggleStepProps) {
-  const theme = useThemeConfig();
-
   return (
     <Animated.View
       entering={FadeIn}

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

@@ -1,12 +1,13 @@
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import * as Clipboard from 'expo-clipboard';
+import * as Haptics from 'expo-haptics';
+import { LinearGradient } from 'expo-linear-gradient';
 import React, { useState } from 'react';
-import { View, ScrollView, TouchableOpacity } from 'react-native';
+import { ScrollView, TouchableOpacity, View } from 'react-native';
 import Animated, { FadeIn, FadeOut, ZoomIn } from 'react-native-reanimated';
-import { LinearGradient } from 'expo-linear-gradient';
-import { MaterialCommunityIcons } from '@expo/vector-icons';
-import { Text, Button, Pressable } from '@/components/ui';
+
+import { Button, Pressable, Text } from '@/components/ui';
 import { useThemeConfig } from '@/lib/use-theme-config';
-import * as Haptics from 'expo-haptics';
-import * as Clipboard from 'expo-clipboard';
 
 /**
  * Recommended theme colors for this onboarding (from CashPilot/Expense Tracker app)

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

@@ -1,13 +1,14 @@
+import { MaterialCommunityIcons } from '@expo/vector-icons';
 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';
+import { useThemeConfig } from '@/lib/use-theme-config';
 
 interface OnboardingHeaderProps {
   onBack: () => void;
@@ -25,7 +26,7 @@ export function OnboardingHeader({
 
   React.useEffect(() => {
     progressValue.value = withTiming(progress, { duration: 500 });
-  }, [progress]);
+  }, [progress, progressValue]);
 
   const animatedProgressStyle = useAnimatedStyle(() => ({
     width: `${progressValue.value * 100}%`,

package/recipes/onboarding/recipe.json

@@ -1,15 +1,18 @@
 {
   "name": "onboarding",
   "version": "1.0.0",
-  "description": "Premium onboarding flows (demo-one, expense-tracker)",
+  "description": "User onboarding flow",
   "copy": [
     {
       "from": "apps/native/src/features/onboarding",
       "to": "apps/native/src/features/onboarding"
     }
   ],
-  "target": "native",
-  "dependencies": {
-    "expo": ["react-native-reanimated", "react-native-gesture-handler"]
-  }
-}
+  "nav": {
+    "href": "/(root)/(protected)/onboarding",
+    "label": "Onboarding",
+    "icon": "🎯",
+    "color": "#84CC16"
+  },
+  "target": "native"
+}

package/recipes/payments/apps/native/src/app/paywall/index.tsx

@@ -0,0 +1,74 @@
+import { router, Stack } from 'expo-router';
+import React, { useMemo } from 'react';
+import { ScrollView, View } from 'react-native';
+
+import { FeatureButton, FocusAwareStatusBar } from '@/components/ui';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export default function PaywallSelection() {
+  const theme = useThemeConfig();
+  const optionsTitle = translate('paywall.options_title');
+  const screenOptions = useMemo(
+    () => ({
+      title: optionsTitle,
+      headerShown: true,
+      headerBackButtonDisplayMode: 'generic' as const,
+    }),
+    [optionsTitle],
+  );
+
+  const paywallOptions = [
+    {
+      id: 'remote',
+      title: translate('paywall.remote_title'),
+      icon: '💳',
+      color: '#FBBF24', // Amber
+      description: translate('paywall.remote_description'),
+      route: '/paywall/remote',
+      testID: 'remote-paywall-option',
+    },
+    {
+      id: 'local',
+      title: translate('paywall.local_title'),
+      icon: '🛒',
+      color: '#10B981', // Emerald
+      description: translate('paywall.local_description'),
+      route: '/paywall/local',
+      testID: 'local-paywall-option',
+    },
+  ];
+
+  const handleOptionPress = (route: string) => {
+    router.push(route as any);
+  };
+
+  return (
+    <>
+      <FocusAwareStatusBar />
+      <Stack.Screen options={screenOptions} />
+      <ScrollView
+        style={{ backgroundColor: theme.colors.background }}
+        className="flex-1"
+        showsVerticalScrollIndicator={false}
+      >
+        <View className="px-6 py-8">
+          <View className="-mx-2 flex-row flex-wrap">
+            {paywallOptions.map((option) => (
+              <View key={option.id} className="w-1/2 px-2 pb-4">
+                <FeatureButton
+                  title={option.title}
+                  icon={option.icon}
+                  color={option.color}
+                  description={option.description}
+                  testID={option.testID}
+                  onPress={() => handleOptionPress(option.route)}
+                />
+              </View>
+            ))}
+          </View>
+        </View>
+      </ScrollView>
+    </>
+  );
+}

package/recipes/payments/apps/native/src/app/paywall/local.tsx

@@ -0,0 +1,25 @@
+import { Stack } from 'expo-router';
+import React, { useMemo } from 'react';
+
+import LocalPaywall from '@/features/payments/app/local-paywall';
+import { RevenueCatAdapter } from '@/features/payments/services/revenuecat-adapter';
+import { translate } from '@/lib';
+
+export default function LocalPaywallScreen() {
+  const paymentService = useMemo(() => new RevenueCatAdapter(), []);
+  const localTitle = translate('paywall.local_title');
+  const screenOptions = useMemo(
+    () => ({
+      title: localTitle,
+      headerShown: false,
+    }),
+    [localTitle],
+  );
+
+  return (
+    <>
+      <Stack.Screen options={screenOptions} />
+      <LocalPaywall paymentService={paymentService} />
+    </>
+  );
+}

package/recipes/payments/apps/native/src/app/paywall/remote.tsx

@@ -0,0 +1,23 @@
+import { Stack } from 'expo-router';
+import React, { useMemo } from 'react';
+
+import RemotePaywall from '@/features/payments/app/remote-paywall';
+import { translate } from '@/lib';
+
+export default function RemotePaywallScreen() {
+  const remoteTitle = translate('paywall.remote_title');
+  const screenOptions = useMemo(
+    () => ({
+      title: remoteTitle,
+      headerShown: true,
+    }),
+    [remoteTitle],
+  );
+
+  return (
+    <>
+      <Stack.Screen options={screenOptions} />
+      <RemotePaywall />
+    </>
+  );
+}

package/recipes/payments/packages/backend/convex/payments.ts

@@ -3,6 +3,24 @@ import { v } from 'convex/values';
 
 import { mutation, query } from './_generated/server';
 
+// ============================================================================
+// Payment Provider Exports
+// All payment functions are delegated through the provider interface.
+// Change ACTIVE_PROVIDER in payments/index.ts to switch providers.
+// ============================================================================
+
+export {
+  createCheckout,
+  createPortalSession,
+  getSubscription,
+  cancelSubscription,
+  getPayments,
+} from './payments/index';
+
+// ============================================================================
+// Credits & Consumable Purchases
+// ============================================================================
+
 /**
  * Record a consumable purchase (like credits) in the database
  */
@@ -35,8 +53,8 @@ export const recordConsumablePurchase = mutation({
       creditsToAdd = args.quantity * 2; // Premium products give 2x credits
     }
 
-    // Update user credits - safely access credits field
-    const currentCredits = (user as any).credits || 0;
+    // Update user credits - credits is optional in schema
+    const currentCredits = user.credits ?? 0;
     const newTotalCredits = currentCredits + creditsToAdd;
 
     await ctx.db.patch(userId, {
@@ -73,7 +91,7 @@ export const getUserCredits = query({
     }
     const user = await ctx.db.get(userId);
 
-    return (user as any)?.credits || 0;
+    return user?.credits ?? 0;
   },
 });
 

package/recipes/payments/recipe.json

@@ -1,7 +1,7 @@
 {
   "name": "payments",
   "version": "1.0.0",
-  "description": "RevenueCat payments",
+  "description": "In-app purchases and subscriptions",
   "copy": [
     {
       "from": "apps/native/src/app/paywall",
@@ -12,57 +12,37 @@
       "to": "apps/native/src/features/payments"
     },
     {
-      "from": "apps/native/src/api-client/payments.ts",
-      "to": "apps/native/src/api-client/payments.ts"
+      "from": "packages/backend/convex/payments",
+      "to": "packages/backend/convex/payments"
     },
     {
       "from": "packages/backend/convex/payments.ts",
       "to": "packages/backend/convex/payments.ts"
-    },
-    {
-      "from": "packages/backend/convex/payments",
-      "to": "packages/backend/convex/payments"
     }
   ],
-  "configuration": {
-    "apiClient": {
-      "exports": ["export { type PaymentsApi, paymentsApi } from './payments';"]
-    }
-  },
   "nav": {
     "href": "/(root)/(protected)/paywall",
     "label": "Payments",
     "icon": "💳",
-    "color": "#EC4899"
+    "color": "#F59E0B"
   },
   "target": "native",
   "dependencies": {
-    "expo": ["react-native-purchases", "react-native-purchases-ui"]
+    "expo": [
+      "react-native-purchases",
+      "react-native-purchases-ui"
+    ]
   },
-  "env": [
-    {
-      "key": "REVENUECAT_API_KEY_APPLE",
-      "description": "RevenueCat API key for iOS",
-      "example": "appl_...",
-      "link": "https://app.revenuecat.com",
-      "required": true
-    },
-    {
-      "key": "REVENUECAT_API_KEY_GOOGLE",
-      "description": "RevenueCat API key for Android",
-      "example": "goog_...",
-      "link": "https://app.revenuecat.com",
-      "required": true
-    }
-  ],
   "manualSteps": [
     {
-      "title": "Configure RevenueCat",
-      "description": "1. Create a project at https://app.revenuecat.com\\n2. Add your app (iOS/Android)\\n3. Configure products/offerings\\n4. Copy API keys to .env.local"
+      "title": "Enable RevenueCat initialization",
+      "description": "Uncomment the PaymentInitializer in root providers so the SDK is initialized on app startup.",
+      "file": "apps/native/src/providers/root-providers.tsx"
     },
     {
-      "title": "Setup App Store / Play Store",
-      "description": "1. Create in-app products in App Store Connect / Google Play Console\\n2. Link to RevenueCat\\n3. Configure entitlements"
+      "title": "Set RevenueCat API keys",
+      "description": "Update your .env files with REVENUECAT_API_KEY_APPLE and REVENUECAT_API_KEY_GOOGLE values from RevenueCat.",
+      "file": "apps/native/.env.local"
     }
   ]
 }

package/recipes/payments-supabase/apps/native/src/app/paywall/index.tsx

@@ -0,0 +1,74 @@
+import { router, Stack } from 'expo-router';
+import React, { useMemo } from 'react';
+import { ScrollView, View } from 'react-native';
+
+import { FeatureButton, FocusAwareStatusBar } from '@/components/ui';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export default function PaywallSelection() {
+  const theme = useThemeConfig();
+  const optionsTitle = translate('paywall.options_title');
+  const screenOptions = useMemo(
+    () => ({
+      title: optionsTitle,
+      headerShown: true,
+      headerBackButtonDisplayMode: 'generic' as const,
+    }),
+    [optionsTitle],
+  );
+
+  const paywallOptions = [
+    {
+      id: 'remote',
+      title: translate('paywall.remote_title'),
+      icon: '💳',
+      color: '#FBBF24', // Amber
+      description: translate('paywall.remote_description'),
+      route: '/paywall/remote',
+      testID: 'remote-paywall-option',
+    },
+    {
+      id: 'local',
+      title: translate('paywall.local_title'),
+      icon: '🛒',
+      color: '#10B981', // Emerald
+      description: translate('paywall.local_description'),
+      route: '/paywall/local',
+      testID: 'local-paywall-option',
+    },
+  ];
+
+  const handleOptionPress = (route: string) => {
+    router.push(route as any);
+  };
+
+  return (
+    <>
+      <FocusAwareStatusBar />
+      <Stack.Screen options={screenOptions} />
+      <ScrollView
+        style={{ backgroundColor: theme.colors.background }}
+        className="flex-1"
+        showsVerticalScrollIndicator={false}
+      >
+        <View className="px-6 py-8">
+          <View className="-mx-2 flex-row flex-wrap">
+            {paywallOptions.map((option) => (
+              <View key={option.id} className="w-1/2 px-2 pb-4">
+                <FeatureButton
+                  title={option.title}
+                  icon={option.icon}
+                  color={option.color}
+                  description={option.description}
+                  testID={option.testID}
+                  onPress={() => handleOptionPress(option.route)}
+                />
+              </View>
+            ))}
+          </View>
+        </View>
+      </ScrollView>
+    </>
+  );
+}

package/recipes/payments-supabase/apps/native/src/app/paywall/local.tsx

@@ -0,0 +1,25 @@
+import { Stack } from 'expo-router';
+import React, { useMemo } from 'react';
+
+import LocalPaywall from '@/features/payments/app/local-paywall';
+import { RevenueCatAdapter } from '@/features/payments/services/revenuecat-adapter';
+import { translate } from '@/lib';
+
+export default function LocalPaywallScreen() {
+  const paymentService = useMemo(() => new RevenueCatAdapter(), []);
+  const localTitle = translate('paywall.local_title');
+  const screenOptions = useMemo(
+    () => ({
+      title: localTitle,
+      headerShown: false,
+    }),
+    [localTitle],
+  );
+
+  return (
+    <>
+      <Stack.Screen options={screenOptions} />
+      <LocalPaywall paymentService={paymentService} />
+    </>
+  );
+}