@umituz/react-native-settings 4.23.45 → 4.23.47

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.23.45",
+  "version": "4.23.47",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
-    "typecheck": "tsc --noEmit",
+    "typecheck": "tsc --noEmit --skipLibCheck",
     "lint": "eslint src",
     "lint:fix": "eslint src --fix",
     "vp": "npm version patch && npm publish && git push"
@@ -42,13 +42,13 @@
     "firebase": "^12.7.0"
   },
   "peerDependencies": {
-    "@umituz/react-native-design-system": ">=4.23.45",
     "@expo/vector-icons": ">=14.0.0",
     "@react-native-async-storage/async-storage": ">=2.0.0",
     "@react-native-community/datetimepicker": ">=8.0.0",
     "@react-navigation/native": ">=6.0.0",
     "@react-navigation/stack": ">=6.0.0",
     "@tanstack/react-query": ">=5.0.0",
+    "@umituz/react-native-design-system": ">=4.23.47",
     "expo-device": ">=6.0.0",
     "expo-haptics": ">=15.0.0",
     "expo-localization": ">=16.0.0",
@@ -62,7 +62,6 @@
     "zustand": ">=4.0.0"
   },
   "devDependencies": {
-    "@umituz/react-native-design-system": "^4.23.45",
     "@expo/vector-icons": "^15.0.0",
     "@gorhom/bottom-sheet": "^5.2.8",
     "@react-native-async-storage/async-storage": "^2.2.0",
@@ -78,6 +77,7 @@
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "@umituz/react-native-auth": "^3.6.49",
+    "@umituz/react-native-design-system": "^4.23.47",
     "@umituz/react-native-firebase": "^1.13.102",
     "@umituz/react-native-sentry": "*",
     "eslint": "^8.57.0",

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

@@ -1,21 +1,21 @@
-import { useAppearanceQuery } from "../presentation/hooks/queries/useAppearanceQuery";
-import { useAppearanceMutations } from "../presentation/hooks/mutations/useAppearanceMutations";
-import { ThemeMode, CustomThemeColors } from "@umituz/react-native-design-system";
+import { useTheme, type ThemeMode, type CustomThemeColors } from "@umituz/react-native-design-system";
 
 export const useAppearance = () => {
-    const { data: settings, isLoading } = useAppearanceQuery();
-    const {
-        updateThemeMutation,
-        updateColorsMutation,
-        resetAppearanceMutation
-    } = useAppearanceMutations();
+  const { themeMode, customColors, isInitialized, setThemeMode, setCustomColors } = useTheme();
 
-    return {
-        themeMode: settings?.themeMode || "light",
-        customColors: settings?.customColors,
-        isLoading,
-        setThemeMode: (mode: ThemeMode) => updateThemeMutation.mutate(mode),
-        setCustomColors: (colors: CustomThemeColors) => updateColorsMutation.mutate(colors),
-        reset: () => resetAppearanceMutation.mutate(),
-    };
+  return {
+    themeMode,
+    customColors,
+    isLoading: !isInitialized,
+    setThemeMode: (mode: ThemeMode) => {
+      void setThemeMode(mode);
+    },
+    setCustomColors: (colors: CustomThemeColors) => {
+      void setCustomColors(colors);
+    },
+    reset: () => {
+      void setThemeMode("light");
+      void setCustomColors(undefined);
+    },
+  };
 };

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

@@ -1,6 +1,6 @@
 import { useState, useCallback, useEffect } from "react";
 import { useAppearance } from "./useAppearance";
-import { CustomThemeColors } from "@umituz/react-native-design-system";
+import type { CustomThemeColors, ThemeMode } from "@umituz/react-native-design-system";
 
 export const useAppearanceActions = () => {
   const { themeMode, customColors, setThemeMode, setCustomColors, reset } = useAppearance();
@@ -12,7 +12,7 @@ export const useAppearanceActions = () => {
     }
   }, [customColors]);
 
-  const handleThemeSelect = useCallback((mode: any) => {
+  const handleThemeSelect = useCallback((mode: ThemeMode) => {
     setThemeMode(mode);
   }, [setThemeMode]);
 
@@ -28,6 +28,7 @@ export const useAppearanceActions = () => {
   }, [reset]);
 
   return {
+    themeMode,
     localCustomColors,
     handleThemeSelect,
     handleColorChange,

package/src/domains/appearance/application/ports/IAppearanceRepository.ts

@@ -1,8 +0,0 @@
-import { ThemeMode, CustomThemeColors } from "@umituz/react-native-design-system";
-import { AppearanceSettings } from "../../types";
-
-export interface IAppearanceRepository {
-    getSettings(): Promise<AppearanceSettings>;
-    saveSettings(settings: AppearanceSettings): Promise<void>;
-    clearSettings(): Promise<void>;
-}

package/src/domains/appearance/infrastructure/repositories/AppearanceRepository.ts

@@ -1,34 +0,0 @@
-import { storageRepository, unwrap } from "@umituz/react-native-design-system";
-import { IAppearanceRepository } from "../../application/ports/IAppearanceRepository";
-import { AppearanceSettings } from "../../types";
-
-const STORAGE_KEY = "@appearance_settings";
-const DEFAULT_SETTINGS: AppearanceSettings = {
-    themeMode: "dark",
-};
-
-export class AppearanceRepository implements IAppearanceRepository {
-    async getSettings(): Promise<AppearanceSettings> {
-        const result = await storageRepository.getItem<AppearanceSettings>(
-            STORAGE_KEY,
-            DEFAULT_SETTINGS
-        );
-        return unwrap(result, DEFAULT_SETTINGS);
-    }
-
-    async saveSettings(settings: AppearanceSettings): Promise<void> {
-        const result = await storageRepository.setItem(STORAGE_KEY, settings);
-        if (!result.success) {
-            throw new Error("Failed to save appearance settings");
-        }
-    }
-
-    async clearSettings(): Promise<void> {
-        const result = await storageRepository.removeItem(STORAGE_KEY);
-        if (!result.success) {
-            throw new Error("Failed to clear appearance settings");
-        }
-    }
-}
-
-export const getAppearanceRepository = () => new AppearanceRepository();

package/src/domains/appearance/infrastructure/services/README.md

@@ -1,141 +0,0 @@
-# Appearance Services
-
-Service layer for appearance domain including system theme detection, validation, and appearance management.
-
-## Purpose
-
-Provides business logic services for managing appearance settings including theme mode, custom colors, and system theme detection. Services encapsulate complex operations and provide a clean API for the domain.
-
-## File Paths
-
-```
-src/domains/appearance/infrastructure/services/
-├── AppearanceService.ts               # Main appearance management
-├── SystemThemeDetectionService.ts     # System theme detection
-└── ValidationService.ts               # Color/theme validation
-```
-
-## Strategy
-
-1. **Service Encapsulation**: Encapsulate complex appearance logic in service classes
-2. **System Integration**: Detect and respond to system theme changes
-3. **Validation First**: Validate all appearance changes before applying
-4. **Event-Driven**: Use event listeners for system theme changes
-5. **Type Safety**: Provide strongly typed service interfaces
-
-## Restrictions
-
-### DO NOT
-
-- ❌ DO NOT include UI components or React hooks in services
-- ❌ DO NOT directly access storage; use repositories
-- ❌ DO NOT mix validation logic with business logic
-- ❌ DO NOT create circular dependencies between services
-- ❌ DO NOT swallow validation errors
-
-### NEVER
-
-- ❌ NEVER apply invalid color values
-- ❌ NEVER assume system theme is available
-- ❌ EVER bypass validation for any reason
-- ❌ EVER store raw hex values without validation
-
-### AVOID
-
-- ❌ AVOID creating god services that do too much
-- ❌ AVOID tight coupling between services
-- ❌ AVOID synchronous operations for appearance changes
-- ❌ AVOID ignoring system theme change events
-
-## Rules
-
-### ALWAYS
-
-- ✅ ALWAYS validate theme modes before applying
-- ✅ ALWAYS validate hex color format before applying
-- ✅ ALWAYS handle system theme unsubscription
-- ✅ ALWAYS return typed results from service methods
-- ✅ ALWAYS handle service errors gracefully
-
-### MUST
-
-- ✅ MUST validate all inputs before processing
-- ✅ MUST provide clear error messages for validation failures
-- ✅ MUST clean up event listeners on cleanup
-- ✅ MUST respect user preferences over system defaults
-
-### SHOULD
-
-- ✅ SHOULD provide reactive interfaces for theme changes
-- ✅ SHOULD cache theme detection results
-- ✅ SHOULD offer batch operations for multiple changes
-- ✅ SHOULD log important service operations
-
-## AI Agent Guidelines
-
-1. **When creating services**: Keep them focused and single-purpose
-2. **When adding validation**: Provide clear, actionable error messages
-3. **When detecting system theme**: Use native APIs with fallbacks
-4. **When managing colors**: Validate hex format (#RRGGBB) before applying
-5. **When handling errors**: Transform technical errors into user-friendly messages
-
-## Services Reference
-
-### AppearanceService
-
-Main service for managing appearance settings including theme mode, custom colors, and system theme detection.
-
-**Location**: `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/domains/appearance/infrastructure/services/AppearanceService.ts`
-
-**Methods**:
-- `getThemeMode(): Promise<'light' | 'dark' | 'auto'>` - Get current theme mode
-- `setThemeMode(mode: 'light' | 'dark' | 'auto'): Promise<void>` - Set theme mode
-- `getCustomColors(): Promise<ColorPalette | undefined>` - Get custom colors
-- `setCustomColors(colors: ColorPalette): Promise<void>` - Set custom colors
-- `resetColors(): Promise<void>` - Reset to default colors
-
-### SystemThemeDetectionService
-
-Service for detecting and monitoring system theme changes.
-
-**Location**: `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/domains/appearance/infrastructure/services/SystemThemeDetectionService.ts`
-
-**Methods**:
-- `getSystemTheme(): 'light' | 'dark' | null` - Get current system theme
-- `listen(callback: (theme: 'light' | 'dark') => void): () => void` - Listen for changes
-
-### ValidationService
-
-Service for validating appearance settings.
-
-**Location**: `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/domains/appearance/infrastructure/services/ValidationService.ts`
-
-**Methods**:
-- `validateThemeMode(mode: string): boolean` - Validate theme mode
-- `validateColor(color: string): boolean` - Validate hex color
-- `validateColorPalette(palette: ColorPalette): boolean` - Validate complete palette
-
-## Color Palette Structure
-
-**Primary**: Main brand color (#FF5722)
-**Secondary**: Secondary brand color (#2196F3)
-**Accent**: Highlight color (#FFC107)
-**Background**: Background color (#FFFFFF)
-**Surface**: Surface/card color (#F5F5F5)
-**Error**: Error state color (#F44336)
-**Success**: Success state color (#4CAF50)
-**Warning**: Warning state color (#FF9800)
-
-## Best Practices
-
-1. **Validation**: Always validate colors before saving
-2. **System Theme**: Respect system theme when mode is 'auto'
-3. **Cleanup**: Unsubscribe from theme listeners on unmount
-4. **Error Handling**: Handle invalid colors gracefully
-5. **Hex Format**: Use proper hex color format (#RRGGBB)
-6. **Persistence**: Save theme changes immediately
-7. **Performance**: Cache theme detection results
-
-## License
-
-MIT

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

@@ -1,51 +0,0 @@
-import {
-  useTheme,
-  useDesignSystemTheme,
-  ThemeMode,
-  CustomThemeColors
-} from "@umituz/react-native-design-system";
-import { IAppearanceRepository } from "../../application/ports/IAppearanceRepository";
-import { getAppearanceRepository } from "../repositories/AppearanceRepository";
-import { AppearanceSettings } from "../../types";
-
-export class AppearanceService {
-  constructor(private readonly repository: IAppearanceRepository = getAppearanceRepository()) { }
-
-  async getSettings(): Promise<AppearanceSettings> {
-    return this.repository.getSettings();
-  }
-
-  async setThemeMode(mode: ThemeMode): Promise<void> {
-    const settings = await this.repository.getSettings();
-    const newSettings = { ...settings, themeMode: mode };
-    await this.repository.saveSettings(newSettings);
-    this.syncWithDesignSystem(newSettings);
-  }
-
-  async setCustomColors(colors: CustomThemeColors): Promise<void> {
-    const settings = await this.repository.getSettings();
-    const newSettings = {
-      ...settings,
-      customColors: { ...settings.customColors, ...colors }
-    };
-    await this.repository.saveSettings(newSettings);
-    this.syncWithDesignSystem(newSettings);
-  }
-
-  async resetSettings(): Promise<void> {
-    await this.repository.clearSettings();
-    const defaultSettings = await this.repository.getSettings();
-    this.syncWithDesignSystem(defaultSettings);
-  }
-
-  private syncWithDesignSystem(settings: AppearanceSettings): void {
-    useTheme.getState().setThemeMode(settings.themeMode);
-    useDesignSystemTheme.getState().setThemeMode(settings.themeMode);
-    if (settings.customColors) {
-      useDesignSystemTheme.getState().setCustomColors(settings.customColors);
-    }
-  }
-}
-
-export const getAppearanceService = () => new AppearanceService();
-export const appearanceService = getAppearanceService();

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

@@ -1,73 +0,0 @@
-/**
- * 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 {
-    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 {
-    return () => { }; // Return empty cleanup function
-  }
-};

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

@@ -1,91 +0,0 @@
-/**
- * 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
-  };
-};

package/src/domains/appearance/presentation/hooks/mutations/useAppearanceMutations.ts

@@ -1,65 +0,0 @@
-import { useMutation, useQueryClient } from "@umituz/react-native-design-system";
-import { getAppearanceService } from "../../../infrastructure/services/appearanceService";
-import { appearanceKeys } from "../queries/useAppearanceQuery";
-import { ThemeMode, CustomThemeColors } from "@umituz/react-native-design-system";
-import type { AppearanceSettings } from "../../../types";
-
-export const useAppearanceMutations = () => {
-    const queryClient = useQueryClient();
-    const service = getAppearanceService();
-
-    const updateThemeMutation = useMutation({
-        mutationFn: (mode: ThemeMode) => service.setThemeMode(mode),
-        onMutate: async (mode: ThemeMode) => {
-            await queryClient.cancelQueries({ queryKey: appearanceKeys.settings() });
-            const previousData = queryClient.getQueryData<AppearanceSettings>(appearanceKeys.settings());
-            queryClient.setQueryData<AppearanceSettings>(appearanceKeys.settings(), (old) => ({
-                ...old,
-                themeMode: mode,
-            } as AppearanceSettings));
-            return { previousData };
-        },
-        onError: (_err, _mode, context) => {
-            if (context?.previousData) {
-                queryClient.setQueryData(appearanceKeys.settings(), context.previousData);
-            }
-        },
-        onSettled: () => {
-            void queryClient.invalidateQueries({ queryKey: appearanceKeys.settings() });
-        },
-    });
-
-    const updateColorsMutation = useMutation({
-        mutationFn: (colors: CustomThemeColors) => service.setCustomColors(colors),
-        onMutate: async (colors: CustomThemeColors) => {
-            await queryClient.cancelQueries({ queryKey: appearanceKeys.settings() });
-            const previousData = queryClient.getQueryData<AppearanceSettings>(appearanceKeys.settings());
-            queryClient.setQueryData<AppearanceSettings>(appearanceKeys.settings(), (old) => ({
-                ...old,
-                customColors: { ...old?.customColors, ...colors },
-            } as AppearanceSettings));
-            return { previousData };
-        },
-        onError: (_err, _colors, context) => {
-            if (context?.previousData) {
-                queryClient.setQueryData(appearanceKeys.settings(), context.previousData);
-            }
-        },
-        onSettled: () => {
-            void queryClient.invalidateQueries({ queryKey: appearanceKeys.settings() });
-        },
-    });
-
-    const resetAppearanceMutation = useMutation({
-        mutationFn: () => service.resetSettings(),
-        onSettled: () => {
-            void queryClient.invalidateQueries({ queryKey: appearanceKeys.settings() });
-        },
-    });
-
-    return {
-        updateThemeMutation,
-        updateColorsMutation,
-        resetAppearanceMutation,
-    };
-};

package/src/domains/appearance/presentation/hooks/queries/useAppearanceQuery.ts

@@ -1,15 +0,0 @@
-import { useQuery } from "@umituz/react-native-design-system";
-import { getAppearanceService } from "../../../infrastructure/services/appearanceService";
-
-export const appearanceKeys = {
-    all: ["appearance"] as const,
-    settings: () => [...appearanceKeys.all, "settings"] as const,
-};
-
-export const useAppearanceQuery = () => {
-    const service = getAppearanceService();
-    return useQuery({
-        queryKey: appearanceKeys.settings(),
-        queryFn: () => service.getSettings(),
-    });
-};