@umituz/react-native-auth 4.3.69 → 4.3.72

package/src/presentation/components/PasswordStrengthIndicator.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo, memo } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicText } from "@umituz/react-native-design-system/atoms";
@@ -22,12 +22,7 @@ interface RequirementDotProps {
   pendingColor: ColorVariant;
 }
 
-const RequirementDot: React.FC<RequirementDotProps> = ({
-  label,
-  isValid,
-  successColor,
-  pendingColor,
-}) => {
+const RequirementDot = memo<RequirementDotProps>(({ label, isValid, successColor, pendingColor }) => {
   const tokens = useAppDesignTokens();
   const colorKey = isValid ? successColor : pendingColor;
   const dotColor = (tokens.colors as Record<string, string>)[colorKey] || tokens.colors.textTertiary;
@@ -40,20 +35,20 @@ const RequirementDot: React.FC<RequirementDotProps> = ({
       </AtomicText>
     </View>
   );
-};
+});
+
+RequirementDot.displayName = 'RequirementDot';
 
-export const PasswordStrengthIndicator: React.FC<PasswordStrengthIndicatorProps> = ({
-  translations,
-  requirements,
-  showLabels = true,
-}) => {
+export const PasswordStrengthIndicator = memo<PasswordStrengthIndicatorProps>(({ translations, requirements, showLabels = true }) => {
   const tokens = useAppDesignTokens();
   const successColor: ColorVariant = "success";
   const pendingColor: ColorVariant = "textTertiary";
 
-  const items = [
-    { key: "minLength", label: translations.minLength, isValid: requirements.hasMinLength },
-  ];
+  // PERFORMANCE: Memoize items array to prevent recreation on every render
+  const items = useMemo(
+    () => [{ key: "minLength" as const, label: translations.minLength, isValid: requirements.hasMinLength }],
+    [translations.minLength, requirements.hasMinLength]
+  );
 
   if (!showLabels) {
     return (
@@ -86,7 +81,9 @@ export const PasswordStrengthIndicator: React.FC<PasswordStrengthIndicatorProps>
       ))}
     </View>
   );
-};
+});
+
+PasswordStrengthIndicator.displayName = 'PasswordStrengthIndicator';
 
 const styles = StyleSheet.create({
   container: {

package/src/presentation/components/SocialLoginButtons.tsx

@@ -1,4 +1,10 @@
-import React from "react";
+/**
+ * Social Login Buttons Component
+ * Google and Apple sign-in buttons
+ * PERFORMANCE: Memoized and provider checks memoized to prevent re-renders
+ */
+
+import React, { useMemo, memo } from "react";
 import { View, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicText, AtomicButton } from "@umituz/react-native-design-system/atoms";
@@ -19,17 +25,14 @@ interface SocialLoginButtonsProps {
   appleLoading?: boolean;
 }
 
-export const SocialLoginButtons: React.FC<SocialLoginButtonsProps> = ({
-  translations,
-  enabledProviders,
-  onGooglePress,
-  onApplePress,
-  googleLoading = false,
-  appleLoading = false,
-}) => {
+export const SocialLoginButtons = memo<SocialLoginButtonsProps>(({ translations, enabledProviders, onGooglePress, onApplePress, googleLoading = false, appleLoading = false }) => {
   const tokens = useAppDesignTokens();
-  const hasGoogle = enabledProviders.includes("google");
-  const hasApple = enabledProviders.includes("apple");
+
+  // PERFORMANCE: Memoize provider checks to prevent recalculation on every render
+  const { hasGoogle, hasApple } = useMemo(() => ({
+    hasGoogle: enabledProviders.includes("google"),
+    hasApple: enabledProviders.includes("apple"),
+  }), [enabledProviders]);
 
   if (!hasGoogle && !hasApple) {
     return null;
@@ -74,7 +77,9 @@ export const SocialLoginButtons: React.FC<SocialLoginButtonsProps> = ({
       </View>
     </View>
   );
-};
+});
+
+SocialLoginButtons.displayName = 'SocialLoginButtons';
 
 const styles = StyleSheet.create({
   container: {},

package/src/presentation/hooks/README.md

@@ -125,32 +125,6 @@ import { useUserProfile } from '@umituz/react-native-auth';
 
 **Documentation**: `useUserProfile.md`
 
----
-
-
-**Purpose**: Profile update operations and form management
-
-**When to Use**:
-- Profile editing screens
-- Settings screens
-- Form state management
-- Profile modifications
-
-**Import Path**:
-```typescript
-import {
-  useProfileEdit
-} from '@umituz/react-native-auth';
-```
-
-
-**Rules**:
-- MUST validate before update
-- MUST handle loading state
-- MUST show errors to user
-- MUST not allow anonymous updates
-
-
 ---
 
 ### useAccountManagement
@@ -180,37 +154,6 @@ import { useAccountManagement } from '@umituz/react-native-auth';
 
 ---
 
-### useSocialLogin
-
-**Purpose**: Google and Apple authentication
-
-**When to Use**:
-- Social authentication needed
-- Want Google sign-in
-- Want Apple sign-in (iOS)
-- Unified social auth interface
-
-**Import Path**:
-```typescript
-import {
-  useSocialLogin,
-  useGoogleAuth,
-  useAppleAuth
-} from '@umituz/react-native-auth';
-```
-
-**File**: `useSocialLogin.ts`
-
-**Rules**:
-- MUST configure providers before use
-- MUST check provider availability
-- MUST handle loading states
-- MUST handle platform differences
-
-**Documentation**: `useSocialLogin.md`
-
----
-
 ### useAuthBottomSheet
 
 **Purpose**: Auth modal management

package/src/presentation/hooks/useAccountManagement.md

@@ -330,7 +330,6 @@ import { useAccountManagement } from '@umituz/react-native-auth';
 
 - **`useAuth`** (`src/presentation/hooks/useAuth.ts`) - Authentication state
 - **`useUserProfile`** (`src/presentation/hooks/useUserProfile.ts`) - Profile data
-- **`useProfileEdit`** (`src/presentation/hooks/useProfileEdit.ts`) - Profile editing form
 
 ## Related Components
 

package/src/presentation/hooks/useLoginForm.ts

@@ -98,7 +98,16 @@ export function useLoginForm(config?: UseLoginFormConfig): UseLoginFormResult {
     } catch (err: unknown) {
       setLocalError(handleAuthError(err));
     }
-  }, [fields, signIn, translations, handleAuthError, getErrorMessage, clearFieldErrorsState, setLocalError]);
+  }, [
+    fields.email,
+    fields.password,
+    signIn,
+    translations,
+    handleAuthError,
+    getErrorMessage,
+    clearFieldErrorsState,
+    setLocalError,
+  ]);
 
   const handleContinueAnonymously = useCallback(async () => {
     try {

package/src/presentation/hooks/usePasswordPromptNavigation.ts

@@ -39,7 +39,9 @@ export const usePasswordPromptNavigation = (
           })
         );
       } catch (error) {
-        console.error('[usePasswordPromptNavigation] Navigation failed:', error);
+        if (__DEV__) {
+          console.error('[usePasswordPromptNavigation] Navigation failed:', error);
+        }
         setPasswordPromptCallback(null);
         resolve(null);
       }

package/src/presentation/providers/AuthProvider.tsx

@@ -74,7 +74,9 @@ export function AuthProvider({ children, ErrorFallback = DefaultErrorFallback }:
         try {
           unsubscribe();
         } catch (error) {
-          console.error('[AuthProvider] Cleanup failed:', error instanceof Error ? error.message : String(error));
+          if (__DEV__) {
+            console.error('[AuthProvider] Cleanup failed:', error instanceof Error ? error.message : String(error));
+          }
         }
       }
     };

package/src/presentation/screens/AccountScreen.tsx

@@ -2,9 +2,10 @@
  * Account Screen
  * Pure UI component for account management
  * Business logic provided via props from app layer
+ * PERFORMANCE: Memoized to prevent unnecessary re-renders
  */
 
-import React from "react";
+import React, { memo } from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system/atoms";
@@ -29,7 +30,7 @@ export interface AccountScreenProps {
     config: AccountScreenConfig;
 }
 
-export const AccountScreen: React.FC<AccountScreenProps> = ({ config }) => {
+export const AccountScreen = memo<AccountScreenProps>(({ config }) => {
     const tokens = useAppDesignTokens();
 
     return (
@@ -74,7 +75,9 @@ export const AccountScreen: React.FC<AccountScreenProps> = ({ config }) => {
             {config.PasswordPromptComponent}
         </>
     );
-};
+});
+
+AccountScreen.displayName = 'AccountScreen';
 
 const styles = StyleSheet.create({
     content: {

package/src/presentation/screens/LoginScreen.tsx

@@ -1,4 +1,10 @@
-import React from "react";
+/**
+ * Login Screen Component
+ * Login form screen with navigation
+ * PERFORMANCE: Memoized to prevent unnecessary re-renders
+ */
+
+import React, { memo, useCallback } from "react";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicCard } from "@umituz/react-native-design-system/atoms";
 import { useAppNavigation } from "@umituz/react-native-design-system/molecules";
@@ -16,13 +22,14 @@ export interface LoginScreenProps {
   translations: LoginScreenTranslations;
 }
 
-export const LoginScreen: React.FC<LoginScreenProps> = ({ translations }) => {
+export const LoginScreen = memo<LoginScreenProps>(({ translations }) => {
   const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
 
-  const handleNavigateToRegister = () => {
+  // PERFORMANCE: Stable callback reference
+  const handleNavigateToRegister = useCallback(() => {
     navigation.navigate("Register");
-  };
+  }, [navigation]);
 
   return (
     <ScreenLayout
@@ -41,4 +48,6 @@ export const LoginScreen: React.FC<LoginScreenProps> = ({ translations }) => {
       </AtomicCard>
     </ScreenLayout>
   );
-};
+});
+
+LoginScreen.displayName = 'LoginScreen';

package/src/presentation/screens/RegisterScreen.tsx

@@ -1,4 +1,10 @@
-import React from "react";
+/**
+ * Register Screen Component
+ * Registration form screen with navigation
+ * PERFORMANCE: Memoized to prevent unnecessary re-renders
+ */
+
+import React, { memo, useCallback } from "react";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { AtomicCard } from "@umituz/react-native-design-system/atoms";
 import { useAppNavigation } from "@umituz/react-native-design-system/molecules";
@@ -20,19 +26,14 @@ export interface RegisterScreenProps {
   onPrivacyPress?: () => void;
 }
 
-export const RegisterScreen: React.FC<RegisterScreenProps> = ({
-  translations,
-  termsUrl,
-  privacyUrl,
-  onTermsPress,
-  onPrivacyPress,
-}) => {
+export const RegisterScreen = memo<RegisterScreenProps>(({ translations, termsUrl, privacyUrl, onTermsPress, onPrivacyPress }) => {
   const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
 
-  const handleNavigateToLogin = () => {
+  // PERFORMANCE: Stable callback reference
+  const handleNavigateToLogin = useCallback(() => {
     navigation.navigate("Login");
-  };
+  }, [navigation]);
 
   return (
     <ScreenLayout
@@ -55,4 +56,6 @@ export const RegisterScreen: React.FC<RegisterScreenProps> = ({
       </AtomicCard>
     </ScreenLayout>
   );
-};
+});
+
+RegisterScreen.displayName = 'RegisterScreen';

package/src/presentation/stores/authModalStore.ts

@@ -78,11 +78,15 @@ export const useAuthModalStore = createStore<AuthModalState, AuthModalActions>({
           // If it's a promise, catch rejections
           if (result && typeof result.then === 'function') {
             result.catch((error) => {
-              console.error('[AuthModalStore] Pending callback error:', error);
+              if (__DEV__) {
+                console.error('[AuthModalStore] Pending callback error:', error);
+              }
             });
           }
         } catch (error) {
-          console.error('[AuthModalStore] Pending callback error:', error);
+          if (__DEV__) {
+            console.error('[AuthModalStore] Pending callback error:', error);
+          }
         }
         set({ pendingCallback: null });
       }

package/src/presentation/utils/passwordPromptCallback.ts

@@ -3,7 +3,9 @@ let callback: ((value: string | null) => void) | null = null;
 export const setPasswordPromptCallback = (cb: ((value: string | null) => void) | null): void => {
   // Warn if overriding an existing callback (indicates potential bug)
   if (callback && cb) {
-    console.warn('[passwordPromptCallback] Overriding existing callback - this may indicate a bug');
+    if (__DEV__) {
+      console.warn('[passwordPromptCallback] Overriding existing callback - this may indicate a bug');
+    }
   }
   callback = cb;
 };

package/src/presentation/hooks/useProfileEdit.ts

@@ -1,83 +0,0 @@
-/**
- * Profile Edit Hook
- * Simple profile editing with form state management
- * Apps provide image picker and backend update logic
- */
-
-import { useState, useCallback } from "react";
-import { validateProfileForm } from "../utils/form/validation/formValidators";
-
-export interface ProfileEditFormState {
-  displayName: string;
-  email: string;
-  photoURL: string | null;
-  isModified: boolean;
-}
-
-export interface UseProfileEditReturn {
-  formState: ProfileEditFormState;
-  setDisplayName: (value: string) => void;
-  setEmail: (value: string) => void;
-  setPhotoURL: (value: string | null) => void;
-  resetForm: (initial: Partial<ProfileEditFormState>) => void;
-  validateForm: () => { isValid: boolean; errors: string[] };
-}
-
-export const useProfileEdit = (
-  initialState: Partial<ProfileEditFormState> = {},
-): UseProfileEditReturn => {
-  const [formState, setFormState] = useState<ProfileEditFormState>({
-    displayName: initialState.displayName || "",
-    email: initialState.email || "",
-    photoURL: initialState.photoURL || null,
-    isModified: false,
-  });
-
-  const setDisplayName = useCallback((value: string) => {
-    setFormState((prev) => ({ ...prev, displayName: value, isModified: true }));
-  }, []);
-
-  const setEmail = useCallback((value: string) => {
-    setFormState((prev) => ({ ...prev, email: value, isModified: true }));
-  }, []);
-
-  const setPhotoURL = useCallback((value: string | null) => {
-    setFormState((prev) => ({ ...prev, photoURL: value, isModified: true }));
-  }, []);
-
-  const resetForm = useCallback((initial: Partial<ProfileEditFormState>) => {
-    setFormState({
-      displayName: initial.displayName || "",
-      email: initial.email || "",
-      photoURL: initial.photoURL || null,
-      isModified: false,
-    });
-  }, []);
-
-  const validateForm = useCallback((): {
-    isValid: boolean;
-    errors: string[];
-  } => {
-    const result = validateProfileForm(
-      {
-        displayName: formState.displayName,
-        email: formState.email,
-      },
-      key => key // Identity function for translation
-    );
-
-    return {
-      isValid: result.isValid,
-      errors: result.errors.map((e) => e.message),
-    };
-  }, [formState]);
-
-  return {
-    formState,
-    setDisplayName,
-    setEmail,
-    setPhotoURL,
-    resetForm,
-    validateForm,
-  };
-};