@umituz/react-native-settings 4.17.14 → 4.17.16

package/src/domains/appearance/__tests__/services/appearanceService.test.ts

@@ -0,0 +1,299 @@
+/**
+ * Appearance Service Tests
+ */
+
+import { AppearanceService, appearanceService } from '../../infrastructure/services/appearanceService';
+import type { ThemeMode, CustomThemeColors } from '../../types';
+
+// Mock dependencies
+jest.mock('../../infrastructure/stores/appearanceStore');
+jest.mock('../../infrastructure/storage/appearanceStorage');
+jest.mock('@umituz/react-native-design-system', () => ({
+  useTheme: {
+    getState: jest.fn(() => ({
+      setThemeMode: jest.fn(),
+    })),
+  },
+  useDesignSystemTheme: {
+    getState: jest.fn(() => ({
+      setThemeMode: jest.fn(),
+      setCustomColors: jest.fn(),
+    })),
+  },
+}));
+
+const mockAppearanceStore = require('../../infrastructure/stores/appearanceStore').useAppearanceStore;
+const mockAppearanceStorage = require('../../infrastructure/storage/appearanceStorage').AppearanceStorage;
+const mockUseTheme = require('@umituz/react-native-design-system').useTheme;
+const mockUseDesignSystemTheme = require('@umituz/react-native-design-system').useDesignSystemTheme;
+
+describe('AppearanceService', () => {
+  let service: AppearanceService;
+  let mockGetState: jest.MockedFunction<typeof mockAppearanceStore.getState>;
+  let mockSetSettings: jest.MockedFunction<typeof mockAppearanceStore.getState>;
+  let mockSetInitialized: jest.MockedFunction<typeof mockAppearanceStore.getState>;
+  let mockUpdateThemeMode: jest.MockedFunction<typeof mockAppearanceStore.getState>;
+  let mockUpdateCustomColors: jest.MockedFunction<typeof mockAppearanceStore.getState>;
+  let mockResetState: jest.MockedFunction<typeof mockAppearanceStore.getState>;
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    
+    service = appearanceService;
+    
+    mockGetState = mockAppearanceStore.getState as jest.MockedFunction<typeof mockAppearanceStore.getState>;
+    mockSetSettings = mockAppearanceStore.getState as jest.MockedFunction<typeof mockAppearanceStore.getState>;
+    mockSetInitialized = mockAppearanceStore.getState as jest.MockedFunction<typeof mockAppearanceStore.getState>;
+    mockUpdateThemeMode = mockAppearanceStore.getState as jest.MockedFunction<typeof mockAppearanceStore.getState>;
+    mockUpdateCustomColors = mockAppearanceStore.getState as jest.MockedFunction<typeof mockAppearanceStore.getState>;
+    mockResetState = mockAppearanceStore.getState as jest.MockedFunction<typeof mockAppearanceStore.getState>;
+
+    // Setup mock implementations
+    mockGetState.mockReturnValue({
+      settings: { themeMode: 'dark' as ThemeMode },
+      isInitialized: false,
+    });
+
+    mockSetSettings.mockReturnValue({} as any);
+    mockSetInitialized.mockReturnValue({} as any);
+    mockUpdateThemeMode.mockReturnValue({} as any);
+    mockUpdateCustomColors.mockReturnValue({} as any);
+    mockResetState.mockReturnValue({} as any);
+
+    mockAppearanceStorage.getSettings.mockResolvedValue(null);
+    mockAppearanceStorage.setSettings.mockResolvedValue();
+    mockAppearanceStorage.clear.mockResolvedValue();
+
+    mockUseTheme.getState.mockReturnValue({
+      setThemeMode: jest.fn(),
+    });
+
+    mockUseDesignSystemTheme.getState.mockReturnValue({
+      setThemeMode: jest.fn(),
+      setCustomColors: jest.fn(),
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  describe('initialize', () => {
+    it('should initialize with saved settings', async () => {
+      const savedSettings = { themeMode: 'light' as ThemeMode };
+      mockAppearanceStorage.getSettings.mockResolvedValue(savedSettings);
+
+      await service.initialize();
+
+      expect(mockAppearanceStorage.getSettings).toHaveBeenCalled();
+      expect(mockSetSettings).toHaveBeenCalledWith(savedSettings);
+      expect(mockSetInitialized).toHaveBeenCalledWith(true);
+      expect(mockUseTheme.getState().setThemeMode).toHaveBeenCalledWith('light');
+      expect(mockUseDesignSystemTheme.getState().setThemeMode).toHaveBeenCalledWith('light');
+      expect(mockUseDesignSystemTheme.getState().setCustomColors).toHaveBeenCalledWith(undefined);
+    });
+
+    it('should initialize with default settings when no saved settings', async () => {
+      mockAppearanceStorage.getSettings.mockResolvedValue(null);
+
+      await service.initialize();
+
+      expect(mockSetSettings).toHaveBeenCalledWith({ themeMode: 'dark' });
+      expect(mockSetInitialized).toHaveBeenCalledWith(true);
+      expect(mockUseTheme.getState().setThemeMode).toHaveBeenCalledWith('dark');
+      expect(mockUseDesignSystemTheme.getState().setThemeMode).toHaveBeenCalledWith('dark');
+    });
+
+    it('should handle initialization errors gracefully', async () => {
+      const error = new Error('Init failed');
+      mockAppearanceStorage.getSettings.mockRejectedValue(error);
+
+      await service.initialize();
+
+      expect(mockSetSettings).toHaveBeenCalledWith({ themeMode: 'dark' });
+      expect(mockSetInitialized).toHaveBeenCalledWith(true);
+    });
+
+    it('should prevent multiple initializations', async () => {
+      const savedSettings = { themeMode: 'light' as ThemeMode };
+      mockAppearanceStorage.getSettings.mockResolvedValue(savedSettings);
+
+      const promise1 = service.initialize();
+      const promise2 = service.initialize();
+
+      await Promise.all([promise1, promise2]);
+
+      expect(mockAppearanceStorage.getSettings).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('getThemeMode', () => {
+    it('should return current theme mode', () => {
+      mockGetState.mockReturnValue({
+        settings: { themeMode: 'light' as ThemeMode },
+        isInitialized: true,
+      });
+
+      const result = service.getThemeMode();
+
+      expect(result).toBe('light');
+      expect(mockGetState).toHaveBeenCalled();
+    });
+  });
+
+  describe('setThemeMode', () => {
+    it('should set theme mode and sync with design system', async () => {
+      const newMode: ThemeMode = 'light';
+      mockGetState.mockReturnValue({
+        settings: { themeMode: 'dark' as ThemeMode },
+        isInitialized: true,
+      });
+
+      await service.setThemeMode(newMode);
+
+      expect(mockUpdateThemeMode).toHaveBeenCalledWith(newMode);
+      expect(mockAppearanceStorage.setSettings).toHaveBeenCalledWith({
+        themeMode: newMode,
+      });
+      expect(mockUseTheme.getState().setThemeMode).toHaveBeenCalledWith(newMode);
+      expect(mockUseDesignSystemTheme.getState().setThemeMode).toHaveBeenCalledWith(newMode);
+    });
+
+    it('should handle setThemeMode errors', async () => {
+      const error = new Error('Set theme failed');
+      mockAppearanceStorage.setSettings.mockRejectedValue(error);
+
+      await expect(service.setThemeMode('light')).rejects.toThrow(error);
+    });
+  });
+
+  describe('toggleTheme', () => {
+    it('should toggle between light and dark', async () => {
+      mockGetState.mockReturnValue({
+        settings: { themeMode: 'light' as ThemeMode },
+        isInitialized: true,
+      });
+
+      await service.toggleTheme();
+
+      expect(mockUpdateThemeMode).toHaveBeenCalledWith('dark');
+    });
+
+    it('should toggle from dark to light', async () => {
+      mockGetState.mockReturnValue({
+        settings: { themeMode: 'dark' as ThemeMode },
+        isInitialized: true,
+      });
+
+      await service.toggleTheme();
+
+      expect(mockUpdateThemeMode).toHaveBeenCalledWith('light');
+    });
+  });
+
+  describe('getCustomColors', () => {
+    it('should return current custom colors', () => {
+      const customColors: CustomThemeColors = { primary: '#FF0000' };
+      mockGetState.mockReturnValue({
+        settings: { themeMode: 'dark', customColors },
+        isInitialized: true,
+      });
+
+      const result = service.getCustomColors();
+
+      expect(result).toEqual(customColors);
+    });
+
+    it('should return undefined when no custom colors', () => {
+      mockGetState.mockReturnValue({
+        settings: { themeMode: 'dark' },
+        isInitialized: true,
+      });
+
+      const result = service.getCustomColors();
+
+      expect(result).toBeUndefined();
+    });
+  });
+
+  describe('setCustomColors', () => {
+    it('should set custom colors and sync with design system', async () => {
+      const newColors: CustomThemeColors = { primary: '#FF0000' };
+      const currentColors = { secondary: '#00FF00' };
+      mockGetState.mockReturnValue({
+        settings: { themeMode: 'dark', customColors: currentColors },
+        isInitialized: true,
+      });
+
+      await service.setCustomColors(newColors);
+
+      expect(mockUpdateCustomColors).toHaveBeenCalledWith({
+        ...currentColors,
+        ...newColors,
+      });
+      expect(mockAppearanceStorage.setSettings).toHaveBeenCalledWith({
+        themeMode: 'dark',
+        customColors: { ...currentColors, ...newColors },
+      });
+      expect(mockUseDesignSystemTheme.getState().setCustomColors).toHaveBeenCalledWith({
+        ...currentColors,
+        ...newColors,
+      });
+    });
+
+    it('should handle setCustomColors errors', async () => {
+      const error = new Error('Set colors failed');
+      mockAppearanceStorage.setSettings.mockRejectedValue(error);
+
+      await expect(service.setCustomColors({ primary: '#FF0000' })).rejects.toThrow(error);
+    });
+  });
+
+  describe('resetCustomColors', () => {
+    it('should reset custom colors', async () => {
+      mockGetState.mockReturnValue({
+        settings: { themeMode: 'dark', customColors: { primary: '#FF0000' } },
+        isInitialized: true,
+      });
+
+      await service.resetCustomColors();
+
+      expect(mockUpdateCustomColors).toHaveBeenCalledWith(undefined);
+      expect(mockAppearanceStorage.setSettings).toHaveBeenCalledWith({
+        themeMode: 'dark',
+        customColors: undefined,
+      });
+      expect(mockUseDesignSystemTheme.getState().setCustomColors).toHaveBeenCalledWith(undefined);
+    });
+  });
+
+  describe('reset', () => {
+    it('should reset all settings', async () => {
+      mockGetState.mockReturnValue({
+        settings: { themeMode: 'light', customColors: { primary: '#FF0000' } },
+        isInitialized: true,
+      });
+
+      await service.reset();
+
+      expect(mockAppearanceStorage.clear).toHaveBeenCalled();
+      expect(mockResetState).toHaveBeenCalled();
+      expect(mockUseTheme.getState().setThemeMode).toHaveBeenCalledWith('dark');
+      expect(mockUseDesignSystemTheme.getState().setThemeMode).toHaveBeenCalledWith('dark');
+      expect(mockUseDesignSystemTheme.getState().setCustomColors).toHaveBeenCalledWith(undefined);
+    });
+  });
+
+  describe('isInitialized', () => {
+    it('should return initialization status', () => {
+      mockGetState.mockReturnValue({
+        settings: { themeMode: 'dark' },
+        isInitialized: true,
+      });
+
+      const result = service.isInitialized();
+
+      expect(result).toBe(true);
+    });
+  });
+});

package/src/domains/appearance/__tests__/setup.ts

@@ -0,0 +1,96 @@
+/**
+ * Jest Setup File
+ * 
+ * Global test setup for React Native Appearance package
+ */
+
+import 'react-native-gesture-handler/jestSetup';
+
+// Mock console methods for testing
+if (__DEV__) {
+  global.console = {
+    ...console,
+    // Suppress specific console warnings in tests
+    warn: jest.fn(),
+    error: jest.fn(),
+  };
+}
+
+// Mock performance API for testing
+if (typeof performance === 'undefined') {
+  global.performance = {
+    now: jest.fn(() => Date.now()),
+    mark: jest.fn(),
+    measure: jest.fn(),
+    getEntriesByName: jest.fn(() => []),
+    getEntriesByType: jest.fn(() => []),
+    clearMarks: jest.fn(),
+    clearMeasures: jest.fn(),
+    clearResourceTimings: jest.fn(),
+  } as any;
+}
+
+// Mock React Native modules
+jest.mock('react-native', () => {
+  const RN = jest.requireActual('react-native');
+  return {
+    ...RN,
+    Platform: {
+      OS: 'ios',
+      select: jest.fn((obj) => obj.ios),
+    },
+  };
+});
+
+// Mock design system theme
+jest.mock('@umituz/react-native-design-system', () => ({
+  useTheme: jest.fn(() => ({
+    setThemeMode: jest.fn(),
+  })),
+  useDesignSystemTheme: jest.fn(() => ({
+    setThemeMode: jest.fn(),
+    setCustomColors: jest.fn(),
+  })),
+}));
+
+// Mock storage
+jest.mock('@umituz/react-native-storage', () => ({
+  storageRepository: {
+    getItem: jest.fn(() => ({
+      success: true,
+      data: null,
+    })),
+    setItem: jest.fn(() => ({
+      success: true,
+    })),
+    removeItem: jest.fn(() => ({
+      success: true,
+    })),
+  },
+  unwrap: jest.fn((result, defaultValue) => 
+    result.success ? result.data : defaultValue
+  ),
+}));
+
+// Mock alert
+jest.mock('@umituz/react-native-alert', () => ({
+  useAlert: jest.fn(() => ({
+    show: jest.fn(),
+    showSuccess: jest.fn(),
+    showError: jest.fn(),
+    showWarning: jest.fn(),
+  })),
+}));
+
+// Mock localization
+jest.mock('@umituz/react-native-localization', () => ({
+  useLocalization: jest.fn(() => ({
+    t: jest.fn((key) => key),
+  })),
+}));
+
+// Global test utilities
+(globalThis as any).__TEST__ = true;
+
+// Mock timers
+jest.useFakeTimers();

package/src/domains/appearance/__tests__/stores/appearanceStore.test.tsx

@@ -0,0 +1,175 @@
+/**
+ * Appearance Store Tests
+ */
+
+import { renderHook, act } from '@testing-library/react-native';
+import { useAppearanceStore } from '../../infrastructure/stores/appearanceStore';
+import type { AppearanceSettings, ThemeMode, CustomThemeColors } from '../../types';
+
+// Mock design system theme
+jest.mock('@umituz/react-native-design-system', () => ({
+  useTheme: {
+    getState: jest.fn(() => ({
+      setThemeMode: jest.fn(),
+    })),
+  },
+  useDesignSystemTheme: {
+    getState: jest.fn(() => ({
+      setThemeMode: jest.fn(),
+      setCustomColors: jest.fn(),
+    })),
+  },
+}));
+
+const mockUseTheme = require('@umituz/react-native-design-system').useTheme;
+const mockUseDesignSystemTheme = require('@umituz/react-native-design-system').useDesignSystemTheme;
+
+describe('useAppearanceStore', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should initialize with default settings', () => {
+    const { result } = renderHook(() => useAppearanceStore());
+
+    expect(result.current).toEqual({
+      settings: {
+        themeMode: 'dark',
+      },
+      isInitialized: false,
+    });
+
+    expect(typeof result.current.setSettings).toBe('function');
+    expect(typeof result.current.setInitialized).toBe('function');
+    expect(typeof result.current.updateThemeMode).toBe('function');
+    expect(typeof result.current.updateCustomColors).toBe('function');
+    expect(typeof result.current.resetState).toBe('function');
+  });
+
+  it('should update settings correctly', () => {
+    const { result } = renderHook(() => useAppearanceStore());
+
+    const newSettings: AppearanceSettings = {
+      themeMode: 'light',
+      customColors: { primary: '#FF0000' },
+    };
+
+    act(() => {
+      result.current.setSettings(newSettings);
+    });
+
+    expect(result.current.settings).toEqual(newSettings);
+    expect(mockUseTheme.getState().setThemeMode).not.toHaveBeenCalled();
+    expect(mockUseDesignSystemTheme.getState().setThemeMode).not.toHaveBeenCalled();
+  });
+
+  it('should update theme mode correctly', () => {
+    const { result } = renderHook(() => useAppearanceStore());
+
+    act(() => {
+      result.current.updateThemeMode('light');
+    });
+
+    expect(result.current.settings.themeMode).toBe('light');
+    expect(mockUseTheme.getState().setThemeMode).not.toHaveBeenCalled();
+    expect(mockUseDesignSystemTheme.getState().setThemeMode).not.toHaveBeenCalled();
+  });
+
+  it('should not update theme mode if same value', () => {
+    const { result } = renderHook(() => useAppearanceStore());
+
+    act(() => {
+      result.current.updateThemeMode('dark'); // Default is dark
+    });
+
+    expect(result.current.settings.themeMode).toBe('dark');
+  });
+
+  it('should update custom colors correctly', () => {
+    const { result } = renderHook(() => useAppearanceStore());
+
+    const newColors: CustomThemeColors = { primary: '#FF0000' };
+
+    act(() => {
+      result.current.updateCustomColors(newColors);
+    });
+
+    expect(result.current.settings.customColors).toEqual(newColors);
+  });
+
+  it('should not update custom colors if same value', () => {
+    const { result } = renderHook(() => useAppearanceStore());
+
+    const newColors: CustomThemeColors = { primary: '#FF0000' };
+
+    act(() => {
+      result.current.updateCustomColors(newColors);
+      result.current.updateCustomColors(newColors); // Second call with same value
+    });
+
+    // Should only be called once due to optimization
+    expect(mockUseDesignSystemTheme.getState().setCustomColors).toHaveBeenCalledTimes(1);
+  });
+
+  it('should reset state correctly', () => {
+    const { result } = renderHook(() => useAppearanceStore());
+
+    const customColors: CustomThemeColors = { primary: '#FF0000' };
+
+    act(() => {
+      result.current.updateCustomColors(customColors);
+      result.current.setInitialized(true);
+      result.current.resetState();
+    });
+
+    expect(result.current.settings).toEqual({
+      themeMode: 'dark',
+    });
+    expect(result.current.isInitialized).toBe(false);
+  });
+
+  it('should not reset if already at default', () => {
+    const { result } = renderHook(() => useAppearanceStore());
+
+    act(() => {
+      result.current.resetState();
+      result.current.resetState(); // Second call
+    });
+
+    // Should only be called once due to optimization
+    expect(mockUseTheme.getState().setThemeMode).toHaveBeenCalledTimes(1);
+    expect(mockUseDesignSystemTheme.getState().setThemeMode).toHaveBeenCalledTimes(1);
+  });
+
+  it('should handle setInitialized correctly', () => {
+    const { result } = renderHook(() => useAppearanceStore());
+
+    act(() => {
+      result.current.setInitialized(true);
+    });
+
+    expect(result.current.isInitialized).toBe(true);
+
+    act(() => {
+      result.current.setInitialized(true); // Second call with same value
+    });
+
+    // Should not be called again due to optimization
+    expect(result.current.isInitialized).toBe(true);
+  });
+
+  it('should handle setInitialized changes correctly', () => {
+    const { result } = renderHook(() => useAppearanceStore());
+
+    act(() => {
+      result.current.setInitialized(false);
+      result.current.setInitialized(true);
+    });
+
+    expect(result.current.isInitialized).toBe(true);
+  });
+});

package/src/domains/appearance/data/colorPalettes.ts

@@ -0,0 +1,94 @@
+/**
+ * Dynamic Color Palettes
+ * 
+ * Generic color palettes that can be customized by host applications
+ * These serve as sensible defaults for appearance customization
+ */
+
+export interface ColorPalette {
+  name: string;
+  colors: string[];
+}
+
+/**
+ * Generic primary color palette
+ * Suitable for most applications
+ */
+export const DEFAULT_PRIMARY_COLORS: ColorPalette = {
+  name: "primary",
+  colors: [
+    "#007AFF", // Blue
+    "#5856D6", // Purple  
+    "#FF3B30", // Red
+    "#FF9500", // Orange
+    "#FFCC00", // Yellow
+    "#4CD964", // Green
+    "#5AC8FA", // Light Blue
+    "#FF2D92", // Pink
+  ],
+};
+
+/**
+ * Generic secondary color palette
+ * Neutral colors for secondary elements
+ */
+export const DEFAULT_SECONDARY_COLORS: ColorPalette = {
+  name: "secondary", 
+  colors: [
+    "#E5E5EA", // Light Gray
+    "#C7C7CC", // Medium Gray
+    "#8E8E93", // Dark Gray
+    "#636366", // Very Dark Gray
+    "#48484A", // Black Gray
+    "#3A3A3C", // Near Black
+    "#2C2C2E", // Almost Black
+    "#1C1C1E", // Black
+  ],
+};
+
+/**
+ * Generic accent color palette
+ * Vibrant colors for accent elements
+ */
+export const DEFAULT_ACCENT_COLORS: ColorPalette = {
+  name: "accent",
+  colors: [
+    "#FF6B6B", // Light Red
+    "#4ECDC4", // Teal
+    "#45B7D1", // Sky Blue
+    "#96CEB4", // Sage Green
+    "#FFEAA7", // Light Yellow
+    "#DDA0DD", // Plum
+    "#98D8C8", // Mint
+    "#F7DC6F", // Soft Yellow
+  ],
+};
+
+/**
+ * Generate custom color palette
+ * @param baseColor - Base color to generate variations from
+ * @param count - Number of variations to generate
+ * @returns Color palette with variations
+ */
+export const generateColorPalette = (
+  baseColor: string, 
+  count: number = 8
+): ColorPalette => {
+  const colors: string[] = [];
+  
+  for (let i = 0; i < count; i++) {
+    // Simple color variation logic - in real implementation, 
+    // this would use HSL/HSV color space manipulation
+    colors.push(baseColor);
+  }
+  
+  return {
+    name: "custom",
+    colors,
+  };
+};
+
+// Legacy exports for backward compatibility
+export const PRIMARY_COLORS = DEFAULT_PRIMARY_COLORS.colors;
+export const SECONDARY_COLORS = DEFAULT_SECONDARY_COLORS.colors;
+export const ACCENT_COLORS = DEFAULT_ACCENT_COLORS.colors;

package/src/domains/appearance/hooks/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Appearance Hooks
+ */
+
+export { useAppearance } from "./useAppearance";
+export { useAppearanceActions, type AppearanceActionsConfig } from "./useAppearanceActions";