vibefast-cli 1.3.0 → 1.3.1

package/recipes/screen-kits-duolingo/apps/native/src/features/screen-kits/duolingo/screens/lesson-screen.tsx

@@ -0,0 +1,384 @@
+import { Ionicons } from '@expo/vector-icons';
+import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import Animated, {
+  FadeInDown,
+  Layout,
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+  ZoomIn,
+} from 'react-native-reanimated';
+import { useColorScheme } from 'react-native-css-interop';
+
+import { SafeAreaView, Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import DuoButton from '../components/duo-button';
+import { DUO_COLORS } from '../constants';
+
+const QUESTIONS = [
+  {
+    id: 'q1',
+    question: 'Which one of these is "the apple"?',
+    correctId: '1',
+    options: [
+      { id: '1', label: 'Apple', icon: 'nutrition' as const },
+      { id: '2', label: 'Bread', icon: 'fast-food' as const },
+      { id: '3', label: 'Egg', icon: 'egg' as const },
+      { id: '4', label: 'Milk', icon: 'pint' as const },
+    ],
+  },
+  {
+    id: 'q2',
+    question: 'Which one of these is "the bread"?',
+    correctId: '2',
+    options: [
+      { id: '1', label: 'Egg', icon: 'egg' as const },
+      { id: '2', label: 'Bread', icon: 'fast-food' as const },
+      { id: '3', label: 'Apple', icon: 'nutrition' as const },
+      { id: '4', label: 'Coffee', icon: 'cafe' as const },
+    ],
+  },
+  {
+    id: 'q3',
+    question: 'Which one of these is "the milk"?',
+    correctId: '3',
+    options: [
+      { id: '1', label: 'Apple', icon: 'nutrition' as const },
+      { id: '2', label: 'Water', icon: 'water' as const },
+      { id: '3', label: 'Milk', icon: 'pint' as const },
+      { id: '4', label: 'Coffee', icon: 'cafe' as const },
+    ],
+  },
+];
+
+export default function LessonScreen() {
+  const router = useRouter();
+  const { id } = useLocalSearchParams();
+  const theme = useThemeConfig();
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === 'dark';
+
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [hearts, setHearts] = useState(5);
+  const [selected, setSelected] = useState<string | null>(null);
+  const [status, setStatus] = useState<'idle' | 'correct' | 'wrong'>('idle');
+  const [correctCount, setCorrectCount] = useState(0);
+
+  const currentQuestion = QUESTIONS[currentIndex];
+  const progress = useSharedValue(0);
+
+  useEffect(() => {
+    const p = currentIndex / QUESTIONS.length;
+    progress.value = withTiming(p, { duration: 500 });
+  }, [currentIndex]);
+
+  const progressStyle = useAnimatedStyle(() => ({
+    width: `${Math.max(progress.value * 100, 5)}%`,
+  }));
+
+  const handleCheck = () => {
+    if (!selected) return;
+
+    const isCorrect = selected === currentQuestion.correctId;
+
+    if (isCorrect) {
+      setStatus('correct');
+      setCorrectCount((prev) => prev + 1);
+    } else {
+      setStatus('wrong');
+      setHearts((prev) => Math.max(0, prev - 1));
+    }
+  };
+
+  const handleContinue = () => {
+    if (status === 'correct') {
+      const nextIndex = currentIndex + 1;
+      if (nextIndex < QUESTIONS.length) {
+        setCurrentIndex(nextIndex);
+        setStatus('idle');
+        setSelected(null);
+      } else {
+        const accuracy = Math.round((correctCount / QUESTIONS.length) * 100);
+        const xp = correctCount * 10 + (hearts > 0 ? 5 : 0);
+        progress.value = withTiming(1, { duration: 500 });
+        setTimeout(() => {
+          router.push({
+            pathname: '/screen-kits/duolingo/lesson-complete',
+            params: { xp, accuracy, heartsLeft: hearts },
+          });
+        }, 500);
+      }
+    } else {
+      if (hearts === 0) {
+        router.push('/screen-kits/duolingo/lesson-fail');
+      } else {
+        const nextIndex = currentIndex + 1;
+        if (nextIndex < QUESTIONS.length) {
+          setCurrentIndex(nextIndex);
+          setStatus('idle');
+          setSelected(null);
+        } else {
+          const accuracy = Math.round((correctCount / QUESTIONS.length) * 100);
+          const xp = correctCount * 10;
+          router.push({
+            pathname: '/screen-kits/duolingo/lesson-complete',
+            params: { xp, accuracy, heartsLeft: hearts },
+          });
+        }
+      }
+    }
+  };
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: theme.colors.background }]}
+    >
+      <Stack.Screen options={{ headerShown: false }} />
+
+      {/* Header */}
+      <View style={styles.header}>
+        <TouchableOpacity onPress={() => router.back()}>
+          <Ionicons
+            name="close"
+            size={28}
+            color={theme.colors.mutedForeground}
+          />
+        </TouchableOpacity>
+        <View
+          style={[styles.progressBar, { backgroundColor: theme.colors.muted }]}
+        >
+          <Animated.View
+            style={[
+              styles.progressFill,
+              { backgroundColor: DUO_COLORS.green },
+              progressStyle,
+            ]}
+          />
+        </View>
+        <View style={styles.heartsContainer}>
+          <Ionicons name="heart" size={24} color={DUO_COLORS.red} />
+          <Text style={styles.heartsText}>5</Text>
+        </View>
+      </View>
+
+      <View style={styles.content}>
+        <Text style={[styles.questionText, { color: theme.colors.foreground }]}>
+          {currentQuestion.question}
+        </Text>
+
+        <View style={styles.optionsGrid}>
+          {currentQuestion.options.map((opt, index) => {
+            const isSelected = selected === opt.id;
+            return (
+              <Animated.View
+                key={opt.id}
+                entering={FadeInDown.delay(index * 100)}
+                layout={Layout}
+                style={styles.optionWrapper}
+              >
+                <TouchableOpacity
+                  activeOpacity={0.9}
+                  onPress={() => {
+                    if (status === 'idle') setSelected(opt.id);
+                  }}
+                  style={[
+                    styles.optionButton,
+                    {
+                      borderColor: isSelected
+                        ? DUO_COLORS.blue
+                        : theme.colors.border,
+                      backgroundColor: isSelected
+                        ? isDark
+                          ? '#082D42'
+                          : '#DDF4FF'
+                        : theme.colors.card,
+                      borderBottomWidth: isSelected ? 2 : 4,
+                    },
+                  ]}
+                >
+                  <Ionicons
+                    name={opt.icon}
+                    size={48}
+                    color={
+                      isSelected
+                        ? DUO_COLORS.blue
+                        : isDark
+                          ? theme.colors.neutral[400]
+                          : theme.colors.foreground
+                    }
+                  />
+                  <Text
+                    style={[
+                      styles.optionLabel,
+                      {
+                        color: isSelected
+                          ? DUO_COLORS.blue
+                          : theme.colors.foreground,
+                        fontWeight: isSelected ? '700' : '400',
+                      },
+                    ]}
+                  >
+                    {opt.label}
+                  </Text>
+                </TouchableOpacity>
+              </Animated.View>
+            );
+          })}
+        </View>
+      </View>
+
+      {/* Footer */}
+      <View
+        style={[
+          styles.footer,
+          status === 'correct'
+            ? { backgroundColor: isDark ? '#05290B' : '#d7ffb8' }
+            : status === 'wrong'
+              ? { backgroundColor: isDark ? '#3D0808' : '#ffdfe0' }
+              : null,
+        ]}
+      >
+        {status === 'correct' && (
+          <Animated.View
+            entering={ZoomIn.springify()}
+            style={styles.feedbackRow}
+          >
+            <Ionicons
+              name="checkmark-circle"
+              size={32}
+              color={DUO_COLORS.green}
+            />
+            <Text style={styles.feedbackTextCorrect}>Excellent!</Text>
+          </Animated.View>
+        )}
+        {status === 'wrong' && (
+          <Animated.View entering={FadeInDown} style={styles.feedbackRow}>
+            <Ionicons name="alert-circle" size={32} color={DUO_COLORS.red} />
+            <Text style={styles.feedbackTextWrong}>
+              Correct solution:{' '}
+              {
+                currentQuestion.options.find(
+                  (o) => o.id === currentQuestion.correctId,
+                )?.label
+              }
+            </Text>
+          </Animated.View>
+        )}
+
+        <DuoButton
+          label={
+            status === 'idle'
+              ? 'Check'
+              : status === 'correct'
+                ? 'Continue'
+                : 'Got it'
+          }
+          onPress={status === 'idle' ? handleCheck : handleContinue}
+          disabled={!selected && status === 'idle'}
+          variant={
+            status === 'wrong'
+              ? 'danger'
+              : status === 'correct'
+                ? 'primary'
+                : 'primary'
+          }
+          size="lg"
+          fullWidth
+        />
+      </View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    paddingTop: 60,
+  },
+  header: {
+    paddingHorizontal: 20,
+    paddingVertical: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 16,
+  },
+  progressBar: {
+    flex: 1,
+    height: 16,
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+    borderRadius: 8,
+  },
+  heartsContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  heartsText: {
+    marginLeft: 4,
+    fontWeight: '700',
+    fontSize: 18,
+    color: '#ef4444',
+  },
+  content: {
+    flex: 1,
+    paddingHorizontal: 20,
+    paddingTop: 16,
+  },
+  questionText: {
+    fontSize: 24,
+    fontWeight: '700',
+    marginBottom: 32,
+  },
+  optionsGrid: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    gap: 16,
+    justifyContent: 'space-between',
+  },
+  optionWrapper: {
+    width: '47%',
+  },
+  optionButton: {
+    borderWidth: 2,
+    borderRadius: 16,
+    padding: 16,
+    alignItems: 'center',
+    gap: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.05,
+    shadowRadius: 4,
+  },
+  optionLabel: {
+    fontSize: 18,
+  },
+  footer: {
+    paddingHorizontal: 20,
+    paddingTop: 24,
+    paddingBottom: 40,
+    borderTopWidth: 1,
+    borderColor: 'transparent',
+  },
+  feedbackRow: {
+    marginBottom: 16,
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 8,
+  },
+  feedbackTextCorrect: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: '#15803d',
+  },
+  feedbackTextWrong: {
+    fontSize: 20,
+    fontWeight: '700',
+    color: '#b91c1c',
+  },
+});

package/recipes/screen-kits-duolingo/recipe.json

@@ -0,0 +1,58 @@
+{
+  "name": "screen-kits-duolingo",
+  "version": "1.0.0",
+  "description": "Screen kit: Lingo Learner (Duolingo-inspired)",
+  "copy": [
+    {
+      "from": "apps/native/src/app/screen-kits/duolingo",
+      "to": "apps/native/src/app/(root)/(protected)/screen-kits/duolingo"
+    },
+    {
+      "from": "apps/native/src/features/screen-kits/duolingo",
+      "to": "apps/native/src/features/screen-kits/duolingo"
+    }
+  ],
+  "screenKit": {
+    "id": "duolingo",
+    "title": "Lingo Learner",
+    "description": "Gamified language learning experience",
+    "icon": "🦉",
+    "color": "#58CC02",
+    "screens": [
+      {
+        "id": "home",
+        "name": "Home Dashboard",
+        "description": "Main learning path with daily streak",
+        "route": "/screen-kits/duolingo/home"
+      },
+      {
+        "id": "skill-tree",
+        "name": "Skill Tree",
+        "description": "Vertical progression path",
+        "route": "/screen-kits/duolingo/skill-tree"
+      },
+      {
+        "id": "lesson",
+        "name": "Lesson Practice",
+        "description": "Interactive questions with feedback",
+        "route": "/screen-kits/duolingo/lesson"
+      }
+    ]
+  },
+  "target": "native",
+  "dependencies": {
+    "expo": [
+      "@expo/vector-icons",
+      "@gorhom/bottom-sheet",
+      "expo-blur",
+      "expo-haptics",
+      "expo-linear-gradient",
+      "lottie-react-native",
+      "react-native-css-interop",
+      "react-native-gesture-handler",
+      "react-native-reanimated",
+      "react-native-safe-area-context",
+      "react-native-svg"
+    ]
+  }
+}

package/recipes/screen-kits-finance/apps/native/src/app/screen-kits/finance/_layout.tsx

@@ -0,0 +1,45 @@
+import { Stack } from 'expo-router';
+import React from 'react';
+
+export default function FinanceLayout() {
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="wallet" />
+      <Stack.Screen
+        name="send"
+        options={{
+          presentation: 'modal',
+          animation: 'slide_from_bottom',
+        }}
+      />
+      <Stack.Screen
+        name="receive"
+        options={{
+          presentation: 'modal',
+          animation: 'slide_from_bottom',
+        }}
+      />
+      <Stack.Screen
+        name="swap"
+        options={{
+          presentation: 'modal',
+          animation: 'slide_from_bottom',
+        }}
+      />
+      <Stack.Screen
+        name="notifications"
+        options={{
+          presentation: 'transparentModal',
+          animation: 'fade',
+        }}
+      />
+      <Stack.Screen
+        name="asset-detail"
+        options={{
+          presentation: 'card',
+          animation: 'slide_from_right',
+        }}
+      />
+    </Stack>
+  );
+}

package/recipes/screen-kits-finance/apps/native/src/app/screen-kits/finance/asset-detail.tsx

@@ -0,0 +1,3 @@
+import AssetDetailScreen from '@/features/screen-kits/finance/screens/asset-detail';
+
+export default AssetDetailScreen;

package/recipes/screen-kits-finance/apps/native/src/app/screen-kits/finance/notifications.tsx

@@ -0,0 +1,3 @@
+import NotificationsModal from '@/features/screen-kits/finance/screens/notifications';
+
+export default NotificationsModal;

package/recipes/screen-kits-finance/apps/native/src/app/screen-kits/finance/receive.tsx

@@ -0,0 +1,3 @@
+import ReceiveModal from '@/features/screen-kits/finance/screens/receive-modal';
+
+export default ReceiveModal;

package/recipes/screen-kits-finance/apps/native/src/app/screen-kits/finance/send.tsx

@@ -0,0 +1,3 @@
+import SendModal from '@/features/screen-kits/finance/screens/send-modal';
+
+export default SendModal;

package/recipes/screen-kits-finance/apps/native/src/app/screen-kits/finance/swap.tsx

@@ -0,0 +1,3 @@
+import SwapModal from '@/features/screen-kits/finance/screens/swap-modal';
+
+export default SwapModal;

package/recipes/screen-kits-finance/apps/native/src/app/screen-kits/finance/wallet.tsx

@@ -0,0 +1,3 @@
+import WalletDashboard from '@/features/screen-kits/finance/screens/wallet-dashboard';
+
+export default WalletDashboard;

package/recipes/screen-kits-finance/apps/native/src/features/screen-kits/finance/components/ActionButtons.tsx

@@ -0,0 +1,78 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+import { Text } from '@/components/ui';
+
+import { FINANCE_COLORS } from '../constants';
+
+const ACTIONS = [
+  {
+    id: 'send',
+    label: 'Send',
+    icon: 'arrow-up',
+    color: FINANCE_COLORS.primary,
+  },
+  {
+    id: 'receive',
+    label: 'Receive',
+    icon: 'arrow-down',
+    color: FINANCE_COLORS.secondary,
+  },
+  {
+    id: 'swap',
+    label: 'Swap',
+    icon: 'swap-horizontal',
+    color: FINANCE_COLORS.accent,
+  },
+  { id: 'buy', label: 'Buy', icon: 'card', color: FINANCE_COLORS.success },
+];
+
+interface ActionButtonsProps {
+  onSendBy: () => void;
+  onReceive: () => void;
+  onSwap: () => void;
+  onBuy: () => void;
+}
+
+export const ActionButtons = ({
+  onSendBy,
+  onReceive,
+  onSwap,
+  onBuy,
+}: ActionButtonsProps) => {
+  return (
+    <View className="flex-row justify-between px-4 mb-8">
+      {ACTIONS.map((action) => (
+        <View key={action.id} className="items-center gap-2">
+          <TouchableOpacity
+            onPress={() => {
+              if (action.id === 'send') onSendBy();
+              if (action.id === 'receive') onReceive();
+              if (action.id === 'swap') onSwap();
+              if (action.id === 'buy') onBuy();
+            }}
+            className="w-14 h-14 rounded-full items-center justify-center border border-zinc-800 bg-zinc-900 active:scale-95"
+            activeOpacity={0.8}
+            style={{
+              shadowColor: action.color,
+              shadowOffset: { width: 0, height: 4 },
+              shadowOpacity: 0.2,
+              shadowRadius: 8,
+              elevation: 4,
+            }}
+          >
+            <Ionicons
+              name={action.icon as any}
+              size={24}
+              color={action.color}
+            />
+          </TouchableOpacity>
+          <Text className="text-zinc-400 text-xs font-medium">
+            {action.label}
+          </Text>
+        </View>
+      ))}
+    </View>
+  );
+};

package/recipes/screen-kits-finance/apps/native/src/features/screen-kits/finance/components/AssetRow.tsx

@@ -0,0 +1,94 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import { TouchableOpacity, View } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+
+import { Text } from '@/components/ui';
+
+import { FINANCE_COLORS } from '../constants';
+
+interface AssetRowProps {
+  asset: {
+    id: string;
+    name: string;
+    symbol: string;
+    amount: number;
+    value: number;
+    change: number;
+    color: string;
+    chartData: number[];
+  };
+  onPress: () => void;
+}
+
+export const AssetRow = ({ asset, onPress }: AssetRowProps) => {
+  const isPositive = asset.change >= 0;
+
+  // Tiny sparkline path logic (simplified)
+  const min = Math.min(...asset.chartData);
+  const max = Math.max(...asset.chartData);
+  const range = max - min;
+  const h = 30; // height
+  const w = 60; // width
+  const step = w / (asset.chartData.length - 1);
+
+  const points = asset.chartData
+    .map((val, i) => {
+      // If range is 0 (flat line), center vertically
+      const fraction = range === 0 ? 0.5 : (val - min) / range;
+      const y = h - fraction * h;
+      return `${i * step},${y}`;
+    })
+    .join(' ');
+
+  const d = `M ${points}`;
+
+  return (
+    <TouchableOpacity
+      onPress={onPress}
+      className="flex-row items-center justify-between py-4 border-b border-zinc-900 active:bg-zinc-900/50 px-2 rounded-xl"
+    >
+      <View className="flex-row items-center gap-4">
+        {/* Icon Placeholder */}
+        <View
+          className="w-10 h-10 rounded-full items-center justify-center"
+          style={{ backgroundColor: `${asset.color}20` }}
+        >
+          <Text style={{ color: asset.color }} className="font-bold text-xs">
+            {asset.symbol[0]}
+          </Text>
+        </View>
+        <View>
+          <Text className="text-white font-bold text-base">{asset.name}</Text>
+          <Text className="text-zinc-500 text-xs">
+            {asset.amount} {asset.symbol}
+          </Text>
+        </View>
+      </View>
+
+      {/* Sparkline */}
+      <View className="h-8 w-16 justify-center">
+        <Svg height={h} width={w}>
+          <Path
+            d={d}
+            stroke={isPositive ? FINANCE_COLORS.success : FINANCE_COLORS.danger}
+            strokeWidth={2}
+            fill="none"
+          />
+        </Svg>
+      </View>
+
+      <View className="items-end">
+        <Text className="text-white font-bold text-base">
+          ${asset.value.toLocaleString()}
+        </Text>
+        <Text
+          className={`text-xs font-medium ${isPositive ? 'text-emerald-500' : 'text-red-500'}`}
+        >
+          {isPositive ? '+' : ''}
+          {asset.change}%
+        </Text>
+      </View>
+    </TouchableOpacity>
+  );
+};