vibefast-cli 0.1.1

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

@@ -0,0 +1,89 @@
+import { Alert, View } from 'react-native';
+
+import { Button, Icon, List, Text } from '@/components/ui';
+
+import { AudioPlayer } from './audio-player';
+
+export interface Recording {
+  uri: string;
+  name: string;
+  date: string;
+}
+
+export interface RecordingListProps {
+  recordings: Recording[];
+  onDeleteRecording: (uri: string) => void;
+}
+
+export function RecordingList({
+  recordings,
+  onDeleteRecording,
+}: RecordingListProps) {
+  const handleDelete = (uri: string) => {
+    Alert.alert(
+      'Delete Recording',
+      'Are you sure you want to delete this recording?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        {
+          text: 'Delete',
+          style: 'destructive',
+          onPress: () => onDeleteRecording(uri),
+        },
+      ],
+    );
+  };
+
+  const renderItem = ({ item }: { item: Recording }) => (
+    <View className="my-1 rounded-lg border border-neutral-300 p-3 dark:border-neutral-800">
+      <View className="mb-2 flex-row items-center justify-between">
+        <View className="flex-1">
+          <Text className="pr-2 text-base font-semibold">{item.name}</Text>
+          <Text className="text-xs text-muted">{item.date}</Text>
+        </View>
+        <Button
+          variant="ghost"
+          size="icon"
+          onPress={() => handleDelete(item.uri)}
+          className="size-8"
+        >
+          <Icon name="trash" size={18} />
+        </Button>
+      </View>
+      <AudioPlayer
+        source={{ uri: item.uri }}
+        shrinked={true}
+        showWaveform={true}
+        showTimer={true}
+        showProgressBar={false}
+        showControls={true}
+        style={{ className: 'm-0 p-0 bg-transparent' }}
+        // Only shrink waveform, keep normal button sizes
+        waveformHeight={50}
+        waveformBarCount={45}
+        waveformBarWidth={2.5}
+        waveformBarGap={1}
+        controlButtonSize={20}
+        playButtonSize={24}
+      />
+    </View>
+  );
+
+  return (
+    <View className="flex-1">
+      <List
+        data={recordings}
+        renderItem={renderItem}
+        keyExtractor={(item) => item.uri}
+        ListEmptyComponent={
+          <View className="items-center p-4">
+            <Text>No recordings saved.</Text>
+          </View>
+        }
+        contentContainerStyle={{ paddingHorizontal: 8, flexGrow: 1 }}
+        showsVerticalScrollIndicator={false}
+        nestedScrollEnabled={true}
+      />
+    </View>
+  );
+}

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

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+import { Switch, View } from 'react-native';
+
+import { Text } from '@/components/ui';
+
+import { AudioPlayer } from '../components';
+
+export function AudioPlayerDemo() {
+  const [showControls, setShowControls] = useState(true);
+  const [showWaveform, setShowWaveform] = useState(true);
+  const [showTimer, setShowTimer] = useState(true);
+  const [showProgressBar, setShowProgressBar] = useState(true);
+
+  const remoteAudioSource = {
+    uri: 'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
+  };
+
+  const renderToggle = (
+    label: string,
+    value: boolean,
+    onValueChange: (value: boolean) => void,
+  ) => (
+    <View
+      style={{
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        paddingVertical: 8,
+      }}
+    >
+      <Text>{label}</Text>
+      <Switch value={value} onValueChange={onValueChange} />
+    </View>
+  );
+
+  return (
+    <View style={{ width: '100%', gap: 16 }}>
+      <Text className="text-center text-lg font-bold">Audio Player Demo</Text>
+      <AudioPlayer
+        source={remoteAudioSource}
+        showControls={showControls}
+        showWaveform={showWaveform}
+        showTimer={showTimer}
+        showProgressBar={showProgressBar}
+        autoPlay={false}
+        onPlaybackStatusUpdate={(status) =>
+          console.log('Playback status:', status)
+        }
+      />
+      <View
+        style={{
+          padding: 16,
+          marginTop: 16,
+          backgroundColor: '#f0f0f0',
+          borderRadius: 8,
+        }}
+      >
+        <Text className="text-md mb-2 font-bold">Player Options</Text>
+        {renderToggle('Show Controls', showControls, setShowControls)}
+        {renderToggle('Show Waveform', showWaveform, setShowWaveform)}
+        {renderToggle('Show Timer', showTimer, setShowTimer)}
+        {renderToggle('Show Progress Bar', showProgressBar, setShowProgressBar)}
+      </View>
+    </View>
+  );
+}

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

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+
+import { Text } from '@/components/ui';
+
+import { AudioRecorder } from '../components/audio-recorder';
+
+export function AudioRecorderCloud() {
+  const [uploading, setUploading] = useState(false);
+  const [uploadProgress, setUploadProgress] = useState(0);
+
+  const simulateCloudUpload = async (uri: string): Promise<string> => {
+    return new Promise((resolve) => {
+      setUploading(true);
+      setUploadProgress(0);
+
+      const interval = setInterval(() => {
+        setUploadProgress((prev) => {
+          if (prev >= 100) {
+            clearInterval(interval);
+            setUploading(false);
+            resolve(
+              `https://cloud-storage.example.com/audio/${Date.now()}.m4a`,
+            );
+            return 100;
+          }
+          return prev + 10;
+        });
+      }, 200);
+    });
+  };
+
+  const handleRecordingComplete = async (uri: string) => {
+    try {
+      const cloudUrl = await simulateCloudUpload(uri);
+
+      console.log(`Recording uploaded to cloud storage!\n\nURL: ${cloudUrl}`);
+
+      setUploadProgress(0);
+    } catch (error) {
+      console.log('Failed to upload recording to cloud storage:', error);
+
+      setUploading(false);
+      setUploadProgress(0);
+    }
+  };
+
+  return (
+    <View style={{ width: '100%' }}>
+      <AudioRecorder
+        quality="high"
+        showWaveform={true}
+        showTimer={true}
+        maxDuration={600} // 10 minutes
+        onRecordingComplete={handleRecordingComplete}
+      />
+
+      {uploading && (
+        <View style={{ marginTop: 16, alignItems: 'center' }}>
+          <ActivityIndicator size="small" />
+          <Text className="text-sm" style={{ marginTop: 8 }}>
+            Uploading... {uploadProgress}%
+          </Text>
+        </View>
+      )}
+    </View>
+  );
+}

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

@@ -0,0 +1,102 @@
+import { RecordingPresets } from 'expo-audio';
+import React, { useState } from 'react';
+import { Alert, StyleSheet, View } from 'react-native';
+
+import { Text } from '@/components/ui';
+
+import { AudioRecorder } from '../components/audio-recorder';
+
+export function AudioRecorderInterview() {
+  const [interviewTitle, setInterviewTitle] = useState('');
+  const [isRecording, setIsRecording] = useState(false);
+
+  const handleRecordingStart = () => {
+    setIsRecording(true);
+    const title = `Interview ${new Date().toLocaleDateString()}`;
+    setInterviewTitle(title);
+  };
+
+  const handleRecordingStop = () => {
+    setIsRecording(false);
+  };
+
+  const handleRecordingComplete = (uri: string) => {
+    Alert.alert(
+      '🎤 Interview Complete',
+      `"${interviewTitle}" has been recorded and saved.\n\nDuration: Available in file metadata\nQuality: High (48kHz, Stereo)`,
+      [{ text: 'Save & Exit' }],
+    );
+  };
+
+  return (
+    <View style={{ width: '100%' }}>
+      <View style={styles.interviewHeader}>
+        <Text
+          className="mt-4 text-xl font-medium"
+          style={styles.interviewTitle}
+        >
+          {interviewTitle || 'Ready for Interview'}
+        </Text>
+
+        <View
+          style={[styles.statusBadge, isRecording && styles.recordingBadge]}
+        >
+          <Text
+            style={[styles.statusText, isRecording && styles.recordingText]}
+          >
+            {isRecording ? '🔴 LIVE' : '⏸️ READY'}
+          </Text>
+        </View>
+      </View>
+
+      <AudioRecorder
+        quality="high"
+        showWaveform={true}
+        showTimer={true}
+        maxDuration={7200} // 2 hours for long interviews
+        customRecordingOptions={{
+          ...RecordingPresets.HIGH_QUALITY,
+          sampleRate: 48000,
+          bitRate: 128000,
+          numberOfChannels: 2,
+          isMeteringEnabled: true,
+        }}
+        onRecordingStart={handleRecordingStart}
+        onRecordingStop={handleRecordingStop}
+        onRecordingComplete={handleRecordingComplete}
+      />
+
+      <Text className="text-sm" style={{ marginTop: 12, textAlign: 'center' }}>
+        Maximum duration: 2 hours • High quality stereo recording
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  interviewHeader: {
+    marginBottom: 16,
+    alignItems: 'center',
+  },
+  interviewTitle: {
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  statusBadge: {
+    paddingHorizontal: 12,
+    paddingVertical: 4,
+    borderRadius: 12,
+    backgroundColor: '#f3f4f6',
+  },
+  recordingBadge: {
+    backgroundColor: '#fef2f2',
+  },
+  statusText: {
+    fontSize: 12,
+    fontWeight: '600',
+    color: '#6b7280',
+  },
+  recordingText: {
+    color: '#dc2626',
+  },
+});

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

@@ -0,0 +1,27 @@
+import { AudioRecorder } from '../components/audio-recorder';
+
+export function AudioRecorderDemo() {
+  const handleRecordingComplete = (uri: string) => {
+    console.log('Recording saved to:', uri);
+  };
+
+  const handleRecordingStart = () => {
+    console.log('Recording started');
+  };
+
+  const handleRecordingStop = () => {
+    console.log('Recording stopped');
+  };
+
+  return (
+    <AudioRecorder
+      quality="high"
+      showWaveform={true}
+      showTimer={true}
+      maxDuration={300} // 5 minutes
+      onRecordingComplete={handleRecordingComplete}
+      onRecordingStart={handleRecordingStart}
+      onRecordingStop={handleRecordingStop}
+    />
+  );
+}

package/recipes/audio-recorder/apps/native/src/features/audio-recorder/demo/index.ts

@@ -0,0 +1,5 @@
+export * from './audio-player-demo';
+export * from './audio-recorder-cloud';
+export * from './audio-recorder-interview';
+export * from './basic';
+export * from './with-recording-list-demo';

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

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import { MMKV } from 'react-native-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[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Load recordings from storage on component mount
+  useEffect(() => {
+    loadRecordings();
+  }, []);
+
+  const loadRecordings = () => {
+    try {
+      const storedRecordings = storage.getString(RECORDINGS_STORAGE_KEY);
+      if (storedRecordings) {
+        const parsedRecordings = JSON.parse(storedRecordings);
+        setRecordings(parsedRecordings);
+      }
+    } catch (error) {
+      console.error('Failed to load recordings:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const saveRecordings = (newRecordings: Recording[]) => {
+    try {
+      storage.set(RECORDINGS_STORAGE_KEY, JSON.stringify(newRecordings));
+    } catch (error) {
+      console.error('Failed to save recordings:', error);
+    }
+  };
+
+  const handleRecordingComplete = (uri: string) => {
+    const newRecording: Recording = {
+      uri,
+      name: `Recording ${recordings.length + 1}`,
+      date: new Date().toLocaleString(),
+    };
+    const updatedRecordings = [...recordings, newRecording];
+    setRecordings(updatedRecordings);
+    saveRecordings(updatedRecordings);
+  };
+
+  const handleDeleteRecording = (uri: string) => {
+    const updatedRecordings = recordings.filter((rec) => rec.uri !== uri);
+    setRecordings(updatedRecordings);
+    saveRecordings(updatedRecordings);
+  };
+
+  if (isLoading) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          width: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  return (
+    <View style={{ flex: 1, width: '100%', gap: 16 }}>
+      <AudioRecorder onRecordingComplete={handleRecordingComplete} />
+      <RecordingList
+        recordings={recordings}
+        onDeleteRecording={handleDeleteRecording}
+      />
+    </View>
+  );
+}

package/recipes/audio-recorder/recipe.json

@@ -0,0 +1,22 @@
+{
+  "name": "audio-recorder",
+  "version": "1.0.0",
+  "description": "Record and manage voice notes",
+  "copy": [
+    {
+      "from": "apps/native/src/app/audio-recorder",
+      "to": "apps/native/src/app/(root)/(protected)/audio-recorder"
+    },
+    {
+      "from": "apps/native/src/features/audio-recorder",
+      "to": "apps/native/src/features/audio-recorder"
+    }
+  ],
+  "nav": {
+    "href": "/(root)/(protected)/audio-recorder",
+    "label": "Voice Notes",
+    "icon": "🎤",
+    "color": "#EF4444"
+  },
+  "target": "native"
+}

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/README.md

@@ -0,0 +1,185 @@
+# Chart Components
+
+A collection of beautiful, animated chart components built with React Native SVG, d3-shape, and React Native Reanimated.
+
+## 🚀 Features
+
+- **Fully Animated**: Smooth entrance animations with staggered effects
+- **Theme-Aware**: Automatically adapts to light/dark themes using `useThemeConfig`
+- **Responsive**: Horizontal scrolling support for charts that exceed screen width
+- **Accessible**: Proper contrast ratios and accessibility labels
+- **TypeScript**: Fully typed with comprehensive prop interfaces
+- **Customizable**: Extensive styling and behavior options
+
+## 📊 Available Charts
+
+### BarChart
+
+Animated bar charts with horizontal scrolling support.
+
+**Features:**
+
+- Staggered bar growth animations
+- Grid lines with proper contrast
+- Value labels above bars
+- Category labels below bars
+- Horizontal scrolling for wide datasets
+- Haptic feedback on press
+
+**Props:**
+
+- `data`: Array of chart data objects with `id`, `label`, `value`, and optional `color`
+- `height`: Chart height (default: 250)
+- `showValues`: Display values above bars (default: true)
+- `showLabels`: Display labels below bars (default: true)
+- `showGrid`: Show grid lines (default: true)
+- `valueFormatter`: Function to format displayed values
+- `barRadius`: Border radius of bars (default: 8)
+- `gap`: Space between bars (default: 12)
+
+### LineChart
+
+Smooth animated line charts with area fills and data points.
+
+**Features:**
+
+- Animated path drawing with stroke-dash effects
+- Curved or linear line styles
+- Optional area fills
+- Animated data points
+- Grid overlay support
+
+**Props:**
+
+- `data`: Array of numeric values
+- `labels`: Array of string labels for x-axis
+- `height`: Chart height (default: 200)
+- `curved`: Use curved lines (default: true)
+- `showArea`: Show area fill (default: true)
+- `showDots`: Show data points (default: true)
+- `valueFormatter`: Function to format displayed values
+
+### PieChart
+
+Animated pie charts with detailed legends.
+
+**Features:**
+
+- Slice-by-slice animation with staggered timing
+- Interactive legend with slide-in effects
+- Support for custom colors
+- Touch interactions with haptic feedback
+
+**Props:**
+
+- `data`: Array of chart data objects
+- `height`: Chart height (default: 300)
+- `radius`: Chart radius (auto-calculated if not provided)
+- `showLegend`: Display legend (default: true)
+- `valueFormatter`: Function to format displayed values
+
+### DonutChart
+
+Specialized donut charts with center labels.
+
+**Features:**
+
+- All PieChart features
+- Customizable inner radius ratio
+- Center total display for donut charts
+- Enhanced visual hierarchy
+
+**Props:**
+
+- All PieChart props except `innerRadius`
+- `innerRadiusRatio`: Inner radius as percentage of outer radius (default: 0.6)
+
+## 🎨 Theme Integration
+
+All charts use the `useThemeConfig` hook for consistent theming:
+
+```typescript
+// Text colors
+theme.colors.foreground; // Primary text
+theme.colors.mutedForeground; // Secondary text
+
+// Background colors
+theme.colors.background; // Chart background
+theme.colors.card; // Card backgrounds
+theme.colors.muted; // Legend item backgrounds
+
+// Border colors
+theme.colors.outline; // Grid lines and borders
+```
+
+## 🔧 Usage Examples
+
+### Bar Chart with Horizontal Scrolling
+
+```tsx
+<BarChart
+  data={salesData}
+  height={350}
+  showValues={true}
+  showGrid={true}
+  showLabels={true}
+  valueFormatter={(value) => `$${value.toLocaleString()}`}
+/>
+```
+
+### Animated Line Chart
+
+```tsx
+<LineChart
+  data={monthlyActiveUsers}
+  labels={monthLabels}
+  height={250}
+  curved={true}
+  showArea={true}
+  showDots={true}
+  valueFormatter={(value) => value.toLocaleString()}
+/>
+```
+
+### Donut Chart with Custom Styling
+
+```tsx
+<DonutChart
+  data={expensesData}
+  height={450}
+  radius={130}
+  innerRadiusRatio={0.65}
+  showLegend={true}
+  valueFormatter={(value) => `$${value}k`}
+/>
+```
+
+## 🎭 Animation Details
+
+- **Bar Charts**: Staggered bar growth with 100ms delays between bars
+- **Line Charts**: Stroke-dash animation followed by area fill and dot appearance
+- **Pie Charts**: Radial growth animation with 150ms delays between slices
+- **Legends**: Slide-in animations with opacity transitions
+
+## 📱 Responsive Design
+
+Charts automatically adapt to different screen sizes:
+
+- Bar charts enable horizontal scrolling when content exceeds screen width
+- Minimum bar widths ensure readability on all devices
+- Dynamic font sizing based on chart dimensions
+- Proper padding and margins for touch interactions
+
+## 🔄 Performance Optimizations
+
+- React Native Reanimated for smooth 60fps animations
+- Efficient re-renders using `useCallback` and `useMemo`
+- SVG path caching for complex shapes
+- Minimal re-animations on data updates
+
+## 🎯 Accessibility
+
+- High contrast color schemes for both light and dark themes
+- Proper accessibility labels and roles
+- Touch target sizes meet accessibility guidelines
+- Screen reader friendly value announcements