@umituz/react-native-settings 4.17.26 → 4.17.30

package/src/domains/disclaimer/presentation/components/DisclaimerModal.tsx

@@ -11,8 +11,7 @@ import {
   ScrollView,
 } from 'react-native';
 
-import { useAppDesignTokens } from '@umituz/react-native-design-system';
-import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicText, AtomicIcon, BaseModal } from '@umituz/react-native-design-system';
 
 export interface DisclaimerModalProps {
   visible: boolean;
@@ -30,56 +29,54 @@ export const DisclaimerModal: React.FC<DisclaimerModalProps> = ({
   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"
+    <BaseModal visible={visible} onClose={onClose}>
+      <View style={styles.modalContentWrapper}>
+        {/* Modal Header */}
+        <View
+          style={[
+            styles.modalHeader,
+            { borderBottomColor: tokens.colors.border },
+          ]}
         >
-          <AtomicIcon name="x" color="primary" size="md" />
-        </TouchableOpacity>
-      </View>
+          <AtomicText type="headlineMedium" color="primary">
+            {title}
+          </AtomicText>
+          <TouchableOpacity
+            onPress={onClose}
+            testID="close-disclaimer-modal"
+          >
+            <AtomicIcon name="close" color="primary" size="md" />
+          </TouchableOpacity>
+        </View>
 
-      {/* Scrollable Content */}
-      <ScrollView
-        style={styles.modalContent}
-        contentContainerStyle={styles.modalContentContainer}
-      >
-        <AtomicText
-          type="bodyMedium"
-          color="primary"
-          style={styles.modalText}
+        {/* Scrollable Content */}
+        <ScrollView
+          style={styles.modalContent}
+          contentContainerStyle={styles.modalContentContainer}
         >
-          {content}
-        </AtomicText>
-      </ScrollView>
-    </View>
+          <AtomicText
+            type="bodyMedium"
+            color="textPrimary"
+            style={styles.modalText}
+          >
+            {content}
+          </AtomicText>
+        </ScrollView>
+      </View>
+    </BaseModal>
   );
 };
 
+
 const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     modalContainer: {
       flex: 1,
     },
-
+    modalContentWrapper: {
+      flex: 1,
+    },
     modalHeader: {
       flexDirection: 'row',
       justifyContent: 'space-between',

package/src/domains/faqs/presentation/components/FAQSection.tsx

@@ -40,7 +40,7 @@ export const FAQSection: React.FC<FAQSectionProps> = ({
                 title: config.title || 'Help & Support',
                 children: renderItem({
                     title: config.description || 'FAQ',
-                    icon: 'help-circle-outline',
+                    icon: 'help-circle',
                     onPress: config.onPress || (() => console.warn('No FAQ handler')),
                     isLast: true,
                 }),

package/src/domains/feedback/presentation/components/FeedbackModal.tsx

@@ -4,9 +4,9 @@
  */
 
 import React from "react";
-import { Modal, View, StyleSheet, TouchableOpacity, ScrollView, KeyboardAvoidingView, Platform } from "react-native";
+import { View, StyleSheet, TouchableOpacity, ScrollView, KeyboardAvoidingView, Platform } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
-import { useResponsiveDesignTokens, AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
+import { useResponsiveDesignTokens, AtomicText, AtomicIcon, BaseModal } from "@umituz/react-native-design-system";
 import { FeedbackForm } from "./FeedbackForm";
 import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
 
@@ -18,7 +18,7 @@ export interface FeedbackModalProps {
     isSubmitting?: boolean;
     title?: string;
     subtitle?: string;
-    texts: any; // Type should ideally be shared or imported
+    texts: any;
 }
 
 export const FeedbackModal: React.FC<FeedbackModalProps> = ({
@@ -34,33 +34,28 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
     const tokens = useResponsiveDesignTokens();
 
     return (
-        <Modal
-            visible={visible}
-            animationType="slide"
-            presentationStyle="pageSheet"
-            onRequestClose={onClose}
-        >
-            <SafeAreaView style={[styles.safeArea, { backgroundColor: tokens.colors.backgroundPrimary }]}>
+        <BaseModal visible={visible} onClose={onClose}>
+            <SafeAreaView style={styles.safeArea}>
                 <KeyboardAvoidingView
                     behavior={Platform.OS === "ios" ? "padding" : "height"}
                     style={styles.keyboardView}
                 >
                     <View style={[styles.header, { borderBottomColor: tokens.colors.border }]}>
                         <View style={styles.headerText}>
-                            <AtomicText type="headlineSmall" style={{ color: tokens.colors.textPrimary }}>
+                            <AtomicText type="headlineSmall" color="textPrimary">
                                 {title}
                             </AtomicText>
                             {subtitle && (
-                                <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary, marginTop: 4 }}>
+                                <AtomicText type="bodySmall" color="textSecondary" style={{ marginTop: 4 }}>
                                     {subtitle}
                                 </AtomicText>
                             )}
                         </View>
                         <TouchableOpacity
                             onPress={onClose}
-                            style={[styles.closeButton, { backgroundColor: tokens.colors.surface }]}
+                            style={[styles.closeButton, { backgroundColor: tokens.colors.surfaceVariant }]}
                         >
-                            <AtomicIcon name="close" customSize={20} customColor={tokens.colors.textPrimary} />
+                            <AtomicIcon name="close" size="sm" color="onSurface" />
                         </TouchableOpacity>
                     </View>
 
@@ -77,10 +72,11 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
                     </ScrollView>
                 </KeyboardAvoidingView>
             </SafeAreaView>
-        </Modal>
+        </BaseModal>
     );
 };
 
+
 const styles = StyleSheet.create({
     safeArea: {
         flex: 1,

package/src/domains/feedback/presentation/components/SupportSection.tsx

@@ -122,14 +122,14 @@ export const SupportSection: React.FC<SupportSectionProps> = ({
                     <>
                         {showFeedback && feedbackConfig.config?.description && renderItem({
                             title: feedbackConfig.config.description,
-                            icon: "mail-outline",
+                            icon: "mail",
                             onPress: () => setModalVisible(true),
                             isLast: !showRating
                         })}
 
                         {showRating && ratingConfig.config?.description && renderItem({
                             title: ratingConfig.config.description,
-                            icon: "star-outline",
+                            icon: "star",
                             onPress: handleRateApp,
                             isLast: true
                         })}

package/src/domains/legal/presentation/components/LegalItem.tsx

@@ -6,18 +6,14 @@
  */
 
 import React from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
-import { useResponsiveDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
-import type { IconName } from "@umituz/react-native-design-system";
-import { StyleCacheService } from "../../domain/services/StyleCacheService";
+import { ListItem } from "@umituz/react-native-design-system";
 
 export interface LegalItemProps {
   /**
-   * Icon name from Lucide library (e.g., "Shield", "FileText", "ScrollText")
+   * Icon name from theme library (Ionicons)
    * If not provided, will use emoji icon
    */
-  iconName?: IconName;
+  iconName?: string;
   /**
    * Icon emoji or text (fallback if iconName not provided)
    */
@@ -48,130 +44,18 @@ export const LegalItem: React.FC<LegalItemProps> = React.memo(({
   onPress,
   testID,
 }) => {
-  const tokens = useResponsiveDesignTokens();
-  
-  // Memoize styles to prevent recreation on every render
-  const styles = React.useMemo(() => {
-    const cacheKey = StyleCacheService.createTokenCacheKey(tokens);
-    return StyleCacheService.getCachedStyles(
-      'LegalItem',
-      cacheKey,
-      () => createLegalItemStyles(tokens)
-    );
-  }, [tokens]);
-
-  // Memoize icon rendering to prevent unnecessary re-renders
-  const renderIcon = React.useCallback(() => {
-    if (iconName) {
-      return (
-        <AtomicIcon
-          name={iconName}
-          size="md"
-          color="info"
-        />
-      );
-    }
-    if (icon) {
-      return (
-        <AtomicText type="bodyLarge" color="info">
-          {icon}
-        </AtomicText>
-      );
-    }
-    return null;
-  }, [iconName, icon]);
-
-  // Memoize icon container style to prevent object creation
-  const iconContainerStyle = React.useMemo(() => [
-    styles.iconContainer, 
-    { backgroundColor: tokens.colors.info + "20" }
-  ], [styles.iconContainer, tokens.colors.info]);
-
-  // Memoize content to prevent unnecessary re-renders
-  const content = React.useMemo(() => (
-    <View style={styles.itemContent}>
-      <View style={styles.itemLeft}>
-        <View style={iconContainerStyle}>
-          {renderIcon()}
-        </View>
-        <View style={styles.itemText}>
-          <AtomicText type="bodyLarge" color="textPrimary">
-            {title}
-          </AtomicText>
-          {description && (
-            <AtomicText
-              type="bodySmall"
-              color="textSecondary"
-              style={styles.itemDescription}
-            >
-              {description}
-            </AtomicText>
-          )}
-        </View>
-      </View>
-      {onPress && (
-        <AtomicText type="bodyMedium" color="textSecondary">›</AtomicText>
-      )}
-    </View>
-  ), [styles.itemContent, styles.itemLeft, styles.itemText, styles.itemDescription, iconContainerStyle, renderIcon, title, description, onPress]);
-
-  // Memoize press handler to prevent child re-renders
-  const handlePress = React.useCallback(() => {
-    onPress?.();
-  }, [onPress]);
-
-  if (onPress) {
-    return (
-      <TouchableOpacity
-        style={styles.itemContainer}
-        onPress={handlePress}
-        testID={testID}
-        activeOpacity={0.7}
-      >
-        {content}
-      </TouchableOpacity>
-    );
-  }
+  // Use iconName if provided, otherwise fallback to default
+  const finalIcon = iconName || icon || "shield-checkmark";
 
   return (
-    <View style={styles.itemContainer} testID={testID}>
-      {content}
-    </View>
+    <ListItem
+      title={title}
+      subtitle={description}
+      leftIcon={finalIcon}
+      rightIcon={onPress ? "chevron-forward" : undefined}
+      onPress={onPress}
+    />
   );
 });
 
-const createLegalItemStyles = (tokens: DesignTokens) => {
-  return StyleSheet.create({
-    itemContainer: {
-      marginBottom: tokens.spacing.xs,
-    },
-    itemContent: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      paddingHorizontal: tokens.spacing.md,
-      paddingVertical: tokens.spacing.md,
-      minHeight: 64,
-    },
-    itemLeft: {
-      flexDirection: "row",
-      alignItems: "center",
-      flex: 1,
-    },
-    iconContainer: {
-      width: 44,
-      height: 44,
-      borderRadius: 22,
-      alignItems: "center",
-      justifyContent: "center",
-      marginRight: tokens.spacing.md,
-    },
-    itemText: {
-      flex: 1,
-    },
-    itemDescription: {
-      marginTop: tokens.spacing.xs,
-    },
-  });
-};
-
+LegalItem.displayName = "LegalItem";

package/src/index.ts

@@ -17,16 +17,26 @@ export type {
   UserSettings,
   SettingsError,
   SettingsResult,
-} from './domain/repositories/ISettingsRepository';
+} from './application/ports/ISettingsRepository';
 
 // =============================================================================
-// INFRASTRUCTURE LAYER - Storage
+// INFRASTRUCTURE LAYER - Services
 // =============================================================================
 
+export { getSettingsService } from './infrastructure/services/SettingsService';
+export { SettingsRepository } from './infrastructure/repositories/SettingsRepository';
+
+// =============================================================================
+// PRESENTATION LAYER - Hooks
+// =============================================================================
+
+export { useSettings } from './presentation/hooks/useSettings';
+export { useSettingsQuery } from './presentation/hooks/queries/useSettingsQuery';
 export {
-  useSettingsStore,
-  useSettings,
-} from './infrastructure/storage/SettingsStore';
+  useUpdateSettingsMutation,
+  useResetSettingsMutation
+} from './presentation/hooks/mutations/useSettingsMutations';
+
 
 // =============================================================================
 // PRESENTATION LAYER - Screens
@@ -71,9 +81,6 @@ export type { SettingsFooterProps } from './presentation/components/SettingsFoot
 
 export { SettingsErrorBoundary } from './presentation/components/SettingsErrorBoundary';
 
-export { CloudSyncSetting } from './presentation/components/CloudSyncSetting';
-export type { CloudSyncSettingProps } from './presentation/components/CloudSyncSetting';
-
 export { StorageClearSetting } from './presentation/components/StorageClearSetting';
 export type { StorageClearSettingProps } from './presentation/components/StorageClearSetting';
 
@@ -118,4 +125,3 @@ export type { OnboardingResetSettingProps } from '@umituz/react-native-onboardin
 export { createSentryTestSetting } from '@umituz/react-native-sentry';
 // @ts-ignore - Re-exporting from peer dependency
 export type { SentryTestSettingProps } from '@umituz/react-native-sentry';
-

package/src/infrastructure/repositories/SettingsRepository.ts

@@ -0,0 +1,105 @@
+/**
+ * Settings Repository Implementation
+ *
+ * Handles data access for user settings using @umituz/react-native-storage
+ */
+
+import { storageRepository, StorageKey, createUserKey } from '@umituz/react-native-storage';
+import type { ISettingsRepository, UserSettings, SettingsResult } from '../../application/ports/ISettingsRepository';
+
+export class SettingsRepository implements ISettingsRepository {
+    private readonly defaultSettings: (userId: string) => UserSettings = (userId: string) => ({
+        userId,
+        theme: 'auto',
+        language: 'en-US',
+        notificationsEnabled: true,
+        emailNotifications: true,
+        pushNotifications: true,
+        soundEnabled: true,
+        vibrationEnabled: true,
+        privacyMode: false,
+        disclaimerAccepted: false,
+        updatedAt: new Date(),
+    });
+
+    async getSettings(userId: string): Promise<SettingsResult<UserSettings>> {
+        try {
+            const storageKey = createUserKey(StorageKey.USER_PREFERENCES, userId);
+            const defaults = this.defaultSettings(userId);
+            const result = await storageRepository.getItem<UserSettings>(storageKey, defaults);
+
+            if (!result.success) {
+                // If not found, save defaults and return them
+                await this.saveSettings(defaults);
+                return { success: true, data: defaults };
+            }
+
+            return {
+                success: true,
+                data: result.data || defaults,
+            };
+        } catch (error) {
+            return {
+                success: false,
+                error: {
+                    code: 'GET_SETTINGS_FAILED',
+                    message: error instanceof Error ? error.message : 'Unknown error',
+                },
+            };
+        }
+    }
+
+    async saveSettings(settings: UserSettings): Promise<SettingsResult<void>> {
+        try {
+            const storageKey = createUserKey(StorageKey.USER_PREFERENCES, settings.userId);
+            const result = await storageRepository.setItem(storageKey, settings);
+
+            if (!result.success) {
+                return {
+                    success: false,
+                    error: {
+                        code: 'SAVE_SETTINGS_FAILED',
+                        message: 'Failed to save settings to storage',
+                    },
+                };
+            }
+
+            return { success: true };
+        } catch (error) {
+            return {
+                success: false,
+                error: {
+                    code: 'SAVE_SETTINGS_FAILED',
+                    message: error instanceof Error ? error.message : 'Unknown error',
+                },
+            };
+        }
+    }
+
+    async deleteSettings(userId: string): Promise<SettingsResult<void>> {
+        try {
+            const storageKey = createUserKey(StorageKey.USER_PREFERENCES, userId);
+            const result = await storageRepository.removeItem(storageKey);
+
+            if (!result.success) {
+                return {
+                    success: false,
+                    error: {
+                        code: 'DELETE_SETTINGS_FAILED',
+                        message: 'Failed to delete settings from storage',
+                    },
+                };
+            }
+
+            return { success: true };
+        } catch (error) {
+            return {
+                success: false,
+                error: {
+                    code: 'DELETE_SETTINGS_FAILED',
+                    message: error instanceof Error ? error.message : 'Unknown error',
+                },
+            };
+        }
+    }
+}

package/src/infrastructure/services/SettingsService.ts

@@ -0,0 +1,47 @@
+/**
+ * Settings Service
+ *
+ * Orchestrates settings operations using SettingsRepository
+ */
+
+import { SettingsRepository } from '../repositories/SettingsRepository';
+import type { UserSettings, SettingsResult } from '../../application/ports/ISettingsRepository';
+
+export class SettingsService {
+    private repository: SettingsRepository;
+    private initialized: boolean = false;
+
+    constructor() {
+        this.repository = new SettingsRepository();
+    }
+
+    async initialize(): Promise<void> {
+        if (this.initialized) return;
+        this.initialized = true;
+    }
+
+    async getSettings(userId: string): Promise<SettingsResult<UserSettings>> {
+        return this.repository.getSettings(userId);
+    }
+
+    async saveSettings(settings: UserSettings): Promise<SettingsResult<void>> {
+        return this.repository.saveSettings(settings);
+    }
+
+    async resetSettings(userId: string): Promise<SettingsResult<void>> {
+        // Repository getSettings handles returning defaults if not found, 
+        // but here we want to explicitly reset.
+        // We can just delete and get again.
+        await this.repository.deleteSettings(userId);
+        return this.repository.getSettings(userId) as unknown as SettingsResult<void>;
+    }
+}
+
+let settingsServiceInstance: SettingsService | null = null;
+
+export function getSettingsService(): SettingsService {
+    if (!settingsServiceInstance) {
+        settingsServiceInstance = new SettingsService();
+    }
+    return settingsServiceInstance;
+}