vibefast-cli 1.2.1 → 1.3.1

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

@@ -0,0 +1,225 @@
+import { Stack, useRouter } from 'expo-router';
+import React from 'react';
+import { Dimensions, ScrollView, StyleSheet, View } from 'react-native';
+import Animated, { FadeIn } from 'react-native-reanimated';
+import Svg, { Path } from 'react-native-svg';
+
+import { SafeAreaView, Text } from '@/components/ui';
+
+import { MOCK_UNITS } from '../constants';
+import SkillButton from '../components/skill-button';
+import XPHeader from '../components/xp-header';
+
+const { width } = Dimensions.get('window');
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+const NODE_SIZE = 72;
+const NODE_SPACING = 20;
+const X_AMPLITUDE = 60;
+
+export default function DuolingoHomeScreen() {
+  const router = useRouter();
+  const theme = useThemeConfig();
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: theme.colors.background }]}
+    >
+      <Stack.Screen options={{ headerShown: false }} />
+      <XPHeader />
+
+      <ScrollView
+        showsVerticalScrollIndicator={false}
+        contentContainerStyle={styles.scrollContent}
+      >
+        {MOCK_UNITS.map((unit) => {
+          let pathD = '';
+
+          const points = unit.lessons.map((_, i) => {
+            const offset = Math.sin((i * Math.PI) / 2) * X_AMPLITUDE;
+            const y = i * (NODE_SIZE + NODE_SPACING) + NODE_SIZE / 2;
+            const x = width / 2 + offset;
+            return { x, y };
+          });
+
+          points.forEach((p, i) => {
+            if (i === 0) {
+              pathD += `M ${p.x} ${p.y}`;
+            } else {
+              const prev = points[i - 1];
+              const c1y = prev.y + 40;
+              const c2y = p.y - 40;
+              pathD += ` C ${prev.x} ${c1y} ${p.x} ${c2y} ${p.x} ${p.y}`;
+            }
+          });
+
+          return (
+            <View key={unit.id} style={styles.unitContainer}>
+              {/* Unit Header */}
+              <View
+                style={[styles.unitHeader, { backgroundColor: unit.color }]}
+              >
+                <View style={styles.unitHeaderContent}>
+                  <View style={styles.unitTextContainer}>
+                    <Text style={styles.unitTitle}>{unit.title}</Text>
+                    <Text style={styles.unitDescription}>
+                      {unit.description}
+                    </Text>
+                  </View>
+                  <View style={styles.guideButton}>
+                    <Text style={styles.guideButtonText}>📖 Guide</Text>
+                  </View>
+                </View>
+                <View style={styles.mascotContainer}>
+                  <Text style={styles.mascotEmoji}>🦉</Text>
+                </View>
+              </View>
+
+              {/* Path Container */}
+              <View style={styles.pathContainer}>
+                {/* The Connector Line */}
+                <View
+                  style={[
+                    styles.connectorContainer,
+                    { height: points[points.length - 1].y },
+                  ]}
+                >
+                  <Svg width={width} height="100%">
+                    <Path
+                      d={pathD}
+                      stroke={theme.colors.border}
+                      strokeWidth="10"
+                      strokeLinecap="round"
+                      fill="none"
+                    />
+                  </Svg>
+                </View>
+
+                {/* The Nodes */}
+                {unit.lessons.map((lesson, index) => {
+                  const offset = Math.sin((index * Math.PI) / 2) * X_AMPLITUDE;
+
+                  return (
+                    <Animated.View
+                      key={lesson.id}
+                      entering={FadeIn.delay(index * 100).duration(500)}
+                      style={[
+                        styles.nodeContainer,
+                        {
+                          transform: [{ translateX: offset }],
+                          marginBottom: NODE_SPACING,
+                          width: NODE_SIZE,
+                          height: NODE_SIZE,
+                        },
+                      ]}
+                    >
+                      <SkillButton
+                        icon={lesson.icon}
+                        status={lesson.status as any}
+                        type={lesson.type as any}
+                        stars={lesson.stars}
+                        color={unit.color}
+                        onPress={() => {
+                          if (lesson.status !== 'locked') {
+                            router.push({
+                              pathname: '/screen-kits/duolingo/lesson',
+                              params: { id: lesson.id },
+                            });
+                          }
+                        }}
+                      />
+                    </Animated.View>
+                  );
+                })}
+              </View>
+            </View>
+          );
+        })}
+      </ScrollView>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  scrollContent: {
+    paddingBottom: 100,
+    paddingTop: 100,
+  },
+  unitContainer: {
+    marginBottom: 0,
+  },
+  unitHeader: {
+    paddingHorizontal: 16,
+    paddingVertical: 24,
+    marginBottom: 32,
+    marginHorizontal: 16,
+    borderRadius: 16,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 2 },
+    shadowOpacity: 0.1,
+    shadowRadius: 4,
+    overflow: 'hidden',
+    position: 'relative',
+  },
+  unitHeaderContent: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    position: 'relative',
+    zIndex: 10,
+  },
+  unitTextContainer: {
+    flex: 1,
+    marginRight: 16,
+  },
+  unitTitle: {
+    color: 'rgba(255, 255, 255, 0.9)',
+    fontWeight: '700',
+    fontSize: 18,
+    textTransform: 'uppercase',
+    marginBottom: 4,
+  },
+  unitDescription: {
+    color: '#ffffff',
+    fontWeight: '900',
+    fontSize: 20,
+    lineHeight: 24,
+  },
+  guideButton: {
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    paddingHorizontal: 12,
+    paddingVertical: 8,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: 'rgba(255, 255, 255, 0.1)',
+  },
+  guideButtonText: {
+    color: '#ffffff',
+    fontWeight: '700',
+  },
+  mascotContainer: {
+    position: 'absolute',
+    bottom: -8,
+    right: -8,
+    opacity: 0.2,
+    transform: [{ rotate: '12deg' }],
+  },
+  mascotEmoji: {
+    fontSize: 80,
+  },
+  pathContainer: {
+    position: 'relative',
+    alignItems: 'center',
+  },
+  connectorContainer: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+  },
+  nodeContainer: {},
+});

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

@@ -0,0 +1,485 @@
+import { Ionicons } from '@expo/vector-icons';
+import { LinearGradient } from 'expo-linear-gradient';
+import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
+import LottieView from 'lottie-react-native';
+import React, { useEffect, useRef } from 'react';
+import { StyleSheet, TextInput, View, Dimensions } from 'react-native';
+import Animated, {
+  FadeInDown,
+  FadeInUp,
+  SharedValue,
+  useAnimatedProps,
+  useDerivedValue,
+  useSharedValue,
+  withDelay,
+  withTiming,
+  ZoomIn,
+} from 'react-native-reanimated';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import DuoButton from '../components/duo-button';
+import { DUO_COLORS } from '../constants';
+
+const AnimatedTextInput = Animated.createAnimatedComponent(TextInput);
+
+function ReText({ style, text }: { style?: any; text: SharedValue<string> }) {
+  const animatedProps = useAnimatedProps(() => {
+    return {
+      text: text.value,
+    } as any;
+  });
+
+  return (
+    <AnimatedTextInput
+      underlineColorAndroid="transparent"
+      editable={false}
+      defaultValue={text.value}
+      caretHidden
+      selectionColor="transparent"
+      contextMenuHidden
+      style={[styles.reText, style]}
+      animatedProps={animatedProps}
+    />
+  );
+}
+
+function StatPillar({
+  label,
+  value,
+  color,
+  edgeColor,
+  icon,
+  delay = 0,
+}: {
+  label: string;
+  value: string;
+  color: string;
+  edgeColor: string;
+  icon: any;
+  delay?: number;
+}) {
+  const theme = useThemeConfig();
+  return (
+    <Animated.View
+      entering={FadeInDown.delay(delay).springify()}
+      style={styles.statPillarContainer}
+    >
+      <View
+        style={[
+          styles.statPillarBox,
+          {
+            backgroundColor: color,
+            borderBottomColor: edgeColor,
+          },
+        ]}
+      >
+        <Ionicons name={icon} size={28} color="white" />
+        <Text style={styles.statPillarValue}>{value}</Text>
+      </View>
+      <Text
+        style={[
+          styles.statPillarLabel,
+          { color: theme.colors.mutedForeground },
+        ]}
+      >
+        {label}
+      </Text>
+    </Animated.View>
+  );
+}
+
+export default function LessonCompleteScreen() {
+  const router = useRouter();
+  const params = useLocalSearchParams();
+  const theme = useThemeConfig();
+  const confettiRef = useRef<LottieView>(null);
+
+  const xp = params.xp ? Number(params.xp) : 40;
+  const accuracyVal = params.accuracy ? Number(params.accuracy) : 100;
+
+  const baseXp = Math.floor(xp * 0.75);
+  const bonusXp = Math.ceil(xp * 0.25);
+  const totalXp = xp;
+  const focusMinutes = 5;
+  const accuracy = accuracyVal;
+  const rating = accuracy >= 90 ? 'Amazing' : accuracy >= 70 ? 'Good' : 'Okay';
+  const streakDays = 7;
+  const unitProgress = 6;
+  const unitTotal = 12;
+  const unitCompletion = Math.min(unitProgress / unitTotal, 1);
+  const showPerfectBadge = accuracy === 100;
+
+  const xpValue = useSharedValue(0);
+
+  useEffect(() => {
+    xpValue.value = withDelay(800, withTiming(totalXp, { duration: 1500 }));
+    setTimeout(() => {
+      confettiRef.current?.play();
+    }, 500);
+  }, [totalXp, xpValue]);
+
+  const xpText = useDerivedValue(() => {
+    return `${Math.round(xpValue.value)}`;
+  });
+
+  const backgroundGradient = theme.dark
+    ? (['#0B0F14', '#0E1319', '#111214'] as const)
+    : (['#FFFDF6', '#FFFDF6', '#FFFFFF'] as const);
+
+  const headlineColor = theme.dark ? '#FFE7A3' : DUO_COLORS.goldDark;
+
+  return (
+    <View
+      style={[styles.container, { backgroundColor: theme.colors.background }]}
+    >
+      <Stack.Screen options={{ headerShown: false }} />
+      <LinearGradient
+        colors={backgroundGradient}
+        style={StyleSheet.absoluteFillObject}
+      />
+
+      {/* Confetti Layer */}
+      <View pointerEvents="none" style={styles.confettiLayer}>
+        <LottieView
+          ref={confettiRef}
+          source={{
+            uri: 'https://assets9.lottiefiles.com/packages/lf20_u4yrau.json',
+          }}
+          autoPlay={false}
+          loop={false}
+          style={styles.lottie}
+          resizeMode="cover"
+        />
+      </View>
+
+      <View style={styles.content}>
+        {/* Hero Section */}
+        <Animated.View
+          entering={ZoomIn.duration(600)}
+          style={styles.heroSection}
+        >
+          <View style={styles.trophyContainer}>
+            <View
+              style={[
+                styles.trophyGlow,
+                { backgroundColor: DUO_COLORS.gold + '20' },
+              ]}
+            >
+              <Ionicons name="trophy" size={100} color={DUO_COLORS.gold} />
+            </View>
+          </View>
+
+          <Text style={[styles.headline, { color: headlineColor }]}>
+            {showPerfectBadge ? 'Perfect!' : 'Well done!'}
+          </Text>
+          <Text
+            style={[
+              styles.subheadline,
+              { color: theme.colors.mutedForeground },
+            ]}
+          >
+            {showPerfectBadge
+              ? "You didn't make a single mistake!"
+              : 'You are making great progress.'}
+          </Text>
+        </Animated.View>
+
+        {/* XP Counter Section */}
+        <Animated.View
+          entering={FadeInUp.delay(400).springify()}
+          style={styles.xpSection}
+        >
+          <View style={styles.xpRow}>
+            <ReText
+              text={xpText}
+              style={{
+                color: DUO_COLORS.gold,
+                fontSize: 72,
+                fontWeight: '900',
+                textAlign: 'center',
+              }}
+            />
+            <Text style={styles.xpLabel}>XP</Text>
+          </View>
+          <Text
+            style={[
+              styles.xpBreakdown,
+              { color: theme.colors.mutedForeground },
+            ]}
+          >
+            Base {baseXp} + Bonus {bonusXp}
+          </Text>
+        </Animated.View>
+
+        {/* 3D Stats Pillars */}
+        <View style={styles.statsPillarsRow}>
+          <StatPillar
+            label="Focus"
+            value={`${focusMinutes}m`}
+            color={DUO_COLORS.blue}
+            edgeColor={DUO_COLORS.blueDark}
+            icon="timer"
+            delay={600}
+          />
+          <StatPillar
+            label="Accuracy"
+            value={`${accuracy}%`}
+            color={DUO_COLORS.green}
+            edgeColor={DUO_COLORS.greenDark}
+            icon="checkmark-circle"
+            delay={700}
+          />
+          <StatPillar
+            label="Rating"
+            value={rating}
+            color={DUO_COLORS.red}
+            edgeColor={DUO_COLORS.redDark}
+            icon="heart"
+            delay={800}
+          />
+        </View>
+
+        {/* Progress Bar Section */}
+        <Animated.View
+          entering={FadeInUp.delay(900).springify()}
+          style={styles.progressSection}
+        >
+          <View
+            style={[
+              styles.progressCard,
+              {
+                backgroundColor: theme.dark
+                  ? 'rgba(255,255,255,0.05)'
+                  : 'rgba(0,0,0,0.03)',
+                borderColor: theme.dark
+                  ? 'rgba(255,255,255,0.1)'
+                  : 'rgba(0,0,0,0.05)',
+              },
+            ]}
+          >
+            <View style={styles.progressHeader}>
+              <View style={styles.streakRow}>
+                <Ionicons name="flame" size={20} color={DUO_COLORS.red} />
+                <Text
+                  style={[
+                    styles.streakText,
+                    { color: theme.colors.foreground },
+                  ]}
+                >
+                  {streakDays} DAY STREAK
+                </Text>
+              </View>
+              <Text
+                style={[
+                  styles.progressCount,
+                  { color: theme.colors.mutedForeground },
+                ]}
+              >
+                {unitProgress}/{unitTotal}
+              </Text>
+            </View>
+            <View
+              style={[
+                styles.progressTrack,
+                {
+                  backgroundColor: theme.dark
+                    ? 'rgba(255,255,255,0.08)'
+                    : 'rgba(0,0,0,0.08)',
+                },
+              ]}
+            >
+              <View
+                style={[
+                  styles.progressFill,
+                  {
+                    width: `${Math.round(unitCompletion * 100)}%`,
+                    backgroundColor: DUO_COLORS.green,
+                  },
+                ]}
+              />
+            </View>
+          </View>
+        </Animated.View>
+      </View>
+
+      {/* Footer */}
+      <Animated.View entering={FadeInUp.delay(1200)} style={styles.footer}>
+        <DuoButton
+          label="Continue"
+          onPress={() => router.dismissTo('/screen-kits/duolingo')}
+          size="lg"
+          variant="primary"
+          fullWidth
+        />
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  confettiLayer: {
+    ...StyleSheet.absoluteFillObject,
+    zIndex: 10,
+    elevation: 10,
+  },
+  lottie: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingHorizontal: 24,
+    paddingTop: 100,
+  },
+  heroSection: {
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  trophyContainer: {
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  trophyGlow: {
+    width: 180,
+    height: 180,
+    borderWidth: 2,
+    borderColor: DUO_COLORS.gold + '40',
+    borderRadius: 90,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  headline: {
+    fontSize: 36,
+    fontWeight: '900',
+    textAlign: 'center',
+    marginTop: 12,
+    lineHeight: 48,
+    includeFontPadding: false,
+  },
+  subheadline: {
+    fontSize: 18,
+    fontWeight: '700',
+    textAlign: 'center',
+    marginTop: 8,
+    lineHeight: 26,
+  },
+  xpSection: {
+    alignItems: 'center',
+    marginBottom: 20,
+  },
+  xpRow: {
+    flexDirection: 'row',
+    alignItems: 'flex-end',
+  },
+  xpLabel: {
+    fontSize: 36,
+    fontWeight: '900',
+    marginBottom: 12,
+    marginLeft: 8,
+    color: DUO_COLORS.gold,
+    lineHeight: 48,
+    includeFontPadding: false,
+  },
+  xpBreakdown: {
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    letterSpacing: 2,
+    fontSize: 12,
+  },
+  statsPillarsRow: {
+    flexDirection: 'row',
+    width: '100%',
+    justifyContent: 'space-between',
+    marginBottom: 40,
+  },
+  statPillarContainer: {
+    flex: 1,
+    alignItems: 'center',
+    paddingHorizontal: 4,
+  },
+  statPillarBox: {
+    width: '100%',
+    borderRadius: 16,
+    alignItems: 'center',
+    justifyContent: 'center',
+    paddingTop: 16,
+    paddingBottom: 12,
+    borderBottomWidth: 6,
+    minHeight: 100,
+  },
+  statPillarValue: {
+    color: '#ffffff',
+    fontWeight: '900',
+    fontSize: 20,
+    marginTop: 4,
+    lineHeight: 28,
+    includeFontPadding: false,
+  },
+  statPillarLabel: {
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    marginTop: 12,
+    textAlign: 'center',
+    fontSize: 10,
+    letterSpacing: 1.5,
+  },
+  progressSection: {
+    width: '100%',
+  },
+  progressCard: {
+    borderRadius: 24,
+    paddingHorizontal: 24,
+    paddingVertical: 20,
+    borderWidth: 2,
+    marginBottom: 24,
+  },
+  progressHeader: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    marginBottom: 16,
+  },
+  streakRow: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  streakText: {
+    fontWeight: '900',
+    marginLeft: 8,
+    fontSize: 18,
+  },
+  progressCount: {
+    fontWeight: '700',
+  },
+  progressTrack: {
+    height: 16,
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
+  progressFill: {
+    height: '100%',
+    borderRadius: 8,
+  },
+  footer: {
+    paddingHorizontal: 20,
+    paddingBottom: 40,
+    paddingTop: 32,
+    borderTopWidth: 1,
+    borderTopColor: 'transparent',
+  },
+  reText: {
+    padding: 0,
+    textAlign: 'center',
+    textAlignVertical: 'center',
+    includeFontPadding: false,
+    fontVariant: ['tabular-nums'],
+    lineHeight: 90,
+    minHeight: 90,
+  },
+});