vibefast-cli 0.1.1

package/recipes/tracker-app/apps/native/src/features/tracker-app/components/animated-number.tsx

@@ -0,0 +1,102 @@
+import React, { useMemo, useRef, useState } from 'react';
+import { StyleSheet } from 'react-native';
+import { AnimatedRollingNumber } from 'react-native-animated-rolling-numbers';
+import {
+  Easing,
+  ReduceMotion,
+  runOnJS,
+  useAnimatedReaction,
+  useSharedValue,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { Text } from '@/components/ui';
+
+interface AnimatedNumberProps {
+  value: number;
+  fontSize?: number;
+  fontWeight?: string;
+  color: string;
+  duration?: number;
+  mode?: 'rolling' | 'tween';
+  decimals?: number;
+}
+
+function AnimatedNumber({
+  value,
+  fontSize = 48,
+  fontWeight = 'bold',
+  color,
+  duration = 1000,
+  mode = 'rolling',
+  decimals = 0,
+}: AnimatedNumberProps) {
+  const displayRef = useRef(value);
+  const [display, setDisplay] = useState(value);
+  const sv = useSharedValue(displayRef.current);
+
+  // Start animation when value changes
+  React.useEffect(() => {
+    sv.value = withTiming(value, {
+      duration,
+      easing: Easing.out(Easing.cubic),
+    });
+    displayRef.current = value;
+  }, [value, duration, sv]);
+
+  // Throttled UI updates to reduce JS pressure when many instances
+  const throttleMs = 16; // ~60fps ceiling
+  const lastTs = useRef(0);
+  useAnimatedReaction(
+    () => sv.value,
+    (v) => {
+      const now = Date.now();
+      if (now - lastTs.current >= throttleMs) {
+        lastTs.current = now;
+        runOnJS(setDisplay)(Number(v));
+      }
+    },
+    [],
+  );
+
+  const textStyle = useMemo(
+    () => [styles.number, { fontSize, fontWeight: fontWeight as any, color }],
+    [fontSize, fontWeight, color],
+  );
+
+  const spinningAnimationConfig = useMemo(
+    () => ({
+      duration,
+      reduceMotion: ReduceMotion.Never,
+      easing: Easing.out(Easing.cubic),
+    }),
+    [duration],
+  );
+
+  if (mode === 'tween') {
+    return (
+      <Text style={textStyle} className="">
+        {display.toFixed(decimals)}
+      </Text>
+    );
+  }
+
+  return (
+    <AnimatedRollingNumber
+      value={value}
+      useGrouping={false}
+      enableCompactNotation={false}
+      compactToFixed={0}
+      textStyle={textStyle}
+      spinningAnimationConfig={spinningAnimationConfig}
+    />
+  );
+}
+
+export default React.memo(AnimatedNumber);
+
+const styles = StyleSheet.create({
+  number: {
+    textAlign: 'left',
+  },
+});

package/recipes/tracker-app/apps/native/src/features/tracker-app/components/calorie-card.tsx

@@ -0,0 +1,66 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import { View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import AnimatedNumber from './animated-number';
+import CircularProgress from './circular-progress';
+
+interface CalorieCardProps {
+  calories: number;
+  progress: number;
+}
+
+export default function CalorieCard({ calories, progress }: CalorieCardProps) {
+  const theme = useThemeConfig();
+
+  return (
+    <View
+      className="mb-4 flex-row items-center justify-between rounded-2xl border p-6"
+      style={{
+        backgroundColor: theme.colors.card,
+        borderColor: theme.colors.border,
+        shadowColor: theme.colors.foreground,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 4,
+      }}
+    >
+      <View className="flex-1">
+        <View className="flex-row items-baseline">
+          <AnimatedNumber
+            value={calories}
+            fontSize={48}
+            fontWeight="800"
+            color={theme.colors.foreground}
+            duration={1500}
+          />
+        </View>
+        <Text
+          className="text-base font-medium"
+          style={{ color: theme.colors.mutedForeground }}
+        >
+          Calories left
+        </Text>
+      </View>
+      <View className="ml-5">
+        <CircularProgress
+          size={80}
+          strokeWidth={8}
+          progress={progress}
+          color={theme.colors.primary}
+          backgroundColor={theme.colors.muted}
+          duration={2000}
+          delay={300}
+        >
+          <View className="items-center justify-center">
+            <Ionicons name="flame" size={24} color={theme.colors.warning} />
+          </View>
+        </CircularProgress>
+      </View>
+    </View>
+  );
+}

package/recipes/tracker-app/apps/native/src/features/tracker-app/components/circular-progress.tsx

@@ -0,0 +1,97 @@
+import { Canvas, Path as SkPath, Skia } from '@shopify/react-native-skia';
+import type React from 'react';
+import { useEffect, useMemo, useState } from 'react';
+import { type LayoutChangeEvent, View as UIView } from 'react-native';
+
+interface CircularProgressProps {
+  size: number;
+  strokeWidth: number;
+  progress: number; // 0..100
+  color: string;
+  backgroundColor?: string;
+  children?: React.ReactNode;
+  duration?: number;
+  delay?: number;
+}
+
+export default function CircularProgress({
+  size,
+  strokeWidth,
+  progress,
+  color,
+  backgroundColor = '#f0f0f0',
+  children,
+  duration = 1500,
+  delay = 0,
+}: CircularProgressProps) {
+  const [containerSize, setContainerSize] = useState(size);
+  const [p, setP] = useState(1);
+
+  const onLayout = (e: LayoutChangeEvent) => {
+    const { width, height } = e.nativeEvent.layout;
+    const s = Math.min(width || size, height || size) || size;
+    if (s > 0) setContainerSize(s);
+  };
+
+  useEffect(() => {
+    let raf: number;
+    let start: number | null = null;
+    const easeInOutCubic = (t: number) =>
+      t < 0.5 ? 4 * t * t * t : 1 - (-2 * t + 2) ** 3 / 2;
+    const tick = (ts: number) => {
+      if (start == null) start = ts + (delay || 0);
+      const elapsed = Math.max(0, ts - start);
+      const t = Math.min(1, elapsed / (duration || 1500));
+      setP(easeInOutCubic(t) * (progress / 100));
+      if (t < 1) raf = requestAnimationFrame(tick);
+    };
+    setP(0);
+    raf = requestAnimationFrame(tick);
+    return () => cancelAnimationFrame(raf);
+  }, [progress, duration, delay]);
+
+  const radius = useMemo(
+    () => (containerSize - strokeWidth) / 2,
+    [containerSize, strokeWidth],
+  );
+
+  const circlePath = useMemo(() => {
+    const pth = Skia.Path.Make();
+    pth.addCircle(containerSize / 2, containerSize / 2, radius);
+    return pth;
+  }, [containerSize, radius]);
+
+  return (
+    <UIView
+      className="relative"
+      style={{ width: size, height: size }}
+      onLayout={onLayout}
+    >
+      <Canvas style={{ width: containerSize, height: containerSize }}>
+        {/* Track */}
+        <SkPath
+          path={circlePath}
+          color={backgroundColor}
+          style="stroke"
+          strokeWidth={strokeWidth}
+          opacity={1}
+        />
+        {/* Progress arc */}
+        <SkPath
+          path={circlePath}
+          color={color}
+          style="stroke"
+          strokeWidth={strokeWidth}
+          start={0}
+          end={p}
+          strokeCap="round"
+        />
+      </Canvas>
+      {children && (
+        <UIView className="absolute inset-0 items-center justify-center">
+          {children}
+        </UIView>
+      )}
+    </UIView>
+  );
+}

package/recipes/tracker-app/apps/native/src/features/tracker-app/components/floating-add-button.tsx

@@ -0,0 +1,27 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import { TouchableOpacity } from 'react-native';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export default function FloatingAddButton() {
+  const theme = useThemeConfig();
+
+  const handlePress = () => {
+    // Handle add food functionality
+    console.log('Add food pressed');
+  };
+
+  return (
+    <TouchableOpacity
+      className="absolute right-5 size-14 items-center justify-center rounded-full shadow-lg"
+      style={{
+        backgroundColor: theme.colors.primary,
+        bottom: 100, // Fixed positioning
+      }}
+      onPress={handlePress}
+    >
+      <Ionicons name="add" size={24} color={theme.colors.primaryForeground} />
+    </TouchableOpacity>
+  );
+}

package/recipes/tracker-app/apps/native/src/features/tracker-app/components/macro-card.tsx

@@ -0,0 +1,80 @@
+import type React from 'react';
+import { View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+import AnimatedNumber from './animated-number';
+import CircularProgress from './circular-progress';
+
+interface MacroCardProps {
+  value: number;
+  unit: string;
+  label: string;
+  progress: number;
+  color: string;
+  icon: React.ReactNode;
+  delay?: number;
+}
+
+export default function MacroCard({
+  value,
+  unit,
+  label,
+  progress,
+  color,
+  icon,
+  delay = 0,
+}: MacroCardProps) {
+  const theme = useThemeConfig();
+
+  return (
+    <View
+      className="flex-1 items-start rounded-2xl border p-4"
+      style={{
+        backgroundColor: theme.colors.card,
+        borderColor: theme.colors.border,
+        shadowColor: theme.colors.foreground,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 4,
+      }}
+    >
+      <View className="mb-1 flex-row items-baseline">
+        <AnimatedNumber
+          value={value}
+          fontSize={32}
+          fontWeight="700"
+          color={theme.colors.foreground}
+          duration={1200}
+        />
+        <Text
+          className="ml-1 text-xl font-semibold"
+          style={{ color: theme.colors.foreground }}
+        >
+          {unit}
+        </Text>
+      </View>
+      <Text
+        className="mb-4 text-sm"
+        style={{ color: theme.colors.mutedForeground }}
+      >
+        {label}
+      </Text>
+      <View className="self-center">
+        <CircularProgress
+          size={60}
+          strokeWidth={6}
+          progress={progress}
+          color={color}
+          backgroundColor={theme.colors.muted}
+          duration={1800}
+          delay={delay}
+        >
+          <View className="items-center justify-center">{icon}</View>
+        </CircularProgress>
+      </View>
+    </View>
+  );
+}

package/recipes/tracker-app/apps/native/src/features/tracker-app/components/promo-banner.tsx

@@ -0,0 +1,98 @@
+import React, { useEffect, useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export default function PromoBanner() {
+  const [timeLeft, setTimeLeft] = useState({
+    hours: 71,
+    minutes: 48,
+    seconds: 12,
+  });
+  const theme = useThemeConfig();
+
+  useEffect(() => {
+    const timer = setInterval(() => {
+      setTimeLeft((prev) => {
+        if (prev.seconds > 0) {
+          return { ...prev, seconds: prev.seconds - 1 };
+        }
+        if (prev.minutes > 0) {
+          return { ...prev, minutes: prev.minutes - 1, seconds: 59 };
+        }
+        if (prev.hours > 0) {
+          return { hours: prev.hours - 1, minutes: 59, seconds: 59 };
+        }
+        return prev;
+      });
+    }, 1000);
+
+    return () => clearInterval(timer);
+  }, []);
+
+  return (
+    <View
+      className="my-4 flex-row items-center justify-between rounded-2xl border p-5"
+      style={{
+        backgroundColor: theme.colors.muted,
+        borderColor: theme.colors.border,
+        shadowColor: theme.colors.foreground,
+        shadowOffset: { width: 0, height: 2 },
+        shadowOpacity: 0.1,
+        shadowRadius: 8,
+        elevation: 4,
+      }}
+    >
+      <View className="flex-1">
+        <View
+          className="mb-2 self-start rounded-2xl border-2 px-3 py-1.5"
+          style={{
+            borderColor: theme.colors.destructive,
+            backgroundColor: theme.colors.card,
+          }}
+        >
+          <Text
+            className="text-sm font-bold"
+            style={{ color: theme.colors.destructive }}
+          >
+            80% off
+          </Text>
+        </View>
+        <Text
+          className="text-lg font-bold leading-5"
+          style={{ color: theme.colors.foreground }}
+        >
+          Your trial ends in
+        </Text>
+        <Text
+          className="text-lg font-bold leading-5"
+          style={{ color: theme.colors.foreground }}
+        >
+          2 days!!
+        </Text>
+      </View>
+      <View className="items-end">
+        <View className="mb-3">
+          <Text
+            className="text-base font-semibold"
+            style={{ color: theme.colors.mutedForeground }}
+          >
+            {timeLeft.hours} : {timeLeft.minutes} : {timeLeft.seconds}
+          </Text>
+        </View>
+        <TouchableOpacity
+          className="rounded-2xl px-5 py-3"
+          style={{ backgroundColor: theme.colors.primary }}
+        >
+          <Text
+            className="text-sm font-semibold"
+            style={{ color: theme.colors.primaryForeground }}
+          >
+            Resubscribe now
+          </Text>
+        </TouchableOpacity>
+      </View>
+    </View>
+  );
+}

package/recipes/tracker-app/apps/native/src/features/tracker-app/components/recently-logged.tsx

@@ -0,0 +1,64 @@
+import { Ionicons } from '@expo/vector-icons';
+import React from 'react';
+import { Image, View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export default function RecentlyLogged() {
+  const theme = useThemeConfig();
+
+  return (
+    <View className="mt-4">
+      <Text
+        className="mb-4 text-xl font-bold"
+        style={{ color: theme.colors.foreground }}
+      >
+        Recently logged
+      </Text>
+      <View
+        className="flex-row items-center rounded-2xl border p-2 pr-4"
+        style={{
+          backgroundColor: theme.colors.card,
+          borderColor: theme.colors.border,
+          shadowColor: theme.colors.foreground,
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.1,
+          shadowRadius: 8,
+          elevation: 4,
+        }}
+      >
+        <Image
+          source={{
+            uri: 'https://images.pexels.com/photos/1435735/pexels-photo-1435735.jpeg?auto=compress&cs=tinysrgb&w=150&h=150&dpr=2',
+          }}
+          style={{ width: 70, height: 70 }}
+          className="mr-3 rounded-xl"
+        />
+        <View className="flex-1">
+          <Text
+            className="mb-1.5 text-base font-semibold"
+            style={{ color: theme.colors.foreground }}
+          >
+            Mixed Fruits and...
+          </Text>
+          <View className="flex-row items-center">
+            <Ionicons name="flame" size={16} color={theme.colors.warning} />
+            <Text
+              className="ml-1 text-sm font-semibold"
+              style={{ color: theme.colors.foreground }}
+            >
+              300 calories
+            </Text>
+          </View>
+        </View>
+        <Text
+          className="text-sm font-medium"
+          style={{ color: theme.colors.mutedForeground }}
+        >
+          12:27 PM
+        </Text>
+      </View>
+    </View>
+  );
+}

package/recipes/tracker-app/apps/native/src/features/tracker-app/components/week-calendar.tsx

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { TouchableOpacity, View } from 'react-native';
+
+import { Text } from '@/components/ui';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+interface Day {
+  letter: string;
+  number: number;
+  isToday?: boolean;
+}
+
+const days: Day[] = [
+  { letter: 'S', number: 22 },
+  { letter: 'S', number: 23 },
+  { letter: 'M', number: 24 },
+  { letter: 'T', number: 25 },
+  { letter: 'W', number: 26 },
+  { letter: 'T', number: 27, isToday: true },
+  { letter: 'F', number: 28 },
+];
+
+export default function WeekCalendar() {
+  const [selectedDay, setSelectedDay] = useState(5); // Thursday 27
+  const theme = useThemeConfig();
+
+  return (
+    <View className="mb-6 flex-row justify-between px-1">
+      {days.map((day, index) => (
+        <TouchableOpacity
+          key={index}
+          className="items-center justify-center rounded-2xl border-2 border-dashed px-4 py-6"
+          style={{
+            borderColor:
+              index === selectedDay
+                ? theme.colors.primary
+                : theme.colors.border,
+            backgroundColor: 'transparent',
+          }}
+          onPress={() => setSelectedDay(index)}
+        >
+          <Text
+            className="mb-2 text-xs font-medium"
+            style={{
+              color:
+                index === selectedDay
+                  ? theme.colors.primary
+                  : theme.colors.mutedForeground,
+            }}
+          >
+            {day.letter}
+          </Text>
+          <Text
+            className="text-base font-semibold"
+            style={{
+              color:
+                index === selectedDay
+                  ? theme.colors.primary
+                  : theme.colors.foreground,
+            }}
+          >
+            {day.number}
+          </Text>
+        </TouchableOpacity>
+      ))}
+    </View>
+  );
+}

package/recipes/tracker-app/recipe.json

@@ -0,0 +1,22 @@
+{
+  "name": "tracker-app",
+  "version": "1.0.0",
+  "description": "Track habits and activities",
+  "copy": [
+    {
+      "from": "apps/native/src/app/tracker-app",
+      "to": "apps/native/src/app/(root)/(protected)/tracker-app"
+    },
+    {
+      "from": "apps/native/src/features/tracker-app",
+      "to": "apps/native/src/features/tracker-app"
+    }
+  ],
+  "nav": {
+    "href": "/(root)/(protected)/tracker-app",
+    "label": "Tracker",
+    "icon": "🍎",
+    "color": "#06B6D4"
+  },
+  "target": "native"
+}

package/recipes/upload-all.sh

@@ -0,0 +1,32 @@
+#!/bin/bash
+
+echo "📤 Uploading all recipes to R2..."
+echo ""
+
+recipes=(
+  "charts"
+  "chatbot"
+  "voice-bot"
+  "image-generator"
+  "audio-recorder"
+  "quiz"
+  "tracker-app"
+)
+
+for recipe in "${recipes[@]}"; do
+  echo "Uploading ${recipe}@latest.zip..."
+  wrangler r2 object put vibefast-recipes/${recipe}@latest.zip --file=${recipe}@latest.zip --remote
+  if [ $? -eq 0 ]; then
+    echo "✓ ${recipe} uploaded"
+  else
+    echo "✗ ${recipe} failed"
+  fi
+  echo ""
+done
+
+echo "✅ Upload complete!"
+echo ""
+echo "🧪 Test with:"
+echo "cd ../../vibefast-monorepo"
+echo "export VIBEFAST_WORKER_URL=https://vibefast-cli-worker.mzafar611.workers.dev"
+echo "vf list"

package/recipes/voice-bot/apps/native/src/app/voice-bot/index.tsx

@@ -0,0 +1,27 @@
+import { Env } from '@env';
+import { Stack } from 'expo-router';
+import React, { useMemo } from 'react';
+
+import { VoiceBotScreen } from '@/features/voice-bot';
+
+export default function VoiceBotRoute() {
+  const agentId = Env.ELEVENLABS_AGENT_ID;
+  const screenOptions = useMemo(
+    () => ({
+      title: 'Voice Assistant',
+      headerShown: true,
+    }),
+    [],
+  );
+
+  return (
+    <>
+      <Stack.Screen options={screenOptions} />
+      <VoiceBotScreen
+        config={{ agentId }}
+        title="Voice Assistant"
+        subtitle="Start a conversation with your AI assistant"
+      />
+    </>
+  );
+}