vibefast-cli 0.2.4 → 0.3.1

package/2/apps/native/src/lib/hooks/use-viewport-lazy-loading.tsx

@@ -0,0 +1,124 @@
+import { useCallback, useEffect, useRef, useState } from 'react';
+import {
+  Dimensions,
+  InteractionManager,
+  type LayoutChangeEvent,
+  View,
+  type ViewProps,
+} from 'react-native';
+
+interface UseViewportLazyLoadingProps {
+  threshold?: number;
+  delay?: number;
+}
+
+export const useViewportLazyLoading = ({
+  threshold = 0.1,
+  delay = 200,
+}: UseViewportLazyLoadingProps = {}) => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [hasBeenVisible, setHasBeenVisible] = useState(false);
+  const ref = useRef<View>(null);
+  const timeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const interactionHandle = useRef<ReturnType<
+    typeof InteractionManager.runAfterInteractions
+  > | null>(null);
+
+  const revealContent = useCallback(() => {
+    const node = ref.current;
+    if (!node) {
+      setIsVisible(true);
+      setHasBeenVisible(true);
+      return;
+    }
+
+    if (typeof node.measureInWindow === 'function') {
+      node.measureInWindow((_x, y, _width, height) => {
+        const windowHeight = Dimensions.get('window').height;
+        const thresholdPx = windowHeight * threshold;
+        const isWithinViewport = y < windowHeight + thresholdPx;
+        const isPartiallyVisible =
+          y + height > -thresholdPx && y < windowHeight + thresholdPx;
+
+        if (isWithinViewport || isPartiallyVisible) {
+          setIsVisible(true);
+          setHasBeenVisible(true);
+        }
+      });
+    } else {
+      setIsVisible(true);
+      setHasBeenVisible(true);
+    }
+  }, [threshold]);
+
+  const onLayout = useCallback(
+    (event: LayoutChangeEvent) => {
+      // Clear any existing timeout
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+
+      if (hasBeenVisible) return;
+      // Defer work until after interactions to reduce jank
+      interactionHandle.current = InteractionManager.runAfterInteractions(
+        () => {
+          if (delay && delay > 0) {
+            timeoutRef.current = setTimeout(() => {
+              if (!hasBeenVisible) {
+                revealContent();
+              }
+            }, delay);
+          } else {
+            revealContent();
+          }
+        },
+      );
+    },
+    [delay, hasBeenVisible, revealContent],
+  );
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current) {
+        clearTimeout(timeoutRef.current);
+      }
+      if (interactionHandle.current) {
+        // No direct cancel API; set flag via hasBeenVisible guard handles it
+        interactionHandle.current = null;
+      }
+    };
+  }, []);
+
+  return {
+    ref,
+    isVisible: isVisible || hasBeenVisible,
+    hasBeenVisible,
+    onLayout,
+  };
+};
+
+interface LazyViewProps extends ViewProps {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+  threshold?: number;
+  delay?: number;
+}
+
+export const LazyView: React.FC<LazyViewProps> = ({
+  children,
+  fallback,
+  threshold,
+  delay,
+  ...viewProps
+}) => {
+  const { ref, isVisible, onLayout } = useViewportLazyLoading({
+    threshold,
+    delay,
+  });
+
+  return (
+    <View ref={ref} onLayout={onLayout} {...viewProps}>
+      {isVisible ? children : fallback}
+    </View>
+  );
+};

package/2/apps/native/src/lib/i18n/index.tsx

@@ -0,0 +1,30 @@
+import * as Localization from 'expo-localization';
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import { I18nManager } from 'react-native';
+
+import { resources } from './resources';
+import { getLanguage } from './utils';
+
+export * from './utils';
+
+i18n.use(initReactI18next).init({
+  resources,
+  lng: getLanguage() || Localization.getLocales()[0]?.languageCode || 'en', // TODO: if you are not supporting multiple languages or languages with multiple directions you can set the default value to `en`
+  fallbackLng: 'en',
+  compatibilityJSON: 'v3', // By default React Native projects does not support Intl
+
+  // allows integrating dynamic values into translations.
+  interpolation: {
+    escapeValue: false, // escape passed in values to avoid XSS injections
+  },
+});
+
+// Is it a RTL language?
+export const isRTL: boolean = i18n.dir() === 'rtl';
+
+I18nManager.allowRTL(isRTL);
+I18nManager.forceRTL(isRTL);
+I18nManager.swapLeftAndRightInRTL(isRTL);
+
+export default i18n;

package/2/apps/native/src/lib/i18n/react-i18next.d.ts

@@ -0,0 +1,9 @@
+import type { resources } from './resources';
+
+// react-i18next versions higher than 11.11.0
+
+declare module 'react-i18next' {
+  interface CustomTypeOptions {
+    resources: (typeof resources)['en'];
+  }
+}

package/2/apps/native/src/lib/i18n/resources.ts

@@ -0,0 +1,25 @@
+import ar from '@/translations/ar.json';
+import de from '@/translations/de.json';
+import en from '@/translations/en.json';
+import es from '@/translations/es.json';
+import fr from '@/translations/fr.json';
+
+export const resources = {
+  en: {
+    translation: en,
+  },
+  ar: {
+    translation: ar,
+  },
+  es: {
+    translation: es,
+  },
+  fr: {
+    translation: fr,
+  },
+  de: {
+    translation: de,
+  },
+};
+
+export type Language = keyof typeof resources;

package/2/apps/native/src/lib/i18n/types.ts

@@ -0,0 +1,23 @@
+//  https://github.com/infinitered/ignite/blob/master/boilerplate/app/i18n/i18n.ts
+export type RecursiveKeyOf<TObj extends object> = {
+  [TKey in keyof TObj & (string | number)]: RecursiveKeyOfHandleValue<
+    TObj[TKey],
+    `${TKey}`
+  >;
+}[keyof TObj & (string | number)];
+
+type RecursiveKeyOfInner<TObj extends object> = {
+  [TKey in keyof TObj & (string | number)]: RecursiveKeyOfHandleValue<
+    TObj[TKey],
+    `['${TKey}']` | `.${TKey}`
+  >;
+}[keyof TObj & (string | number)];
+
+type RecursiveKeyOfHandleValue<
+  TValue,
+  Text extends string,
+> = TValue extends any[]
+  ? Text
+  : TValue extends object
+    ? Text | `${Text}${RecursiveKeyOfInner<TValue>}`
+    : Text;

package/2/apps/native/src/lib/i18n/utils.tsx

@@ -0,0 +1,112 @@
+// i18n.ts (Expo-managed, SDK 53)
+
+import type TranslateOptions from 'i18next';
+import i18n from 'i18next';
+import memoize from 'lodash.memoize';
+import { useCallback } from 'react';
+import { I18nManager, NativeModules, Platform } from 'react-native';
+import { useMMKVString } from 'react-native-mmkv';
+
+import { storage } from '../storage';
+import type { Language, resources } from './resources';
+import type { RecursiveKeyOf } from './types';
+
+type DefaultLocale = typeof resources.en.translation;
+export type TxKeyPath = RecursiveKeyOf<DefaultLocale>;
+
+export const LOCAL = 'local';
+
+export const getLanguage = () => storage.getString(LOCAL);
+
+const memoizedTranslate = memoize(
+  (key: TxKeyPath, options = undefined) =>
+    i18n.t(key, options) as unknown as string,
+  (key: TxKeyPath, options: typeof TranslateOptions) =>
+    options ? key + JSON.stringify(options) : key,
+);
+
+i18n.on('languageChanged', () => {
+  const cache = memoizedTranslate.cache as Map<unknown, unknown> & {
+    clear?: () => void;
+  };
+  if (typeof cache?.clear === 'function') {
+    cache.clear();
+  } else if (typeof (cache as any)?.delete === 'function') {
+    // Fallback for memoize cache implementations without clear()
+    for (const key of cache.keys()) {
+      cache.delete(key);
+    }
+  }
+});
+
+export const translate = (key: TxKeyPath, options = undefined): string =>
+  memoizedTranslate(key, options);
+
+// --- Utility: check if a language is RTL ---
+const isRTL = (lang: Language) => {
+  // Add more RTL languages here if needed
+  return lang === 'ar';
+};
+
+// --- Helper: robust reload across Expo/dev/web ---
+const reloadApp = async (reason?: string) => {
+  if (Platform.OS === 'web') {
+    console.log('Reloading web:', reason ?? '');
+    window.location.reload();
+    return;
+  }
+
+  try {
+    const Updates = await import('expo-updates');
+    console.log('Attempting Updates.reloadAsync():', reason ?? '');
+    await Updates.reloadAsync();
+    return;
+  } catch (e) {
+    console.warn(
+      'Updates.reloadAsync failed or unavailable, trying DevSettings.reload()',
+      e,
+    );
+  }
+
+  const devReload = (NativeModules as any)?.DevSettings?.reload;
+  if (typeof devReload === 'function') {
+    console.log('Reloading via DevSettings.reload():', reason ?? '');
+    devReload();
+    return;
+  }
+
+  console.warn('No reload mechanism available on this build.');
+};
+
+// --- Change language with conditional reload ---
+export const changeLanguage = async (lang: Language) => {
+  const desiredRTL = isRTL(lang);
+
+  // Change i18n strings immediately (components re-render automatically)
+  await i18n.changeLanguage(lang);
+
+  // Only reload if switching across LTR <-> RTL
+  if (I18nManager.isRTL !== desiredRTL) {
+    I18nManager.allowRTL(desiredRTL);
+    I18nManager.forceRTL(desiredRTL);
+    I18nManager.swapLeftAndRightInRTL(desiredRTL);
+    await reloadApp('Layout direction changed (LTR <-> RTL)');
+  }
+};
+
+// --- Hook for language persistence with MMKV ---
+export const useSelectedLanguage = () => {
+  const [language, setLang] = useMMKVString(LOCAL);
+
+  const setLanguage = useCallback(
+    async (lang: Language) => {
+      setLang(lang);
+      if (lang) {
+        await changeLanguage(lang);
+      }
+    },
+    [setLang],
+  );
+
+  return { language: language as Language, setLanguage };
+};

package/2/apps/native/src/lib/index.tsx

@@ -0,0 +1,3 @@
+export * from './hooks';
+export * from './i18n';
+export * from './utils';

package/2/apps/native/src/lib/state/auth-client-slice.ts

@@ -0,0 +1,34 @@
+import { create } from 'zustand';
+
+import type { User } from '@/core/auth/auth-service';
+
+/**
+ * Client-side authentication state slice
+ * This slice tracks the current authentication state and user data
+ * to enable the onAuthStateChanged functionality in the ConvexAuthAdapter
+ */
+interface AuthClientState {
+  currentUser: User | null;
+  isAuthenticated: boolean;
+  isLoading: boolean;
+
+  // Actions
+  setAuthState: (
+    user: User | null,
+    isAuthenticated: boolean,
+    isLoading: boolean,
+  ) => void;
+  clearAuthState: () => void;
+}
+
+export const useAuthClientStore = create<AuthClientState>((set) => ({
+  currentUser: null,
+  isAuthenticated: false,
+  isLoading: true,
+
+  setAuthState: (user, isAuthenticated, isLoading) =>
+    set({ currentUser: user, isAuthenticated, isLoading }),
+
+  clearAuthState: () =>
+    set({ currentUser: null, isAuthenticated: false, isLoading: false }),
+}));

package/2/apps/native/src/lib/state/index.ts

@@ -0,0 +1 @@
+export { useAuthClientStore } from './auth-client-slice';

package/2/apps/native/src/lib/storage.tsx

@@ -0,0 +1,7 @@
+import { MMKV } from 'react-native-mmkv';
+
+// Create and export a shared MMKV instance
+export const storage = new MMKV();
+
+// Export the MMKV instance for use in other parts of the app
+export { MMKV };

package/2/apps/native/src/lib/test-utils.tsx

@@ -0,0 +1,43 @@
+import '@shopify/flash-list/jestSetup';
+
+import { NavigationContainer } from '@react-navigation/native';
+import type { RenderOptions } from '@testing-library/react-native';
+import { render, userEvent } from '@testing-library/react-native';
+import type React from 'react';
+import type { ReactElement } from 'react';
+
+// Mock BottomSheetModalProvider for tests to avoid native dependencies
+const BottomSheetModalProvider: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => <>{children}</>;
+
+const createAppWrapper = () => {
+  return ({ children }: { children: React.ReactNode }) => (
+    <BottomSheetModalProvider>
+      <NavigationContainer>{children}</NavigationContainer>
+    </BottomSheetModalProvider>
+  );
+};
+
+const customRender = (
+  ui: ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>,
+) => {
+  const Wrapper = createAppWrapper(); // make sure we have a new wrapper for each render
+  return render(ui, { wrapper: Wrapper, ...options });
+};
+
+// use this if you want to test user events
+export const setup = (
+  ui: ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>,
+) => {
+  const Wrapper = createAppWrapper();
+  return {
+    user: userEvent.setup(),
+    ...render(ui, { wrapper: Wrapper, ...options }),
+  };
+};
+
+export * from '@testing-library/react-native';
+export { customRender as render };

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

@@ -0,0 +1,108 @@
+import type { Theme } from '@react-navigation/native';
+import {
+  DarkTheme as _DarkTheme,
+  DefaultTheme,
+} from '@react-navigation/native';
+import { useColorScheme } from 'nativewind';
+
+import colors from '@/components/ui/colors';
+
+// Extended theme type with semantic colors and raw colors merged
+type ExtendedTheme = Theme & {
+  colors: Theme['colors'] & {
+    foreground: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    success: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    outline: string;
+    input: string;
+    primaryForeground: string;
+    warning: string;
+  } & typeof colors; // Merge all colors from colors.js
+};
+
+const DarkTheme: ExtendedTheme = {
+  ..._DarkTheme,
+  colors: {
+    // All raw colors from colors.js for direct access
+    ...colors,
+    // React Navigation specific colors
+    primary: colors.primary[200],
+    background: colors.neutral[950],
+    text: colors.neutral[100],
+    border: colors.neutral[600],
+    card: colors.neutral[900],
+    notification: colors.primary[200],
+    // Semantic colors for dark theme
+    foreground: colors.neutral[100],
+    muted: colors.neutral[800],
+    mutedForeground: colors.neutral[400],
+    accent: colors.neutral[800],
+    accentForeground: colors.neutral[100],
+    success: colors.success[500],
+    destructive: colors.danger[500],
+    destructiveForeground: colors.white,
+    secondary: colors.neutral[800],
+    secondaryForeground: colors.neutral[100],
+    outline: colors.neutral[600],
+    input: colors.neutral[700],
+    primaryForeground: colors.white,
+    warning: colors.warning[500],
+  } as any,
+};
+
+const LightTheme: ExtendedTheme = {
+  ...DefaultTheme,
+  colors: {
+    // All raw colors from colors.js for direct access
+    ...colors,
+    // React Navigation specific colors
+    primary: colors.primary[400],
+    background: colors.white,
+    text: colors.neutral[900],
+    border: colors.neutral[300],
+    card: colors.white,
+    notification: colors.primary[400],
+    // Semantic colors for light theme
+    foreground: colors.neutral[900],
+    muted: colors.neutral[200],
+    mutedForeground: colors.neutral[500],
+    accent: colors.neutral[100],
+    accentForeground: colors.neutral[900],
+    success: colors.success[500],
+    destructive: colors.danger[500],
+    destructiveForeground: colors.white,
+    secondary: colors.neutral[100],
+    secondaryForeground: colors.neutral[900],
+    outline: colors.neutral[300],
+    input: colors.neutral[200],
+    primaryForeground: colors.white,
+    warning: colors.warning[500],
+  } as any,
+};
+
+export function useThemeConfig() {
+  const { colorScheme } = useColorScheme();
+
+  const theme = colorScheme === 'dark' ? DarkTheme : LightTheme;
+
+  // Debug: Log some color values to verify they're working
+  // console.log('Theme colors debug:', {
+  //   isDark: colorScheme === 'dark',
+  //   foreground: theme.colors.foreground,
+  //   background: theme.colors.background,
+  //   primary: theme.colors.primary,
+  //   secondary: theme.colors.secondary,
+  //   muted: theme.colors.muted,
+  // });
+
+  return theme;
+}
+
+export type { ExtendedTheme };

package/2/apps/native/src/lib/utils.ts

@@ -0,0 +1,29 @@
+import { type ClassValue, clsx } from 'clsx';
+import { Linking } from 'react-native';
+import { twMerge } from 'tailwind-merge';
+import type { StoreApi, UseBoundStore } from 'zustand';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+export function openLinkInBrowser(url: string) {
+  Linking.canOpenURL(url).then((canOpen) => canOpen && Linking.openURL(url));
+}
+
+type WithSelectors<S> = S extends { getState: () => infer T }
+  ? S & { use: { [K in keyof T]: () => T[K] } }
+  : never;
+
+export const createSelectors = <S extends UseBoundStore<StoreApi<object>>>(
+  _store: S,
+) => {
+  const store = _store as WithSelectors<typeof _store>;
+  store.use = {};
+  for (const k of Object.keys(store.getState())) {
+    (store.use as Record<string, () => unknown>)[k] = () =>
+      store((s) => s[k as keyof typeof s]);
+  }
+
+  return store;
+};

package/2/apps/native/src/polyfills.ts

@@ -0,0 +1,61 @@
+// src/polyfills.ts
+import 'react-native-get-random-values';
+import 'react-native-url-polyfill/auto';
+
+import { Platform } from 'react-native';
+
+if (Platform.OS !== 'web') {
+  // --- WHATWG Streams (ReadableStream/TransformStream) ---
+  if (
+    typeof (globalThis as any).ReadableStream === 'undefined' ||
+    typeof (globalThis as any).TransformStream === 'undefined'
+  ) {
+    let loaded = false;
+    try {
+      // eslint-disable-next-line @typescript-eslint/no-require-imports
+      require('web-streams-polyfill/polyfill');
+      loaded = true;
+    } catch {
+      try {
+        // Fallback path that Metro always sees
+
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        require('web-streams-polyfill/dist/polyfill');
+        loaded = true;
+      } catch {
+        // Last-resort: ponyfill and assign to globals
+
+        // eslint-disable-next-line @typescript-eslint/no-require-imports
+        const streams = require('web-streams-polyfill/ponyfill/es2018');
+        (globalThis as any).ReadableStream = streams.ReadableStream;
+        (globalThis as any).TransformStream = streams.TransformStream;
+        (globalThis as any).WritableStream = streams.WritableStream;
+        loaded = true;
+      }
+    }
+    if (!loaded) {
+      // Extremely unlikely, but let's surface it loudly in dev
+      console.error(
+        '[polyfills] Failed to load web-streams-polyfill via all known paths.',
+      );
+    }
+  }
+
+  // --- TextEncoder/TextDecoder ---
+  if (
+    typeof (globalThis as any).TextDecoder !== 'function' ||
+    typeof (globalThis as any).TextEncoder !== 'function'
+  ) {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const { TextDecoder, TextEncoder } = require('text-encoding');
+    (globalThis as any).TextDecoder = TextDecoder;
+    (globalThis as any).TextEncoder = TextEncoder;
+  }
+
+  // --- structuredClone (usually present on Hermes/Expo 53) ---
+  if (typeof globalThis.structuredClone !== 'function') {
+    // eslint-disable-next-line @typescript-eslint/no-require-imports
+    const sc = require('@ungap/structured-clone').default;
+    (globalThis as any).structuredClone = sc;
+  }
+}

package/2/apps/native/src/providers/convex-provider.tsx

@@ -0,0 +1,31 @@
+import { ConvexAuthProvider } from '@convex-dev/auth/react';
+import { ConvexProvider } from 'convex/react';
+import * as SecureStore from 'expo-secure-store';
+import type { ReactNode } from 'react';
+
+import { convex } from '@/api-client/client';
+
+// Create secure storage adapter for React Native
+const secureStorageAdapter = {
+  getItem: (key: string) => SecureStore.getItemAsync(key),
+  setItem: (key: string, value: string) => SecureStore.setItemAsync(key, value),
+  removeItem: (key: string) => SecureStore.deleteItemAsync(key),
+};
+
+interface ConvexProvidersProps {
+  children: ReactNode;
+}
+
+/**
+ * Convex providers that handle real-time database and authentication
+ * Includes secure storage adapter for React Native
+ */
+export function ConvexProviders({ children }: ConvexProvidersProps) {
+  return (
+    <ConvexProvider client={convex}>
+      <ConvexAuthProvider client={convex} storage={secureStorageAdapter}>
+        {children}
+      </ConvexAuthProvider>
+    </ConvexProvider>
+  );
+}

package/2/apps/native/src/providers/index.tsx

@@ -0,0 +1,6 @@
+export { ConvexProviders } from './convex-provider';
+export { AnalyticsProvider } from './posthog-provider';
+export { RootProviders } from './root-providers';
+export { SentryProvider } from './sentry-provider';
+export { SplashScreenProvider } from './splash-screen-provider';
+export { AppThemeProvider } from './theme-provider';