@umituz/react-native-settings 5.3.2 → 5.3.4

package/src/presentation/components/SettingsNavigationItem.tsx

@@ -5,7 +5,7 @@
  */
 
 import React from "react";
-import type { IconName } from "@umituz/react-native-design-system";
+import type { IconName } from "@umituz/react-native-design-system/atoms";
 import { SettingsItemCard } from "./SettingsItemCard";
 import { useSettingsNavigation } from "../navigation/hooks/useSettingsNavigation";
 import { createRouteOrPressHandler } from "../navigation/utils/navigationHelpers";

package/src/presentation/components/SettingsSection.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 
 export interface SettingsSectionProps {
   title: string;

package/src/presentation/components/settings/SettingsItemCardContent.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View } from "react-native";
-import { useAppDesignTokens, AtomicIcon, AtomicText, type IconName } from "@umituz/react-native-design-system";
+import { AtomicIcon, AtomicText, type IconName } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 
 export interface SettingsItemCardContentProps {
   icon: IconName;

package/src/presentation/components/settings/SettingsItemCardRightElement.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { AtomicIcon, AtomicSwitch, type IconName } from "@umituz/react-native-design-system";
+import { AtomicIcon, AtomicSwitch, type IconName } from "@umituz/react-native-design-system/atoms";
 
 export interface SettingsItemCardRightElementProps {
   showSwitch: boolean;

package/src/presentation/components/settings/SettingsItemCardSection.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { View } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
 
 export interface SettingsItemCardSectionProps {
   sectionTitle?: string;

package/src/presentation/hooks/mutations/useSettingsMutations.ts

@@ -4,7 +4,7 @@
  * Mutations for updating and resetting user settings
  */
 
-import { useMutation, useQueryClient } from '@umituz/react-native-design-system';
+import { useMutation, useQueryClient } from '@umituz/react-native-design-system/tanstack';
 import { getSettingsService } from '../../../infrastructure/services/SettingsService';
 import { SETTINGS_QUERY_KEY } from '../queries/useSettingsQuery';
 import type { UserSettings } from '../../../application/ports/ISettingsRepository';

package/src/presentation/hooks/queries/useSettingsQuery.ts

@@ -4,7 +4,7 @@
  * Fetches user settings using TanStack Query
  */
 
-import { useQuery } from '@umituz/react-native-design-system';
+import { useQuery } from '@umituz/react-native-design-system/tanstack';
 import { getSettingsService } from '../../../infrastructure/services/SettingsService';
 
 export const SETTINGS_QUERY_KEY = ['settings'];

package/src/presentation/hooks/useSettingsScreenConfig.ts

@@ -2,18 +2,20 @@
  * useSettingsScreenConfig Hook
  *
  * One-stop hook for settings screen configuration.
- * Auth features are optional - pass authData for apps that use @umituz/react-native-auth.
- * For apps WITH auth, use the convenience wrapper from '@umituz/react-native-settings/account'.
+ * Handles auth, feedback, and all settings config internally.
+ * Apps pass subscription config from subscription package.
  */
 
 import { useMemo } from "react";
+import { useAuth, useUserProfile, useAuthHandlers } from "@umituz/react-native-auth";
 import { createUserProfileDisplay } from "../utils/userProfileUtils";
 import { createAccountConfig } from "../utils/accountConfigUtils";
 import { translateFAQData } from "../utils/faqTranslator";
 import { useSettingsConfigFactory } from "../utils/settingsConfigFactory";
 import type { SettingsConfig, SettingsTranslations } from "../screens/types";
 import type { FeedbackFormData } from "../utils/config-creators";
-import type { AppInfo, FAQData, UserProfileDisplay, AdditionalScreen, AccountConfig } from "../navigation/types";
+import type { AppInfo, FAQData, UserProfileDisplay, AdditionalScreen } from "../navigation/types";
+import type { AccountScreenConfig } from "@umituz/react-native-auth";
 
 export interface SettingsFeatures {
   notifications?: boolean;
@@ -29,18 +31,6 @@ export interface SettingsFeatures {
   subscription?: boolean;
 }
 
-/** Optional auth data - provide this if your app uses @umituz/react-native-auth */
-export interface AuthData {
-  user: { displayName?: string | null; uid?: string; isAnonymous?: boolean; photoURL?: string | null } | null;
-  loading: boolean;
-  isAuthReady: boolean;
-  userProfileData: { displayName?: string; userId?: string; avatarUrl?: string } | null;
-  handleRatePress: () => void;
-  handleSignOut: () => Promise<void>;
-  handleDeleteAccount: () => Promise<void>;
-  handleSignIn: () => void;
-}
-
 export interface UseSettingsScreenConfigParams {
   appInfo: AppInfo;
   faqData?: FAQData;
@@ -49,38 +39,21 @@ export interface UseSettingsScreenConfigParams {
   additionalScreens?: AdditionalScreen[];
   features?: SettingsFeatures;
   translations?: SettingsTranslations;
-  /** Auth data - optional. For apps with auth, provide this or use '@umituz/react-native-settings/account' */
-  authData?: AuthData;
 }
 
 export interface SettingsScreenConfigResult {
   settingsConfig: SettingsConfig;
   userProfile: UserProfileDisplay;
-  accountConfig: AccountConfig | null;
+  accountConfig: AccountScreenConfig;
   translatedFaqData: FAQData | undefined;
   isLoading: boolean;
   isAuthReady: boolean;
 }
 
-/** Default auth state for apps without authentication */
-const DEFAULT_AUTH: AuthData = {
-  user: null,
-  loading: false,
-  isAuthReady: true,
-  userProfileData: null,
-  handleRatePress: () => {},
-  handleSignOut: async () => {},
-  handleDeleteAccount: async () => {},
-  handleSignIn: () => {},
-};
-
 export const useSettingsScreenConfig = (
   params: UseSettingsScreenConfigParams
 ): SettingsScreenConfigResult => {
-  const { appInfo, faqData, isPremium, onFeedbackSubmit, features = {}, translations, authData } = params;
-
-  const auth = authData || DEFAULT_AUTH;
-  const { user, loading, isAuthReady, userProfileData, handleRatePress, handleSignOut, handleDeleteAccount, handleSignIn } = auth;
+  const { appInfo, faqData, isPremium, onFeedbackSubmit, features = {}, translations } = params;
 
   const {
     notifications: showNotifications = true,
@@ -96,6 +69,13 @@ export const useSettingsScreenConfig = (
     subscription: showSubscription = true,
   } = features;
 
+  const { user, loading, isAuthReady } = useAuth();
+  const userProfileData = useUserProfile({});
+
+  // Use centralized auth handlers
+  const { handleRatePress, handleSignOut, handleDeleteAccount, handleSignIn } =
+    useAuthHandlers(appInfo, translations?.errors);
+
   // Use settings config factory
   const baseSettingsConfig = useSettingsConfigFactory({
     onFeedbackSubmit,
@@ -156,26 +136,21 @@ export const useSettingsScreenConfig = (
   }, [baseSettingsConfig, translations]);
 
   const userProfile = useMemo(() => createUserProfileDisplay({
-    profileData: userProfileData || undefined,
+    profileData: userProfileData,
     onSignIn: handleSignIn,
   }), [userProfileData, handleSignIn]);
 
-  const accountConfig = useMemo(() => {
-    // Skip account config if no auth data is provided
-    if (!authData) return null;
-
-    return createAccountConfig({
-      displayName: userProfileData?.displayName || user?.displayName || undefined,
-      userId: userProfileData?.userId || user?.uid || undefined,
-      photoURL: user?.photoURL || undefined,
-      isAnonymous: user?.isAnonymous,
-      avatarUrl: userProfileData?.avatarUrl,
-      onSignIn: handleSignIn,
-      onLogout: handleSignOut,
-      onDeleteAccount: handleDeleteAccount,
-      translations: translations?.account as any,
-    });
-  }, [authData, user, userProfileData, handleSignIn, handleSignOut, handleDeleteAccount, translations]);
+  const accountConfig = useMemo(() => createAccountConfig({
+    displayName: userProfileData?.displayName || user?.displayName || undefined,
+    userId: userProfileData?.userId || user?.uid || undefined,
+    photoURL: user?.photoURL || undefined,
+    isAnonymous: user?.isAnonymous,
+    avatarUrl: userProfileData?.avatarUrl,
+    onSignIn: handleSignIn,
+    onLogout: handleSignOut,
+    onDeleteAccount: handleDeleteAccount,
+    translations: translations?.account as any,
+  }), [user, userProfileData, handleSignIn, handleSignOut, handleDeleteAccount, translations]);
 
   const translatedFaqData = useMemo(() =>
     translateFAQData(faqData, appInfo),

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -6,10 +6,7 @@
  */
 
 import React from "react";
-import {
-  StackNavigator,
-  type StackNavigatorConfig,
-} from "@umituz/react-native-design-system";
+import { StackNavigator, type StackNavigatorConfig } from "@umituz/react-native-design-system/molecules";
 import { useNavigationHandlers, useSettingsScreens } from "./hooks";
 import {
   createNotificationTranslations,

package/src/presentation/navigation/hooks/useSettingsScreens.ts

@@ -1,7 +1,8 @@
 import { useMemo } from 'react';
-import type { StackScreen } from "@umituz/react-native-design-system";
+import type { StackScreen } from "@umituz/react-native-design-system/molecules";
 import { LanguageSelectionScreen } from "../../../domains/localization";
 import { NotificationSettingsScreen } from "../../../domains/notifications";
+import { AccountScreen } from "@umituz/react-native-auth";
 import { SettingsScreen } from "../../screens/SettingsScreen";
 import { AppearanceScreen } from "../../screens/AppearanceScreen";
 import { FAQScreen } from "../../../domains/faqs";
@@ -28,8 +29,6 @@ export interface UseSettingsScreensProps extends SettingsStackNavigatorProps {
   legalProps: LegalScreenProps;
   notificationTranslations: NotificationSettingsTranslations;
   quietHoursTranslations: QuietHoursTranslations;
-  /** Optional AccountScreen component from @umituz/react-native-auth. If not provided, account screen is skipped. */
-  AccountScreenComponent?: React.ComponentType<any>;
 }
 
 export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[] => {
@@ -52,8 +51,6 @@ export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[
     gamificationConfig,
     videoTutorialConfig,
     accountConfig,
-    AccountScreenComponent,
-    ProfileSectionComponent,
   } = props;
 
   const translations = config?.translations?.features;
@@ -72,7 +69,6 @@ export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[
         showHeader,
         showCloseButton,
         onClose,
-        ProfileSectionComponent,
       }
     );
 
@@ -123,8 +119,8 @@ export const useSettingsScreens = (props: UseSettingsScreensProps): StackScreen[
     });
 
     const accountScreen = createConditionalScreen(
-      !!(accountConfig && AccountScreenComponent),
-      () => createScreenWithProps("Account", AccountScreenComponent as any, { config: accountConfig })
+      !!accountConfig,
+      () => createScreenWithProps("Account", AccountScreen as any, { config: accountConfig })
     );
 
     const videoTutorialScreen = createScreenWithProps("VideoTutorial", VideoTutorialsScreen as any, {

package/src/presentation/navigation/types.ts

@@ -88,41 +88,11 @@ export interface FAQData {
 }
 
 /**
- * Account Configuration (locally defined to avoid hard dependency on auth package)
- * Compatible with @umituz/react-native-auth's AccountScreenConfig
+ * Import AccountScreenConfig from auth package
  */
-export interface AccountConfig {
-  profile: {
-    displayName?: string;
-    userId?: string;
-    isAnonymous: boolean;
-    avatarUrl?: string;
-    accountSettingsRoute?: string;
-    benefits?: string[];
-  };
-  accountActions?: {
-    logoutText: string;
-    deleteAccountText: string;
-    changePasswordText?: string;
-    logoutConfirmTitle: string;
-    logoutConfirmMessage: string;
-    deleteConfirmTitle: string;
-    deleteConfirmMessage: string;
-    deleteErrorTitle?: string;
-    deleteErrorMessage?: string;
-    cancelText: string;
-    onLogout: () => Promise<void>;
-    onDeleteAccount: () => Promise<void>;
-    onChangePassword?: () => void;
-    showChangePassword?: boolean;
-  };
-  isAnonymous: boolean;
-  editProfileText?: string;
-  onEditProfile?: () => void;
-  onSignIn?: () => void;
-  title?: string;
-  PasswordPromptComponent?: React.ReactNode;
-}
+import type { AccountScreenConfig } from "@umituz/react-native-auth";
+
+export type AccountConfig = AccountScreenConfig;
 
 /**
  * Settings Stack Navigator Props
@@ -145,8 +115,4 @@ export interface SettingsStackNavigatorProps {
   onClose?: () => void;
   gamificationConfig?: import("../../domains/gamification").GamificationSettingsConfig;
   videoTutorialConfig?: import("../../domains/video-tutorials").VideoTutorialsScreenProps;
-  /** Injected AccountScreen component from @umituz/react-native-auth (via account subpath). If not provided, account screen is not registered. */
-  AccountScreenComponent?: React.ComponentType<any>;
-  /** Injected ProfileSection component from @umituz/react-native-auth (via account subpath). If not provided, profile section is not rendered. */
-  ProfileSectionComponent?: React.ComponentType<any>;
 }

package/src/presentation/screens/SettingsScreen.tsx

@@ -4,9 +4,7 @@
  */
 
 import React from "react";
-import {
-  ScreenLayout,
-} from "@umituz/react-native-design-system";
+import { ScreenLayout } from "@umituz/react-native-design-system/layouts";
 import { useSettingsScreen } from "./hooks/useSettingsScreen";
 import { SettingsHeader } from "./components/SettingsHeader";
 import { SettingsContent } from "./components/SettingsContent";
@@ -53,8 +51,6 @@ export interface SettingsScreenProps {
   showHeader?: boolean;
   /** Password prompt modal component */
   PasswordPromptComponent?: React.ReactNode;
-  /** Injected ProfileSection component from @umituz/react-native-auth (via account subpath) */
-  ProfileSectionComponent?: React.ComponentType<any>;
 }
 
 export const SettingsScreen: React.FC<SettingsScreenProps> = (props) => {
@@ -74,7 +70,6 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = (props) => {
     devSettings,
     gamificationConfig,
     PasswordPromptComponent,
-    ProfileSectionComponent,
   } = props;
 
   const {
@@ -114,7 +109,6 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = (props) => {
             customSections={customSections}
             devSettings={devSettings}
             gamificationConfig={gamificationConfig}
-            ProfileSectionComponent={ProfileSectionComponent}
           />
         )}
       </ScreenLayout>

package/src/presentation/screens/components/SettingsContent.tsx

@@ -29,7 +29,6 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
   emptyStateText,
   devSettings,
   gamificationConfig,
-  ProfileSectionComponent,
 }) => {
   const translations = normalizedConfig.translations;
   const { level } = useGamification(gamificationConfig);
@@ -49,10 +48,9 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
   return (
     <View style={styles.container}>
       {showUserProfile && (
-        <ProfileSectionLoader
-          userProfile={userProfile}
+        <ProfileSectionLoader 
+          userProfile={userProfile} 
           translations={translations?.profile}
-          ProfileSectionComponent={ProfileSectionComponent}
         />
       )}
 

package/src/presentation/screens/components/SettingsHeader.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import { Pressable } from "react-native";
-import { useAppDesignTokens, AtomicIcon, useAppNavigation, NavigationHeader } from "@umituz/react-native-design-system";
+import { AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppNavigation, NavigationHeader } from "@umituz/react-native-design-system/molecules";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 
 
 interface SettingsHeaderProps {

package/src/presentation/screens/components/sections/ProfileSectionLoader.tsx

@@ -1,6 +1,7 @@
 import React from "react";
 import { View, StyleSheet } from "react-native";
-import { useAppNavigation } from "@umituz/react-native-design-system";
+import { ProfileSection } from "@umituz/react-native-auth";
+import { useAppNavigation } from "@umituz/react-native-design-system/molecules";
 
 export interface ProfileSectionLoaderProps {
     userProfile?: {
@@ -16,11 +17,9 @@ export interface ProfileSectionLoaderProps {
         anonymousName?: string;
         signIn?: string;
     };
-    /** Injected ProfileSection component from @umituz/react-native-auth (via account subpath) */
-    ProfileSectionComponent?: React.ComponentType<any>;
 }
 
-export const ProfileSectionLoader: React.FC<ProfileSectionLoaderProps> = React.memo(({ userProfile, translations, ProfileSectionComponent }) => {
+export const ProfileSectionLoader: React.FC<ProfileSectionLoaderProps> = React.memo(({ userProfile, translations }) => {
     const navigation = useAppNavigation();
 
     const handlePress = React.useCallback(() => {
@@ -37,11 +36,11 @@ export const ProfileSectionLoader: React.FC<ProfileSectionLoaderProps> = React.m
         return translations?.anonymousName || "";
     }, [translations]);
 
-    if (!userProfile || !ProfileSectionComponent) return null;
+    if (!userProfile) return null;
 
     return (
         <View style={styles.profileContainer}>
-            <ProfileSectionComponent
+            <ProfileSection
                 profile={{
                     displayName: userProfile.displayName || anonymousDisplayName,
                     userId: userProfile.userId,
@@ -57,7 +56,7 @@ export const ProfileSectionLoader: React.FC<ProfileSectionLoaderProps> = React.m
             />
         </View>
     );
-}, (prev, next) => prev.userProfile === next.userProfile && prev.translations === next.translations && prev.ProfileSectionComponent === next.ProfileSectionComponent);
+}, (prev, next) => prev.userProfile === next.userProfile && prev.translations === next.translations);
 
 ProfileSectionLoader.displayName = "ProfileSectionLoader";
 

package/src/presentation/screens/components/types/SettingsContentProps.ts

@@ -48,6 +48,4 @@ export interface SettingsContentProps {
   emptyStateText?: string;
   devSettings?: DevSettingsProps;
   gamificationConfig?: GamificationSettingsConfig;
-  /** Injected ProfileSection component from @umituz/react-native-auth (via account subpath) */
-  ProfileSectionComponent?: React.ComponentType<any>;
 }

package/src/presentation/screens/hooks/useSettingsScreen.ts

@@ -4,7 +4,7 @@
  */
 
 import { useMemo, useCallback } from "react";
-import { useAppNavigation } from "@umituz/react-native-design-system";
+import { useAppNavigation } from "@umituz/react-native-design-system/molecules";
 import { normalizeSettingsConfig } from "../utils/normalizeConfig";
 import { useFeatureDetection } from "./useFeatureDetection";
 import { getAppVersion } from "../../../utils/appUtils";

package/src/presentation/screens/types/CustomSection.ts

@@ -1,5 +1,5 @@
 import type { ReactNode } from "react";
-import type { IconName } from "@umituz/react-native-design-system";
+import type { IconName } from "@umituz/react-native-design-system/atoms";
 
 /**
  * Custom Settings Item

package/src/presentation/utils/accountConfigUtils.ts

@@ -4,7 +4,7 @@
  * Helper functions for creating account screen configurations.
  */
 
-import type { AccountConfig as AccountScreenConfig } from "../navigation/types";
+import type { AccountScreenConfig } from "@umituz/react-native-auth";
 
 export interface AccountTranslations {
   editProfile?: string;

package/src/presentation/utils/screenFactory.ts

@@ -5,7 +5,7 @@
  */
 
 import React from "react";
-import type { StackScreen } from "@umituz/react-native-design-system";
+import type { StackScreen } from "@umituz/react-native-design-system/molecules";
 import type { AdditionalScreen } from "../navigation/types";
 
 /**