@umituz/react-native-settings 4.23.35 → 4.23.36

package/src/domains/localization/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/domains/localization/presentation/screens/LanguageSelectionScreen.styles.ts

@@ -0,0 +1,16 @@
+/**
+ * Language Selection Screen Styles
+ */
+
+import { StyleSheet } from 'react-native';
+
+export const styles = StyleSheet.create({
+  container: {
+    // Styling handled by ScreenLayout
+  },
+  listContent: {
+    // Horizontal padding handled by ScreenLayout contentWrapper
+    // Bottom padding handled in component using tokens
+  },
+});
+

package/src/domains/localization/presentation/screens/LanguageSelectionScreen.tsx

@@ -0,0 +1,132 @@
+/**
+ * Language Selection Screen
+ * Generic language selector with search functionality
+ */
+
+import React from 'react';
+import { FlatList } from 'react-native';
+// @ts-ignore - Optional peer dependency
+import {
+  useAppDesignTokens,
+  SearchBar,
+  ScreenLayout,
+  NavigationHeader,
+  useAppNavigation,
+} from '@umituz/react-native-design-system';
+import { useLanguageSelection } from '../../infrastructure/hooks/useLanguageSelection';
+import { LanguageItem } from '../components/LanguageItem';
+import type { Language } from '../../infrastructure/storage/types/Language';
+import type { LanguageSelectionScreenProps } from './LanguageSelectionScreen.types';
+import { styles } from './LanguageSelectionScreen.styles';
+
+export const LanguageSelectionScreen: React.FC<LanguageSelectionScreenProps> = ({
+  renderLanguageItem,
+  renderSearchInput,
+  headerTitle,
+  onBackPress,
+  styles: customStyles,
+  searchPlaceholder = "settings.languageSelection.searchPlaceholder",
+  testID = 'language-selection-screen',
+}) => {
+  const tokens = useAppDesignTokens();
+  const navigation = useAppNavigation();
+  const {
+    searchQuery,
+    setSearchQuery,
+    selectedCode,
+    filteredLanguages,
+    handleLanguageSelect,
+  } = useLanguageSelection();
+
+  const onSelect = async (code: string) => {
+    if (__DEV__) {
+      console.log('[LanguageSelectionScreen] onSelect called with code:', code);
+    }
+    await handleLanguageSelect(code, () => {
+      if (__DEV__) {
+        console.log('[LanguageSelectionScreen] Navigating back using context navigation');
+      }
+      navigation.goBack();
+    });
+    if (__DEV__) {
+      console.log('[LanguageSelectionScreen] Language change completed');
+    }
+  };
+
+  const renderItem = ({ item }: { item: Language }) => {
+    const isSelected = selectedCode === item.code;
+
+    if (renderLanguageItem) {
+      return <>{renderLanguageItem(item, isSelected, onSelect)}</>;
+    }
+
+    return (
+      <LanguageItem
+        item={item}
+        isSelected={isSelected}
+        onSelect={onSelect}
+        customStyles={customStyles}
+      />
+    );
+  };
+
+  const renderSearchComponent = () => {
+    if (renderSearchInput) {
+      return renderSearchInput(searchQuery, setSearchQuery, searchPlaceholder);
+    }
+
+    return (
+      <SearchBar
+        value={searchQuery}
+        onChangeText={setSearchQuery}
+        placeholder={searchPlaceholder}
+        containerStyle={[
+          { marginBottom: tokens.spacing.md },
+          customStyles?.searchContainer
+        ]}
+        inputStyle={customStyles?.searchInput}
+      />
+    );
+  };
+
+  const handleBack = () => {
+    if (onBackPress) {
+      onBackPress();
+    } else {
+      navigation.goBack();
+    }
+  };
+
+  return (
+    <ScreenLayout
+      testID={testID}
+      scrollable={false}
+      edges={['top', 'bottom', 'left', 'right']}
+      backgroundColor={tokens.colors.backgroundPrimary}
+      header={
+        <NavigationHeader 
+          title={headerTitle || ""} 
+          onBackPress={handleBack} 
+        />
+      }
+      containerStyle={customStyles?.container}
+    >
+      {renderSearchComponent()}
+      <FlatList
+        data={filteredLanguages}
+        renderItem={renderItem}
+        keyExtractor={item => item.code}
+        contentContainerStyle={[
+          styles.listContent, 
+          { paddingBottom: tokens.spacing.xl },
+          customStyles?.listContent
+        ]}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+      />
+    </ScreenLayout>
+  );
+};
+
+export default LanguageSelectionScreen;
+

package/src/domains/localization/presentation/screens/LanguageSelectionScreen.types.ts

@@ -0,0 +1,27 @@
+/**
+ * Language Selection Screen Types
+ */
+
+import type { Language } from '../../infrastructure/storage/types/Language';
+
+export interface LanguageSelectionScreenProps {
+  renderLanguageItem?: (item: Language, isSelected: boolean, onSelect: (code: string) => void) => React.ReactNode;
+  renderSearchInput?: (value: string, onChange: (value: string) => void, placeholder: string) => React.ReactNode;
+  headerTitle?: string;
+  onBackPress?: () => void;
+  styles?: {
+    container?: object;
+    searchContainer?: object;
+    languageItem?: object;
+    languageContent?: object;
+    languageText?: object;
+    flag?: object;
+    nativeName?: object;
+    searchInput?: object;
+    searchIcon?: object;
+    clearButton?: object;
+    listContent?: object;
+  };
+  searchPlaceholder?: string;
+  testID?: string;
+}

package/src/domains/localization/presentation/screens/__tests__/LanguageSelectionScreen.test.tsx

@@ -0,0 +1,165 @@
+/**
+ * Language Selection Screen Tests
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { LanguageSelectionScreen } from '../LanguageSelectionScreen';
+import { useLocalization } from '../../../infrastructure/hooks/useLocalization';
+import { searchLanguages } from '../../../infrastructure/config/languages';
+
+// Mock dependencies
+jest.mock('../../../infrastructure/hooks/useLocalization');
+jest.mock('../../../infrastructure/config/languages');
+jest.mock('@react-navigation/native', () => ({
+  useNavigation: () => ({
+    goBack: jest.fn(),
+  }),
+}), { virtual: true });
+
+const mockUseLocalization = useLocalization as jest.MockedFunction<typeof useLocalization>;
+const mockSearchLanguages = searchLanguages as jest.MockedFunction<typeof searchLanguages>;
+
+const mockLanguage = {
+  code: 'en-US',
+  name: 'English',
+  nativeName: 'Native English',
+  flag: '🇺🇸',
+  isRTL: false,
+};
+
+describe('LanguageSelectionScreen', () => {
+  const mockSetLanguage = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+
+    mockUseLocalization.mockReturnValue({
+      currentLanguage: 'en-US',
+      setLanguage: mockSetLanguage,
+      t: jest.fn(),
+    } as any);
+
+    mockSearchLanguages.mockReturnValue([mockLanguage]);
+  });
+
+  it('should render search input and language list', () => {
+    const { getByPlaceholderText, getByText } = render(
+      <LanguageSelectionScreen
+        searchPlaceholder="Search languages..."
+      />
+    );
+
+    expect(getByPlaceholderText('Search languages...')).toBeTruthy();
+    expect(getByText('English')).toBeTruthy();
+    expect(getByText('🇺🇸')).toBeTruthy();
+  });
+
+  it('should filter languages when searching', () => {
+    const { getByPlaceholderText } = render(
+      <LanguageSelectionScreen
+        searchPlaceholder="Search languages..."
+      />
+    );
+
+    fireEvent.changeText(getByPlaceholderText('Search languages...'), 'test');
+    expect(mockSearchLanguages).toHaveBeenCalledWith('test');
+  });
+
+  it('should select language when item is pressed', async () => {
+    const { getByText } = render(
+      <LanguageSelectionScreen
+        searchPlaceholder="Search languages..."
+      />
+    );
+
+    fireEvent.press(getByText('English'));
+    expect(mockSetLanguage).toHaveBeenCalledWith('en-US');
+  });
+
+  it('should show check icon for selected language', () => {
+    const { getByText } = render(
+      <LanguageSelectionScreen
+        searchPlaceholder="Search languages..."
+      />
+    );
+
+    expect(getByText('✓')).toBeTruthy();
+  });
+
+  it('should use custom render function when provided', () => {
+    const customRender = jest.fn().mockReturnValue(<div>Custom Item</div>);
+
+    render(
+      <LanguageSelectionScreen
+        searchPlaceholder="Search languages..."
+        renderLanguageItem={customRender}
+      />
+    );
+
+    expect(customRender).toHaveBeenCalledWith(
+      mockLanguage,
+      true,
+      expect.any(Function)
+    );
+  });
+
+  it('should use custom search input when provided', () => {
+    const customSearchInput = jest.fn().mockReturnValue(<div>Custom Search</div>);
+
+    render(
+      <LanguageSelectionScreen
+        searchPlaceholder="Search languages..."
+        renderSearchInput={customSearchInput}
+      />
+    );
+
+    expect(customSearchInput).toHaveBeenCalledWith(
+      '',
+      expect.any(Function),
+      'Search languages...'
+    );
+  });
+
+  it('should use custom container when provided', () => {
+    const CustomContainer = ({ children }: { children: React.ReactNode }) => (
+      <div testID="custom-container">{children}</div>
+    );
+
+    const { getByTestId } = render(
+      <LanguageSelectionScreen
+        searchPlaceholder="Search languages..."
+        containerComponent={CustomContainer}
+      />
+    );
+
+    expect(getByTestId('custom-container')).toBeTruthy();
+  });
+
+  it('should apply custom styles', () => {
+    const customStyles = {
+      container: { backgroundColor: 'red' },
+      languageItem: { borderColor: 'blue' },
+    };
+
+    const { getByTestId } = render(
+      <LanguageSelectionScreen
+        searchPlaceholder="Search languages..."
+        styles={customStyles}
+      />
+    );
+
+    expect(getByTestId('language-selection-screen')).toHaveStyle({ backgroundColor: 'red' });
+  });
+
+  it('should use custom test ID when provided', () => {
+    const { getByTestId } = render(
+      <LanguageSelectionScreen
+        searchPlaceholder="Search languages..."
+        testID="custom-test-id"
+      />
+    );
+
+    expect(getByTestId('custom-test-id')).toBeTruthy();
+  });
+});

package/src/domains/localization/scripts/prepublish.js

@@ -0,0 +1,36 @@
+#!/usr/bin/env node
+
+/**
+ * Pre-Publish Script
+ * Basic checks before publishing
+ */
+
+import fs from 'fs';
+import 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 SRC_DIR = path.join(PACKAGE_ROOT, 'src');
+
+if (!fs.existsSync(SRC_DIR)) {
+  console.error('❌ src directory not found');
+  process.exit(1);
+}
+
+const mainFiles = [
+  'src/index.ts',
+  'src/infrastructure/config/i18n.ts',
+];
+
+for (const file of mainFiles) {
+  const filePath = path.join(PACKAGE_ROOT, file);
+  if (!fs.existsSync(filePath)) {
+    console.error(`❌ Missing mandatory file: ${file}`);
+    process.exit(1);
+  }
+}
+
+console.log('✅ Pre-publish checks passed!');

package/src/domains/localization/scripts/setup-languages.js

@@ -0,0 +1,60 @@
+#!/usr/bin/env node
+
+/**
+ * Setup Languages Script
+ * Generates index.ts with all available translation files
+ * Usage: node setup-languages.js [locales-dir]
+ */
+
+import fs from 'fs';
+import path from 'path';
+
+export function setupLanguages(targetDir) {
+  const localesDir = path.resolve(process.cwd(), targetDir);
+
+  if (!fs.existsSync(localesDir)) {
+    console.error(`❌ Locales directory not found: ${localesDir}`);
+    return false;
+  }
+
+  const files = fs.readdirSync(localesDir)
+    .filter(f => f.match(/^[a-z]{2}-[A-Z]{2}\.ts$/))
+    .sort();
+
+  const imports = [];
+  const exports = [];
+
+  files.forEach(file => {
+    const code = file.replace('.ts', '');
+    const varName = code.replace(/-([a-z0-9])/g, (g) => g[1].toUpperCase()).replace('-', '');
+    imports.push(`import ${varName} from "./${code}";`);
+    exports.push(`  "${code}": ${varName},`);
+  });
+
+  const content = `/**
+ * Localization Index
+ * Exports all available translation files
+ * Auto-generated by scripts/setup-languages.js
+ */
+
+${imports.join('\n')}
+
+export const translations = {
+${exports.join('\n')}
+};
+
+export type TranslationKey = keyof typeof translations;
+
+export default translations;
+`;
+
+  fs.writeFileSync(path.join(localesDir, 'index.ts'), content);
+  console.log(`✅ Generated index.ts with ${files.length} languages`);
+  return true;
+}
+
+if (import.meta.url === `file://${process.argv[1]}`) {
+  const targetDir = process.argv[2] || 'src/domains/localization/infrastructure/locales';
+  console.log('🚀 Setting up language files...\n');
+  setupLanguages(targetDir);
+}

package/src/domains/localization/scripts/sync-translations.js

@@ -0,0 +1,124 @@
+#!/usr/bin/env node
+
+/**
+ * Sync Translations Script
+ * Synchronizes translation keys from en-US.ts to all other language files
+ * Usage: node sync-translations.js [locales-dir] [src-dir-optional]
+ */
+
+import fs from 'fs';
+import path from 'path';
+import { parseTypeScriptFile, generateTypeScriptContent } from './utils/file-parser.js';
+import { addMissingKeys, removeExtraKeys } from './utils/sync-helper.js';
+import { detectNewKeys } from './utils/key-detector.js';
+import { extractUsedKeys } from './utils/key-extractor.js';
+import { setDeep } from './utils/object-helper.js';
+
+function syncLanguageFile(enUSPath, targetPath, langCode) {
+  const enUS = parseTypeScriptFile(enUSPath);
+  let target;
+
+  try {
+    target = parseTypeScriptFile(targetPath);
+  } catch {
+    target = {};
+  }
+
+  const newKeys = detectNewKeys(enUS, target);
+  const addStats = { added: 0, newKeys: [] };
+  const removeStats = { removed: 0, removedKeys: [] };
+
+  addMissingKeys(enUS, target, addStats);
+  removeExtraKeys(enUS, target, removeStats);
+
+  const changed = addStats.added > 0 || removeStats.removed > 0;
+
+  if (changed) {
+    const content = generateTypeScriptContent(target, langCode);
+    fs.writeFileSync(targetPath, content);
+  }
+
+  return { ...addStats, ...removeStats, newKeys, changed };
+}
+
+function processExtraction(srcDir, enUSPath) {
+  if (!srcDir) return;
+
+  console.log(`🔍 Scanning source code and dependencies: ${srcDir}...`);
+  const usedKeyMap = extractUsedKeys(srcDir);
+  console.log(`   Found ${usedKeyMap.size} unique keys.`);
+
+  const oldEnUS = parseTypeScriptFile(enUSPath);
+  const newEnUS = {}; 
+  
+  let addedCount = 0;
+  for (const [key, defaultValue] of usedKeyMap) {
+    // Try to keep existing translation if it exists
+    const existingValue = key.split('.').reduce((obj, k) => (obj && obj[k]), oldEnUS);
+    
+    // We treat it as "not translated" if the value is exactly the key string
+    const isActuallyTranslated = typeof existingValue === 'string' && existingValue !== key;
+    const valueToSet = isActuallyTranslated ? existingValue : defaultValue;
+    
+    if (setDeep(newEnUS, key, valueToSet)) {
+      if (!isActuallyTranslated) addedCount++;
+    }
+  }
+
+  // Count keys in objects
+  const getKeysCount = (obj) => {
+    let count = 0;
+    const walk = (o) => {
+      for (const k in o) {
+        if (typeof o[k] === 'object' && o[k] !== null) walk(o[k]);
+        else count++;
+      }
+    };
+    walk(obj);
+    return count;
+  };
+  
+  const oldTotal = getKeysCount(oldEnUS);
+  const newTotal = getKeysCount(newEnUS);
+  const removedCount = oldTotal - (newTotal - addedCount);
+
+  console.log(`   ✨ Optimized en-US.ts: ${addedCount} keys populated/updated, pruned ${Math.max(0, removedCount)} unused.`);
+  const content = generateTypeScriptContent(newEnUS, 'en-US');
+  fs.writeFileSync(enUSPath, content);
+}
+
+export function syncTranslations(targetDir, srcDir) {
+  const localesDir = path.resolve(process.cwd(), targetDir);
+  const enUSPath = path.join(localesDir, 'en-US.ts');
+
+  if (!fs.existsSync(localesDir) || !fs.existsSync(enUSPath)) {
+    console.error(`❌ Localization files not found in: ${localesDir}`);
+    return false;
+  }
+
+  processExtraction(srcDir, enUSPath);
+
+  const files = fs.readdirSync(localesDir)
+    .filter(f => f.match(/^[a-z]{2}-[A-Z]{2}\.ts$/) && f !== 'en-US.ts')
+    .sort();
+
+  console.log(`📊 Languages to sync: ${files.length}\n`);
+  files.forEach(file => {
+    const langCode = file.replace('.ts', '');
+    const targetPath = path.join(localesDir, file);
+    const result = syncLanguageFile(enUSPath, targetPath, langCode);
+    if (result.changed) {
+      console.log(`   🌍 ${langCode}: ✏️  +${result.added} keys, -${result.removed} keys`);
+    }
+  });
+
+  console.log(`\n✅ Synchronization completed!`);
+  return true;
+}
+
+if (import.meta.url === `file://${process.argv[1]}`) {
+  const targetDir = process.argv[2] || 'src/domains/localization/infrastructure/locales';
+  const srcDir = process.argv[3];
+  console.log('🚀 Starting translation synchronization...\n');
+  syncTranslations(targetDir, srcDir);
+}