@umituz/react-native-localization 2.8.0 → 3.0.0

package/src/presentation/screens/LanguageSelectionScreen.tsx

@@ -3,7 +3,7 @@
  *
  * Language picker with search functionality
  *
- * App Factory - Universal Language Selector
+ * Generic language selector that can be customized by consuming applications
  */
 
 import React, { useState, useMemo } from 'react';
@@ -11,25 +11,68 @@ import {
   View,
   StyleSheet,
   FlatList,
-  TouchableOpacity,
-  TextInput,
 } from 'react-native';
+// @ts-ignore - Optional peer dependency
 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';
+import { useLocalization, searchLanguages, Language } from '../../index';
+import { LanguageItem } from '../components/LanguageItem';
+import { SearchInput } from '../components/SearchInput';
+
+interface LanguageSelectionScreenProps {
+  /**
+   * Custom component for rendering language items
+   */
+  renderLanguageItem?: (item: Language, isSelected: boolean, onSelect: (code: string) => void) => React.ReactNode;
+  /**
+   * Custom component for search input
+   */
+  renderSearchInput?: (value: string, onChange: (value: string) => void, placeholder: string) => React.ReactNode;
+  /**
+   * Custom component for container
+   */
+  containerComponent?: React.ComponentType<{ children: React.ReactNode }>;
+  /**
+   * Custom styles
+   */
+  styles?: {
+    container?: any;
+    searchContainer?: any;
+    languageItem?: any;
+    languageContent?: any;
+    languageText?: any;
+    flag?: any;
+    nativeName?: any;
+    searchInput?: any;
+    searchIcon?: any;
+    clearButton?: any;
+    listContent?: any;
+  };
+  /**
+   * Search placeholder text
+   */
+  searchPlaceholder: string;
+  /**
+   * Test ID for testing
+   */
+  testID?: string;
+}
 
 /**
  * Language Selection Screen Component
+ * Generic language selector that can be customized by consuming applications
  */
-export const LanguageSelectionScreen: React.FC = () => {
+export const LanguageSelectionScreen: React.FC<LanguageSelectionScreenProps> = ({
+  renderLanguageItem,
+  renderSearchInput,
+  containerComponent: Container,
+  styles: customStyles,
+  searchPlaceholder,
+  testID = 'language-selection-screen',
+}) => {
   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);
@@ -41,164 +84,65 @@ export const LanguageSelectionScreen: React.FC = () => {
     navigation.goBack();
   };
 
-  const renderLanguageItem = ({ item }: { item: Language }) => {
+  const renderItem = ({ item }: { item: Language }) => {
     const isSelected = selectedCode === item.code;
 
+    if (renderLanguageItem) {
+      const customItem = renderLanguageItem(item, isSelected, handleLanguageSelect);
+      return <>{customItem}</>;
+    }
+
     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>
+      <LanguageItem
+        item={item}
+        isSelected={isSelected}
+        onSelect={handleLanguageSelect}
+        customStyles={customStyles}
+      />
     );
   };
 
-  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>
+  const renderSearchInputComponent = () => {
+    if (renderSearchInput) {
+      return renderSearchInput(searchQuery, setSearchQuery, searchPlaceholder);
+    }
 
-      {/* Language List */}
+    return (
+      <SearchInput
+        value={searchQuery}
+        onChange={setSearchQuery}
+        placeholder={searchPlaceholder}
+        customStyles={customStyles}
+      />
+    );
+  };
+
+  const content = (
+    <View style={[styles.container, customStyles?.container]} testID={testID}>
+      {renderSearchInputComponent()}
       <FlatList
         data={filteredLanguages}
-        renderItem={renderLanguageItem}
+        renderItem={renderItem}
         keyExtractor={item => item.code}
-        contentContainerStyle={styles.listContent}
+        contentContainerStyle={[styles.listContent, customStyles?.listContent]}
         showsVerticalScrollIndicator={false}
         keyboardShouldPersistTaps="handled"
       />
-    </ScreenLayout>
+    </View>
   );
+
+  return Container ? <Container>{content}</Container> : content;
 };
 
 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: {
+  container: {
     flex: 1,
-    fontSize: STATIC_TOKENS.typography.bodyMedium.fontSize,
-    padding: 0,
-    fontWeight: '500',
-  },
-  clearButton: {
-    padding: STATIC_TOKENS.spacing.xs,
+    backgroundColor: '#fff',
   },
   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;
-
+export default LanguageSelectionScreen;

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

@@ -0,0 +1,166 @@
+/**
+ * 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/languagesData';
+
+// Mock dependencies
+jest.mock('../../infrastructure/hooks/useLocalization');
+jest.mock('../../infrastructure/config/languagesData');
+jest.mock('@react-navigation/native', () => ({
+  useNavigation: () => ({
+    goBack: jest.fn(),
+  }),
+}));
+
+const mockUseLocalization = useLocalization as jest.MockedFunction<typeof useLocalization>;
+const mockSearchLanguages = searchLanguages as jest.MockedFunction<typeof searchLanguages>;
+
+const mockLanguage = {
+  code: 'en-US',
+  name: 'English',
+  nativeName: 'English',
+  flag: '🇺🇸',
+  isRTL: false,
+};
+
+describe('LanguageSelectionScreen', () => {
+  const mockSetLanguage = jest.fn();
+  const mockGoBack = 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/scripts/prepublish.ts

@@ -0,0 +1,48 @@
+#!/usr/bin/env node
+/* eslint-disable no-console */
+
+/**
+ * Pre-Publish Script - Generic Package Version
+ *
+ * Basic checks before publishing for generic localization package
+ */
+
+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 SRC_DIR = path.join(PACKAGE_ROOT, 'src');
+
+console.log('🔍 Pre-publish checks...\n');
+
+// Check if src directory exists
+if (!fs.existsSync(SRC_DIR)) {
+  console.error('❌ src directory not found!');
+  process.exit(1);
+}
+
+// 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 (!allFilesExist) {
+  process.exit(1);
+}
+
+console.log('✅ All required files found');
+console.log('✅ Pre-publish checks passed!\n');

package/src/infrastructure/locales/en-US/alerts.json

@@ -1,107 +0,0 @@
-{
-  "error": {
-    "title": "Error",
-    "generic": "An error occurred",
-    "failed_to_select_video": "Failed to select video",
-    "failed_to_select_images": "Failed to select images",
-    "failed_to_select_audio": "Failed to select audio file",
-    "failed_to_generate_video": "Failed to generate video",
-    "failed_to_transform_video": "Failed to transform video",
-    "failed_to_generate_script": "Failed to generate script",
-    "failed_to_export": "Export failed",
-    "failed_to_pick_image": "Failed to pick image. Please try again.",
-    "failed_to_take_photo": "Failed to take photo. Please try again.",
-    "project_not_found": "Project not found",
-    "cannot_delete_last_scene": "Cannot delete the last scene",
-    "configuration_error": "Firebase is not configured. Please check your environment settings.",
-    "sign_in_failed": "Failed to sign in. Please try again.",
-    "sign_up_failed": "Failed to create account. Please try again.",
-    "sign_in_google_failed": "Failed to sign in with Google.",
-    "sign_up_google_failed": "Failed to sign up with Google."
-  },
-  "success": {
-    "title": "Success",
-    "project_saved": "Project saved successfully!",
-    "text_layer_added": "Text layer added!",
-    "text_layer_updated": "Text layer updated!",
-    "layer_deleted": "Layer deleted",
-    "layer_duplicated": "Layer duplicated!",
-    "scene_added": "New scene added!",
-    "scene_duplicated": "Scene duplicated!",
-    "scene_deleted": "Scene deleted",
-    "image_layer_added": "Image layer added!",
-    "image_layer_updated": "Image layer updated!",
-    "shape_layer_added": "Shape layer added!",
-    "audio_added": "Audio added to scene!",
-    "audio_removed": "Audio removed from scene",
-    "animation_applied": "Animation applied to layer!",
-    "animation_removed": "Animation removed from layer",
-    "custom_audio_selected": "Custom audio selected!",
-    "video_created": "Video Created! 🎬",
-    "video_generated": "Video Generated! 🎉",
-    "script_copied": "Copied!",
-    "password_reset_sent": "Password reset link sent to your email.",
-    "account_created": "Your account has been created successfully.",
-    "project_deleted": "{{title}} deleted successfully",
-    "project_duplicated": "Project duplicated: {{title}}"
-  },
-  "validation": {
-    "missing_prompt": "Missing Prompt",
-    "missing_prompt_message": "Please enter a description for your video",
-    "missing_topic": "Missing Topic",
-    "missing_topic_message": "Please enter a topic for your video",
-    "missing_email": "Enter Email",
-    "missing_email_message": "Please enter your email address first.",
-    "enter_name": "Please enter your name",
-    "enter_email": "Please enter your email",
-    "enter_valid_email": "Please enter a valid email address",
-    "enter_password": "Please enter a password",
-    "enter_email_password": "Please enter email and password",
-    "password_min_length": "Password must be at least 6 characters",
-    "passwords_not_match": "Passwords do not match",
-    "no_video_selected": "No Video",
-    "no_video_selected_message": "Please select a video first",
-    "no_image_selected": "No Image",
-    "no_image_selected_message": "Please select an image first.",
-    "no_audio_selected": "Please select an audio file"
-  },
-  "video": {
-    "generation_failed": "Generation Failed",
-    "generation_failed_message": "Unable to generate video",
-    "transformation_failed": "Transformation Failed",
-    "transformation_failed_message": "Unable to transform video",
-    "video_ready": "Your AI-generated video is ready!",
-    "video_created_message": "Created {{count}} animated scenes with {{style}} effect"
-  },
-  "script": {
-    "generation_failed": "Generation Failed",
-    "generation_failed_message": "Unable to generate script"
-  },
-  "export": {
-    "title": "Export Complete",
-    "message": "Your video has been exported successfully!\n\nLocation: {{uri}}",
-    "failed_title": "Export Failed",
-    "failed_message": "An error occurred during export"
-  },
-  "delete": {
-    "layer_title": "Delete Layer",
-    "layer_message": "Are you sure you want to delete this layer?",
-    "scene_title": "Delete Scene",
-    "scene_message": "Are you sure you want to delete this scene?"
-  },
-  "actions": {
-    "undo": "Undo",
-    "undo_message": "Action undone",
-    "redo": "Redo",
-    "redo_message": "Action done",
-    "coming_soon": "Coming soon!",
-    "export_coming_soon": "Export feature coming soon!",
-    "share_coming_soon": "Share feature coming soon!",
-    "effects_coming_soon": "Effects feature coming soon!"
-  },
-  "premium": {
-    "upgrade_successful": "🎉 Upgrade Successful!",
-    "upgrade_message": "Welcome to Premium! You now have unlimited access to all features.",
-    "start_creating": "Start Creating"
-  }
-}

package/src/infrastructure/locales/en-US/auth.json

@@ -1,34 +0,0 @@
-{
-  "title": "Welcome",
-  "subtitle": "Sign in to your account or continue as guest",
-  "welcomeBack": "Welcome Back",
-  "loginSubtitle": "Sign in to sync your data across devices",
-  "email": "Email",
-  "emailPlaceholder": "Enter your email",
-  "password": "Password",
-  "passwordPlaceholder": "Enter your password",
-  "signIn": "Sign In",
-  "createAccount": "Create Account",
-  "continueAsGuest": "Continue as Guest",
-  "dontHaveAccount": "Don't have an account?",
-  "register": "Register",
-  "displayName": "Display Name",
-  "displayNamePlaceholder": "Enter your name",
-  "confirmPassword": "Confirm Password",
-  "confirmPasswordPlaceholder": "Re-enter your password",
-  "backToLogin": "Back to Login",
-  "registerSubtitle": "Create an account to sync your data",
-  "fillAllFields": "Please fill in all fields",
-  "passwordsDoNotMatch": "Passwords do not match",
-  "passwordTooShort": "Password must be at least 6 characters",
-  "loginFailed": "Login failed. Please check your credentials.",
-  "registrationFailed": "Registration failed. Please try again.",
-  "logout": "Logout",
-  "signedInAs": "Signed in as",
-  "guestMode": "Guest Mode",
-  "guestModeDescription": "Your data is stored locally on this device",
-  "syncData": "Sync Local Data",
-  "syncDataDescription": "Upload your local data to the cloud",
-  "syncSuccess": "Data synced successfully",
-  "syncFailed": "Failed to sync data"
-}

package/src/infrastructure/locales/en-US/branding.json

@@ -1,8 +0,0 @@
-{
-  "appName": "App Name",
-  "tagline": "Welcome",
-  "poweredBy": "Powered by",
-  "splash": {
-    "loading": "Loading..."
-  }
-}

package/src/infrastructure/locales/en-US/clipboard.json

@@ -1,9 +0,0 @@
-{
-  "clipboard": {
-    "copied": "Copied",
-    "copyFailed": "Failed to copy",
-    "pasteFailed": "Failed to paste",
-    "cleared": "Clipboard cleared",
-    "empty": "Clipboard is empty"
-  }
-}