@umituz/react-native-auth 2.5.5 → 2.5.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "2.5.5",
+  "version": "2.5.6",
   "description": "Authentication service for React Native apps - Secure, type-safe, and production-ready. Provider-agnostic design with dependency injection, configurable validation, and comprehensive error handling.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/index.ts

@@ -108,6 +108,9 @@ export type { UseAccountManagementReturn } from './presentation/hooks/useAccount
 export { useProfileUpdate } from './presentation/hooks/useProfileUpdate';
 export type { UseProfileUpdateReturn } from './presentation/hooks/useProfileUpdate';
 
+export { useProfileEdit } from './presentation/hooks/useProfileEdit';
+export type { UseProfileEditReturn, ProfileEditFormState } from './presentation/hooks/useProfileEdit';
+
 export type { UserProfile, UpdateProfileParams } from './domain/entities/UserProfile';
 
 // =============================================================================
@@ -118,6 +121,8 @@ export { LoginScreen } from './presentation/screens/LoginScreen';
 export { RegisterScreen } from './presentation/screens/RegisterScreen';
 export { AccountScreen } from './presentation/screens/AccountScreen';
 export type { AccountScreenConfig, AccountScreenProps } from './presentation/screens/AccountScreen';
+export { EditProfileScreen } from './presentation/screens/EditProfileScreen';
+export type { EditProfileConfig, EditProfileScreenProps } from './presentation/screens/EditProfileScreen';
 
 export { AuthNavigator } from './presentation/navigation/AuthNavigator';
 export type {

package/src/presentation/hooks/useProfileEdit.ts

@@ -0,0 +1,84 @@
+/**
+ * useProfileEdit Hook
+ * Simple profile editing with form state management
+ * Apps provide image picker and backend update logic
+ */
+
+import { useState, useCallback } from "react";
+
+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 errors: string[] = [];
+
+        if (!formState.displayName.trim()) {
+            errors.push("Display name is required");
+        }
+
+        if (formState.email && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(formState.email)) {
+            errors.push("Invalid email format");
+        }
+
+        return {
+            isValid: errors.length === 0,
+            errors,
+        };
+    }, [formState]);
+
+    return {
+        formState,
+        setDisplayName,
+        setEmail,
+        setPhotoURL,
+        resetForm,
+        validateForm,
+    };
+};

package/src/presentation/screens/EditProfileScreen.tsx

@@ -0,0 +1,232 @@
+/**
+ * Edit Profile Screen
+ * Pure UI for profile editing
+ * Business logic provided via props
+ */
+
+import React from "react";
+import {
+    View,
+    Text,
+    TextInput,
+    TouchableOpacity,
+    ScrollView,
+    StyleSheet,
+    ActivityIndicator,
+} from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+export interface EditProfileConfig {
+    displayName: string;
+    email: string;
+    photoURL: string | null;
+    isLoading?: boolean;
+    isSaving?: boolean;
+    onChangeDisplayName: (value: string) => void;
+    onChangeEmail: (value: string) => void;
+    onChangePhoto?: () => void;
+    onSave: () => void;
+    onCancel?: () => void;
+    labels: {
+        title: string;
+        displayNameLabel: string;
+        displayNamePlaceholder: string;
+        emailLabel: string;
+        emailPlaceholder: string;
+        photoLabel: string;
+        changePhotoButton: string;
+        saveButton: string;
+        cancelButton: string;
+    };
+}
+
+export interface EditProfileScreenProps {
+    config: EditProfileConfig;
+}
+
+export const EditProfileScreen: React.FC<EditProfileScreenProps> = ({
+    config,
+}) => {
+    const tokens = useAppDesignTokens();
+
+    if (config.isLoading) {
+        return (
+            <View style={[styles.loading, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+                <ActivityIndicator size="large" color={tokens.colors.primary} />
+            </View>
+        );
+    }
+
+    return (
+        <ScrollView
+            style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}
+            contentContainerStyle={styles.content}
+        >
+            <Text style={[styles.title, { color: tokens.colors.text }]}>
+                {config.labels.title}
+            </Text>
+
+            {/* Display Name */}
+            <View style={styles.field}>
+                <Text style={[styles.label, { color: tokens.colors.textSecondary }]}>
+                    {config.labels.displayNameLabel}
+                </Text>
+                <TextInput
+                    style={[
+                        styles.input,
+                        {
+                            backgroundColor: tokens.colors.surface,
+                            color: tokens.colors.text,
+                            borderColor: tokens.colors.border,
+                        },
+                    ]}
+                    value={config.displayName}
+                    onChangeText={config.onChangeDisplayName}
+                    placeholder={config.labels.displayNamePlaceholder}
+                    placeholderTextColor={tokens.colors.textTertiary}
+                />
+            </View>
+
+            {/* Email */}
+            <View style={styles.field}>
+                <Text style={[styles.label, { color: tokens.colors.textSecondary }]}>
+                    {config.labels.emailLabel}
+                </Text>
+                <TextInput
+                    style={[
+                        styles.input,
+                        {
+                            backgroundColor: tokens.colors.surface,
+                            color: tokens.colors.text,
+                            borderColor: tokens.colors.border,
+                        },
+                    ]}
+                    value={config.email}
+                    onChangeText={config.onChangeEmail}
+                    placeholder={config.labels.emailPlaceholder}
+                    placeholderTextColor={tokens.colors.textTertiary}
+                    keyboardType="email-address"
+                    autoCapitalize="none"
+                />
+            </View>
+
+            {/* Photo */}
+            {config.onChangePhoto && (
+                <View style={styles.field}>
+                    <Text style={[styles.label, { color: tokens.colors.textSecondary }]}>
+                        {config.labels.photoLabel}
+                    </Text>
+                    <TouchableOpacity
+                        style={[
+                            styles.photoButton,
+                            { backgroundColor: tokens.colors.surface, borderColor: tokens.colors.border },
+                        ]}
+                        onPress={config.onChangePhoto}
+                    >
+                        <Text style={[styles.photoButtonText, { color: tokens.colors.primary }]}>
+                            {config.labels.changePhotoButton}
+                        </Text>
+                    </TouchableOpacity>
+                </View>
+            )}
+
+            {/* Actions */}
+            <View style={styles.actions}>
+                <TouchableOpacity
+                    style={[styles.saveButton, { backgroundColor: tokens.colors.primary }]}
+                    onPress={config.onSave}
+                    disabled={config.isSaving}
+                >
+                    {config.isSaving ? (
+                        <ActivityIndicator size="small" color={tokens.colors.onPrimary} />
+                    ) : (
+                        <Text style={[styles.saveButtonText, { color: tokens.colors.onPrimary }]}>
+                            {config.labels.saveButton}
+                        </Text>
+                    )}
+                </TouchableOpacity>
+
+                {config.onCancel && (
+                    <TouchableOpacity
+                        style={[
+                            styles.cancelButton,
+                            { backgroundColor: tokens.colors.surface, borderColor: tokens.colors.border },
+                        ]}
+                        onPress={config.onCancel}
+                        disabled={config.isSaving}
+                    >
+                        <Text style={[styles.cancelButtonText, { color: tokens.colors.text }]}>
+                            {config.labels.cancelButton}
+                        </Text>
+                    </TouchableOpacity>
+                )}
+            </View>
+        </ScrollView>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    content: {
+        padding: 16,
+    },
+    loading: {
+        flex: 1,
+        justifyContent: "center",
+        alignItems: "center",
+    },
+    title: {
+        fontSize: 24,
+        fontWeight: "600",
+        marginBottom: 24,
+    },
+    field: {
+        marginBottom: 20,
+    },
+    label: {
+        fontSize: 14,
+        fontWeight: "500",
+        marginBottom: 8,
+    },
+    input: {
+        borderWidth: 1,
+        borderRadius: 8,
+        padding: 12,
+        fontSize: 16,
+    },
+    photoButton: {
+        borderWidth: 1,
+        borderRadius: 8,
+        padding: 12,
+        alignItems: "center",
+    },
+    photoButtonText: {
+        fontSize: 14,
+        fontWeight: "500",
+    },
+    actions: {
+        marginTop: 32,
+        gap: 12,
+    },
+    saveButton: {
+        padding: 16,
+        borderRadius: 8,
+        alignItems: "center",
+    },
+    saveButtonText: {
+        fontSize: 16,
+        fontWeight: "600",
+    },
+    cancelButton: {
+        padding: 16,
+        borderRadius: 8,
+        alignItems: "center",
+        borderWidth: 1,
+    },
+    cancelButtonText: {
+        fontSize: 16,
+        fontWeight: "500",
+    },
+});