@umituz/react-native-settings 4.17.14 → 4.17.16

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

@@ -0,0 +1,61 @@
+/**
+ * useAppearance Hook
+ *
+ * Hook for accessing appearance state and actions
+ * Single Responsibility: Presentation layer data access
+ */
+
+import { useCallback } from "react";
+import { useAppearanceStore } from "../infrastructure/stores/appearanceStore";
+import { appearanceService } from "../infrastructure/services/appearanceService";
+import type { ThemeMode, CustomThemeColors } from "../types";
+
+export const useAppearance = () => {
+  const store = useAppearanceStore();
+
+  const setThemeMode = useCallback(
+    async (mode: ThemeMode) => {
+      await appearanceService.setThemeMode(mode);
+    },
+    []
+  );
+
+  const toggleTheme = useCallback(
+    async () => {
+      await appearanceService.toggleTheme();
+    },
+    []
+  );
+
+  const setCustomColors = useCallback(
+    async (colors: CustomThemeColors) => {
+      await appearanceService.setCustomColors(colors);
+    },
+    []
+  );
+
+  const resetCustomColors = useCallback(
+    async () => {
+      await appearanceService.resetCustomColors();
+    },
+    []
+  );
+
+  const reset = useCallback(
+    async () => {
+      await appearanceService.reset();
+    },
+    []
+  );
+
+  return {
+    themeMode: store.settings.themeMode,
+    customColors: store.settings.customColors,
+    isInitialized: store.isInitialized,
+    setThemeMode,
+    toggleTheme,
+    setCustomColors,
+    resetCustomColors,
+    reset,
+  };
+};

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

@@ -0,0 +1,144 @@
+/**
+ * Appearance Actions Hook
+ * Single Responsibility: Handle appearance-related presentation actions
+ * Business logic extracted to service layer
+ */
+
+import { useCallback, useState, useEffect, useRef } from "react";
+import { useAppearance } from "./useAppearance";
+import type {
+  ThemeMode,
+  CustomThemeColors,
+} from "@umituz/react-native-design-system";
+
+export interface UseAppearanceActionsReturn {
+  localCustomColors: CustomThemeColors;
+  handleThemeSelect: (mode: ThemeMode) => Promise<void>;
+  handleColorChange: (key: keyof CustomThemeColors, color: string) => void;
+  handleResetColors: (onConfirm?: () => void) => void;
+}
+
+export interface AppearanceActionsConfig {
+  onResetConfirm?: () => void;
+  onResetCancel?: () => void;
+  resetTitle?: string;
+  resetMessage?: string;
+  confirmLabel?: string;
+  cancelLabel?: string;
+}
+
+export function useAppearanceActions(
+  config?: AppearanceActionsConfig
+): UseAppearanceActionsReturn {
+  const { customColors, setThemeMode, setCustomColors, resetCustomColors } =
+    useAppearance();
+
+  // Use ref to prevent unnecessary re-renders and memory leaks
+  const configRef = useRef(config);
+  configRef.current = config;
+
+  // Initialize local state with custom colors, prevent unnecessary updates
+  const [localCustomColors, setLocalCustomColors] = useState<CustomThemeColors>(() => 
+    customColors || {}
+  );
+
+  // Sync local state with store changes, but only if different
+  useEffect(() => {
+    if (customColors && JSON.stringify(customColors) !== JSON.stringify(localCustomColors)) {
+      if (__DEV__) {
+        console.log("[useAppearanceActions] Syncing local colors with store");
+      }
+      setLocalCustomColors(customColors);
+    }
+  }, [customColors]); // Only depend on customColors, not localCustomColors
+
+  const handleThemeSelect = useCallback(
+    async (mode: ThemeMode) => {
+      try {
+        await setThemeMode(mode);
+      } catch (error) {
+        if (__DEV__) {
+          console.error("[useAppearanceActions] Failed to set theme mode:", error);
+        }
+      }
+    },
+    [setThemeMode],
+  );
+
+  const handleColorChange = useCallback(
+    (key: keyof CustomThemeColors, color: string) => {
+      try {
+        // Prevent unnecessary updates if color hasn't changed
+        if (localCustomColors[key] === color) {
+          return;
+        }
+
+        const newColors = {
+          ...localCustomColors,
+          [key]: color,
+        };
+
+        if (__DEV__) {
+          console.log("[useAppearanceActions] Updating color:", key, color);
+        }
+
+        setLocalCustomColors(newColors);
+        setCustomColors(newColors);
+      } catch (error) {
+        if (__DEV__) {
+          console.error("[useAppearanceActions] Failed to update color:", error);
+        }
+      }
+    },
+    [localCustomColors, setCustomColors],
+  );
+
+  const handleResetColors = useCallback(
+    (onConfirm?: () => void) => {
+      try {
+        // Generic reset handler - the host app should handle the UI confirmation
+        const resetAction = async () => {
+          try {
+            setLocalCustomColors({});
+            await resetCustomColors();
+            onConfirm?.();
+            configRef.current?.onResetConfirm?.();
+          } catch (error) {
+            if (__DEV__) {
+              console.error("[useAppearanceActions] Failed to reset colors:", error);
+            }
+          }
+        };
+
+        // If no custom config provided, just reset directly
+        if (!configRef.current?.resetTitle) {
+          resetAction();
+        }
+        // Otherwise, the host app should handle showing the confirmation dialog
+        // and call resetAction when confirmed
+      } catch (error) {
+        if (__DEV__) {
+          console.error("[useAppearanceActions] Failed to handle reset colors:", error);
+        }
+      }
+    },
+    [resetCustomColors],
+  );
+
+  // Cleanup effect
+  useEffect(() => {
+    return () => {
+      // Cleanup any pending operations or references
+      if (__DEV__) {
+        console.log("[useAppearanceActions] Cleanup");
+      }
+    };
+  }, []);
+
+  return {
+    localCustomColors,
+    handleThemeSelect,
+    handleColorChange,
+    handleResetColors,
+  };
+}

package/src/domains/appearance/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Appearance Domain
+ * Theme management, dark mode
+ */
+
+export * from './presentation/screens/AppearanceScreen';
+export * from './presentation/components/ThemeSwitcher';

package/src/domains/appearance/infrastructure/services/appearanceService.ts

@@ -0,0 +1,301 @@
+/**
+ * Appearance Service
+ *
+ * Business logic for appearance management
+ * Single Responsibility: Business logic only, no presentation logic
+ */
+
+import { AppearanceStorage } from "../storage/appearanceStorage";
+import { useAppearanceStore } from "../stores/appearanceStore";
+import {
+  useTheme,
+  useDesignSystemTheme,
+  type ThemeMode,
+  type CustomThemeColors,
+} from "@umituz/react-native-design-system";
+import { getSystemTheme } from "./systemThemeDetection";
+import { validateAppearanceSettings } from "./validation";
+import type { AppearanceSettings } from "../../types";
+
+export class AppearanceService {
+  private readonly DEFAULT_THEME_MODE: ThemeMode = "light"; // Use system preference as default
+  private _isInitialized = false;
+  private initPromise: Promise<void> | null = null;
+
+  /**
+   * Initialize appearance settings
+   * Business logic: Coordinate initialization process
+   */
+  async initialize(): Promise<void> {
+    // Prevent multiple initializations
+    if (this._isInitialized || this.initPromise) {
+      return this.initPromise || Promise.resolve();
+    }
+
+    this.initPromise = this._performInitialization();
+    return this.initPromise;
+  }
+
+  private async _performInitialization(): Promise<void> {
+    try {
+      if (__DEV__) {
+        console.log("[AppearanceService] Initializing appearance settings");
+      }
+
+      const savedSettings = await AppearanceStorage.getSettings();
+
+      if (savedSettings) {
+        // Load saved settings
+        useAppearanceStore.getState().setSettings(savedSettings);
+        useAppearanceStore.getState().setInitialized(true);
+
+        // Sync with design system theme
+        await this.syncWithDesignSystem(savedSettings);
+      } else {
+        // Use system theme as default, fallback to light
+        const systemTheme = getSystemTheme();
+        const defaultSettings: AppearanceSettings = {
+          themeMode: systemTheme || this.DEFAULT_THEME_MODE,
+        };
+
+        useAppearanceStore.getState().setSettings(defaultSettings);
+        useAppearanceStore.getState().setInitialized(true);
+
+        // Sync with design system theme
+        await this.syncWithDesignSystem(defaultSettings);
+      }
+
+      this._isInitialized = true;
+    } catch (error) {
+      if (__DEV__) {
+        console.error("[AppearanceService] Initialization failed:", error);
+      }
+
+      // Fallback to system theme or light mode on error
+      const systemTheme = getSystemTheme();
+      const fallbackSettings: AppearanceSettings = {
+        themeMode: systemTheme || this.DEFAULT_THEME_MODE,
+      };
+
+      useAppearanceStore.getState().setSettings(fallbackSettings);
+      useAppearanceStore.getState().setInitialized(true);
+
+      await this.syncWithDesignSystem(fallbackSettings);
+      this._isInitialized = true;
+    } finally {
+      this.initPromise = null;
+    }
+  }
+
+  /**
+   * Get current theme mode
+   * Business logic: Provide theme mode data
+   */
+  getThemeMode(): ThemeMode {
+    return useAppearanceStore.getState().settings.themeMode;
+  }
+
+  /**
+   * Set theme mode
+   * Business logic: Validate and apply theme mode
+   */
+  async setThemeMode(mode: ThemeMode): Promise<void> {
+    try {
+      if (__DEV__) {
+        console.log("[AppearanceService] Setting theme mode:", mode);
+      }
+
+      // Validate theme mode
+      if (!mode || (mode !== 'light' && mode !== 'dark')) {
+        throw new Error(`Invalid theme mode: ${mode}`);
+      }
+
+      const currentSettings = useAppearanceStore.getState().settings;
+      const newSettings: AppearanceSettings = {
+        ...currentSettings,
+        themeMode: mode,
+      };
+
+      // Update store
+      useAppearanceStore.getState().updateThemeMode(mode);
+
+      // Persist to storage
+      await AppearanceStorage.setSettings(newSettings);
+
+      // Sync with design system
+      await this.syncWithDesignSystem(newSettings);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      if (__DEV__) {
+        console.error("[AppearanceService] Failed to set theme mode:", errorMessage);
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Toggle theme mode
+   * Business logic: Toggle between light and dark
+   */
+  async toggleTheme(): Promise<void> {
+    try {
+      const currentMode = this.getThemeMode();
+      const newMode: ThemeMode = 
+        currentMode === "light" ? "dark" : "light";
+      
+      await this.setThemeMode(newMode);
+    } catch (error) {
+      if (__DEV__) {
+        console.error("[AppearanceService] Failed to toggle theme:", error);
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Get custom colors
+   * Business logic: Provide custom colors data
+   */
+  getCustomColors(): CustomThemeColors | undefined {
+    return useAppearanceStore.getState().settings.customColors;
+  }
+
+  /**
+   * Set custom colors
+   * Business logic: Validate and apply custom colors
+   */
+  async setCustomColors(colors: CustomThemeColors): Promise<void> {
+    try {
+      if (__DEV__) {
+        console.log("[AppearanceService] Setting custom colors:", colors);
+      }
+
+      // Validate custom colors
+      const validation = validateAppearanceSettings({ customColors: colors });
+      if (!validation.isValid) {
+        throw new Error(`Invalid custom colors: ${validation.errors.join(', ')}`);
+      }
+
+      const currentSettings = useAppearanceStore.getState().settings;
+      const newSettings: AppearanceSettings = {
+        ...currentSettings,
+        customColors: {
+          ...currentSettings.customColors,
+          ...colors,
+        },
+      };
+
+      // Update store
+      useAppearanceStore.getState().updateCustomColors(newSettings.customColors);
+
+      // Persist to storage
+      await AppearanceStorage.setSettings(newSettings);
+
+      // Sync with design system
+      await this.syncWithDesignSystem(newSettings);
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      if (__DEV__) {
+        console.error("[AppearanceService] Failed to set custom colors:", errorMessage);
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Reset custom colors to defaults
+   * Business logic: Reset custom colors
+   */
+  async resetCustomColors(): Promise<void> {
+    try {
+      if (__DEV__) {
+        console.log("[AppearanceService] Resetting custom colors");
+      }
+
+      const currentSettings = useAppearanceStore.getState().settings;
+      const newSettings: AppearanceSettings = {
+        ...currentSettings,
+        customColors: undefined,
+      };
+
+      // Update store
+      useAppearanceStore.getState().updateCustomColors(undefined);
+
+      // Persist to storage
+      await AppearanceStorage.setSettings(newSettings);
+
+      // Sync with design System
+      await this.syncWithDesignSystem(newSettings);
+    } catch (error) {
+      if (__DEV__) {
+        console.error("[AppearanceService] Failed to reset custom colors:", error);
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Reset all appearance settings
+   * Business logic: Reset all settings
+   */
+  async reset(): Promise<void> {
+    try {
+      if (__DEV__) {
+        console.log("[AppearanceService] Resetting all appearance settings");
+      }
+
+      // Clear storage
+      await AppearanceStorage.clear();
+
+      // Reset store to defaults
+      useAppearanceStore.getState().resetState();
+
+      // Reset design system theme to system preference
+      const systemTheme = getSystemTheme();
+      const defaultSettings: AppearanceSettings = {
+        themeMode: systemTheme || this.DEFAULT_THEME_MODE,
+      };
+
+      await this.syncWithDesignSystem(defaultSettings);
+    } catch (error) {
+      if (__DEV__) {
+        console.error("[AppearanceService] Failed to reset appearance:", error);
+      }
+      throw error;
+    }
+  }
+
+  /**
+   * Check if appearance is initialized
+   * Business logic: Provide initialization status
+   */
+  isInitialized(): boolean {
+    return useAppearanceStore.getState().isInitialized;
+  }
+
+  /**
+   * Sync appearance settings with design system
+   * Private helper method
+   */
+  private async syncWithDesignSystem(settings: AppearanceSettings): Promise<void> {
+    try {
+      // Sync theme mode
+      useTheme.getState().setThemeMode(settings.themeMode);
+      useDesignSystemTheme.getState().setThemeMode(settings.themeMode);
+
+      // Sync custom colors
+      useDesignSystemTheme.getState().setCustomColors(settings.customColors);
+
+      if (__DEV__) {
+        console.log("[AppearanceService] Synced with design system:", settings);
+      }
+    } catch (error) {
+      if (__DEV__) {
+        console.error("[AppearanceService] Failed to sync with design system:", error);
+      }
+      throw error;
+    }
+  }
+}
+
+export const appearanceService = new AppearanceService();

package/src/domains/appearance/infrastructure/services/systemThemeDetection.ts

@@ -0,0 +1,79 @@
+/**
+ * System Theme Detection Utilities
+ * 
+ * Utilities for detecting device theme preferences
+ */
+
+import { Appearance, Platform } from 'react-native';
+import type { ThemeMode } from '@umituz/react-native-design-system';
+
+declare const window: any;
+
+/**
+ * Get system theme mode from device settings
+ * @returns System theme mode ('light' | 'dark' | null)
+ */
+export const getSystemTheme = (): ThemeMode | null => {
+  try {
+    // On web, use matchMedia
+    if (Platform.OS === 'web') {
+      if (typeof window !== 'undefined' && (window as any).matchMedia) {
+        const darkModeQuery = (window as any).matchMedia('(prefers-color-scheme: dark)');
+        if (darkModeQuery.matches) {
+          return 'dark';
+        }
+        return 'light';
+      }
+    }
+
+    // On native platforms, use Appearance API
+    const colorScheme = Appearance.getColorScheme();
+    return colorScheme === 'dark' ? 'dark' : 'light';
+  } catch (error) {
+    if (__DEV__) {
+      console.warn('[getSystemTheme] Failed to detect system theme:', error);
+    }
+    return null;
+  }
+};
+
+/**
+ * Check if system theme is dark
+ * @returns true if system prefers dark mode
+ */
+export const isSystemThemeDark = (): boolean => {
+  return getSystemTheme() === 'dark';
+};
+
+/**
+ * Check if system theme is light
+ * @returns true if system prefers light mode
+ */
+export const isSystemThemeLight = (): boolean => {
+  return getSystemTheme() === 'light';
+};
+
+/**
+ * Add system theme change listener
+ * @param callback - Function to call when theme changes
+ * @returns Cleanup function to remove listener
+ */
+export const addSystemThemeListener = (
+  callback: (themeMode: ThemeMode) => void,
+): (() => void) => {
+  try {
+    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
+      const themeMode: ThemeMode = colorScheme === 'dark' ? 'dark' : 'light';
+      callback(themeMode);
+    });
+
+    return () => {
+      subscription?.remove();
+    };
+  } catch (error) {
+    if (__DEV__) {
+      console.warn('[addSystemThemeListener] Failed to add listener:', error);
+    }
+    return () => { }; // Return empty cleanup function
+  }
+};

package/src/domains/appearance/infrastructure/services/validation.ts

@@ -0,0 +1,91 @@
+/**
+ * Appearance Validation Utilities
+ * 
+ * Validation functions for appearance settings and colors
+ */
+
+import type { ThemeMode, CustomThemeColors } from '@umituz/react-native-design-system';
+
+/**
+ * Validate theme mode
+ * @param mode - Theme mode to validate
+ * @returns true if valid theme mode
+ */
+export const isValidThemeMode = (mode: string): mode is ThemeMode => {
+  return mode === 'light' || mode === 'dark';
+};
+
+/**
+ * Validate hex color format
+ * @param color - Color string to validate
+ * @returns true if valid hex color
+ */
+export const isValidHexColor = (color: string): boolean => {
+  if (!color || typeof color !== 'string') {
+    return false;
+  }
+  
+  const hexRegex = /^#([A-Fa-f0-9]{3}|[A-Fa-f0-9]{6})$/;
+  return hexRegex.test(color);
+};
+
+/**
+ * Validate custom colors object
+ * @param colors - Custom colors to validate
+ * @returns Validation result with errors
+ */
+export const validateCustomColors = (
+  colors: CustomThemeColors
+): { isValid: boolean; errors: string[] } => {
+  const errors: string[] = [];
+  
+  // Check each color if provided
+  const colorFields: (keyof CustomThemeColors)[] = [
+    'primary', 'primaryLight', 'primaryDark',
+    'secondary', 'secondaryLight', 'secondaryDark', 
+    'accent', 'accentLight', 'accentDark',
+    'buttonPrimary', 'buttonSecondary'
+  ];
+  
+  for (const field of colorFields) {
+    const color = colors[field];
+    if (color && !isValidHexColor(color)) {
+      errors.push(`Invalid ${field} color: ${color}`);
+    }
+  }
+  
+  return {
+    isValid: errors.length === 0,
+    errors
+  };
+};
+
+/**
+ * Validate appearance settings
+ * @param settings - Settings to validate
+ * @returns Validation result with errors
+ */
+export const validateAppearanceSettings = (settings: {
+  themeMode?: string;
+  customColors?: CustomThemeColors;
+}): { isValid: boolean; errors: string[] } => {
+  const errors: string[] = [];
+  
+  // Validate theme mode
+  if (settings.themeMode && !isValidThemeMode(settings.themeMode)) {
+    errors.push(`Invalid theme mode: ${settings.themeMode}`);
+  }
+  
+  // Validate custom colors
+  if (settings.customColors) {
+    const colorValidation = validateCustomColors(settings.customColors);
+    if (!colorValidation.isValid) {
+      errors.push(...colorValidation.errors);
+    }
+  }
+  
+  return {
+    isValid: errors.length === 0,
+    errors
+  };
+};