vibefast-cli 0.2.4 → 0.3.1

package/2/apps/native/src/features/authentication/services/convex-auth.adapter.ts

@@ -0,0 +1,497 @@
+import { useAuthActions, useAuthToken } from '@convex-dev/auth/react';
+import { Env } from '@env';
+
+import { authApi } from '@/api-client/auth';
+import { handleError } from '@/components/ui/extras/handle-error';
+import type { User } from '@/core/auth/auth-service';
+import { getDeviceId } from '@/lib/hooks/use-device-identifier';
+
+/**
+
+Transform Convex user document to AuthService User type
+*/
+export const transformUser = (convexUser: any): User | null => {
+  if (!convexUser) return null;
+
+  return {
+    id: convexUser._id,
+    email: convexUser.email,
+    isAnonymous: convexUser.isAnonymous || false,
+  };
+};
+
+/**
+
+Hook-based functions that provide access to Convex authentication
+
+These need to be used within React components
+*/
+export const useConvexAuth = () => {
+  const { signIn: convexSignIn, signOut: convexSignOut } = useAuthActions();
+  const authToken = useAuthToken();
+  const userQuery = authApi.useViewer();
+
+  // Convex mutations and actions for OTP functionality
+  const signUpWithOtpAction = authApi.useSignUpWithOtp();
+  const verifyOtpAction = authApi.useVerifyOtpAndCreateUser();
+
+  // Convex functions for password reset functionality
+  const requestPasswordResetAction = authApi.useRequestPasswordReset();
+  const resetPasswordAction = authApi.useResetPassword();
+  const verifyPasswordResetTokenFn = authApi.useVerifyPasswordResetToken();
+
+  // Determine authentication state based on token presence and user data
+  const isLoading = userQuery === undefined;
+
+  // Auth is hydrated when we have user query data (token might be refreshing)
+  const authHydrated = userQuery !== undefined;
+
+  // For regular users: authToken exists AND user document exists
+  // For anonymous users: authToken exists BUT user document might be null
+  // FAST REFRESH FIX: If we have valid user data but token is temporarily undefined,
+  // assume authenticated (token refresh in progress)
+  const hasValidUserData = userQuery !== null && userQuery !== undefined;
+  const isAuthenticated =
+    (!!authToken && (userQuery !== null || !isLoading)) ||
+    (hasValidUserData && !isLoading);
+
+  // Debug logging for token issues
+  if (hasValidUserData && !authToken) {
+    console.log(
+      '[useConvexAuth] Token missing but user data exists - likely token refresh in progress',
+    );
+  }
+
+  const getCurrentUser = async (): Promise<User | null> => {
+    return transformUser(userQuery);
+  };
+
+  const signIn = async (provider: string, credentials?: any): Promise<User> => {
+    const deviceId = await getDeviceId();
+
+    try {
+      if (provider === 'password') {
+        const { email, password } = credentials;
+        await convexSignIn('password', {
+          email,
+          password,
+          flow: 'signIn',
+          deviceId,
+        });
+      } else {
+        await convexSignIn(provider as any, { ...credentials, deviceId });
+      }
+    } catch (error) {
+      // Handle authentication errors with user-friendly messages
+      const errorStr = error instanceof Error ? error.message : String(error);
+
+      // Map common Convex errors to user-friendly messages
+      let userMessage = 'Authentication failed';
+
+      if (errorStr.includes('InvalidAccountId')) {
+        userMessage =
+          'Invalid account. Please check your email or try signing up.';
+      } else if (
+        errorStr.includes('Invalid credentials') ||
+        errorStr.includes('auth.signIn')
+      ) {
+        userMessage = 'Invalid email or password. Please try again.';
+      } else if (
+        errorStr.includes('Too many requests') ||
+        errorStr.includes('rate limit')
+      ) {
+        userMessage =
+          'Too many login attempts. Please wait a moment and try again.';
+      } else if (
+        errorStr.includes('Network error') ||
+        errorStr.includes('fetch')
+      ) {
+        userMessage =
+          'Network error. Please check your internet connection and try again.';
+      } else if (errorStr.includes('Server Error')) {
+        userMessage =
+          'Server temporarily unavailable. Please try again in a moment.';
+      }
+
+      // Log the full technical error for debugging, but show user-friendly message
+      handleError(error, {
+        feature: 'auth.signIn',
+        fallbackMessage: userMessage,
+        toast: true, // Show the user-friendly toast
+      });
+
+      // Re-throw for UI layer to handle - this is required so login knows it failed
+      throw error;
+    }
+
+    // Return a temporary user object - the actual user state will be handled by AuthWatcher
+    return {
+      id: 'authenticating',
+      email: credentials?.email || '',
+      isAnonymous: provider === 'anonymous',
+    };
+  };
+
+  const signUpWithOtp = async (details: {
+    email: string;
+    password?: string;
+    name?: string;
+  }): Promise<{ navigateToOtp: boolean; error?: string }> => {
+    try {
+      const { email, password, name } = details;
+      if (!password) {
+        return {
+          navigateToOtp: false,
+          error: 'Password is required for signup',
+        };
+      }
+
+      const result = await signUpWithOtpAction({
+        email,
+        password,
+        name,
+      });
+
+      return { navigateToOtp: result.navigateToOtp };
+    } catch (error) {
+      // Sanitize technical errors for user-friendly display
+      const errorStr = error instanceof Error ? error.message : String(error);
+      let userMessage = 'Failed to sign up. Please try again.';
+
+      if (
+        errorStr.includes('Invalid email') ||
+        errorStr.includes('Email already exists') ||
+        (errorStr.includes('Account') && errorStr.includes('already exists'))
+      ) {
+        userMessage =
+          'This email is already registered. Please try signing in.';
+      } else if (
+        errorStr.includes('Too many requests') ||
+        errorStr.includes('rate limit')
+      ) {
+        userMessage =
+          'Too many signup attempts. Please wait a moment and try again.';
+      } else if (
+        errorStr.includes('Network error') ||
+        errorStr.includes('fetch')
+      ) {
+        userMessage =
+          'Network error. Please check your internet connection and try again.';
+      } else if (errorStr.includes('Server Error')) {
+        userMessage =
+          'Server temporarily unavailable. Please try again in a moment.';
+      }
+
+      // Log technical error for debugging but don't show toast (UI layer will handle)
+      handleError(error, {
+        feature: 'auth.signUpWithOtp',
+        fallbackMessage: userMessage,
+        toast: false, // Don't show toast - let UI layer handle it
+      });
+
+      return {
+        navigateToOtp: false,
+        error: userMessage,
+      };
+    }
+  };
+
+  const verifyOtp = async (otpDetails: {
+    email: string;
+    otp: string;
+    name?: string;
+    password: string;
+  }): Promise<{ success: boolean; user?: User; error?: string }> => {
+    try {
+      const result = await verifyOtpAction(otpDetails);
+
+      if (result.success) {
+        const currentUser = await getCurrentUser();
+        return { success: true, user: currentUser || undefined };
+      }
+      return { success: false, error: result.error || 'Invalid OTP' };
+    } catch (error) {
+      // Sanitize technical errors for user-friendly display
+      const errorStr = error instanceof Error ? error.message : String(error);
+      let userMessage = 'OTP verification failed. Please try again.';
+
+      if (errorStr.includes('Invalid OTP') || errorStr.includes('otp')) {
+        userMessage = 'Invalid verification code. Please check and try again.';
+      } else if (errorStr.includes('expired')) {
+        userMessage =
+          'Verification code has expired. Please request a new one.';
+      } else if (
+        errorStr.includes('Too many requests') ||
+        errorStr.includes('rate limit')
+      ) {
+        userMessage =
+          'Too many verification attempts. Please wait and try again.';
+      } else if (
+        errorStr.includes('Network error') ||
+        errorStr.includes('fetch')
+      ) {
+        userMessage =
+          'Network error. Please check your connection and try again.';
+      } else if (errorStr.includes('Server Error')) {
+        userMessage =
+          'Server temporarily unavailable. Please try again in a moment.';
+      }
+
+      // Log technical error for debugging
+      handleError(error, {
+        feature: 'auth.verifyOtp',
+        fallbackMessage: userMessage,
+      });
+
+      return {
+        success: false,
+        error: userMessage,
+      };
+    }
+  };
+
+  const resendOtp = async (
+    email: string,
+    password?: string,
+    name?: string,
+  ): Promise<{ success: boolean; error?: string }> => {
+    try {
+      const result = await signUpWithOtpAction({
+        email,
+        password: password || '',
+        name,
+      });
+      return {
+        success: result.navigateToOtp,
+        error: result.navigateToOtp ? undefined : 'Failed to resend OTP',
+      };
+    } catch (error) {
+      // Sanitize technical errors for user-friendly display
+      const errorStr = error instanceof Error ? error.message : String(error);
+      let userMessage = 'Failed to resend verification code. Please try again.';
+
+      if (
+        errorStr.includes('Too many requests') ||
+        errorStr.includes('rate limit')
+      ) {
+        userMessage =
+          'Too many requests. Please wait a moment before trying again.';
+      } else if (
+        errorStr.includes('Network error') ||
+        errorStr.includes('fetch')
+      ) {
+        userMessage =
+          'Network error. Please check your connection and try again.';
+      } else if (errorStr.includes('Server Error')) {
+        userMessage =
+          'Server temporarily unavailable. Please try again in a moment.';
+      }
+
+      // Log technical error for debugging
+      handleError(error, {
+        feature: 'auth.resendOtp',
+        fallbackMessage: userMessage,
+      });
+
+      return {
+        success: false,
+        error: userMessage,
+      };
+    }
+  };
+
+  const signOut = async (): Promise<void> => {
+    await convexSignOut();
+  };
+
+  const initiateGuestSession = async (): Promise<User> => {
+    const deviceId = await getDeviceId();
+
+    await convexSignIn('anonymous', { deviceId });
+
+    return { id: 'guest', email: '', isAnonymous: true };
+  };
+
+  const requestPasswordReset = async (
+    email: string,
+  ): Promise<{ success: boolean; error?: string }> => {
+    try {
+      const scheme = Env.SCHEME;
+      const resetUrlTemplate = `${scheme}://reset-password?token=__TOKEN__`;
+      const result = await requestPasswordResetAction({
+        email,
+        resetUrlTemplate,
+      });
+      return {
+        success: result.success,
+        error: result.success ? undefined : 'Failed to send reset email',
+      };
+    } catch (error) {
+      // Sanitize technical errors for user-friendly display
+      const errorStr = error instanceof Error ? error.message : String(error);
+      let userMessage =
+        'Failed to send password reset email. Please try again.';
+
+      if (
+        errorStr.includes('Email not found') ||
+        errorStr.includes('user not found')
+      ) {
+        userMessage =
+          "If this email is registered, you'll receive a reset link shortly.";
+      } else if (
+        errorStr.includes('Too many requests') ||
+        errorStr.includes('rate limit')
+      ) {
+        userMessage =
+          'Too many reset attempts. Please wait a moment and try again.';
+      } else if (
+        errorStr.includes('Network error') ||
+        errorStr.includes('fetch')
+      ) {
+        userMessage =
+          'Network error. Please check your connection and try again.';
+      } else if (errorStr.includes('Server Error')) {
+        userMessage =
+          'Server temporarily unavailable. Please try again in a moment.';
+      }
+
+      // Log technical error for debugging
+      handleError(error, {
+        feature: 'auth.requestPasswordReset',
+        fallbackMessage: userMessage,
+      });
+
+      return {
+        success: false,
+        error: userMessage,
+      };
+    }
+  };
+
+  const resetPassword = async (details: {
+    token: string;
+    newPassword: string;
+  }): Promise<{ success: boolean; error?: string }> => {
+    try {
+      const result = await resetPasswordAction({
+        token: details.token,
+        newPassword: details.newPassword,
+      });
+      return {
+        success: result.success,
+        error: result.success ? undefined : 'Failed to reset password',
+      };
+    } catch (error) {
+      // Sanitize technical errors for user-friendly display
+      const errorStr = error instanceof Error ? error.message : String(error);
+      let userMessage = 'Failed to reset password. Please try again.';
+
+      if (errorStr.includes('Invalid token') || errorStr.includes('expired')) {
+        userMessage =
+          'Reset link has expired or is invalid. Please request a new one.';
+      } else if (
+        errorStr.includes('Weak password') ||
+        errorStr.includes('password too weak')
+      ) {
+        userMessage =
+          'Password is too weak. Please choose a stronger password.';
+      } else if (
+        errorStr.includes('Too many requests') ||
+        errorStr.includes('rate limit')
+      ) {
+        userMessage =
+          'Too many reset attempts. Please wait a moment and try again.';
+      } else if (
+        errorStr.includes('Network error') ||
+        errorStr.includes('fetch')
+      ) {
+        userMessage =
+          'Network error. Please check your connection and try again.';
+      } else if (errorStr.includes('Server Error')) {
+        userMessage =
+          'Server temporarily unavailable. Please try again in a moment.';
+      }
+
+      // Log technical error for debugging
+      handleError(error, {
+        feature: 'auth.resetPassword',
+        fallbackMessage: userMessage,
+      });
+
+      return {
+        success: false,
+        error: userMessage,
+      };
+    }
+  };
+
+  const verifyPasswordResetToken = async (
+    token: string,
+  ): Promise<{ valid: boolean; error?: string }> => {
+    try {
+      const result = await verifyPasswordResetTokenFn(token);
+      return result;
+    } catch (error) {
+      // Sanitize technical errors for user-friendly display
+      const errorStr = error instanceof Error ? error.message : String(error);
+      let userMessage = 'Reset link is invalid or has expired.';
+
+      if (errorStr.includes('Invalid token') || errorStr.includes('expired')) {
+        userMessage =
+          'Reset link has expired or is invalid. Please request a new one.';
+      } else if (
+        errorStr.includes('Network error') ||
+        errorStr.includes('fetch')
+      ) {
+        userMessage =
+          'Network error. Please check your connection and try again.';
+      } else if (errorStr.includes('Server Error')) {
+        userMessage =
+          'Server temporarily unavailable. Please try again in a moment.';
+      }
+
+      // Log technical error for debugging
+      handleError(error, {
+        feature: 'auth.verifyPasswordResetToken',
+        fallbackMessage: userMessage,
+      });
+
+      return {
+        valid: false,
+        error: userMessage,
+      };
+    }
+  };
+
+  return {
+    getCurrentUser,
+    signIn,
+    signUpWithOtp,
+    verifyOtp,
+    resendOtp,
+    signOut,
+    initiateGuestSession,
+    requestPasswordReset,
+    resetPassword,
+    verifyPasswordResetToken,
+    isAuthenticated,
+    isLoading,
+    authHydrated,
+    userQuery,
+    transformUser,
+  };
+};
+
+/**
+
+ConvexAuthAdapter implements the AuthService interface using Convex authentication.
+
+This adapter bridges our abstract AuthService interface with @convex-dev/auth implementation.
+
+Note: This adapter is designed to work with React components. The methods here provide
+
+a bridge to the hook-based functionality but cannot be called directly outside of React
+
+component context. Use the AuthService via dependency injection in your React components.
+*/
+// Removed ConvexAuthAdapterClass in favor of useConvexAuth hook

package/2/apps/native/src/features/authentication/services/index.ts

@@ -0,0 +1,2 @@
+// Note: adapter file uses RN-specific exports without TS types
+export { useConvexAuth } from './convex-auth.adapter';

package/2/apps/native/src/features/charts/README.md

@@ -0,0 +1,185 @@
+# Chart Components
+
+A collection of beautiful, animated chart components built with React Native SVG, d3-shape, and React Native Reanimated.
+
+## 🚀 Features
+
+- **Fully Animated**: Smooth entrance animations with staggered effects
+- **Theme-Aware**: Automatically adapts to light/dark themes using `useThemeConfig`
+- **Responsive**: Horizontal scrolling support for charts that exceed screen width
+- **Accessible**: Proper contrast ratios and accessibility labels
+- **TypeScript**: Fully typed with comprehensive prop interfaces
+- **Customizable**: Extensive styling and behavior options
+
+## 📊 Available Charts
+
+### BarChart
+
+Animated bar charts with horizontal scrolling support.
+
+**Features:**
+
+- Staggered bar growth animations
+- Grid lines with proper contrast
+- Value labels above bars
+- Category labels below bars
+- Horizontal scrolling for wide datasets
+- Haptic feedback on press
+
+**Props:**
+
+- `data`: Array of chart data objects with `id`, `label`, `value`, and optional `color`
+- `height`: Chart height (default: 250)
+- `showValues`: Display values above bars (default: true)
+- `showLabels`: Display labels below bars (default: true)
+- `showGrid`: Show grid lines (default: true)
+- `valueFormatter`: Function to format displayed values
+- `barRadius`: Border radius of bars (default: 8)
+- `gap`: Space between bars (default: 12)
+
+### LineChart
+
+Smooth animated line charts with area fills and data points.
+
+**Features:**
+
+- Animated path drawing with stroke-dash effects
+- Curved or linear line styles
+- Optional area fills
+- Animated data points
+- Grid overlay support
+
+**Props:**
+
+- `data`: Array of numeric values
+- `labels`: Array of string labels for x-axis
+- `height`: Chart height (default: 200)
+- `curved`: Use curved lines (default: true)
+- `showArea`: Show area fill (default: true)
+- `showDots`: Show data points (default: true)
+- `valueFormatter`: Function to format displayed values
+
+### PieChart
+
+Animated pie charts with detailed legends.
+
+**Features:**
+
+- Slice-by-slice animation with staggered timing
+- Interactive legend with slide-in effects
+- Support for custom colors
+- Touch interactions with haptic feedback
+
+**Props:**
+
+- `data`: Array of chart data objects
+- `height`: Chart height (default: 300)
+- `radius`: Chart radius (auto-calculated if not provided)
+- `showLegend`: Display legend (default: true)
+- `valueFormatter`: Function to format displayed values
+
+### DonutChart
+
+Specialized donut charts with center labels.
+
+**Features:**
+
+- All PieChart features
+- Customizable inner radius ratio
+- Center total display for donut charts
+- Enhanced visual hierarchy
+
+**Props:**
+
+- All PieChart props except `innerRadius`
+- `innerRadiusRatio`: Inner radius as percentage of outer radius (default: 0.6)
+
+## 🎨 Theme Integration
+
+All charts use the `useThemeConfig` hook for consistent theming:
+
+```typescript
+// Text colors
+theme.colors.foreground; // Primary text
+theme.colors.mutedForeground; // Secondary text
+
+// Background colors
+theme.colors.background; // Chart background
+theme.colors.card; // Card backgrounds
+theme.colors.muted; // Legend item backgrounds
+
+// Border colors
+theme.colors.outline; // Grid lines and borders
+```
+
+## 🔧 Usage Examples
+
+### Bar Chart with Horizontal Scrolling
+
+```tsx
+<BarChart
+  data={salesData}
+  height={350}
+  showValues={true}
+  showGrid={true}
+  showLabels={true}
+  valueFormatter={(value) => `$${value.toLocaleString()}`}
+/>
+```
+
+### Animated Line Chart
+
+```tsx
+<LineChart
+  data={monthlyActiveUsers}
+  labels={monthLabels}
+  height={250}
+  curved={true}
+  showArea={true}
+  showDots={true}
+  valueFormatter={(value) => value.toLocaleString()}
+/>
+```
+
+### Donut Chart with Custom Styling
+
+```tsx
+<DonutChart
+  data={expensesData}
+  height={450}
+  radius={130}
+  innerRadiusRatio={0.65}
+  showLegend={true}
+  valueFormatter={(value) => `$${value}k`}
+/>
+```
+
+## 🎭 Animation Details
+
+- **Bar Charts**: Staggered bar growth with 100ms delays between bars
+- **Line Charts**: Stroke-dash animation followed by area fill and dot appearance
+- **Pie Charts**: Radial growth animation with 150ms delays between slices
+- **Legends**: Slide-in animations with opacity transitions
+
+## 📱 Responsive Design
+
+Charts automatically adapt to different screen sizes:
+
+- Bar charts enable horizontal scrolling when content exceeds screen width
+- Minimum bar widths ensure readability on all devices
+- Dynamic font sizing based on chart dimensions
+- Proper padding and margins for touch interactions
+
+## 🔄 Performance Optimizations
+
+- React Native Reanimated for smooth 60fps animations
+- Efficient re-renders using `useCallback` and `useMemo`
+- SVG path caching for complex shapes
+- Minimal re-animations on data updates
+
+## 🎯 Accessibility
+
+- High contrast color schemes for both light and dark themes
+- Proper accessibility labels and roles
+- Touch target sizes meet accessibility guidelines
+- Screen reader friendly value announcements