@umituz/react-native-localization 2.7.0 → 3.0.0

package/src/presentation/screens/LanguageSelectionScreen.tsx

@@ -0,0 +1,148 @@
+/**
+ * Language Selection Screen
+ *
+ * Language picker with search functionality
+ *
+ * Generic language selector that can be customized by consuming applications
+ */
+
+import React, { useState, useMemo } from 'react';
+import {
+  View,
+  StyleSheet,
+  FlatList,
+} from 'react-native';
+// @ts-ignore - Optional peer dependency
+import { useNavigation } from '@react-navigation/native';
+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<LanguageSelectionScreenProps> = ({
+  renderLanguageItem,
+  renderSearchInput,
+  containerComponent: Container,
+  styles: customStyles,
+  searchPlaceholder,
+  testID = 'language-selection-screen',
+}) => {
+  const navigation = useNavigation();
+  const { t, currentLanguage, setLanguage } = useLocalization();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [selectedCode, setSelectedCode] = useState(currentLanguage);
+
+  const filteredLanguages = useMemo(() => {
+    return searchLanguages(searchQuery);
+  }, [searchQuery]);
+
+  const handleLanguageSelect = async (code: string) => {
+    setSelectedCode(code);
+    await setLanguage(code);
+    navigation.goBack();
+  };
+
+  const renderItem = ({ item }: { item: Language }) => {
+    const isSelected = selectedCode === item.code;
+
+    if (renderLanguageItem) {
+      const customItem = renderLanguageItem(item, isSelected, handleLanguageSelect);
+      return <>{customItem}</>;
+    }
+
+    return (
+      <LanguageItem
+        item={item}
+        isSelected={isSelected}
+        onSelect={handleLanguageSelect}
+        customStyles={customStyles}
+      />
+    );
+  };
+
+  const renderSearchInputComponent = () => {
+    if (renderSearchInput) {
+      return renderSearchInput(searchQuery, setSearchQuery, searchPlaceholder);
+    }
+
+    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={renderItem}
+        keyExtractor={item => item.code}
+        contentContainerStyle={[styles.listContent, customStyles?.listContent]}
+        showsVerticalScrollIndicator={false}
+        keyboardShouldPersistTaps="handled"
+      />
+    </View>
+  );
+
+  return Container ? <Container>{content}</Container> : content;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#fff',
+  },
+  listContent: {
+    paddingHorizontal: 20,
+    paddingBottom: 32,
+  },
+});
+
+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"
-  }
-}

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

@@ -1,57 +0,0 @@
-{
-  "cancel": "Cancel",
-  "confirm": "Confirm",
-  "continue": "Continue",
-  "delete": "Delete",
-  "edit": "Edit",
-  "error": "Error",
-  "loading": "Loading...",
-  "notNow": "Not Now",
-  "ok": "OK",
-  "optional": "Optional",
-  "save": "Save",
-  "somethingWentWrong": "Something went wrong",
-  "success": "Success",
-  "close": "Close",
-  "done": "Done",
-  "next": "Next",
-  "previous": "Previous",
-  "skip": "Skip",
-  "retry": "Retry",
-  "refresh": "Refresh",
-  "filter": "Filter",
-  "sort": "Sort",
-  "add": "Add",
-  "remove": "Remove",
-  "update": "Update",
-  "create": "Create",
-  "view": "View",
-  "details": "Details",
-  "share": "Share",
-  "download": "Download",
-  "upload": "Upload",
-  "submit": "Submit",
-  "reset": "Reset",
-  "clear": "Clear",
-  "apply": "Apply",
-  "yes": "Yes",
-  "no": "No",
-  "or": "or",
-  "all": "All",
-  "none": "None",
-  "of": "of",
-  "select": "Select",
-  "selected": "Selected",
-  "required": "Required",
-  "empty": "Empty",
-  "noData": "No data available",
-  "noResults": "No results found",
-  "tryAgain": "Try again",
-  "learnMore": "Learn more",
-  "getStarted": "Get started",
-  "viewAll": "View all",
-  "showMore": "Show more",
-  "showLess": "Show less",
-  "back": "Back",
-  "start": "Start"
-}