@umituz/react-native-settings 2.0.0 → 2.4.0

package/src/presentation/components/DisclaimerModal.tsx

@@ -0,0 +1,104 @@
+/**
+ * Disclaimer Modal Component
+ * Extracted from DisclaimerSetting to follow single responsibility and 200-line rules
+ */
+
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+  ScrollView,
+} from 'react-native';
+
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system-atoms';
+
+export interface DisclaimerModalProps {
+  visible: boolean;
+  title: string;
+  content: string;
+  onClose: () => void;
+}
+
+export const DisclaimerModal: React.FC<DisclaimerModalProps> = ({
+  visible,
+  title,
+  content,
+  onClose,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
+
+  if (!visible) return null;
+
+  return (
+    <View
+      style={[
+        styles.modalContainer,
+        { backgroundColor: tokens.colors.backgroundPrimary },
+      ]}
+    >
+      {/* Modal Header */}
+      <View
+        style={[
+          styles.modalHeader,
+          { borderBottomColor: tokens.colors.borderLight },
+        ]}
+      >
+        <AtomicText type="headlineMedium" color="primary">
+          {title}
+        </AtomicText>
+        <TouchableOpacity
+          onPress={onClose}
+          testID="close-disclaimer-modal"
+        >
+          <AtomicIcon name="X" color="primary" size="md" />
+        </TouchableOpacity>
+      </View>
+
+      {/* Scrollable Content */}
+      <ScrollView
+        style={styles.modalContent}
+        contentContainerStyle={styles.modalContentContainer}
+      >
+        <AtomicText
+          type="bodyMedium"
+          color="primary"
+          style={styles.modalText}
+        >
+          {content}
+        </AtomicText>
+      </ScrollView>
+    </View>
+  );
+};
+
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    modalContainer: {
+      flex: 1,
+    },
+
+    modalHeader: {
+      flexDirection: 'row',
+      justifyContent: 'space-between',
+      alignItems: 'center',
+      paddingHorizontal: 20,
+      paddingVertical: 16,
+      borderBottomWidth: 1,
+    },
+
+    modalContent: {
+      flex: 1,
+    },
+
+    modalContentContainer: {
+      padding: 20,
+    },
+
+    modalText: {
+      lineHeight: 24,
+      fontSize: 15,
+    },
+  });

package/src/presentation/components/DisclaimerSetting.tsx

@@ -1,8 +1,8 @@
 /**
  * DisclaimerSetting Component
  *
- * Displays health/wellness app disclaimer with important legal notice
- * Used in About screens for apps that require medical/health disclaimers
+ * Displays customizable disclaimer with important legal notice
+ * Used in About screens for apps that require disclaimers
  *
  * Features:
  * - Tappable card that opens full disclaimer modal
@@ -17,180 +17,98 @@
  * - Requires translations: settings.disclaimer.title, settings.disclaimer.message, settings.disclaimer.shortMessage
  */
 
-import React, { useState } from 'react';
-import {
-  View,
-  StyleSheet,
-  TouchableOpacity,
-  Modal,
-  ScrollView,
-} from 'react-native';
+import React, { useState, useEffect, useCallback } from 'react';
+import { Modal } from 'react-native';
 
 import { useAppDesignTokens, withAlpha } from '@umituz/react-native-design-system-theme';
-import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system-atoms';
 import { useLocalization } from '@umituz/react-native-localization';
-
-type DesignTokens = ReturnType<typeof useAppDesignTokens>;
-
-export const DisclaimerSetting: React.FC = () => {
+import { DisclaimerCard } from './DisclaimerCard';
+import { DisclaimerModal } from './DisclaimerModal';
+
+export interface DisclaimerSettingProps {
+  /** Custom title translation key */
+  titleKey?: string;
+  /** Custom message translation key */
+  messageKey?: string;
+  /** Custom short message translation key */
+  shortMessageKey?: string;
+  /** Custom icon name */
+  iconName?: string;
+  /** Custom icon color */
+  iconColor?: string;
+  /** Custom background color */
+  backgroundColor?: string;
+  /** Custom modal title */
+  modalTitle?: string;
+  /** Custom modal content */
+  modalContent?: string;
+}
+
+export const DisclaimerSetting: React.FC<DisclaimerSettingProps> = ({
+  titleKey = "settings.disclaimer.title",
+  messageKey = "settings.disclaimer.message",
+  shortMessageKey = "settings.disclaimer.shortMessage",
+  iconName = "AlertTriangle",
+  iconColor,
+  backgroundColor,
+  modalTitle,
+  modalContent,
+}) => {
   const { t } = useLocalization();
   const tokens = useAppDesignTokens();
-  const styles = getStyles(tokens);
   const [modalVisible, setModalVisible] = useState(false);
 
+  useEffect(() => {
+    return () => {
+      setModalVisible(false);
+    };
+  }, []);
+
+  const title = modalTitle || t(titleKey);
+  const content = modalContent || t(messageKey);
+  const shortMessage = t(shortMessageKey);
+  const finalIconColor = iconColor || tokens.colors.warning;
+  const finalBackgroundColor = backgroundColor || withAlpha(finalIconColor, 0.1);
+
+  const handleOpenModal = useCallback(() => {
+    setModalVisible(true);
+    if (__DEV__) {
+      console.log('DisclaimerSetting: Modal opened');
+    }
+  }, []);
+
+  const handleCloseModal = useCallback(() => {
+    setModalVisible(false);
+    if (__DEV__) {
+      console.log('DisclaimerSetting: Modal closed');
+    }
+  }, []);
+
   return (
     <>
-      <TouchableOpacity
-        style={[
-          styles.container,
-          { backgroundColor: withAlpha(tokens.colors.warning, 0.1) },
-        ]}
-        onPress={() => setModalVisible(true)}
-        activeOpacity={0.7}
-        testID="disclaimer-setting"
-      >
-        {/* Icon and Title Row */}
-        <View style={styles.headerRow}>
-          <View
-            style={[
-              styles.iconContainer,
-              {
-                backgroundColor: withAlpha(tokens.colors.warning, 0.2),
-                borderColor: withAlpha(tokens.colors.warning, 0.4),
-                borderWidth: 1,
-              },
-            ]}
-          >
-            <AtomicIcon name="AlertTriangle" color="warning" />
-          </View>
-          <AtomicText type="bodyLarge" color="primary" style={styles.title}>
-            {t('settings.disclaimer.title')}
-          </AtomicText>
-          <AtomicIcon name="ArrowRight" color="secondary" size="sm" />
-        </View>
+      <DisclaimerCard
+        title={title}
+        shortMessage={shortMessage}
+        iconName={iconName}
+        iconColor={finalIconColor}
+        backgroundColor={finalBackgroundColor}
+        onPress={handleOpenModal}
+      />
 
-        {/* Short Message */}
-        <AtomicText
-          type="bodySmall"
-          color="secondary"
-          style={styles.shortMessage}
-        >
-          {t('settings.disclaimer.shortMessage')}
-        </AtomicText>
-      </TouchableOpacity>
-
-      {/* Full Disclaimer Modal */}
       <Modal
         visible={modalVisible}
         animationType="slide"
         presentationStyle="pageSheet"
-        onRequestClose={() => setModalVisible(false)}
+        onRequestClose={handleCloseModal}
       >
-        <View
-          style={[
-            styles.modalContainer,
-            { backgroundColor: tokens.colors.backgroundPrimary },
-          ]}
-        >
-          {/* Modal Header */}
-          <View
-            style={[
-              styles.modalHeader,
-              { borderBottomColor: tokens.colors.borderLight },
-            ]}
-          >
-            <AtomicText type="headlineMedium" color="primary">
-              {t('settings.disclaimer.title')}
-            </AtomicText>
-            <TouchableOpacity
-              onPress={() => setModalVisible(false)}
-              testID="close-disclaimer-modal"
-            >
-              <AtomicIcon name="X" color="primary" size="md" />
-            </TouchableOpacity>
-          </View>
-
-          {/* Scrollable Content */}
-          <ScrollView
-            style={styles.modalContent}
-            contentContainerStyle={styles.modalContentContainer}
-          >
-            <AtomicText
-              type="bodyMedium"
-              color="primary"
-              style={styles.modalText}
-            >
-              {t('settings.disclaimer.message')}
-            </AtomicText>
-          </ScrollView>
-        </View>
+        <DisclaimerModal
+          visible={modalVisible}
+          title={title}
+          content={content}
+          onClose={handleCloseModal}
+        />
       </Modal>
     </>
   );
 };
 
-const getStyles = (tokens: DesignTokens) =>
-  StyleSheet.create({
-    container: {
-      paddingHorizontal: tokens.spacing.md,
-      paddingVertical: tokens.spacing.md,
-      marginHorizontal: tokens.spacing.md,
-      marginTop: 8,
-      marginBottom: 8,
-      borderRadius: 12,
-    },
-
-    headerRow: {
-      flexDirection: 'row',
-      alignItems: 'center',
-      marginBottom: 12,
-    },
-
-    iconContainer: {
-      width: 40,
-      height: 40,
-      borderRadius: 20,
-      alignItems: 'center',
-      justifyContent: 'center',
-      marginRight: 12,
-    },
-
-    title: {
-      flex: 1,
-      fontWeight: tokens.typography.labelLarge.fontWeight as any,
-      fontSize: tokens.typography.labelLarge.fontSize,
-    },
-
-    shortMessage: {
-      lineHeight: 18,
-      paddingLeft: 52, // Align with title (40px icon + 12px margin)
-      fontSize: 13,
-    },
-
-    modalContainer: {
-      flex: 1,
-    },
-
-    modalHeader: {
-      flexDirection: 'row',
-      justifyContent: 'space-between',
-      alignItems: 'center',
-      paddingHorizontal: 20,
-      paddingVertical: 16,
-      borderBottomWidth: 1,
-    },
-
-    modalContent: {
-      flex: 1,
-    },
-
-    modalContentContainer: {
-      padding: 20,
-    },
-
-    modalText: {
-      lineHeight: 24,
-      fontSize: 15,
-    },
-  });
-

package/src/presentation/components/SettingItem.tsx

@@ -34,6 +34,13 @@ export interface SettingItemProps {
   testID?: string;
   /** Disable the item */
   disabled?: boolean;
+  /** Custom switch thumb color */
+  switchThumbColor?: string;
+  /** Custom switch track colors */
+  switchTrackColors?: {
+    false: string;
+    true: string;
+  };
 }
 
 export const SettingItem: React.FC<SettingItemProps> = ({
@@ -49,6 +56,8 @@ export const SettingItem: React.FC<SettingItemProps> = ({
   titleColor,
   testID,
   disabled = false,
+  switchThumbColor,
+  switchTrackColors,
 }) => {
   const tokens = useAppDesignTokens();
   const colors = tokens.colors;
@@ -113,11 +122,11 @@ export const SettingItem: React.FC<SettingItemProps> = ({
             <Switch
               value={switchValue}
               onValueChange={onSwitchChange}
-              trackColor={{
+              trackColor={switchTrackColors || {
                 false: `${colors.textSecondary}30`,
                 true: colors.primary,
               }}
-              thumbColor="#FFFFFF"
+              thumbColor={switchThumbColor || "#FFFFFF"}
               ios_backgroundColor={`${colors.textSecondary}30`}
             />
           ) : (

package/src/presentation/components/SettingsErrorBoundary.tsx

@@ -0,0 +1,126 @@
+/**
+ * Settings Error Boundary Component
+ * Catches and handles errors in settings components
+ */
+
+import React, { Component, ReactNode } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system-atoms';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  fallbackTitle?: string;
+  fallbackMessage?: string;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+export class SettingsErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  override componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+    if (__DEV__) {
+      console.error('Settings Error Boundary caught an error:', error, errorInfo);
+    }
+  }
+
+  override render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <ErrorBoundaryFallback 
+          error={this.state.error}
+          fallbackTitle={this.props.fallbackTitle}
+          fallbackMessage={this.props.fallbackMessage}
+        />
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+interface ErrorBoundaryFallbackProps {
+  error?: Error;
+  fallbackTitle?: string;
+  fallbackMessage?: string;
+}
+
+const ErrorBoundaryFallback: React.FC<ErrorBoundaryFallbackProps> = ({ 
+  error,
+  fallbackTitle = "error_boundary.title",
+  fallbackMessage = "error_boundary.message"
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const title = __DEV__ && error?.message ? "error_boundary.dev_title" : fallbackTitle;
+  const message = __DEV__ && error?.message 
+    ? `error_boundary.dev_message: ${error.message}` 
+    : fallbackMessage;
+
+  return (
+    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+      <View style={[styles.content, { backgroundColor: tokens.colors.surface }]}>
+        <AtomicIcon 
+          name="AlertTriangle" 
+          color="warning" 
+          size="lg"
+          style={styles.icon}
+        />
+        <AtomicText 
+          type="headlineSmall" 
+          color="primary" 
+          style={styles.title}
+        >
+          {title}
+        </AtomicText>
+        <AtomicText 
+          type="bodyMedium" 
+          color="secondary" 
+          style={styles.message}
+        >
+          {message}
+        </AtomicText>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 16,
+    justifyContent: 'center',
+  },
+  content: {
+    alignItems: 'center',
+    padding: 24,
+    borderRadius: 12,
+  },
+  icon: {
+    marginBottom: 16,
+  },
+  title: {
+    marginBottom: 8,
+    textAlign: 'center',
+  },
+  message: {
+    textAlign: 'center',
+    lineHeight: 20,
+  },
+});

package/src/presentation/components/StorageClearSetting.tsx

@@ -18,13 +18,18 @@ export interface StorageClearSettingProps {
 }
 
 export const StorageClearSetting: React.FC<StorageClearSettingProps> = ({
-  title = "Clear All Storage",
-  description = "Clear all local storage data (DEV only)",
+  title,
+  description,
   onPress,
-  iconColor = "#EF4444",
-  titleColor = "#EF4444",
+  iconColor,
+  titleColor,
   isLast = false,
 }) => {
+  // Default values for DEV mode
+  const defaultTitle = title || "Clear All Storage";
+  const defaultDescription = description || "Clear all local storage data (DEV only)";
+  const defaultIconColor = iconColor || "#EF4444";
+  const defaultTitleColor = titleColor || "#EF4444";
   // Only render in DEV mode
   if (!__DEV__) {
     return null;
@@ -33,11 +38,11 @@ export const StorageClearSetting: React.FC<StorageClearSettingProps> = ({
   return (
     <SettingItem
       icon={Trash2}
-      title={title}
-      value={description}
+      title={defaultTitle}
+      value={defaultDescription}
       onPress={onPress}
-      iconColor={iconColor}
-      titleColor={titleColor}
+      iconColor={defaultIconColor}
+      titleColor={defaultTitleColor}
       isLast={isLast}
     />
   );

package/src/presentation/components/UserProfileHeader.tsx

@@ -4,7 +4,7 @@
  * Works for both guest and authenticated users
  */
 
-import React from "react";
+import React, { useState, useCallback } from "react";
 import { View, TouchableOpacity, StyleSheet, Image } from "react-native";
 import { ChevronRight } from "lucide-react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
@@ -24,6 +24,14 @@ export interface UserProfileHeaderProps {
   accountSettingsRoute?: string;
   /** Custom onPress handler */
   onPress?: () => void;
+  /** Custom guest user display name */
+  guestDisplayName?: string;
+  /** Custom avatar service URL */
+  avatarServiceUrl?: string;
+  /** Default user display name when no displayName provided */
+  defaultUserDisplayName?: string;
+  /** Default guest display name */
+  defaultGuestDisplayName?: string;
 }
 
 export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
@@ -33,25 +41,32 @@ export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
   avatarUrl,
   accountSettingsRoute,
   onPress,
+  guestDisplayName,
+  avatarServiceUrl,
+  defaultUserDisplayName,
+  defaultGuestDisplayName,
 }) => {
   const tokens = useAppDesignTokens();
   const navigation = useNavigation();
   const colors = tokens.colors;
   const spacing = tokens.spacing;
+  const [imageError, setImageError] = useState(false);
 
-  const finalDisplayName = displayName || (isGuest ? "Guest" : "User");
-  const avatarName = isGuest ? "Guest" : finalDisplayName;
+  const finalDisplayName = displayName || (isGuest ? guestDisplayName || defaultGuestDisplayName || "Guest" : defaultUserDisplayName || "User");
+  const avatarName = isGuest ? guestDisplayName || defaultGuestDisplayName || defaultGuestDisplayName || "Guest" : finalDisplayName;
+  
+  const defaultAvatarService = avatarServiceUrl || "https://ui-avatars.com/api";
   const finalAvatarUrl =
-    avatarUrl ||
-    `https://ui-avatars.com/api/?name=${encodeURIComponent(avatarName)}&background=${colors.primary.replace("#", "")}&color=fff&size=64`;
+    (imageError ? null : avatarUrl) ||
+    `${defaultAvatarService}/?name=${encodeURIComponent(avatarName)}&background=${colors.primary.replace("#", "")}&color=fff&size=64`;
 
-  const handlePress = () => {
+  const handlePress = useCallback(() => {
     if (onPress) {
       onPress();
     } else if (accountSettingsRoute) {
       navigation.navigate(accountSettingsRoute as never);
     }
-  };
+  }, [onPress, accountSettingsRoute, navigation]);
 
   const shouldShowChevron = !!(onPress || accountSettingsRoute);
   const isPressable = !!(onPress || accountSettingsRoute);
@@ -70,10 +85,23 @@ export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
     <>
       <View style={styles.content}>
         <View style={[styles.avatarContainer, { borderColor: `${colors.primary}30` }]}>
-          <Image
-            source={{ uri: finalAvatarUrl }}
-            style={styles.avatar}
-          />
+          {finalAvatarUrl ? (
+            <Image
+              source={{ uri: finalAvatarUrl }}
+              style={styles.avatar}
+              onError={() => setImageError(true)}
+            />
+          ) : (
+            <View style={[styles.avatarFallback, { backgroundColor: `${colors.primary}20` }]}>
+              <AtomicText
+                type="headlineMedium"
+                color="primary"
+                style={styles.avatarText}
+              >
+                {avatarName.charAt(0).toUpperCase()}
+              </AtomicText>
+            </View>
+          )}
         </View>
         <View style={[styles.textContainer, { marginLeft: spacing.md }]}>
           <AtomicText
@@ -135,6 +163,15 @@ const styles = StyleSheet.create({
     width: "100%",
     height: "100%",
   },
+  avatarFallback: {
+    width: "100%",
+    height: "100%",
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  avatarText: {
+    fontWeight: "700",
+  },
   textContainer: {
     flex: 1,
   },