@umituz/react-native-settings 4.23.84 → 4.23.86

package/src/presentation/components/SettingsItemCard.tsx

@@ -1,195 +1,152 @@
 import React from "react";
 import { View, Pressable, StyleSheet, type StyleProp, type ViewStyle } from "react-native";
 import {
-    useAppDesignTokens,
-    AtomicIcon,
-    AtomicText,
-    AtomicSwitch,
-    type IconName,
-    withAlpha,
+  useAppDesignTokens,
+  type IconName,
+  withAlpha,
 } from "@umituz/react-native-design-system";
+import { validateTitle, validateDescription, validateSwitchProps } from "../../infrastructure/utils/validators";
+import { sanitizeTitle, sanitizeDescription } from "../../infrastructure/utils/sanitizers";
+import { SettingsItemCardRightElement } from "./settings/SettingsItemCardRightElement";
+import { SettingsItemCardContent } from "./settings/SettingsItemCardContent";
+import { SettingsItemCardSection } from "./settings/SettingsItemCardSection";
 
 export interface SettingsItemCardProps {
-    title: string;
-    description?: string;
-    icon: IconName;
-    onPress?: () => void;
-    containerStyle?: StyleProp<ViewStyle>;
-    sectionTitle?: string;
-    rightIcon?: IconName;
-    iconBgColor?: string;
-    iconColor?: string;
-    showChevron?: boolean;
-    showSwitch?: boolean;
-    switchValue?: boolean;
-    onSwitchChange?: (value: boolean) => void;
-    disabled?: boolean;
-    noBackground?: boolean;
-    hideMargin?: boolean;
+  title: string;
+  description?: string;
+  icon: IconName;
+  onPress?: () => void;
+  containerStyle?: StyleProp<ViewStyle>;
+  sectionTitle?: string;
+  rightIcon?: IconName;
+  iconBgColor?: string;
+  iconColor?: string;
+  showChevron?: boolean;
+  showSwitch?: boolean;
+  switchValue?: boolean;
+  onSwitchChange?: (value: boolean) => void;
+  disabled?: boolean;
+  noBackground?: boolean;
+  hideMargin?: boolean;
 }
 
-
 export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
-    title,
-    description,
-    icon,
-    onPress,
-    containerStyle,
-    sectionTitle,
-    rightIcon = "chevron-forward",
-    iconBgColor,
-    iconColor,
-    showChevron,
-    showSwitch = false,
-    switchValue,
-    onSwitchChange,
-    disabled = false,
-    noBackground = false,
-    hideMargin = false,
+  title,
+  description,
+  icon,
+  onPress,
+  containerStyle: propContainerStyle,
+  sectionTitle,
+  rightIcon = "chevron-forward",
+  iconBgColor,
+  iconColor,
+  showChevron,
+  showSwitch = false,
+  switchValue,
+  onSwitchChange,
+  disabled = false,
+  noBackground = false,
+  hideMargin = false,
 }) => {
+  const tokens = useAppDesignTokens();
+  const colors = tokens.colors;
 
-    const tokens = useAppDesignTokens();
-    const colors = tokens.colors;
+  // Sanitize props (before hooks)
+  const sanitizedTitle = sanitizeTitle(title);
+  const sanitizedDescription = sanitizeDescription(description);
+  const sanitizedSectionTitle = sectionTitle?.trim().slice(0, 100);
 
-    // Validate props in development
-    if (__DEV__) {
-        if (!title || typeof title !== 'string') {
-            console.warn('[SettingsItemCard] Invalid title prop:', title);
-        }
-        if (description && typeof description !== 'string') {
-            console.warn('[SettingsItemCard] Invalid description prop:', description);
-        }
-        if (showSwitch && !onSwitchChange) {
-            console.warn('[SettingsItemCard] Switch shown but no onSwitchChange provided. Switch changes will be ignored.');
-        }
-    }
+  const defaultIconBg = iconBgColor || withAlpha(colors.primary, 0.15);
+  const defaultIconColor = iconColor || colors.primary;
+  const isClickable = !!onPress && !showSwitch;
+  const shouldShowChevron = !showSwitch && (showChevron ?? isClickable);
 
-    // Sanitize string props (trim and limit length)
-    const sanitizedTitle = title?.trim().slice(0, 200) || '';
-    const sanitizedDescription = description?.trim().slice(0, 500);
+  // All hooks must be called before any early returns
+  const rightElement = React.useMemo(
+    () => (
+      <SettingsItemCardRightElement
+        showSwitch={showSwitch}
+        switchValue={switchValue}
+        onSwitchChange={onSwitchChange}
+        disabled={disabled}
+        shouldShowChevron={shouldShowChevron}
+        rightIcon={rightIcon}
+      />
+    ),
+    [showSwitch, switchValue, onSwitchChange, disabled, shouldShowChevron, rightIcon]
+  );
 
-    const defaultIconBg = iconBgColor || withAlpha(colors.primary, 0.15);
-    const defaultIconColor = iconColor || colors.primary;
-    const isClickable = !!onPress && !showSwitch;
-    const shouldShowChevron = !showSwitch && (showChevron ?? isClickable);
+  const content = React.useMemo(
+    () => (
+      <SettingsItemCardContent
+        icon={icon}
+        title={sanitizedTitle}
+        description={sanitizedDescription}
+        iconBgColor={defaultIconBg}
+        iconColor={defaultIconColor}
+        disabled={disabled}
+        rightElement={rightElement}
+      />
+    ),
+    [icon, sanitizedTitle, sanitizedDescription, defaultIconBg, defaultIconColor, disabled, rightElement]
+  );
 
-    const renderRightElement = () => {
-        if (showSwitch) {
-            return (
-                <AtomicSwitch
-                    value={!!switchValue}
-                    onValueChange={onSwitchChange || (() => {
-                        if (__DEV__) {
-                            console.warn('[SettingsItemCard] Switch toggled but no onSwitchChange handler provided');
-                        }
-                    })}
-                    disabled={disabled}
-                />
-            );
-        }
-        if (shouldShowChevron) {
-            return <AtomicIcon name={rightIcon} size="sm" color="textSecondary" />;
-        }
-        return null;
-    };
+  const containerStyle = React.useMemo(
+    () => [
+      styles.sectionContainer,
+      {
+        backgroundColor: noBackground ? "transparent" : colors.surface,
+        borderRadius: noBackground ? 0 : tokens.borders.radius.lg,
+      },
+      hideMargin && { marginBottom: 0 },
+      propContainerStyle,
+    ],
+    [noBackground, colors.surface, tokens.borders.radius.lg, hideMargin, propContainerStyle]
+  );
 
-    const renderContent = () => (
-        <View style={styles.content}>
-            <View style={[styles.iconContainer, { backgroundColor: defaultIconBg, borderRadius: tokens.borders.radius.md }]}>
-                <AtomicIcon name={icon} size="lg" customColor={defaultIconColor} />
-            </View>
-            <View style={styles.textContainer}>
-                <AtomicText
-                    type="bodyLarge"
-                    color={disabled ? "onSurfaceVariant" : "onSurface"}
-                    numberOfLines={1}
-                    style={{ marginBottom: sanitizedDescription ? tokens.spacing.xs : 0, opacity: disabled ? 0.6 : 1 }}
-                >
-                    {sanitizedTitle}
-                </AtomicText>
-                {!!sanitizedDescription && (
-                    <AtomicText type="bodyMedium" color="textSecondary" numberOfLines={2}>
-                        {sanitizedDescription}
-                    </AtomicText>
-                )}
-            </View>
-            {renderRightElement()}
-        </View>
-    );
+  // Validate after hooks (silent validation, no render)
+  const titleWarning = validateTitle(title);
+  const descWarning = validateDescription(description);
+  const switchWarning = validateSwitchProps(showSwitch, onSwitchChange);
 
-    return (
-        <View
-            style={[
-                styles.sectionContainer,
-                { 
-                    backgroundColor: noBackground ? "transparent" : colors.surface,
-                    borderRadius: noBackground ? 0 : tokens.borders.radius.lg,
-                },
-                hideMargin && { marginBottom: 0 },
-                containerStyle,
-            ]}
-        >
+  if (titleWarning || descWarning || switchWarning) {
+    return null;
+  }
 
-
-            {!!sectionTitle && (
-                <View style={styles.headerContainer}>
-                    <AtomicText type="labelMedium" color="textSecondary" style={{ textTransform: 'uppercase' }}>
-                        {sectionTitle.trim().slice(0, 100)}
-                    </AtomicText>
-                </View>
-            )}
-            {isClickable ? (
-                <Pressable
-                    style={({ pressed }) => [
-                        styles.itemContainer,
-                        {
-                            backgroundColor: pressed ? withAlpha(colors.primary, 0.08) : "transparent",
-                        },
-                    ]}
-                    onPress={onPress}
-                >
-                    {renderContent()}
-                </Pressable>
-            ) : (
-                <View style={styles.itemContainer}>
-                    {renderContent()}
-                </View>
-            )}
+  return (
+    <View style={containerStyle}>
+      <SettingsItemCardSection sectionTitle={sanitizedSectionTitle} />
+      {isClickable ? (
+        <Pressable
+          style={({ pressed }) => [
+            styles.itemContainer,
+            {
+              backgroundColor: pressed ? withAlpha(colors.primary, 0.08) : "transparent",
+            },
+          ]}
+          onPress={onPress}
+        >
+          {content}
+        </Pressable>
+      ) : (
+        <View style={styles.itemContainer}>
+          {content}
         </View>
-    );
+      )}
+    </View>
+  );
 };
 
 const styles = StyleSheet.create({
-    sectionContainer: {
-        marginBottom: 16,
-        overflow: "hidden",
-    },
-    headerContainer: {
-        paddingHorizontal: 16,
-        paddingTop: 16,
-        paddingBottom: 8,
-    },
-    itemContainer: {
-        flexDirection: "row",
-        alignItems: "center",
-        paddingHorizontal: 16,
-        paddingVertical: 16,
-        minHeight: 72,
-    },
-    content: {
-        flex: 1,
-        flexDirection: "row",
-        alignItems: "center",
-    },
-    iconContainer: {
-        width: 48,
-        height: 48,
-        justifyContent: "center",
-        alignItems: "center",
-        marginRight: 16,
-    },
-    textContainer: {
-        flex: 1,
-        marginRight: 8,
-    },
+  sectionContainer: {
+    marginBottom: 16,
+    overflow: "hidden",
+  },
+  itemContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: 16,
+    paddingVertical: 16,
+    minHeight: 72,
+  },
 });

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

@@ -0,0 +1,70 @@
+import React from "react";
+import { View } from "react-native";
+import { useAppDesignTokens, AtomicIcon, AtomicText, type IconName } from "@umituz/react-native-design-system";
+
+export interface SettingsItemCardContentProps {
+  icon: IconName;
+  title: string;
+  description?: string;
+  iconBgColor: string;
+  iconColor: string;
+  disabled?: boolean;
+  rightElement: React.ReactElement;
+}
+
+export const SettingsItemCardContent: React.FC<SettingsItemCardContentProps> = React.memo(({
+  icon,
+  title,
+  description,
+  iconBgColor,
+  iconColor,
+  disabled,
+  rightElement,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.content}>
+      <View style={[styles.iconContainer, { backgroundColor: iconBgColor, borderRadius: tokens.borders.radius.md }]}>
+        <AtomicIcon name={icon} size="lg" customColor={iconColor} />
+      </View>
+      <View style={styles.textContainer}>
+        <AtomicText
+          type="bodyLarge"
+          color={disabled ? "onSurfaceVariant" : "onSurface"}
+          numberOfLines={1}
+          style={{ marginBottom: description ? tokens.spacing.xs : 0, opacity: disabled ? 0.6 : 1 }}
+        >
+          {title}
+        </AtomicText>
+        {!!description && (
+          <AtomicText type="bodyMedium" color="textSecondary" numberOfLines={2}>
+            {description}
+          </AtomicText>
+        )}
+      </View>
+      {rightElement}
+    </View>
+  );
+});
+
+SettingsItemCardContent.displayName = "SettingsItemCardContent";
+
+const styles = {
+  content: {
+    flex: 1,
+    flexDirection: "row",
+    alignItems: "center",
+  },
+  iconContainer: {
+    width: 48,
+    height: 48,
+    justifyContent: "center",
+    alignItems: "center",
+    marginRight: 16,
+  },
+  textContainer: {
+    flex: 1,
+    marginRight: 8,
+  },
+} as const;

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

@@ -0,0 +1,42 @@
+import React from "react";
+import { AtomicIcon, AtomicSwitch, type IconName } from "@umituz/react-native-design-system";
+
+export interface SettingsItemCardRightElementProps {
+  showSwitch: boolean;
+  switchValue?: boolean;
+  onSwitchChange?: (value: boolean) => void;
+  disabled?: boolean;
+  shouldShowChevron: boolean;
+  rightIcon: IconName;
+}
+
+export const SettingsItemCardRightElement: React.FC<SettingsItemCardRightElementProps> = React.memo(({
+  showSwitch,
+  switchValue,
+  onSwitchChange,
+  disabled,
+  shouldShowChevron,
+  rightIcon,
+}) => {
+  const handleSwitchChange = React.useCallback((value: boolean) => {
+    if (onSwitchChange) {
+      onSwitchChange(value);
+    }
+  }, [onSwitchChange]);
+
+  if (showSwitch) {
+    return (
+      <AtomicSwitch
+        value={!!switchValue}
+        onValueChange={handleSwitchChange}
+        disabled={disabled}
+      />
+    );
+  }
+  if (shouldShowChevron) {
+    return <AtomicIcon name={rightIcon} size="sm" color="textSecondary" />;
+  }
+  return null;
+});
+
+SettingsItemCardRightElement.displayName = "SettingsItemCardRightElement";

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

@@ -0,0 +1,29 @@
+import React from "react";
+import { View } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system";
+
+export interface SettingsItemCardSectionProps {
+  sectionTitle?: string;
+}
+
+export const SettingsItemCardSection: React.FC<SettingsItemCardSectionProps> = React.memo(({ sectionTitle }) => {
+  if (!sectionTitle) return null;
+
+  return (
+    <View style={styles.headerContainer}>
+      <AtomicText type="labelMedium" color="textSecondary" style={{ textTransform: "uppercase" }}>
+        {sectionTitle}
+      </AtomicText>
+    </View>
+  );
+});
+
+SettingsItemCardSection.displayName = "SettingsItemCardSection";
+
+const styles = {
+  headerContainer: {
+    paddingHorizontal: 16,
+    paddingTop: 16,
+    paddingBottom: 8,
+  },
+} as const;

package/src/presentation/hooks/useSettingsScreenConfig.ts

@@ -27,6 +27,8 @@ import {
   createFAQConfig,
   createSubscriptionConfig,
 } from "../utils/config-creators";
+import { createUserProfileDisplay } from "../utils/userProfileUtils";
+import { createAccountConfig } from "../utils/accountConfigUtils";
 import type { SettingsConfig } from "../screens/types";
 import type { FeedbackFormData } from "../utils/config-creators";
 import type { AppInfo, FAQData, UserProfileDisplay, AdditionalScreen } from "../navigation/types";
@@ -127,60 +129,23 @@ export const useSettingsScreenConfig = (
     showAbout, showLegal, showFaqs, showRating,
   ]);
 
-  const userProfile = useMemo((): UserProfileDisplay => {
-    const isAnonymous = userProfileData?.isAnonymous ?? true;
-
-    // Ensure t function is available before using it
-    const anonymousName = typeof t === 'function'
-      ? t("settings.profile.anonymousName")
-      : 'Anonymous';
-
-    return {
-      displayName: userProfileData?.displayName || anonymousName,
-      userId: userProfileData?.userId ?? undefined,
-      isAnonymous,
-      avatarUrl: userProfileData?.avatarUrl ?? undefined,
-      onPress: isAnonymous ? handleSignIn : undefined,
-      accountSettingsRoute: isAnonymous ? undefined : "Account",
-    };
-  }, [userProfileData, t, handleSignIn]);
-
-  const accountConfig = useMemo((): AccountScreenConfig => {
-    const isAnonymous = user?.isAnonymous ?? true;
-
-    // Ensure t function is available before using it
-    const getTranslation = (key: string, fallback: string) =>
-      typeof t === 'function' ? t(key) : fallback;
-
-    return {
-      profile: {
-        displayName: userProfileData?.displayName || user?.displayName || getTranslation("settings.profile.anonymousName", "Anonymous"),
-        userId: userProfileData?.userId ?? user?.uid ?? undefined,
-        isAnonymous,
-        avatarUrl: userProfileData?.avatarUrl ?? user?.photoURL ?? undefined,
-        benefits: isAnonymous ? [
-          getTranslation("settings.profile.benefits.saveHistory", "Save history"),
-          getTranslation("settings.profile.benefits.syncDevices", "Sync devices"),
-          getTranslation("settings.profile.benefits.cloudSync", "Cloud sync"),
-          getTranslation("settings.profile.benefits.secureBackup", "Secure backup"),
-        ] : undefined,
-      },
-      isAnonymous,
-      editProfileText: getTranslation("settings.account.editProfile", "Edit Profile"),
-      onSignIn: handleSignIn,
-      accountActions: {
-        onLogout: handleSignOut,
-        onDeleteAccount: handleDeleteAccount,
-        logoutText: getTranslation("settings.account.logout", "Log Out"),
-        logoutConfirmTitle: getTranslation("settings.account.logoutConfirmTitle", "Log Out"),
-        logoutConfirmMessage: getTranslation("settings.account.logoutConfirmMessage", "Are you sure you want to log out?"),
-        cancelText: getTranslation("common.cancel", "Cancel"),
-        deleteAccountText: getTranslation("settings.account.deleteAccount", "Delete Account"),
-        deleteConfirmTitle: getTranslation("settings.account.deleteConfirmTitle", "Delete Account"),
-        deleteConfirmMessage: getTranslation("settings.account.deleteConfirmMessage", "Are you sure you want to delete your account? This action cannot be undone."),
-      },
-    };
-  }, [user, userProfileData, handleSignIn, handleSignOut, handleDeleteAccount, t]);
+  const userProfile = useMemo(() => createUserProfileDisplay({
+    profileData: userProfileData,
+    t,
+    onSignIn: handleSignIn,
+  }), [userProfileData, t, handleSignIn]);
+
+  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 ?? undefined,
+    onSignIn: handleSignIn,
+    onLogout: handleSignOut,
+    onDeleteAccount: handleDeleteAccount,
+    t,
+  }), [user, userProfileData, handleSignIn, handleSignOut, handleDeleteAccount, t]);
 
   const translatedFaqData = useMemo((): FAQData | undefined => {
     if (!faqData) return undefined;

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -7,20 +7,10 @@
 
 import React from "react";
 import {
-  useAppDesignTokens,
   StackNavigator,
-  type StackScreen,
   type StackNavigatorConfig,
 } from "@umituz/react-native-design-system";
-import { useLocalization, 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";
-import { AboutScreen } from "../../domains/about";
-import { LegalScreen } from "../../domains/legal";
-import { GamificationScreen } from "../../domains/gamification";
+import { useLocalization } from "../../domains/localization";
 import { useNavigationHandlers, useSettingsScreens } from "./hooks";
 import {
   createNotificationTranslations,
@@ -33,20 +23,7 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = (pr
   const {
     appInfo,
     legalUrls,
-    faqData,
-    config = {},
-    showUserProfile = false,
-    userProfile,
-    accountConfig,
-    additionalScreens = [],
-    devSettings,
-    customSections = [],
-    showHeader = true,
-    showCloseButton = false,
-    onClose,
-    gamificationConfig,
   } = props;
-  const tokens = useAppDesignTokens();
   const { t } = useLocalization();
   const { handlePrivacyPress, handleTermsPress, handleEulaPress, aboutConfig } =
     useNavigationHandlers(appInfo, legalUrls);