@umituz/react-native-settings 4.17.27 → 4.17.31

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.17.27",
+  "version": "4.17.31",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, and rating",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
-    "typecheck": "echo 'TypeScript validation passed'",
-    "lint": "echo 'Lint passed'",
+    "typecheck": "tsc --noEmit",
+    "lint": "eslint src --ext .ts,.tsx --max-warnings 0",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
     "version:patch": "npm version patch -m 'chore: release v%s'",
     "version:minor": "npm version minor -m 'chore: release v%s'",
     "version:major": "npm version major -m 'chore: release v%s'"
@@ -37,6 +38,7 @@
     "@expo/vector-icons": ">=14.0.0",
     "@react-navigation/native": ">=6.0.0",
     "@react-navigation/stack": ">=6.0.0",
+    "@tanstack/react-query": ">=5.0.0",
     "@umituz/react-native-auth": "latest",
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-localization": "latest",
@@ -44,6 +46,7 @@
     "@umituz/react-native-onboarding": "latest",
     "@umituz/react-native-sentry": "latest",
     "@umituz/react-native-storage": "latest",
+    "@umituz/react-native-tanstack": "latest",
     "react": ">=19.0.0",
     "react-native": ">=0.81.0",
     "react-native-safe-area-context": ">=4.0.0",
@@ -54,14 +57,19 @@
     "@expo/vector-icons": "^15.0.0",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/stack": "^6.4.1",
+    "@tanstack/react-query": "^5.0.0",
     "@types/jest": "^29.5.14",
     "@types/react": "~19.1.10",
+    "@typescript-eslint/eslint-plugin": "^7.0.0",
+    "@typescript-eslint/parser": "^7.0.0",
     "@umituz/react-native-auth": "latest",
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-notifications": "latest",
     "@umituz/react-native-onboarding": "latest",
     "@umituz/react-native-storage": "latest",
+    "@umituz/react-native-tanstack": "latest",
+    "eslint": "^8.57.0",
     "react": "19.1.0",
     "react-native": "0.81.5",
     "typescript": "^5.3.0"
@@ -75,6 +83,9 @@
     "LICENSE"
   ],
   "dependencies": {
-    "@umituz/react-native-design-system": "latest"
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@react-native-firebase/app": "^23.7.0",
+    "@react-native-firebase/firestore": "^23.7.0",
+    "firebase": "^12.7.0"
   }
 }

package/src/domains/about/presentation/components/AboutSection.tsx

@@ -1,7 +1,11 @@
 import React from 'react';
-import { View, Pressable, StyleSheet, ViewStyle } from 'react-native';
+import { View, StyleSheet, ViewStyle } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { useResponsiveDesignTokens, AtomicIcon, AtomicText } from '@umituz/react-native-design-system';
+import {
+    useResponsiveDesignTokens,
+    AtomicText,
+    ListItem
+} from '@umituz/react-native-design-system';
 import { AboutConfig } from '../../domain/entities/AppInfo';
 
 export interface AboutSectionProps {
@@ -23,7 +27,6 @@ export const AboutSection: React.FC<AboutSectionProps> = ({
 }) => {
     const navigation = useNavigation();
     const tokens = useResponsiveDesignTokens();
-    const colors = tokens.colors;
 
     const route = config?.route || config?.defaultRoute || 'About';
     const title = propsTitle || config?.title;
@@ -41,57 +44,21 @@ export const AboutSection: React.FC<AboutSectionProps> = ({
     if (!title) return null;
 
     return (
-        <View style={[styles.sectionContainer, { backgroundColor: colors.surface }, containerStyle]}>
+        <View style={[styles.sectionContainer, { backgroundColor: tokens.colors.surface }, containerStyle]}>
             {!!sectionTitle && (
                 <View style={styles.headerContainer}>
-                    <AtomicText
-                        type="titleMedium"
-                        color="primary"
-                    >
+                    <AtomicText type="titleMedium" color="primary">
                         {sectionTitle}
                     </AtomicText>
                 </View>
             )}
-            <Pressable
-                style={({ pressed }) => [
-                    styles.itemContainer,
-                    {
-                        backgroundColor: pressed ? `${colors.primary}08` : 'transparent',
-                    },
-                ]}
+            <ListItem
+                title={title}
+                subtitle={description}
+                leftIcon="information-circle"
+                rightIcon="chevron-forward"
                 onPress={handlePress}
-            >
-                <View style={styles.content}>
-                    <View
-                        style={[
-                            styles.iconContainer,
-                            { backgroundColor: `${colors.primary}15` },
-                        ]}
-                    >
-                        <AtomicIcon name="information-circle" size="lg" color="primary" />
-                    </View>
-                    <View style={styles.textContainer}>
-                        <AtomicText
-                            type="bodyLarge"
-                            color="primary"
-                            numberOfLines={1}
-                            style={{ marginBottom: 4 }}
-                        >
-                            {title}
-                        </AtomicText>
-                        {!!description && (
-                            <AtomicText
-                                type="bodyMedium"
-                                color="secondary"
-                                numberOfLines={2}
-                            >
-                                {description}
-                            </AtomicText>
-                        )}
-                    </View>
-                    <AtomicIcon name="chevron-forward" size="md" color="secondary" />
-                </View>
-            </Pressable>
+            />
         </View>
     );
 };
@@ -107,28 +74,4 @@ const styles = StyleSheet.create({
         paddingTop: 16,
         paddingBottom: 8,
     },
-    itemContainer: {
-        flexDirection: 'row',
-        alignItems: 'center',
-        paddingHorizontal: 16,
-        paddingVertical: 16,
-        minHeight: 72,
-    },
-    content: {
-        flex: 1,
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    iconContainer: {
-        width: 48,
-        height: 48,
-        borderRadius: 12,
-        justifyContent: 'center',
-        alignItems: 'center',
-        marginRight: 16,
-    },
-    textContainer: {
-        flex: 1,
-        marginRight: 8,
-    },
 });

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

@@ -0,0 +1,8 @@
+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/hooks/index.ts

@@ -3,4 +3,4 @@
  */
 
 export { useAppearance } from "./useAppearance";
-export { useAppearanceActions, type AppearanceActionsConfig } from "./useAppearanceActions";
+export { useAppearanceActions } from "./useAppearanceActions";

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

@@ -1,61 +1,21 @@
-/**
- * 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";
+import { useAppearanceQuery } from "../presentation/hooks/queries/useAppearanceQuery";
+import { useAppearanceMutations } from "../presentation/hooks/mutations/useAppearanceMutations";
+import { ThemeMode, CustomThemeColors } from "@umituz/react-native-design-system";
 
 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,
-  };
+    const { data: settings, isLoading } = useAppearanceQuery();
+    const {
+        updateThemeMutation,
+        updateColorsMutation,
+        resetAppearanceMutation
+    } = useAppearanceMutations();
+
+    return {
+        themeMode: settings?.themeMode || "dark",
+        customColors: settings?.customColors,
+        isLoading,
+        setThemeMode: (mode: ThemeMode) => updateThemeMutation.mutate(mode),
+        setCustomColors: (colors: CustomThemeColors) => updateColorsMutation.mutate(colors),
+        reset: () => resetAppearanceMutation.mutate(),
+    };
 };

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

@@ -1,139 +1,31 @@
-/**
- * Appearance Actions Hook
- * Single Responsibility: Handle appearance-related presentation actions
- * Business logic extracted to service layer
- */
-
-import { useCallback, useState, useEffect, useRef } from "react";
+import { useState, useCallback, useEffect } 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;
-}
+import { CustomThemeColors } from "@umituz/react-native-design-system";
 
-export function useAppearanceActions(
-  config?: AppearanceActionsConfig
-): UseAppearanceActionsReturn {
-  const { customColors, setThemeMode, setCustomColors, resetCustomColors } =
-    useAppearance();
+export const useAppearanceActions = () => {
+  const { themeMode, customColors, setThemeMode, setCustomColors, reset } = useAppearance();
+  const [localCustomColors, setLocalCustomColors] = useState<CustomThemeColors>(customColors || {});
 
-  // 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");
-      }
+    if (customColors) {
       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],
-  );
+  }, [customColors]);
 
-  const handleColorChange = useCallback(
-    (key: keyof CustomThemeColors, color: string) => {
-      try {
-        // Prevent unnecessary updates if color hasn't changed
-        if (localCustomColors[key] === color) {
-          return;
-        }
+  const handleThemeSelect = useCallback((mode: any) => {
+    setThemeMode(mode);
+  }, [setThemeMode]);
 
-        const newColors = {
-          ...localCustomColors,
-          [key]: color,
-        };
+  const handleColorChange = useCallback((key: keyof CustomThemeColors, color: string) => {
+    const newColors = { ...localCustomColors, [key]: color };
+    setLocalCustomColors(newColors);
+    setCustomColors(newColors);
+  }, [localCustomColors, setCustomColors]);
 
-        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");
-      }
-    };
-  }, []);
+  const handleResetColors = useCallback(() => {
+    reset();
+    setLocalCustomColors({});
+  }, [reset]);
 
   return {
     localCustomColors,
@@ -141,4 +33,4 @@ export function useAppearanceActions(
     handleColorChange,
     handleResetColors,
   };
-}
+};

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

@@ -0,0 +1,34 @@
+import { storageRepository, unwrap } from "@umituz/react-native-storage";
+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/AppearanceService.ts

@@ -0,0 +1,51 @@
+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/presentation/components/AppearanceSection.tsx

@@ -73,7 +73,7 @@ export const AppearanceSection: React.FC<AppearanceSectionProps> = ({
                             { backgroundColor: `${colors.primary}15` },
                         ]}
                     >
-                        <AtomicIcon name="water-outline" size="lg" color="primary" />
+                        <AtomicIcon name="color-palette" size="lg" color="primary" />
                     </View>
                     <View style={styles.textContainer}>
                         <AtomicText
@@ -94,7 +94,7 @@ export const AppearanceSection: React.FC<AppearanceSectionProps> = ({
                             </AtomicText>
                         )}
                     </View>
-                    <AtomicIcon name="chevron-forward-outline" size="md" color="secondary" />
+                    <AtomicIcon name="chevron-forward" size="md" color="secondary" />
                 </View>
             </Pressable>
         </View>

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

@@ -0,0 +1,36 @@
+import { useMutation, useQueryClient } from "@tanstack/react-query";
+import { getAppearanceService } from "../../../infrastructure/services/AppearanceService";
+import { appearanceKeys } from "../queries/useAppearanceQuery";
+import { ThemeMode, CustomThemeColors } from "@umituz/react-native-design-system";
+
+export const useAppearanceMutations = () => {
+    const queryClient = useQueryClient();
+    const service = getAppearanceService();
+
+    const updateThemeMutation = useMutation({
+        mutationFn: (mode: ThemeMode) => service.setThemeMode(mode),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: appearanceKeys.settings() });
+        },
+    });
+
+    const updateColorsMutation = useMutation({
+        mutationFn: (colors: CustomThemeColors) => service.setCustomColors(colors),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: appearanceKeys.settings() });
+        },
+    });
+
+    const resetAppearanceMutation = useMutation({
+        mutationFn: () => service.resetSettings(),
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: appearanceKeys.settings() });
+        },
+    });
+
+    return {
+        updateThemeMutation,
+        updateColorsMutation,
+        resetAppearanceMutation,
+    };
+};

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

@@ -0,0 +1,15 @@
+import { useQuery } from "@tanstack/react-query";
+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(),
+    });
+};