vibefast-cli 0.2.4 → 0.3.1

package/2/apps/native/src/features/audio-recorder/demo/with-recording-list-demo.tsx

@@ -0,0 +1,82 @@
+import { useEffect, useState } from 'react';
+import { ActivityIndicator, View } from 'react-native';
+import { MMKV } from 'react-native-mmkv';
+
+import { AudioRecorder, type Recording, RecordingList } from '../components';
+
+const RECORDINGS_STORAGE_KEY = 'audio_recordings';
+const storage = new MMKV();
+
+export function RecordingListDemo() {
+  const [recordings, setRecordings] = useState<Recording[]>([]);
+  const [isLoading, setIsLoading] = useState(true);
+
+  // Load recordings from storage on component mount
+  useEffect(() => {
+    loadRecordings();
+  }, []);
+
+  const loadRecordings = () => {
+    try {
+      const storedRecordings = storage.getString(RECORDINGS_STORAGE_KEY);
+      if (storedRecordings) {
+        const parsedRecordings = JSON.parse(storedRecordings);
+        setRecordings(parsedRecordings);
+      }
+    } catch (error) {
+      console.error('Failed to load recordings:', error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const saveRecordings = (newRecordings: Recording[]) => {
+    try {
+      storage.set(RECORDINGS_STORAGE_KEY, JSON.stringify(newRecordings));
+    } catch (error) {
+      console.error('Failed to save recordings:', error);
+    }
+  };
+
+  const handleRecordingComplete = (uri: string) => {
+    const newRecording: Recording = {
+      uri,
+      name: `Recording ${recordings.length + 1}`,
+      date: new Date().toLocaleString(),
+    };
+    const updatedRecordings = [...recordings, newRecording];
+    setRecordings(updatedRecordings);
+    saveRecordings(updatedRecordings);
+  };
+
+  const handleDeleteRecording = (uri: string) => {
+    const updatedRecordings = recordings.filter((rec) => rec.uri !== uri);
+    setRecordings(updatedRecordings);
+    saveRecordings(updatedRecordings);
+  };
+
+  if (isLoading) {
+    return (
+      <View
+        style={{
+          flex: 1,
+          width: '100%',
+          justifyContent: 'center',
+          alignItems: 'center',
+        }}
+      >
+        <ActivityIndicator size="large" />
+      </View>
+    );
+  }
+
+  return (
+    <View style={{ flex: 1, width: '100%', gap: 16 }}>
+      <AudioRecorder onRecordingComplete={handleRecordingComplete} />
+      <RecordingList
+        recordings={recordings}
+        onDeleteRecording={handleDeleteRecording}
+      />
+    </View>
+  );
+}

package/2/apps/native/src/features/authentication/components/auth-watcher.tsx

@@ -0,0 +1,115 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { authApi } from '@/api-client/auth';
+import { useConvexAuth } from '@/features/authentication/services';
+import { transformUser } from '@/features/authentication/services/convex-auth.adapter';
+import { useDeviceIdentifier } from '@/lib/hooks';
+import { useAuthClientStore } from '@/lib/state';
+
+/**
+ * AuthWatcher component that observes Convex authentication state
+ * and updates the client-side auth store for onAuthStateChanged functionality.
+ *
+ * This component should be rendered at the root level of the app.
+ */
+export const AuthWatcher = () => {
+  const { userQuery, isAuthenticated, isLoading } = useConvexAuth();
+  const { setAuthState } = useAuthClientStore();
+  const deviceId = useDeviceIdentifier();
+  const performGrantCheck = authApi.useCheckAndGrantInitialTier();
+  const previousAuthSnapshotRef = useRef<{
+    userId: string | null;
+    isAuthenticated: boolean;
+    isLoading: boolean;
+  }>({
+    userId: null,
+    isAuthenticated: false,
+    isLoading: true,
+  });
+
+  // Track that we've already kicked off the grant check
+  const [grantCheckState, setGrantCheckState] = useState<'idle' | 'triggered'>(
+    'idle',
+  );
+  // Optional: store the result if you want to show it in your UI later
+  const [, setGrantResult] = useState<{
+    success: boolean;
+    reason?: string;
+    totalCredits?: number;
+  } | null>(null);
+
+  // Avoid state updates on unmounted component
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+
+  // Sync Convex auth into your client store
+  useEffect(() => {
+    const transformedUser = transformUser(userQuery);
+    const userId = transformedUser?.id ?? null;
+    const snapshot = previousAuthSnapshotRef.current;
+    const hasChanges =
+      snapshot.userId !== userId ||
+      snapshot.isAuthenticated !== isAuthenticated ||
+      snapshot.isLoading !== isLoading;
+
+    if (!hasChanges) {
+      return;
+    }
+
+    previousAuthSnapshotRef.current = {
+      userId,
+      isAuthenticated,
+      isLoading,
+    };
+
+    setAuthState(transformedUser, isAuthenticated, isLoading);
+  }, [userQuery, isAuthenticated, isLoading, setAuthState]);
+
+  // One-time grant-check effect with delay to avoid auth timing issues
+  useEffect(() => {
+    if (
+      isAuthenticated &&
+      !isLoading &&
+      deviceId &&
+      grantCheckState === 'idle'
+    ) {
+      console.log('[AuthWatcher] Scheduling grant check for:', deviceId);
+      setGrantCheckState('triggered');
+
+      // Add a small delay to ensure auth is fully stable
+      const timeoutId = setTimeout(() => {
+        if (mountedRef.current) {
+          performGrantCheck({ deviceId })
+            .then((result) => {
+              console.log('[AuthWatcher] Grant check result:', result);
+              if (mountedRef.current) {
+                setGrantResult(result);
+              }
+            })
+            .catch((error) => {
+              console.error('[AuthWatcher] Grant check error:', error);
+              // Reset state on error so it can be retried
+              if (mountedRef.current) {
+                setGrantCheckState('idle');
+              }
+            });
+        }
+      }, 1000); // 1 second delay
+
+      return () => clearTimeout(timeoutId);
+    }
+  }, [
+    isAuthenticated,
+    isLoading,
+    deviceId,
+    grantCheckState,
+    performGrantCheck,
+  ]);
+
+  // This component doesn't render anything
+  return null;
+};

package/2/apps/native/src/features/authentication/components/login-form.tsx

@@ -0,0 +1,85 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import React from 'react';
+import type { SubmitHandler } from 'react-hook-form';
+import { useForm } from 'react-hook-form';
+import { View } from 'react-native';
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
+import * as z from 'zod';
+
+import { Button, ControlledInput, Text } from '@/components/ui';
+
+const schema = z.object({
+  name: z.string().optional(),
+  email: z
+    .string({
+      required_error: 'Email is required',
+    })
+    .email('Invalid email format'),
+  password: z
+    .string({
+      required_error: 'Password is required',
+    })
+    .min(8, 'Password must be at least 8 characters'),
+});
+
+export type FormType = z.infer<typeof schema>;
+
+export type LoginFormProps = {
+  onSubmit?: SubmitHandler<FormType>;
+};
+
+export const LoginForm = ({ onSubmit = () => {} }: LoginFormProps) => {
+  const { handleSubmit, control } = useForm<FormType>({
+    resolver: zodResolver(schema),
+  });
+  return (
+    <KeyboardAvoidingView
+      style={{ flex: 1 }}
+      behavior="padding"
+      keyboardVerticalOffset={10}
+    >
+      <View className="flex-1 justify-center p-4">
+        <View className="items-center justify-center">
+          <Text
+            testID="form-title"
+            className="pb-6 text-center text-4xl font-bold"
+          >
+            Sign In
+          </Text>
+
+          <Text className="mb-6 max-w-xs text-center text-neutral-500">
+            Welcome! 👋 This is a demo login screen! Feel free to use any email
+            and password to sign in and try it out.
+          </Text>
+        </View>
+
+        <ControlledInput
+          testID="name"
+          control={control}
+          name="name"
+          label="Name"
+        />
+
+        <ControlledInput
+          testID="email-input"
+          control={control}
+          name="email"
+          label="Email"
+        />
+        <ControlledInput
+          testID="password-input"
+          control={control}
+          name="password"
+          label="Password"
+          placeholder="***"
+          secureTextEntry={true}
+        />
+        <Button
+          testID="login-button"
+          label="Login"
+          onPress={handleSubmit(onSubmit)}
+        />
+      </View>
+    </KeyboardAvoidingView>
+  );
+};

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

@@ -0,0 +1,399 @@
+import type { User } from '@/core/auth/auth-service';
+
+import { transformUser } from '../convex-auth.adapter';
+
+// Mock the device identifier
+jest.mock('@/lib/hooks/use-device-identifier', () => ({
+  getDeviceId: jest.fn(() => Promise.resolve('test-device-id')),
+}));
+
+// Mock environment variables
+jest.mock('@env', () => ({
+  Env: {
+    SCHEME: 'myapp',
+  },
+}));
+
+// Mock auth API
+jest.mock('@/api-client/auth', () => ({
+  authApi: {
+    useViewer: jest.fn(),
+    useSignUpWithOtp: jest.fn(),
+    useVerifyOtpAndCreateUser: jest.fn(),
+    useRequestPasswordReset: jest.fn(),
+    useResetPassword: jest.fn(),
+    useVerifyPasswordResetToken: jest.fn(),
+  },
+}));
+
+// Mock Convex auth hooks
+jest.mock('@convex-dev/auth/react', () => ({
+  useAuthActions: jest.fn(),
+  useAuthToken: jest.fn(),
+}));
+
+describe('Convex Authentication Adapter', () => {
+  describe('transformUser', () => {
+    it('should transform valid Convex user to User type', () => {
+      const convexUser = {
+        _id: 'user123',
+        email: 'test@example.com',
+        isAnonymous: false,
+        name: 'Test User',
+        createdAt: '2023-01-01T00:00:00Z',
+      };
+
+      const result = transformUser(convexUser);
+
+      expect(result).toEqual({
+        id: 'user123',
+        email: 'test@example.com',
+        isAnonymous: false,
+      });
+    });
+
+    it('should handle Convex user with missing isAnonymous field', () => {
+      const convexUser = {
+        _id: 'user456',
+        email: 'user@example.com',
+      };
+
+      const result = transformUser(convexUser);
+
+      expect(result).toEqual({
+        id: 'user456',
+        email: 'user@example.com',
+        isAnonymous: false,
+      });
+    });
+
+    it('should handle anonymous Convex user', () => {
+      const convexUser = {
+        _id: 'guest789',
+        email: null,
+        isAnonymous: true,
+      };
+
+      const result = transformUser(convexUser);
+
+      expect(result).toEqual({
+        id: 'guest789',
+        email: null,
+        isAnonymous: true,
+      });
+    });
+
+    it('should return null for undefined input', () => {
+      const result = transformUser(undefined);
+      expect(result).toBeNull();
+    });
+
+    it('should return null for null input', () => {
+      const result = transformUser(null);
+      expect(result).toBeNull();
+    });
+
+    it('should handle empty Convex user object', () => {
+      const convexUser = {
+        _id: 'empty123',
+      };
+
+      const result = transformUser(convexUser);
+
+      expect(result).toEqual({
+        id: 'empty123',
+        email: undefined,
+        isAnonymous: false,
+      });
+    });
+
+    it('should handle Convex user with null email', () => {
+      const convexUser = {
+        _id: 'user-with-null-email',
+        email: null,
+        isAnonymous: false,
+      };
+
+      const result = transformUser(convexUser);
+
+      expect(result).toEqual({
+        id: 'user-with-null-email',
+        email: null,
+        isAnonymous: false,
+      });
+    });
+
+    it('should handle Convex user with empty string email', () => {
+      const convexUser = {
+        _id: 'user-empty-email',
+        email: '',
+        isAnonymous: false,
+      };
+
+      const result = transformUser(convexUser);
+
+      expect(result).toEqual({
+        id: 'user-empty-email',
+        email: '',
+        isAnonymous: false,
+      });
+    });
+
+    it('should handle Convex user with additional properties', () => {
+      const convexUser = {
+        _id: 'user-extra',
+        email: 'extra@example.com',
+        isAnonymous: false,
+        name: 'Extra User',
+        role: 'admin',
+        preferences: { theme: 'dark' },
+        lastLogin: '2023-12-01T10:00:00Z',
+      };
+
+      const result = transformUser(convexUser);
+
+      // Should only include the properties defined in User type
+      expect(result).toEqual({
+        id: 'user-extra',
+        email: 'extra@example.com',
+        isAnonymous: false,
+      });
+    });
+
+    it('should handle string isAnonymous value "true"', () => {
+      const convexUser = {
+        _id: 'user-string-true',
+        email: 'string@example.com',
+        isAnonymous: 'true',
+      };
+
+      const result = transformUser(convexUser);
+
+      expect(result).toEqual({
+        id: 'user-string-true',
+        email: 'string@example.com',
+        isAnonymous: 'true',
+      });
+    });
+
+    it('should handle string isAnonymous value "false"', () => {
+      const convexUser = {
+        _id: 'user-string-false',
+        email: 'string2@example.com',
+        isAnonymous: 'false',
+      };
+
+      const result = transformUser(convexUser);
+
+      expect(result).toEqual({
+        id: 'user-string-false',
+        email: 'string2@example.com',
+        isAnonymous: 'false',
+      });
+    });
+
+    it('should handle numeric isAnonymous values', () => {
+      const convexUser = {
+        _id: 'user-number',
+        email: 'number@example.com',
+        isAnonymous: 1,
+      };
+
+      const result = transformUser(convexUser);
+
+      expect(result).toEqual({
+        id: 'user-number',
+        email: 'number@example.com',
+        isAnonymous: 1,
+      });
+    });
+
+    it('should handle malformed Convex user data gracefully', () => {
+      const convexUser = {
+        _id: '',
+        email: undefined,
+        isAnonymous: undefined,
+      };
+
+      const result = transformUser(convexUser);
+
+      expect(result).toEqual({
+        id: '',
+        email: undefined,
+        isAnonymous: false,
+      });
+    });
+  });
+
+  describe('User Type Edge Cases', () => {
+    it('should maintain type safety for transformed users', () => {
+      const convexUser = {
+        _id: 'typed-user',
+        email: 'typed@example.com',
+        isAnonymous: false,
+      };
+
+      const result = transformUser(convexUser);
+
+      // TypeScript should infer this as User | null
+      const typedResult: User | null = result;
+      expect(typedResult).not.toBeNull();
+
+      if (typedResult) {
+        expect(typedResult.id).toBe('typed-user');
+        expect(typedResult.email).toBe('typed@example.com');
+        expect(typedResult.isAnonymous).toBe(false);
+      }
+    });
+
+    it('should handle complex nested user data', () => {
+      const convexUser = {
+        _id: 'complex-user',
+        email: 'complex@example.com',
+        isAnonymous: false,
+        profile: {
+          firstName: 'John',
+          lastName: 'Doe',
+          avatar: 'https://example.com/avatar.jpg',
+        },
+        settings: {
+          notifications: true,
+          privacy: 'public',
+        },
+        metadata: {
+          source: 'google',
+          referrer: 'friend',
+          campaign: 'summer2023',
+        },
+      };
+
+      const result = transformUser(convexUser);
+
+      // Should only extract the basic User properties
+      expect(result).toEqual({
+        id: 'complex-user',
+        email: 'complex@example.com',
+        isAnonymous: false,
+      });
+    });
+  });
+
+  describe('Error Handling and Data Validation', () => {
+    it('should handle Convex user with numeric ID', () => {
+      const convexUser = {
+        _id: 123,
+        email: 'numeric@example.com',
+        isAnonymous: false,
+      };
+
+      const result = transformUser(convexUser);
+
+      expect(result).toEqual({
+        id: 123,
+        email: 'numeric@example.com',
+        isAnonymous: false,
+      });
+    });
+
+    it('should handle Convex user with boolean email', () => {
+      const convexUser = {
+        _id: 'bool-email-user',
+        email: true,
+        isAnonymous: false,
+      };
+
+      const result = transformUser(convexUser);
+
+      expect(result).toEqual({
+        id: 'bool-email-user',
+        email: true,
+        isAnonymous: false,
+      });
+    });
+
+    it('should handle Convex user with array properties', () => {
+      const convexUser = {
+        _id: 'array-user',
+        email: ['user1@example.com', 'user2@example.com'],
+        isAnonymous: false,
+        roles: ['user', 'admin'],
+      };
+
+      const result = transformUser(convexUser);
+
+      expect(result).toEqual({
+        id: 'array-user',
+        email: ['user1@example.com', 'user2@example.com'],
+        isAnonymous: false,
+      });
+    });
+
+    it('should handle very long user ID', () => {
+      const longId = 'a'.repeat(1000);
+      const convexUser = {
+        _id: longId,
+        email: 'longid@example.com',
+        isAnonymous: false,
+      };
+
+      const result = transformUser(convexUser);
+
+      expect(result).toEqual({
+        id: longId,
+        email: 'longid@example.com',
+        isAnonymous: false,
+      });
+    });
+
+    it('should handle special characters in email', () => {
+      const convexUser = {
+        _id: 'special-chars-user',
+        email: 'test+tag@example.co.uk',
+        isAnonymous: false,
+      };
+
+      const result = transformUser(convexUser);
+
+      expect(result).toEqual({
+        id: 'special-chars-user',
+        email: 'test+tag@example.co.uk',
+        isAnonymous: false,
+      });
+    });
+  });
+
+  describe('Performance and Memory', () => {
+    it('should handle large number of user transformations efficiently', () => {
+      const users = Array.from({ length: 1000 }, (_, i) => ({
+        _id: `user${i}`,
+        email: `user${i}@example.com`,
+        isAnonymous: i % 2 === 0,
+      }));
+
+      const startTime = performance.now();
+      const results = users.map(transformUser);
+      const endTime = performance.now();
+
+      expect(results).toHaveLength(1000);
+      expect(results.filter(Boolean)).toHaveLength(1000);
+      expect(endTime - startTime).toBeLessThan(100); // Should complete in less than 100ms
+    });
+
+    it('should not create circular references', () => {
+      const convexUser: any = {
+        _id: 'circular-user',
+        email: 'circular@example.com',
+        isAnonymous: false,
+      };
+      convexUser.self = convexUser;
+
+      const result = transformUser(convexUser);
+
+      expect(result).toEqual({
+        id: 'circular-user',
+        email: 'circular@example.com',
+        isAnonymous: false,
+      });
+    });
+  });
+});