vibefast-cli 1.1.5 → 1.3.0

package/recipes/image-generator-supabase/packages/backend/supabase/migrations/image_generator.sql

@@ -0,0 +1,71 @@
+-- Image Generator Feature Migration
+-- Creates tables for AI-generated images
+-- Run this migration when adding the image-generator feature via CLI
+
+-- ============================================================================
+-- GENERATED_IMAGES TABLE
+-- Stores AI-generated images metadata
+-- ============================================================================
+CREATE TABLE IF NOT EXISTS generated_images (
+  id UUID PRIMARY KEY DEFAULT gen_random_uuid(),
+  user_id UUID NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+  prompt TEXT NOT NULL,
+  image_url TEXT,
+  storage_id TEXT,
+  mime_type TEXT,
+  provider TEXT NOT NULL,
+  model TEXT NOT NULL,
+  created_at TIMESTAMPTZ DEFAULT now()
+);
+
+-- ============================================================================
+-- INDEXES
+-- ============================================================================
+CREATE INDEX IF NOT EXISTS idx_generated_images_user_id ON generated_images(user_id);
+
+-- ============================================================================
+-- RLS POLICIES
+-- ============================================================================
+ALTER TABLE generated_images ENABLE ROW LEVEL SECURITY;
+
+CREATE POLICY "generated_images_select_own" ON generated_images
+  FOR SELECT USING (auth.uid() = user_id);
+
+CREATE POLICY "generated_images_insert_own" ON generated_images
+  FOR INSERT WITH CHECK (auth.uid() = user_id);
+
+CREATE POLICY "generated_images_update_own" ON generated_images
+  FOR UPDATE USING (auth.uid() = user_id);
+
+CREATE POLICY "generated_images_delete_own" ON generated_images
+  FOR DELETE USING (auth.uid() = user_id);
+
+-- ============================================================================
+-- STORAGE BUCKET - generated-images
+-- ============================================================================
+INSERT INTO storage.buckets (id, name, public, file_size_limit, allowed_mime_types)
+VALUES (
+  'generated-images',
+  'generated-images',
+  false,
+  10485760,  -- 10MB limit
+  ARRAY['image/jpeg', 'image/png', 'image/webp']
+) ON CONFLICT (id) DO NOTHING;
+
+-- Storage RLS for generated-images
+CREATE POLICY "Users can view their own generated images"
+ON storage.objects FOR SELECT TO authenticated
+USING (bucket_id = 'generated-images' AND (storage.foldername(name))[1] = auth.uid()::text);
+
+CREATE POLICY "Users can upload their own generated images"
+ON storage.objects FOR INSERT TO authenticated
+WITH CHECK (bucket_id = 'generated-images' AND (storage.foldername(name))[1] = auth.uid()::text);
+
+CREATE POLICY "Users can update their own generated images"
+ON storage.objects FOR UPDATE TO authenticated
+USING (bucket_id = 'generated-images' AND (storage.foldername(name))[1] = auth.uid()::text)
+WITH CHECK (bucket_id = 'generated-images' AND (storage.foldername(name))[1] = auth.uid()::text);
+
+CREATE POLICY "Users can delete their own generated images"
+ON storage.objects FOR DELETE TO authenticated
+USING (bucket_id = 'generated-images' AND (storage.foldername(name))[1] = auth.uid()::text);

package/recipes/image-generator-supabase/recipe.json

@@ -0,0 +1,86 @@
+{
+  "name": "image-generator",
+  "version": "1.0.0",
+  "description": "AI-powered image generation with Supabase backend",
+  "copy": [
+    {
+      "from": "apps/native/src/app/image-generator",
+      "to": "apps/native/src/app/(root)/(protected)/image-generator"
+    },
+    {
+      "from": "apps/native/src/features/image-generator",
+      "to": "apps/native/src/features/image-generator"
+    },
+    {
+      "from": "apps/native/src/api-client/supabase/image-generator.ts",
+      "to": "apps/native/src/api-client/supabase/image-generator.ts"
+    },
+    {
+      "from": "apps/native/src/api-client/supabase/reporting.ts",
+      "to": "apps/native/src/api-client/supabase/reporting.ts"
+    },
+    {
+      "from": "apps/native/src/api-client/supabase/shared.ts",
+      "to": "apps/native/src/api-client/supabase/shared.ts"
+    },
+    {
+      "from": "apps/native/src/api-client/reporting.ts",
+      "to": "apps/native/src/api-client/reporting.ts"
+    },
+    {
+      "from": "apps/native/src/api-client/shared.ts",
+      "to": "apps/native/src/api-client/shared.ts"
+    },
+    {
+      "from": "packages/backend/supabase/functions/generate-image",
+      "to": "packages/backend/supabase/functions/generate-image"
+    },
+    {
+      "from": "packages/backend/supabase/migrations/image_generator.sql",
+      "to": "packages/backend/supabase/migrations/image_generator.sql"
+    }
+  ],
+  "nav": {
+    "href": "/(root)/(protected)/image-generator",
+    "label": "Image Generator",
+    "icon": "🎨",
+    "color": "#8B5CF6"
+  },
+  "target": "native",
+  "configuration": {
+    "apiClient": {
+      "exports": [
+        "export { type SupabaseImageGeneratorApi as ImageGeneratorApi, supabaseImageGeneratorApi as imageGeneratorApi } from './supabase/image-generator';"
+      ]
+    }
+  },
+  "dependencies": {
+    "expo": [
+      "@supabase/supabase-js",
+      "@tanstack/react-query",
+      "expo-file-system",
+      "expo-media-library",
+      "expo-sharing"
+    ]
+  },
+  "env": [
+    {
+      "key": "OPENAI_API_KEY",
+      "description": "OpenAI API key for DALL-E image generation",
+      "example": "sk-...",
+      "link": "https://platform.openai.com/api-keys",
+      "file": "packages/backend/supabase/.env",
+      "required": true
+    }
+  ],
+  "manualSteps": [
+    {
+      "title": "Apply Supabase migration",
+      "description": "Run: cd packages/backend && supabase db push"
+    },
+    {
+      "title": "Deploy Edge Function",
+      "description": "Run: cd packages/backend && supabase functions deploy generate-image"
+    }
+  ]
+}

package/recipes/ios-widget/recipe.json

@@ -96,44 +96,35 @@
   "dependencies": {
     "expo": ["@bacons/apple-targets"]
   },
+  "plugins": [
+    {
+      "name": "@bacons/apple-targets",
+      "config": "{\n      targets: [\n        {\n          name: 'VibeFastWidget',\n          type: 'widget',\n          bundleIdentifier: `${Env.BUNDLE_ID}.widget`,\n          entitlements: {\n            'com.apple.security.application-groups': [\n              `group.${Env.BUNDLE_ID}.shared`,\n            ],\n          },\n        },\n      ],\n    }"
+    }
+  ],
+  "iosConfig": {
+    "appleTeamId": "Env.APPLE_TEAM_ID",
+    "entitlements": "{\n      'com.apple.security.application-groups': [`group.${Env.BUNDLE_ID}.shared`],\n    }"
+  },
   "env": [
     {
       "key": "APPLE_TEAM_ID",
       "description": "Apple Developer Team ID (used to sign widgets).",
       "example": "ABCDE12345",
       "link": "https://developer.apple.com/account/#/membership",
-      "file": "apps/native/.env.local"
+      "file": "apps/native/env.js"
     }
   ],
   "configuration": {
     "env": {
-      "constants": [
-        "const APPLE_TEAM_ID = 'replace_me';"
-      ],
+      "constants": ["const APPLE_TEAM_ID = 'replace_me';"],
       "buildTime": {
-        "schema": [
-          "  APPLE_TEAM_ID: z.string(),"
-        ],
-        "env": [
-          "  APPLE_TEAM_ID: process.env.APPLE_TEAM_ID,"
-        ]
+        "schema": ["  APPLE_TEAM_ID: z.string(),"],
+        "env": ["  APPLE_TEAM_ID,"]
       }
     }
   },
-  "manualSteps": [
-    {
-      "title": "Verify widget plugin",
-      "description": "The CLI adds the @bacons/apple-targets plugin automatically. Confirm it exists in app.config.ts.",
-      "file": "apps/native/app.config.ts",
-      "content": "[\n  '@bacons/apple-targets',\n  {\n    targets: [\n      {\n        name: 'VibeFastWidget',\n        type: 'widget',\n        bundleIdentifier: `${Env.BUNDLE_ID}.widget`,\n        entitlements: {\n          'com.apple.security.application-groups': [\n            'group.com.vibefast.vibefast',\n          ],\n        },\n      },\n    ],\n  },\n]"
-    },
-    {
-      "title": "Configure App Groups",
-      "description": "Ensure your main app has App Groups entitlements in app.config.ts",
-      "file": "apps/native/app.config.ts",
-      "content": "ios: {\n  entitlements: {\n    'com.apple.security.application-groups': ['group.com.vibefast.shared'],\n  },\n}"
-    }
-  ],
+  "manualSteps": [],
   "postInstall": {
     "instructions": [
       "Widget target files have been added",

package/recipes/onboarding/apps/native/src/features/onboarding/analytics/index.ts

@@ -0,0 +1,9 @@
+// Export analytics service and types
+
+// Export enhanced components
+export * from '../components/onboarding-with-analytics';
+// Export configuration
+export * from '../config/onboarding-flow-config';
+// Export React hooks
+export * from '../hooks/use-onboarding-analytics';
+export * from '../services/onboarding-analytics';

package/recipes/onboarding/apps/native/src/features/onboarding/components/onboarding-with-analytics.tsx

@@ -0,0 +1,141 @@
+import React, { useCallback, useEffect } from 'react';
+
+import { MAIN_ONBOARDING_FLOW } from '../config/onboarding-flow-config';
+import { useOnboardingAnalytics } from '../hooks/use-onboarding-analytics';
+import { Onboarding } from './onboarding';
+
+/**
+ * Props for the analytics-enabled onboarding component
+ */
+export type OnboardingWithAnalyticsProps = {
+  userType?: 'new' | 'returning' | 'migrated';
+  variant?: 'control' | 'experimental';
+  onComplete?: () => void;
+  onSkip?: () => void;
+};
+
+/**
+ * Enhanced onboarding component that automatically tracks user progress
+ * and behavior through the onboarding flow with PostHog analytics.
+ *
+ * This component wraps your existing Onboarding component and adds:
+ * - Automatic step tracking
+ * - Flow completion analytics
+ * - User abandonment detection
+ * - A/B test variant tracking
+ *
+ * Usage:
+ * ```tsx
+ * <OnboardingWithAnalytics
+ *   userType="new"
+ *   variant="experimental"
+ *   onComplete={() => router.push('/home')}
+ * />
+ * ```
+ */
+export function OnboardingWithAnalytics({
+  userType = 'new',
+  variant,
+  onComplete,
+  onSkip,
+}: OnboardingWithAnalyticsProps) {
+  // Get the appropriate flow configuration
+  const flowConfig = variant
+    ? { ...MAIN_ONBOARDING_FLOW, variant }
+    : MAIN_ONBOARDING_FLOW;
+
+  // Initialize onboarding analytics
+  const analytics = useOnboardingAnalytics({
+    flowConfig,
+    userType,
+    autoStart: true, // Automatically start tracking when component mounts
+  });
+
+  // Track when component mounts (onboarding starts)
+  useEffect(() => {
+    // Analytics are auto-started, but we can add additional properties
+    analytics.startFlow().then((sessionId) => {
+      console.log(`Onboarding session started: ${sessionId}`);
+    });
+  }, [analytics]);
+
+  // Enhanced completion handler with analytics
+  const handleComplete = useCallback(async () => {
+    await analytics.completeFlow();
+    onComplete?.();
+  }, [analytics, onComplete]);
+
+  // Enhanced skip handler with analytics (unused but kept for future use)
+  // const handleSkip = useCallback(async () => {
+  //   await analytics.abandonFlow('user_skipped');
+  //   onSkip?.();
+  // }, [analytics, onSkip]);
+
+  // Example handlers for step-level tracking (unused but kept for future use)
+  // const handleStepTransition = useCallback(
+  //   async (stepId: string, action: 'viewed' | 'completed') => {
+  //     if (action === 'viewed') {
+  //       await analytics.trackStepViewed(stepId, {
+  //         timestamp: new Date().toISOString(),
+  //         user_type: userType,
+  //         variant: variant || 'default',
+  //       });
+  //     } else if (action === 'completed') {
+  //       await analytics.trackStepCompleted(stepId, {
+  //         timestamp: new Date().toISOString(),
+  //         interaction_method: 'button', // Could be 'swipe', 'tap', etc.
+  //       });
+  //     }
+  //   },
+  //   [analytics, userType, variant]
+  // );
+
+  // Pass enhanced handlers to your existing Onboarding component
+  // Note: You'll need to provide the actual onboarding data
+  return (
+    <Onboarding
+      data={
+        [
+          // Add your actual onboarding data here
+          // This is just a placeholder structure
+        ]
+      }
+      onComplete={handleComplete}
+      testID="onboarding-with-analytics"
+    />
+  );
+}
+
+/**
+ * Example of how to integrate with your demo screens:
+ * You can enhance your existing demo-one.tsx and demo-two.tsx files
+ * to include step tracking like this:
+ */
+
+/*
+// In your demo-one.tsx file:
+export default function DemoOneScreen() {
+  const { trackStepViewed, trackStepCompleted } = useContext(OnboardingAnalyticsContext);
+  
+  useEffect(() => {
+    trackStepViewed('demo_one');
+  }, []);
+
+  const handleContinue = () => {
+    trackStepCompleted('demo_one', { 
+      interaction_method: 'button',
+      time_spent_seconds: Math.floor((Date.now() - startTime) / 1000)
+    });
+    // Navigate to next step
+  };
+
+  const handleSkip = () => {
+    trackStepSkipped('demo_one', 'user_choice');
+    // Skip to end or next step
+  };
+
+  return (
+    // Your existing UI
+  );
+}
+*/

package/recipes/onboarding/apps/native/src/features/onboarding/components/onboarding.tsx

@@ -0,0 +1,173 @@
+import LottieView from 'lottie-react-native';
+import React, { useRef, useState } from 'react';
+import { Dimensions, View, type ViewToken } from 'react-native';
+import Animated, {
+  useAnimatedScrollHandler,
+  useSharedValue,
+} from 'react-native-reanimated';
+
+import { Button, Text } from '@/components/ui';
+import ScrollingPaginationDots from '@/components/ui/core/pagination-dots';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export type OnboardingItem = {
+  id: string;
+  title: string;
+  description: string;
+  lottieAnim: any; // Lottie animation source
+};
+
+export type OnboardingProps = {
+  data: OnboardingItem[];
+  onComplete: () => void;
+  testID?: string;
+};
+
+/**
+ * Reusable Onboarding component with horizontal swipeable screens,
+ * Lottie animations, and progress dots
+ */
+export function Onboarding({ data, onComplete, testID }: OnboardingProps) {
+  const theme = useThemeConfig();
+  const scrollX = useSharedValue(0);
+  const flatListRef = useRef<Animated.FlatList<OnboardingItem>>(null);
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const handleScroll = useAnimatedScrollHandler((event) => {
+    scrollX.value = event.contentOffset.x;
+  });
+
+  const onViewableItemsChanged = ({
+    viewableItems,
+  }: {
+    viewableItems: ViewToken[];
+  }) => {
+    if (viewableItems.length > 0) {
+      const index = viewableItems[0].index || 0;
+      setCurrentIndex(index);
+    }
+  };
+
+  const handleNext = () => {
+    if (currentIndex < data.length - 1) {
+      flatListRef.current?.scrollToIndex({
+        index: currentIndex + 1,
+        animated: true,
+      });
+    } else {
+      onComplete();
+    }
+  };
+
+  const handleSkip = () => {
+    onComplete();
+  };
+
+  const renderItem = ({ item }: { item: OnboardingItem }) => (
+    <View
+      style={{ width: SCREEN_WIDTH }}
+      className="flex-1 items-center justify-center px-8"
+    >
+      {/* Lottie Animation */}
+      <View className="h-80 w-full items-center justify-center">
+        <LottieView
+          source={item.lottieAnim}
+          autoPlay
+          loop
+          style={{
+            width: 250,
+            height: 250,
+          }}
+          testID={`${testID}-lottie-${item.id}`}
+        />
+      </View>
+
+      {/* Title */}
+      <Text
+        className="my-4 text-center text-4xl font-bold"
+        testID={`${testID}-title-${item.id}`}
+      >
+        {item.title}
+      </Text>
+
+      {/* Description */}
+      <Text
+        className="text-center text-lg leading-6"
+        style={{ color: theme.colors.mutedForeground }}
+        testID={`${testID}-description-${item.id}`}
+      >
+        {item.description}
+      </Text>
+    </View>
+  );
+
+  const isLastSlide = currentIndex === data.length - 1;
+
+  return (
+    <View className="flex-1" testID={testID}>
+      {/* Main Content */}
+      <View className="flex-1">
+        <Animated.FlatList
+          ref={flatListRef}
+          data={data}
+          keyExtractor={(item) => item.id}
+          renderItem={renderItem}
+          horizontal
+          pagingEnabled
+          showsHorizontalScrollIndicator={false}
+          onScroll={handleScroll}
+          onViewableItemsChanged={onViewableItemsChanged}
+          viewabilityConfig={{
+            itemVisiblePercentThreshold: 50,
+          }}
+          scrollEventThrottle={16}
+          testID={`${testID}-flatlist`}
+        />
+      </View>
+
+      {/* Progress Dots */}
+      <View className="items-center py-6">
+        <ScrollingPaginationDots
+          count={data.length}
+          scrollX={scrollX}
+          slideWidth={SCREEN_WIDTH}
+          dotColor={theme.colors.primary}
+          inactiveDotColor={theme.colors.mutedForeground}
+          dotSize={10}
+          spacing={12}
+          inactiveDotOpacity={0.3}
+          maxVisibleDots={5}
+        />
+      </View>
+
+      {/* Action Buttons */}
+      <View className="flex-row items-center justify-between px-8 pb-8">
+        <Button
+          variant="ghost"
+          label={translate('onboarding.skip')}
+          onPress={handleSkip}
+          testID={`${testID}-skip-button`}
+          className="flex-1"
+        />
+
+        <View className="w-4" />
+
+        <Button
+          label={
+            isLastSlide
+              ? translate('onboarding.get_started')
+              : translate('onboarding.next')
+          }
+          onPress={handleNext}
+          testID={`${testID}-${isLastSlide ? 'complete' : 'next'}-button`}
+          className="flex-1"
+        />
+      </View>
+    </View>
+  );
+}
+
+export default Onboarding;