vibefast-cli 1.2.1 → 1.3.1

package/recipes/payments-supabase/apps/native/src/app/paywall/remote.tsx

@@ -0,0 +1,23 @@
+import { Stack } from 'expo-router';
+import React, { useMemo } from 'react';
+
+import RemotePaywall from '@/features/payments/app/remote-paywall';
+import { translate } from '@/lib';
+
+export default function RemotePaywallScreen() {
+  const remoteTitle = translate('paywall.remote_title');
+  const screenOptions = useMemo(
+    () => ({
+      title: remoteTitle,
+      headerShown: true,
+    }),
+    [remoteTitle],
+  );
+
+  return (
+    <>
+      <Stack.Screen options={screenOptions} />
+      <RemotePaywall />
+    </>
+  );
+}

package/recipes/payments-supabase/recipe.json

@@ -1,8 +1,12 @@
 {
-  "name": "payments",
+  "name": "payments-supabase",
   "version": "1.0.0",
-  "description": "RevenueCat payments with Supabase sync",
+  "description": "Payments with Supabase",
   "copy": [
+    {
+      "from": "apps/native/src/app/paywall",
+      "to": "apps/native/src/app/(root)/(protected)/paywall"
+    },
     {
       "from": "apps/native/src/features/payments",
       "to": "apps/native/src/features/payments"
@@ -10,42 +14,31 @@
     {
       "from": "packages/backend/supabase/migrations/payments.sql",
       "to": "packages/backend/supabase/migrations/payments.sql"
-    },
-    {
-      "from": "packages/backend/src/services/payments.ts",
-      "to": "packages/backend/src/services/payments.ts"
     }
   ],
   "nav": {
-    "href": "/(root)/(protected)/payments",
-    "label": "Payments",
+    "href": "/(root)/(protected)/paywall",
+    "label": "Payments (Supabase)",
     "icon": "💳",
-    "color": "#EC4899"
+    "color": "#F59E0B"
   },
   "target": "native",
   "dependencies": {
     "expo": [
-      "@supabase/supabase-js",
       "react-native-purchases",
       "react-native-purchases-ui"
     ]
   },
-  "env": [
+  "manualSteps": [
     {
-      "key": "REVENUECAT_API_KEY_APPLE",
-      "description": "RevenueCat API key for iOS",
-      "example": "appl_..."
+      "title": "Enable RevenueCat initialization",
+      "description": "Uncomment the PaymentInitializer in root providers so the SDK is initialized on app startup.",
+      "file": "apps/native/src/providers/root-providers.tsx"
     },
     {
-      "key": "REVENUECAT_API_KEY_GOOGLE",
-      "description": "RevenueCat API key for Android",
-      "example": "goog_..."
-    }
-  ],
-  "manualSteps": [
-    {
-      "title": "Apply Supabase migration",
-      "description": "Run: cd packages/backend && supabase db push"
+      "title": "Set RevenueCat API keys",
+      "description": "Update your .env files with REVENUECAT_API_KEY_APPLE and REVENUECAT_API_KEY_GOOGLE values from RevenueCat.",
+      "file": "apps/native/.env.local"
     }
   ]
 }

package/recipes/posthog/apps/native/src/components/analytics/navigation-tracker.tsx

@@ -0,0 +1,14 @@
+import { Env } from '@env';
+import { useNavigationAnalytics } from '@/lib/hooks/use-navigation-analytics';
+
+/**
+ * Component to enable navigation tracking with PostHog
+ * Must be inside PostHogProvider to work properly
+ */
+export function NavigationTracker() {
+  if (!Env.POSTHOG_API_KEY) {
+    return null;
+  }
+  useNavigationAnalytics();
+  return null;
+}

package/recipes/posthog/apps/native/src/lib/hooks/use-navigation-analytics.ts

@@ -0,0 +1,44 @@
+import { usePathname, useSegments } from 'expo-router';
+import { usePostHog } from 'posthog-react-native';
+import { useEffect, useRef } from 'react';
+
+/**
+ * Hook to track navigation changes with PostHog using Expo Router
+ * This replaces PostHog's automatic screen tracking which relies on React Navigation
+ */
+export function useNavigationAnalytics() {
+  const posthog = usePostHog();
+  const segments = useSegments();
+  const pathname = usePathname();
+  const previousPathname = useRef<string>('');
+
+  useEffect(() => {
+    // Only track if pathname has actually changed
+    if (pathname && pathname !== previousPathname.current) {
+      try {
+        // Create a meaningful screen name from segments
+        const screenName =
+          segments.length > 0
+            ? segments.join('/')
+            : pathname.replace('/', '') || 'home';
+
+        // Track the screen view
+        posthog?.screen(screenName, {
+          pathname,
+          segments: segments.join('/'),
+          timestamp: Date.now(),
+        });
+
+        // Update previous pathname
+        previousPathname.current = pathname;
+      } catch (error) {
+        console.warn('[NavigationAnalytics] Failed to track screen:', error);
+      }
+    }
+  }, [pathname, segments, posthog]);
+
+  return {
+    currentScreen: segments.join('/') || 'home',
+    pathname,
+  };
+}

package/recipes/posthog/apps/native/src/providers/posthog-provider.tsx

@@ -0,0 +1,51 @@
+import { Env } from '@env';
+import { PostHogProvider } from 'posthog-react-native';
+import type { ReactNode } from 'react';
+
+interface AnalyticsProviderProps {
+  children: ReactNode;
+}
+
+/**
+ * PostHog analytics provider with session replay and custom navigation tracking
+ * Uses Expo Router compatible navigation tracking instead of automatic screen capture
+ */
+export function AnalyticsProvider({ children }: AnalyticsProviderProps) {
+  if (!Env.POSTHOG_API_KEY) {
+    return <>{children}</>;
+  }
+
+  return (
+    <PostHogProvider
+      apiKey={Env.POSTHOG_API_KEY}
+      options={{
+        host: Env.POSTHOG_HOST || 'https://us.i.posthog.com',
+        // Disable automatic screen tracking to prevent getCurrentRoute error with Expo Router
+        // captureScreens: false, // This option doesn't exist in PostHog
+        // Re-enable session replay (error was from Sentry, not PostHog)
+        enableSessionReplay: true,
+        sessionReplayConfig: {
+          // Whether text inputs are masked. Default is true.
+          // Password inputs are always masked regardless
+          maskAllTextInputs: true,
+          // Whether images are masked. Default is true.
+          maskAllImages: true,
+          // Capture logs automatically. Default is true.
+          // Android only (Native Logcat only)
+          captureLog: true,
+          // Whether network requests are captured in recordings. Default is true
+          // Only metric-like data like speed, size, and response code are captured.
+          // No data is captured from the request or response body.
+          // iOS only
+          captureNetworkTelemetry: true,
+          // Deboucer delay used to reduce the number of snapshots captured and reduce performance impact. Default is 500ms
+          androidDebouncerDelayMs: 500,
+          // Deboucer delay used to reduce the number of snapshots captured and reduce performance impact. Default is 1000ms
+          iOSdebouncerDelayMs: 1000,
+        },
+      }}
+    >
+      {children}
+    </PostHogProvider>
+  );
+}

package/recipes/posthog/recipe.json

@@ -0,0 +1,60 @@
+{
+  "name": "posthog",
+  "version": "1.0.0",
+  "description": "Product analytics with PostHog",
+  "copy": [
+    {
+      "from": "apps/native/src/providers/posthog-provider.tsx",
+      "to": "apps/native/src/providers/posthog-provider.tsx"
+    },
+    {
+      "from": "apps/native/src/lib/hooks/use-navigation-analytics.ts",
+      "to": "apps/native/src/lib/hooks/use-navigation-analytics.ts"
+    },
+    {
+      "from": "apps/native/src/components/analytics/navigation-tracker.tsx",
+      "to": "apps/native/src/components/analytics/navigation-tracker.tsx"
+    }
+  ],
+  "target": "native",
+  "dependencies": {
+    "expo": [
+      "posthog-react-native",
+      "posthog-react-native-session-replay"
+    ]
+  },
+  "configuration": {
+    "env": {
+      "client": {
+        "schema": [
+          "  POSTHOG_API_KEY: z.string().optional(),",
+          "  POSTHOG_HOST: z.string().optional(),"
+        ],
+        "env": [
+          "  POSTHOG_API_KEY: process.env.POSTHOG_API_KEY,",
+          "  POSTHOG_HOST: process.env.POSTHOG_HOST,"
+        ]
+      }
+    }
+  },
+  "manualSteps": [
+    {
+      "title": "Add PostHog API key",
+      "description": "Add POSTHOG_API_KEY to your .env files.",
+      "file": "apps/native/.env.local"
+    },
+    {
+      "title": "Set PostHog host (optional)",
+      "description": "If you use a self-hosted instance, set POSTHOG_HOST in your .env files.",
+      "file": "apps/native/.env.local"
+    },
+    {
+      "title": "Suppress Expo doctor warnings (optional)",
+      "description": "If expo-doctor flags posthog-react-native-session-replay, add it to expo.doctor.reactNativeDirectoryCheck.exclude in apps/native/package.json.",
+      "file": "apps/native/package.json"
+    }
+  ],
+  "postInstall": {
+    "message": "✅ PostHog files added. Update env files and re-run the app."
+  }
+}

package/recipes/progress-circle/apps/native/src/components/advanced-ui/progress-bars/progress-circle-page.tsx

@@ -1,8 +1,8 @@
 import Feather from '@expo/vector-icons/Feather';
 import React, { useState } from 'react';
 import { Button, StyleSheet, Text, 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 TransitioningProgressCircle from './progress-circle';

package/recipes/progress-circle/recipe.json

@@ -1,7 +1,7 @@
 {
   "name": "progress-circle",
   "version": "1.0.0",
-  "description": "Animated circular progress indicator",
+  "description": "Advanced UI component: progress-circle",
   "target": "native",
   "copy": [
     {
@@ -10,6 +10,9 @@
     }
   ],
   "dependencies": {
-    "expo": ["react-native-reanimated", "react-native-svg"]
+    "expo": [
+      "react-native-reanimated",
+      "react-native-gesture-handler"
+    ]
   }
 }

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

@@ -0,0 +1,47 @@
+import Quiz from '@/features/quiz';
+import { QuestionMode } from '@/features/quiz/config';
+
+const questions = [
+  {
+    text: 'What is your favorite color?',
+    mode: QuestionMode.AutoAdvance,
+    options: [
+      { id: 'red', text: 'Red', note: 'Red is the color of passion.' },
+      { id: 'blue', text: 'Blue', note: 'Blue is the color of calm.' },
+      { id: 'green', text: 'Green', note: 'Green is the color of nature.' },
+    ],
+  },
+  {
+    text: 'What is your favorite animal?',
+    mode: QuestionMode.ManualAdvance,
+    options: [
+      { id: 'dog', text: 'Dog', note: 'Dogs are loyal.' },
+      { id: 'cat', text: 'Cat', note: 'Cats are independent.' },
+      { id: 'bird', text: 'Bird', note: 'Birds can fly.' },
+    ],
+  },
+  {
+    text: 'What is your favorite animal?',
+    mode: QuestionMode.ManualAdvance,
+    options: [
+      { id: 'dog', text: 'Dog', note: 'Dogs are loyal.' },
+      { id: 'cat', text: 'Cat', note: 'Cats are independent.' },
+      { id: 'bird', text: 'Bird', note: 'Birds can fly.' },
+    ],
+  },
+  {
+    text: 'What is your favorite animal?',
+    mode: QuestionMode.ManualAdvance,
+    options: [
+      { id: 'dog', text: 'Dog', note: 'Dogs are loyal.' },
+      { id: 'cat', text: 'Cat', note: 'Cats are independent.' },
+      { id: 'bird', text: 'Bird', note: 'Birds can fly.' },
+    ],
+  },
+];
+
+const QuizScreen = () => {
+  return <Quiz questions={questions} />;
+};
+
+export default QuizScreen;

package/recipes/quiz/recipe.json

@@ -1,8 +1,12 @@
 {
   "name": "quiz",
   "version": "1.0.0",
-  "description": "Interactive quiz component",
+  "description": "Interactive quiz feature",
   "copy": [
+    {
+      "from": "apps/native/src/app/quiz",
+      "to": "apps/native/src/app/(root)/(protected)/quiz"
+    },
     {
       "from": "apps/native/src/features/quiz",
       "to": "apps/native/src/features/quiz"
@@ -11,9 +15,8 @@
   "nav": {
     "href": "/(root)/(protected)/quiz",
     "label": "Quiz",
-    "icon": "❓",
-    "color": "#F59E0B"
+    "icon": "📱",
+    "color": "#F97316"
   },
-  "target": "native",
-  "dependencies": { "expo": ["react-native-reanimated"] }
-}
+  "target": "native"
+}

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

@@ -0,0 +1,12 @@
+import { Stack } from 'expo-router';
+
+export default function ScreenKitsLayout() {
+  return (
+    <Stack
+      screenOptions={{
+        headerShown: false,
+        animation: 'slide_from_right',
+      }}
+    />
+  );
+}

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

@@ -0,0 +1,114 @@
+import { MaterialIcons } from '@expo/vector-icons';
+import { useRouter } from 'expo-router';
+import React from 'react';
+import { ScrollView, TouchableOpacity, View } from 'react-native';
+import Animated, { FadeInDown } from 'react-native-reanimated';
+
+import { SafeAreaView, Text } from '@/components/ui';
+import { KITS } from '@/features/screen-kits';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export default function ScreenKitsGallery() {
+  const theme = useThemeConfig();
+  const router = useRouter();
+
+  return (
+    <SafeAreaView className="flex-1 bg-background">
+      <ScrollView
+        contentContainerStyle={{ padding: 20, paddingBottom: 100 }}
+        showsVerticalScrollIndicator={false}
+      >
+        <View className="mb-8 mt-4">
+          <Text className="text-4xl font-extrabold text-foreground tracking-tight">
+            Screen Kits
+          </Text>
+          <Text className="text-lg text-muted-foreground mt-2 font-medium">
+            Production-ready UI patterns inspired by popular apps.
+          </Text>
+        </View>
+
+        <View className="gap-6">
+          {KITS.length === 0 ? (
+            <View
+              className="rounded-3xl border p-6"
+              style={{
+                borderColor: theme.colors.border,
+                backgroundColor: theme.colors.card,
+              }}
+            >
+              <Text className="text-lg font-semibold text-foreground">
+                No screen kits installed
+              </Text>
+              <Text className="text-sm text-muted-foreground mt-2">
+                Add a kit with the CLI to see it here.
+              </Text>
+            </View>
+          ) : (
+            KITS.map((kit, index) => (
+              <Animated.View
+                key={kit.id}
+                entering={FadeInDown.delay(index * 100).springify()}
+              >
+                <View
+                  className="rounded-3xl border overflow-hidden"
+                  style={{
+                    borderColor: theme.colors.border,
+                    backgroundColor: theme.colors.card,
+                  }}
+                >
+                  {/* Header */}
+                  <View
+                    className="p-6 flex-row items-center gap-4"
+                    style={{ backgroundColor: kit.color + '15' }}
+                  >
+                    <View
+                      className="w-12 h-12 rounded-2xl items-center justify-center border-2 border-white/20 shadow-sm"
+                      style={{ backgroundColor: kit.color }}
+                    >
+                      <Text className="text-2xl">{kit.icon}</Text>
+                    </View>
+                    <View className="flex-1">
+                      <Text className="text-xl font-bold text-foreground">
+                        {kit.title}
+                      </Text>
+                      <Text className="text-sm text-muted-foreground">
+                        {kit.description}
+                      </Text>
+                    </View>
+                  </View>
+
+                  {/* Screens List */}
+                  <View className="p-4 gap-3 bg-card">
+                    {kit.screens.map((screen) => (
+                      <TouchableOpacity
+                        key={screen.id}
+                        onPress={() => router.push(screen.route as any)}
+                        className="flex-row items-center p-3 rounded-xl bg-muted/50 active:bg-muted/80"
+                        style={{ gap: 12 }}
+                      >
+                        <View className="w-1 h-8 rounded-full bg-muted-foreground/20" />
+                        <View className="flex-1">
+                          <Text className="text-base font-semibold text-foreground">
+                            {screen.name}
+                          </Text>
+                          <Text className="text-xs text-muted-foreground">
+                            {screen.description}
+                          </Text>
+                        </View>
+                        <MaterialIcons
+                          name="arrow-forward-ios"
+                          size={16}
+                          color={theme.colors.mutedForeground}
+                        />
+                      </TouchableOpacity>
+                    ))}
+                  </View>
+                </View>
+              </Animated.View>
+            ))
+          )}
+        </View>
+      </ScrollView>
+    </SafeAreaView>
+  );
+}

package/recipes/screen-kits/apps/native/src/features/screen-kits/index.ts

@@ -0,0 +1 @@
+export * from './types';

package/recipes/screen-kits/apps/native/src/features/screen-kits/types.ts

@@ -0,0 +1,28 @@
+export type KitId =
+  | 'duolingo'
+  | 'fitness'
+  | 'finance'
+  | 'habits'
+  | 'social'
+  | 'ecommerce';
+
+export interface KitScreen {
+  id: string;
+  name: string;
+  description: string;
+  route: string;
+}
+
+export interface ScreenKit {
+  id: KitId;
+  title: string;
+  description: string;
+  icon: string;
+  color: string;
+  screens: KitScreen[];
+}
+
+export const KITS: ScreenKit[] = [
+  // --- @vibefast:screen-kits:start ---
+  // --- @vibefast:screen-kits:end ---
+];

package/recipes/screen-kits/recipe.json

@@ -0,0 +1,26 @@
+{
+  "name": "screen-kits",
+  "version": "1.0.0",
+  "description": "Screen kits hub and shared types",
+  "copy": [
+    {
+      "from": "apps/native/src/app/screen-kits",
+      "to": "apps/native/src/app/(root)/(protected)/screen-kits"
+    },
+    {
+      "from": "apps/native/src/features/screen-kits/types.ts",
+      "to": "apps/native/src/features/screen-kits/types.ts"
+    },
+    {
+      "from": "apps/native/src/features/screen-kits/index.ts",
+      "to": "apps/native/src/features/screen-kits/index.ts"
+    }
+  ],
+  "nav": {
+    "href": "/(root)/(protected)/screen-kits",
+    "label": "Screen Kits",
+    "icon": "📱",
+    "color": "#EC4899"
+  },
+  "target": "native"
+}

package/recipes/screen-kits-duolingo/apps/native/src/app/screen-kits/duolingo/_layout.tsx

@@ -0,0 +1,12 @@
+import { Stack } from 'expo-router';
+
+export default function DuolingoLayout() {
+  return (
+    <Stack screenOptions={{ headerShown: false }}>
+      <Stack.Screen name="index" />
+      <Stack.Screen name="home" />
+      <Stack.Screen name="lesson" options={{ presentation: 'card' }} />
+      <Stack.Screen name="skill-tree" />
+    </Stack>
+  );
+}

package/recipes/screen-kits-duolingo/apps/native/src/app/screen-kits/duolingo/home.tsx

@@ -0,0 +1,5 @@
+import { DuolingoHomeScreen } from '@/features/screen-kits/duolingo';
+
+export default function Page() {
+  return <DuolingoHomeScreen />;
+}

package/recipes/screen-kits-duolingo/apps/native/src/app/screen-kits/duolingo/index.tsx

@@ -0,0 +1,5 @@
+import { Redirect } from 'expo-router';
+
+export default function Page() {
+  return <Redirect href="/screen-kits/duolingo/home" />;
+}

package/recipes/screen-kits-duolingo/apps/native/src/app/screen-kits/duolingo/lesson-complete.tsx

@@ -0,0 +1,5 @@
+import { DuolingoLessonCompleteScreen } from '@/features/screen-kits/duolingo';
+
+export default function Page() {
+  return <DuolingoLessonCompleteScreen />;
+}

package/recipes/screen-kits-duolingo/apps/native/src/app/screen-kits/duolingo/lesson-fail.tsx

@@ -0,0 +1,5 @@
+import LessonFailScreen from '@/features/screen-kits/duolingo/screens/lesson-fail-screen';
+
+export default function Page() {
+  return <LessonFailScreen />;
+}

package/recipes/screen-kits-duolingo/apps/native/src/app/screen-kits/duolingo/lesson.tsx

@@ -0,0 +1,5 @@
+import { DuolingoLessonScreen } from '@/features/screen-kits/duolingo';
+
+export default function Page() {
+  return <DuolingoLessonScreen />;
+}

package/recipes/screen-kits-duolingo/apps/native/src/app/screen-kits/duolingo/skill-tree.tsx

@@ -0,0 +1,5 @@
+import { DuolingoHomeScreen } from '@/features/screen-kits/duolingo';
+
+export default function Page() {
+  return <DuolingoHomeScreen />;
+}