vibefast-cli 0.2.4 → 0.3.1

package/2/apps/native/src/lib/hooks/use-device-identifier.tsx

@@ -0,0 +1,80 @@
+import * as Crypto from 'expo-crypto';
+import * as SecureStore from 'expo-secure-store';
+import { useEffect, useState } from 'react';
+
+import { storage } from '@/core/storage/mmkv';
+
+const DEVICE_ID_KEY = 'vibefast_device_id';
+const DEVICE_ID_FALLBACK_KEY = 'vibefast_device_id_fallback';
+
+const persistFallbackDeviceId = (value: string) => {
+  try {
+    storage.set(DEVICE_ID_FALLBACK_KEY, value);
+  } catch (error) {
+    console.warn('[useDeviceIdentifier] Failed to persist fallback ID', error);
+  }
+};
+
+const getFallbackDeviceId = (): string => {
+  const existing = storage.getString(DEVICE_ID_FALLBACK_KEY);
+  if (existing) {
+    return existing;
+  }
+  const fallbackId = `fallback_${Crypto.randomUUID()}`;
+  persistFallbackDeviceId(fallbackId);
+  return fallbackId;
+};
+
+/**
+ * Hook to generate and persist a unique device identifier
+ * @returns {string | null} The device ID or null if still loading
+ */
+export const useDeviceIdentifier = (): string | null => {
+  const [deviceId, setDeviceId] = useState<string | null>(null);
+
+  useEffect(() => {
+    const getOrCreateDeviceId = async (): Promise<void> => {
+      try {
+        // Try to get existing device ID
+        let storedDeviceId = await SecureStore.getItemAsync(DEVICE_ID_KEY);
+
+        if (!storedDeviceId) {
+          // Generate new device ID if none exists
+          storedDeviceId = Crypto.randomUUID();
+          await SecureStore.setItemAsync(DEVICE_ID_KEY, storedDeviceId);
+        }
+
+        persistFallbackDeviceId(storedDeviceId);
+        setDeviceId(storedDeviceId);
+      } catch (error) {
+        console.error('Failed to get/create device ID:', error);
+        setDeviceId(getFallbackDeviceId());
+      }
+    };
+
+    getOrCreateDeviceId();
+  }, []);
+
+  return deviceId;
+};
+
+/**
+ * Helper function to get device ID directly (non-hook version)
+ * @returns {Promise<string>} The device ID
+ */
+export const getDeviceId = async (): Promise<string> => {
+  try {
+    let storedDeviceId = await SecureStore.getItemAsync(DEVICE_ID_KEY);
+
+    if (!storedDeviceId) {
+      storedDeviceId = Crypto.randomUUID();
+      await SecureStore.setItemAsync(DEVICE_ID_KEY, storedDeviceId);
+    }
+    persistFallbackDeviceId(storedDeviceId);
+
+    return storedDeviceId;
+  } catch (error) {
+    console.error('Failed to get/create device ID:', error);
+    return getFallbackDeviceId();
+  }
+};

package/2/apps/native/src/lib/hooks/use-gradual-animation.ts

@@ -0,0 +1,28 @@
+import { useKeyboardHandler } from 'react-native-keyboard-controller';
+import { useSharedValue } from 'react-native-reanimated';
+
+const DEFAULT_OFFSET = 0;
+
+/**
+ * Hook for gradual keyboard animation using react-native-keyboard-controller
+ * @param offset - The offset to add to the keyboard height (default: 42)
+ * @returns An object with the animated height value
+ */
+export const useGradualAnimation = (offset: number = DEFAULT_OFFSET) => {
+  const totalOffset = offset;
+
+  const height = useSharedValue(totalOffset);
+
+  useKeyboardHandler(
+    {
+      onMove: (e) => {
+        'worklet';
+        height.value =
+          e.height > 0 ? Math.max(e.height + offset, totalOffset) : totalOffset;
+      },
+    },
+    [offset],
+  );
+
+  return { height };
+};

package/2/apps/native/src/lib/hooks/use-is-first-time.tsx

@@ -0,0 +1,25 @@
+import { useCallback, useState } from 'react';
+
+import { storage } from '../storage'; // ⬅︎ make sure this exports ONE shared MMKV instance
+
+const KEY = 'IS_FIRST_TIME';
+
+/**
+ * useIsFirstTime
+ *  – first element is always boolean (no undefined)
+ *  – second element marks onboarding complete and persists it synchronously
+ */
+export const useIsFirstTime = () => {
+  // Read once at mount; if the key doesn’t exist we treat it as first-time.
+  const [isFirstTime, setIsFirstTime] = useState<boolean>(
+    () => storage.getBoolean(KEY) ?? true,
+  );
+
+  const completeOnboarding = useCallback(() => {
+    console.log('[useIsFirstTime] Completing onboarding…');
+    storage.set(KEY, false); // persist
+    setIsFirstTime(false); // trigger React re-render
+  }, []);
+
+  return [isFirstTime, completeOnboarding] as const;
+};

package/2/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/2/apps/native/src/lib/hooks/use-navigation-options.tsx

@@ -0,0 +1,87 @@
+import type { NativeStackNavigationOptions } from '@react-navigation/native-stack';
+import { useMemo } from 'react';
+import { Platform } from 'react-native';
+
+import { useThemeConfig } from '@/lib/use-theme-config';
+
+export const useNavigationOptions = () => {
+  const theme = useThemeConfig();
+
+  return useMemo(() => {
+    /**
+     * Root options - needed for base stack navigator
+     * Prevents white flash when navigating in dark mode
+     */
+    const root: NativeStackNavigationOptions = {
+      contentStyle: {
+        backgroundColor: theme.colors.background,
+      },
+    };
+
+    /**
+     * Base options applied to most screens
+     */
+    const base: NativeStackNavigationOptions = {
+      headerTintColor: theme.colors.text,
+      headerTitleAlign: 'center',
+      headerLargeTitleShadowVisible: false,
+      headerShadowVisible: false,
+      headerBackButtonDisplayMode: 'minimal',
+      headerLargeTitleStyle: {
+        color: theme.colors.text,
+      },
+      contentStyle: { backgroundColor: theme.colors.background },
+    };
+
+    const standard: NativeStackNavigationOptions = {
+      ...base,
+      headerTransparent: false,
+      headerStyle: {
+        backgroundColor: theme.colors.background,
+      },
+    };
+
+    const scrollable: NativeStackNavigationOptions = {
+      ...base,
+      headerTransparent: Platform.OS === 'ios',
+      headerStyle: {
+        backgroundColor:
+          Platform.OS === 'ios' ? 'transparent' : theme.colors.background,
+      },
+    };
+
+    const modal: NativeStackNavigationOptions = {
+      ...base,
+      headerStyle: {
+        backgroundColor:
+          Platform.OS === 'ios' ? 'transparent' : theme.colors.background,
+      },
+      presentation: 'modal' as any,
+    };
+
+    return {
+      root,
+      standard,
+      scrollable,
+      modal,
+    };
+  }, [theme]);
+};
+
+/**
+ * Helper hook for screen components to merge with base navigation options
+ * Use this in screen components that override Stack.Screen options
+ */
+export const useScreenOptions = (
+  overrides: NativeStackNavigationOptions = {},
+  variant: 'standard' | 'scrollable' = 'standard',
+): NativeStackNavigationOptions => {
+  const options = useNavigationOptions();
+  const baseOptions =
+    variant === 'scrollable' ? options.scrollable : options.standard;
+
+  return {
+    ...baseOptions,
+    ...overrides,
+  };
+};

package/2/apps/native/src/lib/hooks/use-push-notifications.ts

@@ -0,0 +1,250 @@
+import { api } from '@vibefast/backend/_generated/api';
+import { useMutation, useQuery } from 'convex/react';
+import Constants from 'expo-constants';
+import * as Device from 'expo-device';
+import * as Notifications from 'expo-notifications';
+import { useCallback, useState } from 'react';
+import { Alert, Linking, Platform } from 'react-native';
+
+import { handleError } from '@/components/ui/extras/handle-error';
+import { error as logError, info } from '@/core/logging';
+import { storage } from '@/core/storage';
+import { useConvexAuth } from '@/features/authentication/services';
+
+/**
+ * Custom hook for managing push notifications
+ */
+export const usePushNotifications = () => {
+  const [isRegistering, setIsRegistering] = useState(false);
+  const { isAuthenticated } = useConvexAuth();
+
+  // Convex hooks
+  const recordPushToken = useMutation(
+    api.pushNotificationFunctions.recordPushToken,
+  );
+  const toggleNotifications = useMutation(
+    api.pushNotificationFunctions.togglePushNotifications,
+  );
+  // Only query notification status when authenticated to avoid race conditions
+  const notificationStatus = useQuery(
+    api.pushNotificationFunctions.getNotificationStatus,
+    isAuthenticated ? {} : 'skip',
+  );
+
+  /**
+   * Registers the device for push notifications
+   */
+  const registerForPushNotificationsAsync = useCallback(async (): Promise<
+    string | null
+  > => {
+    setIsRegistering(true);
+
+    try {
+      info('Starting registration process', {
+        feature: 'notifications.register',
+      });
+
+      // Check if running on physical device
+      if (!Device.isDevice) {
+        info('Running on simulator, not a physical device', {
+          feature: 'notifications.register',
+        });
+        Alert.alert(
+          'Push Notifications',
+          'Push notifications only work on physical devices, not in simulators.',
+        );
+        return null;
+      }
+
+      info('Running on physical device', { feature: 'notifications.register' });
+
+      // Set notification channel for Android
+      if (Platform.OS === 'android') {
+        info('Setting up Android notification channel', {
+          feature: 'notifications.register',
+        });
+        await Notifications.setNotificationChannelAsync('default', {
+          name: 'default',
+          importance: Notifications.AndroidImportance.MAX,
+          vibrationPattern: [0, 250, 250, 250],
+          lightColor: '#FF231F7C',
+        });
+      }
+
+      // Check existing permissions
+      info('Checking existing permissions', {
+        feature: 'notifications.register',
+      });
+      const { status: existingStatus } =
+        await Notifications.getPermissionsAsync();
+      info('Existing permission status', {
+        feature: 'notifications.register',
+        status: existingStatus,
+      });
+      let finalStatus = existingStatus;
+
+      // Request permissions if not granted
+      if (existingStatus !== 'granted') {
+        info('Requesting permissions', { feature: 'notifications.register' });
+        const { status } = await Notifications.requestPermissionsAsync();
+        finalStatus = status;
+        info('Permission request result', {
+          feature: 'notifications.register',
+          status,
+        });
+      }
+
+      // Handle permission denial
+      if (finalStatus !== 'granted') {
+        info('Permissions not granted', {
+          feature: 'notifications.register',
+          status: finalStatus,
+        });
+
+        // Store the permission status to avoid repeatedly asking
+        storage.set('PUSH_NOTIFICATIONS_DENIED', true);
+
+        if (!storage.getBoolean('PUSH_NOTIFICATIONS_NEVER_ASK')) {
+          Alert.alert(
+            'Permission Required',
+            'Push notifications are disabled. Enable them to receive important updates and notifications.',
+            [
+              {
+                text: "Don't Ask Again",
+                onPress: () => {
+                  storage.set('PUSH_NOTIFICATIONS_NEVER_ASK', true);
+                },
+                style: 'destructive',
+              },
+              { text: 'Not Now', style: 'cancel' },
+              {
+                text: 'Open Settings',
+                onPress: async () => {
+                  if (Platform.OS === 'ios') {
+                    await Linking.openURL('app-settings:');
+                  } else {
+                    await Linking.openSettings();
+                  }
+                },
+              },
+            ],
+          );
+        }
+        return null;
+      }
+
+      info('Permissions granted, getting project ID', {
+        feature: 'notifications.register',
+      });
+
+      // Get project ID
+      const projectId =
+        Constants?.expoConfig?.extra?.eas?.projectId ??
+        Constants?.easConfig?.projectId;
+
+      info('Project ID found', {
+        feature: 'notifications.register',
+        projectId,
+      });
+      info('Constants.expoConfig?.extra', {
+        feature: 'notifications.register',
+        extra: Constants?.expoConfig?.extra,
+      });
+      info('Constants.easConfig', {
+        feature: 'notifications.register',
+        easConfig: Constants?.easConfig,
+      });
+
+      if (!projectId) {
+        logError(new Error('Project ID not found in config'), {
+          feature: 'notifications.register',
+          expoConfig: Constants?.expoConfig,
+          easConfig: Constants?.easConfig,
+        });
+        Alert.alert(
+          'Configuration Error',
+          'Push notifications are not properly configured for this app.',
+        );
+        return null;
+      }
+
+      info('Getting Expo push token', { feature: 'notifications.register' });
+      // Get push token
+      const pushTokenString = (
+        await Notifications.getExpoPushTokenAsync({
+          projectId,
+        })
+      ).data;
+
+      info('Push token obtained', {
+        feature: 'notifications.register',
+        tokenPrefix: pushTokenString.substring(0, 20) + '...',
+      });
+
+      // Record token with backend
+      info('Recording token with backend', {
+        feature: 'notifications.register',
+      });
+      await recordPushToken({ token: pushTokenString });
+      info('Token recorded successfully', {
+        feature: 'notifications.register',
+      });
+
+      return pushTokenString;
+    } catch (error) {
+      handleError(error, {
+        feature: 'notifications.register',
+        fallbackMessage: 'Failed to register for push notifications.',
+        toast: false,
+      });
+      Alert.alert(
+        'Registration Failed',
+        'Failed to register for push notifications. Please try again.',
+      );
+      return null;
+    } finally {
+      setIsRegistering(false);
+    }
+  }, [recordPushToken]);
+
+  /**
+   * Toggles push notification settings
+   */
+  const handleToggleNotifications = useCallback(
+    async (enabled: boolean) => {
+      try {
+        if (enabled) {
+          // First register for notifications to get the token
+          const token = await registerForPushNotificationsAsync();
+          if (token) {
+            // Then unpause notifications
+            await toggleNotifications({ paused: false });
+          }
+        } else {
+          // Pause notifications (but keep the token)
+          await toggleNotifications({ paused: true });
+        }
+      } catch (error) {
+        handleError(error, {
+          feature: 'notifications.toggle',
+          fallbackMessage: 'Failed to update notification settings.',
+          toast: false,
+        });
+        Alert.alert(
+          'Settings Error',
+          'Failed to update notification settings. Please try again.',
+        );
+        throw error; // Re-throw to allow component to handle state reversion
+      }
+    },
+    [registerForPushNotificationsAsync, toggleNotifications],
+  );
+
+  return {
+    registerForPushNotificationsAsync,
+    handleToggleNotifications,
+    isRegistering,
+    notificationStatus,
+    isStatusLoading: notificationStatus === undefined,
+  };
+};

package/2/apps/native/src/lib/hooks/use-responsive-size.tsx

@@ -0,0 +1,37 @@
+import { useEffect, useState } from 'react';
+import { Dimensions, type ScaledSize } from 'react-native';
+
+/**
+ * Hook to determine if the device is a tablet based on screen width
+ * @returns object with isTablet boolean
+ */
+export function useResponsiveSize() {
+  const [windowSize, setWindowSize] = useState<ScaledSize>(
+    Dimensions.get('window'),
+  );
+
+  useEffect(() => {
+    const handleChange = ({ window }: { window: ScaledSize }) => {
+      setWindowSize(window);
+    };
+
+    const subscription = Dimensions.addEventListener('change', handleChange);
+
+    return () => {
+      if (typeof subscription?.remove === 'function') {
+        subscription.remove();
+      }
+      // Note: removeEventListener is deprecated but kept for compatibility
+      // Legacy removeEventListener - kept for backward compatibility only
+      // Note: This is deprecated but kept for older React Native versions
+      if ((Dimensions as any).removeEventListener) {
+        (Dimensions as any).removeEventListener('change', handleChange as any);
+      }
+    };
+  }, []);
+
+  // Consider devices with width >= 768 as tablets
+  const isTablet = windowSize.width >= 768;
+
+  return { isTablet };
+}

package/2/apps/native/src/lib/hooks/use-selected-theme.tsx

@@ -0,0 +1,38 @@
+import { colorScheme, useColorScheme } from 'nativewind';
+import React from 'react';
+import { useMMKVString } from 'react-native-mmkv';
+
+import { storage } from '../storage';
+
+const SELECTED_THEME = 'SELECTED_THEME';
+export type ColorSchemeType = 'light' | 'dark' | 'system';
+/**
+ * this hooks should only be used while selecting the theme
+ * This hooks will return the selected theme which is stored in MMKV
+ * selectedTheme should be one of the following values 'light', 'dark' or 'system'
+ * don't use this hooks if you want to use it to style your component based on the theme use useColorScheme from nativewind instead
+ *
+ */
+export const useSelectedTheme = () => {
+  const { setColorScheme } = useColorScheme();
+  const [theme, _setTheme] = useMMKVString(SELECTED_THEME, storage);
+
+  const setSelectedTheme = React.useCallback(
+    (t: ColorSchemeType) => {
+      setColorScheme(t);
+      _setTheme(t);
+    },
+    [setColorScheme, _setTheme],
+  );
+
+  const selectedTheme = (theme ?? 'system') as ColorSchemeType;
+  return { selectedTheme, setSelectedTheme } as const;
+};
+// to be used in the root file to load the selected theme from MMKV
+export const loadSelectedTheme = () => {
+  const theme = storage.getString(SELECTED_THEME);
+  if (theme !== undefined) {
+    console.log('theme', theme);
+    colorScheme.set(theme as ColorSchemeType);
+  }
+};