@umituz/react-native-auth 2.5.3 → 2.5.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-auth",
-  "version": "2.5.3",
+  "version": "2.5.4",
   "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

@@ -99,6 +99,9 @@ export type {
 export { useAuth } from './presentation/hooks/useAuth';
 export type { UseAuthResult } from './presentation/hooks/useAuth';
 
+export { useUserProfile } from './presentation/hooks/useUserProfile';
+export type { UserProfileData, UseUserProfileParams } from './presentation/hooks/useUserProfile';
+
 // =============================================================================
 // PRESENTATION LAYER - Screens & Navigation
 // =============================================================================
@@ -128,6 +131,8 @@ export { PasswordMatchIndicator } from './presentation/components/PasswordMatchI
 export type { PasswordMatchIndicatorProps } from './presentation/components/PasswordMatchIndicator';
 export { AuthBottomSheet } from './presentation/components/AuthBottomSheet';
 export type { AuthBottomSheetProps } from './presentation/components/AuthBottomSheet';
+export { ProfileSection } from './presentation/components/ProfileSection';
+export type { ProfileSectionConfig, ProfileSectionProps } from './presentation/components/ProfileSection';
 
 // =============================================================================
 // PRESENTATION LAYER - Stores

package/src/presentation/components/ProfileSection.tsx

@@ -0,0 +1,188 @@
+/**
+ * Profile Section Component
+ * Generic user profile section for settings screens
+ * Shows user info, sign in CTA for anonymous, or account navigation for signed in users
+ */
+
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+export interface ProfileSectionConfig {
+    displayName: string;
+    userId?: string;
+    isAnonymous: boolean;
+    avatarUrl?: string;
+    accountSettingsRoute?: string;
+}
+
+export interface ProfileSectionProps {
+    profile: ProfileSectionConfig;
+    onPress?: () => void;
+    onSignIn?: () => void;
+    signInText?: string;
+    anonymousText?: string;
+}
+
+export const ProfileSection: React.FC<ProfileSectionProps> = ({
+    profile,
+    onPress,
+    onSignIn,
+    signInText = "Sign In",
+    anonymousText = "Anonymous User",
+}) => {
+    const tokens = useAppDesignTokens();
+
+    const handlePress = () => {
+        if (profile.isAnonymous && onSignIn) {
+            onSignIn();
+        } else if (onPress) {
+            onPress();
+        }
+    };
+
+    const getInitials = (name: string): string => {
+        return name
+            .split(" ")
+            .map((n) => n[0])
+            .join("")
+            .toUpperCase()
+            .slice(0, 2);
+    };
+
+    return (
+        <TouchableOpacity
+            style={[styles.container, { backgroundColor: tokens.colors.surface }]}
+            onPress={handlePress}
+            activeOpacity={0.7}
+            disabled={!onPress && !onSignIn}
+        >
+            <View style={styles.content}>
+                {/* Avatar */}
+                <View
+                    style={[
+                        styles.avatar,
+                        { backgroundColor: profile.isAnonymous ? tokens.colors.warning : tokens.colors.primary },
+                    ]}
+                >
+                    {profile.avatarUrl ? (
+                        <Text style={styles.avatarText}>
+                            {getInitials(profile.displayName)}
+                        </Text>
+                    ) : (
+                        <Text
+                            style={[styles.avatarText, { color: tokens.colors.onPrimary }]}
+                        >
+                            {getInitials(profile.displayName)}
+                        </Text>
+                    )}
+                </View>
+
+                {/* User Info */}
+                <View style={styles.info}>
+                    <Text
+                        style={[styles.displayName, { color: tokens.colors.textPrimary }]}
+                        numberOfLines={1}
+                    >
+                        {profile.displayName}
+                    </Text>
+                    {profile.userId && (
+                        <Text
+                            style={[styles.userId, { color: tokens.colors.textSecondary }]}
+                            numberOfLines={1}
+                        >
+                            {profile.userId}
+                        </Text>
+                    )}
+                </View>
+
+                {/* Action Icon */}
+                {(onPress || onSignIn) && (
+                    <Text style={[styles.chevron, { color: tokens.colors.textTertiary }]}>
+                        ›
+                    </Text>)}
+            </View>
+
+            {/* Sign In CTA for Anonymous Users */}
+            {profile.isAnonymous && onSignIn && (
+                <View
+                    style={[
+                        styles.ctaContainer,
+                        { borderTopColor: tokens.colors.border },
+                    ]}
+                >
+                    <TouchableOpacity
+                        style={[
+                            styles.ctaButton,
+                            { backgroundColor: tokens.colors.primary },
+                        ]}
+                        onPress={onSignIn}
+                        activeOpacity={0.8}
+                    >
+                        <Text
+                            style={[
+                                styles.ctaText,
+                                { color: tokens.colors.onPrimary },
+                            ]}
+                        >
+                            {signInText}
+                        </Text>
+                    </TouchableOpacity>
+                </View>
+            )}
+        </TouchableOpacity>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        borderRadius: 12,
+        padding: 16,
+        marginBottom: 16,
+    },
+    content: {
+        flexDirection: "row",
+        alignItems: "center",
+    },
+    avatar: {
+        width: 56,
+        height: 56,
+        borderRadius: 28,
+        justifyContent: "center",
+        alignItems: "center",
+        marginRight: 12,
+    },
+    avatarText: {
+        fontSize: 20,
+        fontWeight: "600",
+    },
+    info: {
+        flex: 1,
+    },
+    displayName: {
+        fontSize: 18,
+        fontWeight: "600",
+        marginBottom: 2,
+    },
+    userId: {
+        fontSize: 13,
+    },
+    chevron: {
+        fontSize: 24,
+        fontWeight: "400",
+    },
+    ctaContainer: {
+        marginTop: 12,
+        paddingTop: 12,
+        borderTopWidth: 1,
+    },
+    ctaButton: {
+        paddingVertical: 12,
+        borderRadius: 8,
+        alignItems: "center",
+    },
+    ctaText: {
+        fontSize: 15,
+        fontWeight: "600",
+    },
+});

package/src/presentation/hooks/useUserProfile.ts

@@ -0,0 +1,56 @@
+/**
+ * useUserProfile Hook
+ * Generic hook for user profile configuration
+ * Returns profile data for display in settings or profile screens
+ */
+
+import { useMemo } from "react";
+import { useAuth } from "./useAuth";
+
+export interface UserProfileData {
+    displayName: string;
+    userId?: string;
+    isAnonymous: boolean;
+    avatarUrl?: string;
+    accountSettingsRoute?: string;
+}
+
+export interface UseUserProfileParams {
+    anonymousDisplayName?: string;
+    guestDisplayName?: string;
+    accountRoute?: string;
+}
+
+export const useUserProfile = (
+    params?: UseUserProfileParams,
+): UserProfileData | undefined => {
+    const { user } = useAuth();
+
+    const anonymousName = params?.anonymousDisplayName || "Anonymous User";
+    const guestName = params?.guestDisplayName || "Guest User";
+    const accountRoute = params?.accountRoute || "Account";
+
+    return useMemo(() => {
+        if (!user) {
+            return undefined;
+        }
+
+        const isAnonymous = user.isAnonymous || false;
+
+        if (isAnonymous) {
+            return {
+                displayName: anonymousName,
+                userId: user.uid,
+                isAnonymous: true,
+            };
+        }
+
+        return {
+            accountSettingsRoute: accountRoute,
+            displayName: user.displayName || user.email || guestName,
+            userId: user.uid,
+            isAnonymous: false,
+            avatarUrl: user.photoURL || undefined,
+        };
+    }, [user, anonymousName, guestName, accountRoute]);
+};