@umituz/react-native-settings 4.17.14 → 4.17.16

package/src/domains/appearance/infrastructure/storage/appearanceStorage.ts

@@ -0,0 +1,120 @@
+/**
+ * Appearance Storage Service
+ *
+ * Handles persistence of appearance settings using AsyncStorage
+ * Single Responsibility: Pure storage operations only
+ */
+
+import { storageRepository, unwrap } from "@umituz/react-native-storage";
+import type { ThemeMode } from "@umituz/react-native-design-system";
+import type { AppearanceSettings } from "../../types";
+
+const STORAGE_KEYS = {
+  APPEARANCE_SETTINGS: "@appearance_settings",
+} as const;
+
+const DEFAULT_SETTINGS: AppearanceSettings = {
+  themeMode: "dark",
+};
+
+export class AppearanceStorage {
+  /**
+   * Get saved appearance settings
+   * Pure storage operation - no business logic
+   */
+  static async getSettings(): Promise<AppearanceSettings | null> {
+    try {
+      const result = await storageRepository.getItem<AppearanceSettings>(
+        STORAGE_KEYS.APPEARANCE_SETTINGS,
+        DEFAULT_SETTINGS,
+      );
+      const data = unwrap(result, DEFAULT_SETTINGS);
+      return data;
+    } catch (error) {
+      return null;
+    }
+  }
+
+  /**
+   * Save appearance settings
+   * Pure storage operation - no business logic
+   */
+  static async setSettings(settings: AppearanceSettings): Promise<void> {
+    const result = await storageRepository.setItem(
+      STORAGE_KEYS.APPEARANCE_SETTINGS,
+      settings,
+    );
+    if (!result.success) {
+      throw new Error("Failed to save appearance settings");
+    }
+  }
+
+  /**
+   * Get saved theme mode
+   * Pure storage operation - no business logic
+   */
+  static async getThemeMode(): Promise<ThemeMode | null> {
+    try {
+      const settings = await this.getSettings();
+      return settings?.themeMode || null;
+    } catch (error) {
+      return null;
+    }
+  }
+
+  /**
+   * Save theme mode
+   * Pure storage operation - no business logic
+   */
+  static async setThemeMode(themeMode: ThemeMode): Promise<void> {
+    const currentSettings = (await this.getSettings()) || {
+      themeMode: "dark",
+    };
+    await this.setSettings({
+      ...currentSettings,
+      themeMode,
+    });
+  }
+
+  /**
+   * Get custom theme colors
+   * Pure storage operation - no business logic
+   */
+  static async getCustomColors() {
+    try {
+      const settings = await this.getSettings();
+      return settings?.customColors || null;
+    } catch (error) {
+      return null;
+    }
+  }
+
+  /**
+   * Save custom theme colors
+   * Pure storage operation - no business logic
+   */
+  static async setCustomColors(
+    customColors: AppearanceSettings["customColors"],
+  ): Promise<void> {
+    const currentSettings = (await this.getSettings()) || {
+      themeMode: "dark",
+    };
+    await this.setSettings({
+      ...currentSettings,
+      customColors,
+    });
+  }
+
+  /**
+   * Clear all appearance settings
+   * Pure storage operation - no business logic
+   */
+  static async clear(): Promise<void> {
+    const result = await storageRepository.removeItem(
+      STORAGE_KEYS.APPEARANCE_SETTINGS,
+    );
+    if (!result.success) {
+      throw new Error("Failed to clear appearance settings");
+    }
+  }
+}

package/src/domains/appearance/infrastructure/stores/appearanceStore.ts

@@ -0,0 +1,132 @@
+/**
+ * Appearance Store
+ *
+ * Zustand store for appearance state management
+ * Single Responsibility: Pure state management only
+ */
+
+import { create } from "zustand";
+import type { AppearanceSettings, AppearanceState } from "../../types";
+
+interface AppearanceStoreActions {
+  // Pure state mutations only
+  setSettings: (settings: AppearanceSettings) => void;
+  setInitialized: (initialized: boolean) => void;
+  updateThemeMode: (mode: AppearanceSettings["themeMode"]) => void;
+  updateCustomColors: (colors: AppearanceSettings["customColors"]) => void;
+  resetState: () => void;
+}
+
+type AppearanceStore = AppearanceState & AppearanceStoreActions;
+
+const DEFAULT_SETTINGS: AppearanceSettings = {
+  themeMode: "dark", // Use dark mode as default
+};
+
+export const useAppearanceStore = create<AppearanceStore>((set, get) => ({
+  settings: DEFAULT_SETTINGS,
+  isInitialized: false,
+
+  // Pure state mutations with performance optimizations
+  setSettings: (settings: AppearanceSettings) => {
+    // Prevent unnecessary updates if settings are the same
+    const currentSettings = get().settings;
+    if (JSON.stringify(currentSettings) === JSON.stringify(settings)) {
+      if (__DEV__) {
+        console.log("[AppearanceStore] Skipping settings update - no changes");
+      }
+      return;
+    }
+
+    if (__DEV__) {
+      console.log("[AppearanceStore] Setting appearance settings:", settings);
+    }
+    set({ settings });
+  },
+
+  setInitialized: (initialized: boolean) => {
+    // Prevent unnecessary updates if state is the same
+    const currentInitialized = get().isInitialized;
+    if (currentInitialized === initialized) {
+      if (__DEV__) {
+        console.log("[AppearanceStore] Skipping initialized update - no change");
+      }
+      return;
+    }
+
+    if (__DEV__) {
+      console.log("[AppearanceStore] Setting initialized state:", initialized);
+    }
+    set({ isInitialized: initialized });
+  },
+
+  updateThemeMode: (mode: AppearanceSettings["themeMode"]) => {
+    const currentSettings = get().settings;
+    
+    // Prevent unnecessary updates if mode is the same
+    if (currentSettings.themeMode === mode) {
+      if (__DEV__) {
+        console.log("[AppearanceStore] Skipping theme mode update - no change");
+      }
+      return;
+    }
+
+    const newSettings: AppearanceSettings = {
+      ...currentSettings,
+      themeMode: mode,
+    };
+    
+    if (__DEV__) {
+      console.log("[AppearanceStore] Updating theme mode:", mode);
+    }
+    
+    set({ settings: newSettings });
+  },
+
+  updateCustomColors: (colors: AppearanceSettings["customColors"]) => {
+    const currentSettings = get().settings;
+    
+    // Prevent unnecessary updates if colors are the same
+    if (JSON.stringify(currentSettings.customColors) === JSON.stringify(colors)) {
+      if (__DEV__) {
+        console.log("[AppearanceStore] Skipping custom colors update - no changes");
+      }
+      return;
+    }
+
+    const newSettings: AppearanceSettings = {
+      ...currentSettings,
+      customColors: colors,
+    };
+    
+    if (__DEV__) {
+      console.log("[AppearanceStore] Updating custom colors:", colors);
+    }
+    
+    set({ settings: newSettings });
+  },
+
+  resetState: () => {
+    const currentState = get();
+    
+    // Prevent unnecessary reset if already at default
+    if (
+      currentState.isInitialized === false &&
+      JSON.stringify(currentState.settings) === JSON.stringify(DEFAULT_SETTINGS)
+    ) {
+      if (__DEV__) {
+        console.log("[AppearanceStore] Skipping reset - already at default state");
+      }
+      return;
+    }
+
+    if (__DEV__) {
+      console.log("[AppearanceStore] Resetting to default state");
+    }
+    
+    set({
+      settings: DEFAULT_SETTINGS,
+      isInitialized: false,
+    });
+  },
+}));

package/src/domains/appearance/presentation/components/AppearanceHeader.tsx

@@ -0,0 +1,67 @@
+/**
+ * Appearance Header Component
+ * Single Responsibility: Render appearance screen header
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system";
+import type { DesignTokens } from "@umituz/react-native-design-system";
+
+export interface AppearanceHeaderProps {
+  tokens: DesignTokens;
+  title?: string;
+  subtitle?: string;
+  titleType?: "headlineLarge" | "headlineMedium" | "headlineSmall";
+  subtitleType?: "bodyLarge" | "bodyMedium" | "bodySmall";
+  titleColor?: "primary" | "secondary" | "tertiary";
+  subtitleColor?: "primary" | "secondary" | "tertiary";
+  style?: any;
+}
+
+export const AppearanceHeader: React.FC<AppearanceHeaderProps> = ({
+  tokens,
+  title,
+  subtitle,
+  titleType = "headlineLarge",
+  subtitleType = "bodyMedium",
+  titleColor = "primary",
+  subtitleColor = "secondary",
+  style,
+}) => {
+  // Don't render anything if there's no content
+  if (!title && !subtitle) {
+    return null;
+  }
+
+  const styles = getStyles(tokens);
+
+  return (
+    <View style={[styles.header, style]}>
+      {title ? (
+        <AtomicText type={titleType} color={titleColor}>
+          {title}
+        </AtomicText>
+      ) : null}
+      {subtitle ? (
+        <AtomicText
+          type={subtitleType}
+          color={subtitleColor}
+          style={styles.headerSubtitle}
+        >
+          {subtitle}
+        </AtomicText>
+      ) : null}
+    </View>
+  );
+};
+
+const getStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    header: {
+      marginBottom: tokens.spacing.lg,
+    },
+    headerSubtitle: {
+      marginTop: tokens.spacing.sm,
+    },
+  });

package/src/domains/appearance/presentation/components/AppearancePreview.tsx

@@ -0,0 +1,141 @@
+/**
+ * Appearance Preview Component
+ * Single Responsibility: Render color preview section
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system";
+import type { DesignTokens } from "@umituz/react-native-design-system";
+import type { CustomThemeColors } from "../../types";
+
+export interface PreviewColorItem {
+  key: keyof CustomThemeColors;
+  label: string;
+  fallbackColor: string;
+}
+
+export interface AppearancePreviewProps {
+  tokens: DesignTokens;
+  localCustomColors: CustomThemeColors;
+  title?: string;
+  description?: string;
+  previewColors?: PreviewColorItem[];
+  showPreview?: boolean;
+}
+
+const DEFAULT_PREVIEW_COLORS: PreviewColorItem[] = [
+  {
+    key: "primary",
+    label: "Primary",
+    fallbackColor: "#007AFF",
+  },
+  {
+    key: "secondary", 
+    label: "Secondary",
+    fallbackColor: "#8E8E93",
+  },
+  {
+    key: "accent",
+    label: "Accent",
+    fallbackColor: "#FF6B6B",
+  },
+  {
+    key: "buttonPrimary",
+    label: "Button",
+    fallbackColor: "#007AFF",
+  },
+];
+
+export const AppearancePreview: React.FC<AppearancePreviewProps> = ({
+  tokens,
+  localCustomColors,
+  title,
+  description,
+  previewColors = DEFAULT_PREVIEW_COLORS,
+  showPreview = true,
+}) => {
+  const styles = getStyles(tokens);
+
+  const colors = previewColors.map((item) => ({
+    label: item.label,
+    color: localCustomColors[item.key] || item.fallbackColor,
+  }));
+
+  if (!showPreview) {
+    return null;
+  }
+
+  return (
+    <View style={styles.previewSection}>
+      <AtomicText
+        type="titleMedium"
+        color="primary"
+        style={styles.sectionTitle}
+      >
+        {title}
+      </AtomicText>
+      <AtomicText
+        type="bodySmall"
+        color="secondary"
+        style={styles.sectionDescription}
+      >
+        {description}
+      </AtomicText>
+      <View style={styles.previewContainer}>
+        <View style={styles.previewColorRow}>
+          {colors.map((item, index) => (
+            <View key={index} style={styles.previewColorItem}>
+              <View
+                style={[
+                  styles.previewColorCircle,
+                  { backgroundColor: item.color },
+                ]}
+              />
+              <AtomicText type="bodySmall" color="secondary">
+                {item.label}
+              </AtomicText>
+            </View>
+          ))}
+        </View>
+      </View>
+    </View>
+  );
+};
+
+const getStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    previewSection: {
+      marginBottom: tokens.spacing.lg,
+    },
+    sectionTitle: {
+      marginBottom: tokens.spacing.xs,
+    },
+    sectionDescription: {
+      marginBottom: tokens.spacing.md,
+    },
+    previewContainer: {
+      backgroundColor: tokens.colors.surface,
+      borderRadius: 12,
+      padding: tokens.spacing.md,
+      borderLeftWidth: 4,
+      borderLeftColor: tokens.colors.primary,
+    },
+    previewColorRow: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: tokens.spacing.md,
+      marginTop: tokens.spacing.sm,
+    },
+    previewColorItem: {
+      alignItems: "center",
+    },
+    previewColorCircle: {
+      width: 32,
+      height: 32,
+      borderRadius: 16,
+      marginBottom: tokens.spacing.xs,
+      borderWidth: 1,
+      borderColor: tokens.colors.border,
+    },
+  });

package/src/domains/appearance/presentation/components/AppearanceSection.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { View, Pressable, StyleSheet, ViewStyle } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useResponsiveDesignTokens, AtomicIcon, AtomicText } from '@umituz/react-native-design-system';
+import { AppearanceSectionConfig } from '../../types';
+
+export interface AppearanceSectionProps {
+    config?: AppearanceSectionConfig;
+    onPress?: () => void;
+    containerStyle?: ViewStyle;
+    sectionTitle?: string;
+    /** Optional explicit title override */
+    title?: string;
+    /** Optional explicit description override */
+    description?: string;
+}
+
+export const AppearanceSection: React.FC<AppearanceSectionProps> = ({
+    config,
+    onPress,
+    containerStyle,
+    sectionTitle,
+    title: titleProp,
+    description: descriptionProp,
+}) => {
+    const navigation = useNavigation();
+    const tokens = useResponsiveDesignTokens();
+    const colors = tokens.colors;
+
+    const route = config?.route || config?.defaultRoute || 'Appearance';
+    // Use props first, then config, then strict empty string to avoid hardcoded English
+    const title = titleProp || config?.title;
+    const description = descriptionProp || config?.description;
+
+    // Only display section title if provided
+    const displaySectionTitle = sectionTitle || title;
+
+    const handlePress = () => {
+        if (onPress) {
+            onPress();
+        } else {
+            navigation.navigate(route as never);
+        }
+    };
+
+    if (!title) return null;
+
+    return (
+        <View style={[styles.sectionContainer, { backgroundColor: colors.surface }, containerStyle]}>
+            {!!displaySectionTitle && (
+                <View style={styles.headerContainer}>
+                    <AtomicText
+                        type="titleMedium"
+                        color="primary"
+                    >
+                        {displaySectionTitle}
+                    </AtomicText>
+                </View>
+            )}
+            <Pressable
+                style={({ pressed }) => [
+                    styles.itemContainer,
+                    {
+                        backgroundColor: pressed ? `${colors.primary}08` : 'transparent',
+                    },
+                ]}
+                onPress={handlePress}
+            >
+                <View style={styles.content}>
+                    <View
+                        style={[
+                            styles.iconContainer,
+                            { backgroundColor: `${colors.primary}15` },
+                        ]}
+                    >
+                        <AtomicIcon name="droplet" 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-right" size="md" color="secondary" />
+                </View>
+            </Pressable>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    sectionContainer: {
+        marginBottom: 16,
+        borderRadius: 12,
+        overflow: 'hidden',
+    },
+    headerContainer: {
+        paddingHorizontal: 16,
+        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/presentation/components/ColorPicker.tsx

@@ -0,0 +1,113 @@
+/**
+ * Color Picker Component
+ *
+ * Simple color picker for theme customization
+ * Single Responsibility: Render color selection UI
+ */
+
+import React, { useMemo, useCallback } from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicIcon,
+  AtomicText,
+  useResponsiveDesignTokens,
+} from "@umituz/react-native-design-system";
+
+interface ColorPickerProps {
+  label: string;
+  value: string;
+  onValueChange: (color: string) => void;
+  colors: string[];
+}
+
+export const ColorPicker: React.FC<ColorPickerProps> = ({
+  label,
+  value,
+  onValueChange,
+  colors,
+}) => {
+  const tokens = useResponsiveDesignTokens();
+
+  // Memoize styles to prevent unnecessary re-creation
+  const styles = useMemo(() => getStyles(tokens), [tokens]);
+
+  // Memoize colors array to prevent unnecessary re-renders
+  const colorsMemo = useMemo(() => colors, [colors]);
+
+  // Stable callback for color change to prevent infinite re-renders
+  const handleColorChange = useCallback((color: string) => {
+    try {
+      // Prevent unnecessary updates if color hasn't changed
+      if (value === color) return;
+
+      onValueChange(color);
+    } catch (error) {
+      if (__DEV__) {
+        console.error("[ColorPicker] Failed to change color:", error);
+      }
+    }
+  }, [value, onValueChange]);
+
+  // Memoize color options to prevent unnecessary re-renders
+  const colorOptions = useMemo(() => {
+    return colorsMemo.map((color) => {
+      const isSelected = value === color;
+
+      return (
+        <TouchableOpacity
+          key={color}
+          style={[
+            styles.colorOption,
+            { backgroundColor: color },
+            isSelected && styles.selectedColor,
+          ]}
+          onPress={() => handleColorChange(color)}
+          activeOpacity={0.8} // Performance optimization
+        >
+          {isSelected && (
+            <AtomicIcon name="checkmark" size="sm" customColor="#FFFFFF" />
+          )}
+        </TouchableOpacity>
+      );
+    });
+  }, [colorsMemo, value, handleColorChange, styles]);
+
+  return (
+    <View style={styles.container}>
+      <AtomicText type="bodyMedium" color="primary" style={styles.label}>
+        {label}
+      </AtomicText>
+      <View style={styles.colorRow}>
+        {colorOptions}
+      </View>
+    </View>
+  );
+};
+
+const getStyles = (tokens: ReturnType<typeof useResponsiveDesignTokens>) =>
+  StyleSheet.create({
+    container: {
+      marginBottom: 16,
+    },
+    label: {
+      marginBottom: 8,
+    },
+    colorRow: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: 12,
+    },
+    colorOption: {
+      width: 40,
+      height: 40,
+      borderRadius: 20,
+      borderWidth: 2,
+      borderColor: tokens.colors.border,
+      justifyContent: "center",
+      alignItems: "center",
+    },
+    selectedColor: {
+      borderColor: tokens.colors.primary,
+      borderWidth: 3,
+    },
+  });