@umituz/react-native-settings 5.4.20 → 5.4.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "5.4.20",
+  "version": "5.4.22",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification - expo-store-review and expo-device now lazy loaded",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",
@@ -124,6 +124,7 @@
     "@react-navigation/stack": ">=6.0.0",
     "@tanstack/react-query": ">=5.0.0",
     "@umituz/react-native-design-system": "*",
+    "@umituz/react-native-google-translate": "*",
     "expo": ">=54.0.0",
     "expo-constants": ">=55.0.0",
     "expo-device": ">=6.0.0",
@@ -162,6 +163,7 @@
     "@umituz/react-native-auth": "^4.3.39",
     "@umituz/react-native-design-system": "^4.27.0",
     "@umituz/react-native-firebase": "^2.4.55",
+    "@umituz/react-native-google-translate": "^1.0.0",
     "@umituz/react-native-sentry": "latest",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.37.5",

package/src/domains/ai-consent/presentation/components/AIConsentModal.tsx

@@ -16,8 +16,10 @@
  */
 
 import React, { memo } from 'react';
-import { Modal, View, StyleSheet } from 'react-native';
+import { Modal, View } from 'react-native';
 import { AIConsentScreen, type AIProvider } from '../screens/AIConsentScreen';
+import { useThemedStyleSheet } from '@umituz/react-native-design-system/theme';
+import type { Theme } from '@umituz/react-native-design-system/theme';
 
 export interface AIConsentModalProps {
   visible: boolean;
@@ -34,6 +36,8 @@ export const AIConsentModal: React.FC<AIConsentModalProps> = memo(({
   providers,
   customMessage,
 }) => {
+  const styles = useThemedStyleSheet(createStyles);
+
   return (
     <Modal
       visible={visible}
@@ -56,9 +60,9 @@ export const AIConsentModal: React.FC<AIConsentModalProps> = memo(({
 
 AIConsentModal.displayName = 'AIConsentModal';
 
-const styles = StyleSheet.create({
+const createStyles = (theme: Theme) => ({
   container: {
     flex: 1,
-    backgroundColor: '#FFFFFF',
+    backgroundColor: theme.colors.backgroundPrimary,
   },
 });

package/src/domains/ai-consent/presentation/screens/AIConsentScreen.tsx

@@ -15,7 +15,6 @@
 import React, { memo } from 'react';
 import {
   View,
-  StyleSheet,
   ScrollView,
   TouchableOpacity,
 } from 'react-native';
@@ -31,7 +30,8 @@ import {
   NavigationHeader,
   useAppNavigation,
 } from '@umituz/react-native-design-system/molecules';
-import { useAppDesignTokens } from '@umituz/react-native-design-system/theme';
+import { useThemedStyleSheet } from '@umituz/react-native-design-system/theme';
+import type { Theme } from '@umituz/react-native-design-system/theme';
 
 export interface AIProvider {
   name: string;
@@ -85,7 +85,7 @@ export const AIConsentScreen: React.FC<AIConsentScreenProps> = memo(({
   standalone = false,
 }) => {
   const navigation = useAppNavigation();
-  const tokens = useAppDesignTokens();
+  const styles = useThemedStyleSheet(createStyles);
   const [loading, setLoading] = React.useState(false);
 
   // Get params from route or use props
@@ -289,7 +289,7 @@ export const AIConsentScreen: React.FC<AIConsentScreenProps> = memo(({
 
 AIConsentScreen.displayName = 'AIConsentScreen';
 
-const styles = StyleSheet.create({
+const createStyles = (theme: Theme) => ({
   scrollView: {
     flex: 1,
   },
@@ -300,32 +300,32 @@ const styles = StyleSheet.create({
     fontSize: 15,
     lineHeight: 22,
     marginBottom: 24,
-    color: '#374151',
+    color: theme.colors.textSecondary,
   },
   section: {
     marginBottom: 24,
     padding: 16,
-    backgroundColor: '#F9FAFB',
+    backgroundColor: theme.colors.surfaceVariant,
     borderRadius: 12,
   },
   sectionTitle: {
     fontSize: 17,
     fontWeight: '600',
-    color: '#111827',
+    color: theme.colors.textPrimary,
     marginBottom: 12,
   },
   providerList: {
     gap: 12,
   },
   providerItem: {
-    backgroundColor: '#FFFFFF',
+    backgroundColor: theme.colors.surface,
     padding: 12,
     borderRadius: 8,
     borderWidth: 1,
-    borderColor: '#E5E7EB',
+    borderColor: theme.colors.borderLight,
   },
   providerHeader: {
-    flexDirection: 'row',
+    flexDirection: 'row' as const,
     justifyContent: 'space-between',
     alignItems: 'center',
     marginBottom: 4,
@@ -333,26 +333,26 @@ const styles = StyleSheet.create({
   providerName: {
     fontSize: 15,
     fontWeight: '600',
-    color: '#111827',
+    color: theme.colors.textPrimary,
   },
   privacyLink: {
     fontSize: 13,
-    color: '#3B82F6',
+    color: theme.colors.primary,
   },
   providerPurpose: {
     fontSize: 14,
-    color: '#6B7280',
+    color: theme.colors.textTertiary,
   },
   bullet: {
     fontSize: 15,
-    color: '#374151',
+    color: theme.colors.textSecondary,
     lineHeight: 22,
     marginLeft: 8,
   },
   note: {
     fontSize: 13,
-    color: '#6B7280',
-    fontStyle: 'italic',
+    color: theme.colors.textTertiary,
+    fontStyle: 'italic' as const,
     marginLeft: 8,
     marginTop: 4,
   },
@@ -362,15 +362,15 @@ const styles = StyleSheet.create({
   },
   linkText: {
     fontSize: 15,
-    color: '#3B82F6',
+    color: theme.colors.primary,
     fontWeight: '500',
   },
   declarationSection: {
-    flexDirection: 'row',
+    flexDirection: 'row' as const,
     alignItems: 'flex-start',
     marginTop: 8,
     padding: 12,
-    backgroundColor: '#EFF6FF',
+    backgroundColor: theme.colors.primaryBackground || 'rgba(90, 175, 127, 0.15)',
     borderRadius: 8,
   },
   checkbox: {
@@ -383,26 +383,26 @@ const styles = StyleSheet.create({
     width: 24,
     height: 24,
     borderRadius: 4,
-    backgroundColor: '#3B82F6',
-    alignItems: 'center',
-    justifyContent: 'center',
+    backgroundColor: theme.colors.primary,
+    alignItems: 'center' as const,
+    justifyContent: 'center' as const,
   },
   checkmark: {
-    color: '#FFFFFF',
+    color: theme.colors.onPrimary || '#FFFFFF',
     fontSize: 16,
     fontWeight: '700',
   },
   declarationText: {
     flex: 1,
     fontSize: 14,
-    color: '#1E3A8A',
+    color: theme.colors.textPrimary,
     lineHeight: 20,
   },
   footer: {
-    flexDirection: 'row',
+    flexDirection: 'row' as const,
     padding: 16,
     borderTopWidth: 1,
-    borderTopColor: '#E5E7EB',
+    borderTopColor: theme.colors.borderLight,
     gap: 12,
   },
   declineButton: {

package/src/domains/localization/scripts/translate-missing.js

@@ -3,17 +3,24 @@
 /**
  * Translate Missing Script
  * Automatically translates missing strings using Google Translate
+ * Refactored to use @umituz/react-native-google-translate package
  */
 
 import fs from 'fs';
 import path from 'path';
 import { parseTypeScriptFile, generateTypeScriptContent } from './utils/file-parser.js';
-import { getTargetLanguage, getLangDisplayName } from './utils/translation-config.js';
-import { translateObject } from './utils/translator.js';
+import { googleTranslateService } from '@umituz/react-native-google-translate/services';
 import { setupLanguages } from './setup-languages.js';
 import { syncTranslations } from './sync-translations.js';
 
 async function translateMissing(targetDir, srcDir) {
+  // Initialize the translation service
+  googleTranslateService.initialize({
+    minDelay: 100,
+    maxRetries: 3,
+    timeout: 10000,
+  });
+
   const localesDir = path.resolve(process.cwd(), targetDir);
   const enUSPath = path.join(localesDir, 'en-US.ts');
 
@@ -41,27 +48,44 @@ async function translateMissing(targetDir, srcDir) {
 
   for (const file of files) {
     const langCode = file.replace('.ts', '');
-    const targetLang = getTargetLanguage(langCode);
-    const langName = getLangDisplayName(langCode);
 
-    if (!targetLang || targetLang === 'en') continue;
+    // Skip English variants
+    const targetLang = getTargetLanguage(langCode);
+    if (!targetLang || targetLang === 'en') {
+      console.log(`⏭️ Skipping ${langCode} (English variant)`);
+      continue;
+    }
 
+    const langName = getLanguageDisplayName(langCode);
     console.log(`🌍 Translating ${langCode} (${langName})...`);
 
     const targetPath = path.join(localesDir, file);
     const target = parseTypeScriptFile(targetPath);
 
-    const stats = { count: 0, checked: 0, translatedKeys: [] };
-    await translateObject(enUS, target, targetLang, '', stats);
+    const stats = {
+      totalCount: 0,
+      successCount: 0,
+      failureCount: 0,
+      skippedCount: 0,
+      translatedKeys: [],
+    };
+
+    await googleTranslateService.translateObject(
+      enUS,
+      target,
+      targetLang,
+      '',
+      stats
+    );
 
     // Clear progress line
     process.stdout.write('\r' + ' '.repeat(80) + '\r');
 
-    if (stats.count > 0) {
+    if (stats.successCount > 0) {
       const content = generateTypeScriptContent(target, langCode);
       fs.writeFileSync(targetPath, content);
 
-      console.log(`      ✅ Successfully translated ${stats.count} keys:`);
+      console.log(`      ✅ Successfully translated ${stats.successCount} keys:`);
 
       // Detailed logging of translated keys
       const displayCount = Math.min(stats.translatedKeys.length, 15);
@@ -80,6 +104,100 @@ async function translateMissing(targetDir, srcDir) {
   console.log('\n✅ All translations completed!');
 }
 
+// Helper functions (can be replaced with package imports later)
+const LANGUAGE_MAP = {
+  'ar-SA': 'ar',
+  'bg-BG': 'bg',
+  'cs-CZ': 'cs',
+  'da-DK': 'da',
+  'de-DE': 'de',
+  'el-GR': 'el',
+  'en-AU': 'en',
+  'en-CA': 'en',
+  'en-GB': 'en',
+  'es-ES': 'es',
+  'es-MX': 'es',
+  'fi-FI': 'fi',
+  'fr-CA': 'fr',
+  'fr-FR': 'fr',
+  'hi-IN': 'hi',
+  'hr-HR': 'hr',
+  'hu-HU': 'hu',
+  'id-ID': 'id',
+  'it-IT': 'it',
+  'ja-JP': 'ja',
+  'ko-KR': 'ko',
+  'ms-MY': 'ms',
+  'nl-NL': 'nl',
+  'no-NO': 'no',
+  'pl-PL': 'pl',
+  'pt-BR': 'pt',
+  'pt-PT': 'pt',
+  'ro-RO': 'ro',
+  'ru-RU': 'ru',
+  'sk-SK': 'sk',
+  'sl-SI': 'sl',
+  'sv-SE': 'sv',
+  'th-TH': 'th',
+  'tl-PH': 'tl',
+  'tr-TR': 'tr',
+  'uk-UA': 'uk',
+  'vi-VN': 'vi',
+  'zh-CN': 'zh-CN',
+  'zh-TW': 'zh-TW',
+};
+
+const LANGUAGE_NAMES = {
+  'ar-SA': 'Arabic (Saudi Arabia)',
+  'bg-BG': 'Bulgarian',
+  'cs-CZ': 'Czech',
+  'da-DK': 'Danish',
+  'de-DE': 'German',
+  'el-GR': 'Greek',
+  'en-AU': 'English (Australia)',
+  'en-CA': 'English (Canada)',
+  'en-GB': 'English (UK)',
+  'en-US': 'English (US)',
+  'es-ES': 'Spanish (Spain)',
+  'es-MX': 'Spanish (Mexico)',
+  'fi-FI': 'Finnish',
+  'fr-CA': 'French (Canada)',
+  'fr-FR': 'French (France)',
+  'hi-IN': 'Hindi',
+  'hr-HR': 'Croatian',
+  'hu-HU': 'Hungarian',
+  'id-ID': 'Indonesian',
+  'it-IT': 'Italian',
+  'ja-JP': 'Japanese',
+  'ko-KR': 'Korean',
+  'ms-MY': 'Malay',
+  'nl-NL': 'Dutch',
+  'no-NO': 'Norwegian',
+  'pl-PL': 'Polish',
+  'pt-BR': 'Portuguese (Brazil)',
+  'pt-PT': 'Portuguese (Portugal)',
+  'ro-RO': 'Romanian',
+  'ru-RU': 'Russian',
+  'sk-SK': 'Slovak',
+  'sl-SI': 'Slovenian',
+  'sv-SE': 'Swedish',
+  'th-TH': 'Thai',
+  'tl-PH': 'Tagalog',
+  'tr-TR': 'Turkish',
+  'uk-UA': 'Ukrainian',
+  'vi-VN': 'Vietnamese',
+  'zh-CN': 'Chinese (Simplified)',
+  'zh-TW': 'Chinese (Traditional)',
+};
+
+function getTargetLanguage(langCode) {
+  return LANGUAGE_MAP[langCode];
+}
+
+function getLanguageDisplayName(code) {
+  return LANGUAGE_NAMES[code] || code;
+}
+
 const isMainModule = import.meta.url.endsWith('translate-missing.js');
 if (isMainModule) {
   const args = process.argv.slice(2).filter(arg => !arg.startsWith('--'));