vibefast-cli 1.3.0 → 1.3.1

package/recipes/0/apps/native/src/components/advanced-ui/timeline/timeline-view.tsx

@@ -0,0 +1,355 @@
+/* eslint-disable */
+
+import { Feather } from '@expo/vector-icons';
+import React, { useEffect } from 'react';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import Animated, {
+  FadeInDown,
+  interpolateColor,
+  LinearTransition,
+  useAnimatedStyle,
+  useSharedValue,
+  withSequence,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { useThemeConfig } from '../../../lib/use-theme-config';
+import type { TimelineProps } from './types';
+
+const AnimatedTouchableOpacity =
+  Animated.createAnimatedComponent(TouchableOpacity);
+const AnimatedFeather = Animated.createAnimatedComponent(Feather);
+
+export const Timeline: React.FC<TimelineProps> &
+  React.FunctionComponent<TimelineProps> = ({
+  items = [],
+  activeColor: propsActiveColor,
+  inactiveColor: propsInactiveColor,
+  animated = true,
+  animationType = 'bounce',
+  onItemPress,
+  containerStyle,
+  titleStyle,
+  descriptionStyle,
+  timestampStyle,
+  lineWidth = 2,
+  iconSize = 20,
+  metaContainerStyle,
+  metaTextStyle,
+}: TimelineProps): React.ReactNode & React.JSX.Element => {
+  const { colors } = useThemeConfig();
+  const activeColor = propsActiveColor ?? colors.primary;
+  const inactiveColor = propsInactiveColor ?? colors.muted;
+
+  const statusRefs = React.useRef<Record<string | number, string>>({});
+
+  useEffect(() => {
+    items.forEach((item) => {
+      statusRefs.current[item.id] = item.status || 'upcoming';
+    });
+
+    return () => {
+      statusRefs.current = {};
+    };
+  }, [items]);
+
+  if (!items || items.length === 0) {
+    return null as unknown as React.ReactNode & React.JSX.Element;
+  }
+
+  return (
+    <Animated.View style={[styles.container, containerStyle]}>
+      {items.map((item, index) => {
+        const isFirst = index === 0;
+        const isLast = index === items.length - 1;
+        const isComplete = item.status === 'complete';
+        const isCurrent = item.status === 'current';
+        const isUpcoming = item.status === 'upcoming' || !item.status;
+
+        const prevStatus = statusRefs.current[item.id];
+        const wasComplete = prevStatus === 'complete';
+        const statusChanged = prevStatus && prevStatus !== item.status;
+        statusRefs.current[item.id] = item.status || 'upcoming';
+
+        const dotScale = useSharedValue(statusChanged ? 1.5 : 1);
+        const dotColorAnimated = useSharedValue(
+          isComplete ? 1 : isCurrent ? 0.5 : 0,
+        );
+        const lineProgress = useSharedValue(isComplete ? 1 : 0);
+        const iconRotate = useSharedValue(statusChanged ? 0 : 1);
+
+        useEffect(() => {
+          if (statusChanged) {
+            switch (animationType) {
+              case 'bounce':
+                dotScale.value = withSequence(
+                  withTiming(1.5, { duration: 200 }),
+                  withSpring(1),
+                );
+                break;
+              case 'spring':
+                dotScale.value = withSpring(1.2, { damping: 2, stiffness: 80 });
+                break;
+              case 'rotate':
+                iconRotate.value = withSequence(
+                  withTiming(0, { duration: 10 }),
+                  withTiming(4, { duration: 800 }),
+                );
+                dotScale.value = withSequence(
+                  withTiming(1.6, { duration: 200 }),
+                  withSpring(1),
+                );
+                dotColorAnimated.value = withSequence(
+                  withTiming(0, { duration: 200 }),
+                  withTiming(isComplete ? 1 : isCurrent ? 0.5 : 0, {
+                    duration: 400,
+                  }),
+                );
+                break;
+              case 'fade':
+                dotColorAnimated.value = withSequence(
+                  withTiming(0, { duration: 200 }),
+                  withTiming(isComplete ? 1 : isCurrent ? 0.5 : 0, {
+                    duration: 400,
+                  }),
+                );
+                break;
+              case 'scale':
+                dotScale.value = withSequence(
+                  withTiming(0.5, { duration: 200 }),
+                  withTiming(1.2, { duration: 200 }),
+                  withTiming(1, { duration: 200 }),
+                );
+                break;
+              default:
+                dotScale.value = withSequence(
+                  withTiming(1.5, { duration: 200 }),
+                  withSpring(1),
+                );
+            }
+
+            dotColorAnimated.value = withTiming(
+              isComplete ? 1 : isCurrent ? 0.5 : 0,
+              { duration: 400 },
+            );
+
+            iconRotate.value = withSequence(
+              withTiming(0, { duration: 10 }),
+              withTiming(1, { duration: 400 }),
+            );
+
+            if (isComplete) {
+              lineProgress.value = withTiming(1, { duration: 600 });
+            } else if (wasComplete) {
+              lineProgress.value = withTiming(0, { duration: 600 });
+            }
+          } else {
+            lineProgress.value = isComplete ? 1 : 0;
+          }
+        }, [
+          item.status,
+          isComplete,
+          isCurrent,
+          animationType,
+          dotColorAnimated,
+          dotScale,
+          iconRotate,
+          lineProgress,
+          statusChanged,
+          wasComplete,
+        ]);
+
+        const dotAnimatedStyle = useAnimatedStyle(() => {
+          return {
+            transform: [{ scale: dotScale.value }],
+            backgroundColor: interpolateColor(
+              dotColorAnimated.value,
+              [0, 0.5, 1],
+              [inactiveColor, activeColor, activeColor],
+            ),
+          };
+        });
+
+        const lineAnimatedStyle = useAnimatedStyle(() => {
+          return {
+            backgroundColor: interpolateColor(
+              lineProgress.value,
+              [0, 1],
+              [inactiveColor, activeColor],
+            ),
+            width: lineWidth,
+            transform: [{ scaleY: lineProgress.value }],
+            opacity: 0.6 + lineProgress.value * 0.4,
+          };
+        });
+
+        const iconAnimatedStyle = useAnimatedStyle(() => {
+          return {
+            transform: [{ rotate: `${iconRotate.value * 360}deg` }],
+            opacity: 0.8 + iconRotate.value * 0.2,
+          };
+        });
+
+        const iconName =
+          item.icon ||
+          (isComplete ? 'check' : isCurrent ? 'activity' : 'circle');
+
+        const textColor =
+          isComplete || isCurrent ? colors.foreground : colors.mutedForeground;
+
+        return (
+          <AnimatedTouchableOpacity
+            key={item.id}
+            style={styles.itemContainer}
+            activeOpacity={onItemPress ? 0.7 : 1}
+            onPress={() => onItemPress && onItemPress(item)}
+            entering={
+              animated ? FadeInDown.delay(index * 100).springify() : undefined
+            }
+            layout={LinearTransition.springify()}
+          >
+            <View style={styles.timelineColumn}>
+              <Animated.View style={[styles.dot, dotAnimatedStyle]}>
+                <Animated.View style={[{}, iconAnimatedStyle]}>
+                  <AnimatedFeather
+                    name={iconName as any}
+                    size={iconSize * 0.7}
+                    color={colors.primaryForeground}
+                  />
+                </Animated.View>
+              </Animated.View>
+
+              {!isLast && (
+                <Animated.View style={[styles.line, lineAnimatedStyle]} />
+              )}
+            </View>
+
+            <View style={styles.contentColumn}>
+              <View style={styles.itemHeader}>
+                <Text style={[styles.title, { color: textColor }, titleStyle]}>
+                  {item.title}
+                </Text>
+
+                {item.timestamp && (
+                  <Text
+                    style={[
+                      styles.timestamp,
+                      { color: colors.mutedForeground },
+                      timestampStyle,
+                    ]}
+                  >
+                    {item.timestamp}
+                  </Text>
+                )}
+              </View>
+
+              {item.description && (
+                <Text
+                  style={[
+                    styles.description,
+                    { color: colors.mutedForeground },
+                    descriptionStyle,
+                  ]}
+                >
+                  {item.description}
+                </Text>
+              )}
+
+              {item.meta && (
+                <View style={[styles.metaContainer, metaContainerStyle]}>
+                  <Text
+                    style={[
+                      styles.metaText,
+                      { color: colors.mutedForeground },
+                      metaTextStyle,
+                    ]}
+                  >
+                    {item.meta}
+                  </Text>
+                </View>
+              )}
+
+              {item.children && (
+                <View
+                  style={[styles.childrenContainer, item.childrenContainer]}
+                >
+                  {item.children}
+                </View>
+              )}
+            </View>
+          </AnimatedTouchableOpacity>
+        );
+      })}
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    padding: 16,
+  },
+  itemContainer: {
+    flexDirection: 'row',
+    marginBottom: 24,
+  },
+  timelineColumn: {
+    alignItems: 'center',
+    width: 40,
+  },
+  contentColumn: {
+    flex: 1,
+    marginLeft: 12,
+    marginTop: -4,
+  },
+  dot: {
+    width: 28,
+    height: 28,
+    borderRadius: 14,
+    justifyContent: 'center',
+    alignItems: 'center',
+    elevation: 2,
+    shadowColor: '#000',
+    shadowOffset: { width: 0, height: 1 },
+    shadowOpacity: 0.1,
+    shadowRadius: 1,
+  },
+  line: {
+    flex: 1,
+    marginTop: 4,
+  },
+  itemHeader: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-start',
+    marginBottom: 6,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '600',
+    flex: 1,
+  },
+  description: {
+    fontSize: 14,
+    lineHeight: 20,
+    marginBottom: 8,
+  },
+  timestamp: {
+    fontSize: 12,
+    marginLeft: 8,
+  },
+  metaContainer: {
+    paddingHorizontal: 10,
+    paddingVertical: 6,
+    borderRadius: 6,
+    alignSelf: 'flex-start',
+    marginTop: 4,
+    marginBottom: 8,
+  },
+  metaText: {
+    fontSize: 12,
+  },
+  childrenContainer: {
+    padding: 12,
+  },
+});

package/recipes/0/apps/native/src/components/advanced-ui/timeline/types.ts

@@ -0,0 +1,31 @@
+import type { Feather } from '@expo/vector-icons';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+
+export interface TimelineItem {
+  id: string | number;
+  title: string;
+  description?: string;
+  timestamp?: string;
+  icon?: keyof typeof Feather.glyphMap;
+  status?: 'complete' | 'current' | 'upcoming';
+  meta?: string;
+  children?: React.ReactNode;
+  childrenContainer?: StyleProp<ViewStyle>;
+}
+
+export interface TimelineProps {
+  items: TimelineItem[];
+  activeColor?: string;
+  inactiveColor?: string;
+  animated?: boolean;
+  animationType?: 'bounce' | 'spring' | 'rotate' | 'fade' | 'scale';
+  onItemPress?: (item: TimelineItem) => void;
+  containerStyle?: ViewStyle;
+  metaContainerStyle?: StyleProp<ViewStyle>;
+  titleStyle?: TextStyle;
+  descriptionStyle?: TextStyle;
+  timestampStyle?: TextStyle;
+  lineWidth?: number;
+  iconSize?: number;
+  metaTextStyle?: StyleProp<TextStyle>;
+}

package/recipes/0/recipe.json

@@ -0,0 +1,18 @@
+{
+  "name": "0",
+  "version": "1.0.0",
+  "description": "Advanced UI component: 0",
+  "target": "native",
+  "copy": [
+    {
+      "from": "apps/native/src/components/advanced-ui/timeline",
+      "to": "apps/native/src/components/advanced-ui/timeline"
+    }
+  ],
+  "dependencies": {
+    "expo": [
+      "react-native-reanimated",
+      "react-native-gesture-handler"
+    ]
+  }
+}

package/recipes/animated-chip/apps/native/src/components/advanced-ui/chip/demo.tsx

@@ -10,7 +10,8 @@ import Animated, {
   withSequence,
   withTiming,
 } from 'react-native-reanimated';
-import { SafeAreaView } from 'react-native-safe-area-context';
+
+import { SafeAreaView } from '@/components/ui';
 
 import { useThemeConfig } from '../../../lib/use-theme-config';
 import { ChipGroup } from './chip';

package/recipes/animated-chip/recipe.json

@@ -1,7 +1,7 @@
 {
   "name": "animated-chip",
   "version": "1.0.0",
-  "description": "Animated chip component with smooth transitions",
+  "description": "Advanced UI component: animated-chip",
   "target": "native",
   "copy": [
     {
@@ -10,6 +10,9 @@
     }
   ],
   "dependencies": {
-    "expo": ["react-native-reanimated"]
+    "expo": [
+      "react-native-reanimated",
+      "react-native-gesture-handler"
+    ]
   }
 }

package/recipes/animated-switch/apps/native/src/components/advanced-ui/switch/demo.tsx

@@ -15,8 +15,8 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 
+import { SafeAreaView } from '@/components/ui';
 import { useThemeConfig } from '@/lib/use-theme-config';
 
 import { AnimatedSwitch } from './animated-switch';

package/recipes/animated-switch/recipe.json

@@ -1,7 +1,7 @@
 {
   "name": "animated-switch",
   "version": "1.0.0",
-  "description": "Smooth animated toggle switch component",
+  "description": "Advanced UI component: animated-switch",
   "target": "native",
   "copy": [
     {
@@ -10,6 +10,9 @@
     }
   ],
   "dependencies": {
-    "expo": ["react-native-reanimated"]
+    "expo": [
+      "react-native-reanimated",
+      "react-native-gesture-handler"
+    ]
   }
 }

package/recipes/audio-recorder/apps/native/src/features/audio-recorder/components/audio-recorder.tsx

@@ -164,7 +164,7 @@ export function AudioRecorder({
         // === END DEBUG CODE ===
 
         setRecordingUri(uri);
-        onRecordingComplete?.(uri);
+        // Note: We don't call onRecordingComplete here - user must click Save
       }
 
       onRecordingStop?.();
@@ -234,6 +234,7 @@ export function AudioRecorder({
   const handleSaveRecording = () => {
     if (recordingUri && onRecordingComplete) {
       onRecordingComplete(recordingUri);
+      setRecordingUri(null); // Reset UI after save
     }
   };
 

package/recipes/audio-recorder/apps/native/src/features/audio-recorder/demo/with-recording-list-demo.tsx

@@ -1,11 +1,11 @@
 import { useEffect, useState } from 'react';
 import { ActivityIndicator, View } from 'react-native';
-import { MMKV } from 'react-native-mmkv';
+
+import { storage } from '@/core/storage/mmkv';
 
 import { AudioRecorder, type Recording, RecordingList } from '../components';
 
 const RECORDINGS_STORAGE_KEY = 'audio_recordings';
-const storage = new MMKV();
 
 export function RecordingListDemo() {
   const [recordings, setRecordings] = useState<Recording[]>([]);

package/recipes/audio-recorder/recipe.json

@@ -18,5 +18,10 @@
     "icon": "🎤",
     "color": "#EF4444"
   },
-  "target": "native"
-}
+  "target": "native",
+  "dependencies": {
+    "expo": [
+      "expo-audio"
+    ]
+  }
+}

package/recipes/audio-recorder-supabase/apps/native/src/features/audio-recorder/components/audio-recorder.tsx

@@ -164,7 +164,7 @@ export function AudioRecorder({
         // === END DEBUG CODE ===
 
         setRecordingUri(uri);
-        onRecordingComplete?.(uri);
+        // Note: We don't call onRecordingComplete here - user must click Save
       }
 
       onRecordingStop?.();
@@ -234,6 +234,7 @@ export function AudioRecorder({
   const handleSaveRecording = () => {
     if (recordingUri && onRecordingComplete) {
       onRecordingComplete(recordingUri);
+      setRecordingUri(null); // Reset UI after save
     }
   };
 

package/recipes/audio-recorder-supabase/apps/native/src/features/audio-recorder/demo/with-recording-list-demo.tsx

@@ -1,9 +1,10 @@
 import { useEffect, useState } from 'react';
 import { ActivityIndicator, View } from 'react-native';
 
-import { AudioRecorder, type Recording, RecordingList } from '../components';
 import { createSafeMMKV } from '@/core/storage/mmkv';
 
+import { AudioRecorder, type Recording, RecordingList } from '../components';
+
 const RECORDINGS_STORAGE_KEY = 'audio_recordings';
 const storage = createSafeMMKV();
 

package/recipes/audio-recorder-supabase/recipe.json

@@ -1,52 +1,31 @@
 {
-  "name": "audio-recorder",
+  "name": "audio-recorder-supabase",
   "version": "1.0.0",
-  "description": "Audio recording with Supabase storage",
+  "description": "Voice notes with Supabase",
   "copy": [
     {
-      "from": "apps/native/src/features/audio-recorder",
-      "to": "apps/native/src/features/audio-recorder"
+      "from": "apps/native/src/app/audio-recorder",
+      "to": "apps/native/src/app/(root)/(protected)/audio-recorder"
     },
     {
-      "from": "apps/native/src/api-client/supabase/recordings.ts",
-      "to": "apps/native/src/api-client/supabase/recordings.ts"
+      "from": "apps/native/src/features/audio-recorder",
+      "to": "apps/native/src/features/audio-recorder"
     },
     {
       "from": "packages/backend/supabase/migrations/recordings.sql",
       "to": "packages/backend/supabase/migrations/recordings.sql"
-    },
-    {
-      "from": "packages/backend/src/services/recordings.ts",
-      "to": "packages/backend/src/services/recordings.ts"
     }
   ],
   "nav": {
     "href": "/(root)/(protected)/audio-recorder",
-    "label": "Audio Recorder",
-    "icon": "🎙️",
+    "label": "Voice Notes (Supabase)",
+    "icon": "🎤",
     "color": "#EF4444"
   },
   "target": "native",
-  "configuration": {
-    "apiClient": {
-      "exports": [
-        "export { type SupabaseRecordingsApi as RecordingsApi, supabaseRecordingsApi as recordingsApi } from './supabase/recordings';"
-      ]
-    },
-    "backend": {
-      "exports": [
-        "export { recordingsService, createRecordingDraft, finalizeRecording, listRecordings, updateRecordingName, deleteRecording, getRecordingById } from './services/recordings';",
-        "export type { CreateRecordingDraftInput, CreateRecordingDraftResult, FinalizeRecordingInput, FinalizeRecordingResult, ListRecordingsResult, UpdateRecordingNameResult, DeleteRecordingResult } from './services/recordings';"
-      ]
-    }
-  },
   "dependencies": {
-    "expo": ["@supabase/supabase-js", "expo-av", "expo-file-system"]
-  },
-  "manualSteps": [
-    {
-      "title": "Apply Supabase migration",
-      "description": "Run: cd packages/backend && supabase db push"
-    }
-  ]
+    "expo": [
+      "expo-audio"
+    ]
+  }
 }

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

@@ -0,0 +1,3 @@
+import ChartPreviewScreen from '@/features/charts/app/preview';
+
+export default ChartPreviewScreen;

package/recipes/charts/apps/native/src/features/charts/components/bar-chart.tsx

@@ -27,7 +27,9 @@ type Props = {
 };
 
 export const BarChart = ({ data, config = {}, style }: Props) => {
-  const [containerWidth, setContainerWidth] = useState(() => config.width ?? 300);
+  const [containerWidth, setContainerWidth] = useState(
+    () => config.width ?? 300,
+  );
   const {
     height = 200,
     padding = 20,

package/recipes/charts/apps/native/src/features/charts/components/candlestick-chart.tsx

@@ -36,7 +36,9 @@ type Props = {
 };
 
 export const CandlestickChart = ({ data, config = {}, style }: Props) => {
-  const [containerWidth, setContainerWidth] = useState(() => config.width ?? 300);
+  const [containerWidth, setContainerWidth] = useState(
+    () => config.width ?? 300,
+  );
 
   const {
     height = 200,

package/recipes/charts/apps/native/src/features/charts/components/column-chart.tsx

@@ -27,7 +27,9 @@ type Props = {
 };
 
 export const ColumnChart = ({ data, config = {}, style }: Props) => {
-  const [containerWidth, setContainerWidth] = useState(() => config.width ?? 300);
+  const [containerWidth, setContainerWidth] = useState(
+    () => config.width ?? 300,
+  );
   const {
     height = 200,
     padding = 20,

package/recipes/charts/apps/native/src/features/charts/components/doughnut-chart.tsx

@@ -79,7 +79,9 @@ const makeDonutSlicePath = (
 };
 
 export const DoughnutChart = ({ data, config = {}, style }: Props) => {
-  const [containerWidth, setContainerWidth] = useState(() => config.width ?? 300);
+  const [containerWidth, setContainerWidth] = useState(
+    () => config.width ?? 300,
+  );
   const {
     height = 200,
     animated = true,