@umituz/react-native-settings 4.17.26 → 4.17.30

package/src/presentation/components/SettingItem.tsx

@@ -1,47 +1,31 @@
-/**
- * Setting Item Component
- * Single Responsibility: Render a single settings item
- * Material Design 3 style with hover effects and modern spacing
- */
-
 import React from "react";
-import { View, Text, Pressable, StyleSheet, Switch } from "react-native";
-import { AtomicIcon, useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { View, StyleSheet, Switch } from "react-native";
+import {
+  AtomicIcon,
+  AtomicText,
+  useResponsiveDesignTokens,
+  ListItem
+} from "@umituz/react-native-design-system";
 
 export interface SettingItemProps {
-  /** Icon name (Ionicons) */
   icon: string;
-  /** Main title text */
   title: string;
-  /** Optional description/value text */
   value?: string;
-  /** Callback when pressed */
   onPress?: () => void;
-  /** Show switch instead of chevron */
   showSwitch?: boolean;
-  /** Switch value */
   switchValue?: boolean;
-  /** Switch change handler */
   onSwitchChange?: (value: boolean) => void;
-  /** Is last item in section (no divider) */
   isLast?: boolean;
-  /** Custom icon color */
   iconColor?: string;
-  /** Custom title color */
   titleColor?: string;
-  /** Test ID for E2E testing */
   testID?: string;
-  /** Disable the item */
   disabled?: boolean;
-  /** Custom switch thumb color */
-  switchThumbColor?: string;
-  /** Custom switch track colors */
-  switchTrackColors?: {
-    false: string;
-    true: string;
-  };
 }
 
+/**
+ * SettingItem - Enhanced ListItem for Settings
+ * Uses design system's ListItem molecule with custom switch support
+ */
 export const SettingItem: React.FC<SettingItemProps> = ({
   icon,
   title,
@@ -55,148 +39,112 @@ export const SettingItem: React.FC<SettingItemProps> = ({
   titleColor,
   testID,
   disabled = false,
-  switchThumbColor,
-  switchTrackColors,
 }) => {
   const tokens = useResponsiveDesignTokens();
-  const colors = tokens.colors;
 
-  return (
-    <>
-      <Pressable
-        style={({ pressed }) => [
-          styles.container,
+  // For switch items, we need custom rendering
+  if (showSwitch) {
+    return (
+      <View
+        style={[
+          styles.switchContainer,
           {
-            backgroundColor: pressed && !disabled && !showSwitch
-              ? `${colors.primary}08`
-              : 'transparent',
-          },
+            borderBottomWidth: isLast ? 0 : 1,
+            borderBottomColor: `${tokens.colors.onSurface}10`,
+          }
         ]}
-        onPress={onPress}
-        disabled={showSwitch || disabled}
-        testID={testID}
       >
-        <View style={styles.content}>
-          <View
-            style={[
-              styles.iconContainer,
-              {
-                backgroundColor: iconColor
-                  ? `${iconColor}15`
-                  : `${colors.primary}15`,
-              },
-            ]}
-          >
+        <View style={styles.switchContent}>
+          <View style={[
+            styles.iconWrapper,
+            { backgroundColor: iconColor ? `${iconColor}15` : `${tokens.colors.primary}15` }
+          ]}>
             <AtomicIcon
               name={icon}
-              customSize={24}
-              customColor={iconColor || colors.primary}
+              size="md"
+              customColor={iconColor || tokens.colors.primary}
             />
           </View>
           <View style={styles.textContainer}>
-            <Text
+            <AtomicText
+              type="bodyLarge"
+              color={disabled ? "surfaceVariant" : "onSurface"}
               style={[
-                styles.title,
-                {
-                  color: disabled
-                    ? colors.textSecondary
-                    : titleColor || colors.textPrimary,
-                  opacity: disabled ? 0.5 : 1,
-                },
+                titleColor ? { color: titleColor } : {},
+                { opacity: disabled ? 0.6 : 1 }
               ]}
               numberOfLines={1}
             >
               {title}
-            </Text>
-            {value && !showSwitch && (
-              <Text
-                style={[styles.value, { color: colors.textSecondary }]}
+            </AtomicText>
+            {value && (
+              <AtomicText
+                type="bodySmall"
+                color="secondary"
                 numberOfLines={2}
+                style={{ marginTop: 2 }}
               >
                 {value}
-              </Text>
+              </AtomicText>
             )}
           </View>
         </View>
-
-        <View style={styles.rightContainer}>
-          {showSwitch ? (
-            <Switch
-              value={switchValue}
-              onValueChange={onSwitchChange}
-              trackColor={switchTrackColors || {
-                false: `${colors.textSecondary}30`,
-                true: colors.primary,
-              }}
-              thumbColor={switchThumbColor || "#FFFFFF"}
-              ios_backgroundColor={`${colors.textSecondary}30`}
-            />
-          ) : (
-            <AtomicIcon
-              name="chevron-forward-outline"
-              customSize={20}
-              customColor={colors.textSecondary}
-            />
-          )}
-        </View>
-      </Pressable>
-
-      {!isLast && (
-        <View
-          style={[
-            styles.divider,
-            { backgroundColor: `${colors.textSecondary}20` },
-          ]}
+        <Switch
+          value={switchValue}
+          onValueChange={onSwitchChange}
+          trackColor={{
+            false: tokens.colors.surfaceVariant,
+            true: tokens.colors.primary
+          }}
+          thumbColor="#FFFFFF"
+          ios_backgroundColor={tokens.colors.surfaceVariant}
+          disabled={disabled}
         />
-      )}
-    </>
+      </View>
+    );
+  }
+
+  // Use design system's ListItem for regular items
+  return (
+    <ListItem
+      title={title}
+      subtitle={value}
+      leftIcon={icon}
+      rightIcon="chevron-forward"
+      onPress={onPress}
+      disabled={disabled}
+      style={{
+        borderBottomWidth: isLast ? 0 : 1,
+        borderBottomColor: `${tokens.colors.onSurface}10`,
+      }}
+    />
   );
 };
 
 const styles = StyleSheet.create({
-  container: {
+  switchContainer: {
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
     paddingHorizontal: 16,
-    paddingVertical: 16,
-    minHeight: 72,
+    paddingVertical: 12,
+    minHeight: 64,
   },
-  content: {
+  switchContent: {
     flexDirection: "row",
     alignItems: "center",
     flex: 1,
   },
-  iconContainer: {
-    width: 48,
-    height: 48,
-    borderRadius: 12,
+  iconWrapper: {
+    width: 40,
+    height: 40,
+    borderRadius: 10,
     justifyContent: "center",
     alignItems: "center",
-    marginRight: 16,
+    marginRight: 12,
   },
   textContainer: {
     flex: 1,
-    minWidth: 0,
-  },
-  title: {
-    fontSize: 16,
-    fontWeight: "500",
-    lineHeight: 20,
-  },
-  value: {
-    fontSize: 14,
-    fontWeight: "400",
-    marginTop: 4,
-    lineHeight: 18,
-  },
-  rightContainer: {
-    flexDirection: "row",
-    alignItems: "center",
-    gap: 8,
-  },
-  divider: {
-    height: 1,
-    marginLeft: 80,
+    paddingRight: 8,
   },
 });

package/src/presentation/components/SettingsFooter.tsx

@@ -1,45 +1,32 @@
-/**
- * Settings Footer Component
- * Single Responsibility: Display app version information
- */
-
 import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { View, StyleSheet } from "react-native";
+import { useResponsiveDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 
 export interface SettingsFooterProps {
-  /** Custom version text (optional) - should include version number from app config */
   versionText?: string;
-  /** App version number from app config (e.g., "1.0.0") */
   appVersion?: string;
-  /** Label for version (e.g., "Version") */
   versionLabel?: string;
 }
 
 export const SettingsFooter: React.FC<SettingsFooterProps> = ({
   versionText,
   appVersion,
-  versionLabel = "Version",
+  versionLabel,
 }) => {
   const tokens = useResponsiveDesignTokens();
   const colors = tokens.colors;
 
-  // If versionText is provided, use it directly
-  // Otherwise build from label + appVersion
-  const displayText = versionText || (appVersion
+  const displayText = versionText || (appVersion && versionLabel
     ? `${versionLabel} ${appVersion}`
-    : undefined);
+    : appVersion || versionText);
 
-  // Don't render if no version info available
-  if (!displayText) {
-    return null;
-  }
+  if (!displayText) return null;
 
   return (
     <View style={styles.container}>
-      <Text style={[styles.text, { color: colors.textSecondary }]}>
+      <AtomicText type="labelSmall" style={{ color: colors.textSecondary }}>
         {displayText}
-      </Text>
+      </AtomicText>
     </View>
   );
 };
@@ -49,9 +36,6 @@ const styles = StyleSheet.create({
     paddingVertical: 24,
     alignItems: "center",
   },
-  text: {
-    fontSize: 12,
-    fontWeight: "500",
-  },
 });
 
+

package/src/presentation/components/SettingsSection.tsx

@@ -1,16 +1,9 @@
-/**
- * Settings Section Component
- * Single Responsibility: Render a settings section with title and container
- */
-
 import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { useResponsiveDesignTokens } from "@umituz/react-native-design-system";
+import { View, StyleSheet } from "react-native";
+import { useResponsiveDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 
 export interface SettingsSectionProps {
-  /** Section title */
   title: string;
-  /** Section content */
   children: React.ReactNode;
 }
 
@@ -23,12 +16,12 @@ export const SettingsSection: React.FC<SettingsSectionProps> = ({
 
   return (
     <View style={[styles.container, { backgroundColor: colors.surface }]}>
-      <Text style={[styles.title, { color: colors.textPrimary }]}>
-        {title}
-      </Text>
-      <View style={styles.content}>
-        {children}
+      <View style={styles.titleContainer}>
+        <AtomicText type="titleLarge" color="primary">
+          {title}
+        </AtomicText>
       </View>
+      {children}
     </View>
   );
 };
@@ -39,15 +32,11 @@ const styles = StyleSheet.create({
     borderRadius: 12,
     overflow: "hidden",
   },
-  title: {
-    fontSize: 18,
-    fontWeight: "600",
+  titleContainer: {
     paddingHorizontal: 16,
     paddingTop: 16,
     paddingBottom: 8,
   },
-  content: {
-    borderRadius: 0,
-  },
 });
 
+

package/src/presentation/hooks/mutations/useSettingsMutations.ts

@@ -0,0 +1,58 @@
+/**
+ * useSettingsMutations Hook
+ *
+ * Mutations for updating and resetting user settings
+ */
+
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { getSettingsService } from '../../../infrastructure/services/SettingsService';
+import { SETTINGS_QUERY_KEY } from '../queries/useSettingsQuery';
+import type { UserSettings } from '../../../application/ports/ISettingsRepository';
+
+export const useUpdateSettingsMutation = (userId: string) => {
+    const queryClient = useQueryClient();
+    const settingsService = getSettingsService();
+
+    return useMutation({
+        mutationFn: async (updates: Partial<UserSettings>) => {
+            const currentResult = await settingsService.getSettings(userId);
+            if (!currentResult.success || !currentResult.data) {
+                throw new Error('Could not find existing settings to update');
+            }
+
+            const updatedSettings = {
+                ...currentResult.data,
+                ...updates,
+                updatedAt: new Date(),
+            };
+
+            const result = await settingsService.saveSettings(updatedSettings);
+            if (!result.success) {
+                throw new Error(result.error?.message || 'Failed to update settings');
+            }
+            return updatedSettings;
+        },
+        onSuccess: (data) => {
+            queryClient.setQueryData([...SETTINGS_QUERY_KEY, userId], data);
+        },
+    });
+};
+
+export const useResetSettingsMutation = (userId: string) => {
+    const queryClient = useQueryClient();
+    const settingsService = getSettingsService();
+
+    return useMutation({
+        mutationFn: async () => {
+            const result = await settingsService.resetSettings(userId);
+            // resetSettings returns the defaults as data
+            if (!result.success) {
+                throw new Error(result.error?.message || 'Failed to reset settings');
+            }
+            return (result as any).data as UserSettings;
+        },
+        onSuccess: (data) => {
+            queryClient.setQueryData([...SETTINGS_QUERY_KEY, userId], data);
+        },
+    });
+};

package/src/presentation/hooks/queries/useSettingsQuery.ts

@@ -0,0 +1,27 @@
+/**
+ * useSettingsQuery Hook
+ *
+ * Fetches user settings using TanStack Query
+ */
+
+import { useQuery } from '@tanstack/react-query';
+import { getSettingsService } from '../../../infrastructure/services/SettingsService';
+import type { UserSettings } from '../../../application/ports/ISettingsRepository';
+
+export const SETTINGS_QUERY_KEY = ['settings'];
+
+export const useSettingsQuery = (userId: string) => {
+    const settingsService = getSettingsService();
+
+    return useQuery({
+        queryKey: [...SETTINGS_QUERY_KEY, userId],
+        queryFn: async () => {
+            const result = await settingsService.getSettings(userId);
+            if (!result.success || !result.data) {
+                throw new Error(result.error?.message || 'Failed to load settings');
+            }
+            return result.data;
+        },
+        enabled: !!userId,
+    });
+};

package/src/presentation/hooks/useSettings.ts

@@ -0,0 +1,45 @@
+/**
+ * useSettings Hook
+ *
+ * Primary hook for accessing and managing user settings.
+ * Integrates with TanStack Query mutations and queries.
+ */
+
+import { useSettingsQuery } from './queries/useSettingsQuery';
+import { useUpdateSettingsMutation, useResetSettingsMutation } from './mutations/useSettingsMutations';
+import type { UserSettings } from '../../application/ports/ISettingsRepository';
+
+export const useSettings = (userId: string) => {
+    const {
+        data: settings,
+        isLoading: loading,
+        error: queryError
+    } = useSettingsQuery(userId);
+
+    const updateMutation = useUpdateSettingsMutation(userId);
+    const resetMutation = useResetSettingsMutation(userId);
+
+    const updateSettings = async (updates: Partial<UserSettings>) => {
+        return updateMutation.mutateAsync(updates);
+    };
+
+    const resetSettings = async () => {
+        return resetMutation.mutateAsync();
+    };
+
+    const error = queryError instanceof Error
+        ? queryError.message
+        : updateMutation.error instanceof Error
+            ? updateMutation.error.message
+            : resetMutation.error instanceof Error
+                ? resetMutation.error.message
+                : null;
+
+    return {
+        settings,
+        loading: loading || updateMutation.isPending || resetMutation.isPending,
+        error,
+        updateSettings,
+        resetSettings,
+    };
+};