vibefast-cli 1.1.5 → 1.2.1

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

@@ -0,0 +1,139 @@
+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';
+
+interface MainReasonStepProps {
+  selectedReason: string | null;
+  onSelectReason: (reason: string) => void;
+  onNext: () => void;
+}
+
+const REASONS = [
+  {
+    id: 'spend_less',
+    label: 'Spend less without feeling restricted',
+    icon: 'wallet-outline',
+    color: '#10B981',
+  },
+  {
+    id: 'understand',
+    label: 'Understand where my money goes',
+    icon: 'chart-pie',
+    color: '#3B82F6',
+  },
+  {
+    id: 'habits',
+    label: 'Break bad spending habits',
+    icon: 'lightning-bolt-outline',
+    color: '#F59E0B',
+  },
+  {
+    id: 'save',
+    label: 'Save more each month',
+    icon: 'piggy-bank-outline',
+    color: '#8B5CF6',
+  },
+  {
+    id: 'track',
+    label: 'Just track things and see patterns',
+    icon: 'chart-timeline-variant',
+    color: '#EC4899',
+  },
+];
+
+export function MainReasonStep({
+  selectedReason,
+  onSelectReason,
+  onNext,
+}: MainReasonStepProps) {
+  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">
+        What do you want this app to help you with the most?
+      </Text>
+      <Text className="text-lg text-muted-foreground mb-8">
+        We'll tailor your AI coach.
+      </Text>
+
+      <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
+        <View className="gap-3 pb-8">
+          {REASONS.map((item, index) => (
+            <Animated.View
+              entering={FadeInDown.delay(index * 100).duration(400)}
+              key={item.id}
+            >
+              <Pressable
+                onPress={() => onSelectReason(item.id)}
+                className={`flex-row items-center p-4 rounded-2xl border relative overflow-hidden ${
+                  selectedReason === item.id
+                    ? 'border-transparent'
+                    : 'border-border bg-card'
+                }`}
+                style={
+                  selectedReason === item.id
+                    ? { borderColor: item.color, borderWidth: 2 }
+                    : {}
+                }
+              >
+                {selectedReason === item.id && (
+                  <View
+                    className="absolute inset-0 opacity-10"
+                    style={{ backgroundColor: item.color }}
+                  />
+                )}
+
+                <View
+                  className="p-3 rounded-full mr-4"
+                  style={{ backgroundColor: item.color + '20' }}
+                >
+                  <MaterialCommunityIcons
+                    name={item.icon as any}
+                    size={24}
+                    color={item.color}
+                  />
+                </View>
+
+                <Text
+                  className={`flex-1 font-medium text-base text-foreground`}
+                >
+                  {item.label}
+                </Text>
+
+                {selectedReason === item.id && (
+                  <MaterialCommunityIcons
+                    name="check-circle"
+                    size={24}
+                    color={item.color}
+                  />
+                )}
+              </Pressable>
+            </Animated.View>
+          ))}
+        </View>
+      </ScrollView>
+
+      <View className="pt-4 border-t border-border bg-background">
+        <Button
+          label="Continue"
+          onPress={() => {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+            onNext();
+          }}
+          disabled={!selectedReason}
+          size="lg"
+          className="w-full m-0"
+        />
+      </View>
+    </Animated.View>
+  );
+}

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

@@ -0,0 +1,129 @@
+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';
+
+interface NotificationStepProps {
+  onEnable: () => void;
+  onSkip: () => void;
+}
+
+export function NotificationStep({ onEnable, onSkip }: NotificationStepProps) {
+  const theme = useThemeConfig();
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleEnable = async () => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+    setIsLoading(true);
+    try {
+      const { status: existingStatus } =
+        await Notifications.getPermissionsAsync();
+      let finalStatus = existingStatus;
+
+      if (existingStatus !== 'granted') {
+        const { status } = await Notifications.requestPermissionsAsync();
+        finalStatus = status;
+      }
+
+      if (finalStatus !== 'granted') {
+        Alert.alert(
+          'Permission Required',
+          'Please enable notifications in settings to receive updates.',
+          [
+            { text: 'Cancel', style: 'cancel', onPress: onSkip },
+            { text: 'Settings', onPress: () => Linking.openSettings() },
+          ],
+        );
+        return;
+      }
+
+      onEnable();
+    } catch (error) {
+      console.error('Error requesting notification permissions:', error);
+      onSkip();
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <Animated.View
+      entering={FadeIn}
+      exiting={FadeOut}
+      className="flex-1 px-6 pt-12 justify-between"
+    >
+      <View className="items-center">
+        <Animated.View
+          entering={ZoomIn.springify()}
+          className="bg-primary/10 p-8 rounded-full mb-8"
+        >
+          <MaterialCommunityIcons
+            name="bell-ring-outline"
+            size={64}
+            color={theme.colors.primary}
+          />
+        </Animated.View>
+
+        <Text className="text-3xl font-bold mb-4 text-center">
+          Stay on Track
+        </Text>
+        <Text className="text-lg text-muted-foreground text-center mb-12 px-4">
+          Enable notifications to get your daily spending recap and AI alerts
+          when you're going off track.
+        </Text>
+
+        <View className="bg-card p-6 rounded-2xl border border-border w-full">
+          <View className="flex-row items-center mb-4">
+            <MaterialCommunityIcons
+              name="check"
+              size={20}
+              color={theme.colors.primary}
+            />
+            <Text className="ml-3 font-medium">Daily evening recap</Text>
+          </View>
+          <View className="flex-row items-center mb-4">
+            <MaterialCommunityIcons
+              name="check"
+              size={20}
+              color={theme.colors.primary}
+            />
+            <Text className="ml-3 font-medium">Budget alerts</Text>
+          </View>
+          <View className="flex-row items-center">
+            <MaterialCommunityIcons
+              name="check"
+              size={20}
+              color={theme.colors.primary}
+            />
+            <Text className="ml-3 font-medium">Smart challenges</Text>
+          </View>
+        </View>
+      </View>
+
+      <View className="pt-4 border-t border-border bg-background gap-4">
+        <Button
+          label={isLoading ? 'Enabling...' : 'Enable Notifications'}
+          onPress={handleEnable}
+          size="lg"
+          disabled={isLoading}
+          className="w-full m-0 shadow-lg shadow-primary/20"
+        />
+        <Button
+          label="Maybe Later"
+          variant="ghost"
+          onPress={() => {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+            onSkip();
+          }}
+          size="lg"
+          disabled={isLoading}
+          className="w-full m-0"
+        />
+      </View>
+    </Animated.View>
+  );
+}

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

@@ -0,0 +1,138 @@
+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';
+
+interface OverspendStepProps {
+  selectedCategories: string[];
+  onToggleCategory: (category: string) => void;
+  onNext: () => void;
+}
+
+const CATEGORIES = [
+  {
+    id: 'food',
+    label: 'Food & drinks',
+    icon: 'food-fork-drink',
+    color: '#F59E0B',
+  },
+  {
+    id: 'groceries',
+    label: 'Groceries',
+    icon: 'cart-outline',
+    color: '#10B981',
+  },
+  {
+    id: 'shopping',
+    label: 'Shopping & clothes',
+    icon: 'tshirt-crew-outline',
+    color: '#EC4899',
+  },
+  {
+    id: 'transport',
+    label: 'Transport & rides',
+    icon: 'car-outline',
+    color: '#3B82F6',
+  },
+  {
+    id: 'subs',
+    label: 'Subscriptions & digital stuff',
+    icon: 'youtube-subscription',
+    color: '#8B5CF6',
+  },
+  {
+    id: 'entertainment',
+    label: 'Entertainment / going out',
+    icon: 'movie-open-outline',
+    color: '#6366F1',
+  },
+  { id: 'unsure', label: "I'm not sure", icon: 'help', color: '#9CA3AF' },
+];
+
+export function OverspendStep({
+  selectedCategories,
+  onToggleCategory,
+  onNext,
+}: OverspendStepProps) {
+  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">
+        Where do you suspect you overspend?
+      </Text>
+      <Text className="text-lg text-muted-foreground mb-8">
+        Select all that apply.
+      </Text>
+
+      <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
+        <View className="flex-row flex-wrap gap-3 pb-8">
+          {CATEGORIES.map((item, index) => {
+            const isSelected = selectedCategories.includes(item.id);
+            return (
+              <Animated.View
+                entering={FadeInDown.delay(index * 100).duration(400)}
+                key={item.id}
+                className="w-[48%]"
+              >
+                <Pressable
+                  onPress={() => onToggleCategory(item.id)}
+                  className={`p-4 rounded-2xl border-2 items-center justify-center h-32 relative overflow-hidden ${
+                    isSelected ? 'border-transparent' : 'border-border bg-card'
+                  }`}
+                  style={isSelected ? { borderColor: item.color } : {}}
+                >
+                  {isSelected && (
+                    <View
+                      className="absolute inset-0 opacity-10"
+                      style={{ backgroundColor: item.color }}
+                    />
+                  )}
+
+                  <MaterialCommunityIcons
+                    name={item.icon as any}
+                    size={32}
+                    color={item.color}
+                    style={{ marginBottom: 8 }}
+                  />
+                  <Text className={`font-semibold text-center text-foreground`}>
+                    {item.label}
+                  </Text>
+                  {isSelected && (
+                    <View className="absolute top-2 right-2">
+                      <MaterialCommunityIcons
+                        name="check-circle"
+                        size={16}
+                        color={item.color}
+                      />
+                    </View>
+                  )}
+                </Pressable>
+              </Animated.View>
+            );
+          })}
+        </View>
+      </ScrollView>
+
+      <View className="pt-4 border-t border-border bg-background">
+        <Button
+          label="Continue"
+          onPress={() => {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+            onNext();
+          }}
+          disabled={selectedCategories.length === 0}
+          size="lg"
+          className="w-full m-0"
+        />
+      </View>
+    </Animated.View>
+  );
+}

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

@@ -0,0 +1,190 @@
+import React, { useEffect, useState } from 'react';
+import { View, Dimensions } from 'react-native';
+import Animated, {
+  FadeIn,
+  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;
+}
+
+const STEPS = [
+  {
+    text: 'Analyzing your preferences...',
+    icon: 'chart-box-outline',
+    color: '#6366F1',
+  },
+  { text: 'Configuring AI Coach...', icon: 'robot', color: '#8B5CF6' },
+  {
+    text: 'Setting up secure vault...',
+    icon: 'shield-check',
+    color: '#10B981',
+  },
+  {
+    text: 'Personalizing dashboard...',
+    icon: 'view-dashboard-variant',
+    color: '#F59E0B',
+  },
+  { text: 'Ready for takeoff! 🚀', icon: 'rocket-launch', color: '#EC4899' },
+];
+
+const { width } = Dimensions.get('window');
+
+export function PersonalizingStep({ onComplete }: PersonalizingStepProps) {
+  const theme = useThemeConfig();
+  const [currentStep, setCurrentStep] = useState(0);
+
+  const progress = useSharedValue(0);
+  const circleScale = useSharedValue(1);
+  const iconOpacity = useSharedValue(1);
+  const ringRotation = useSharedValue(0);
+
+  useEffect(() => {
+    // Pulse animation
+    circleScale.value = withRepeat(
+      withSequence(
+        withTiming(1.1, { duration: 1500, easing: Easing.inOut(Easing.ease) }),
+        withTiming(1, { duration: 1500, easing: Easing.inOut(Easing.ease) }),
+      ),
+      -1,
+      true,
+    );
+
+    // Ring rotation
+    ringRotation.value = withRepeat(
+      withTiming(360, { duration: 8000, easing: Easing.linear }),
+      -1,
+      false,
+    );
+
+    // Progress sequence
+    const interval = setInterval(() => {
+      setCurrentStep((prev) => {
+        if (prev < STEPS.length - 1) {
+          // Animate icon transition
+          iconOpacity.value = 0;
+          setTimeout(() => {
+            iconOpacity.value = withTiming(1);
+          }, 300);
+          return prev + 1;
+        }
+        clearInterval(interval);
+        setTimeout(onComplete, 1500);
+        return prev;
+      });
+    }, 2000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  useEffect(() => {
+    progress.value = withTiming((currentStep + 1) / STEPS.length, {
+      duration: 500,
+    });
+  }, [currentStep]);
+
+  const animatedRingStyle = useAnimatedStyle(() => ({
+    transform: [{ rotate: `${ringRotation.value}deg` }],
+  }));
+
+  const animatedIconStyle = useAnimatedStyle(() => ({
+    opacity: iconOpacity.value,
+    transform: [{ scale: interpolate(iconOpacity.value, [0, 1], [0.5, 1]) }],
+  }));
+
+  const animatedProgressStyle = useAnimatedStyle(() => ({
+    width: `${progress.value * 100}%`,
+    backgroundColor: STEPS[currentStep].color,
+  }));
+
+  return (
+    <Animated.View
+      entering={FadeIn}
+      className="flex-1 items-center justify-center px-6 bg-background"
+    >
+      {/* Background Gradient Mesh (Subtle) */}
+      <View className="absolute inset-0 opacity-20">
+        <LinearGradient
+          colors={[STEPS[currentStep].color + '40', 'transparent']}
+          style={{ flex: 1 }}
+          start={{ x: 0.5, y: 0 }}
+          end={{ x: 0.5, y: 1 }}
+        />
+      </View>
+
+      <View className="items-center justify-center mb-16 relative">
+        {/* Outer Rotating Ring */}
+        <Animated.View
+          className="absolute w-72 h-72 rounded-full border-2 border-dashed border-muted-foreground/20"
+          style={animatedRingStyle}
+        />
+
+        {/* Inner Pulsing Circle */}
+        <Animated.View
+          style={[
+            {
+              width: width * 0.5,
+              height: width * 0.5,
+              borderRadius: width * 0.25,
+              alignItems: 'center',
+              justifyContent: 'center',
+              backgroundColor: theme.colors.card,
+              shadowColor: STEPS[currentStep].color,
+              shadowOffset: { width: 0, height: 0 },
+              shadowOpacity: 0.5,
+              shadowRadius: 30,
+              elevation: 20,
+              borderWidth: 1,
+              borderColor: theme.colors.border,
+            },
+            useAnimatedStyle(() => ({
+              transform: [{ scale: circleScale.value }],
+            })),
+          ]}
+        >
+          <Animated.View style={animatedIconStyle}>
+            <MaterialCommunityIcons
+              name={STEPS[currentStep].icon as any}
+              size={64}
+              color={STEPS[currentStep].color}
+            />
+          </Animated.View>
+        </Animated.View>
+      </View>
+
+      <View className="h-32 items-center justify-center w-full">
+        <Animated.Text
+          key={currentStep}
+          entering={FadeIn.duration(600).springify()}
+          className="text-3xl font-bold text-center mb-3"
+          style={{ color: theme.colors.foreground }}
+        >
+          {STEPS[currentStep].text}
+        </Animated.Text>
+
+        <Text className="text-muted-foreground text-center">
+          Please wait while we set things up...
+        </Text>
+      </View>
+
+      {/* Progress Bar */}
+      <View className="w-full h-1.5 bg-muted rounded-full overflow-hidden mt-8 max-w-xs">
+        <Animated.View
+          className="h-full rounded-full"
+          style={animatedProgressStyle}
+        />
+      </View>
+    </Animated.View>
+  );
+}

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

@@ -0,0 +1,98 @@
+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 { 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;
+}
+
+export function RatingStep({ onNext }: RatingStepProps) {
+  const theme = useThemeConfig();
+  const [rating, setRating] = useState(0);
+
+  const handleNext = async () => {
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+    if (rating === 5) {
+      if (await StoreReview.hasAction()) {
+        try {
+          await StoreReview.requestReview();
+        } catch (error) {
+          console.log('Error requesting review:', error);
+        }
+      }
+    }
+    onNext();
+  };
+
+  return (
+    <Animated.View
+      entering={FadeIn}
+      exiting={FadeOut}
+      className="flex-1 px-6 pt-12 justify-between"
+    >
+      <View className="items-center mt-20">
+        <Text className="text-3xl font-bold mb-4 text-center">Support Us</Text>
+        <Text className="text-lg text-muted-foreground text-center mb-12 px-4">
+          Your feedback helps us improve and reach more people.
+        </Text>
+
+        <View className="flex-row justify-center gap-2 mb-12">
+          {[1, 2, 3, 4, 5].map((star) => (
+            <Pressable
+              key={star}
+              onPress={() => {
+                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+                setRating(star);
+              }}
+            >
+              <Animated.View
+                entering={FadeInDown.delay(star * 100).duration(400)}
+                className="p-1"
+              >
+                <MaterialCommunityIcons
+                  name={star <= rating ? 'star' : 'star-outline'}
+                  size={48}
+                  color={
+                    star <= rating ? '#FFD700' : theme.colors.mutedForeground
+                  }
+                  style={{
+                    shadowColor: star <= rating ? '#FFD700' : 'transparent',
+                    shadowOpacity: 0.5,
+                    shadowRadius: 10,
+                    shadowOffset: { width: 0, height: 0 },
+                  }}
+                />
+              </Animated.View>
+            </Pressable>
+          ))}
+        </View>
+
+        {rating > 0 && (
+          <Animated.View
+            entering={FadeInDown.duration(400)}
+            className="bg-primary/10 px-6 py-3 rounded-full mb-8"
+          >
+            <Text className="text-primary font-bold">
+              {rating === 5 ? "You're awesome! 🚀" : 'Thanks for feedback! 🙏'}
+            </Text>
+          </Animated.View>
+        )}
+      </View>
+
+      <View className="pt-4 border-t border-border bg-background">
+        <Button
+          label={rating > 0 ? 'Continue' : 'Skip'}
+          onPress={handleNext}
+          size="lg"
+          className="w-full m-0"
+          variant={rating > 0 ? 'default' : 'ghost'}
+        />
+      </View>
+    </Animated.View>
+  );
+}