vibefast-cli 0.2.4 → 0.3.0

package/2/apps/native/src/app/(root)/(protected)/_layout.tsx

@@ -0,0 +1,143 @@
+import { Stack, useRouter } from 'expo-router';
+import { useEffect, useMemo, useRef } from 'react';
+
+import { useNavigationOptions } from '@/lib/hooks/use-navigation-options';
+import { useAuthClientStore } from '@/lib/state';
+
+export const unstable_settings = {
+  initialRouteName: '(tabs)',
+};
+
+export default function ProtectedLayout() {
+  const router = useRouter();
+  const isAuthenticated = useAuthClientStore((state) => state.isAuthenticated);
+  const authHydrated = useAuthClientStore((state) => !state.isLoading);
+  const { root, standard, scrollable } = useNavigationOptions();
+  const hasRedirectedRef = useRef(false);
+
+  const memoizedScreenOptions = useMemo(
+    () => ({
+      stack: {
+        ...root,
+      },
+      tabs: {
+        ...root,
+        headerShown: false,
+      },
+      paywall: {
+        ...standard,
+        headerShown: false,
+      },
+      imageGenerator: {
+        ...standard,
+        title: 'Image Generator',
+      },
+      chatbot: {
+        ...scrollable,
+        title: 'AI Chatbot',
+      },
+      charts: {
+        ...scrollable,
+        title: 'Charts',
+      },
+      audioRecorder: {
+        ...scrollable,
+        title: 'Voice Notes',
+      },
+      trackerApp: {
+        ...standard,
+        headerShown: false,
+      },
+      quiz: {
+        ...standard,
+        headerShown: false,
+      },
+      analysis: {
+        ...standard,
+        title: 'Analysis',
+      },
+      voiceBot: {
+        ...scrollable,
+        title: 'Voice Assistant',
+      },
+      testWakeWord: {
+        ...scrollable,
+        title: 'Wake Word Test',
+      },
+      quickActionsDemo: {
+        ...scrollable,
+        title: 'Quick Actions Demo',
+      },
+    }),
+    [root, standard, scrollable],
+  );
+
+  useEffect(() => {
+    if (authHydrated && !isAuthenticated && !hasRedirectedRef.current) {
+      hasRedirectedRef.current = true;
+      router.replace('/login');
+    }
+
+    if (isAuthenticated) {
+      hasRedirectedRef.current = false;
+    }
+  }, [authHydrated, isAuthenticated, router]);
+
+  if (!authHydrated) {
+    return null;
+  }
+
+  if (!isAuthenticated) {
+    return null;
+  }
+
+  return (
+    <Stack screenOptions={memoizedScreenOptions.stack}>
+      {/* TABS - Main authenticated navigation */}
+      <Stack.Screen name="(tabs)" options={memoizedScreenOptions.tabs} />
+
+      {/* FEATURES - Authenticated feature screens */}
+      <Stack.Screen
+        name="paywall/index"
+        options={memoizedScreenOptions.paywall}
+      />
+      <Stack.Screen
+        name="image-generator/index"
+        options={memoizedScreenOptions.imageGenerator}
+      />
+      <Stack.Screen
+        name="chatbot/index"
+        options={memoizedScreenOptions.chatbot}
+      />
+      <Stack.Screen
+        name="charts/index"
+        options={memoizedScreenOptions.charts}
+      />
+      <Stack.Screen
+        name="audio-recorder/index"
+        options={memoizedScreenOptions.audioRecorder}
+      />
+      <Stack.Screen
+        name="tracker-app/index"
+        options={memoizedScreenOptions.trackerApp}
+      />
+      <Stack.Screen name="quiz/index" options={memoizedScreenOptions.quiz} />
+      <Stack.Screen
+        name="analysis/[type]"
+        options={memoizedScreenOptions.analysis}
+      />
+      <Stack.Screen
+        name="voice-bot/index"
+        options={memoizedScreenOptions.voiceBot}
+      />
+      <Stack.Screen
+        name="test-wake-word"
+        options={memoizedScreenOptions.testWakeWord}
+      />
+      <Stack.Screen
+        name="quick-actions-demo/index"
+        options={memoizedScreenOptions.quickActionsDemo}
+      />
+    </Stack>
+  );
+}

package/2/apps/native/src/app/(root)/(protected)/analysis/[type]/_layout.tsx

@@ -0,0 +1,5 @@
+import { Slot } from 'expo-router';
+
+export default function AnalysisLayout() {
+  return <Slot />;
+}

package/2/apps/native/src/app/(root)/(protected)/analysis/[type]/analysis-options.tsx

@@ -0,0 +1,50 @@
+import { Redirect, useLocalSearchParams } from 'expo-router';
+import React from 'react';
+import { View } from 'react-native';
+
+import { FocusAwareStatusBar, Text } from '@/components/ui';
+import { DynamicAnalysisOptionsScreen } from '@/features/image-analyzer/app/analysis-options-screen';
+import { getAnalysisFlowConfigSafe } from '@/features/image-analyzer/config/master-analysis-config';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+/**
+ * Dynamic analysis options route that loads the appropriate configuration
+ * based on the type parameter
+ */
+export default function DynamicAnalysisOptionsRoute() {
+  const { type } = useLocalSearchParams<{ type: string }>();
+  const theme = useThemeConfig();
+
+  if (!type || typeof type !== 'string') {
+    return <Redirect href="/(protected)/(tabs)" />;
+  }
+
+  const config = getAnalysisFlowConfigSafe(type);
+
+  if (!config) {
+    // Invalid analysis type, redirect to home with a user-friendly message
+    return (
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: theme.colors.background,
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: 20,
+        }}
+      >
+        <FocusAwareStatusBar />
+        <Text className="mb-4 text-center text-lg font-medium">
+          {translate('common.invalid_analysis_type')}
+        </Text>
+        <Text className="mb-6 text-center text-muted-foreground">
+          {translate('common.redirecting_home')}
+        </Text>
+        <Redirect href="/(protected)/(tabs)" />
+      </View>
+    );
+  }
+
+  return <DynamicAnalysisOptionsScreen config={config} />;
+}

package/2/apps/native/src/app/(root)/(protected)/analysis/[type]/camera.tsx

@@ -0,0 +1,2 @@
+// Re-export the camera screen
+export { default } from '@/features/image-analyzer/app/camera';

package/2/apps/native/src/app/(root)/(protected)/analysis/[type]/index.tsx

@@ -0,0 +1,50 @@
+import { Redirect, useLocalSearchParams } from 'expo-router';
+import React from 'react';
+import { View } from 'react-native';
+
+import { FocusAwareStatusBar, Text } from '@/components/ui';
+import { ImageCaptureScreen } from '@/features/image-analyzer/app/image-capture-screen';
+import { getAnalysisFlowConfigSafe } from '@/features/image-analyzer/config/master-analysis-config';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+/**
+ * Dynamic analysis route that loads the appropriate configuration
+ * based on the type parameter
+ */
+export default function DynamicAnalysisScreen() {
+  const { type } = useLocalSearchParams<{ type: string }>();
+  const theme = useThemeConfig();
+
+  if (!type || typeof type !== 'string') {
+    return <Redirect href="/(protected)/(tabs)" />;
+  }
+
+  const config = getAnalysisFlowConfigSafe(type);
+
+  if (!config) {
+    // Invalid analysis type, redirect to home with a user-friendly message
+    return (
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: theme.colors.background,
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: 20,
+        }}
+      >
+        <FocusAwareStatusBar />
+        <Text className="mb-4 text-center text-lg font-medium">
+          {translate('common.invalid_analysis_type')}
+        </Text>
+        <Text className="mb-6 text-center text-muted-foreground">
+          {translate('common.redirecting_home')}
+        </Text>
+        <Redirect href="/(protected)/(tabs)" />
+      </View>
+    );
+  }
+
+  return <ImageCaptureScreen config={config} />;
+}

package/2/apps/native/src/app/(root)/(protected)/analysis/[type]/loading.tsx

@@ -0,0 +1,50 @@
+import { Redirect, useLocalSearchParams } from 'expo-router';
+import React from 'react';
+import { View } from 'react-native';
+
+import { FocusAwareStatusBar, Text } from '@/components/ui';
+import { LoadingScreen } from '@/features/image-analyzer/app/loading-screen';
+import { getAnalysisFlowConfigSafe } from '@/features/image-analyzer/config/master-analysis-config';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+/**
+ * Dynamic loading route that loads the appropriate configuration
+ * based on the type parameter
+ */
+export default function DynamicLoadingRoute() {
+  const { type } = useLocalSearchParams<{ type: string }>();
+  const theme = useThemeConfig();
+
+  if (!type || typeof type !== 'string') {
+    return <Redirect href="/(protected)/(tabs)" />;
+  }
+
+  const config = getAnalysisFlowConfigSafe(type);
+
+  if (!config) {
+    // Invalid analysis type, redirect to home with a user-friendly message
+    return (
+      <View
+        style={{
+          flex: 1,
+          backgroundColor: theme.colors.background,
+          justifyContent: 'center',
+          alignItems: 'center',
+          padding: 20,
+        }}
+      >
+        <FocusAwareStatusBar />
+        <Text className="mb-4 text-center text-lg font-medium">
+          {translate('common.invalid_analysis_type')}
+        </Text>
+        <Text className="mb-6 text-center text-muted-foreground">
+          {translate('common.redirecting_home')}
+        </Text>
+        <Redirect href="/(protected)/(tabs)" />
+      </View>
+    );
+  }
+
+  return <LoadingScreen config={config} />;
+}

package/2/apps/native/src/app/(root)/(protected)/analysis/[type]/results.tsx

@@ -0,0 +1,2 @@
+// Re-export the results screen
+export { default } from '@/features/image-analyzer/app/results';

package/2/apps/native/src/app/(root)/(protected)/analysis/[type]/trait-details.tsx

@@ -0,0 +1,3 @@
+import TraitDetailsScreen from '@/features/image-analyzer/app/trait-details';
+
+export default TraitDetailsScreen;

package/2/apps/native/src/app/(root)/(protected)/audio-recorder/index.tsx

@@ -0,0 +1,5 @@
+import { RecordingListDemo } from '@/features/audio-recorder/demo/with-recording-list-demo';
+
+export default function AudioRecorderScreen() {
+  return <RecordingListDemo />;
+}

package/2/apps/native/src/app/(root)/(protected)/charts/index.tsx

@@ -0,0 +1,6 @@
+// vibefast license: c1e9fcd2-muhammad
+// vibefast license: c1e9fcd2-muhammad
+// vibefast license: c1e9fcd2-muhammad
+import ChartPreviewScreen from '@/features/charts/app/preview';
+
+export default ChartPreviewScreen;

package/2/apps/native/src/app/(root)/(protected)/chatbot/index.tsx

@@ -0,0 +1,2 @@
+// vibefast license: c1e9fcd2-muhammad
+export { default } from '@/features/chatbot/app';

package/2/apps/native/src/app/(root)/(protected)/image-generator/gallery.tsx

@@ -0,0 +1,3 @@
+import ImageGalleryScreen from '@/features/image-generator/app/gallery';
+
+export default ImageGalleryScreen;

package/2/apps/native/src/app/(root)/(protected)/image-generator/index.tsx

@@ -0,0 +1,3 @@
+import ImageGeneratorScreen from '@/features/image-generator/app';
+
+export default ImageGeneratorScreen;

package/2/apps/native/src/app/(root)/(protected)/paywall/index.tsx

@@ -0,0 +1,74 @@
+import { router, Stack } from 'expo-router';
+import React, { useMemo } from 'react';
+import { ScrollView, View } from 'react-native';
+
+import { FeatureButton, FocusAwareStatusBar } from '@/components/ui';
+import { translate } from '@/lib';
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export default function PaywallSelection() {
+  const theme = useThemeConfig();
+  const optionsTitle = translate('paywall.options_title');
+  const screenOptions = useMemo(
+    () => ({
+      title: optionsTitle,
+      headerShown: true,
+      headerBackButtonDisplayMode: 'generic' as const,
+    }),
+    [optionsTitle],
+  );
+
+  const paywallOptions = [
+    {
+      id: 'remote',
+      title: translate('paywall.remote_title'),
+      icon: '💳',
+      color: '#FBBF24', // Amber
+      description: translate('paywall.remote_description'),
+      route: '/paywall/remote',
+      testID: 'remote-paywall-option',
+    },
+    {
+      id: 'local',
+      title: translate('paywall.local_title'),
+      icon: '🛒',
+      color: '#10B981', // Emerald
+      description: translate('paywall.local_description'),
+      route: '/paywall/local',
+      testID: 'local-paywall-option',
+    },
+  ];
+
+  const handleOptionPress = (route: string) => {
+    router.push(route as any);
+  };
+
+  return (
+    <>
+      <FocusAwareStatusBar />
+      <Stack.Screen options={screenOptions} />
+      <ScrollView
+        style={{ backgroundColor: theme.colors.background }}
+        className="flex-1"
+        showsVerticalScrollIndicator={false}
+      >
+        <View className="px-6 py-8">
+          <View className="-mx-2 flex-row flex-wrap">
+            {paywallOptions.map((option) => (
+              <View key={option.id} className="w-1/2 px-2 pb-4">
+                <FeatureButton
+                  title={option.title}
+                  icon={option.icon}
+                  color={option.color}
+                  description={option.description}
+                  testID={option.testID}
+                  onPress={() => handleOptionPress(option.route)}
+                />
+              </View>
+            ))}
+          </View>
+        </View>
+      </ScrollView>
+    </>
+  );
+}

package/2/apps/native/src/app/(root)/(protected)/paywall/local.tsx

@@ -0,0 +1,25 @@
+import { Stack } from 'expo-router';
+import React, { useMemo } from 'react';
+
+import LocalPaywall from '@/features/payments/app/local-paywall';
+import { RevenueCatAdapter } from '@/features/payments/services/revenuecat-adapter';
+import { translate } from '@/lib';
+
+export default function LocalPaywallScreen() {
+  const paymentService = useMemo(() => new RevenueCatAdapter(), []);
+  const localTitle = translate('paywall.local_title');
+  const screenOptions = useMemo(
+    () => ({
+      title: localTitle,
+      headerShown: false,
+    }),
+    [localTitle],
+  );
+
+  return (
+    <>
+      <Stack.Screen options={screenOptions} />
+      <LocalPaywall paymentService={paymentService} />
+    </>
+  );
+}

package/2/apps/native/src/app/(root)/(protected)/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/2/apps/native/src/app/(root)/(protected)/quick-actions-demo/index.tsx

@@ -0,0 +1,32 @@
+/**
+ * Quick Actions Demo Screen
+ * Demonstrates the quick actions feature implementation
+ */
+
+import { Stack } from 'expo-router';
+import React, { useMemo } from 'react';
+import { ScrollView } from 'react-native';
+
+import { FocusAwareStatusBar } from '@/components/ui';
+import { QuickActionsDemo } from '@/features/quick-actions';
+
+export default function QuickActionsDemoScreen() {
+  const screenOptions = useMemo(
+    () => ({
+      title: 'Quick Actions Demo',
+      headerShown: true,
+    }),
+    [],
+  );
+
+  return (
+    <>
+      <FocusAwareStatusBar />
+      <Stack.Screen options={screenOptions} />
+
+      <ScrollView className="flex-1">
+        <QuickActionsDemo />
+      </ScrollView>
+    </>
+  );
+}

package/2/apps/native/src/app/(root)/(protected)/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;