vibefast-cli 0.1.1

package/recipes/image-generator/apps/native/src/features/image-generator/services/image-gallery-service.ts

@@ -0,0 +1,98 @@
+import type { Id } from '@vibefast/backend/_generated/dataModel';
+
+import { defaultCacheService } from '@/core/cache';
+
+export type SavedImageMetadata = {
+  id: string;
+  prompt: string;
+  provider: string;
+  model: string;
+  savedAt: number;
+  localUri: string;
+  remoteImageId?: Id<'generatedImages'>;
+  storageId?: Id<'_storage'>;
+};
+
+const GALLERY_CACHE_KEY = 'image_gallery_v1';
+
+/**
+ * Service for managing the local image gallery with MMKV persistence
+ */
+export class ImageGalleryService {
+  /**
+   * Get all saved images from the gallery
+   */
+  static async getAllImages(): Promise<SavedImageMetadata[]> {
+    try {
+      const images =
+        await defaultCacheService.getItem<SavedImageMetadata[]>(
+          GALLERY_CACHE_KEY,
+        );
+      return images || [];
+    } catch (error) {
+      console.error('Failed to load gallery images:', error);
+      return [];
+    }
+  }
+
+  /**
+   * Add a new image to the gallery
+   */
+  static async addImage(
+    metadata: Omit<SavedImageMetadata, 'id' | 'savedAt'>,
+  ): Promise<void> {
+    try {
+      const existingImages = await ImageGalleryService.getAllImages();
+      const newImage: SavedImageMetadata = {
+        ...metadata,
+        id: `img_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`,
+        savedAt: Date.now(),
+      };
+
+      const updatedImages = [newImage, ...existingImages];
+      await defaultCacheService.setItem(GALLERY_CACHE_KEY, updatedImages);
+    } catch (error) {
+      console.error('Failed to add image to gallery:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Remove an image from the gallery
+   */
+  static async removeImage(imageId: string): Promise<void> {
+    try {
+      const existingImages = await ImageGalleryService.getAllImages();
+      const updatedImages = existingImages.filter((img) => img.id !== imageId);
+      await defaultCacheService.setItem(GALLERY_CACHE_KEY, updatedImages);
+    } catch (error) {
+      console.error('Failed to remove image from gallery:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Clear all images from the gallery
+   */
+  static async clearGallery(): Promise<void> {
+    try {
+      await defaultCacheService.setItem(GALLERY_CACHE_KEY, []);
+    } catch (error) {
+      console.error('Failed to clear gallery:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Get the total number of saved images
+   */
+  static async getImageCount(): Promise<number> {
+    try {
+      const images = await ImageGalleryService.getAllImages();
+      return images.length;
+    } catch (error) {
+      console.error('Failed to get image count:', error);
+      return 0;
+    }
+  }
+}

package/recipes/image-generator/apps/native/src/features/image-generator/services/image-save-service.ts

@@ -0,0 +1,121 @@
+import type { Id } from '@vibefast/backend/_generated/dataModel';
+import { File, Paths } from 'expo-file-system';
+import * as MediaLibrary from 'expo-media-library';
+import { Alert, Platform } from 'react-native';
+
+import { ImageGalleryService } from './image-gallery-service';
+
+export type ImageSaveMetadata = {
+  prompt: string;
+  provider: string;
+  model: string;
+  remoteImageId?: Id<'generatedImages'>;
+  storageId?: Id<'_storage'>;
+};
+
+/**
+ * Service for handling image saving operations to the device gallery and local storage
+ */
+export class ImageSaveService {
+  /**
+   * Save a base64 image data URI to the device gallery and local gallery
+   * @param imageDataUri - The data URI containing the image (e.g., 'data:image/png;base64,iVBORw0KGgo...')
+   * @param metadata - Optional metadata about the image generation
+   * @returns Promise that resolves when save is complete
+   */
+  static async saveImageToGallery(
+    imageDataUri: string,
+    metadata?: ImageSaveMetadata,
+  ): Promise<void> {
+    try {
+      // Check if running on web - FileSystem is not available
+      if (Platform.OS === 'web') {
+        // On web, just save to local gallery
+        if (metadata) {
+          await ImageGalleryService.addImage({
+            prompt: metadata.prompt,
+            provider: metadata.provider,
+            model: metadata.model,
+            localUri: imageDataUri,
+            remoteImageId: metadata.remoteImageId,
+            storageId: metadata.storageId,
+          });
+          Alert.alert('Success!', 'Image saved to your gallery.');
+        }
+        return;
+      }
+
+      // Request permissions (native only)
+      const { status } = await MediaLibrary.requestPermissionsAsync();
+      if (status !== 'granted') {
+        Alert.alert(
+          'Permission Required',
+          'We need permission to save photos to your gallery.',
+        );
+        return;
+      }
+
+      // Extract base64 data from data URI (supports multiple formats)
+      const match = imageDataUri.match(/^data:image\/(\w+);base64,(.+)$/);
+      if (!match) {
+        throw new Error('Invalid image data format');
+      }
+      const [, imageFormat, base64Code] = match;
+      const fileExtension = imageFormat === 'jpeg' ? 'jpg' : imageFormat;
+
+      // Create temporary file using new File API
+      const filename = `generated-image-${Date.now()}.${fileExtension}`;
+      const file = new File(Paths.cache, filename);
+
+      // Create and write the file
+      file.create();
+      await file.write(base64Code, { encoding: 'base64' });
+
+      // Save to device gallery
+      const asset = await MediaLibrary.createAssetAsync(file.uri);
+      await MediaLibrary.createAlbumAsync('MyAppImages', asset, false);
+
+      // Save to local gallery if metadata is provided
+      if (metadata) {
+        await ImageGalleryService.addImage({
+          prompt: metadata.prompt,
+          provider: metadata.provider,
+          model: metadata.model,
+          localUri: imageDataUri,
+          remoteImageId: metadata.remoteImageId,
+          storageId: metadata.storageId,
+        });
+      }
+
+      Alert.alert('Success!', 'Image saved to your gallery.');
+    } catch (error) {
+      console.error('Failed to save image:', error);
+      Alert.alert('Error', 'Could not save the image.');
+    }
+  }
+
+  /**
+   * Save image only to local gallery (without device gallery)
+   * @param imageDataUri - The data URI containing the image
+   * @param metadata - Metadata about the image generation
+   * @returns Promise that resolves when save is complete
+   */
+  static async saveToLocalGallery(
+    imageDataUri: string,
+    metadata: ImageSaveMetadata,
+  ): Promise<void> {
+    try {
+      await ImageGalleryService.addImage({
+        prompt: metadata.prompt,
+        provider: metadata.provider,
+        model: metadata.model,
+        localUri: imageDataUri,
+        remoteImageId: metadata.remoteImageId,
+        storageId: metadata.storageId,
+      });
+    } catch (error) {
+      console.error('Failed to save to local gallery:', error);
+      throw error;
+    }
+  }
+}

package/recipes/image-generator/recipe.json

@@ -0,0 +1,22 @@
+{
+  "name": "image-generator",
+  "version": "1.0.0",
+  "description": "AI-powered image generation",
+  "copy": [
+    {
+      "from": "apps/native/src/app/image-generator",
+      "to": "apps/native/src/app/(root)/(protected)/image-generator"
+    },
+    {
+      "from": "apps/native/src/features/image-generator",
+      "to": "apps/native/src/features/image-generator"
+    }
+  ],
+  "nav": {
+    "href": "/(root)/(protected)/image-generator",
+    "label": "Image Generator",
+    "icon": "🎨",
+    "color": "#A855F7"
+  },
+  "target": "native"
+}

package/recipes/quiz/apps/native/src/app/quiz/index.tsx

@@ -0,0 +1,47 @@
+import Quiz from '@/features/quiz';
+import { QuestionMode } from '@/features/quiz/config';
+
+const questions = [
+  {
+    text: 'What is your favorite color?',
+    mode: QuestionMode.AutoAdvance,
+    options: [
+      { id: 'red', text: 'Red', note: 'Red is the color of passion.' },
+      { id: 'blue', text: 'Blue', note: 'Blue is the color of calm.' },
+      { id: 'green', text: 'Green', note: 'Green is the color of nature.' },
+    ],
+  },
+  {
+    text: 'What is your favorite animal?',
+    mode: QuestionMode.ManualAdvance,
+    options: [
+      { id: 'dog', text: 'Dog', note: 'Dogs are loyal.' },
+      { id: 'cat', text: 'Cat', note: 'Cats are independent.' },
+      { id: 'bird', text: 'Bird', note: 'Birds can fly.' },
+    ],
+  },
+  {
+    text: 'What is your favorite animal?',
+    mode: QuestionMode.ManualAdvance,
+    options: [
+      { id: 'dog', text: 'Dog', note: 'Dogs are loyal.' },
+      { id: 'cat', text: 'Cat', note: 'Cats are independent.' },
+      { id: 'bird', text: 'Bird', note: 'Birds can fly.' },
+    ],
+  },
+  {
+    text: 'What is your favorite animal?',
+    mode: QuestionMode.ManualAdvance,
+    options: [
+      { id: 'dog', text: 'Dog', note: 'Dogs are loyal.' },
+      { id: 'cat', text: 'Cat', note: 'Cats are independent.' },
+      { id: 'bird', text: 'Bird', note: 'Birds can fly.' },
+    ],
+  },
+];
+
+const QuizScreen = () => {
+  return <Quiz questions={questions} />;
+};
+
+export default QuizScreen;

package/recipes/quiz/apps/native/src/features/quiz/components/question.tsx

@@ -0,0 +1,67 @@
+import { MotiView } from 'moti';
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+import Animated, { Layout } from 'react-native-reanimated';
+
+import { Text } from '@/components/ui';
+
+import { QuestionMode, quizConfig } from '../config';
+
+const Question = ({ question, onOptionSelect, selectedOption }) => {
+  return (
+    <MotiView
+      from={{ opacity: 0, translateY: 50 }}
+      animate={{ opacity: 1, translateY: 0 }}
+      exit={{ opacity: 0, translateY: -50 }}
+      transition={{
+        type: 'timing',
+        duration: quizConfig.animation.duration,
+      }}
+      className="flex-1"
+    >
+      <Text className="my-8 text-center text-2xl font-bold">
+        {question.text}
+      </Text>
+      <Animated.View
+        className="flex-1 justify-center gap-y-4"
+        layout={Layout.springify().duration(quizConfig.animation.duration)}
+      >
+        {question.options.map((option) => (
+          <TouchableOpacity
+            key={option.id}
+            onPress={() => onOptionSelect(option)}
+          >
+            <MotiView
+              from={{ scale: 1 }}
+              animate={{ scale: selectedOption === option ? 1.02 : 1 }}
+              transition={{
+                type: 'timing',
+                duration: quizConfig.animation.duration,
+              }}
+              className={`rounded-lg border p-4 ${selectedOption === option ? 'border-primary-500 bg-primary-500/20 dark:border-primary-500 dark:bg-primary-900/20' : 'border-neutral-300'}`}
+            >
+              <Text className="text-lg">{option.text}</Text>
+              {selectedOption === option &&
+                question.mode === QuestionMode.ManualAdvance && (
+                  <MotiView
+                    from={{ opacity: 0, height: 0 }}
+                    animate={{ opacity: 1, height: 'auto' }}
+                    transition={{
+                      type: 'timing',
+                      duration: quizConfig.animation.duration,
+                    }}
+                  >
+                    <Text className="mt-2 text-sm text-neutral-600">
+                      {option.note}
+                    </Text>
+                  </MotiView>
+                )}
+            </MotiView>
+          </TouchableOpacity>
+        ))}
+      </Animated.View>
+    </MotiView>
+  );
+};
+
+export default Question;

package/recipes/quiz/apps/native/src/features/quiz/config.ts

@@ -0,0 +1,11 @@
+export enum QuestionMode {
+  AutoAdvance = 'auto-advance',
+  ManualAdvance = 'manual-advance',
+}
+
+export const quizConfig = {
+  showContinueButton: true, // This can be configured based on the desired behavior
+  animation: {
+    duration: 300,
+  },
+};

package/recipes/quiz/apps/native/src/features/quiz/index.tsx

@@ -0,0 +1,133 @@
+import { Ionicons } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
+import { AnimatePresence, MotiView } from 'moti';
+import { useState } from 'react';
+import { View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { Button, Text } from '@/components/ui';
+
+import Question from './components/question';
+import { QuestionMode, quizConfig } from './config';
+
+const ProgressBar = ({ progress, handlePreviousQuestion }) => (
+  <View className="mr-3 flex flex-row items-center">
+    <Button
+      size="icon"
+      onPress={handlePreviousQuestion}
+      className="mb-5 mr-3 mt-0 shrink-0 !bg-transparent"
+    >
+      <Ionicons name="arrow-back" size={24} color="#666" />
+    </Button>
+    <View className="mb-5 h-3 flex-1 overflow-hidden rounded-xl bg-neutral-200 dark:bg-neutral-800">
+      <MotiView
+        from={{ width: '0%' }}
+        animate={{ width: `${progress * 100}%` }}
+        transition={{
+          type: 'timing',
+          duration: quizConfig.animation.duration,
+        }}
+        className="h-full bg-primary-500"
+      />
+    </View>
+  </View>
+);
+
+const Quiz = ({ questions }) => {
+  const router = useRouter();
+  const [currentQuestionIndex, setCurrentQuestionIndex] = useState(0);
+  const [selectedOption, setSelectedOption] = useState(null);
+  const [showContinue, setShowContinue] = useState(false);
+
+  const handleOptionSelect = (option) => {
+    setSelectedOption(option);
+    const currentQuestionMode = questions[currentQuestionIndex].mode;
+    if (currentQuestionMode === QuestionMode.AutoAdvance) {
+      setTimeout(() => {
+        handleNextQuestion();
+      }, quizConfig.animation.duration + 200);
+    } else {
+      setShowContinue(true);
+    }
+  };
+
+  const handleNextQuestion = () => {
+    setSelectedOption(null);
+    setShowContinue(false);
+    setCurrentQuestionIndex(currentQuestionIndex + 1);
+  };
+
+  const handlePreviousQuestion = () => {
+    if (currentQuestionIndex === 0) {
+      router.back();
+      return;
+    }
+    setSelectedOption(null);
+    setShowContinue(false);
+    setCurrentQuestionIndex(currentQuestionIndex - 1);
+  };
+
+  const progress = currentQuestionIndex / questions.length;
+
+  if (currentQuestionIndex >= questions.length) {
+    return (
+      <SafeAreaView className="flex-1 p-5">
+        <Text className="mb-5 text-xl font-bold">Quiz Complete!</Text>
+      </SafeAreaView>
+    );
+  }
+
+  const currentQuestion = questions[currentQuestionIndex];
+
+  return (
+    <SafeAreaView className="flex-1 p-5">
+      <ProgressBar
+        progress={progress}
+        handlePreviousQuestion={handlePreviousQuestion}
+      />
+      <AnimatePresence exitBeforeEnter>
+        <Question
+          key={currentQuestionIndex}
+          question={currentQuestion}
+          onOptionSelect={handleOptionSelect}
+          selectedOption={selectedOption}
+        />
+      </AnimatePresence>
+
+      {quizConfig.showContinueButton &&
+        showContinue &&
+        currentQuestion.mode === QuestionMode.ManualAdvance && (
+          <MotiView
+            from={{ opacity: 0, translateY: 50 }}
+            animate={{ opacity: 1, translateY: 0 }}
+            transition={{
+              type: 'timing',
+              duration: quizConfig.animation.duration,
+            }}
+            className="mt-8"
+          >
+            <View className="flex-row gap-3">
+              {/* {currentQuestionIndex > 0 && (
+                <Button
+                  variant="outline"
+                  onPress={handlePreviousQuestion}
+                  className="flex-shrink-0"
+                >
+                  <Ionicons name="arrow-back" size={20} color="#666" />
+                </Button>
+              )} */}
+              <Button
+                variant="secondary"
+                onPress={handleNextQuestion}
+                label="Continue"
+                className="flex-1"
+                textClassName="text-white"
+              />
+            </View>
+          </MotiView>
+        )}
+    </SafeAreaView>
+  );
+};
+
+export default Quiz;

package/recipes/quiz/recipe.json

@@ -0,0 +1,22 @@
+{
+  "name": "quiz",
+  "version": "1.0.0",
+  "description": "Interactive quiz feature",
+  "copy": [
+    {
+      "from": "apps/native/src/app/quiz",
+      "to": "apps/native/src/app/(root)/(protected)/quiz"
+    },
+    {
+      "from": "apps/native/src/features/quiz",
+      "to": "apps/native/src/features/quiz"
+    }
+  ],
+  "nav": {
+    "href": "/(root)/(protected)/quiz",
+    "label": "Quiz",
+    "icon": "📱",
+    "color": "#F97316"
+  },
+  "target": "native"
+}

package/recipes/tracker-app/apps/native/src/app/tracker-app/index.tsx

@@ -0,0 +1 @@
+export { default } from '@/features/tracker-app/app';

package/recipes/tracker-app/apps/native/src/features/tracker-app/app/index.tsx

@@ -0,0 +1,108 @@
+import { Ionicons, MaterialIcons } from '@expo/vector-icons';
+import React from 'react';
+import { ScrollView, View } from 'react-native';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import CalorieCard from '../components/calorie-card';
+import MacroCard from '../components/macro-card';
+import PromoBanner from '../components/promo-banner';
+import RecentlyLogged from '../components/recently-logged';
+import WeekCalendar from '../components/week-calendar';
+
+export default function HomeScreen() {
+  const theme = useThemeConfig();
+
+  return (
+    <SafeAreaView
+      className="flex-1"
+      style={{ backgroundColor: theme.colors.background }}
+    >
+      <ScrollView className="flex-1 px-5" showsVerticalScrollIndicator={false}>
+        <View className="flex-row items-center justify-between pb-6 pt-4">
+          <View className="flex-row items-center">
+            <MaterialIcons
+              name="restaurant-menu"
+              size={28}
+              color={theme.colors.foreground}
+            />
+            <Text
+              className="ml-2 text-2xl font-extrabold"
+              style={{ color: theme.colors.foreground }}
+            >
+              CalAI
+            </Text>
+          </View>
+          <View
+            className="flex-row items-center rounded-2xl px-3 py-1.5"
+            style={{ backgroundColor: theme.colors.card }}
+          >
+            <Ionicons name="flame" size={16} color={theme.colors.warning} />
+            <Text
+              className="ml-1 text-base font-bold"
+              style={{ color: theme.colors.foreground }}
+            >
+              1
+            </Text>
+          </View>
+        </View>
+
+        <WeekCalendar />
+
+        <CalorieCard calories={1852} progress={25} />
+
+        <View className="mb-2 flex-row gap-3">
+          <MacroCard
+            value={122}
+            unit="g"
+            label="Protein left"
+            progress={35}
+            color={theme.colors.destructive}
+            icon={
+              <MaterialIcons
+                name="restaurant-menu"
+                size={20}
+                color={theme.colors.destructive}
+              />
+            }
+            delay={600}
+          />
+          <MacroCard
+            value={222}
+            unit="g"
+            label="Carbs left"
+            progress={60}
+            color={theme.colors.warning}
+            icon={
+              <Ionicons
+                name="nutrition"
+                size={20}
+                color={theme.colors.warning}
+              />
+            }
+            delay={800}
+          />
+          <MacroCard
+            value={49}
+            unit="g"
+            label="Fat left"
+            progress={45}
+            color={theme.colors.primary}
+            icon={
+              <Ionicons name="water" size={20} color={theme.colors.primary} />
+            }
+            delay={1000}
+          />
+        </View>
+
+        <PromoBanner />
+
+        <RecentlyLogged />
+
+        <View className="h-25" />
+      </ScrollView>
+    </SafeAreaView>
+  );
+}