vibefast-cli 1.1.5 → 1.2.1

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

@@ -0,0 +1,222 @@
+import React, { useState } from 'react';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
+
+import { OnboardingHeader } from './ui/onboarding-header';
+
+import { WelcomeStep } from './steps/welcome-step';
+import { FeatureAIStep } from './steps/feature-ai-step';
+import { FeatureScanStep } from './steps/feature-scan-step';
+import { FeatureManualStep } from './steps/feature-manual-step';
+import { FeatureChatbotStep } from './steps/feature-chatbot-step';
+import { CurrencyStep } from './steps/currency-step';
+import { MainReasonStep } from './steps/main-reason-step';
+import { StruggleStep } from './steps/struggle-step';
+import { OverspendStep } from './steps/overspend-step';
+import { AIToneStep } from './steps/ai-tone-step';
+import { ReminderStep } from './steps/reminder-step';
+import { NotificationStep } from './steps/notification-step';
+import { SafetyStep } from './steps/safety-step';
+import { RatingStep } from './steps/rating-step';
+import { PersonalizingStep } from './steps/personalizing-step';
+import { SafeAreaView } from '@/components/ui';
+
+type OnboardingStep =
+  | 'welcome'
+  | 'feature_ai'
+  | 'feature_scan'
+  | 'feature_manual'
+  | 'feature_chatbot'
+  | 'currency'
+  | 'main_reason'
+  | 'struggle'
+  | 'overspend'
+  | 'spend_level'
+  | 'ai_tone'
+  | 'reminder'
+  | 'notification'
+  | 'safety'
+  | 'rating'
+  | 'personalizing';
+
+const STEPS_ORDER: OnboardingStep[] = [
+  'welcome',
+  'feature_ai',
+  'feature_scan',
+  'feature_manual',
+  'feature_chatbot',
+  'currency',
+  'main_reason',
+  'struggle',
+  'overspend',
+  // 'spend_level',
+  'ai_tone',
+  'reminder',
+  'notification',
+  'safety',
+  'rating',
+  'personalizing',
+];
+
+interface InteractiveOnboardingProps {
+  onComplete: () => void;
+  onSignIn: () => void;
+}
+
+export function InteractiveOnboarding({
+  onComplete,
+  onSignIn,
+}: InteractiveOnboardingProps) {
+  const [currentStepIndex, setCurrentStepIndex] = useState(0);
+  const [direction, setDirection] = useState<'forward' | 'backward'>('forward');
+
+  // State for all steps
+  const [currency, setCurrency] = useState<string | null>(null);
+  const [mainReason, setMainReason] = useState<string | null>(null);
+  const [struggle, setStruggle] = useState<string | null>(null);
+  const [overspendCategories, setOverspendCategories] = useState<string[]>([]);
+  const [aiTone, setAiTone] = useState<string | null>(null);
+  const [reminderFreq, setReminderFreq] = useState<string | null>(null);
+  const [reminderTime, setReminderTime] = useState<string>('9 PM');
+
+  // Spend Level State (Min/Max)
+  const [minSpend, setMinSpend] = useState('');
+  const [maxSpend, setMaxSpend] = useState('');
+
+  const currentStep = STEPS_ORDER[currentStepIndex];
+
+  const handleNext = () => {
+    if (currentStepIndex < STEPS_ORDER.length - 1) {
+      setDirection('forward');
+      setCurrentStepIndex((prev) => prev + 1);
+    } else {
+      onComplete();
+    }
+  };
+
+  const handleBack = () => {
+    if (currentStepIndex > 0) {
+      setDirection('backward');
+      setCurrentStepIndex((prev) => prev - 1);
+    }
+  };
+
+  const toggleOverspendCategory = (id: string) => {
+    setOverspendCategories((prev) =>
+      prev.includes(id) ? prev.filter((c) => c !== id) : [...prev, id],
+    );
+  };
+
+  // Custom entering/exiting animations based on direction
+  // Using Fade for premium feel as requested
+  return (
+    <SafeAreaView className="flex-1 bg-background items-center">
+      <Animated.View className="flex-1 w-full md:max-w-4xl">
+        {currentStep !== 'welcome' && currentStep !== 'personalizing' && (
+          <OnboardingHeader
+            onBack={handleBack}
+            canGoBack={currentStepIndex > 0}
+            progress={(currentStepIndex + 1) / STEPS_ORDER.length}
+          />
+        )}
+
+        {/* We use a key to force re-render and trigger animations */}
+        <Animated.View
+          key={currentStep}
+          className="flex-1"
+          entering={FadeIn.duration(600)}
+          exiting={FadeOut.duration(400)}
+        >
+          {currentStep === 'welcome' && (
+            <WelcomeStep onNext={handleNext} onSignIn={onSignIn} />
+          )}
+
+          {currentStep === 'feature_ai' && (
+            <FeatureAIStep onNext={handleNext} />
+          )}
+          {currentStep === 'feature_scan' && (
+            <FeatureScanStep onNext={handleNext} />
+          )}
+          {currentStep === 'feature_manual' && (
+            <FeatureManualStep onNext={handleNext} />
+          )}
+          {currentStep === 'feature_chatbot' && (
+            <FeatureChatbotStep onNext={handleNext} />
+          )}
+
+          {currentStep === 'currency' && (
+            <CurrencyStep
+              selectedCurrency={currency}
+              onSelectCurrency={setCurrency}
+              onNext={handleNext}
+            />
+          )}
+
+          {currentStep === 'main_reason' && (
+            <MainReasonStep
+              selectedReason={mainReason}
+              onSelectReason={setMainReason}
+              onNext={handleNext}
+            />
+          )}
+
+          {currentStep === 'struggle' && (
+            <StruggleStep
+              selectedStruggle={struggle}
+              onSelectStruggle={setStruggle}
+              onNext={handleNext}
+            />
+          )}
+
+          {currentStep === 'overspend' && (
+            <OverspendStep
+              selectedCategories={overspendCategories}
+              onToggleCategory={toggleOverspendCategory}
+              onNext={handleNext}
+            />
+          )}
+
+          {/* {currentStep === 'spend_level' && (
+          <SpendLevelStep
+            currencyCode={currency}
+            minSpend={minSpend}
+            maxSpend={maxSpend}
+            onSetMinSpend={setMinSpend}
+            onSetMaxSpend={setMaxSpend}
+            onNext={handleNext}
+          />
+        )} */}
+
+          {currentStep === 'ai_tone' && (
+            <AIToneStep
+              selectedTone={aiTone}
+              onSelectTone={setAiTone}
+              onNext={handleNext}
+            />
+          )}
+
+          {currentStep === 'reminder' && (
+            <ReminderStep
+              selectedFrequency={reminderFreq}
+              selectedTime={reminderTime}
+              onSelectFrequency={setReminderFreq}
+              onSelectTime={setReminderTime}
+              onNext={handleNext}
+            />
+          )}
+
+          {currentStep === 'notification' && (
+            <NotificationStep onEnable={handleNext} onSkip={handleNext} />
+          )}
+
+          {currentStep === 'safety' && <SafetyStep onComplete={handleNext} />}
+
+          {currentStep === 'rating' && <RatingStep onNext={handleNext} />}
+
+          {currentStep === 'personalizing' && (
+            <PersonalizingStep onComplete={onComplete} />
+          )}
+        </Animated.View>
+      </Animated.View>
+    </SafeAreaView>
+  );
+}

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

@@ -0,0 +1,133 @@
+import React from 'react';
+import { View } 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 AIToneStepProps {
+  selectedTone: string | null;
+  onSelectTone: (tone: string) => void;
+  onNext: () => void;
+}
+
+const TONES = [
+  {
+    id: 'gentle',
+    label: 'Gentle and encouraging',
+    emoji: '😊',
+    desc: 'Positive reinforcement, soft nudges.',
+    color: '#10B981',
+  },
+  {
+    id: 'honest',
+    label: 'Honest but respectful',
+    emoji: '💬',
+    desc: 'Direct facts, no fluff.',
+    color: '#3B82F6',
+  },
+  {
+    id: 'brutal',
+    label: 'Brutally honest',
+    emoji: '🔥',
+    desc: 'Roast me if I overspend.',
+    color: '#EF4444',
+  },
+];
+
+export function AIToneStep({
+  selectedTone,
+  onSelectTone,
+  onNext,
+}: AIToneStepProps) {
+  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">
+        How honest should the AI be?
+      </Text>
+      <Text className="text-lg text-muted-foreground mb-8">
+        Choose your coach's personality.
+      </Text>
+
+      <View className="gap-4 mt-auto">
+        {TONES.map((item, index) => (
+          <Animated.View
+            entering={FadeInDown.delay(index * 100).duration(400)}
+            key={item.id}
+          >
+            <Pressable
+              onPress={() => onSelectTone(item.id)}
+              className={`p-5 rounded-3xl border relative overflow-hidden ${
+                selectedTone === item.id
+                  ? 'border-transparent'
+                  : 'border-border bg-card'
+              }`}
+              style={
+                selectedTone === item.id
+                  ? { borderColor: item.color, borderWidth: 1 }
+                  : {}
+              }
+            >
+              {selectedTone === item.id && (
+                <View
+                  className="absolute inset-0 opacity-10"
+                  style={{ backgroundColor: item.color }}
+                />
+              )}
+
+              <View className="flex-row items-center mb-2">
+                <View
+                  className="w-12 h-12 rounded-full items-center justify-center mr-4"
+                  style={{ backgroundColor: item.color + '20' }}
+                >
+                  <Text className="text-2xl">{item.emoji}</Text>
+                </View>
+                <View className="flex-1">
+                  <Text
+                    className={`text-xl font-bold ${
+                      selectedTone === item.id
+                        ? 'text-foreground'
+                        : 'text-foreground'
+                    }`}
+                  >
+                    {item.label}
+                  </Text>
+                  <Text className="text-muted-foreground leading-5">
+                    {item.desc}
+                  </Text>
+                </View>
+                {selectedTone === item.id && (
+                  <MaterialCommunityIcons
+                    name="check-circle"
+                    size={24}
+                    color={item.color}
+                  />
+                )}
+              </View>
+            </Pressable>
+          </Animated.View>
+        ))}
+      </View>
+
+      <View className="pt-4 border-t border-border bg-background mt-auto">
+        <Button
+          label="Continue"
+          onPress={() => {
+            Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+            onNext();
+          }}
+          disabled={!selectedTone}
+          size="lg"
+          className="w-full m-0"
+        />
+      </View>
+    </Animated.View>
+  );
+}

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

@@ -0,0 +1,165 @@
+import React from 'react';
+import { View, ScrollView, TextInput } from 'react-native';
+import Animated, {
+  FadeInDown,
+  Layout,
+  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 { SUPPORTED_CURRENCIES, getCurrencyFlag } from '../../constants';
+import * as Haptics from 'expo-haptics';
+
+interface CurrencyStepProps {
+  selectedCurrency: string | null;
+  onSelectCurrency: (currency: string) => void;
+  onNext: () => void;
+}
+
+export function CurrencyStep({
+  selectedCurrency,
+  onSelectCurrency,
+  onNext,
+}: CurrencyStepProps) {
+  const theme = useThemeConfig();
+  const [searchQuery, setSearchQuery] = React.useState('');
+  const [showAll, setShowAll] = React.useState(false);
+
+  // Filter currencies based on search
+  const filteredCurrencies = React.useMemo(() => {
+    if (!searchQuery) return SUPPORTED_CURRENCIES;
+    const q = searchQuery.toLowerCase();
+    return SUPPORTED_CURRENCIES.filter(
+      (c) =>
+        c.code.toLowerCase().includes(q) || c.name.toLowerCase().includes(q),
+    );
+  }, [searchQuery]);
+
+  // Determine what to display
+  const displayCurrencies = React.useMemo(() => {
+    if (searchQuery) return filteredCurrencies;
+    if (showAll) return SUPPORTED_CURRENCIES;
+    return SUPPORTED_CURRENCIES.slice(0, 8); // Top 8
+  }, [searchQuery, showAll, filteredCurrencies]);
+
+  return (
+    <Animated.View
+      entering={FadeIn}
+      exiting={FadeOut}
+      className="flex-1 px-6 pt-4"
+    >
+      <Text className="text-3xl font-bold mb-3">
+        What currency do you usually spend in?
+      </Text>
+      <Text className="text-lg text-muted-foreground mb-6">
+        It will be set as your default currency.
+      </Text>
+
+      {/* Search Bar */}
+      <View className="bg-card border border-border rounded-xl px-4 py-3 mb-6 flex-row items-center">
+        <MaterialCommunityIcons
+          name="magnify"
+          size={20}
+          color={theme.colors.mutedForeground}
+        />
+        <TextInput
+          placeholder="Search currency..."
+          placeholderTextColor={theme.colors.mutedForeground}
+          value={searchQuery}
+          onChangeText={setSearchQuery}
+          className="flex-1 ml-3 text-base text-foreground"
+          style={{ color: theme.colors.foreground }}
+        />
+        {searchQuery.length > 0 && (
+          <Pressable onPress={() => setSearchQuery('')}>
+            <MaterialCommunityIcons
+              name="close-circle"
+              size={18}
+              color={theme.colors.mutedForeground}
+            />
+          </Pressable>
+        )}
+      </View>
+
+      <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
+        <View className="flex-row flex-wrap gap-3 pb-8">
+          {displayCurrencies.map((item, index) => (
+            <Animated.View
+              entering={FadeInDown.delay(index * 30).duration(400)}
+              key={item.code}
+              className="w-[48%]"
+              layout={Layout.springify()}
+            >
+              <Pressable
+                onPress={() => onSelectCurrency(item.code)}
+                className={`flex-row items-center p-3 rounded-2xl border ${
+                  selectedCurrency === item.code
+                    ? 'border-primary bg-primary/5'
+                    : 'border-border bg-card'
+                }`}
+              >
+                <Text className="text-2xl mr-3">
+                  {getCurrencyFlag(item.code)}
+                </Text>
+
+                <View className="flex-1">
+                  <Text
+                    className="text-foreground font-medium text-[13px]"
+                    numberOfLines={1}
+                  >
+                    {item.name}
+                  </Text>
+                </View>
+
+                {selectedCurrency === item.code && (
+                  <MaterialCommunityIcons
+                    name="check-circle"
+                    size={20}
+                    color={theme.colors.primary}
+                  />
+                )}
+              </Pressable>
+            </Animated.View>
+          ))}
+
+          {/* Show More Button */}
+          {!searchQuery && !showAll && (
+            <Animated.View
+              entering={FadeInDown.delay(300)}
+              className="w-full mt-1"
+            >
+              <Pressable
+                onPress={() => setShowAll(true)}
+                className="flex-row items-center justify-center py-2 px-3 rounded-2xl border border-dashed border-border bg-muted h-[56px]"
+              >
+                <Text className="font-medium text-muted-foreground mr-2">
+                  Show All
+                </Text>
+                <MaterialCommunityIcons
+                  name="chevron-down"
+                  size={20}
+                  color={theme.colors.mutedForeground}
+                />
+              </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={!selectedCurrency}
+          size="lg"
+          className="w-full m-0"
+        />
+      </View>
+    </Animated.View>
+  );
+}