vibefast-cli 1.2.1 → 1.3.1

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

@@ -0,0 +1,3 @@
+import TimerScreen from '@/features/screen-kits/fitness/screens/timer-screen';
+
+export default TimerScreen;

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

@@ -0,0 +1,3 @@
+import { FitnessDashboard } from '@/features/screen-kits/fitness';
+
+export default FitnessDashboard;

package/recipes/screen-kits-fitness/apps/native/src/features/screen-kits/fitness/components/timer-components.tsx

@@ -0,0 +1,500 @@
+import { Ionicons } from '@expo/vector-icons';
+import React, { useEffect, useMemo } from 'react';
+import {
+  Dimensions,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+  type ViewStyle,
+} from 'react-native';
+import Animated, {
+  Easing,
+  FadeIn,
+  FadeInDown,
+  FadeInUp,
+  FadeOut,
+  useAnimatedStyle,
+  useSharedValue,
+  withDelay,
+  withTiming,
+  ZoomIn,
+} from 'react-native-reanimated';
+import Svg, { Circle } from 'react-native-svg';
+
+import { Text } from '@/components/ui';
+import {
+  FITNESS_COLORS,
+  TIMER_PRESETS,
+  type Exercise,
+  type TimerMode,
+} from '../constants';
+
+const { width } = Dimensions.get('window');
+const AnimatedCircle = Animated.createAnimatedComponent(Circle);
+
+// Confetti particle for completion celebration
+export function ConfettiParticle({
+  x,
+  color,
+  delay: particleDelay,
+}: {
+  x: number;
+  color: string;
+  delay: number;
+}) {
+  const translateY = useSharedValue(0);
+  const translateX = useSharedValue(0);
+  const rotate = useSharedValue(0);
+  const opacity = useSharedValue(1);
+
+  useEffect(() => {
+    translateY.value = withDelay(
+      particleDelay,
+      withTiming(-150, { duration: 1200, easing: Easing.out(Easing.cubic) }),
+    );
+    translateX.value = withDelay(
+      particleDelay,
+      withTiming((Math.random() - 0.5) * 200, { duration: 1200 }),
+    );
+    rotate.value = withDelay(
+      particleDelay,
+      withTiming(360 * (Math.random() > 0.5 ? 1 : -1) * 2, { duration: 1200 }),
+    );
+    opacity.value = withDelay(
+      particleDelay + 600,
+      withTiming(0, { duration: 600 }),
+    );
+  }, [particleDelay, opacity, rotate, translateX, translateY]);
+
+  const animatedStyle = useAnimatedStyle(() => {
+    'worklet';
+    const tX = translateX.value + x;
+    const tY = translateY.value;
+    const rot = `${rotate.value}deg`;
+    return {
+      transform: [
+        { translateX: tX },
+        { translateY: tY },
+        { rotate: rot },
+      ] as ViewStyle['transform'],
+      opacity: opacity.value,
+    };
+  });
+
+  return (
+    <Animated.View
+      style={[
+        styles.confettiParticle,
+        { backgroundColor: color },
+        animatedStyle as ViewStyle,
+      ]}
+    />
+  );
+}
+
+// Completion celebration overlay
+export function CompletionCelebration({
+  onDismiss,
+}: {
+  onDismiss: () => void;
+}) {
+  const confettiColors = [
+    FITNESS_COLORS.primary,
+    FITNESS_COLORS.ring1,
+    FITNESS_COLORS.ring2,
+    '#FFD700',
+    '#FF6B6B',
+    '#4ECDC4',
+  ];
+
+  const particles = useMemo(
+    () =>
+      Array.from({ length: 30 }, (_, i) => ({
+        id: i,
+        x: (Math.random() - 0.5) * width,
+        color: confettiColors[i % confettiColors.length],
+        delay: Math.random() * 300,
+      })),
+    [],
+  );
+
+  return (
+    <Animated.View
+      entering={FadeIn.duration(300)}
+      exiting={FadeOut.duration(300)}
+      style={styles.celebrationOverlay}
+    >
+      <View style={styles.confettiContainer}>
+        {particles.map((p) => (
+          <ConfettiParticle
+            key={p.id}
+            x={p.x}
+            color={p.color}
+            delay={p.delay}
+          />
+        ))}
+      </View>
+
+      <Animated.View entering={ZoomIn.springify().delay(200)}>
+        <View style={styles.trophyContainer}>
+          <Ionicons name="trophy" size={80} color="#FFD700" />
+        </View>
+        <Text style={styles.celebrationTitle}>Workout Complete!</Text>
+        <Text style={styles.celebrationSubtitle}>
+          Great job pushing through!
+        </Text>
+      </Animated.View>
+
+      <Animated.View entering={FadeInUp.delay(600)}>
+        <TouchableOpacity style={styles.doneButton} onPress={onDismiss}>
+          <Text style={styles.doneButtonText}>Done</Text>
+        </TouchableOpacity>
+      </Animated.View>
+    </Animated.View>
+  );
+}
+
+// Exercise queue preview
+export function ExerciseQueue({
+  exercises,
+  currentIndex,
+}: {
+  exercises: Exercise[];
+  currentIndex: number;
+}) {
+  const upcomingExercises = exercises.slice(currentIndex + 1, currentIndex + 3);
+
+  if (upcomingExercises.length === 0) return null;
+
+  return (
+    <Animated.View
+      entering={FadeInDown.delay(300)}
+      style={styles.queueContainer}
+    >
+      <Text style={styles.queueTitle}>Up Next</Text>
+      {upcomingExercises.map((exercise, index) => (
+        <Animated.View
+          key={exercise.id}
+          entering={FadeInDown.delay(400 + index * 100)}
+          style={styles.queueItem}
+        >
+          <View style={styles.queueIcon}>
+            <Ionicons
+              name={exercise.icon}
+              size={16}
+              color={FITNESS_COLORS.textMuted}
+            />
+          </View>
+          <Text style={styles.queueName}>{exercise.name}</Text>
+          <Text style={styles.queueDuration}>{exercise.duration}s</Text>
+        </Animated.View>
+      ))}
+    </Animated.View>
+  );
+}
+
+// Mode selector pill
+export function ModeSelector({
+  currentMode,
+  onPress,
+}: {
+  currentMode: TimerMode;
+  onPress: () => void;
+}) {
+  const preset = TIMER_PRESETS.find((p) => p.mode === currentMode);
+
+  return (
+    <TouchableOpacity style={styles.modePill} onPress={onPress}>
+      <Ionicons
+        name={preset?.icon || 'timer-outline'}
+        size={16}
+        color={FITNESS_COLORS.primary}
+      />
+      <Text style={styles.modePillText}>{preset?.name || 'Timer'}</Text>
+      <Ionicons
+        name="chevron-down"
+        size={14}
+        color={FITNESS_COLORS.textMuted}
+      />
+    </TouchableOpacity>
+  );
+}
+
+// Timer Display Component
+export function TimerDisplay({
+  CIRCLE_SIZE,
+  R,
+  circumference,
+  animatedContainerStyle,
+  animatedCircleProps,
+  countdownStyle,
+  timeLeft,
+  formatTime,
+  activeColor,
+  phaseLabel,
+}: {
+  CIRCLE_SIZE: number;
+  R: number;
+  circumference: number;
+  animatedContainerStyle: any;
+  animatedCircleProps: any;
+  countdownStyle: any;
+  timeLeft: number;
+  formatTime: (s: number) => string;
+  activeColor: string;
+  phaseLabel: string;
+}) {
+  return (
+    <View style={styles.timerContainer}>
+      <View style={styles.ringContainer}>
+        <Animated.View style={[styles.ringPulse, animatedContainerStyle]}>
+          <Svg width={CIRCLE_SIZE} height={CIRCLE_SIZE}>
+            <Circle
+              cx={CIRCLE_SIZE / 2}
+              cy={CIRCLE_SIZE / 2}
+              r={R}
+              stroke={FITNESS_COLORS.card}
+              strokeWidth={20}
+              fill="transparent"
+            />
+            <AnimatedCircle
+              cx={CIRCLE_SIZE / 2}
+              cy={CIRCLE_SIZE / 2}
+              r={R}
+              strokeWidth={20}
+              fill="transparent"
+              strokeDasharray={circumference}
+              animatedProps={animatedCircleProps}
+              strokeLinecap="round"
+              rotation={-90}
+              origin={`${CIRCLE_SIZE / 2}, ${CIRCLE_SIZE / 2}`}
+            />
+          </Svg>
+        </Animated.View>
+
+        <Animated.View style={countdownStyle}>
+          <Text style={[styles.timeText, { color: activeColor }]}>
+            {formatTime(timeLeft)}
+          </Text>
+        </Animated.View>
+        <Text style={[styles.phaseLabel, { color: activeColor }]}>
+          {phaseLabel}
+        </Text>
+      </View>
+    </View>
+  );
+}
+
+// Timer Controls Component
+export function TimerControls({
+  isPlaying,
+  activeColor,
+  onToggle,
+  onSkipForward,
+  onSkipBackward,
+}: {
+  isPlaying: boolean;
+  activeColor: string;
+  onToggle: () => void;
+  onSkipForward: () => void;
+  onSkipBackward: () => void;
+}) {
+  return (
+    <View style={styles.controls}>
+      <TouchableOpacity onPress={onSkipBackward} style={styles.secondaryButton}>
+        <Ionicons name="refresh" size={24} color={FITNESS_COLORS.textMuted} />
+      </TouchableOpacity>
+
+      <TouchableOpacity
+        onPress={onToggle}
+        style={[styles.primaryButton, { backgroundColor: activeColor }]}
+      >
+        <Ionicons
+          name={isPlaying ? 'pause' : 'play'}
+          size={40}
+          color={FITNESS_COLORS.background}
+        />
+      </TouchableOpacity>
+
+      <TouchableOpacity onPress={onSkipForward} style={styles.secondaryButton}>
+        <Ionicons
+          name="play-skip-forward"
+          size={24}
+          color={FITNESS_COLORS.textMuted}
+        />
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  confettiParticle: {
+    position: 'absolute',
+    width: 12,
+    height: 12,
+    borderRadius: 3,
+  },
+  celebrationOverlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: `${FITNESS_COLORS.background}F5`,
+    alignItems: 'center',
+    justifyContent: 'center',
+    zIndex: 100,
+  },
+  confettiContainer: {
+    position: 'absolute',
+    top: '40%',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  trophyContainer: {
+    width: 140,
+    height: 140,
+    borderRadius: 70,
+    backgroundColor: '#FFD70015',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    marginBottom: 24,
+  },
+  celebrationTitle: {
+    color: FITNESS_COLORS.text,
+    fontSize: 32,
+    lineHeight: 42,
+    fontWeight: '900',
+    textAlign: 'center',
+    marginVertical: 8,
+  },
+  celebrationSubtitle: {
+    color: FITNESS_COLORS.textMuted,
+    fontSize: 16,
+    fontWeight: '500',
+    textAlign: 'center',
+  },
+  doneButton: {
+    marginTop: 48,
+    backgroundColor: FITNESS_COLORS.primary,
+    paddingHorizontal: 48,
+    paddingVertical: 16,
+    borderRadius: 28,
+  },
+  doneButtonText: {
+    color: FITNESS_COLORS.background,
+    fontSize: 18,
+    fontWeight: '800',
+  },
+  queueContainer: {
+    backgroundColor: FITNESS_COLORS.card,
+    borderRadius: 20,
+    padding: 16,
+    marginBottom: 24,
+    borderWidth: 1,
+    borderColor: '#27272a',
+  },
+  queueTitle: {
+    color: FITNESS_COLORS.textMuted,
+    fontSize: 11,
+    fontWeight: '700',
+    letterSpacing: 1.5,
+    textTransform: 'uppercase',
+    marginBottom: 12,
+  },
+  queueItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 8,
+  },
+  queueIcon: {
+    width: 32,
+    height: 32,
+    borderRadius: 10,
+    backgroundColor: '#27272a',
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 12,
+  },
+  queueName: {
+    color: FITNESS_COLORS.text,
+    fontSize: 15,
+    fontWeight: '600',
+    flex: 1,
+  },
+  queueDuration: {
+    color: FITNESS_COLORS.textMuted,
+    fontSize: 13,
+    fontWeight: '600',
+  },
+  modePill: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: 6,
+    backgroundColor: FITNESS_COLORS.card,
+    paddingHorizontal: 16,
+    paddingVertical: 10,
+    borderRadius: 20,
+    borderWidth: 1,
+    borderColor: '#27272a',
+  },
+  modePillText: {
+    color: FITNESS_COLORS.text,
+    fontWeight: '700',
+    fontSize: 14,
+  },
+  timerContainer: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  ringContainer: {
+    width: width * 0.66,
+    height: width * 0.66,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  ringPulse: {
+    ...StyleSheet.absoluteFillObject,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  timeText: {
+    fontSize: 58,
+    lineHeight: 80,
+    fontWeight: '900',
+    fontVariant: ['tabular-nums'],
+  },
+  phaseLabel: {
+    fontSize: 15,
+    fontWeight: '700',
+    letterSpacing: 4,
+    marginTop: 8,
+  },
+  controls: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 32,
+    marginBottom: 16,
+  },
+  secondaryButton: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    backgroundColor: FITNESS_COLORS.card,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderWidth: 1,
+    borderColor: '#27272a',
+  },
+  primaryButton: {
+    width: 88,
+    height: 88,
+    borderRadius: 44,
+    alignItems: 'center',
+    justifyContent: 'center',
+    shadowColor: FITNESS_COLORS.primary,
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.3,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+});