vibefast-cli 1.1.3 → 1.2.1

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

@@ -0,0 +1,199 @@
+import React, { useState, useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  FadeIn,
+  FadeOut,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+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';
+
+const AIDemo = () => {
+  const theme = useThemeConfig();
+  const cursorOpacity = useSharedValue(0);
+  const cardScale = useSharedValue(0.8);
+  const cardOpacity = useSharedValue(0);
+  const [typedText, setTypedText] = useState('');
+  const [isAnalyzing, setIsAnalyzing] = useState(false);
+
+  // Complex example
+  const fullText = 'dinner €45 at Vapiano with team, paid in cash';
+
+  useEffect(() => {
+    cursorOpacity.value = withRepeat(
+      withSequence(
+        withTiming(1, { duration: 500 }),
+        withTiming(0, { duration: 500 }),
+      ),
+      -1,
+    );
+
+    let currentIndex = 0;
+    const typingInterval = setInterval(() => {
+      if (currentIndex <= fullText.length) {
+        setTypedText(fullText.slice(0, currentIndex));
+        currentIndex++;
+      } else {
+        clearInterval(typingInterval);
+        setIsAnalyzing(true);
+
+        // Simulate analysis delay then show result
+        setTimeout(() => {
+          setIsAnalyzing(false);
+          cardOpacity.value = withTiming(1, { duration: 500 });
+          cardScale.value = withSpring(1);
+        }, 1500);
+      }
+    }, 30); // Faster typing (30ms)
+
+    return () => clearInterval(typingInterval);
+  }, []);
+
+  const animatedCardStyle = useAnimatedStyle(() => ({
+    opacity: cardOpacity.value,
+    transform: [{ scale: cardScale.value }],
+  }));
+
+  return (
+    <View className="bg-card border border-border rounded-3xl overflow-hidden h-80 w-full max-w-sm mx-auto shadow-sm">
+      <LinearGradient
+        colors={[theme.colors.primary + '10', 'transparent']}
+        className="absolute inset-0"
+      />
+      <View className="p-6 flex-1 justify-center">
+        {/* Chat Bubble */}
+        <View className="bg-muted/30 self-start rounded-2xl rounded-tl-none px-3 py-4 mb-4 max-w-[95%]">
+          <Text className="text-base font-medium leading-5">
+            {typedText}
+            <Animated.Text style={{ opacity: cursorOpacity }}>|</Animated.Text>
+          </Text>
+        </View>
+
+        {/* Analyzing Indicator */}
+        {isAnalyzing && (
+          <Animated.View
+            entering={FadeIn}
+            exiting={FadeOut}
+            className="flex-row items-center gap-2 mb-4 ml-2"
+          >
+            <MaterialCommunityIcons
+              name="creation"
+              size={18}
+              color={theme.colors.primary}
+            />
+            <Text className="text-primary font-medium text-sm">
+              Analyzing context & extracting details...
+            </Text>
+          </Animated.View>
+        )}
+
+        {/* Result Card */}
+        <Animated.View
+          style={animatedCardStyle}
+          className="bg-background border border-border rounded-2xl p-4 shadow-md self-end w-full"
+        >
+          {/* Header */}
+          <View className="flex-row items-center justify-between mb-4 pb-3 border-b border-border/50">
+            <View className="flex-row items-center gap-3">
+              <View className="bg-orange-100 p-2.5 rounded-full">
+                <MaterialCommunityIcons
+                  name="silverware-fork-knife"
+                  size={20}
+                  color="#F97316"
+                />
+              </View>
+              <View>
+                <Text className="font-bold text-base">Vapiano</Text>
+                <Text className="text-xs text-muted-foreground">
+                  Food & Drink
+                </Text>
+              </View>
+            </View>
+            <Text className="font-bold text-xl text-primary">€45.00</Text>
+          </View>
+
+          {/* Details Grid */}
+          <View className="flex-row flex-wrap gap-2 mb-3">
+            <View className="bg-muted/50 px-2 py-1 rounded-md flex-row items-center">
+              <MaterialCommunityIcons
+                name="credit-card-outline"
+                size={14}
+                color={theme.colors.mutedForeground}
+              />
+              <Text className="text-xs text-muted-foreground ml-1">Amex</Text>
+            </View>
+            <View className="bg-blue-50 px-2 py-1 rounded-md flex-row items-center">
+              <MaterialCommunityIcons name="pound" size={14} color="#2563EB" />
+              <Text className="text-xs text-blue-600 ml-1">work</Text>
+            </View>
+            <View className="bg-muted/50 px-2 py-1 rounded-md flex-row items-center">
+              <MaterialCommunityIcons
+                name="text"
+                size={14}
+                color={theme.colors.mutedForeground}
+              />
+              <Text className="text-xs text-muted-foreground ml-1">
+                with team
+              </Text>
+            </View>
+          </View>
+        </Animated.View>
+      </View>
+    </View>
+  );
+};
+
+interface FeatureAIStepProps {
+  onNext: () => void;
+}
+
+export function FeatureAIStep({ onNext }: FeatureAIStepProps) {
+  return (
+    <Animated.View
+      entering={FadeIn}
+      exiting={FadeOut}
+      className="flex-1 px-6 pt-12"
+    >
+      <View className="flex-1 justify-center">
+        <View className="items-center mb-8">
+          <View className="bg-purple-100 p-4 rounded-2xl mb-4">
+            <MaterialCommunityIcons name="robot" size={32} color="#9333EA" />
+          </View>
+          <Text className="text-3xl font-bold text-center mb-2">
+            AI Smart Note
+          </Text>
+          <Text className="text-lg text-muted-foreground text-center px-4">
+            Write in simple english no need to fill in boring forms
+          </Text>
+        </View>
+
+        <AIDemo />
+
+        <Text className="text-center text-muted-foreground mt-6 px-4">
+          We extract amount, date, merchant, category, tags, and even payment
+          method automatically.
+        </Text>
+      </View>
+
+      <View className="pt-4 border-t border-border bg-background">
+        <Button
+          label="Next Feature"
+          onPress={() => {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+            onNext();
+          }}
+          size="lg"
+          className="w-full m-0"
+        />
+      </View>
+    </Animated.View>
+  );
+}

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

@@ -0,0 +1,154 @@
+import React, { useState, useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  FadeIn,
+  FadeOut,
+  SlideInRight,
+} from 'react-native-reanimated';
+import { LinearGradient } from 'expo-linear-gradient';
+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';
+
+const ChatbotDemo = () => {
+  const theme = useThemeConfig();
+  const [showUserMessage, setShowUserMessage] = useState(false);
+  const [showTyping, setShowTyping] = useState(false);
+  const [showBotMessage, setShowBotMessage] = useState(false);
+
+  useEffect(() => {
+    const sequence = async () => {
+      await new Promise((r) => setTimeout(r, 500));
+      setShowUserMessage(true);
+
+      await new Promise((r) => setTimeout(r, 1000));
+      setShowTyping(true);
+
+      await new Promise((r) => setTimeout(r, 1500));
+      setShowTyping(false);
+      setShowBotMessage(true);
+    };
+
+    sequence();
+  }, []);
+
+  return (
+    <View className="bg-card border border-border rounded-3xl overflow-hidden h-80 w-full max-w-sm mx-auto shadow-sm relative">
+      <LinearGradient
+        colors={[theme.colors.primary + '05', 'transparent']}
+        className="absolute inset-0"
+      />
+
+      <View className="p-5 flex-1 justify-center gap-4">
+        {/* User Message */}
+        {showUserMessage && (
+          <Animated.View
+            entering={SlideInRight.springify()}
+            className="self-end bg-primary rounded-2xl rounded-tr-sm px-4 py-3 max-w-[85%]"
+          >
+            <Text className="text-primary-foreground font-medium">
+              How much did I spend on food this month? 🍔
+            </Text>
+          </Animated.View>
+        )}
+
+        {/* Typing Indicator */}
+        {showTyping && (
+          <Animated.View
+            entering={FadeIn}
+            exiting={FadeOut}
+            className="self-start bg-muted rounded-2xl rounded-tl-sm px-4 py-3"
+          >
+            <View className="flex-row gap-1">
+              <View className="w-2 h-2 bg-muted-foreground/40 rounded-full" />
+              <View className="w-2 h-2 bg-muted-foreground/40 rounded-full" />
+              <View className="w-2 h-2 bg-muted-foreground/40 rounded-full" />
+            </View>
+          </Animated.View>
+        )}
+
+        {/* Bot Message */}
+        {showBotMessage && (
+          <Animated.View
+            entering={SlideInRight.springify()}
+            className="self-start bg-muted rounded-2xl rounded-tl-sm px-4 py-3 max-w-[90%] shadow-sm border border-border/50"
+          >
+            <View className="flex-row items-center gap-2 mb-2">
+              <View className="bg-purple-100 p-1 rounded-full">
+                <MaterialCommunityIcons
+                  name="robot"
+                  size={12}
+                  color="#9333EA"
+                />
+              </View>
+              <Text className="text-xs font-bold text-purple-600">
+                CashPilot AI
+              </Text>
+            </View>
+            <Text className="text-foreground leading-5">
+              You spent <Text className="font-bold text-primary">$450</Text> on
+              food.
+            </Text>
+            <Text className="text-foreground leading-5 mt-2">
+              That's <Text className="text-green-600 font-bold">10% less</Text>{' '}
+              than last month! Great job sticking to your budget. 📉
+            </Text>
+          </Animated.View>
+        )}
+      </View>
+    </View>
+  );
+};
+
+interface FeatureChatbotStepProps {
+  onNext: () => void;
+}
+
+export function FeatureChatbotStep({ onNext }: FeatureChatbotStepProps) {
+  return (
+    <Animated.View
+      entering={FadeIn}
+      exiting={FadeOut}
+      className="flex-1 px-6 pt-12"
+    >
+      <View className="flex-1 justify-center">
+        <View className="items-center mb-8">
+          <View className="bg-indigo-100 p-4 rounded-2xl mb-4">
+            <MaterialCommunityIcons
+              name="chat-processing-outline"
+              size={32}
+              color="#4F46E5"
+            />
+          </View>
+          <Text className="text-3xl font-bold text-center mb-2">
+            AI Assistant
+          </Text>
+          <Text className="text-lg text-muted-foreground text-center px-4">
+            Ask questions about your spending, get insights, and personalized
+            tips.
+          </Text>
+        </View>
+
+        <ChatbotDemo />
+
+        <Text className="text-center text-muted-foreground mt-6 px-4">
+          "Where is my money going?" • "Can I afford a vacation?" • "Analyze my
+          habits"
+        </Text>
+      </View>
+
+      <View className="pt-4 border-t border-border bg-background">
+        <Button
+          label="Next Feature"
+          onPress={() => {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+            onNext();
+          }}
+          size="lg"
+          className="w-full m-0"
+        />
+      </View>
+    </Animated.View>
+  );
+}

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

@@ -0,0 +1,156 @@
+import React from 'react';
+import { View } from 'react-native';
+import Animated, {
+  FadeIn,
+  FadeOut,
+  SlideInRight,
+} 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';
+
+const ManualDemo = () => {
+  const theme = useThemeConfig();
+
+  return (
+    <View
+      className="bg-card border-border h-88 w-full max-w-sm mx-auto justify-center overflow-hidden rounded-3xl border p-6 shadow-sm"
+      style={{ backgroundColor: theme.colors.card }}
+    >
+      <View className="gap-4">
+        <Animated.View
+          entering={SlideInRight.delay(100)}
+          className="flex-row items-center rounded-2xl p-4"
+          style={{ backgroundColor: theme.colors.muted }}
+        >
+          <MaterialCommunityIcons
+            name="tag-outline"
+            size={24}
+            color={theme.colors.mutedForeground}
+          />
+          <View className="ml-4 gap-2">
+            <View
+              className="h-2 w-10 rounded-full"
+              style={{ backgroundColor: theme.colors.outline }}
+            />
+            <View
+              className="h-3 w-32 rounded-full"
+              style={{ backgroundColor: theme.colors.outline }}
+            />
+          </View>
+        </Animated.View>
+        <Animated.View
+          entering={SlideInRight.delay(200)}
+          className="flex-row items-center rounded-2xl p-4"
+          style={{ backgroundColor: theme.colors.muted }}
+        >
+          <MaterialCommunityIcons
+            name="currency-usd"
+            size={24}
+            color={theme.colors.mutedForeground}
+          />
+          <View className="ml-4 gap-2">
+            <View
+              className="h-2 w-10 rounded-full"
+              style={{ backgroundColor: theme.colors.outline }}
+            />
+            <View
+              className="h-3 w-24 rounded-full"
+              style={{ backgroundColor: theme.colors.outline }}
+            />
+          </View>
+        </Animated.View>
+        <Animated.View
+          entering={SlideInRight.delay(300)}
+          className="flex-row items-center rounded-2xl p-4"
+          style={{ backgroundColor: theme.colors.muted }}
+        >
+          <MaterialCommunityIcons
+            name="calendar-blank-outline"
+            size={24}
+            color={theme.colors.mutedForeground}
+          />
+          <View className="ml-4 gap-2">
+            <View
+              className="h-2 w-10 rounded-full"
+              style={{ backgroundColor: theme.colors.outline }}
+            />
+            <View
+              className="h-3 w-28 rounded-full"
+              style={{ backgroundColor: theme.colors.outline }}
+            />
+          </View>
+        </Animated.View>
+        <Animated.View
+          entering={SlideInRight.delay(400)}
+          className="flex-row items-center rounded-2xl p-4"
+          style={{ backgroundColor: theme.colors.muted }}
+        >
+          <MaterialCommunityIcons
+            name="shape-outline"
+            size={24}
+            color={theme.colors.mutedForeground}
+          />
+          <View className="ml-4 gap-2">
+            <View
+              className="h-2 w-10 rounded-full"
+              style={{ backgroundColor: theme.colors.outline }}
+            />
+            <View
+              className="h-3 w-32 rounded-full"
+              style={{ backgroundColor: theme.colors.outline }}
+            />
+          </View>
+        </Animated.View>
+      </View>
+    </View>
+  );
+};
+
+interface FeatureManualStepProps {
+  onNext: () => void;
+}
+
+export function FeatureManualStep({ onNext }: FeatureManualStepProps) {
+  const theme = useThemeConfig();
+
+  return (
+    <Animated.View
+      entering={FadeIn}
+      exiting={FadeOut}
+      className="flex-1 px-6 pt-12"
+    >
+      <View className="flex-1 justify-center">
+        <View className="mb-10 items-center">
+          <View className="mb-6 rounded-3xl bg-[#DBEAFE] p-5">
+            <MaterialCommunityIcons name="pencil" size={36} color="#2563EB" />
+          </View>
+          <Text className="mb-3 text-center text-3xl font-bold">
+            Power Entry
+          </Text>
+          <Text
+            className="px-4 text-center text-lg"
+            style={{ color: theme.colors.mutedForeground }}
+          >
+            For when you need total control over every detail.
+          </Text>
+        </View>
+
+        <ManualDemo />
+      </View>
+
+      <View className="border-border bg-background border-t pt-4">
+        <Button
+          label="Next"
+          onPress={() => {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+            onNext();
+          }}
+          size="lg"
+          className="m-0 w-full"
+        />
+      </View>
+    </Animated.View>
+  );
+}

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

@@ -0,0 +1,158 @@
+import React, { useEffect } from 'react';
+import { View } from 'react-native';
+import Animated, {
+  FadeIn,
+  FadeOut,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+  Easing,
+} 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';
+
+const ScanDemo = () => {
+  const theme = useThemeConfig();
+  const scanLineY = useSharedValue(0);
+  const checkmarkScale = useSharedValue(0);
+
+  useEffect(() => {
+    scanLineY.value = withRepeat(
+      withSequence(
+        withTiming(280, { duration: 2000, easing: Easing.linear }),
+        withTiming(0, { duration: 0 }),
+      ),
+      -1,
+    );
+
+    checkmarkScale.value = withRepeat(
+      withSequence(
+        withTiming(1.2, { duration: 500 }),
+        withTiming(1, { duration: 500 }),
+      ),
+      -1,
+      true,
+    );
+  }, []);
+
+  const animatedLineStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: scanLineY.value }],
+  }));
+
+  const animatedCheckmarkStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: checkmarkScale.value }],
+  }));
+
+  return (
+    <View className="bg-card border border-border rounded-3xl overflow-hidden h-96 w-full max-w-sm mx-auto items-center justify-center shadow-sm relative">
+      <View className="relative w-56 h-80 bg-background border border-border rounded-xl shadow-sm overflow-hidden p-4">
+        {/* Skeleton Receipt Content */}
+        <View className="items-center mb-6">
+          <View className="w-16 h-16 bg-muted rounded-full mb-3" />
+          <View className="w-32 h-4 bg-muted rounded-full mb-2" />
+          <View className="w-24 h-3 bg-muted/50 rounded-full" />
+        </View>
+
+        <View className="gap-3 mb-6">
+          <View className="flex-row justify-between">
+            <View className="w-24 h-3 bg-muted/50 rounded-full" />
+            <View className="w-12 h-3 bg-muted/50 rounded-full" />
+          </View>
+          <View className="flex-row justify-between">
+            <View className="w-20 h-3 bg-muted/50 rounded-full" />
+            <View className="w-10 h-3 bg-muted/50 rounded-full" />
+          </View>
+          <View className="flex-row justify-between">
+            <View className="w-28 h-3 bg-muted/50 rounded-full" />
+            <View className="w-14 h-3 bg-muted/50 rounded-full" />
+          </View>
+        </View>
+
+        <View className="border-t border-dashed border-border my-2" />
+
+        <View className="flex-row justify-between mt-4">
+          <View className="w-16 h-4 bg-muted rounded-full" />
+          <View className="w-20 h-4 bg-muted rounded-full" />
+        </View>
+
+        {/* Scan Line Overlay */}
+        <Animated.View
+          style={[
+            animatedLineStyle,
+            {
+              position: 'absolute',
+              top: 0,
+              left: 0,
+              right: 0,
+              height: 4,
+              backgroundColor: theme.colors.primary,
+              shadowColor: theme.colors.primary,
+              shadowOpacity: 0.8,
+              shadowRadius: 8,
+              elevation: 5,
+              zIndex: 10,
+            },
+          ]}
+        />
+
+        {/* Checkmark Overlay */}
+        <Animated.View
+          style={[
+            animatedCheckmarkStyle,
+            { position: 'absolute', bottom: 15, right: 15, zIndex: 20 },
+          ]}
+        >
+          <View className="bg-green-500 rounded-full p-2 shadow-md">
+            <MaterialCommunityIcons name="check" size={20} color="white" />
+          </View>
+        </Animated.View>
+      </View>
+    </View>
+  );
+};
+
+interface FeatureScanStepProps {
+  onNext: () => void;
+}
+
+export function FeatureScanStep({ onNext }: FeatureScanStepProps) {
+  return (
+    <Animated.View
+      entering={FadeIn}
+      exiting={FadeOut}
+      className="flex-1 px-6 pt-12"
+    >
+      <View className="flex-1 justify-center">
+        <View className="items-center mb-8">
+          <View className="bg-green-100 p-4 rounded-2xl mb-4">
+            <MaterialCommunityIcons name="camera" size={32} color="#16A34A" />
+          </View>
+          <Text className="text-3xl font-bold text-center mb-2">
+            Insta-Scan
+          </Text>
+          <Text className="text-lg text-muted-foreground text-center px-4">
+            Snap a photo of any receipt. We extract the data instantly.
+          </Text>
+        </View>
+
+        <ScanDemo />
+      </View>
+
+      <View className="pt-4 border-t border-border bg-background">
+        <Button
+          label="Next Feature"
+          onPress={() => {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+            onNext();
+          }}
+          size="lg"
+          className="w-full m-0"
+        />
+      </View>
+    </Animated.View>
+  );
+}