@umituz/react-native-localization 3.5.53 → 3.5.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-localization",
-  "version": "3.5.53",
+  "version": "3.5.55",
   "description": "Generic localization system for React Native apps with i18n support",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -26,25 +26,37 @@
   },
   "peerDependencies": {
     "@react-native-async-storage/async-storage": ">=2.0.0",
-    "@umituz/react-native-storage": "latest",
+    "@umituz/react-native-design-system": "latest",
     "expo-localization": ">=16.0.0",
     "i18next": ">=23.0.0",
     "react": ">=18.2.0",
     "react-i18next": ">=15.0.0",
     "react-native": ">=0.74.0",
-    "zustand": ">=4.0.0"
+    "zustand": ">=4.0.0",
+    "@umituz/react-native-design-system": "latest"
   },
   "devDependencies": {
     "@react-native-async-storage/async-storage": "~2.1.2",
     "@types/react": "~19.1.10",
-    "@umituz/react-native-storage": "latest",
     "expo-localization": "~16.0.1",
     "i18next": "^24.2.0",
     "react": "19.1.0",
     "react-i18next": "^15.2.0",
     "react-native": "0.81.5",
     "typescript": "~5.9.2",
-    "zustand": "^4.5.0"
+    "zustand": "^5.0.0",
+    "@umituz/react-native-design-system": "latest",
+    "expo-clipboard": "^8.0.0",
+    "expo-sharing": "^12.0.0",
+    "expo-application": "^5.0.0",
+    "expo-device": "^5.0.0",
+    "react-native-safe-area-context": "latest",
+    "@react-navigation/native": "latest",
+    "@react-navigation/stack": "latest",
+    "@react-navigation/bottom-tabs": "latest",
+    "react-native-gesture-handler": "latest",
+    "expo-font": "^12.0.0",
+    "expo-file-system": "^17.0.0"
   },
   "publishConfig": {
     "access": "public"

package/src/infrastructure/storage/AsyncStorageWrapper.ts

@@ -1,9 +1,9 @@
 /**
  * Storage Wrapper
- * Uses @umituz/react-native-storage for persistence
+ * Uses @umituz/react-native-design-system for persistence
  */
 
-import { storageRepository } from '@umituz/react-native-storage';
+import { storageRepository } from '@umituz/react-native-design-system';
 
 export const STORAGE_KEYS = {
   LANGUAGE: '@localization:language',

package/src/infrastructure/storage/LanguageInitializer.ts

@@ -7,7 +7,7 @@
  * - i18n setup
  */
 
-import { storageRepository } from '@umituz/react-native-storage';
+import { storageRepository } from '@umituz/react-native-design-system';
 import i18n from '../config/i18n';
 import { languageRepository } from '../repository/LanguageRepository';
 import { getDeviceLocale } from '../config/languages';

package/src/infrastructure/storage/LanguageSwitcher.ts

@@ -6,7 +6,7 @@
  * - Persistence
  */
 
-import { storageRepository } from '@umituz/react-native-storage';
+import { storageRepository } from '@umituz/react-native-design-system';
 import i18n from '../config/i18n';
 import { languageRepository } from '../repository/LanguageRepository';
 

package/src/presentation/screens/LanguageSelectionScreen.tsx

@@ -7,10 +7,10 @@ import React from 'react';
 import { View, FlatList } from 'react-native';
 // @ts-ignore - Optional peer dependency
 import { useNavigation } from '@react-navigation/native';
-import { useAppDesignTokens } from '@umituz/react-native-design-system';
+// @ts-ignore - Optional peer dependency
+import { useAppDesignTokens, SearchBar } from '@umituz/react-native-design-system';
 import { useLanguageSelection } from '../../infrastructure/hooks/useLanguageSelection';
 import { LanguageItem } from '../components/LanguageItem';
-import { SearchInput } from '../components/SearchInput';
 import type { Language } from '../../infrastructure/storage/types/Language';
 import { styles } from './LanguageSelectionScreen.styles';
 
@@ -80,11 +80,12 @@ export const LanguageSelectionScreen: React.FC<LanguageSelectionScreenProps> = (
     }
 
     return (
-      <SearchInput
+      <SearchBar
         value={searchQuery}
-        onChange={setSearchQuery}
+        onChangeText={setSearchQuery}
         placeholder={searchPlaceholder}
-        customStyles={customStyles}
+        containerStyle={customStyles?.searchContainer}
+        inputStyle={customStyles?.searchInput}
       />
     );
   };

package/src/presentation/components/SearchInput.styles.ts

@@ -1,34 +0,0 @@
-/**
- * Search Input Component Styles
- */
-
-import { StyleSheet } from 'react-native';
-
-export const styles = StyleSheet.create({
-  searchContainer: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    marginHorizontal: 20,
-    marginBottom: 24,
-    paddingHorizontal: 16,
-    paddingVertical: 12,
-    borderRadius: 12,
-    borderWidth: 1,
-  },
-  searchIcon: {
-    marginRight: 12,
-    fontSize: 16,
-  },
-  searchInput: {
-    flex: 1,
-    fontSize: 16,
-    padding: 0,
-    fontWeight: '500',
-  },
-  clearButton: {
-    padding: 4,
-  },
-  clearIcon: {
-    fontSize: 14,
-  },
-});

package/src/presentation/components/SearchInput.tsx

@@ -1,78 +0,0 @@
-/**
- * Search Input Component
- *
- * Renders search input for language filtering
- * Theme-aware component that adapts to light/dark mode
- */
-
-import React, { useMemo } from 'react';
-import {
-  View,
-  TextInput,
-  TouchableOpacity,
-  Text,
-  type StyleProp,
-  type ViewStyle,
-  type TextStyle,
-} from 'react-native';
-// @ts-ignore - Optional peer dependency
-import { useAppDesignTokens } from '@umituz/react-native-design-system';
-import { styles } from './SearchInput.styles';
-
-interface SearchInputProps {
-  value: string;
-  onChange: (value: string) => void;
-  placeholder: string;
-  customStyles?: {
-    searchContainer?: StyleProp<ViewStyle>;
-    searchInput?: StyleProp<TextStyle>;
-    searchIcon?: StyleProp<TextStyle>;
-    clearButton?: StyleProp<ViewStyle>;
-  };
-}
-
-export const SearchInput: React.FC<SearchInputProps> = ({
-  value,
-  onChange,
-  placeholder,
-  customStyles,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const themedStyles = useMemo(() => ({
-    searchContainer: {
-      backgroundColor: tokens.colors.backgroundSecondary,
-      borderColor: tokens.colors.border,
-    } as ViewStyle,
-    searchInput: {
-      color: tokens.colors.textPrimary,
-    } as TextStyle,
-    clearIcon: {
-      color: tokens.colors.textSecondary,
-    } as TextStyle,
-  }), [tokens]);
-
-  return (
-    <View style={[styles.searchContainer, themedStyles.searchContainer, customStyles?.searchContainer]}>
-      <Text style={[styles.searchIcon, customStyles?.searchIcon]}>🔍</Text>
-      <TextInput
-        style={[styles.searchInput, themedStyles.searchInput, customStyles?.searchInput]}
-        placeholder={placeholder}
-        placeholderTextColor={tokens.colors.textTertiary}
-        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, themedStyles.clearIcon, customStyles?.searchIcon]}>✕</Text>
-        </TouchableOpacity>
-      )}
-    </View>
-  );
-};

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

@@ -1,95 +0,0 @@
-/**
- * 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();
-  });
-});