vibefast-cli 1.1.5 → 1.3.0

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

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

@@ -0,0 +1,58 @@
+import React from 'react';
+import { View } from 'react-native';
+import { MaterialCommunityIcons } from '@expo/vector-icons';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+import { useThemeConfig } from '@/lib/use-theme-config';
+import { Pressable } from '@/components/ui';
+
+interface OnboardingHeaderProps {
+  onBack: () => void;
+  canGoBack: boolean;
+  progress?: number;
+}
+
+export function OnboardingHeader({
+  onBack,
+  canGoBack,
+  progress = 0,
+}: OnboardingHeaderProps) {
+  const theme = useThemeConfig();
+  const progressValue = useSharedValue(0);
+
+  React.useEffect(() => {
+    progressValue.value = withTiming(progress, { duration: 500 });
+  }, [progress]);
+
+  const animatedProgressStyle = useAnimatedStyle(() => ({
+    width: `${progressValue.value * 100}%`,
+  }));
+
+  if (!canGoBack) return <View className="h-12" />;
+
+  return (
+    <View className="h-12 px-6 flex-row items-center">
+      <Pressable
+        onPress={onBack}
+        className="w-10 h-10 items-center justify-center -ml-2 rounded-full active:bg-muted/20 mr-4"
+      >
+        <MaterialCommunityIcons
+          name="chevron-left"
+          size={32}
+          color={theme.colors.foreground}
+        />
+      </Pressable>
+
+      {/* Progress Bar */}
+      <View className="flex-1 h-1 bg-muted rounded-full overflow-hidden">
+        <Animated.View
+          className="h-full bg-primary rounded-full"
+          style={animatedProgressStyle}
+        />
+      </View>
+    </View>
+  );
+}

package/recipes/onboarding/apps/native/src/features/onboarding/expense-tracker/constants.ts

@@ -0,0 +1,179 @@
+/**
+ * Demo Expense Tracker Onboarding - Currency Constants
+ *
+ * Contains currency data for the onboarding demo.
+ * This is a self-contained copy to avoid external dependencies.
+ */
+
+export const SUPPORTED_CURRENCIES = [
+  // Major Global Currencies
+  { code: 'USD', symbol: '$', name: 'US Dollar' },
+  { code: 'EUR', symbol: 'EUR', name: 'Euro' },
+  { code: 'GBP', symbol: 'GBP', name: 'British Pound' },
+  { code: 'JPY', symbol: 'JPY', name: 'Japanese Yen' },
+  { code: 'CHF', symbol: 'CHF', name: 'Swiss Franc' },
+  { code: 'CNY', symbol: 'CNY', name: 'Chinese Yuan' },
+  { code: 'CAD', symbol: 'CAD', name: 'Canadian Dollar' },
+  { code: 'AUD', symbol: 'AUD', name: 'Australian Dollar' },
+  { code: 'NZD', symbol: 'NZD', name: 'New Zealand Dollar' },
+  { code: 'SGD', symbol: 'SGD', name: 'Singapore Dollar' },
+  { code: 'HKD', symbol: 'HKD', name: 'Hong Kong Dollar' },
+
+  // Asian Currencies
+  { code: 'INR', symbol: 'INR', name: 'Indian Rupee' },
+  { code: 'PKR', symbol: 'PKR', name: 'Pakistani Rupee' },
+  { code: 'BDT', symbol: 'BDT', name: 'Bangladeshi Taka' },
+  { code: 'LKR', symbol: 'LKR', name: 'Sri Lankan Rupee' },
+  { code: 'THB', symbol: 'THB', name: 'Thai Baht' },
+  { code: 'MYR', symbol: 'MYR', name: 'Malaysian Ringgit' },
+  { code: 'IDR', symbol: 'IDR', name: 'Indonesian Rupiah' },
+  { code: 'PHP', symbol: 'PHP', name: 'Philippine Peso' },
+  { code: 'VND', symbol: 'VND', name: 'Vietnamese Dong' },
+  { code: 'KRW', symbol: 'KRW', name: 'South Korean Won' },
+  { code: 'TWD', symbol: 'TWD', name: 'Taiwan Dollar' },
+
+  // Middle Eastern Currencies
+  { code: 'AED', symbol: 'AED', name: 'UAE Dirham' },
+  { code: 'SAR', symbol: 'SAR', name: 'Saudi Riyal' },
+  { code: 'QAR', symbol: 'QAR', name: 'Qatari Riyal' },
+  { code: 'KWD', symbol: 'KWD', name: 'Kuwaiti Dinar' },
+  { code: 'BHD', symbol: 'BHD', name: 'Bahraini Dinar' },
+  { code: 'OMR', symbol: 'OMR', name: 'Omani Rial' },
+  { code: 'JOD', symbol: 'JOD', name: 'Jordanian Dinar' },
+  { code: 'LBP', symbol: 'LBP', name: 'Lebanese Pound' },
+  { code: 'EGP', symbol: 'EGP', name: 'Egyptian Pound' },
+  { code: 'ILS', symbol: 'ILS', name: 'Israeli Shekel' },
+  { code: 'TRY', symbol: 'TRY', name: 'Turkish Lira' },
+  { code: 'IRR', symbol: 'IRR', name: 'Iranian Rial' },
+
+  // European Currencies
+  { code: 'SEK', symbol: 'SEK', name: 'Swedish Krona' },
+  { code: 'NOK', symbol: 'NOK', name: 'Norwegian Krone' },
+  { code: 'DKK', symbol: 'DKK', name: 'Danish Krone' },
+  { code: 'PLN', symbol: 'PLN', name: 'Polish Zloty' },
+  { code: 'CZK', symbol: 'CZK', name: 'Czech Koruna' },
+  { code: 'HUF', symbol: 'HUF', name: 'Hungarian Forint' },
+  { code: 'RON', symbol: 'RON', name: 'Romanian Leu' },
+  { code: 'BGN', symbol: 'BGN', name: 'Bulgarian Lev' },
+  { code: 'HRK', symbol: 'HRK', name: 'Croatian Kuna' },
+  { code: 'RUB', symbol: 'RUB', name: 'Russian Ruble' },
+  { code: 'UAH', symbol: 'UAH', name: 'Ukrainian Hryvnia' },
+  { code: 'BYN', symbol: 'BYN', name: 'Belarusian Ruble' },
+
+  // Americas Currencies
+  { code: 'MXN', symbol: 'MXN', name: 'Mexican Peso' },
+  { code: 'BRL', symbol: 'BRL', name: 'Brazilian Real' },
+  { code: 'ARS', symbol: 'ARS', name: 'Argentine Peso' },
+  { code: 'CLP', symbol: 'CLP', name: 'Chilean Peso' },
+  { code: 'COP', symbol: 'COP', name: 'Colombian Peso' },
+  { code: 'PEN', symbol: 'PEN', name: 'Peruvian Sol' },
+  { code: 'UYU', symbol: 'UYU', name: 'Uruguayan Peso' },
+  { code: 'VEF', symbol: 'VEF', name: 'Venezuelan Bolivar' },
+
+  // African Currencies
+  { code: 'ZAR', symbol: 'ZAR', name: 'South African Rand' },
+  { code: 'NGN', symbol: 'NGN', name: 'Nigerian Naira' },
+  { code: 'GHS', symbol: 'GHS', name: 'Ghanaian Cedi' },
+  { code: 'KES', symbol: 'KES', name: 'Kenyan Shilling' },
+  { code: 'UGX', symbol: 'UGX', name: 'Ugandan Shilling' },
+  { code: 'ETB', symbol: 'ETB', name: 'Ethiopian Birr' },
+  { code: 'MAD', symbol: 'MAD', name: 'Moroccan Dirham' },
+  { code: 'TND', symbol: 'TND', name: 'Tunisian Dinar' },
+  { code: 'ZWL', symbol: 'ZWL', name: 'Zimbabwean Dollar' },
+
+  // Oceania & Pacific
+  { code: 'FJD', symbol: 'FJD', name: 'Fijian Dollar' },
+  { code: 'PGK', symbol: 'PGK', name: 'Papua New Guinean Kina' },
+] as const;
+
+/**
+ * Currency flag emojis for visual display
+ */
+export const CURRENCY_FLAGS: Record<string, string> = {
+  USD: '🇺🇸',
+  EUR: '🇪🇺',
+  GBP: '🇬🇧',
+  JPY: '🇯🇵',
+  CHF: '🇨🇭',
+  CNY: '🇨🇳',
+  CAD: '🇨🇦',
+  AUD: '🇦🇺',
+  NZD: '🇳🇿',
+  SGD: '🇸🇬',
+  HKD: '🇭🇰',
+  INR: '🇮🇳',
+  PKR: '🇵🇰',
+  BDT: '🇧🇩',
+  LKR: '🇱🇰',
+  THB: '🇹🇭',
+  MYR: '🇲🇾',
+  IDR: '🇮🇩',
+  PHP: '🇵🇭',
+  VND: '🇻🇳',
+  KRW: '🇰🇷',
+  TWD: '🇹🇼',
+  AED: '🇦🇪',
+  SAR: '🇸🇦',
+  QAR: '🇶🇦',
+  KWD: '🇰🇼',
+  BHD: '🇧🇭',
+  OMR: '🇴🇲',
+  JOD: '🇯🇴',
+  LBP: '🇱🇧',
+  EGP: '🇪🇬',
+  ILS: '🇮🇱',
+  TRY: '🇹🇷',
+  IRR: '🇮🇷',
+  SEK: '🇸🇪',
+  NOK: '🇳🇴',
+  DKK: '🇩🇰',
+  PLN: '🇵🇱',
+  CZK: '🇨🇿',
+  HUF: '🇭🇺',
+  RON: '🇷🇴',
+  BGN: '🇧🇬',
+  HRK: '🇭🇷',
+  RUB: '🇷🇺',
+  UAH: '🇺🇦',
+  BYN: '🇧🇾',
+  MXN: '🇲🇽',
+  BRL: '🇧🇷',
+  ARS: '🇦🇷',
+  CLP: '🇨🇱',
+  COP: '🇨🇴',
+  PEN: '🇵🇪',
+  UYU: '🇺🇾',
+  VEF: '🇻🇪',
+  ZAR: '🇿🇦',
+  NGN: '🇳🇬',
+  GHS: '🇬🇭',
+  KES: '🇰🇪',
+  UGX: '🇺🇬',
+  ETB: '🇪🇹',
+  MAD: '🇲🇦',
+  TND: '🇹🇳',
+  ZWL: '🇿🇼',
+  FJD: '🇫🇯',
+  PGK: '🇵🇬',
+};
+
+export function getCurrencyFlag(code: string): string {
+  return CURRENCY_FLAGS[code] || code;
+}
+
+export type SupportedCurrency = (typeof SUPPORTED_CURRENCIES)[number];
+export type CurrencyCode = SupportedCurrency['code'];
+
+/**
+ * Currency symbols (derived from SUPPORTED_CURRENCIES)
+ */
+export const CURRENCY_SYMBOLS: Record<string, string> = Object.fromEntries(
+  SUPPORTED_CURRENCIES.map((c) => [c.code, c.symbol]),
+);
+
+/**
+ * Get currency symbol for a currency code
+ */
+export function getCurrencySymbol(currency: string): string {
+  return CURRENCY_SYMBOLS[currency] || currency;
+}