@umituz/react-native-settings 1.4.1 → 1.6.0

package/src/presentation/components/SettingsSection.tsx

@@ -0,0 +1,59 @@
+/**
+ * Settings Section Component
+ * Single Responsibility: Render a settings section with title and container
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+export interface SettingsSectionProps {
+  /** Section title */
+  title: string;
+  /** Section content */
+  children: React.ReactNode;
+}
+
+export const SettingsSection: React.FC<SettingsSectionProps> = ({
+  title,
+  children,
+}) => {
+  const tokens = useAppDesignTokens();
+  const colors = tokens.colors;
+
+  return (
+    <View style={styles.container}>
+      <Text style={[styles.title, { color: colors.textSecondary }]}>
+        {title}
+      </Text>
+      <View
+        style={[
+          styles.content,
+          { backgroundColor: `${colors.textSecondary}10` },
+        ]}
+      >
+        {children}
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    marginBottom: 24,
+  },
+  title: {
+    fontSize: 12,
+    fontWeight: "700",
+    textTransform: "uppercase",
+    letterSpacing: 1,
+    paddingHorizontal: 16,
+    paddingBottom: 8,
+  },
+  content: {
+    borderRadius: 12,
+    marginHorizontal: 16,
+    overflow: "hidden",
+  },
+});
+

package/src/presentation/components/UserProfileHeader.tsx

@@ -0,0 +1,129 @@
+/**
+ * User Profile Header Component
+ * Displays user avatar, name, and ID
+ * Works for both guest and authenticated users
+ */
+
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet, Image } from "react-native";
+import { ChevronRight } from "lucide-react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { useNavigation } from "@react-navigation/native";
+
+export interface UserProfileHeaderProps {
+  /** User display name */
+  displayName?: string;
+  /** User ID */
+  userId?: string;
+  /** Whether user is guest */
+  isGuest?: boolean;
+  /** Avatar URL (optional) */
+  avatarUrl?: string;
+  /** Navigation route for account settings */
+  accountSettingsRoute?: string;
+  /** Custom onPress handler */
+  onPress?: () => void;
+}
+
+export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
+  displayName,
+  userId,
+  isGuest = false,
+  avatarUrl,
+  accountSettingsRoute = "AccountSettings",
+  onPress,
+}) => {
+  const tokens = useAppDesignTokens();
+  const navigation = useNavigation();
+  const colors = tokens.colors;
+
+  const finalDisplayName = displayName || (isGuest ? "Guest" : "User");
+  const finalUserId = userId || "Unknown";
+  const avatarName = isGuest ? "Guest" : finalDisplayName;
+  const finalAvatarUrl =
+    avatarUrl ||
+    `https://ui-avatars.com/api/?name=${encodeURIComponent(avatarName)}&background=${colors.primary.replace("#", "")}&color=fff&size=64`;
+
+  const handlePress = () => {
+    if (onPress) {
+      onPress();
+    } else if (accountSettingsRoute) {
+      navigation.navigate(accountSettingsRoute as never);
+    }
+  };
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.container,
+        {
+          backgroundColor: colors.backgroundPrimary,
+          borderColor: colors.borderLight,
+        },
+      ]}
+      onPress={handlePress}
+      activeOpacity={0.7}
+    >
+      <View style={styles.content}>
+        <Image
+          source={{ uri: finalAvatarUrl }}
+          style={[styles.avatar, { borderColor: `${colors.primary}40` }]}
+        />
+        <View style={styles.textContainer}>
+          <Text
+            style={[styles.name, { color: colors.textPrimary }]}
+            numberOfLines={1}
+          >
+            {finalDisplayName}
+          </Text>
+          <Text
+            style={[styles.id, { color: colors.textSecondary }]}
+            numberOfLines={1}
+          >
+            ID: {finalUserId.substring(0, 8)}...
+          </Text>
+        </View>
+      </View>
+      <ChevronRight size={20} color={colors.textSecondary} />
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "space-between",
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    marginHorizontal: 16,
+    marginTop: 0,
+    borderRadius: 12,
+    borderWidth: 1,
+  },
+  content: {
+    flexDirection: "row",
+    alignItems: "center",
+    flex: 1,
+  },
+  avatar: {
+    width: 48,
+    height: 48,
+    borderRadius: 24,
+    borderWidth: 2,
+  },
+  textContainer: {
+    marginLeft: 12,
+    flex: 1,
+  },
+  name: {
+    fontSize: 16,
+    fontWeight: "600",
+    marginBottom: 4,
+  },
+  id: {
+    fontSize: 12,
+    fontWeight: "400",
+  },
+});
+

package/src/presentation/screens/AppearanceScreen.tsx

@@ -14,15 +14,15 @@ import { View, StyleSheet } from 'react-native';
 
 import { useNavigation } from '@react-navigation/native';
 import { useDesignSystemTheme, useAppDesignTokens, type DesignTokens } from '@umituz/react-native-design-system-theme';
-import { AtomicText, ScreenLayout, SectionHeader, SectionContainer } from '@umituz/react-native-design-system';
+import { AtomicText } from '@umituz/react-native-design-system-atoms';
+import { ScreenLayout } from '@umituz/react-native-design-system-organisms';
 import { useLocalization, getLanguageByCode } from '@umituz/react-native-localization';
 import { SettingItem } from '../components/SettingItem';
 
 export const AppearanceScreen: React.FC = () => {
   const { t, currentLanguage } = useLocalization();
   const navigation = useNavigation();
-  // Only read themeMode, no toggle logic here - theme logic belongs in theme package
-  const { themeMode } = useDesignSystemTheme();
+  const { themeMode, setThemeMode } = useDesignSystemTheme();
   const tokens = useAppDesignTokens();
   const styles = getStyles(tokens);
 
@@ -35,13 +35,8 @@ export const AppearanceScreen: React.FC = () => {
   };
 
   const handleThemeToggle = () => {
-    // Theme toggle logic should be handled by app, not this package
-    // This screen only displays current theme mode
-    // App should provide toggle functionality via navigation params or event emitter
-    // For now, just navigate back - app can handle toggle in its own theme management
-    if (navigation.canGoBack()) {
-      navigation.goBack();
-    }
+    const newMode = themeMode === 'dark' ? 'light' : 'dark';
+    setThemeMode(newMode);
   };
 
   return (
@@ -57,8 +52,10 @@ export const AppearanceScreen: React.FC = () => {
       </View>
 
       {/* Language Section */}
-      <SectionContainer>
-        <SectionHeader>{t('settings.language')}</SectionHeader>
+      <View style={{ marginBottom: tokens.spacing.md }}>
+        <AtomicText type="labelMedium" color="textSecondary" style={styles.sectionHeader}>
+          {t('settings.language')}
+        </AtomicText>
         <SettingItem
           icon="Languages"
           iconGradient={((tokens.colors as any).settingGradients?.language as unknown as string[]) || [tokens.colors.primary, tokens.colors.secondary]}
@@ -67,11 +64,13 @@ export const AppearanceScreen: React.FC = () => {
           onPress={handleLanguagePress}
           testID="language-button"
         />
-      </SectionContainer>
+      </View>
 
       {/* Theme Section */}
-      <SectionContainer>
-        <SectionHeader>{t('settings.appearance.darkMode')}</SectionHeader>
+      <View style={{ marginBottom: tokens.spacing.md }}>
+        <AtomicText type="labelMedium" color="textSecondary" style={styles.sectionHeader}>
+          {t('settings.appearance.darkMode')}
+        </AtomicText>
         <SettingItem
           icon={themeMode === 'dark' ? 'Moon' : 'Sun'}
           iconGradient={
@@ -84,7 +83,7 @@ export const AppearanceScreen: React.FC = () => {
           onPress={handleThemeToggle}
           testID="theme-button"
         />
-      </SectionContainer>
+      </View>
     </ScreenLayout>
   );
 };
@@ -94,11 +93,21 @@ const getStyles = (tokens: DesignTokens) =>
     header: {
       paddingBottom: tokens.spacing.lg,
       paddingTop: tokens.spacing.md,
+      paddingHorizontal: tokens.spacing.lg,
     },
     headerSubtitle: {
       marginTop: tokens.spacing.sm,
       lineHeight: 20,
       opacity: 0.8,
     },
+    sectionHeader: {
+      paddingHorizontal: tokens.spacing.lg,
+      paddingTop: tokens.spacing.lg,
+      paddingBottom: tokens.spacing.md,
+      textTransform: 'uppercase',
+      letterSpacing: 1,
+      fontWeight: '600',
+      fontSize: 12,
+    },
   });
 

package/src/presentation/screens/LanguageSelectionScreen.tsx

@@ -15,8 +15,9 @@ import {
   TextInput,
 } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { useTheme, useAppDesignTokens, withAlpha, STATIC_TOKENS, type DesignTokens } from '@umituz/react-native-design-system-theme';
-import { AtomicIcon, AtomicText, ScreenLayout } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, withAlpha, STATIC_TOKENS, type DesignTokens } from '@umituz/react-native-design-system-theme';
+import { AtomicIcon, AtomicText } from '@umituz/react-native-design-system-atoms';
+import { ScreenLayout } from '@umituz/react-native-design-system-organisms';
 import { useLocalization, searchLanguages, Language, LANGUAGES } from '@umituz/react-native-localization';
 
 /**