vibefast-cli 1.2.1 → 1.3.1

package/recipes/screen-kits-duolingo/apps/native/src/features/screen-kits/duolingo/components/duo-button.tsx

@@ -0,0 +1,174 @@
+import React from 'react';
+import { Pressable, StyleSheet, View, ViewStyle } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import { DUO_COLORS } from '../constants';
+
+interface DuoButtonProps {
+  label: string;
+  variant?: 'primary' | 'secondary' | 'danger' | 'outline' | 'ghost';
+  size?: 'sm' | 'md' | 'lg';
+  onPress?: () => void;
+  disabled?: boolean;
+  fullWidth?: boolean;
+}
+
+const AnimatedPressable = Animated.createAnimatedComponent(Pressable);
+
+export default function DuoButton({
+  label,
+  variant = 'primary',
+  size = 'md',
+  onPress,
+  disabled = false,
+  fullWidth = true,
+}: DuoButtonProps) {
+  const theme = useThemeConfig();
+  const offset = useSharedValue(0);
+
+  let faceColor = DUO_COLORS.green;
+  let edgeColor = DUO_COLORS.greenDark;
+  let textColor = DUO_COLORS.white;
+  let borderWidth = 0;
+  let borderColor = 'transparent';
+
+  if (disabled) {
+    faceColor = theme.colors.muted;
+    edgeColor = theme.colors.neutral[400];
+    textColor = theme.colors.mutedForeground;
+  } else {
+    switch (variant) {
+      case 'primary':
+        faceColor = DUO_COLORS.green;
+        edgeColor = DUO_COLORS.greenDark;
+        textColor = DUO_COLORS.white;
+        break;
+      case 'secondary':
+        faceColor = DUO_COLORS.blue;
+        edgeColor = DUO_COLORS.blueDark;
+        textColor = DUO_COLORS.white;
+        break;
+      case 'danger':
+        faceColor = DUO_COLORS.red;
+        edgeColor = DUO_COLORS.redDark;
+        textColor = DUO_COLORS.white;
+        break;
+      case 'outline':
+        faceColor = theme.colors.card;
+        edgeColor = theme.colors.border;
+        textColor = DUO_COLORS.blue;
+        borderWidth = 2;
+        borderColor = theme.colors.border;
+        break;
+      case 'ghost':
+        faceColor = 'transparent';
+        edgeColor = 'transparent';
+        textColor = DUO_COLORS.blue;
+        break;
+    }
+  }
+
+  let height = 50;
+  let fontSize = 18;
+  let edgeHeight = 6;
+
+  if (size === 'sm') {
+    height = 40;
+    fontSize = 15;
+    edgeHeight = 4;
+  } else if (size === 'lg') {
+    height = 56;
+    fontSize = 20;
+    edgeHeight = 8;
+  }
+
+  if (variant === 'ghost') {
+    edgeHeight = 0;
+  }
+
+  const handlePressIn = () => {
+    if (disabled || variant === 'ghost') return;
+    offset.value = withTiming(edgeHeight, { duration: 10 });
+  };
+
+  const handlePressOut = () => {
+    if (disabled || variant === 'ghost') return;
+    offset.value = withTiming(0, { duration: 10 });
+  };
+
+  const animatedFaceStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: offset.value }],
+  }));
+
+  const containerStyle: ViewStyle = {
+    width: fullWidth ? '100%' : undefined,
+    alignSelf: fullWidth ? undefined : 'flex-start',
+    height: height + (variant === 'ghost' ? 0 : edgeHeight),
+  };
+
+  return (
+    <View style={containerStyle}>
+      {/* Bottom Layer (The Edge/Shadow) */}
+      {!disabled && variant !== 'ghost' && (
+        <View
+          style={[
+            styles.edgeLayer,
+            {
+              height: height,
+              top: edgeHeight,
+              backgroundColor: edgeColor,
+              borderRadius: 16,
+            },
+          ]}
+        />
+      )}
+
+      {/* Top Layer (The Face) */}
+      <AnimatedPressable
+        onPress={onPress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        disabled={disabled}
+        style={[
+          styles.faceLayer,
+          animatedFaceStyle,
+          {
+            height: height,
+            backgroundColor: faceColor,
+            borderWidth: borderWidth,
+            borderColor: borderColor,
+            borderRadius: 16,
+          },
+        ]}
+      >
+        <Text style={[styles.label, { color: textColor, fontSize }]}>
+          {label}
+        </Text>
+      </AnimatedPressable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  edgeLayer: {
+    position: 'absolute',
+    width: '100%',
+  },
+  faceLayer: {
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  label: {
+    fontWeight: '700',
+    textTransform: 'uppercase',
+    letterSpacing: 1,
+  },
+});

package/recipes/screen-kits-duolingo/apps/native/src/features/screen-kits/duolingo/components/skill-button.tsx

@@ -0,0 +1,186 @@
+import { FontAwesome5, Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import { StyleSheet, TouchableOpacity, View } from 'react-native';
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import { DUO_COLORS } from '../constants';
+
+interface SkillButtonProps {
+  icon: string;
+  status: 'locked' | 'active' | 'completed';
+  type?: 'u1-l1' | 'start' | 'normal' | 'chest' | 'story' | 'trophy' | 'gym';
+  stars?: number;
+  color?: string;
+  onPress?: () => void;
+}
+
+const AnimatedTouchable = Animated.createAnimatedComponent(TouchableOpacity);
+
+export default function SkillButton({
+  icon,
+  status,
+  type = 'normal',
+  stars = 0,
+  color = DUO_COLORS.green,
+  onPress,
+}: SkillButtonProps) {
+  const theme = useThemeConfig();
+  const isLocked = status === 'locked';
+  const isActive = status === 'active';
+  const size = 72;
+
+  const mainColor = isLocked
+    ? theme.colors.muted
+    : status === 'completed'
+      ? DUO_COLORS.gold
+      : color;
+
+  const shadowColor = isLocked
+    ? theme.colors.neutral[400]
+    : status === 'completed'
+      ? DUO_COLORS.goldDark
+      : color === DUO_COLORS.green
+        ? DUO_COLORS.greenDark
+        : DUO_COLORS.blueDark;
+
+  const scale = useSharedValue(1);
+  const pulse = useSharedValue(1);
+
+  React.useEffect(() => {
+    if (isActive) {
+      pulse.value = withRepeat(
+        withSequence(
+          withTiming(1.1, { duration: 1000 }),
+          withTiming(1, { duration: 1000 }),
+        ),
+        -1,
+        true,
+      );
+    } else {
+      pulse.value = 1;
+    }
+  }, [isActive]);
+
+  const rStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }, { scale: pulse.value }],
+  }));
+
+  const handlePressIn = () => {
+    scale.value = withSpring(0.9);
+  };
+
+  const handlePressOut = () => {
+    scale.value = withSpring(1);
+  };
+
+  const renderIcon = () => {
+    if (type === 'chest') {
+      return <Ionicons name="gift" size={32} color={DUO_COLORS.white} />;
+    }
+    if (type === 'trophy') {
+      return (
+        <Ionicons
+          name="trophy"
+          size={32}
+          color={isLocked ? theme.colors.neutral[400] : DUO_COLORS.gold}
+        />
+      );
+    }
+    return (
+      <FontAwesome5 name={icon as any} size={28} color={DUO_COLORS.white} />
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <AnimatedTouchable
+        onPress={onPress}
+        onPressIn={handlePressIn}
+        onPressOut={handlePressOut}
+        activeOpacity={1}
+        style={rStyle}
+      >
+        {/* Shadow/3D effect layer */}
+        <View
+          style={[
+            styles.shadowLayer,
+            {
+              width: size,
+              height: size,
+              borderRadius: size / 2,
+              backgroundColor: shadowColor,
+            },
+          ]}
+        >
+          {/* Main button face */}
+          <View
+            style={[
+              styles.buttonFace,
+              {
+                borderRadius: size / 2,
+                backgroundColor: mainColor,
+              },
+            ]}
+          >
+            {status === 'completed' && (
+              <View style={styles.crownBadge}>
+                <Ionicons name="school" size={12} color="#D6A500" />
+              </View>
+            )}
+            {renderIcon()}
+          </View>
+        </View>
+
+        {/* Active state pulsing ring */}
+        {isActive && <View style={styles.pulseRing} />}
+      </AnimatedTouchable>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginBottom: 8,
+  },
+  shadowLayer: {
+    marginBottom: 6,
+  },
+  buttonFace: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+    transform: [{ translateY: -6 }],
+  },
+  crownBadge: {
+    position: 'absolute',
+    right: -8,
+    top: -8,
+    backgroundColor: '#facc15',
+    borderRadius: 12,
+    padding: 4,
+    borderWidth: 2,
+    borderColor: '#ffffff',
+  },
+  pulseRing: {
+    position: 'absolute',
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 36,
+    borderWidth: 4,
+    borderColor: 'rgba(255, 255, 255, 0.3)',
+  },
+});

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';