vibefast-cli 1.3.0 → 1.3.1

package/recipes/screen-kits-duolingo/apps/native/src/features/screen-kits/duolingo/components/xp-header.tsx

@@ -0,0 +1,115 @@
+import { Ionicons } from '@expo/vector-icons';
+import { BlurView } from 'expo-blur';
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { useColorScheme } from 'react-native-css-interop';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import { DUO_COLORS } from '../constants';
+
+export default function XPHeader() {
+  const insets = useSafeAreaInsets();
+  const { colorScheme } = useColorScheme();
+  const theme = useThemeConfig();
+  const isDark = colorScheme === 'dark';
+
+  return (
+    <BlurView
+      intensity={90}
+      tint={isDark ? 'dark' : 'light'}
+      style={[styles.container, { paddingTop: insets.top }]}
+    >
+      <View style={[styles.header, { borderColor: theme.colors.border }]}>
+        {/* Flag / Course */}
+        <View style={styles.flagContainer}>
+          <View
+            style={[
+              styles.flagIcon,
+              {
+                backgroundColor: theme.colors.muted,
+                borderColor: theme.colors.border,
+              },
+            ]}
+          >
+            <Text style={styles.flagEmoji}>🇪🇸</Text>
+          </View>
+        </View>
+
+        {/* Stats Container */}
+        <View style={styles.statsContainer}>
+          {/* Streak */}
+          <View style={styles.statItem}>
+            <Ionicons name="flame" size={24} color={DUO_COLORS.red} />
+            <Text style={[styles.statText, { color: DUO_COLORS.red }]}>14</Text>
+          </View>
+
+          {/* Gems */}
+          <View style={styles.statItem}>
+            <Ionicons name="diamond" size={20} color={DUO_COLORS.blue} />
+            <Text style={[styles.statText, { color: DUO_COLORS.blue }]}>
+              450
+            </Text>
+          </View>
+
+          {/* Hearts */}
+          <View style={styles.statItem}>
+            <Ionicons name="heart" size={24} color={DUO_COLORS.red} />
+            <Text style={[styles.statText, { color: DUO_COLORS.red }]}>5</Text>
+          </View>
+        </View>
+      </View>
+    </BlurView>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    zIndex: 50,
+  },
+  header: {
+    paddingTop: 24,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderBottomWidth: 1,
+  },
+  flagContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  flagIcon: {
+    width: 36,
+    height: 28,
+    borderRadius: 6,
+    overflow: 'hidden',
+    marginRight: 8,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+  },
+  flagEmoji: {
+    fontSize: 20,
+  },
+  statsContainer: {
+    flexDirection: 'row',
+    gap: 20,
+  },
+  statItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  statText: {
+    marginLeft: 6,
+    fontWeight: '800',
+    fontSize: 16,
+  },
+});

package/recipes/screen-kits-duolingo/apps/native/src/features/screen-kits/duolingo/constants.ts

@@ -0,0 +1,89 @@
+export const DUO_COLORS = {
+  green: '#58CC02',
+  greenDark: '#46A302',
+  gold: '#FFC800',
+  goldDark: '#D6A500',
+  blue: '#1CB0F6',
+  blueDark: '#1480B0',
+  red: '#FF4B4B',
+  redDark: '#D42D2D',
+  white: '#FFFFFF',
+};
+
+export const MOCK_UNITS = [
+  {
+    id: 'u1',
+    color: DUO_COLORS.green,
+    title: 'Unit 1',
+    description: 'Form basic sentences, greet people',
+    lessons: [
+      {
+        id: 'u1-l1',
+        icon: 'star',
+        type: 'start',
+        status: 'completed',
+        stars: 3,
+      },
+      {
+        id: 'u1-l2',
+        icon: 'egg',
+        type: 'normal',
+        status: 'completed',
+        stars: 2,
+      },
+      {
+        id: 'u1-l3',
+        icon: 'apple',
+        type: 'normal',
+        status: 'active',
+        stars: 0,
+      },
+      {
+        id: 'u1-chest',
+        icon: 'chest',
+        type: 'chest',
+        status: 'locked',
+        stars: 0,
+      },
+      { id: 'u1-l4', icon: 'book', type: 'story', status: 'locked', stars: 0 },
+      {
+        id: 'u1-trophy',
+        icon: 'trophy',
+        type: 'trophy',
+        status: 'locked',
+        stars: 0,
+      },
+    ],
+  },
+  {
+    id: 'u2',
+    color: DUO_COLORS.blue,
+    title: 'Unit 2',
+    description: 'Get around in a city',
+    lessons: [
+      { id: 'u2-l1', icon: 'bus', type: 'start', status: 'locked', stars: 0 },
+      { id: 'u2-l2', icon: 'map', type: 'normal', status: 'locked', stars: 0 },
+      {
+        id: 'u2-gym',
+        icon: 'dumbbell',
+        type: 'gym',
+        status: 'locked',
+        stars: 0,
+      },
+      {
+        id: 'u2-l3',
+        icon: 'camera',
+        type: 'normal',
+        status: 'locked',
+        stars: 0,
+      },
+      {
+        id: 'u2-trophy',
+        icon: 'trophy',
+        type: 'trophy',
+        status: 'locked',
+        stars: 0,
+      },
+    ],
+  },
+];

package/recipes/screen-kits-duolingo/apps/native/src/features/screen-kits/duolingo/index.ts

@@ -0,0 +1,3 @@
+export { default as DuolingoHomeScreen } from './screens/home-screen';
+export { default as DuolingoLessonScreen } from './screens/lesson-screen';
+export { default as DuolingoLessonCompleteScreen } from './screens/lesson-complete-screen';

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