@umituz/react-native-settings 2.0.0 → 2.4.1

package/src/infrastructure/storage/SettingsStore.ts

@@ -29,18 +29,29 @@ interface SettingsStore {
 
 const DEFAULT_OFFLINE_USER_ID = 'offline_user';
 
-const getDefaultSettings = (userId: string): UserSettings => ({
-  userId,
-  theme: 'auto',
-  language: 'en-US',
-  notificationsEnabled: true,
-  emailNotifications: true,
-  pushNotifications: true,
-  soundEnabled: true,
-  vibrationEnabled: true,
-  privacyMode: false,
-  updatedAt: new Date(),
-});
+const DEFAULT_SETTINGS_CACHE = new Map<string, UserSettings>();
+
+const getDefaultSettings = (userId: string): UserSettings => {
+  if (DEFAULT_SETTINGS_CACHE.has(userId)) {
+    return DEFAULT_SETTINGS_CACHE.get(userId)!;
+  }
+  
+  const settings = {
+    userId,
+    theme: 'auto' as const,
+    language: 'en-US',
+    notificationsEnabled: true,
+    emailNotifications: true,
+    pushNotifications: true,
+    soundEnabled: true,
+    vibrationEnabled: true,
+    privacyMode: false,
+    updatedAt: new Date(),
+  };
+  
+  DEFAULT_SETTINGS_CACHE.set(userId, settings);
+  return settings;
+};
 
 export const useSettingsStore = create<SettingsStore>((set, get) => ({
   settings: null,
@@ -48,28 +59,47 @@ export const useSettingsStore = create<SettingsStore>((set, get) => ({
   error: null,
 
   loadSettings: async (userId: string) => {
+    if (__DEV__) {
+      console.log('SettingsStore: Loading settings for user:', userId);
+    }
+    
     set({ loading: true, error: null });
 
-    const defaultSettings = getDefaultSettings(userId);
-    const storageKey = createUserKey(StorageKey.SETTINGS, userId);
-
-    // ✅ DRY: Storage domain handles JSON parse, error handling
-    const result = await storageRepository.getItem<UserSettings>(storageKey, defaultSettings);
-    const data = unwrap(result, defaultSettings);
-
-    // ✅ CLEAN CODE: Auto-save defaults if not exists
-    if (!result.success) {
-      await storageRepository.setItem(storageKey, defaultSettings);
+    try {
+      const defaultSettings = getDefaultSettings(userId);
+      const storageKey = createUserKey(StorageKey.SETTINGS, userId);
+
+      // ✅ DRY: Storage domain handles JSON parse, error handling
+      const result = await storageRepository.getItem<UserSettings>(storageKey, defaultSettings);
+      const data = unwrap(result, defaultSettings);
+
+      // ✅ CLEAN CODE: Auto-save defaults if not exists
+      if (!result.success) {
+        await storageRepository.setItem(storageKey, defaultSettings);
+      }
+
+      set({
+        settings: data,
+        loading: false,
+        error: null,
+      });
+
+      if (__DEV__) {
+        console.log('SettingsStore: Settings loaded successfully');
+      }
+    } catch (error) {
+      if (__DEV__) {
+        console.error('SettingsStore: Failed to load settings:', error);
+      }
+      set({ loading: false, error: 'Failed to load settings' });
     }
-
-    set({
-      settings: data,
-      loading: false,
-      error: null,
-    });
   },
 
   updateSettings: async (updates: Partial<UserSettings>) => {
+    if (__DEV__) {
+      console.log('SettingsStore: Updating settings with:', updates);
+    }
+
     const { settings } = get();
 
     // ✅ CLEAN CODE: Auto-initialize if settings not loaded
@@ -80,28 +110,43 @@ export const useSettingsStore = create<SettingsStore>((set, get) => ({
     // ✅ DEFENSIVE: Verify settings loaded successfully
     const currentSettings = get().settings;
     if (!currentSettings) {
-      set({ error: 'Failed to initialize settings' });
+      const errorMsg = 'Failed to initialize settings';
+      if (__DEV__) {
+        console.error('SettingsStore:', errorMsg);
+      }
+      set({ error: errorMsg });
       return;
     }
 
     set({ loading: true, error: null });
 
-    const updatedSettings: UserSettings = {
-      ...currentSettings,
-      ...updates,
-      updatedAt: new Date(),
-    };
-
-    const storageKey = createUserKey(StorageKey.SETTINGS, currentSettings.userId);
-
-    // ✅ DRY: Storage domain replaces JSON.stringify + AsyncStorage + try/catch
-    const result = await storageRepository.setItem(storageKey, updatedSettings);
-
-    set({
-      settings: result.success ? updatedSettings : currentSettings,
-      loading: false,
-      error: null,
-    });
+    try {
+      const updatedSettings: UserSettings = {
+        ...currentSettings,
+        ...updates,
+        updatedAt: new Date(),
+      };
+
+      const storageKey = createUserKey(StorageKey.SETTINGS, currentSettings.userId);
+
+      // ✅ DRY: Storage domain replaces JSON.stringify + AsyncStorage + try/catch
+      const result = await storageRepository.setItem(storageKey, updatedSettings);
+
+      set({
+        settings: result.success ? updatedSettings : currentSettings,
+        loading: false,
+        error: null,
+      });
+
+      if (__DEV__) {
+        console.log('SettingsStore: Settings updated successfully');
+      }
+    } catch (error) {
+      if (__DEV__) {
+        console.error('SettingsStore: Failed to update settings:', error);
+      }
+      set({ loading: false, error: 'Failed to update settings' });
+    }
   },
 
   resetSettings: async (userId: string) => {

package/src/infrastructure/storage/__tests__/SettingsStore.test.tsx

@@ -0,0 +1,302 @@
+/**
+ * Tests for SettingsStore and useSettings Hook
+ */
+
+import { renderHook, act } from '@testing-library/react-hooks';
+import { useSettings, useSettingsStore } from '../SettingsStore';
+import type { UserSettings } from '../../../domain/repositories/ISettingsRepository';
+
+// Mock storage repository
+const mockStorageRepository = {
+  getItem: jest.fn(),
+  setItem: jest.fn(),
+  removeItem: jest.fn(),
+  clear: jest.fn(),
+};
+
+jest.mock('@umituz/react-native-storage', () => ({
+  storageRepository: mockStorageRepository,
+  StorageKey: {
+    SETTINGS: 'settings',
+  },
+  createUserKey: (key: string, userId: string) => `${key}_${userId}`,
+  unwrap: (result: any, defaultValue: any) => result.success ? result.data : defaultValue,
+}));
+
+describe('SettingsStore', () => {
+  const mockUserId = 'test-user-123';
+  const mockSettings: UserSettings = {
+    userId: mockUserId,
+    theme: 'dark',
+    language: 'en-US',
+    notificationsEnabled: true,
+    emailNotifications: false,
+    pushNotifications: true,
+    soundEnabled: true,
+    vibrationEnabled: false,
+    privacyMode: false,
+    updatedAt: new Date('2023-01-01'),
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('loadSettings', () => {
+    it('loads settings successfully from storage', async () => {
+      mockStorageRepository.getItem.mockResolvedValue({
+        success: true,
+        data: mockSettings,
+      });
+
+      const { result } = renderHook(() => useSettingsStore());
+
+      await act(async () => {
+        await result.current.loadSettings(mockUserId);
+      });
+
+      expect(result.current.settings).toEqual(mockSettings);
+      expect(result.current.loading).toBe(false);
+      expect(result.current.error).toBeNull();
+      expect(mockStorageRepository.getItem).toHaveBeenCalledWith(
+        `settings_${mockUserId}`,
+        expect.any(Object)
+      );
+    });
+
+    it('uses default settings when storage fails', async () => {
+      mockStorageRepository.getItem.mockResolvedValue({
+        success: false,
+        error: 'Storage error',
+      });
+      mockStorageRepository.setItem.mockResolvedValue({
+        success: true,
+      });
+
+      const { result } = renderHook(() => useSettingsStore());
+
+      await act(async () => {
+        await result.current.loadSettings(mockUserId);
+      });
+
+      expect(result.current.settings).toBeDefined();
+      expect(result.current.settings?.userId).toBe(mockUserId);
+      expect(result.current.settings?.theme).toBe('auto');
+      expect(result.current.loading).toBe(false);
+      expect(result.current.error).toBeNull();
+      expect(mockStorageRepository.setItem).toHaveBeenCalled();
+    });
+
+    it('handles loading state correctly', async () => {
+      mockStorageRepository.getItem.mockImplementation(() => new Promise(resolve => 
+        setTimeout(() => resolve({ success: true, data: mockSettings }), 100)
+      ));
+
+      const { result } = renderHook(() => useSettingsStore());
+
+      act(() => {
+        result.current.loadSettings(mockUserId);
+      });
+
+      expect(result.current.loading).toBe(true);
+
+      await act(async () => {
+        await new Promise(resolve => setTimeout(resolve, 150));
+      });
+
+      expect(result.current.loading).toBe(false);
+      expect(result.current.settings).toEqual(mockSettings);
+    });
+
+    it('handles storage exceptions', async () => {
+      mockStorageRepository.getItem.mockRejectedValue(new Error('Storage exception'));
+
+      const { result } = renderHook(() => useSettingsStore());
+
+      await act(async () => {
+        await result.current.loadSettings(mockUserId);
+      });
+
+      expect(result.current.loading).toBe(false);
+      expect(result.current.error).toBe('Failed to load settings');
+      expect(result.current.settings).toBeNull();
+    });
+  });
+
+  describe('updateSettings', () => {
+    it('updates settings successfully', async () => {
+      // First load settings
+      mockStorageRepository.getItem.mockResolvedValue({
+        success: true,
+        data: mockSettings,
+      });
+      mockStorageRepository.setItem.mockResolvedValue({
+        success: true,
+      });
+
+      const { result } = renderHook(() => useSettingsStore());
+
+      await act(async () => {
+        await result.current.loadSettings(mockUserId);
+      });
+
+      // Then update settings
+      const updates = { theme: 'light' as const, notificationsEnabled: false };
+
+      await act(async () => {
+        await result.current.updateSettings(updates);
+      });
+
+      expect(result.current.settings?.theme).toBe('light');
+      expect(result.current.settings?.notificationsEnabled).toBe(false);
+      expect(result.current.settings?.updatedAt).toBeInstanceOf(Date);
+      expect(mockStorageRepository.setItem).toHaveBeenCalledWith(
+        `settings_${mockUserId}`,
+        expect.objectContaining({
+          theme: 'light',
+          notificationsEnabled: false,
+        })
+      );
+    });
+
+    it('auto-initializes settings when not loaded', async () => {
+      mockStorageRepository.getItem
+        .mockResolvedValueOnce({ success: false, error: 'Not found' })
+        .mockResolvedValueOnce({ success: true, data: expect.any(Object) });
+      mockStorageRepository.setItem.mockResolvedValue({ success: true });
+
+      const { result } = renderHook(() => useSettingsStore());
+
+      await act(async () => {
+        await result.current.updateSettings({ theme: 'light' as const });
+      });
+
+      expect(result.current.settings).toBeDefined();
+      expect(result.current.settings?.theme).toBe('light');
+    });
+
+    it('handles update failures gracefully', async () => {
+      mockStorageRepository.getItem.mockResolvedValue({
+        success: true,
+        data: mockSettings,
+      });
+      mockStorageRepository.setItem.mockResolvedValue({
+        success: false,
+        error: 'Update failed',
+      });
+
+      const { result } = renderHook(() => useSettingsStore());
+
+      await act(async () => {
+        await result.current.loadSettings(mockUserId);
+      });
+
+      const originalSettings = result.current.settings;
+
+      await act(async () => {
+        await result.current.updateSettings({ theme: 'light' as const });
+      });
+
+      // Settings should remain unchanged on failure
+      expect(result.current.settings).toEqual(originalSettings);
+      expect(result.current.loading).toBe(false);
+    });
+
+    it('handles update exceptions', async () => {
+      mockStorageRepository.getItem.mockResolvedValue({
+        success: true,
+        data: mockSettings,
+      });
+      mockStorageRepository.setItem.mockRejectedValue(new Error('Update exception'));
+
+      const { result } = renderHook(() => useSettingsStore());
+
+      await act(async () => {
+        await result.current.loadSettings(mockUserId);
+      });
+
+      await act(async () => {
+        await result.current.updateSettings({ theme: 'light' as const });
+      });
+
+      expect(result.current.loading).toBe(false);
+      expect(result.current.error).toBe('Failed to update settings');
+    });
+  });
+
+  describe('resetSettings', () => {
+    it('resets settings to defaults', async () => {
+      mockStorageRepository.getItem.mockResolvedValue({
+        success: true,
+        data: mockSettings,
+      });
+      mockStorageRepository.setItem.mockResolvedValue({
+        success: true,
+      });
+
+      const { result } = renderHook(() => useSettingsStore());
+
+      await act(async () => {
+        await result.current.loadSettings(mockUserId);
+      });
+
+      await act(async () => {
+        await result.current.resetSettings(mockUserId);
+      });
+
+      expect(result.current.settings?.theme).toBe('auto');
+      expect(result.current.settings?.language).toBe('en-US');
+      expect(result.current.settings?.notificationsEnabled).toBe(true);
+      expect(mockStorageRepository.setItem).toHaveBeenCalledWith(
+        `settings_${mockUserId}`,
+        expect.objectContaining({
+          theme: 'auto',
+          language: 'en-US',
+        })
+      );
+    });
+  });
+
+  describe('clearError', () => {
+    it('clears error state', async () => {
+      mockStorageRepository.getItem.mockRejectedValue(new Error('Test error'));
+
+      const { result } = renderHook(() => useSettingsStore());
+
+      await act(async () => {
+        await result.current.loadSettings(mockUserId);
+      });
+
+      expect(result.current.error).toBe('Failed to load settings');
+
+      act(() => {
+        result.current.clearError();
+      });
+
+      expect(result.current.error).toBeNull();
+    });
+  });
+});
+
+describe('useSettings Hook', () => {
+  it('provides all store methods and state', () => {
+    const { result } = renderHook(() => useSettings());
+
+    expect(result.current).toHaveProperty('settings');
+    expect(result.current).toHaveProperty('loading');
+    expect(result.current).toHaveProperty('error');
+    expect(result.current).toHaveProperty('loadSettings');
+    expect(result.current).toHaveProperty('updateSettings');
+    expect(result.current).toHaveProperty('resetSettings');
+    expect(result.current).toHaveProperty('clearError');
+  });
+
+  it('is a thin wrapper around useSettingsStore', () => {
+    const storeResult = renderHook(() => useSettingsStore()).result;
+    const hookResult = renderHook(() => useSettings()).result;
+
+    expect(Object.keys(storeResult.current)).toEqual(
+      expect.arrayContaining(Object.keys(hookResult.current))
+    );
+  });
+});

package/src/presentation/components/CloudSyncSetting.tsx

@@ -3,7 +3,7 @@
  * Single Responsibility: Display cloud sync setting item
  */
 
-import React from "react";
+import React, { useCallback } from "react";
 import { Cloud } from "lucide-react-native";
 import { SettingItem } from "./SettingItem";
 import type { SettingItemProps } from "./SettingItem";
@@ -19,7 +19,7 @@ export interface CloudSyncSettingProps {
 }
 
 export const CloudSyncSetting: React.FC<CloudSyncSettingProps> = ({
-  title = "Cloud Sync",
+  title,
   description,
   isSyncing = false,
   lastSynced,
@@ -27,33 +27,27 @@ export const CloudSyncSetting: React.FC<CloudSyncSettingProps> = ({
   iconColor,
   titleColor,
 }) => {
-  const formatLastSynced = (date: Date | null | undefined): string => {
-    if (!date) return "Never synced";
+  const formatLastSynced = useCallback((date: Date | null | undefined): string => {
+    if (!date) return "never_synced";
     const now = new Date();
     const diff = now.getTime() - date.getTime();
     const minutes = Math.floor(diff / 60000);
     const hours = Math.floor(minutes / 60);
     const days = Math.floor(hours / 24);
 
-    if (minutes < 1) return "Just now";
-    if (minutes < 60) return `${minutes}m ago`;
-    if (hours < 24) return `${hours}h ago`;
-    if (days < 7) return `${days}d ago`;
+    if (minutes < 1) return "just_now";
+    if (minutes < 60) return `${minutes}m_ago`;
+    if (hours < 24) return `${hours}h_ago`;
+    if (days < 7) return `${days}d_ago`;
     return date.toLocaleDateString();
-  };
+  }, []);
 
-  const displayDescription =
-    description ||
-    (isSyncing
-      ? "Syncing..."
-      : lastSynced
-        ? `Last synced: ${formatLastSynced(lastSynced)}`
-        : "Sync your data to the cloud");
+  const displayDescription = description || (isSyncing ? "syncing" : lastSynced ? `last_synced_${formatLastSynced(lastSynced)}` : "sync_to_cloud");
 
   return (
     <SettingItem
       icon={Cloud}
-      title={title}
+      title={title || "cloud_sync"}
       value={displayDescription}
       onPress={onPress}
       iconColor={iconColor}

package/src/presentation/components/DisclaimerCard.tsx

@@ -0,0 +1,115 @@
+/**
+ * Disclaimer Card Component
+ * Extracted from DisclaimerSetting to follow single responsibility and 200-line rules
+ */
+
+import React from 'react';
+import {
+  View,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+
+import { useAppDesignTokens, withAlpha } from '@umituz/react-native-design-system-theme';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system-atoms';
+
+export interface DisclaimerCardProps {
+  title: string;
+  shortMessage: string;
+  iconName: string;
+  iconColor: string;
+  backgroundColor: string;
+  onPress: () => void;
+}
+
+export const DisclaimerCard: React.FC<DisclaimerCardProps> = ({
+  title,
+  shortMessage,
+  iconName,
+  iconColor,
+  backgroundColor,
+  onPress,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.container,
+        { backgroundColor },
+      ]}
+      onPress={onPress}
+      activeOpacity={0.7}
+      testID="disclaimer-setting"
+    >
+      {/* Icon and Title Row */}
+      <View style={styles.headerRow}>
+        <View
+          style={[
+            styles.iconContainer,
+            {
+              backgroundColor: withAlpha(iconColor, 0.2),
+              borderColor: withAlpha(iconColor, 0.4),
+              borderWidth: 1,
+            },
+          ]}
+        >
+          <AtomicIcon name={iconName} color="warning" />
+        </View>
+        <AtomicText type="bodyLarge" color="primary" style={styles.title}>
+          {title}
+        </AtomicText>
+        <AtomicIcon name="ArrowRight" color="secondary" size="sm" />
+      </View>
+
+      {/* Short Message */}
+      <AtomicText
+        type="bodySmall"
+        color="secondary"
+        style={styles.shortMessage}
+      >
+        {shortMessage}
+      </AtomicText>
+    </TouchableOpacity>
+  );
+};
+
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  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,
+    },
+  });