@umituz/react-native-settings 4.23.35 → 4.23.36

package/src/domains/localization/infrastructure/repository/LanguageRepository.ts

@@ -0,0 +1,53 @@
+/**
+ * Language Repository
+ * Manages language data with repository pattern
+ * Provides dynamic language management for multiple applications
+ */
+
+import type { Language } from '../storage/types/Language';
+import { DEFAULT_LANGUAGES } from '../config/constants/defaultLanguages';
+
+class LanguageRepository {
+  private languages: Language[] = [...DEFAULT_LANGUAGES];
+
+  registerLanguages(languages: Language[]): void {
+    this.languages = [...this.languages, ...languages];
+  }
+
+  getLanguages(): Language[] {
+    return [...this.languages];
+  }
+
+  clearLanguages(): void {
+    this.languages = [...DEFAULT_LANGUAGES];
+  }
+
+  getLanguageByCode(code: string): Language | undefined {
+    return this.languages.find(lang => lang.code === code);
+  }
+
+  searchLanguages(query: string): Language[] {
+    const lowerQuery = query.toLowerCase();
+    return this.languages.filter(
+      lang =>
+        lang.name.toLowerCase().includes(lowerQuery) ||
+        lang.nativeName.toLowerCase().includes(lowerQuery)
+    );
+  }
+
+  isLanguageSupported(code: string): boolean {
+    return this.languages.some(lang => lang.code === code);
+  }
+
+  getDefaultLanguage(): Language {
+    const en = this.languages.find(l => l.code === 'en-US');
+    if (en) return en;
+    const first = this.languages[0];
+    if (first) return first;
+    const systemDefault = DEFAULT_LANGUAGES[0];
+    if (systemDefault) return systemDefault;
+    throw new Error('No languages registered in repository or defaults');
+  }
+}
+
+export const languageRepository = new LanguageRepository();

package/src/domains/localization/infrastructure/storage/AsyncStorageWrapper.ts

@@ -0,0 +1,24 @@
+/**
+ * Storage Wrapper
+ * Uses @umituz/react-native-design-system for persistence
+ */
+
+import { storageRepository } from '@umituz/react-native-design-system';
+
+export const STORAGE_KEYS = {
+  LANGUAGE: '@localization:language',
+} as const;
+
+export const StorageWrapper = {
+  async getString(key: string, defaultValue: string): Promise<string> {
+    const result = await storageRepository.getString(key, defaultValue);
+    if (result.success && result.data !== null) {
+      return result.data;
+    }
+    return defaultValue;
+  },
+
+  async setString(key: string, value: string): Promise<void> {
+    await storageRepository.setString(key, value);
+  },
+};

package/src/domains/localization/infrastructure/storage/LanguageInitializer.ts

@@ -0,0 +1,81 @@
+/**
+ * Language Initializer
+ *
+ * Handles the initialization of localization system
+ * - Device locale detection
+ * - Language validation and fallback
+ * - i18n setup
+ */
+
+declare const __DEV__: boolean;
+
+import { storageRepository } from '@umituz/react-native-design-system';
+import i18n from '../config/i18n';
+import { languageRepository } from '../repository/LanguageRepository';
+import { getDeviceLocale } from '../config/languages';
+
+const LANGUAGE_STORAGE_KEY = '@localization:language';
+const DEFAULT_LANGUAGE = 'en-US';
+
+export class LanguageInitializer {
+  /**
+   * Initialize localization system
+   */
+  static async initialize(): Promise<{
+    languageCode: string;
+    isRTL: boolean;
+  }> {
+    try {
+      const savedResult = await storageRepository.getString(LANGUAGE_STORAGE_KEY, DEFAULT_LANGUAGE);
+      const savedLanguage = savedResult.success && savedResult.data ? savedResult.data : DEFAULT_LANGUAGE;
+      const languageCode = await this.determineLanguageCode(savedLanguage);
+      const finalLanguage = await this.validateAndSetupLanguage(languageCode);
+
+      return finalLanguage;
+    } catch {
+      if (typeof __DEV__ !== "undefined" && __DEV__) {
+        console.warn("[LanguageInitializer] Failed to restore language, falling back to device locale");
+      }
+      return await this.setupFallbackLanguage();
+    }
+  }
+
+  private static async determineLanguageCode(savedLanguage: string): Promise<string> {
+    if (savedLanguage && savedLanguage !== DEFAULT_LANGUAGE) {
+      return savedLanguage;
+    }
+
+    const deviceLocale = getDeviceLocale();
+    await storageRepository.setString(LANGUAGE_STORAGE_KEY, deviceLocale);
+    return deviceLocale;
+  }
+
+  private static async validateAndSetupLanguage(languageCode: string): Promise<{
+    languageCode: string;
+    isRTL: boolean;
+  }> {
+    const language = languageRepository.getLanguageByCode(languageCode);
+    const finalLanguageCode = language ? languageCode : 'en-US';
+    const finalLanguageObj = languageRepository.getLanguageByCode(finalLanguageCode);
+
+    await i18n.changeLanguage(finalLanguageCode);
+
+    return {
+      languageCode: finalLanguageCode,
+      isRTL: finalLanguageObj?.isRTL || false,
+    };
+  }
+
+  private static async setupFallbackLanguage(): Promise<{
+    languageCode: string;
+    isRTL: boolean;
+  }> {
+    // No try-catch needed - let errors propagate naturally
+    // This preserves the full stack trace
+    await i18n.changeLanguage(DEFAULT_LANGUAGE);
+    return {
+      languageCode: DEFAULT_LANGUAGE,
+      isRTL: false,
+    };
+  }
+}

package/src/domains/localization/infrastructure/storage/LanguageSwitcher.ts

@@ -0,0 +1,52 @@
+/**
+ * Language Switcher
+ *
+ * Handles switching between languages
+ * - Language validation
+ * - Persistence
+ */
+
+declare const __DEV__: boolean;
+
+import { storageRepository } from '@umituz/react-native-design-system';
+import i18n from '../config/i18n';
+import { languageRepository } from '../repository/LanguageRepository';
+
+const LANGUAGE_STORAGE_KEY = '@localization:language';
+
+export class LanguageSwitcher {
+  /**
+   * Switch to a new language
+   */
+  static async switchLanguage(languageCode: string): Promise<{
+    languageCode: string;
+    isRTL: boolean;
+  }> {
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log('[LanguageSwitcher] switchLanguage called:', languageCode);
+    }
+
+    const language = languageRepository.getLanguageByCode(languageCode);
+
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log('[LanguageSwitcher] Language object:', language);
+    }
+
+    await i18n.changeLanguage(languageCode);
+
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log('[LanguageSwitcher] i18n language changed to:', i18n.language);
+    }
+
+    await storageRepository.setString(LANGUAGE_STORAGE_KEY, languageCode);
+
+    if (typeof __DEV__ !== "undefined" && __DEV__) {
+      console.log('[LanguageSwitcher] Saved to storage');
+    }
+
+    return {
+      languageCode,
+      isRTL: language?.isRTL || false,
+    };
+  }
+}

package/src/domains/localization/infrastructure/storage/LocalizationStore.ts

@@ -0,0 +1,142 @@
+/**
+ * Localization Store Factory
+ * Creates and manages localization state with proper separation of concerns
+ */
+
+import { create } from 'zustand';
+import type { LocalizationState, LocalizationActions, LocalizationGetters } from './types/LocalizationState';
+import { LanguageInitializer } from './LanguageInitializer';
+import { LanguageSwitcher } from './LanguageSwitcher';
+import { languageRepository } from '../repository/LanguageRepository';
+
+declare const __DEV__: boolean;
+
+type LocalizationStoreType = LocalizationState & LocalizationActions & LocalizationGetters;
+
+// Mutex to prevent race condition in initialize
+let initializeInProgress = false;
+// Debounce timer for language switching
+let languageSwitchTimer: ReturnType<typeof setTimeout> | null = null;
+const LANGUAGE_SWITCH_DEBOUNCE_MS = 300;
+// Track pending promise resolvers to ensure all get resolved
+let pendingResolvers: Array<() => void> = [];
+
+export const useLocalizationStore = create<LocalizationStoreType>((set, get) => ({
+  // State
+  currentLanguage: 'en-US',
+  isRTL: false,
+  isInitialized: false,
+  supportedLanguages: languageRepository.getLanguages(),
+
+  // Actions
+  initialize: async () => {
+    const { isInitialized: alreadyInitialized } = get();
+
+    // Atomic check: both state flag AND in-progress mutex
+    if (alreadyInitialized || initializeInProgress) {
+      return;
+    }
+
+    // Set mutex immediately (synchronous)
+    initializeInProgress = true;
+
+    try {
+      const result = await LanguageInitializer.initialize();
+
+      set({
+        currentLanguage: result.languageCode,
+        isRTL: result.isRTL,
+        isInitialized: true,
+      });
+    } catch {
+      set({
+        currentLanguage: 'en-US',
+        isRTL: false,
+        isInitialized: true,
+      });
+    } finally {
+      // Reset mutex after completion (success or failure)
+      initializeInProgress = false;
+    }
+  },
+
+  setLanguage: async (languageCode: string) => {
+    // Debounce rapid language switches
+    if (languageSwitchTimer) {
+      clearTimeout(languageSwitchTimer);
+    }
+
+    return new Promise<void>((resolve) => {
+      // Add this resolver to pending list
+      pendingResolvers.push(resolve);
+
+      languageSwitchTimer = setTimeout(async () => {
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.log('[LocalizationStore] setLanguage called:', languageCode);
+        }
+
+        try {
+          const result = await LanguageSwitcher.switchLanguage(languageCode);
+
+          if (typeof __DEV__ !== "undefined" && __DEV__) {
+            console.log('[LocalizationStore] LanguageSwitcher result:', result);
+          }
+
+          set({
+            currentLanguage: result.languageCode,
+            isRTL: result.isRTL,
+          });
+
+          if (typeof __DEV__ !== "undefined" && __DEV__) {
+            console.log('[LocalizationStore] Store updated with new language:', result.languageCode);
+          }
+        } catch (error) {
+          if (typeof __DEV__ !== "undefined" && __DEV__) {
+            console.error('[LocalizationStore] Language switch failed:', error);
+          }
+        }
+
+        languageSwitchTimer = null;
+
+        // Resolve ALL pending promises (not just the latest)
+        const resolvers = [...pendingResolvers];
+        pendingResolvers = [];
+        resolvers.forEach(r => r());
+      }, LANGUAGE_SWITCH_DEBOUNCE_MS);
+    });
+  },
+
+  reset: () => {
+    // Clear any pending language switch
+    if (languageSwitchTimer) {
+      clearTimeout(languageSwitchTimer);
+      languageSwitchTimer = null;
+    }
+    // Resolve any pending promises to prevent hanging
+    const resolvers = [...pendingResolvers];
+    pendingResolvers = [];
+    resolvers.forEach(r => r());
+    // Reset mutex
+    initializeInProgress = false;
+
+    set({
+      currentLanguage: 'en-US',
+      isRTL: false,
+      isInitialized: false,
+    });
+  },
+
+  // Getters
+  getCurrentLanguage: () => {
+    const { currentLanguage } = get();
+    return languageRepository.getLanguageByCode(currentLanguage);
+  },
+
+  isLanguageSupported: (code: string) => {
+    return languageRepository.isLanguageSupported(code);
+  },
+
+  getSupportedLanguages: () => {
+    return languageRepository.getLanguages();
+  },
+}));

package/src/domains/localization/infrastructure/storage/types/Language.ts

@@ -0,0 +1,13 @@
+/**
+ * Language Type
+ * Generic language interface for localization packages
+ * This is a base configuration that can be extended by consuming applications
+ */
+
+export interface Language {
+  code: string;
+  name: string;
+  nativeName: string;
+  flag?: string;
+  isRTL?: boolean;
+}

package/src/domains/localization/infrastructure/storage/types/LocalizationState.ts

@@ -0,0 +1,27 @@
+/**
+ * Localization State Interface
+ * Defines the shape of localization state management
+ */
+
+import type { Language } from './Language';
+
+export type { Language };
+
+export interface LocalizationState {
+  currentLanguage: string;
+  isRTL: boolean;
+  isInitialized: boolean;
+  supportedLanguages: Language[];
+}
+
+export interface LocalizationActions {
+  initialize: () => Promise<void>;
+  setLanguage: (languageCode: string) => Promise<void>;
+  reset: () => void;
+}
+
+export interface LocalizationGetters {
+  getCurrentLanguage: () => Language | undefined;
+  isLanguageSupported: (code: string) => boolean;
+  getSupportedLanguages: () => Language[];
+}

package/src/domains/localization/presentation/components/LanguageItem.styles.ts

@@ -0,0 +1,40 @@
+/**
+ * Language Item Component Styles
+ */
+
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  languageItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    borderWidth: 1,
+  },
+  selectedLanguageItem: {
+    borderWidth: 2,
+  },
+  languageContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  flag: {
+    fontSize: 24,
+    marginRight: 16,
+  },
+  languageText: {
+    flex: 1,
+    flexShrink: 1,
+  },
+  nativeName: {
+    // Styling moved to themedStyles in component for token support
+  },
+  languageName: {
+    // Styling moved to themedStyles in component for token support
+  },
+  checkIcon: {
+    // Replaced by AtomicIcon
+  },
+});
+

package/src/domains/localization/presentation/components/LanguageItem.tsx

@@ -0,0 +1,106 @@
+/**
+ * Language Item Component
+ *
+ * Renders a single language item in the language selection list
+ * Theme-aware component that adapts to light/dark mode
+ */
+
+import React, { useMemo } from 'react';
+import {
+  View,
+  TouchableOpacity,
+  type StyleProp,
+  type ViewStyle,
+  type TextStyle,
+} from 'react-native';
+// @ts-ignore - Optional peer dependency
+import { useAppDesignTokens, AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import type { Language } from '../../infrastructure/storage/types/Language';
+import { styles } from './LanguageItem.styles';
+
+interface LanguageItemProps {
+  item: Language;
+  isSelected: boolean;
+  onSelect: (code: string) => void;
+  customStyles?: {
+    languageItem?: StyleProp<ViewStyle>;
+    languageContent?: StyleProp<ViewStyle>;
+    languageText?: StyleProp<ViewStyle>;
+    flag?: StyleProp<TextStyle>;
+    nativeName?: StyleProp<TextStyle>;
+  };
+}
+
+export const LanguageItem: React.FC<LanguageItemProps> = ({
+  item,
+  isSelected,
+  onSelect,
+  customStyles,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const themedStyles = useMemo(() => ({
+    languageItem: {
+      padding: tokens.spacing.md,
+      borderRadius: tokens.borders.radius.md,
+      backgroundColor: tokens.colors.backgroundSecondary,
+      borderColor: tokens.colors.border,
+      marginBottom: tokens.spacing.sm,
+    } as ViewStyle,
+    selectedLanguageItem: {
+      borderColor: tokens.colors.primary,
+      backgroundColor: tokens.colors.primaryContainer,
+      borderWidth: 2,
+    } as ViewStyle,
+    nativeName: {
+      color: tokens.colors.textPrimary,
+      marginBottom: tokens.spacing.xs / 2,
+    } as TextStyle,
+    languageName: {
+      color: tokens.colors.textSecondary,
+    } as TextStyle,
+  }), [tokens]);
+
+  return (
+    <TouchableOpacity
+      testID="language-item-test"
+      style={[
+        styles.languageItem,
+        themedStyles.languageItem,
+        isSelected ? [styles.selectedLanguageItem, themedStyles.selectedLanguageItem] : undefined,
+        customStyles?.languageItem,
+      ]}
+      onPress={() => {
+        if (__DEV__) {
+          console.log('[LanguageItem] TouchableOpacity pressed:', item.code, item.nativeName);
+        }
+        onSelect(item.code);
+      }}
+      activeOpacity={0.7}
+    >
+      <View style={[styles.languageContent, customStyles?.languageContent]}>
+        <AtomicText style={[styles.flag, customStyles?.flag]}>
+          {item.flag || '🌐'}
+        </AtomicText>
+        <View style={[styles.languageText, { gap: tokens.spacing.xs / 2 }, customStyles?.languageText]}>
+          <AtomicText 
+            type="bodyMedium" 
+            style={[themedStyles.nativeName, { fontWeight: '700' }, customStyles?.nativeName]}
+          >
+            {item.nativeName}
+          </AtomicText>
+          <AtomicText 
+            type="labelMedium" 
+            style={[themedStyles.languageName, customStyles?.nativeName]}
+          >
+            {item.name}
+          </AtomicText>
+        </View>
+      </View>
+      {isSelected && (
+        <AtomicIcon name="checkmark" size="sm" color="primary" />
+      )}
+    </TouchableOpacity>
+  );
+};
+

package/src/domains/localization/presentation/components/LanguageSection.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { View, StyleSheet, type ViewStyle } from 'react-native';
+// @ts-ignore - Optional peer dependency
+import {
+    useAppDesignTokens,
+    AtomicText,
+    ListItem,
+    useAppNavigation,
+} from '@umituz/react-native-design-system';
+import { useLocalization } from '../../infrastructure/hooks/useLocalization';
+import { getLanguageByCode } from '../../infrastructure/config/languages';
+
+export interface LanguageSectionConfig {
+    route?: string;
+    onPress?: () => void;
+    title?: string;
+    description?: string;
+    defaultLanguageDisplay?: string;
+}
+
+export interface LanguageSectionProps {
+    config?: LanguageSectionConfig;
+    containerStyle?: ViewStyle;
+    sectionTitle?: string;
+}
+
+export const LanguageSection: React.FC<LanguageSectionProps> = ({
+    config,
+    containerStyle,
+    sectionTitle,
+}) => {
+    const tokens = useAppDesignTokens();
+    const { t, currentLanguage } = useLocalization();
+    const navigation = useAppNavigation();
+
+    const route = config?.route || 'LanguageSelection';
+    const title = config?.title || t('settings.languageSelection.title') || 'Language';
+    const displaySectionTitle = sectionTitle || title;
+
+    const currentLang = getLanguageByCode(currentLanguage);
+    const defaultLanguageDisplay = config?.defaultLanguageDisplay || 'English';
+    const languageDisplay = currentLang
+        ? `${currentLang.flag} ${currentLang.nativeName}`
+        : defaultLanguageDisplay;
+
+    const handlePress = () => {
+        if (config?.onPress) {
+            config.onPress();
+        } else {
+            navigation.navigate(route as never);
+        }
+    };
+
+    return (
+        <View style={[styles.sectionContainer, { backgroundColor: tokens.colors.surface }, containerStyle]}>
+            <View style={styles.headerContainer}>
+                <AtomicText type="titleMedium" color="primary">
+                    {displaySectionTitle}
+                </AtomicText>
+            </View>
+            <ListItem
+                title={title}
+                subtitle={languageDisplay}
+                leftIcon="globe"
+                rightIcon="chevron-forward"
+                onPress={handlePress}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    sectionContainer: {
+        marginBottom: 16,
+        borderRadius: 12,
+        overflow: 'hidden',
+    },
+    headerContainer: {
+        paddingHorizontal: 16,
+        paddingTop: 16,
+        paddingBottom: 8,
+    },
+});