@umituz/react-native-localization 2.8.0 → 3.0.1

package/src/infrastructure/storage/LocalizationStore.ts

@@ -1,105 +1,114 @@
 /**
- * Localization Store
- * Zustand state management for language preferences
- *
- * Uses separate classes for initialization, switching, and translation
- * Follows Single Responsibility Principle
+ * Localization Store Factory
+ * Creates and manages localization state with proper separation of concerns
  */
 
 import { create } from 'zustand';
-import { SUPPORTED_LANGUAGES, DEFAULT_LANGUAGE, getLanguageByCode } from '../config/languages';
+import type { LocalizationState, LocalizationActions, LocalizationGetters, Language } from './types/LocalizationState';
 import { LanguageInitializer } from './LanguageInitializer';
 import { LanguageSwitcher } from './LanguageSwitcher';
-import type { Language } from '../../domain/repositories/ILocalizationRepository';
-
-interface LocalizationState {
-  currentLanguage: string;
-  isRTL: boolean;
-  isInitialized: boolean;
-  supportedLanguages: Language[];
-  setLanguage: (languageCode: string) => Promise<void>;
-  initialize: () => Promise<void>;
-}
+import { languageRegistry } from '../config/languagesData';
 
-export const useLocalizationStore = create<LocalizationState>((set, get) => ({
-  currentLanguage: DEFAULT_LANGUAGE,
-  isRTL: false,
-  isInitialized: false,
-  supportedLanguages: SUPPORTED_LANGUAGES,
-
-  /**
-   * Initialize localization system
-   */
-  initialize: async () => {
-    // Prevent re-initialization
-    const { isInitialized: alreadyInitialized } = get();
-    if (alreadyInitialized) {
-      return;
-    }
-
-    try {
-      const result = await LanguageInitializer.initialize();
-
-      set({
-        currentLanguage: result.languageCode,
-        isRTL: result.isRTL,
-        isInitialized: true,
-      });
-    } catch (error) {
-      // Set fallback state even on error
-      set({
-        currentLanguage: DEFAULT_LANGUAGE,
-        isRTL: false,
-        isInitialized: true,
-      });
-    }
-  },
-
-  /**
-   * Change language
-   */
-  setLanguage: async (languageCode: string) => {
-    try {
-      const result = await LanguageSwitcher.switchLanguage(languageCode);
-
-      set({
-        currentLanguage: result.languageCode,
-        isRTL: result.isRTL,
-      });
-    } catch (error) {
-      throw error;
-    }
-  },
-}));
+interface LocalizationStore extends LocalizationState, LocalizationActions, LocalizationGetters {
+  // Additional properties can be added here if needed
+}
 
 /**
- * Hook to use localization
- * Provides current language, RTL state, language switching, and translation function
+ * Create localization store with proper dependency injection
  */
-export const useLocalization = () => {
-  const {
-    currentLanguage,
-    isRTL,
-    isInitialized,
-    supportedLanguages,
-    setLanguage,
-    initialize,
-  } = useLocalizationStore();
-
-  const currentLanguageObject = getLanguageByCode(currentLanguage);
-
-  // Import translation function here to avoid circular dependencies
-  const { useTranslationFunction } = require('../hooks/useTranslation');
-  const t = useTranslationFunction();
-
-  return {
-    t,
-    currentLanguage,
-    currentLanguageObject,
-    isRTL,
-    isInitialized,
-    supportedLanguages,
-    setLanguage,
-    initialize,
-  };
+export const createLocalizationStore = () => {
+  return create<LocalizationStore>()(
+    (set, get) => ({
+      // State
+      currentLanguage: 'en-US',
+      isRTL: false,
+      isInitialized: false,
+      supportedLanguages: languageRegistry.getLanguages(),
+
+      // Actions
+      initialize: async () => {
+        const { isInitialized: alreadyInitialized } = get();
+        if (alreadyInitialized) {
+          if (__DEV__) {
+            console.log('[Localization] Already initialized');
+          }
+          return;
+        }
+
+        try {
+          const result = await LanguageInitializer.initialize();
+
+          set({
+            currentLanguage: result.languageCode,
+            isRTL: result.isRTL,
+            isInitialized: true,
+          });
+
+          if (__DEV__) {
+            console.log(`[Localization] Initialized with language: ${result.languageCode}`);
+          }
+        } catch (error) {
+          // Set fallback state even on error
+          set({
+            currentLanguage: 'en-US',
+            isRTL: false,
+            isInitialized: true,
+          });
+
+          if (__DEV__) {
+            console.error('[Localization] Initialization failed, using fallback:', error);
+          }
+        }
+      },
+
+      setLanguage: async (languageCode: string) => {
+        try {
+          const result = await LanguageSwitcher.switchLanguage(languageCode);
+
+          set({
+            currentLanguage: result.languageCode,
+            isRTL: result.isRTL,
+          });
+
+          if (__DEV__) {
+            console.log(`[Localization] Language changed to: ${result.languageCode}`);
+          }
+        } catch (error) {
+          if (__DEV__) {
+            console.error('[Localization] Language change failed:', error);
+          }
+          throw error;
+        }
+      },
+
+      reset: () => {
+        set({
+          currentLanguage: 'en-US',
+          isRTL: false,
+          isInitialized: false,
+        });
+
+        if (__DEV__) {
+          console.log('[Localization] Store reset');
+        }
+      },
+
+      // Getters
+      getCurrentLanguage: () => {
+        const { currentLanguage } = get();
+        return languageRegistry.getLanguageByCode(currentLanguage);
+      },
+
+      isLanguageSupported: (code: string) => {
+        return languageRegistry.isLanguageSupported(code);
+      },
+
+      getSupportedLanguages: () => {
+        return languageRegistry.getLanguages();
+      },
+    })
+  );
 };
+
+// Create singleton instance
+export const useLocalizationStore = createLocalizationStore();

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

@@ -0,0 +1,31 @@
+/**
+ * Localization State Interface
+ * Defines the shape of localization state management
+ */
+
+export interface Language {
+  code: string;
+  name: string;
+  nativeName: string;
+  flag?: string;
+  isRTL?: boolean;
+}
+
+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/presentation/components/LanguageItem.tsx

@@ -0,0 +1,109 @@
+/**
+ * Language Item Component
+ * 
+ * Renders a single language item in the language selection list
+ */
+
+import React from 'react';
+import {
+  View,
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+} from 'react-native';
+import type { Language } from '../../infrastructure/storage/types/LocalizationState';
+
+interface LanguageItemProps {
+  item: Language;
+  isSelected: boolean;
+  onSelect: (code: string) => void;
+  customStyles?: {
+    languageItem?: any;
+    languageContent?: any;
+    languageText?: any;
+    flag?: any;
+    nativeName?: any;
+  };
+}
+
+export const LanguageItem: React.FC<LanguageItemProps> = ({
+  item,
+  isSelected,
+  onSelect,
+  customStyles,
+}) => {
+  return (
+    <TouchableOpacity
+      testID="language-item-test"
+      style={[
+        styles.languageItem,
+        customStyles?.languageItem,
+        isSelected && styles.selectedLanguageItem,
+      ]}
+      onPress={() => onSelect(item.code)}
+      activeOpacity={0.7}
+    >
+      <View style={[styles.languageContent, customStyles?.languageContent]}>
+        <Text style={[styles.flag, customStyles?.flag]}>
+          {item.flag || '🌐'}
+        </Text>
+        <View style={[styles.languageText, customStyles?.languageText]}>
+          <Text style={[styles.nativeName, customStyles?.nativeName]}>
+            {item.nativeName}
+          </Text>
+          <Text style={[styles.languageName, customStyles?.nativeName]}>
+            {item.name}
+          </Text>
+        </View>
+      </View>
+      {isSelected && (
+        <Text style={[styles.checkIcon, customStyles?.flag]}>✓</Text>
+      )}
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  languageItem: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    padding: 16,
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+    marginBottom: 8,
+    backgroundColor: '#fff',
+  },
+  selectedLanguageItem: {
+    borderColor: '#007AFF',
+    backgroundColor: '#f0f8ff',
+  },
+  languageContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    flex: 1,
+  },
+  flag: {
+    fontSize: 24,
+    marginRight: 16,
+  },
+  languageText: {
+    flex: 1,
+  },
+  nativeName: {
+    fontSize: 16,
+    fontWeight: '600',
+    color: '#333',
+    marginBottom: 2,
+  },
+  languageName: {
+    fontSize: 14,
+    color: '#666',
+  },
+  checkIcon: {
+    fontSize: 18,
+    color: '#007AFF',
+    fontWeight: 'bold',
+  },
+});

package/src/presentation/components/SearchInput.tsx

@@ -0,0 +1,90 @@
+/**
+ * Search Input Component
+ * 
+ * Renders search input for language filtering
+ */
+
+import React from 'react';
+import {
+  View,
+  TextInput,
+  TouchableOpacity,
+  Text,
+  StyleSheet,
+} from 'react-native';
+
+interface SearchInputProps {
+  value: string;
+  onChange: (value: string) => void;
+  placeholder: string;
+  customStyles?: {
+    searchContainer?: any;
+    searchInput?: any;
+    searchIcon?: any;
+    clearButton?: any;
+  };
+}
+
+export const SearchInput: React.FC<SearchInputProps> = ({
+  value,
+  onChange,
+  placeholder,
+  customStyles,
+}) => {
+  return (
+    <View style={[styles.searchContainer, customStyles?.searchContainer]}>
+      <Text style={[styles.searchIcon, customStyles?.searchIcon]}>🔍</Text>
+      <TextInput
+        style={[styles.searchInput, customStyles?.searchInput]}
+        placeholder={placeholder}
+        placeholderTextColor="#666"
+        value={value}
+        onChangeText={onChange}
+        autoCapitalize="none"
+        autoCorrect={false}
+      />
+      {value.length > 0 && (
+        <TouchableOpacity
+          onPress={() => onChange('')}
+          style={[styles.clearButton, customStyles?.clearButton]}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        >
+          <Text style={[styles.clearIcon, customStyles?.searchIcon]}>✕</Text>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  searchContainer: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    marginHorizontal: 20,
+    marginBottom: 24,
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    backgroundColor: '#f5f5f5',
+    borderRadius: 12,
+    borderWidth: 1,
+    borderColor: '#e0e0e0',
+  },
+  searchIcon: {
+    marginRight: 12,
+    fontSize: 16,
+  },
+  searchInput: {
+    flex: 1,
+    fontSize: 16,
+    padding: 0,
+    fontWeight: '500',
+    color: '#333',
+  },
+  clearButton: {
+    padding: 4,
+  },
+  clearIcon: {
+    fontSize: 14,
+    color: '#666',
+  },
+});

package/src/presentation/components/__tests__/LanguageItem.test.tsx

@@ -0,0 +1,106 @@
+/**
+ * Language Item Component Tests
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { LanguageItem } from '../LanguageItem';
+import type { Language } from '../../infrastructure/storage/types/LocalizationState';
+
+const mockLanguage: Language = {
+  code: 'en-US',
+  name: 'English',
+  nativeName: 'English',
+  flag: '🇺🇸',
+  isRTL: false,
+};
+
+describe('LanguageItem', () => {
+  const mockOnSelect = jest.fn();
+
+  beforeEach(() => {
+    mockOnSelect.mockClear();
+  });
+
+  it('should render language information correctly', () => {
+    const { getAllByText } = render(
+      <LanguageItem
+        item={mockLanguage}
+        isSelected={false}
+        onSelect={mockOnSelect}
+      />
+    );
+
+    expect(getAllByText('English')).toHaveLength(2); // nativeName and name
+    expect(getAllByText('🇺🇸')).toHaveLength(1);
+  });
+
+  it('should show check icon when selected', () => {
+    const { getByText } = render(
+      <LanguageItem
+        item={mockLanguage}
+        isSelected={true}
+        onSelect={mockOnSelect}
+      />
+    );
+
+    expect(getByText('✓')).toBeTruthy();
+  });
+
+  it('should not show check icon when not selected', () => {
+    const { queryByText } = render(
+      <LanguageItem
+        item={mockLanguage}
+        isSelected={false}
+        onSelect={mockOnSelect}
+      />
+    );
+
+    expect(queryByText('✓')).toBeFalsy();
+  });
+
+  it('should call onSelect when pressed', () => {
+    const { getByTestId } = render(
+      <LanguageItem
+        item={mockLanguage}
+        isSelected={false}
+        onSelect={mockOnSelect}
+        testID="language-item-test"
+      />
+    );
+
+    fireEvent.press(getByTestId('language-item-test'));
+    expect(mockOnSelect).toHaveBeenCalledWith('en-US');
+  });
+
+  it('should use default flag when none provided', () => {
+    const languageWithoutFlag = { ...mockLanguage, flag: undefined };
+    const { getByText } = render(
+      <LanguageItem
+        item={languageWithoutFlag}
+        isSelected={false}
+        onSelect={mockOnSelect}
+      />
+    );
+
+    expect(getByText('🌐')).toBeTruthy();
+  });
+
+  it('should apply custom styles', () => {
+    const customStyles = {
+      languageItem: { backgroundColor: 'red' },
+      flag: { fontSize: 30 },
+    };
+
+    const { getByTestId } = render(
+      <LanguageItem
+        item={mockLanguage}
+        isSelected={false}
+        onSelect={mockOnSelect}
+        customStyles={customStyles}
+      />
+    );
+
+    expect(getByTestId('language-item-test')).toBeTruthy();
+  });
+});

package/src/presentation/components/__tests__/SearchInput.test.tsx

@@ -0,0 +1,95 @@
+/**
+ * Search Input Component Tests
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { SearchInput } from '../SearchInput';
+
+describe('SearchInput', () => {
+  const mockOnChange = jest.fn();
+
+  beforeEach(() => {
+    mockOnChange.mockClear();
+  });
+
+  it('should render with placeholder', () => {
+    const { getByPlaceholderText } = render(
+      <SearchInput
+        value=""
+        onChange={mockOnChange}
+        placeholder="Search languages..."
+      />
+    );
+
+    expect(getByPlaceholderText('Search languages...')).toBeTruthy();
+  });
+
+  it('should call onChange when text changes', () => {
+    const { getByPlaceholderText } = render(
+      <SearchInput
+        value=""
+        onChange={mockOnChange}
+        placeholder="Search languages..."
+      />
+    );
+
+    fireEvent.changeText(getByPlaceholderText('Search languages...'), 'test');
+    expect(mockOnChange).toHaveBeenCalledWith('test');
+  });
+
+  it('should show clear button when text is present', () => {
+    const { getByText } = render(
+      <SearchInput
+        value="test"
+        onChange={mockOnChange}
+        placeholder="Search languages..."
+      />
+    );
+
+    expect(getByText('✕')).toBeTruthy();
+  });
+
+  it('should not show clear button when text is empty', () => {
+    const { queryByText } = render(
+      <SearchInput
+        value=""
+        onChange={mockOnChange}
+        placeholder="Search languages..."
+      />
+    );
+
+    expect(queryByText('✕')).toBeFalsy();
+  });
+
+  it('should clear text when clear button is pressed', () => {
+    const { getByText } = render(
+      <SearchInput
+        value="test"
+        onChange={mockOnChange}
+        placeholder="Search languages..."
+      />
+    );
+
+    fireEvent.press(getByText('✕'));
+    expect(mockOnChange).toHaveBeenCalledWith('');
+  });
+
+  it('should apply custom styles', () => {
+    const customStyles = {
+      searchContainer: { backgroundColor: 'red' },
+      searchInput: { fontSize: 20 },
+    };
+
+    const { getByPlaceholderText } = render(
+      <SearchInput
+        value=""
+        onChange={mockOnChange}
+        placeholder="Search languages..."
+        customStyles={customStyles}
+      />
+    );
+
+    expect(getByPlaceholderText('Search languages...')).toBeTruthy();
+  });
+});