vibefast-cli 1.2.1 → 1.3.1

package/recipes/screen-kits-fitness/apps/native/src/features/screen-kits/fitness/screens/workout-dashboard.tsx

@@ -0,0 +1,350 @@
+import { Ionicons } from '@expo/vector-icons';
+import { Stack, useRouter } from 'expo-router';
+import React, { useEffect, useState } from 'react';
+import {
+  ScrollView,
+  StatusBar,
+  TouchableOpacity,
+  View,
+  Dimensions,
+  Pressable,
+} from 'react-native';
+import Animated, {
+  FadeInDown,
+  useAnimatedProps,
+  useSharedValue,
+  withTiming,
+  withRepeat,
+  withSequence,
+  useAnimatedStyle,
+  withSpring,
+  Easing,
+  interpolate,
+} from 'react-native-reanimated';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import Svg, { Circle, G } from 'react-native-svg';
+import { Text } from '@/components/ui';
+import WorkoutCard from '../components/workout-card';
+import { FITNESS_COLORS, MOCK_WORKOUTS, WEEKLY_STATS } from '../constants';
+
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+const { width } = Dimensions.get('window');
+
+interface ActivityRingProps {
+  radius: number;
+  stroke: number;
+  color: string;
+  progress: number; // 0 to 1
+  delay?: number;
+}
+
+const ActivityRing = ({
+  radius,
+  stroke,
+  color,
+  progress,
+  delay = 0,
+}: ActivityRingProps) => {
+  const circumference = 2 * Math.PI * radius;
+  const progressValue = useSharedValue(0);
+
+  useEffect(() => {
+    progressValue.value = withTiming(progress, {
+      duration: 1500,
+      easing: Easing.out(Easing.exp),
+    });
+  }, [progress]);
+
+  const animatedProps = useAnimatedProps(() => {
+    const strokeDashoffset = interpolate(
+      progressValue.value,
+      [0, 1],
+      [circumference, 0],
+    );
+    return {
+      strokeDashoffset,
+    };
+  });
+
+  return (
+    <View className="absolute items-center justify-center">
+      <Svg height={radius * 2 + stroke} width={radius * 2 + stroke}>
+        <G
+          rotation="-90"
+          origin={`${radius + stroke / 2}, ${radius + stroke / 2}`}
+        >
+          <Circle
+            cx="50%"
+            cy="50%"
+            r={radius}
+            stroke={color}
+            strokeWidth={stroke}
+            strokeOpacity={0.2}
+            fill="transparent"
+          />
+          <AnimatedCircle
+            cx="50%"
+            cy="50%"
+            r={radius}
+            stroke={color}
+            strokeWidth={stroke}
+            fill="transparent"
+            strokeDasharray={circumference}
+            animatedProps={animatedProps}
+            strokeLinecap="round"
+          />
+        </G>
+      </Svg>
+    </View>
+  );
+};
+
+const StatCard = ({
+  icon,
+  label,
+  value,
+  color,
+  details,
+}: {
+  icon: keyof typeof Ionicons.glyphMap;
+  label: string;
+  value: string;
+  color: string;
+  details: string;
+}) => {
+  const [expanded, setExpanded] = useState(false);
+  const scale = useSharedValue(1);
+
+  const toggleExpand = () => {
+    setExpanded(!expanded);
+    scale.value = withSequence(
+      withTiming(0.95, { duration: 100 }),
+      withTiming(1, { duration: 100 }),
+    );
+  };
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  return (
+    <Pressable onPress={toggleExpand} className="flex-1">
+      <Animated.View
+        style={[animatedStyle]}
+        className={`bg-zinc-900 p-4 rounded-2xl border border-zinc-800 ${expanded ? 'border-primary/50' : ''}`}
+      >
+        <View className="flex-row items-center gap-2 mb-2">
+          <Ionicons name={icon} size={20} color={color} />
+          <Text className="text-zinc-400 text-xs font-bold uppercase">
+            {label}
+          </Text>
+        </View>
+        <Text className="text-white text-xl font-black">{value}</Text>
+        {expanded && (
+          <Animated.View entering={FadeInDown.duration(200)} className="mt-2">
+            <Text className="text-zinc-500 text-xs leading-4">{details}</Text>
+          </Animated.View>
+        )}
+      </Animated.View>
+    </Pressable>
+  );
+};
+
+const HeartRate = () => {
+  const scale = useSharedValue(1);
+
+  useEffect(() => {
+    scale.value = withRepeat(
+      withSequence(
+        withTiming(1.2, { duration: 100 }),
+        withTiming(1, { duration: 100 }),
+        withTiming(1.2, { duration: 100 }),
+        withTiming(1, { duration: 400 }), // Pause between beats
+      ),
+      -1,
+      true,
+    );
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: scale.value }],
+  }));
+
+  return (
+    <Animated.View style={animatedStyle}>
+      <Ionicons name="heart" size={24} color={FITNESS_COLORS.danger} />
+    </Animated.View>
+  );
+};
+
+export default function FitnessDashboard() {
+  const router = useRouter();
+  const insets = useSafeAreaInsets();
+
+  return (
+    <View className="flex-1 bg-zinc-950">
+      <Stack.Screen options={{ headerShown: false }} />
+      <StatusBar barStyle="light-content" />
+
+      <ScrollView
+        className="flex-1"
+        contentContainerStyle={{
+          paddingTop: insets.top + 20,
+          paddingBottom: 100,
+          paddingHorizontal: 20,
+        }}
+        showsVerticalScrollIndicator={false}
+      >
+        {/* Header */}
+        <Animated.View
+          entering={FadeInDown.delay(100)}
+          className="flex-row justify-between items-center mb-8"
+        >
+          <View>
+            <Text className="text-zinc-400 text-sm font-medium uppercase tracking-widest mb-1">
+              Thursday, 12 Oct
+            </Text>
+            <Text className="text-white text-3xl font-black">
+              Hello, Runner{' '}
+              <Text style={{ color: FITNESS_COLORS.primary }}>⚡️</Text>
+            </Text>
+          </View>
+          <TouchableOpacity className="w-12 h-12 rounded-full border border-zinc-800 items-center justify-center bg-zinc-900">
+            <Ionicons name="notifications-outline" size={24} color="white" />
+          </TouchableOpacity>
+        </Animated.View>
+
+        {/* Activity Rings Section */}
+        <Animated.View
+          entering={FadeInDown.delay(200)}
+          className="w-full bg-zinc-900 p-6 rounded-[32px] mb-8 border border-zinc-800"
+        >
+          <View className="flex-row items-center justify-between mb-6">
+            <View>
+              <Text className="text-white text-4xl font-black mb-1">
+                Active
+              </Text>
+              <Text className="text-zinc-500 font-medium tracking-wide">
+                Today's Progress
+              </Text>
+            </View>
+            {/* Rings Container */}
+            <View className="w-24 h-24 items-center justify-center relative">
+              <ActivityRing
+                radius={40}
+                stroke={8}
+                color={FITNESS_COLORS.ring1}
+                progress={0.75}
+              />
+              <ActivityRing
+                radius={28}
+                stroke={8}
+                color={FITNESS_COLORS.ring3}
+                progress={0.85}
+              />
+            </View>
+          </View>
+
+          {/* Stats Grid */}
+          <View className="flex-row gap-3">
+            <StatCard
+              icon="flame"
+              label="Calories"
+              value="840"
+              color={FITNESS_COLORS.ring1}
+              details="240 Active, 600 Resting"
+            />
+            <StatCard
+              icon="time"
+              label="Time"
+              value="45m"
+              color={FITNESS_COLORS.ring3}
+              details="15m Remaining"
+            />
+          </View>
+        </Animated.View>
+
+        {/* Heart Rate Section */}
+        <Animated.View
+          entering={FadeInDown.delay(300)}
+          className="mb-8 flex-row items-center justify-between bg-zinc-900/50 p-4 rounded-2xl border border-zinc-800"
+        >
+          <View className="flex-row items-center gap-3">
+            <View className="w-10 h-10 rounded-full bg-red-500/10 items-center justify-center">
+              <HeartRate />
+            </View>
+            <View>
+              <Text className="text-white font-bold text-lg">Heart Rate</Text>
+              <Text className="text-zinc-500 text-xs">Avg. 128 bpm</Text>
+            </View>
+          </View>
+          <View className="flex-row items-end gap-1">
+            <Text className="text-white text-2xl font-black">112</Text>
+            <Text className="text-zinc-500 text-sm font-medium mb-1">bpm</Text>
+          </View>
+        </Animated.View>
+
+        {/* Weekly Activity Chart */}
+        <Animated.View entering={FadeInDown.delay(400)} className="mb-8">
+          <View className="flex-row justify-between items-end mb-4">
+            <Text className="text-white text-xl font-bold">Activity</Text>
+            <Text
+              style={{ color: FITNESS_COLORS.primary }}
+              className="font-bold"
+            >
+              Weekly Goal
+            </Text>
+          </View>
+          <View className="bg-zinc-900 rounded-3xl p-5 flex-row justify-between items-end h-48 border border-zinc-800">
+            {WEEKLY_STATS.map((stat, i) => (
+              <View key={i} className="items-center gap-2">
+                <View className="w-8 bg-zinc-800 rounded-full overflow-hidden relative justify-end h-32">
+                  <Animated.View
+                    entering={FadeInDown.delay(i * 50 + 500)}
+                    style={{
+                      height: `${(stat.value / 1000) * 100}%`,
+                      width: '100%',
+                      backgroundColor: stat.active
+                        ? FITNESS_COLORS.primary
+                        : '#27272a',
+                      borderRadius: 100,
+                    }}
+                  />
+                </View>
+                <Text
+                  className={`text-xs font-bold ${stat.active ? 'text-white' : 'text-zinc-600'}`}
+                >
+                  {stat.day}
+                </Text>
+              </View>
+            ))}
+          </View>
+        </Animated.View>
+
+        {/* Popular Workouts */}
+        <Animated.View entering={FadeInDown.delay(500)}>
+          <View className="flex-row justify-between items-center mb-4">
+            <Text className="text-white text-xl font-bold">
+              Popular Workouts
+            </Text>
+            <Text className="text-zinc-500 font-bold">See All</Text>
+          </View>
+          <ScrollView
+            horizontal
+            showsHorizontalScrollIndicator={false}
+            style={{ marginHorizontal: -20, paddingHorizontal: 20 }}
+          >
+            {MOCK_WORKOUTS.map((item, index) => (
+              <WorkoutCard
+                key={item.id}
+                item={item}
+                index={index}
+                onPress={() => {}}
+              />
+            ))}
+          </ScrollView>
+        </Animated.View>
+      </ScrollView>
+    </View>
+  );
+}

package/recipes/screen-kits-fitness/recipe.json

@@ -0,0 +1,63 @@
+{
+  "name": "screen-kits-fitness",
+  "version": "1.0.0",
+  "description": "Screen kit: Fit Track (workout & activity)",
+  "copy": [
+    {
+      "from": "apps/native/src/app/screen-kits/fitness",
+      "to": "apps/native/src/app/(root)/(protected)/screen-kits/fitness"
+    },
+    {
+      "from": "apps/native/src/features/screen-kits/fitness",
+      "to": "apps/native/src/features/screen-kits/fitness"
+    },
+    {
+      "from": "apps/native/assets/sounds/timer-beep.wav",
+      "to": "apps/native/assets/sounds/timer-beep.wav"
+    }
+  ],
+  "screenKit": {
+    "id": "fitness",
+    "title": "Fit Track",
+    "description": "Workout and activity tracking",
+    "icon": "💪",
+    "color": "#F97316",
+    "screens": [
+      {
+        "id": "dashboard",
+        "name": "Workout Dashboard",
+        "description": "Daily activity summary",
+        "route": "/screen-kits/fitness/workout"
+      },
+      {
+        "id": "timer",
+        "name": "Exercise Timer",
+        "description": "Workout session view",
+        "route": "/screen-kits/fitness/timer"
+      },
+      {
+        "id": "steps",
+        "name": "Step Counter",
+        "description": "Pedometer and activity rings",
+        "route": "/screen-kits/fitness/steps"
+      }
+    ]
+  },
+  "target": "native",
+  "dependencies": {
+    "expo": [
+      "@expo/vector-icons",
+      "@gorhom/bottom-sheet",
+      "expo-audio",
+      "expo-blur",
+      "expo-haptics",
+      "expo-linear-gradient",
+      "lottie-react-native",
+      "react-native-css-interop",
+      "react-native-gesture-handler",
+      "react-native-reanimated",
+      "react-native-safe-area-context",
+      "react-native-svg"
+    ]
+  }
+}

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

@@ -0,0 +1 @@
+import HabitTracker from '@/features/screen-kits/productivity/screens/habit-tracker'; export default HabitTracker;

package/recipes/screen-kits-habits/apps/native/src/app/screen-kits/productivity/kanban.tsx

@@ -0,0 +1 @@
+import KanbanBoard from '@/features/screen-kits/productivity/screens/kanban-board'; export default KanbanBoard;

package/recipes/screen-kits-habits/apps/native/src/app/screen-kits/productivity/routes.ts

@@ -0,0 +1,4 @@
+import HabitTracker from '@/features/screen-kits/productivity/screens/habit-tracker';
+import KanbanBoard from '@/features/screen-kits/productivity/screens/kanban-board';
+
+export { HabitTracker, KanbanBoard };

package/recipes/screen-kits-habits/apps/native/src/features/screen-kits/productivity/components/AddTaskModal.tsx

@@ -0,0 +1,246 @@
+import { Ionicons } from '@expo/vector-icons';
+import type { BottomSheetModal } from '@gorhom/bottom-sheet';
+import { BottomSheetTextInput, BottomSheetView } from '@gorhom/bottom-sheet';
+import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'react';
+import { View } from 'react-native';
+import { useColorScheme } from 'react-native-css-interop';
+
+import { Button, Pressable, Text } from '@/components/ui';
+import { Modal, useModal } from '@/components/ui/core/overlays/modal';
+
+import type { KanbanStatus, KanbanTask, Priority } from '../constants';
+import {
+  KANBAN_COLUMNS,
+  PRIORITY_CONFIG,
+  PRIORITY_LEVELS,
+  PRODUCTIVITY_COLORS,
+} from '../constants';
+
+export type AddTaskModalRef = {
+  open: (status?: KanbanStatus) => void;
+  close: () => void;
+};
+
+type AddTaskModalProps = {
+  onAddTask: (task: Omit<KanbanTask, 'id'>) => void;
+};
+
+const TAGS = ['Design', 'Research', 'Backend', 'Frontend', 'QA', 'DevOps'];
+
+export const AddTaskModal = forwardRef<AddTaskModalRef, AddTaskModalProps>(
+  ({ onAddTask }, ref) => {
+    const { colorScheme } = useColorScheme();
+    const isDark = colorScheme === 'dark';
+    const colors = isDark ? PRODUCTIVITY_COLORS.dark : PRODUCTIVITY_COLORS.light;
+    const modal = useModal();
+
+    const [title, setTitle] = useState('');
+    const [selectedPriority, setSelectedPriority] = useState<Priority>(PRIORITY_LEVELS.medium);
+    const [selectedTag, setSelectedTag] = useState(TAGS[0]);
+    const [selectedStatus, setSelectedStatus] = useState<KanbanStatus>('todo');
+
+    useImperativeHandle(ref, () => ({
+      open: (status?: KanbanStatus) => {
+        setTitle('');
+        setSelectedPriority(PRIORITY_LEVELS.medium);
+        setSelectedTag(TAGS[0]);
+        setSelectedStatus(status || 'todo');
+        modal.present();
+      },
+      close: () => {
+        modal.dismiss();
+      },
+    }));
+
+    const handleSubmit = useCallback(() => {
+      if (!title.trim()) return;
+
+      onAddTask({
+        title: title.trim(),
+        tag: selectedTag,
+        status: selectedStatus,
+        priority: selectedPriority,
+        members: ['You'],
+        comments: 0,
+      });
+
+      modal.dismiss();
+    }, [title, selectedTag, selectedStatus, selectedPriority, onAddTask, modal]);
+
+    const renderPriorityOption = (priority: Priority) => {
+      const config = PRIORITY_CONFIG[priority];
+      const isSelected = selectedPriority === priority;
+      const bg = isDark ? config.bgDark : config.bgLight;
+      const text = isDark ? config.textDark : config.textLight;
+
+      return (
+        <Pressable
+          key={priority}
+          onPress={() => setSelectedPriority(priority)}
+          className="flex-1 py-3 rounded-xl items-center justify-center flex-row gap-1"
+          style={{
+            backgroundColor: isSelected ? bg : 'transparent',
+            borderWidth: 2,
+            borderColor: isSelected ? text : colors.columnBorder,
+          }}
+        >
+          {priority === 'high' && (
+            <Ionicons name="arrow-up" size={14} color={isSelected ? text : colors.textMuted} />
+          )}
+          {priority === 'low' && (
+            <Ionicons name="arrow-down" size={14} color={isSelected ? text : colors.textMuted} />
+          )}
+          <Text
+            className="font-semibold text-sm"
+            style={{ color: isSelected ? text : colors.textMuted }}
+          >
+            {config.label}
+          </Text>
+        </Pressable>
+      );
+    };
+
+    return (
+      <Modal
+        ref={modal.ref}
+        title="Add New Task"
+        snapPoints={['75%']}
+      >
+        <BottomSheetView style={{ flex: 1, paddingHorizontal: 16 }}>
+          {/* Task Title */}
+          <View className="mb-5">
+            <Text
+              className="text-sm font-semibold mb-2"
+              style={{ color: colors.textMuted }}
+            >
+              Task Title
+            </Text>
+            <BottomSheetTextInput
+              value={title}
+              onChangeText={setTitle}
+              placeholder="Enter task title..."
+              placeholderTextColor={colors.textMuted}
+              style={{
+                backgroundColor: isDark ? '#262626' : '#f4f4f5',
+                borderRadius: 12,
+                padding: 16,
+                fontSize: 16,
+                color: colors.text,
+                borderWidth: 1,
+                borderColor: colors.columnBorder,
+              }}
+            />
+          </View>
+
+          {/* Priority Selection */}
+          <View className="mb-5">
+            <Text
+              className="text-sm font-semibold mb-2"
+              style={{ color: colors.textMuted }}
+            >
+              Priority
+            </Text>
+            <View className="flex-row gap-2">
+              {Object.values(PRIORITY_LEVELS).map(renderPriorityOption)}
+            </View>
+          </View>
+
+          {/* Tag Selection */}
+          <View className="mb-5">
+            <Text
+              className="text-sm font-semibold mb-2"
+              style={{ color: colors.textMuted }}
+            >
+              Tag
+            </Text>
+            <View className="flex-row flex-wrap gap-2">
+              {TAGS.map((tag) => (
+                <Pressable
+                  key={tag}
+                  onPress={() => setSelectedTag(tag)}
+                  className="px-4 py-2 rounded-full"
+                  style={{
+                    backgroundColor: selectedTag === tag 
+                      ? colors.accent 
+                      : (isDark ? '#262626' : '#f4f4f5'),
+                    borderWidth: 1,
+                    borderColor: selectedTag === tag ? colors.accent : colors.columnBorder,
+                  }}
+                >
+                  <Text
+                    className="font-medium text-sm"
+                    style={{
+                      color: selectedTag === tag ? '#fff' : colors.text,
+                    }}
+                  >
+                    {tag}
+                  </Text>
+                </Pressable>
+              ))}
+            </View>
+          </View>
+
+          {/* Column Selection */}
+          <View className="mb-6">
+            <Text
+              className="text-sm font-semibold mb-2"
+              style={{ color: colors.textMuted }}
+            >
+              Column
+            </Text>
+            <View className="flex-row gap-2">
+              {KANBAN_COLUMNS.map((col) => {
+                const isSelected = selectedStatus === col.status;
+                const statusColor =
+                  col.status === 'todo'
+                    ? PRODUCTIVITY_COLORS.todo
+                    : col.status === 'doing'
+                      ? PRODUCTIVITY_COLORS.doing
+                      : PRODUCTIVITY_COLORS.done;
+
+                return (
+                  <Pressable
+                    key={col.status}
+                    onPress={() => setSelectedStatus(col.status)}
+                    className="flex-1 py-3 rounded-xl items-center justify-center flex-row gap-2"
+                    style={{
+                      backgroundColor: isSelected 
+                        ? (isDark ? '#262626' : '#f4f4f5') 
+                        : 'transparent',
+                      borderWidth: 2,
+                      borderColor: isSelected ? statusColor : colors.columnBorder,
+                    }}
+                  >
+                    <View
+                      className="w-2.5 h-2.5 rounded-full"
+                      style={{ backgroundColor: statusColor }}
+                    />
+                    <Text
+                      className="font-medium text-xs"
+                      style={{ color: isSelected ? colors.text : colors.textMuted }}
+                    >
+                      {col.title}
+                    </Text>
+                  </Pressable>
+                );
+              })}
+            </View>
+          </View>
+
+          {/* Submit Button */}
+          <Button
+            label="Add Task"
+            onPress={handleSubmit}
+            disabled={!title.trim()}
+            icon="add"
+          />
+        </BottomSheetView>
+      </Modal>
+    );
+  },
+);
+
+
+
+
+