@umituz/react-native-localization 3.1.2 → 3.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-localization",
-  "version": "3.1.2",
+  "version": "3.2.1",
   "description": "Generic localization system for React Native apps with i18n support",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -38,7 +38,9 @@
     "zustand": "^5.0.2"
   },
   "peerDependencies": {
+    "@expo/vector-icons": ">=14.0.0",
     "@react-navigation/native": ">=6.0.0",
+    "@umituz/react-native-design-system-theme": "*",
     "@umituz/react-native-filesystem": "latest",
     "@umituz/react-native-storage": "latest",
     "react": ">=18.2.0",
@@ -53,6 +55,7 @@
     "@babel/preset-env": "^7.28.5",
     "@babel/preset-react": "^7.28.5",
     "@babel/preset-typescript": "^7.28.5",
+    "@expo/vector-icons": "^15.0.3",
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react": "^16.3.0",
@@ -60,6 +63,7 @@
     "@testing-library/react-native": "^13.3.3",
     "@types/react": "^18.2.45",
     "@types/react-native": "^0.73.0",
+    "@umituz/react-native-design-system-theme": "^1.8.0",
     "@umituz/react-native-filesystem": "^1.4.0",
     "@umituz/react-native-storage": "^1.1.1",
     "expo-localization": "~15.0.0",
@@ -86,4 +90,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/index.ts

@@ -29,6 +29,8 @@ export {
 
 // Presentation
 export { LanguageSelectionScreen } from './presentation/screens/LanguageSelectionScreen';
+export { LanguageSection } from './presentation/components/LanguageSection';
+export type { LanguageSectionProps, LanguageSectionConfig } from './presentation/components/LanguageSection';
 
 // Types
 export type { Language, ILocalizationRepository } from './domain/repositories/ILocalizationRepository';

package/src/infrastructure/config/NamespaceResolver.ts

@@ -18,9 +18,27 @@ export class NamespaceResolver {
     const packageTranslations = TranslationLoader.loadPackageTranslations();
     const packageLang = packageTranslations[languageCode] || {};
 
+    let appNamespaces: string[] = [];
+
+    // Check if appTranslations has language keys (format: xx-XX)
+    const hasLanguageKeys = Object.keys(appTranslations).some(key =>
+      /^[a-z]{2}-[A-Z]{2}$/.test(key)
+    );
+
+    if (hasLanguageKeys) {
+      // If structured by language, get namespaces from the requested language
+      const langTranslations = appTranslations[languageCode];
+      if (langTranslations && typeof langTranslations === 'object') {
+        appNamespaces = Object.keys(langTranslations);
+      }
+    } else {
+      // If structured by namespace (legacy/simple), keys are namespaces
+      appNamespaces = Object.keys(appTranslations);
+    }
+
     const namespaces = new Set([
       ...Object.keys(packageLang),
-      ...Object.keys(appTranslations),
+      ...appNamespaces,
     ]);
 
     if (!namespaces.has(DEFAULT_NAMESPACE)) {

package/src/infrastructure/config/ResourceBuilder.ts

@@ -15,26 +15,43 @@ export class ResourceBuilder {
   ): Record<string, Record<string, any>> {
     const packageTranslations = TranslationLoader.loadPackageTranslations();
 
-    const resources: Record<string, Record<string, any>> = {
-      [languageCode]: {},
-    };
+    // Initialize with package translations
+    const resources: Record<string, Record<string, any>> = { ...packageTranslations };
 
-    const packageLang = packageTranslations[languageCode] || {};
-
-    // Add package namespaces
-    for (const [namespace, translations] of Object.entries(packageLang)) {
-      resources[languageCode][namespace] = translations;
+    // Ensure initial language exists
+    if (!resources[languageCode]) {
+      resources[languageCode] = {};
     }
 
-    // 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
-        );
+    // Process app translations
+    for (const [key, value] of Object.entries(appTranslations)) {
+      // Check if the key is a language code (format: xx-XX)
+      const isLanguageKey = /^[a-z]{2}-[A-Z]{2}$/.test(key);
+
+      if (isLanguageKey) {
+        // It's a language key (e.g., "en-US")
+        const lang = key;
+        if (!resources[lang]) {
+          resources[lang] = {};
+        }
+
+        // Merge namespaces for this language
+        if (value && typeof value === 'object') {
+          for (const [namespace, translations] of Object.entries(value)) {
+            resources[lang][namespace] = TranslationLoader.mergeTranslations(
+              resources[lang][namespace] || {},
+              translations
+            );
+          }
+        }
       } else {
-        resources[languageCode][namespace] = translations;
+        // It's a namespace for the default/current language (backward compatibility)
+        if (value && typeof value === 'object') {
+          resources[languageCode][key] = TranslationLoader.mergeTranslations(
+            resources[languageCode][key] || {},
+            value
+          );
+        }
       }
     }
 

package/src/presentation/components/LanguageSection.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { View, Text, Pressable, StyleSheet, ViewStyle } from 'react-native';
+import { Feather } from '@expo/vector-icons';
+import { useNavigation } from '@react-navigation/native';
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import { useLocalization } from '../../infrastructure/hooks/useLocalization';
+import { getLanguageByCode } from '../../infrastructure/config/languages';
+
+export interface LanguageSectionConfig {
+    route?: string;
+    title?: string;
+    description?: string;
+    defaultLanguageDisplay?: string;
+    // actions?
+}
+
+export interface LanguageSectionProps {
+    config?: LanguageSectionConfig;
+    containerStyle?: ViewStyle;
+}
+
+export const LanguageSection: React.FC<LanguageSectionProps> = ({
+    config,
+    containerStyle,
+}) => {
+    const navigation = useNavigation();
+    const tokens = useAppDesignTokens();
+    const colors = tokens.colors;
+    const { t, currentLanguage } = useLocalization();
+
+    const route = config?.route || 'LanguageSelection';
+    const title = config?.title || t('settings.language') || 'Language';
+    const description = config?.description || '';
+
+    const currentLang = getLanguageByCode(currentLanguage);
+    const defaultLanguageDisplay = config?.defaultLanguageDisplay || 'English';
+    const languageDisplay = currentLang
+        ? `${currentLang.flag} ${currentLang.nativeName}`
+        : defaultLanguageDisplay;
+
+    const handlePress = () => {
+        navigation.navigate(route as never);
+    };
+
+    return (
+        <View style={[styles.sectionContainer, { backgroundColor: colors.surface }, containerStyle]}>
+            <Text style={[styles.sectionTitle, { color: colors.textPrimary }]}>{t("settings.sections.app.title") || "App"}</Text>
+
+            <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` },
+                        ]}
+                    >
+                        <Feather name="globe" size={24} color={colors.primary} />
+                    </View>
+                    <View style={styles.textContainer}>
+                        <Text style={[styles.title, { color: colors.textPrimary }]}>{title}</Text>
+                        <Text style={[styles.description, { color: colors.textSecondary }]}>
+                            {languageDisplay}
+                        </Text>
+                    </View>
+                    <Feather name="chevron-right" size={20} color={colors.textSecondary} />
+                </View>
+            </Pressable>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    sectionContainer: {
+        marginBottom: 16,
+        borderRadius: 12,
+        overflow: 'hidden',
+    },
+    sectionTitle: {
+        fontSize: 18,
+        fontWeight: '600',
+        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,
+    },
+    title: {
+        fontSize: 16,
+        fontWeight: '500',
+        marginBottom: 4,
+    },
+    description: {
+        fontSize: 14,
+    },
+});