vibefast-cli 1.3.0 → 1.3.1

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

@@ -0,0 +1,12 @@
+import { Stack } from 'expo-router';
+
+export default function ScreenKitsLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+        animation: 'slide_from_right',
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,114 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
+import React from 'react';
+import { ScrollView, TouchableOpacity, View } from 'react-native';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+
+import { SafeAreaView, Text } from '@/components/ui';
+import { KITS } from '@/features/screen-kits';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export default function ScreenKitsGallery() {
+  const theme = useThemeConfig();
+  const router = useRouter();
+
+  return (
+    <SafeAreaView className="flex-1 bg-background">
+      <ScrollView
+        contentContainerStyle={{ padding: 20, paddingBottom: 100 }}
+        showsVerticalScrollIndicator={false}
+      >
+        <View className="mb-8 mt-4">
+          <Text className="text-4xl font-extrabold text-foreground tracking-tight">
+            Screen Kits
+          </Text>
+          <Text className="text-lg text-muted-foreground mt-2 font-medium">
+            Production-ready UI patterns inspired by popular apps.
+          </Text>
+        </View>
+
+        <View className="gap-6">
+          {KITS.length === 0 ? (
+            <View
+              className="rounded-3xl border p-6"
+              style={{
+                borderColor: theme.colors.border,
+                backgroundColor: theme.colors.card,
+              }}
+            >
+              <Text className="text-lg font-semibold text-foreground">
+                No screen kits installed
+              </Text>
+              <Text className="text-sm text-muted-foreground mt-2">
+                Add a kit with the CLI to see it here.
+              </Text>
+            </View>
+          ) : (
+            KITS.map((kit, index) => (
+              <Animated.View
+                key={kit.id}
+                entering={FadeInDown.delay(index * 100).springify()}
+              >
+                <View
+                  className="rounded-3xl border overflow-hidden"
+                  style={{
+                    borderColor: theme.colors.border,
+                    backgroundColor: theme.colors.card,
+                  }}
+                >
+                  {/* Header */}
+                  <View
+                    className="p-6 flex-row items-center gap-4"
+                    style={{ backgroundColor: kit.color + '15' }}
+                  >
+                    <View
+                      className="w-12 h-12 rounded-2xl items-center justify-center border-2 border-white/20 shadow-sm"
+                      style={{ backgroundColor: kit.color }}
+                    >
+                      <Text className="text-2xl">{kit.icon}</Text>
+                    </View>
+                    <View className="flex-1">
+                      <Text className="text-xl font-bold text-foreground">
+                        {kit.title}
+                      </Text>
+                      <Text className="text-sm text-muted-foreground">
+                        {kit.description}
+                      </Text>
+                    </View>
+                  </View>
+
+                  {/* Screens List */}
+                  <View className="p-4 gap-3 bg-card">
+                    {kit.screens.map((screen) => (
+                      <TouchableOpacity
+                        key={screen.id}
+                        onPress={() => router.push(screen.route as any)}
+                        className="flex-row items-center p-3 rounded-xl bg-muted/50 active:bg-muted/80"
+                        style={{ gap: 12 }}
+                      >
+                        <View className="w-1 h-8 rounded-full bg-muted-foreground/20" />
+                        <View className="flex-1">
+                          <Text className="text-base font-semibold text-foreground">
+                            {screen.name}
+                          </Text>
+                          <Text className="text-xs text-muted-foreground">
+                            {screen.description}
+                          </Text>
+                        </View>
+                        <MaterialIcons
+                          name="arrow-forward-ios"
+                          size={16}
+                          color={theme.colors.mutedForeground}
+                        />
+                      </TouchableOpacity>
+                    ))}
+                  </View>
+                </View>
+              </Animated.View>
+            ))
+          )}
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

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

@@ -0,0 +1 @@
+export * from './types';

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

@@ -0,0 +1,28 @@
+export type KitId =
+  | 'duolingo'
+  | 'fitness'
+  | 'finance'
+  | 'habits'
+  | 'social'
+  | 'ecommerce';
+
+export interface KitScreen {
+  id: string;
+  name: string;
+  description: string;
+  route: string;
+}
+
+export interface ScreenKit {
+  id: KitId;
+  title: string;
+  description: string;
+  icon: string;
+  color: string;
+  screens: KitScreen[];
+}
+
+export const KITS: ScreenKit[] = [
+  // --- @vibefast:screen-kits:start ---
+  // --- @vibefast:screen-kits:end ---
+];

package/recipes/screen-kits/recipe.json

@@ -0,0 +1,26 @@
+{
+  "name": "screen-kits",
+  "version": "1.0.0",
+  "description": "Screen kits hub and shared types",
+  "copy": [
+    {
+      "from": "apps/native/src/app/screen-kits",
+      "to": "apps/native/src/app/(root)/(protected)/screen-kits"
+    },
+    {
+      "from": "apps/native/src/features/screen-kits/types.ts",
+      "to": "apps/native/src/features/screen-kits/types.ts"
+    },
+    {
+      "from": "apps/native/src/features/screen-kits/index.ts",
+      "to": "apps/native/src/features/screen-kits/index.ts"
+    }
+  ],
+  "nav": {
+    "href": "/(root)/(protected)/screen-kits",
+    "label": "Screen Kits",
+    "icon": "📱",
+    "color": "#EC4899"
+  },
+  "target": "native"
+}

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

@@ -0,0 +1,12 @@
+import { Stack } from 'expo-router';
+
+export default function DuolingoLayout() {
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="index" />
+      <Stack.Screen name="home" />
+      <Stack.Screen name="lesson" options={{ presentation: 'card' }} />
+      <Stack.Screen name="skill-tree" />
+    </Stack>
+  );
+}

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

@@ -0,0 +1,5 @@
+import { DuolingoHomeScreen } from '@/features/screen-kits/duolingo';
+
+export default function Page() {
+  return <DuolingoHomeScreen />;
+}

package/recipes/screen-kits-duolingo/apps/native/src/app/screen-kits/duolingo/index.tsx

@@ -0,0 +1,5 @@
+import { Redirect } from 'expo-router';
+
+export default function Page() {
+  return <Redirect href="/screen-kits/duolingo/home" />;
+}

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

@@ -0,0 +1,5 @@
+import { DuolingoLessonCompleteScreen } from '@/features/screen-kits/duolingo';
+
+export default function Page() {
+  return <DuolingoLessonCompleteScreen />;
+}

package/recipes/screen-kits-duolingo/apps/native/src/app/screen-kits/duolingo/lesson-fail.tsx

@@ -0,0 +1,5 @@
+import LessonFailScreen from '@/features/screen-kits/duolingo/screens/lesson-fail-screen';
+
+export default function Page() {
+  return <LessonFailScreen />;
+}

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

@@ -0,0 +1,5 @@
+import { DuolingoLessonScreen } from '@/features/screen-kits/duolingo';
+
+export default function Page() {
+  return <DuolingoLessonScreen />;
+}

package/recipes/screen-kits-duolingo/apps/native/src/app/screen-kits/duolingo/skill-tree.tsx

@@ -0,0 +1,5 @@
+import { DuolingoHomeScreen } from '@/features/screen-kits/duolingo';
+
+export default function Page() {
+  return <DuolingoHomeScreen />;
+}

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