vibefast-cli 1.1.5 → 1.3.0

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

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

@@ -0,0 +1,181 @@
+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 { DateTimePickerComponent } from '@/components/ui/date-time-picker';
+import * as Haptics from 'expo-haptics';
+
+interface ReminderStepProps {
+  selectedFrequency: string | null;
+  selectedTime: string;
+  onSelectFrequency: (freq: string) => void;
+  onSelectTime: (time: string) => void;
+  onNext: () => void;
+}
+
+const FREQUENCIES = [
+  { id: 'daily', label: 'Once a day (evening recap)' },
+  { id: 'purchase', label: 'After each purchase (if possible)' },
+  { id: 'weekly', label: 'Only weekly summary' },
+  { id: 'none', label: "No reminders, I'll do it myself" },
+];
+
+const TIMES = ['6 PM', '7 PM', '8 PM'];
+
+export function ReminderStep({
+  selectedFrequency,
+  selectedTime,
+  onSelectFrequency,
+  onSelectTime,
+  onNext,
+}: ReminderStepProps) {
+  const theme = useThemeConfig();
+  const showTimePicker =
+    selectedFrequency === 'daily' || selectedFrequency === 'purchase';
+  const [customDate, setCustomDate] = useState(new Date());
+  const [isCustomTime, setIsCustomTime] = useState(false);
+
+  const handleCustomTimeChange = (date: Date) => {
+    setCustomDate(date);
+    const timeString = date.toLocaleTimeString([], {
+      hour: 'numeric',
+      minute: '2-digit',
+    });
+    onSelectTime(timeString);
+  };
+
+  return (
+    <Animated.View
+      entering={FadeIn}
+      exiting={FadeOut}
+      className="flex-1 px-6 pt-4"
+    >
+      <Text className="text-3xl font-bold mb-3">Reminder Style</Text>
+      <Text className="text-lg text-muted-foreground mb-8">
+        Consistency is key.
+      </Text>
+
+      <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
+        <View className="gap-3 mb-8">
+          {FREQUENCIES.map((item, index) => (
+            <Animated.View
+              entering={FadeInDown.delay(index * 100).duration(400)}
+              key={item.id}
+            >
+              <Pressable
+                onPress={() => onSelectFrequency(item.id)}
+                className={`flex-row items-center p-4 rounded-2xl border ${
+                  selectedFrequency === item.id
+                    ? 'border-primary bg-primary/5'
+                    : 'border-border bg-card'
+                }`}
+              >
+                <View
+                  className={`w-6 h-6 rounded-full border-2 items-center justify-center mr-4 ${
+                    selectedFrequency === item.id
+                      ? 'border-primary'
+                      : 'border-muted-foreground'
+                  }`}
+                >
+                  {selectedFrequency === item.id && (
+                    <View className="w-3 h-3 rounded-full bg-primary" />
+                  )}
+                </View>
+                <Text
+                  className={`flex-1 font-medium text-base ${
+                    selectedFrequency === item.id
+                      ? 'text-primary'
+                      : 'text-foreground'
+                  }`}
+                >
+                  {item.label}
+                </Text>
+              </Pressable>
+            </Animated.View>
+          ))}
+        </View>
+
+        {showTimePicker && (
+          <Animated.View entering={FadeIn} className="mb-8">
+            <Text className="text-lg font-semibold mb-4">
+              Preferred Check-in Time
+            </Text>
+            <ScrollView
+              horizontal
+              showsHorizontalScrollIndicator={false}
+              className="gap-3 flex-1 w-full"
+            >
+              {TIMES.map((time) => (
+                <Pressable
+                  key={time}
+                  onPress={() => {
+                    setIsCustomTime(false);
+                    onSelectTime(time);
+                  }}
+                  className={`flex-1 px-5 py-3 rounded-xl border mr-3 ${
+                    selectedTime === time && !isCustomTime
+                      ? 'bg-primary border-primary'
+                      : 'bg-card border-border'
+                  }`}
+                >
+                  <Text
+                    className={`font-medium ${
+                      selectedTime === time && !isCustomTime
+                        ? 'text-primary-foreground'
+                        : 'text-foreground'
+                    }`}
+                  >
+                    {time}
+                  </Text>
+                </Pressable>
+              ))}
+
+              <Pressable
+                onPress={() => setIsCustomTime(true)}
+                className={`px-5 py-3 rounded-xl border mr-3 ${
+                  isCustomTime
+                    ? 'bg-primary border-primary'
+                    : 'bg-card border-border'
+                }`}
+              >
+                <Text
+                  className={`font-medium ${
+                    isCustomTime ? 'text-primary-foreground' : 'text-foreground'
+                  }`}
+                >
+                  Custom
+                </Text>
+              </Pressable>
+            </ScrollView>
+
+            {isCustomTime && (
+              <Animated.View entering={FadeIn} className="mt-4">
+                <DateTimePickerComponent
+                  mode="time"
+                  value={customDate}
+                  onChange={handleCustomTimeChange}
+                  label="Select Time"
+                  timeFormat="12"
+                />
+              </Animated.View>
+            )}
+          </Animated.View>
+        )}
+      </ScrollView>
+
+      <View className="pt-4 border-t border-border bg-background">
+        <Button
+          label="Continue"
+          onPress={() => {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+            onNext();
+          }}
+          disabled={!selectedFrequency}
+          size="lg"
+          className="w-full m-0"
+        />
+      </View>
+    </Animated.View>
+  );
+}

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

@@ -0,0 +1,110 @@
+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 { useThemeConfig } from '@/lib/use-theme-config';
+import * as Haptics from 'expo-haptics';
+
+interface SafetyStepProps {
+  onComplete: () => void;
+}
+
+export function SafetyStep({ onComplete }: SafetyStepProps) {
+  const theme = useThemeConfig();
+
+  return (
+    <Animated.View
+      entering={FadeIn}
+      exiting={FadeOut}
+      className="flex-1 px-6 pt-12 justify-between"
+    >
+      <View>
+        <Text className="text-3xl font-bold mb-3">Safe & Secure</Text>
+        <Text className="text-lg text-muted-foreground mb-12">
+          Your privacy is our priority.
+        </Text>
+
+        <View className="items-center mb-12">
+          <Animated.View
+            entering={ZoomIn.springify()}
+            className="bg-primary/5 p-10 rounded-full border-4 border-primary/20 mb-8 relative"
+          >
+            <MaterialCommunityIcons
+              name="shield-check"
+              size={80}
+              color={theme.colors.primary}
+            />
+            <View className="absolute -right-2 -top-2 bg-background rounded-full p-2 shadow-sm border border-border">
+              <MaterialCommunityIcons
+                name="lock"
+                size={24}
+                color={theme.colors.primary}
+              />
+            </View>
+          </Animated.View>
+
+          <View className="bg-card p-6 rounded-2xl border border-border w-full">
+            <View className="flex-row items-start mb-4">
+              <MaterialCommunityIcons
+                name="check-decagram"
+                size={20}
+                color={theme.colors.primary}
+              />
+              <View className="ml-3 flex-1">
+                <Text className="font-semibold text-foreground">
+                  Cloud Backup (Secure)
+                </Text>
+                <Text className="text-muted-foreground text-sm mt-1">
+                  We securely backup your data so you never lose it.
+                </Text>
+              </View>
+            </View>
+            <View className="flex-row items-start mb-4">
+              <MaterialCommunityIcons
+                name="eye-off"
+                size={20}
+                color={theme.colors.primary}
+              />
+              <View className="ml-3 flex-1">
+                <Text className="font-semibold text-foreground">
+                  No Snooping
+                </Text>
+                <Text className="text-muted-foreground text-sm mt-1">
+                  We don't store receipt images or view your personal docs.
+                </Text>
+              </View>
+            </View>
+            <View className="flex-row items-start">
+              <MaterialCommunityIcons
+                name="message-lock"
+                size={20}
+                color={theme.colors.primary}
+              />
+              <View className="ml-3 flex-1">
+                <Text className="font-semibold text-foreground">
+                  Private Chats
+                </Text>
+                <Text className="text-muted-foreground text-sm mt-1">
+                  Your conversations with AI are private and secure.
+                </Text>
+              </View>
+            </View>
+          </View>
+        </View>
+      </View>
+
+      <View className="pt-4 border-t border-border bg-background">
+        <Button
+          label="Get Started"
+          onPress={() => {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+            onComplete();
+          }}
+          size="lg"
+          className="w-full m-0"
+        />
+      </View>
+    </Animated.View>
+  );
+}