vibefast-cli 0.7.0 → 0.7.1

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

@@ -1,124 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,23 +0,0 @@
-//  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

@@ -1,112 +0,0 @@
-// 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

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

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

@@ -1,34 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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

@@ -1,29 +0,0 @@
-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

@@ -1,61 +0,0 @@
-// 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

@@ -1,31 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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';