@umituz/react-native-auth 3.4.30 → 3.4.32

package/src/presentation/hooks/useUserProfile.md

@@ -0,0 +1,230 @@
+# useUserProfile
+
+Hook for fetching user profile data for display in settings or profile screens.
+
+## Features
+
+- Returns profile data based on auth state
+- Generates anonymous names for anonymous users
+- Memoized for performance
+- Type-safe profile data
+
+## Usage
+
+```typescript
+import { useUserProfile } from '@umituz/react-native-auth';
+
+function ProfileHeader() {
+  const profile = useUserProfile({
+    accountRoute: '/account',
+    anonymousDisplayName: 'Guest User',
+  });
+
+  if (!profile) {
+    return <LoadingSpinner />;
+  }
+
+  return (
+    <View>
+      <Avatar source={{ uri: profile.avatarUrl }} />
+      <Text>{profile.displayName}</Text>
+      {profile.isAnonymous && <Text>Guest</Text>}
+    </View>
+  );
+}
+```
+
+## API
+
+### Parameters
+
+| Param | Type | Default | Description |
+|-------|------|---------|-------------|
+| `anonymousDisplayName` | `string` | `undefined` | Default name for anonymous users |
+| `accountRoute` | `string` | `undefined` | Account settings route |
+| `anonymousNameConfig` | `AnonymousNameConfig` | `undefined` | Anonymous name generation config |
+
+### Return Value
+
+`UserProfileData | undefined` - `undefined` if no user, otherwise:
+
+| Prop | Type | Description |
+|------|------|-------------|
+| `displayName` | `string` | User's display name |
+| `userId` | `string` | User ID |
+| `isAnonymous` | `boolean` | Is anonymous user |
+| `avatarUrl` | `string \| undefined` | Profile photo URL |
+| `accountSettingsRoute` | `string \| undefined` | Account settings route |
+
+## Examples
+
+### Simple Profile Header
+
+```typescript
+function ProfileHeader() {
+  const profile = useUserProfile();
+
+  if (!profile) return null;
+
+  return (
+    <View style={styles.header}>
+      {profile.avatarUrl ? (
+        <Image source={{ uri: profile.avatarUrl }} style={styles.avatar} />
+      ) : (
+        <View style={styles.placeholderAvatar}>
+          <Text>{profile.displayName?.[0]}</Text>
+        </View>
+      )}
+      <View>
+        <Text style={styles.name}>{profile.displayName}</Text>
+        {profile.isAnonymous && (
+          <Badge style={styles.badge}>Guest</Badge>
+        )}
+      </View>
+    </View>
+  );
+}
+```
+
+### Profile Settings Link
+
+```typescript
+function SettingsLink() {
+  const profile = useUserProfile({
+    accountRoute: '/settings/account',
+  });
+
+  if (!profile || profile.isAnonymous) {
+    return null; // Don't show for anonymous users
+  }
+
+  return (
+    <TouchableOpacity
+      onPress={() => navigation.navigate(profile.accountSettingsRoute)}
+    >
+      <Text>Account Settings</Text>
+    </TouchableOpacity>
+  );
+}
+```
+
+### Anonymous User with Custom Name
+
+```typescript
+function UserProfileCard() {
+  const profile = useUserProfile({
+    anonymousDisplayName: 'Guest User',
+    anonymousNameConfig: {
+      prefix: 'User',
+      adjectiveCount: 1,
+      nounCount: 1,
+    },
+  });
+
+  if (!profile) return <Skeleton />;
+
+  return (
+    <Card>
+      <Card.Title>{profile.displayName}</Card.Title>
+      {profile.isAnonymous && (
+        <Card.Description>
+          <Link href="/register">Create an account</Link> for more features
+        </Card.Description>
+      )}
+    </Card>
+  );
+}
+```
+
+### Navigation Integration
+
+```typescript
+function ProfileTab() {
+  const profile = useUserProfile({
+    accountRoute: 'Account',
+  });
+
+  const navigation = useNavigation();
+
+  const handleProfilePress = () => {
+    if (profile?.isAnonymous) {
+      navigation.navigate('Register');
+    } else if (profile?.accountSettingsRoute) {
+      navigation.navigate(profile.accountSettingsRoute);
+    }
+  };
+
+  return (
+    <TouchableOpacity onPress={handleProfilePress}>
+      <Text>{profile?.displayName || 'Profile'}</Text>
+    </TouchableOpacity>
+  );
+}
+```
+
+### Conditional Content Based on Auth
+
+```typescript
+function WelcomeBanner() {
+  const profile = useUserProfile();
+
+  if (!profile) return <LoadingBanner />;
+
+  if (profile.isAnonymous) {
+    return (
+      <Banner>
+        <Text>Welcome, {profile.displayName}!</Text>
+        <Button onPress={() => navigation.navigate('Register')}>
+          Create Account
+        </Button>
+      </Banner>
+    );
+  }
+
+  return (
+    <Banner>
+      <Text>Welcome, {profile.displayName}!</Text>
+      <Text>Complete your profile to get the most out of the app.</Text>
+    </Banner>
+  );
+}
+```
+
+## Anonymous Name Generation
+
+Anonymous users automatically get random names generated:
+
+```typescript
+import { generateAnonymousName } from '@umituz/react-native-auth';
+
+// Default: "User_Witty_Badger_1234"
+const name1 = generateAnonymousName('user-123');
+
+// Custom config
+const name2 = generateAnonymousName('user-123', {
+  prefix: 'Guest',
+  adjectiveCount: 1,
+  nounCount: 1,
+});
+// "Guest_Clever_Fox_1234"
+
+// ID only
+const name3 = generateAnonymousName('user-123', {
+  prefix: '',
+  adjectiveCount: 0,
+  nounCount: 0,
+});
+// "user-123"
+```
+
+## Performance Notes
+
+- Hook uses `useMemo` for performance
+- Only recalculates when dependencies change
+- Automatically updates on user sign-in/sign-out
+
+## Related Hooks
+
+- [`useAuth`](./useAuth.md) - Main auth state management
+- [`useProfileUpdate`](./useProfileUpdate.md) - Profile updates
+- [`useProfileEdit`](./useProfileEdit.md) - Profile editing form

package/src/presentation/screens/README.md

@@ -0,0 +1,198 @@
+# Auth Screens
+
+React Native Auth paketi için hazır ekran component'leri.
+
+## Mevcut Screen'ler
+
+- **[`LoginScreen`](./LoginScreen.tsx)** - Giriş ekranı
+- **[`RegisterScreen`](./RegisterScreen.tsx)** - Kayıt ekranı
+- **[`AccountScreen`](./AccountScreen.tsx)** - Hesap ayarları ekranı
+- **[`EditProfileScreen`](./EditProfileScreen.tsx)** - Profil düzenleme ekranı
+
+## Kullanım
+
+### LoginScreen
+
+```typescript
+import { LoginScreen } from '@umituz/react-native-auth';
+
+function App() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="Login"
+        component={LoginScreen}
+        options={{ headerShown: false }}
+      />
+    </Stack.Navigator>
+  );
+}
+```
+
+### RegisterScreen
+
+```typescript
+import { RegisterScreen } from '@umituz/react-native-auth';
+
+function App() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="Register"
+        component={RegisterScreen}
+        options={{ headerShown: false }}
+      />
+    </Stack.Navigator>
+  );
+}
+```
+
+### AccountScreen
+
+```typescript
+import { AccountScreen } from '@umituz/react-native-auth';
+
+function App() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="Account"
+        component={AccountScreen}
+        options={{ title: 'Hesabım' }}
+      />
+    </Stack.Navigator>
+  );
+}
+```
+
+### EditProfileScreen
+
+```typescript
+import { EditProfileScreen } from '@umituz/react-native-auth';
+
+function App() {
+  return (
+    <Stack.Navigator>
+      <Stack.Screen
+        name="EditProfile"
+        component={EditProfileScreen}
+        options={{ title: 'Profili Düzenle' }}
+      />
+    </Stack.Navigator>
+  );
+}
+```
+
+## AuthNavigator
+
+Tüm auth ekranlarını içeren hazır navigator:
+
+```typescript
+import { AuthNavigator } from '@umituz/react-native-auth';
+
+function App() {
+  return (
+    <NavigationContainer>
+      <AuthNavigator />
+    </NavigationContainer>
+  );
+}
+```
+
+## Konfigürasyon
+
+### AccountScreen Konfigürasyonu
+
+```typescript
+import { AccountScreen } from '@umituz/react-native-auth';
+
+function SettingsScreen() {
+  return (
+    <AccountScreen
+      config={{
+        showChangePassword: true,
+        benefits: ['Premium içeriklere erişim', 'Reklamsız deneyim'],
+      }}
+    />
+  );
+}
+```
+
+### EditProfileScreen Konfigürasyonu
+
+```typescript
+import { EditProfileScreen } from '@umituz/react-native-auth';
+
+function ProfileSettings() {
+  return (
+    <EditProfileScreen
+      config={{
+        showAvatar: true,
+        allowEmailChange: false,
+        maxDisplayNameLength: 50,
+      }}
+    />
+  );
+}
+```
+
+## Tam Örnek
+
+```typescript
+import React from 'react';
+import { NavigationContainer } from '@react-navigation/native';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import {
+  AuthNavigator,
+  LoginScreen,
+  RegisterScreen,
+  AccountScreen,
+  EditProfileScreen,
+} from '@umituz/react-native-auth';
+
+const Stack = createNativeStackNavigator();
+
+function App() {
+  return (
+    <NavigationContainer>
+      <Stack.Navigator>
+        {/* Auth ekranları */}
+        <Stack.Screen
+          name="Login"
+          component={LoginScreen}
+          options={{ headerShown: false }}
+        />
+        <Stack.Screen
+          name="Register"
+          component={RegisterScreen}
+          options={{ headerShown: false }}
+        />
+
+        {/* Hesap ekranları */}
+        <Stack.Screen
+          name="Account"
+          component={AccountScreen}
+          options={{ title: 'Hesabım' }}
+        />
+        <Stack.Screen
+          name="EditProfile"
+          component={EditProfileScreen}
+          options={{ title: 'Profili Düzenle' }}
+        />
+
+        {/* Diğer ekranlar */}
+        <Stack.Screen name="Home" component={HomeScreen} />
+      </Stack.Navigator>
+    </NavigationContainer>
+  );
+}
+```
+
+## İlgili Component'ler
+
+- **[Auth Components](../components/README.md)** - Auth UI component'leri
+- **[Auth Hooks](../hooks/README.md)** - Auth hook'ları
+
+## İlgili Navigation
+
+- **[AuthNavigator](../navigation/AuthNavigator.tsx)** - Auth navigator

package/src/presentation/components/AuthGradientBackground.tsx

@@ -1,33 +0,0 @@
-/**
- * Auth Gradient Background Component
- * Gradient background for auth screens
- */
-
-import React from "react";
-import { StyleSheet } from "react-native";
-import { LinearGradient } from "expo-linear-gradient";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
-
-export const AuthGradientBackground: React.FC = () => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <LinearGradient
-      colors={[tokens.colors.primary, tokens.colors.surfaceSecondary]}
-      start={{ x: 0, y: 0 }}
-      end={{ x: 1, y: 1 }}
-      style={StyleSheet.absoluteFill}
-    />
-  );
-};
-
-
-
-
-
-
-
-
-
-
-