@umituz/react-native-settings 4.23.68 → 4.23.70

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.23.68",
+  "version": "4.23.70",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -81,6 +81,7 @@
     "@umituz/react-native-sentry": "*",
     "eslint": "^8.57.0",
     "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-native": "^5.0.0",
     "expo-apple-authentication": "^8.0.8",
     "expo-auth-session": "^5.0.0",

package/src/domains/about/presentation/hooks/useAboutInfo.ts

@@ -9,7 +9,6 @@ import { AboutRepository } from '../../infrastructure/repositories/AboutReposito
 import type { UseAboutInfoOptions, UseAboutInfoReturn } from './useAboutInfo.types';
 import {
   setErrorIfMounted,
-  setLoadingIfMounted,
   initializeAppInfo,
   updateAppInfoConfig,
   updateAppInfoPartial,

package/src/domains/appearance/data/colorPalettes.ts

@@ -86,9 +86,4 @@ export const generateColorPalette = (
     name: "custom",
     colors,
   };
-};
-
-// Legacy exports for backward compatibility
-export const PRIMARY_COLORS = DEFAULT_PRIMARY_COLORS.colors;
-export const SECONDARY_COLORS = DEFAULT_SECONDARY_COLORS.colors;
-export const ACCENT_COLORS = DEFAULT_ACCENT_COLORS.colors;
+};

package/src/domains/appearance/hooks/useAppearance.ts

@@ -1,15 +1,17 @@
-import { useTheme, type ThemeMode, type CustomThemeColors } from "@umituz/react-native-design-system";
+import { useTheme, type ThemeMode as BaseThemeMode, type CustomThemeColors } from "@umituz/react-native-design-system";
+import type { ThemeMode } from "../types";
 
 export const useAppearance = () => {
   const { themeMode, customColors, defaultColors, isInitialized, setThemeMode, setCustomColors, resetToDefaults } = useTheme();
 
   return {
-    themeMode,
+    themeMode: themeMode as ThemeMode,
     customColors,
     defaultColors,
     isLoading: !isInitialized,
     setThemeMode: (mode: ThemeMode) => {
-      void setThemeMode(mode);
+      // Cast to base ThemeMode since design system doesn't support 'auto'
+      void setThemeMode(mode as BaseThemeMode);
     },
     setCustomColors: (colors: CustomThemeColors) => {
       void setCustomColors(colors);

package/src/domains/appearance/hooks/useAppearanceActions.ts

@@ -1,6 +1,7 @@
 import { useState, useCallback, useEffect, useRef } from "react";
 import { useAppearance } from "./useAppearance";
-import type { CustomThemeColors, ThemeMode } from "@umituz/react-native-design-system";
+import type { CustomThemeColors } from "@umituz/react-native-design-system";
+import type { ThemeMode } from "../types";
 
 export const useAppearanceActions = () => {
   const { themeMode, customColors, setThemeMode, setCustomColors, reset } = useAppearance();

package/src/domains/appearance/index.ts

@@ -5,5 +5,6 @@
 
 export * from './presentation/screens/AppearanceScreen';
 export * from './presentation/components';
-export * from './hooks';
+export { useAppearance } from './hooks/useAppearance';
+export { useAppearanceActions } from './hooks/useAppearanceActions';
 export * from './types';

package/src/domains/appearance/presentation/components/ColorPicker.tsx

@@ -49,7 +49,7 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
 
   // Memoize color options to prevent unnecessary re-renders
   const colorOptions = useMemo(() => {
-    return colorsMemo.map((color, index) => {
+    return colorsMemo.map((color) => {
       const isSelected = value === color;
 
       return (

package/src/domains/appearance/presentation/screens/AppearanceScreen.tsx

@@ -13,7 +13,8 @@ import {
   useAppNavigation
 } from "@umituz/react-native-design-system";
 import { useLocalization } from "../../../localization";
-import { useAppearance, useAppearanceActions } from "../../hooks";
+import { useAppearance } from "../../hooks/useAppearance";
+import { useAppearanceActions } from "../../hooks/useAppearanceActions";
 import {
   AppearanceHeader,
   ThemeModeSection,

package/src/domains/appearance/types/index.ts

@@ -5,11 +5,14 @@
  */
 
 import type {
-  ThemeMode,
+  ThemeMode as BaseThemeMode,
   CustomThemeColors,
 } from "@umituz/react-native-design-system";
 
-export type { ThemeMode, CustomThemeColors };
+// Extended theme mode to support 'auto' option
+export type ThemeMode = BaseThemeMode | 'auto';
+
+export type { CustomThemeColors };
 
 export interface AppearanceSettings {
   themeMode: ThemeMode;

package/src/domains/disclaimer/presentation/components/DisclaimerModal.tsx

@@ -69,7 +69,7 @@ export const DisclaimerModal: React.FC<DisclaimerModalProps> = ({
 };
 
 
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+const getStyles = (_tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     modalContainer: {
       flex: 1,

package/src/domains/feedback/presentation/components/FeedbackForm.tsx

@@ -7,7 +7,6 @@ import React, { useState } from "react";
 import { View, StyleSheet, TouchableOpacity, ScrollView, TextInput } from "react-native";
 import { useAppDesignTokens, AtomicText, AtomicButton, AtomicIcon } from "@umituz/react-native-design-system";
 import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
-import { useFeedbackForm } from "../hooks/useFeedbackForm";
 
 export interface FeedbackFormProps {
     onSubmit: (data: { type: FeedbackType; rating: FeedbackRating; description: string; title: string }) => Promise<void>;
@@ -35,16 +34,38 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
     const [rating, setRating] = useState<FeedbackRating>(5);
     const [description, setDescription] = useState("");
     const [title, setTitle] = useState("");
+    const [error, setError] = useState<string | null>(null);
+    const [isSubmittingLocal, setIsSubmittingLocal] = useState(false);
 
     const handleSubmit = async () => {
-        if (!description.trim()) return;
+        // Validate input
+        if (!description.trim()) {
+            setError("Please provide a description");
+            return;
+        }
 
-        await onSubmit({
-            type: selectedType,
-            rating,
-            description,
-            title: title || texts.defaultTitle(selectedType),
-        });
+        setIsSubmittingLocal(true);
+        setError(null);
+
+        try {
+            await onSubmit({
+                type: selectedType,
+                rating,
+                description,
+                title: title || texts.defaultTitle(selectedType),
+            });
+
+            // Clear form on success
+            setDescription("");
+            setTitle("");
+            setRating(5);
+        } catch (err) {
+            const errorMessage = err instanceof Error ? err.message : "Failed to submit feedback";
+            setError(errorMessage);
+            console.error("[FeedbackForm] Submission error:", err);
+        } finally {
+            setIsSubmittingLocal(false);
+        }
     };
 
     const renderRating = () => (
@@ -116,7 +137,10 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
             <View style={styles.inputContainer}>
                 <TextInput
                     value={description}
-                    onChangeText={setDescription}
+                    onChangeText={(text) => {
+                        setDescription(text);
+                        setError(null); // Clear error on input
+                    }}
                     placeholder={texts.descriptionPlaceholder}
                     placeholderTextColor={tokens.colors.textTertiary}
                     multiline
@@ -126,18 +150,27 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
                         {
                             color: tokens.colors.textPrimary,
                             backgroundColor: tokens.colors.surface,
-                            borderColor: tokens.colors.border,
+                            borderColor: error ? tokens.colors.error : tokens.colors.border,
                         }
                     ]}
                 />
+                {error && (
+                    <AtomicText
+                        type="bodySmall"
+                        color="error"
+                        style={styles.errorText}
+                    >
+                        {error}
+                    </AtomicText>
+                )}
             </View>
 
             <AtomicButton
                 onPress={handleSubmit}
-                disabled={isSubmitting || !description.trim()}
+                disabled={isSubmitting || isSubmittingLocal || !description.trim()}
                 style={styles.submitButton}
             >
-                {isSubmitting ? texts.submittingButton : texts.submitButton}
+                {(isSubmitting || isSubmittingLocal) ? texts.submittingButton : texts.submitButton}
             </AtomicButton>
         </View>
     );
@@ -185,6 +218,9 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
         padding: 12,
         fontSize: tokens.typography.bodyMedium.fontSize,
     },
+    errorText: {
+        marginTop: 8,
+    },
     submitButton: {
         width: "100%",
     },

package/src/domains/feedback/presentation/components/FeedbackModal.tsx

@@ -79,7 +79,7 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
 };
 
 
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+const getStyles = (_tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     safeArea: {
         flex: 1,

package/src/domains/gamification/components/GamificationScreen/index.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 /**
  * GamificationScreen Component
- * Full gamification screen - all text via props
+ * Full gamification screen with integrated hook
  * Generic for 100+ apps - NO hardcoded strings
  */
 
-import { View, ScrollView, StyleSheet } from "react-native";
+import { View, ScrollView } from "react-native";
 import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 import { LevelProgress } from "../LevelProgress";
 import { StreakDisplay } from "../StreakDisplay";
@@ -13,11 +13,90 @@ import { Header } from "./Header";
 import { StatsGrid } from "./StatsGrid";
 import { AchievementsList } from "./AchievementsList";
 import { styles } from "./styles";
-import type { GamificationScreenProps } from "./types";
+import type { GamificationScreenProps, GamificationConfigProps } from "./types";
+import type { Achievement } from "../../types";
 
 export type { GamificationScreenProps };
 
-export const GamificationScreen: React.FC<GamificationScreenProps> = ({
+/**
+ * GamificationScreen that accepts either detailed props OR a config object
+ * When config is provided, a hook consumer component is used
+ */
+export const GamificationScreen: React.FC<GamificationScreenProps | GamificationConfigProps> = (props) => {
+  // If config is provided, use the hook-based component
+  if ('config' in props && props.config) {
+    return <GamificationScreenWithConfig config={props.config} />;
+  }
+
+  // Otherwise, render directly with provided props
+  return <GamificationScreenInner {...(props as GamificationScreenProps)} />;
+};
+
+/**
+ * Component that uses the hook - separated to satisfy React Hooks rules
+ */
+const GamificationScreenWithConfig: React.FC<GamificationConfigProps> = ({ config }) => {
+  // Import hook here to avoid conditional hook usage
+  const { useGamification } = require("../../hooks/useGamification");
+
+  const {
+    points,
+    level,
+    streak,
+    achievements,
+  } = useGamification(config);
+
+  // Transform store achievements to UI props
+  const achievementItems = achievements.map((a: Achievement) => ({
+    ...a,
+    title: a.title,
+    description: a.description,
+    icon: a.icon,
+    isUnlocked: a.isUnlocked,
+    progress: a.progress,
+    threshold: a.threshold,
+    id: a.id,
+    type: a.type
+  }));
+
+  const screenProps: GamificationScreenProps = {
+    title: config.translations.title,
+    statsTitle: config.translations.statsTitle,
+    achievementsTitle: config.translations.achievementsTitle,
+    streakTitle: config.translations.streakTitle,
+    levelProps: {
+      level: level.currentLevel,
+      points: level.currentPoints,
+      pointsToNext: level.pointsToNext,
+      progress: level.progress,
+      levelTitle: config.translations.levelTitle,
+      showPoints: true,
+    },
+    streakProps: {
+      current: streak.current,
+      longest: streak.longest,
+      currentLabel: config.translations.currentStreak,
+      bestLabel: config.translations.bestStreak,
+      daysLabel: config.translations.days,
+    },
+    stats: [
+      {
+        label: config.translations.statsTitle,
+        value: points,
+        icon: "star",
+      },
+    ],
+    achievements: achievementItems,
+    emptyAchievementsText: config.translations.emptyAchievements,
+  };
+
+  return <GamificationScreenInner {...screenProps} />;
+};
+
+/**
+ * Internal component that renders the screen with all props
+ */
+const GamificationScreenInner: React.FC<GamificationScreenProps> = ({
   title,
   statsTitle,
   achievementsTitle,

package/src/domains/gamification/components/GamificationScreen/types.ts

@@ -9,6 +9,11 @@ import type { StatsCardProps } from "../StatsCard";
 import type { AchievementItemProps } from "../AchievementItem";
 import type { StreakDisplayProps } from "../StreakDisplay";
 import type { ViewStyle, TextStyle } from "react-native";
+import type { GamificationConfig } from "../../types";
+
+export interface GamificationConfigProps extends Partial<Omit<GamificationScreenProps, 'config'>> {
+  config: GamificationConfig;
+}
 
 export interface GamificationScreenProps {
   // Section titles (all via props)

package/src/domains/gamification/components/index.ts

@@ -11,4 +11,3 @@ export { StreakDisplay, type StreakDisplayProps } from "./StreakDisplay";
 export { StatsCard, type StatsCardProps } from "./StatsCard";
 export { AchievementItem, type AchievementItemProps } from "./AchievementItem";
 export { GamificationScreen, type GamificationScreenProps } from "./GamificationScreen/index";
-export { GamificationScreenWrapper } from "./GamificationScreenWrapper";

package/src/domains/gamification/index.ts

@@ -54,5 +54,4 @@ export {
   type AchievementItemProps,
   GamificationScreen,
   type GamificationScreenProps,
-  GamificationScreenWrapper,
 } from "./components";

package/src/domains/gamification/utils/calculations.ts

@@ -3,7 +3,7 @@
  * Pure utility functions - NO side effects
  */
 
-import type { LevelDefinition, LevelState, Achievement, AchievementDefinition } from "../types";
+import type { LevelDefinition, LevelState, AchievementDefinition } from "../types";
 
 export const calculateLevel = (
   points: number,

package/src/domains/legal/presentation/components/LegalItem.tsx

@@ -42,7 +42,7 @@ export const LegalItem: React.FC<LegalItemProps> = React.memo(({
   title,
   description,
   onPress,
-  testID,
+  testID: _testID,
 }) => {
   // Use iconName if provided, otherwise fallback to default
   const finalIcon = iconName || icon || "shield-checkmark";

package/src/domains/localization/index.ts

@@ -22,8 +22,6 @@ export type { LanguageSectionProps, LanguageSectionConfig } from './presentation
 export { default as i18n } from './infrastructure/config/i18n';
 export { I18nInitializer } from './infrastructure/config/I18nInitializer';
 export {
-  SUPPORTED_LANGUAGES,
-  LANGUAGES,
   DEFAULT_LANGUAGE,
   getLanguageByCode,
   isLanguageSupported,

package/src/domains/localization/infrastructure/components/useLanguageSwitcher.ts

@@ -17,7 +17,24 @@ export const useLanguageSwitcher = ({ onPress, disabled }: UseLanguageSwitcherPr
     const { currentLanguage } = useLocalization();
 
     const currentLang = useMemo((): Language => {
-        return languageRepository.getLanguageByCode(currentLanguage) || languageRepository.getDefaultLanguage();
+        // Double fallback to ensure we always have a valid language
+        const lang = languageRepository.getLanguageByCode(currentLanguage)
+            || languageRepository.getDefaultLanguage()
+            || languageRepository.getLanguages()[0]; // Final fallback
+
+        if (!lang) {
+            // This should never happen if repository is set up correctly
+            console.error('[useLanguageSwitcher] No valid language found. Check language repository configuration.');
+            // Return a minimal fallback language object
+            return {
+                code: 'en',
+                name: 'English',
+                nativeName: 'English',
+                flag: '🇺🇸',
+            };
+        }
+
+        return lang;
     }, [currentLanguage]);
 
     const handlePress = useCallback(() => {

package/src/domains/localization/infrastructure/config/languages.ts

@@ -3,9 +3,6 @@
  * Central export point for all language-related functionality
  */
 
-import { languageRepository } from '../repository/LanguageRepository';
-import type { Language } from '../storage/types/Language';
-
 // Re-export from DeviceLocale
 export { DEFAULT_LANGUAGE, getDeviceLocale } from './DeviceLocale';
 
@@ -20,9 +17,3 @@ export {
 
 // Re-export from LocaleMapping
 export { LOCALE_MAPPING } from './LocaleMapping';
-
-// Backward compatibility
-export const getSUPPORTED_LANGUAGES = () => languageRepository.getLanguages();
-export const getLANGUAGES = () => languageRepository.getLanguages();
-export const SUPPORTED_LANGUAGES: Language[] = languageRepository.getLanguages();
-export const LANGUAGES = SUPPORTED_LANGUAGES;

package/src/domains/localization/infrastructure/hooks/TranslationHook.ts

@@ -10,30 +10,28 @@
 import { useTranslation } from 'react-i18next';
 import i18n from '../config/i18n';
 
-export class TranslationHook {
-  /**
-   * Get translation function with proper fallbacks
-   */
-  static useTranslationFunction(): (key: string, options?: Record<string, unknown>) => string {
-    // Always call useTranslation hook (React hooks rules)
-    const translationResult = useTranslation(undefined, { i18n });
+/**
+ * Custom hook that provides translation function with proper fallbacks
+ */
+export const useTranslationFunction = (): ((key: string, options?: Record<string, unknown>) => string) => {
+  // Always call useTranslation hook (React hooks rules)
+  const translationResult = useTranslation(undefined, { i18n });
 
-    // Use react-i18next if available, otherwise fallback to direct i18n
-    if (translationResult?.t && typeof translationResult.t === 'function' && i18n.isInitialized) {
-      return (key: string, options?: Record<string, unknown>): string => {
-        const result = translationResult.t(key, options);
+  // Use react-i18next if available, otherwise fallback to direct i18n
+  if (translationResult?.t && typeof translationResult.t === 'function' && i18n.isInitialized) {
+    return (key: string, options?: Record<string, unknown>): string => {
+      const result = translationResult.t(key, options);
+      return typeof result === 'string' ? result : String(result);
+    };
+  } else {
+    return (key: string, options?: Record<string, unknown>): string => {
+      // Fallback to direct i18n.t
+      if (i18n.isInitialized && typeof i18n.t === 'function') {
+        const result = i18n.t(key, options);
         return typeof result === 'string' ? result : String(result);
-      };
-    } else {
-      return (key: string, options?: Record<string, unknown>): string => {
-        // Fallback to direct i18n.t
-        if (i18n.isInitialized && typeof i18n.t === 'function') {
-          const result = i18n.t(key, options);
-          return typeof result === 'string' ? result : String(result);
-        }
-        // Final fallback: return key
-        return key;
-      };
-    }
+      }
+      // Final fallback: return key
+      return key;
+    };
   }
-}
+};