vibefast-cli 1.1.5 → 1.2.1

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

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/components/steps/struggle-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 StruggleStepProps {
+  selectedStruggle: string | null;
+  onSelectStruggle: (struggle: string) => void;
+  onNext: () => void;
+}
+
+const STRUGGLES = [
+  {
+    id: 'food',
+    label: 'I spend too much on food / delivery',
+    icon: 'food',
+    color: '#EF4444',
+  },
+  {
+    id: 'impulse',
+    label: 'Impulse buys / random shopping',
+    icon: 'shopping',
+    color: '#F59E0B',
+  },
+  {
+    id: 'mindless',
+    label: "I swipe my card and don't think",
+    icon: 'credit-card-remove-outline',
+    color: '#8B5CF6',
+  },
+  {
+    id: 'clueless',
+    label: 'I have no idea where my money goes',
+    icon: 'help-circle-outline',
+    color: '#6366F1',
+  },
+  {
+    id: 'inconsistent',
+    label: "I'm inconsistent: some months I'm great, some months I'm a mess",
+    icon: 'chart-bell-curve-cumulative',
+    color: '#10B981',
+  },
+];
+
+export function StruggleStep({
+  selectedStruggle,
+  onSelectStruggle,
+  onNext,
+}: StruggleStepProps) {
+  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 struggle with the most?
+      </Text>
+      <Text className="text-lg text-muted-foreground mb-8">
+        Be honest, we won't judge!
+      </Text>
+
+      <ScrollView className="flex-1" showsVerticalScrollIndicator={false}>
+        <View className="gap-3 pb-8">
+          {STRUGGLES.map((item, index) => (
+            <Animated.View
+              entering={FadeInDown.delay(index * 100).duration(400)}
+              key={item.id}
+            >
+              <Pressable
+                onPress={() => onSelectStruggle(item.id)}
+                className={`flex-row items-center p-4 rounded-2xl border relative overflow-hidden ${
+                  selectedStruggle === item.id
+                    ? 'border-transparent'
+                    : 'border-border bg-card'
+                }`}
+                style={
+                  selectedStruggle === item.id
+                    ? { borderColor: item.color, borderWidth: 1 }
+                    : {}
+                }
+              >
+                {selectedStruggle === 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={`ml-4 flex-1 font-medium text-base text-foreground`}
+                >
+                  {item.label}
+                </Text>
+
+                {selectedStruggle === 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={!selectedStruggle}
+          size="lg"
+          className="w-full m-0"
+        />
+      </View>
+    </Animated.View>
+  );
+}

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

@@ -0,0 +1,217 @@
+import React, { useState } from 'react';
+import { View, ScrollView, TouchableOpacity } 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 { 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)
+ * Update your `src/lib/use-theme-config.tsx` with these colors for the best experience.
+ */
+const RECOMMENDED_COLORS = [
+  {
+    name: 'primary',
+    hex: '#B47B44',
+    description: 'Earthy Brown - Main actions & highlights',
+  },
+  {
+    name: 'background',
+    hex: '#FFF9F0',
+    description: 'Warm Cream - Page background',
+  },
+  {
+    name: 'foreground',
+    hex: '#4A3B32',
+    description: 'Dark Brown - Primary text',
+  },
+  { name: 'card', hex: '#FFFFFF', description: 'White - Card backgrounds' },
+  {
+    name: 'border',
+    hex: '#EBE0D0',
+    description: 'Light Tan - Borders & dividers',
+  },
+  {
+    name: 'muted',
+    hex: '#FAF2E6',
+    description: 'Soft Cream - Muted backgrounds',
+  },
+  {
+    name: 'mutedForeground',
+    hex: '#8C7A6B',
+    description: 'Warm Gray - Secondary text',
+  },
+  {
+    name: 'secondary',
+    hex: '#86A778',
+    description: 'Sage Green - Secondary actions',
+  },
+  {
+    name: 'warning',
+    hex: '#F4C430',
+    description: 'Gold - Warnings & highlights',
+  },
+];
+
+interface WelcomeStepProps {
+  onNext: () => void;
+  onSignIn: () => void;
+}
+
+export function WelcomeStep({ onNext, onSignIn }: WelcomeStepProps) {
+  const theme = useThemeConfig();
+  const [showPalette, setShowPalette] = useState(false);
+  const [copiedColor, setCopiedColor] = useState<string | null>(null);
+
+  const copyToClipboard = async (hex: string) => {
+    await Clipboard.setStringAsync(hex);
+    setCopiedColor(hex);
+    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+    setTimeout(() => setCopiedColor(null), 1500);
+  };
+
+  return (
+    <Animated.View
+      entering={FadeIn}
+      exiting={FadeOut}
+      className="flex-1 px-6 items-center"
+    >
+      <LinearGradient
+        colors={[theme.colors.primary + '20', 'transparent']}
+        style={{ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0 }}
+      />
+
+      <ScrollView
+        className="flex-1 w-full"
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={{ flexGrow: 1 }}
+      >
+        <View className="flex-1 w-full md:max-w-4xl mx-auto">
+          <View className="flex-1 justify-center items-center py-8">
+            <Animated.View
+              entering={ZoomIn.duration(1000).springify()}
+              className="bg-primary/10 p-10 rounded-full mb-10 border-4 border-primary/5"
+            >
+              <MaterialCommunityIcons
+                name="wallet-outline"
+                size={80}
+                color={theme.colors.primary}
+              />
+            </Animated.View>
+            <Text className="text-5xl font-bold text-center mb-4 tracking-tight">
+              CashPilot
+            </Text>
+            <Text className="text-xl text-muted-foreground text-center mb-8 px-4 leading-8">
+              Your co-pilot for smarter financial decisions.
+            </Text>
+
+            {/* Color Palette Toggle */}
+            <TouchableOpacity
+              onPress={() => {
+                setShowPalette(!showPalette);
+                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+              }}
+              className="flex-row items-center gap-2 bg-muted/50 px-4 py-2 rounded-full mb-4"
+            >
+              <MaterialCommunityIcons
+                name="palette"
+                size={18}
+                color={theme.colors.mutedForeground}
+              />
+              <Text className="text-sm text-muted-foreground font-medium">
+                {showPalette ? 'Hide' : 'View'} Recommended Theme Colors
+              </Text>
+              <MaterialCommunityIcons
+                name={showPalette ? 'chevron-up' : 'chevron-down'}
+                size={18}
+                color={theme.colors.mutedForeground}
+              />
+            </TouchableOpacity>
+
+            {/* Color Palette Section */}
+            {showPalette && (
+              <Animated.View
+                entering={FadeIn.duration(300)}
+                exiting={FadeOut.duration(200)}
+                className="w-full bg-card border border-border rounded-2xl p-4 mb-4"
+              >
+                <Text className="text-sm font-bold mb-2 text-center">
+                  🎨 CashPilot Theme Colors
+                </Text>
+                <Text className="text-xs text-muted-foreground text-center mb-4">
+                  Update{' '}
+                  <Text className="font-mono">
+                    src/lib/use-theme-config.tsx
+                  </Text>{' '}
+                  for best experience
+                </Text>
+
+                <View className="gap-2">
+                  {RECOMMENDED_COLORS.map((color) => (
+                    <TouchableOpacity
+                      key={color.name}
+                      onPress={() => copyToClipboard(color.hex)}
+                      className="flex-row items-center gap-3 p-2 rounded-xl bg-muted/30 active:bg-muted/50"
+                    >
+                      <View
+                        className="w-8 h-8 rounded-lg border border-border shadow-sm"
+                        style={{ backgroundColor: color.hex }}
+                      />
+                      <View className="flex-1">
+                        <View className="flex-row items-center gap-2">
+                          <Text className="text-sm font-semibold">
+                            {color.name}
+                          </Text>
+                          <Text className="text-xs font-mono text-muted-foreground">
+                            {color.hex}
+                          </Text>
+                          {copiedColor === color.hex && (
+                            <Text className="text-xs text-primary font-medium">
+                              Copied!
+                            </Text>
+                          )}
+                        </View>
+                        <Text
+                          className="text-xs text-muted-foreground"
+                          numberOfLines={1}
+                        >
+                          {color.description}
+                        </Text>
+                      </View>
+                      <MaterialCommunityIcons
+                        name="content-copy"
+                        size={16}
+                        color={theme.colors.mutedForeground}
+                      />
+                    </TouchableOpacity>
+                  ))}
+                </View>
+              </Animated.View>
+            )}
+          </View>
+
+          <View className="pt-4 border-t border-border bg-background pb-8">
+            <Button
+              label="Start Your Journey"
+              onPress={() => {
+                Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+                onNext();
+              }}
+              size="lg"
+              className="w-full m-0 shadow-lg shadow-primary/20"
+            />
+            <Pressable onPress={onSignIn} className="mt-6 items-center">
+              <Text className="text-muted-foreground text-base">
+                Already have an account?{' '}
+                <Text className="text-primary font-bold">Sign in</Text>
+              </Text>
+            </Pressable>
+          </View>
+        </View>
+      </ScrollView>
+    </Animated.View>
+  );
+}