@umituz/react-native-localization 2.7.0 → 3.0.0

package/package.json

@@ -1,23 +1,20 @@
 {
   "name": "@umituz/react-native-localization",
-  "version": "2.7.0",
+  "version": "3.0.0",
   "description": "English-only localization system for React Native apps with i18n support",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "scripts": {
     "typecheck": "tsc --noEmit --skipLibCheck",
     "lint": "tsc --noEmit",
-    "locales:generate": "node scripts/createLocaleLoaders.js",
-    "locales:generate:lang": "node scripts/createLocaleLoaders.js",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+
     "prepublishOnly": "node scripts/prepublish.js",
     "version:patch": "npm version patch -m 'chore: release v%s'",
     "version:minor": "npm version minor -m 'chore: release v%s'",
-    "version:major": "npm version major -m 'chore: release v%s'",
-    "i18n:setup": "node scripts/setup-languages.js",
-    "i18n:translate": "node scripts/translate-missing.js",
-    "i18n:check": "node scripts/check-translations.js",
-    "i18n:analyze": "node scripts/analyze-keys.js",
-    "i18n:remove-unused": "node scripts/remove-unused-keys.js"
+    "version:major": "npm version major -m 'chore: release v%s'"
   },
   "keywords": [
     "react-native",
@@ -54,16 +51,30 @@
     }
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.28.5",
+    "@babel/preset-react": "^7.28.5",
+    "@babel/preset-typescript": "^7.28.5",
+    "@testing-library/jest-native": "^5.4.3",
+    "@testing-library/react": "^16.3.0",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/react-native": "^13.3.3",
     "@types/react": "^18.2.45",
     "@types/react-native": "^0.73.0",
     "@umituz/react-native-filesystem": "^1.4.0",
     "@umituz/react-native-storage": "^1.1.1",
     "expo-localization": "~15.0.0",
     "i18next": "^23.0.0",
+    "jest": "^30.2.0",
+    "jest-environment-jsdom": "^30.2.0",
+    "jest-transform-stub": "^2.0.0",
     "react": ">=18.2.0",
     "react-i18next": "^14.0.0",
     "react-native": ">=0.74.0",
-    "typescript": "^5.3.3",
+    "react-native-gesture-handler": "^2.29.1",
+    "react-test-renderer": "^19.2.0",
+    "ts-jest": "^29.4.6",
+    "ts-node": "^10.9.2",
+    "typescript": "^5.9.3",
     "zustand": "^5.0.2"
   },
   "publishConfig": {

package/scripts/prepublish.js

@@ -2,34 +2,47 @@
 /* eslint-disable no-console */
 
 /**
- * Pre-Publish Script - Minimal Version
+ * Pre-Publish Script - Generic Package Version
  *
- * Basic checks before publishing
+ * Basic checks before publishing for generic localization package
  */
 
-const fs = require('fs');
-const path = require('path');
+import * as fs from 'fs';
+import * as path from 'path';
+import { fileURLToPath } from 'url';
 
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
 const PACKAGE_ROOT = path.resolve(__dirname, '..');
-const EN_US_DIR = path.join(PACKAGE_ROOT, 'src/infrastructure/locales/en-US');
+const SRC_DIR = path.join(PACKAGE_ROOT, 'src');
 
 console.log('🔍 Pre-publish checks...\n');
 
-// Check if en-US directory exists
-if (!fs.existsSync(EN_US_DIR)) {
-  console.error('❌ en-US directory not found!');
+// Check if src directory exists
+if (!fs.existsSync(SRC_DIR)) {
+  console.error('❌ src directory not found!');
   process.exit(1);
 }
 
-// Check if en-US has JSON files
-const jsonFiles = fs.readdirSync(EN_US_DIR)
-  .filter(file => file.endsWith('.json'));
+// Check if main files exist
+const mainFiles = [
+  'src/index.ts',
+  'src/infrastructure/config/i18n.ts',
+  'src/infrastructure/storage/LocalizationStore.ts',
+];
+
+let allFilesExist = true;
+for (const file of mainFiles) {
+  const filePath = path.join(PACKAGE_ROOT, file);
+  if (!fs.existsSync(filePath)) {
+    console.error(`❌ Required file not found: ${file}`);
+    allFilesExist = false;
+  }
+}
 
-if (jsonFiles.length === 0) {
-  console.error('❌ No JSON translation files found!');
+if (!allFilesExist) {
   process.exit(1);
 }
 
-console.log(`✅ Found ${jsonFiles.length} translation files`);
-console.log('✅ Pre-publish checks passed!\n');
-
+console.log('✅ All required files found');
+console.log('✅ Pre-publish checks passed!\n');

package/src/domain/repositories/ILocalizationRepository.ts

@@ -7,8 +7,8 @@ export interface Language {
   code: string;
   name: string;
   nativeName: string;
-  flag: string;
-  rtl?: boolean;
+  flag?: string;
+  isRTL?: boolean;
 }
 
 export interface ILocalizationRepository {

package/src/index.ts

@@ -4,7 +4,8 @@
  */
 
 // Hooks
-export { useLocalization, useLocalizationStore } from './infrastructure/storage/LocalizationStore';
+export { useLocalization } from './infrastructure/hooks/useLocalization';
+export { useLocalizationStore } from './infrastructure/storage/LocalizationStore';
 export { useTranslationFunction } from './infrastructure/hooks/useTranslation';
 
 // Components
@@ -26,5 +27,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/LanguageSwitcher.tsx

@@ -1,64 +1,110 @@
-import React from 'react';
-import { TouchableOpacity, Text, View, StyleSheet } from 'react-native';
-// @ts-ignore - Optional peer dependency
-import { useNavigation } from '@react-navigation/native';
-import { useLocalization } from '../storage/LocalizationStore';
-import { getLanguageByCode, getDefaultLanguage } from '../config/languages';
-import { Language } from '../../domain/repositories/ILocalizationRepository';
+import React, { useCallback, useMemo } from 'react';
+import { TouchableOpacity, Text, StyleSheet } from 'react-native';
+import { useLocalization } from '../hooks/useLocalization';
+import { languageRegistry } from '../config/languagesData';
+import type { Language } from '../storage/types/LocalizationState';
 
-interface LanguageSwitcherProps {
+export interface LanguageSwitcherProps {
   showName?: boolean;
   showFlag?: boolean;
   color?: string;
-  navigationScreen?: string;
+  onPress?: () => void;
   style?: any;
   textStyle?: any;
+  iconStyle?: any;
+  testID?: string;
+  disabled?: boolean;
+  accessibilityLabel?: string;
 }
 
-const languageSwitcherConfig = {
+const DEFAULT_CONFIG = {
   defaultIconSize: 20,
-  defaultNavigationScreen: 'LanguageSelection',
-  hitSlop: { top: 10, bottom: 10, left: 10, right: 10 },
+  hitSlop: { top: 10, bottom: 10, left: 10, right: 10 } as const,
+  defaultColor: '#000000',
+  activeOpacity: 0.7,
 };
 
 export const LanguageSwitcher: React.FC<LanguageSwitcherProps> = ({
   showName = false,
   showFlag = true,
   color,
-  navigationScreen = languageSwitcherConfig.defaultNavigationScreen,
+  onPress,
   style,
   textStyle,
+  iconStyle,
+  testID = 'language-switcher',
+  disabled = false,
+  accessibilityLabel,
 }) => {
-  const navigation = useNavigation();
   const { currentLanguage } = useLocalization();
-  const currentLang = getLanguageByCode(currentLanguage) || getDefaultLanguage();
 
-  const navigateToLanguageSelection = () => {
-    if (navigation && navigationScreen) {
-      navigation.navigate(navigationScreen as never);
+  const currentLang = useMemo((): Language => {
+    return languageRegistry.getLanguageByCode(currentLanguage) || languageRegistry.getDefaultLanguage();
+  }, [currentLanguage]);
+
+  const handlePress = useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    
+    if (__DEV__) {
+      console.log('[LanguageSwitcher] Pressed, current language:', currentLanguage);
     }
-  };
+    
+    onPress?.();
+  }, [disabled, onPress, currentLanguage]);
 
-  const iconColor = color || '#000000';
+  const iconColor = useMemo(() => color || DEFAULT_CONFIG.defaultColor, [color]);
 
-  return (
-    <TouchableOpacity
-      style={[styles.container, style]}
-      onPress={navigateToLanguageSelection}
-      activeOpacity={0.7}
-      hitSlop={languageSwitcherConfig.hitSlop}
-    >
-      {showFlag && (
-        <Text style={[styles.flag, textStyle]}>{currentLang.flag}</Text>
-      )}
-      {showName && (
+  const accessibilityProps = useMemo(() => ({
+    accessibilityRole: 'button' as const,
+    accessibilityLabel: accessibilityLabel || `Current language: ${currentLang.nativeName}`,
+    accessibilityHint: disabled ? undefined : 'Double tap to change language',
+    accessible: true,
+  }), [accessibilityLabel, currentLang.nativeName, disabled]);
+
+  const content = useMemo(() => {
+    if (showFlag && showName) {
+      return (
+        <>
+          <Text style={[styles.flag, iconStyle]}>{currentLang.flag}</Text>
+          <Text style={[styles.languageName, { color: iconColor }, textStyle]}>
+            {currentLang.nativeName}
+          </Text>
+        </>
+      );
+    }
+
+    if (showFlag) {
+      return (
+        <Text style={[styles.flag, iconStyle]}>{currentLang.flag}</Text>
+      );
+    }
+
+    if (showName) {
+      return (
         <Text style={[styles.languageName, { color: iconColor }, textStyle]}>
           {currentLang.nativeName}
         </Text>
-      )}
-      {!showName && !showFlag && (
-        <Text style={[styles.icon, { color: iconColor }]}>🌐</Text>
-      )}
+      );
+    }
+
+    return (
+      <Text style={[styles.icon, { color: iconColor }, iconStyle]}>🌐</Text>
+    );
+  }, [showFlag, showName, currentLang, iconColor, textStyle, iconStyle]);
+
+  return (
+    <TouchableOpacity
+      style={[styles.container, style, disabled && styles.disabled]}
+      onPress={handlePress}
+      activeOpacity={disabled ? 1 : DEFAULT_CONFIG.activeOpacity}
+      hitSlop={DEFAULT_CONFIG.hitSlop}
+      testID={testID}
+      disabled={disabled}
+      {...accessibilityProps}
+    >
+      {content}
     </TouchableOpacity>
   );
 };
@@ -69,16 +115,23 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     gap: 8,
     paddingHorizontal: 4,
+    paddingVertical: 4,
+  },
+  disabled: {
+    opacity: 0.5,
   },
   flag: {
-    fontSize: 20,
+    fontSize: DEFAULT_CONFIG.defaultIconSize,
+    textAlign: 'center',
   },
   languageName: {
     fontSize: 14,
     fontWeight: '600',
+    textAlign: 'center',
   },
   icon: {
-    fontSize: 20,
+    fontSize: DEFAULT_CONFIG.defaultIconSize,
+    textAlign: 'center',
   },
 });
 

package/src/infrastructure/components/LocalizationProvider.tsx

@@ -1,29 +1,137 @@
 /**
  * LocalizationProvider Component
  * Initializes localization system with app translations
+ * Includes memory leak prevention and performance optimizations
  */
 
-import React, { useEffect, ReactNode } from 'react';
+import React, { useEffect, useRef, ReactNode, useCallback } from 'react';
 import { useLocalizationStore } from '../storage/LocalizationStore';
 import { I18nInitializer } from '../config/I18nInitializer';
 
-interface LocalizationProviderProps {
+export interface LocalizationProviderProps {
   children: ReactNode;
   translations: Record<string, any>;
   defaultLanguage?: string;
+  onLanguageChange?: (languageCode: string) => void;
+  onError?: (error: Error) => void;
+  enableCache?: boolean;
 }
 
 export const LocalizationProvider: React.FC<LocalizationProviderProps> = ({
   children,
   translations,
   defaultLanguage = 'en-US',
+  onLanguageChange,
+  onError,
+  enableCache = true,
 }) => {
-  const initialize = useLocalizationStore((state) => state.initialize);
+  const store = useLocalizationStore();
+  const initialize = store.initialize;
+  const setLanguage = store.setLanguage;
+  const isInitialized = store.isInitialized;
+  const currentLanguage = store.currentLanguage;
+  
+  const isInitializingRef = useRef(false);
+  const previousLanguageRef = useRef(currentLanguage);
 
+  // Memoize translations to prevent unnecessary re-renders
+  const memoizedTranslations = useRef(translations);
+  
+  // Update memoized translations when they change
   useEffect(() => {
-    I18nInitializer.initialize(translations, defaultLanguage);
-    initialize();
-  }, [translations, defaultLanguage, initialize]);
+    memoizedTranslations.current = translations;
+  }, [translations]);
 
-  return <>{children}</>;
+  // Initialize localization system
+  useEffect(() => {
+    if (isInitializingRef.current || isInitialized) {
+      return;
+    }
+
+    isInitializingRef.current = true;
+
+    const initializeLocalization = async () => {
+      try {
+        if (__DEV__) {
+          console.log('[LocalizationProvider] Initializing with language:', defaultLanguage);
+        }
+
+        await I18nInitializer.initialize(memoizedTranslations.current, defaultLanguage);
+        await initialize();
+
+        if (__DEV__) {
+          console.log('[LocalizationProvider] Initialization complete');
+        }
+      } catch (error) {
+        if (__DEV__) {
+          console.error('[LocalizationProvider] Initialization failed:', error);
+        }
+        onError?.(error instanceof Error ? error : new Error('Initialization failed'));
+      } finally {
+        isInitializingRef.current = false;
+      }
+    };
+
+    initializeLocalization();
+
+    // Cleanup function
+    return () => {
+      if (__DEV__) {
+        console.log('[LocalizationProvider] Cleanup');
+      }
+    };
+  }, [defaultLanguage, initialize, onError, isInitialized]);
+
+  // Handle language changes
+  useEffect(() => {
+    if (previousLanguageRef.current !== currentLanguage && currentLanguage !== previousLanguageRef.current) {
+      previousLanguageRef.current = currentLanguage;
+      onLanguageChange?.(currentLanguage);
+      
+      if (__DEV__) {
+        console.log('[LocalizationProvider] Language changed to:', currentLanguage);
+      }
+    }
+  }, [currentLanguage, onLanguageChange]);
+
+  // Handle language change with error handling
+  const handleLanguageChange = useCallback(async (languageCode: string) => {
+    try {
+      await setLanguage(languageCode);
+    } catch (error) {
+      if (__DEV__) {
+        console.error('[LocalizationProvider] Language change failed:', error);
+      }
+      onError?.(error instanceof Error ? error : new Error('Language change failed'));
+      throw error;
+    }
+  }, [setLanguage, onError]);
+
+  // Context value with memoized functions
+  const contextValue = React.useMemo(() => ({
+    handleLanguageChange,
+    isInitialized,
+    currentLanguage,
+  }), [handleLanguageChange, isInitialized, currentLanguage]);
+
+  return (
+    <LocalizationContext.Provider value={contextValue}>
+      {children}
+    </LocalizationContext.Provider>
+  );
 };
+
+// Context for language change handling
+const LocalizationContext = React.createContext<{
+  handleLanguageChange: (languageCode: string) => Promise<void>;
+  isInitialized: boolean;
+  currentLanguage: string;
+} | null>(null);
+
+export const useLocalizationContext = () => {
+  const context = React.useContext(LocalizationContext);
+  if (!context) {
+    throw new Error('useLocalizationContext must be used within LocalizationProvider');
+  }
+  return context;
+};

package/src/infrastructure/components/__tests__/LanguageSwitcher.test.tsx

@@ -0,0 +1,91 @@
+/**
+ * Simple tests for LanguageSwitcher component
+ */
+
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import { LanguageSwitcher } from '../LanguageSwitcher';
+
+// Mock React Native
+jest.mock('react-native', () => ({
+  View: 'View',
+  Text: 'Text',
+  TouchableOpacity: 'TouchableOpacity',
+  StyleSheet: {
+    create: jest.fn(() => ({})),
+    flatten: jest.fn((styles) => styles),
+  },
+}));
+
+// Mock hooks
+jest.mock('../../hooks/useLocalization', () => ({
+  useLocalization: () => ({
+    currentLanguage: 'en-US',
+  }),
+}));
+
+jest.mock('../../config/languagesData', () => ({
+  languageRegistry: {
+    getLanguageByCode: jest.fn(() => ({
+      code: 'en-US',
+      name: 'English',
+      nativeName: 'English',
+      flag: '🇺🇸',
+    })),
+    getDefaultLanguage: () => ({
+      code: 'en-US',
+      name: 'English',
+      nativeName: 'English',
+      flag: '🇺🇸',
+    }),
+  },
+}));
+
+describe('LanguageSwitcher', () => {
+  it('should render correctly', () => {
+    const { getByTestId } = render(
+      <LanguageSwitcher testID="language-switcher" />
+    );
+
+    expect(getByTestId('language-switcher')).toBeTruthy();
+  });
+
+  it('should render with flag', () => {
+    const { getByText } = render(
+      <LanguageSwitcher testID="language-switcher" showFlag />
+    );
+
+    expect(getByText('🇺🇸')).toBeTruthy();
+  });
+
+  it('should render with name', () => {
+    const { getByText } = render(
+      <LanguageSwitcher testID="language-switcher" showName />
+    );
+
+    expect(getByText('English')).toBeTruthy();
+  });
+
+  it('should handle onPress', () => {
+    const mockOnPress = jest.fn();
+    const { getByTestId } = render(
+      <LanguageSwitcher testID="language-switcher" onPress={mockOnPress} />
+    );
+
+    // Simulate press
+    const component = getByTestId('language-switcher');
+    component.props.onPress();
+    
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('should be accessible', () => {
+    const { getByTestId } = render(
+      <LanguageSwitcher testID="language-switcher" />
+    );
+
+    const component = getByTestId('language-switcher');
+    expect(component.props.accessible).toBe(true);
+    expect(component.props.accessibilityRole).toBe('button');
+  });
+});

package/src/infrastructure/components/useLanguageNavigation.ts

@@ -1,13 +1,13 @@
 // @ts-ignore - Optional peer dependency
 import { useNavigation } from '@react-navigation/native';
-import { useLocalization } from '../storage/LocalizationStore';
-import { getLanguageByCode, getDefaultLanguage } from '../config/languages';
-import { Language } from '../../domain/repositories/ILocalizationRepository';
+import { useLocalization } from '../hooks/useLocalization';
+import { languageRegistry } from '../config/languagesData';
+import type { Language } from '../storage/types/LocalizationState';
 
 export const useLanguageNavigation = (navigationScreen: string) => {
   const navigation = useNavigation();
   const { currentLanguage } = useLocalization();
-  const currentLang = getLanguageByCode(currentLanguage) || getDefaultLanguage();
+  const currentLang = languageRegistry.getLanguageByCode(currentLanguage) || languageRegistry.getDefaultLanguage();
 
   const navigateToLanguageSelection = () => {
     if (navigation && navigationScreen) {

package/src/infrastructure/config/TranslationCache.ts

@@ -0,0 +1,27 @@
+/**
+ * Translation Cache
+ * 
+ * Performance optimization for translation caching
+ */
+
+export class TranslationCache {
+  private cache = new Map<string, string>();
+  private maxSize = 1000;
+
+  get(key: string): string | undefined {
+    return this.cache.get(key);
+  }
+
+  set(key: string, value: string): void {
+    if (this.cache.size >= this.maxSize) {
+      // Remove oldest entry
+      const firstKey = this.cache.keys().next().value;
+      this.cache.delete(firstKey);
+    }
+    this.cache.set(key, value);
+  }
+
+  clear(): void {
+    this.cache.clear();
+  }
+}

package/src/infrastructure/config/TranslationLoader.ts

@@ -6,16 +6,12 @@
 
 export class TranslationLoader {
   /**
-   * Load package translations (en-US)
+   * Load package translations (empty by default - apps provide their own)
    */
   static loadPackageTranslations(): Record<string, any> {
-    try {
-      // eslint-disable-next-line @typescript-eslint/no-require-imports
-      const translations = require('../locales/en-US');
-      return { 'en-US': translations.default || translations };
-    } catch {
-      return { 'en-US': {} };
-    }
+    // Package doesn't include any translations by default
+    // Consuming applications should provide their own translations
+    return { 'en-US': {} };
   }
 
   /**

package/src/infrastructure/config/__tests__/TranslationCache.test.ts

@@ -0,0 +1,44 @@
+/**
+ * Translation Cache Tests
+ */
+
+import { TranslationCache } from '../TranslationCache';
+
+describe('TranslationCache', () => {
+  let cache: TranslationCache;
+
+  beforeEach(() => {
+    cache = new TranslationCache();
+  });
+
+  it('should store and retrieve values', () => {
+    cache.set('key1', 'value1');
+    expect(cache.get('key1')).toBe('value1');
+  });
+
+  it('should return undefined for non-existent keys', () => {
+    expect(cache.get('nonexistent')).toBeUndefined();
+  });
+
+  it('should clear all values', () => {
+    cache.set('key1', 'value1');
+    cache.set('key2', 'value2');
+    cache.clear();
+    expect(cache.get('key1')).toBeUndefined();
+    expect(cache.get('key2')).toBeUndefined();
+  });
+
+  it('should limit cache size to maxSize', () => {
+    // Create a small cache for testing
+    const smallCache = new TranslationCache();
+    (smallCache as any).maxSize = 2;
+
+    smallCache.set('key1', 'value1');
+    smallCache.set('key2', 'value2');
+    smallCache.set('key3', 'value3'); // Should remove key1
+
+    expect(smallCache.get('key1')).toBeUndefined();
+    expect(smallCache.get('key2')).toBe('value2');
+    expect(smallCache.get('key3')).toBe('value3');
+  });
+});