@umituz/react-native-localization 2.6.0 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-localization",
-  "version": "2.6.0",
+  "version": "2.8.0",
   "description": "English-only localization system for React Native apps with i18n support",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -33,7 +33,7 @@
   "license": "MIT",
   "repository": {
     "type": "git",
-    "url": "https://github.com/umituz/react-native-localization"
+    "url": "git+https://github.com/umituz/react-native-localization.git"
   },
   "dependencies": {
     "expo-localization": "~15.0.0",

package/src/index.ts

@@ -26,5 +26,8 @@ export {
   searchLanguages,
 } from './infrastructure/config/languages';
 
+// Presentation
+export { LanguageSelectionScreen } from './presentation/screens/LanguageSelectionScreen';
+
 // Types
 export type { Language, ILocalizationRepository } from './domain/repositories/ILocalizationRepository';

package/src/infrastructure/components/LocalizationProvider.tsx

@@ -1,21 +1,29 @@
 /**
  * LocalizationProvider Component
- * Initializes localization system on mount
+ * Initializes localization system with app translations
  */
 
 import React, { useEffect, ReactNode } from 'react';
 import { useLocalizationStore } from '../storage/LocalizationStore';
+import { I18nInitializer } from '../config/I18nInitializer';
 
 interface LocalizationProviderProps {
   children: ReactNode;
+  translations: Record<string, any>;
+  defaultLanguage?: string;
 }
 
-export const LocalizationProvider: React.FC<LocalizationProviderProps> = ({ children }) => {
+export const LocalizationProvider: React.FC<LocalizationProviderProps> = ({
+  children,
+  translations,
+  defaultLanguage = 'en-US',
+}) => {
   const initialize = useLocalizationStore((state) => state.initialize);
 
   useEffect(() => {
+    I18nInitializer.initialize(translations, defaultLanguage);
     initialize();
-  }, [initialize]);
+  }, [translations, defaultLanguage, initialize]);
 
   return <>{children}</>;
 };

package/src/infrastructure/config/I18nInitializer.ts

@@ -8,70 +8,16 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import { DEFAULT_LANGUAGE } from './languages';
-import { TranslationLoader } from './TranslationLoader';
-
-const DEFAULT_NAMESPACE = 'common';
+import { ResourceBuilder } from './ResourceBuilder';
+import { NamespaceResolver } from './NamespaceResolver';
 
 export class I18nInitializer {
   private static reactI18nextInitialized = false;
-  private static appTranslations: Record<string, any> = {};
-
-  /**
-   * Register app translations (call before initialize)
-   */
-  static registerAppTranslations(translations: Record<string, any>): void {
-    this.appTranslations = translations;
-  }
-
-  /**
-   * Build resources with package + registered app translations
-   */
-  private static buildResources(): Record<string, Record<string, any>> {
-    const packageTranslations = TranslationLoader.loadPackageTranslations();
-
-    const resources: Record<string, Record<string, any>> = {
-      'en-US': {},
-    };
-
-    const enUSPackage = packageTranslations['en-US'] || {};
-
-    // Add package namespaces
-    for (const [namespace, translations] of Object.entries(enUSPackage)) {
-      resources['en-US'][namespace] = translations;
-    }
 
-    // Merge app translations (app overrides package)
-    for (const [namespace, translations] of Object.entries(this.appTranslations)) {
-      if (resources['en-US'][namespace]) {
-        resources['en-US'][namespace] = TranslationLoader.mergeTranslations(
-          resources['en-US'][namespace],
-          translations
-        );
-      } else {
-        resources['en-US'][namespace] = translations;
-      }
-    }
-
-    return resources;
-  }
-
-  private static getNamespaces(): string[] {
-    const packageTranslations = TranslationLoader.loadPackageTranslations();
-    const enUSPackage = packageTranslations['en-US'] || {};
-
-    const namespaces = new Set([
-      ...Object.keys(enUSPackage),
-      ...Object.keys(this.appTranslations),
-    ]);
-
-    if (!namespaces.has(DEFAULT_NAMESPACE)) {
-      namespaces.add(DEFAULT_NAMESPACE);
-    }
-
-    return Array.from(namespaces);
-  }
-
-  static initialize(): void {
+  static initialize(
+    appTranslations: Record<string, any>,
+    languageCode: string = DEFAULT_LANGUAGE
+  ): void {
     if (i18n.isInitialized) {
       return;
     }
@@ -82,16 +28,17 @@ export class I18nInitializer {
         this.reactI18nextInitialized = true;
       }
 
-      const resources = this.buildResources();
-      const namespaces = this.getNamespaces();
+      const resources = ResourceBuilder.buildResources(appTranslations, languageCode);
+      const namespaces = NamespaceResolver.getNamespaces(appTranslations, languageCode);
+      const defaultNamespace = NamespaceResolver.getDefaultNamespace();
 
       i18n.init({
         resources,
-        lng: DEFAULT_LANGUAGE,
-        fallbackLng: DEFAULT_LANGUAGE,
+        lng: languageCode,
+        fallbackLng: languageCode,
         ns: namespaces,
-        defaultNS: DEFAULT_NAMESPACE,
-        fallbackNS: DEFAULT_NAMESPACE,
+        defaultNS: defaultNamespace,
+        fallbackNS: defaultNamespace,
         interpolation: { escapeValue: false },
         react: { useSuspense: false },
         compatibilityJSON: 'v3',

package/src/infrastructure/config/NamespaceResolver.ts

@@ -0,0 +1,36 @@
+/**
+ * Namespace Resolver
+ * Resolves available namespaces from translations
+ */
+
+import { TranslationLoader } from './TranslationLoader';
+
+const DEFAULT_NAMESPACE = 'common';
+
+export class NamespaceResolver {
+  /**
+   * Get all available namespaces from package and app translations
+   */
+  static getNamespaces(
+    appTranslations: Record<string, any>,
+    languageCode: string
+  ): string[] {
+    const packageTranslations = TranslationLoader.loadPackageTranslations();
+    const packageLang = packageTranslations[languageCode] || {};
+
+    const namespaces = new Set([
+      ...Object.keys(packageLang),
+      ...Object.keys(appTranslations),
+    ]);
+
+    if (!namespaces.has(DEFAULT_NAMESPACE)) {
+      namespaces.add(DEFAULT_NAMESPACE);
+    }
+
+    return Array.from(namespaces);
+  }
+
+  static getDefaultNamespace(): string {
+    return DEFAULT_NAMESPACE;
+  }
+}

package/src/infrastructure/config/ResourceBuilder.ts

@@ -0,0 +1,43 @@
+/**
+ * Resource Builder
+ * Builds i18n resources from package and app translations
+ */
+
+import { TranslationLoader } from './TranslationLoader';
+
+export class ResourceBuilder {
+  /**
+   * Build resources with package + app translations
+   */
+  static buildResources(
+    appTranslations: Record<string, any>,
+    languageCode: string
+  ): Record<string, Record<string, any>> {
+    const packageTranslations = TranslationLoader.loadPackageTranslations();
+
+    const resources: Record<string, Record<string, any>> = {
+      [languageCode]: {},
+    };
+
+    const packageLang = packageTranslations[languageCode] || {};
+
+    // Add package namespaces
+    for (const [namespace, translations] of Object.entries(packageLang)) {
+      resources[languageCode][namespace] = translations;
+    }
+
+    // Merge app translations (app overrides package)
+    for (const [namespace, translations] of Object.entries(appTranslations)) {
+      if (resources[languageCode][namespace]) {
+        resources[languageCode][namespace] = TranslationLoader.mergeTranslations(
+          resources[languageCode][namespace],
+          translations
+        );
+      } else {
+        resources[languageCode][namespace] = translations;
+      }
+    }
+
+    return resources;
+  }
+}

package/src/presentation/screens/LanguageSelectionScreen.tsx

@@ -0,0 +1,204 @@
+/**
+ * Language Selection Screen
+ *
+ * Language picker with search functionality
+ *
+ * App Factory - Universal Language Selector
+ */
+
+import React, { useState, useMemo } from 'react';
+import {
+  View,
+  StyleSheet,
+  FlatList,
+  TouchableOpacity,
+  TextInput,
+} from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useAppDesignTokens, withAlpha, STATIC_TOKENS, type DesignTokens } from '@umituz/react-native-design-system-theme';
+import { AtomicIcon, AtomicText } from '@umituz/react-native-design-system-atoms';
+import { ScreenLayout } from '@umituz/react-native-design-system-organisms';
+import { useLocalization, searchLanguages, Language, LANGUAGES } from '@umituz/react-native-localization';
+
+/**
+ * Language Selection Screen Component
+ */
+export const LanguageSelectionScreen: React.FC = () => {
+  const navigation = useNavigation();
+  const { t, currentLanguage, setLanguage } = useLocalization();
+  const tokens = useAppDesignTokens();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCode, setSelectedCode] = useState(currentLanguage);
+  const [isFocused, setIsFocused] = useState(false);
+
+  const filteredLanguages = useMemo(() => {
+    return searchLanguages(searchQuery);
+  }, [searchQuery]);
+
+  const handleLanguageSelect = async (code: string) => {
+    setSelectedCode(code);
+    await setLanguage(code);
+    navigation.goBack();
+  };
+
+  const renderLanguageItem = ({ item }: { item: Language }) => {
+    const isSelected = selectedCode === item.code;
+
+    return (
+      <TouchableOpacity
+        style={StyleSheet.flatten([
+          styles.languageItem,
+          {
+            borderColor: isSelected
+              ? tokens.colors.primary
+              : tokens.colors.borderLight,
+            backgroundColor: isSelected
+              ? withAlpha(tokens.colors.primary, 0.1)
+              : tokens.colors.surface,
+          },
+        ])}
+        onPress={() => handleLanguageSelect(item.code)}
+        activeOpacity={0.7}
+      >
+        <View style={styles.languageContent}>
+          <AtomicText style={StyleSheet.flatten([STATIC_TOKENS.typography.headingLarge, styles.flag])}>
+            {item.flag}
+          </AtomicText>
+          <View style={styles.languageText}>
+            <AtomicText
+              style={StyleSheet.flatten([
+                STATIC_TOKENS.typography.bodyMedium,
+                styles.nativeName,
+              ])}
+            >
+              {item.nativeName}
+            </AtomicText>
+            <AtomicText style={StyleSheet.flatten([{ color: tokens.colors.textSecondary }])}>
+              {item.name}
+            </AtomicText>
+          </View>
+        </View>
+        {isSelected && (
+          <AtomicIcon
+            name="CircleCheck"
+            size="md"
+            color="primary"
+          />
+        )}
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <ScreenLayout scrollable={false} testID="language-selection-screen">
+      {/* Search Input */}
+      <View
+        style={StyleSheet.flatten([
+          styles.searchContainer,
+          {
+            borderColor: isFocused ? tokens.colors.primary : tokens.colors.borderLight,
+            borderWidth: isFocused ? 2 : 1.5,
+            backgroundColor: tokens.colors.surface,
+          },
+        ])}
+      >
+        <AtomicIcon
+          name="Search"
+          size="md"
+          color="secondary"
+          style={styles.searchIcon}
+        />
+        <TextInput
+          style={StyleSheet.flatten([styles.searchInput, { color: tokens.colors.textPrimary }])}
+          placeholder={t('settings.languageSelection.searchPlaceholder')}
+          placeholderTextColor={tokens.colors.textSecondary}
+          value={searchQuery}
+          onChangeText={setSearchQuery}
+          onFocus={() => setIsFocused(true)}
+          onBlur={() => setIsFocused(false)}
+          autoCapitalize="none"
+          autoCorrect={false}
+        />
+        {searchQuery.length > 0 && (
+          <TouchableOpacity
+            onPress={() => setSearchQuery('')}
+            style={styles.clearButton}
+            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+          >
+            <AtomicIcon
+              name="X"
+              size="sm"
+              color="secondary"
+            />
+          </TouchableOpacity>
+        )}
+      </View>
+
+      {/* Language List */}
+      <FlatList
+        data={filteredLanguages}
+        renderItem={renderLanguageItem}
+        keyExtractor={item => item.code}
+        contentContainerStyle={styles.listContent}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+      />
+    </ScreenLayout>
+  );
+};
+
+const styles = StyleSheet.create({
+  searchContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: 20,
+    marginBottom: 24,
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: STATIC_TOKENS.borders.radius.lg,
+  },
+  searchIcon: {
+    marginRight: 8,
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: STATIC_TOKENS.typography.bodyMedium.fontSize,
+    padding: 0,
+    fontWeight: '500',
+  },
+  clearButton: {
+    padding: STATIC_TOKENS.spacing.xs,
+  },
+  listContent: {
+    paddingHorizontal: 20,
+    paddingBottom: 32,
+  },
+  languageItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: STATIC_TOKENS.spacing.md,
+    borderRadius: STATIC_TOKENS.borders.radius.lg,
+    borderWidth: 2,
+    marginBottom: 8,
+  },
+  languageContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+    gap: 16,
+  },
+  flag: {
+    fontSize: STATIC_TOKENS.typography.headingLarge.fontSize,
+  },
+  languageText: {
+    flex: 1,
+    gap: 2,
+  },
+  nativeName: {
+    fontWeight: '600',
+  },
+});
+
+export default LanguageSelectionScreen;
+