@umituz/react-native-settings 4.21.19 → 4.21.20

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

@@ -1,11 +1,12 @@
+import React from "react";
 /**
  * GamificationScreen Component
  * Full gamification screen - all text via props
  * Generic for 100+ apps - NO hardcoded strings
  */
 
-import React from "react";
-import { View, ScrollView, Text, StyleSheet } from "react-native";
+import { View, ScrollView, StyleSheet } from "react-native";
+import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
 import { LevelProgress } from "../LevelProgress";
 import { StreakDisplay } from "../StreakDisplay";
 import { Header } from "./Header";
@@ -30,15 +31,24 @@ export const GamificationScreen: React.FC<GamificationScreenProps> = ({
   headerStyle,
   titleStyle,
   sectionTitleStyle,
-  accentColor = "#FFD700",
-  backgroundColor = "#0A0A0A",
-  cardBackgroundColor = "#1A1A1A",
-  textColor = "#FFFFFF",
-  subtextColor = "#888888",
+  accentColor,
+  backgroundColor,
+  cardBackgroundColor,
+  textColor,
+  subtextColor,
   headerComponent,
 }) => {
+  const tokens = useAppDesignTokens();
+  
+  // Use tokens for fallbacks
+  const finalAccentColor = accentColor || tokens.colors.primary;
+  const finalBackgroundColor = backgroundColor || tokens.colors.backgroundPrimary;
+  const finalCardBackgroundColor = cardBackgroundColor || tokens.colors.surface;
+  const finalTextColor = textColor || tokens.colors.textPrimary;
+  const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
+
   return (
-    <View style={[styles.container, { backgroundColor }, containerStyle]}>
+    <View style={[styles.container, { backgroundColor: finalBackgroundColor }, containerStyle]}>
       {headerComponent}
 
       <ScrollView
@@ -51,34 +61,34 @@ export const GamificationScreen: React.FC<GamificationScreenProps> = ({
           title={title}
           headerStyle={headerStyle}
           titleStyle={titleStyle}
-          textColor={textColor}
+          textColor={finalTextColor}
         />
 
         {/* Level Progress */}
         <View style={styles.section}>
           <LevelProgress
             {...levelProps}
-            primaryColor={accentColor}
-            backgroundColor={cardBackgroundColor}
-            textColor={textColor}
-            subtextColor={subtextColor}
+            primaryColor={finalAccentColor}
+            backgroundColor={finalCardBackgroundColor}
+            textColor={finalTextColor}
+            subtextColor={finalSubtextColor}
           />
         </View>
 
         {/* Streak (if provided) */}
         {streakProps && (
           <View style={styles.section}>
-            <Text
-              style={[styles.sectionTitle, { color: textColor }, sectionTitleStyle]}
+            <AtomicText
+              style={[styles.sectionTitle, { color: finalTextColor }, sectionTitleStyle]}
             >
               {streakTitle}
-            </Text>
+            </AtomicText>
             <StreakDisplay
               {...streakProps}
-              primaryColor={accentColor}
-              backgroundColor={cardBackgroundColor}
-              textColor={textColor}
-              subtextColor={subtextColor}
+              primaryColor={finalAccentColor}
+              backgroundColor={finalCardBackgroundColor}
+              textColor={finalTextColor}
+              subtextColor={finalSubtextColor}
             />
           </View>
         )}
@@ -87,10 +97,10 @@ export const GamificationScreen: React.FC<GamificationScreenProps> = ({
         <StatsGrid
           statsTitle={statsTitle}
           stats={stats}
-          accentColor={accentColor}
-          cardBackgroundColor={cardBackgroundColor}
-          textColor={textColor}
-          subtextColor={subtextColor}
+          accentColor={finalAccentColor}
+          cardBackgroundColor={finalCardBackgroundColor}
+          textColor={finalTextColor}
+          subtextColor={finalSubtextColor}
           sectionTitleStyle={sectionTitleStyle}
         />
 
@@ -99,10 +109,10 @@ export const GamificationScreen: React.FC<GamificationScreenProps> = ({
           achievementsTitle={achievementsTitle}
           achievements={achievements}
           emptyAchievementsText={emptyAchievementsText}
-          accentColor={accentColor}
-          cardBackgroundColor={cardBackgroundColor}
-          textColor={textColor}
-          subtextColor={subtextColor}
+          accentColor={finalAccentColor}
+          cardBackgroundColor={finalCardBackgroundColor}
+          textColor={finalTextColor}
+          subtextColor={finalSubtextColor}
           sectionTitleStyle={sectionTitleStyle}
         />
       </ScrollView>

package/src/domains/gamification/components/LevelProgress.tsx

@@ -4,7 +4,8 @@
  */
 
 import React from "react";
-import { View, Text, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+import { useAppDesignTokens, AtomicText, withAlpha } from "@umituz/react-native-design-system";
 
 export interface LevelProgressProps {
   level: number;
@@ -13,7 +14,6 @@ export interface LevelProgressProps {
   pointsToNext: number;
   progress: number;
   showPoints?: boolean;
-  // Customization
   containerStyle?: ViewStyle;
   titleStyle?: TextStyle;
   subtitleStyle?: TextStyle;
@@ -21,7 +21,6 @@ export interface LevelProgressProps {
   progressFillStyle?: ViewStyle;
   badgeStyle?: ViewStyle;
   badgeTextStyle?: TextStyle;
-  // Colors (design system integration)
   primaryColor?: string;
   secondaryColor?: string;
   backgroundColor?: string;
@@ -43,38 +42,46 @@ export const LevelProgress: React.FC<LevelProgressProps> = ({
   progressFillStyle,
   badgeStyle,
   badgeTextStyle,
-  primaryColor = "#FFD700",
-  secondaryColor = "#2A2A2A",
-  backgroundColor = "#1A1A1A",
-  textColor = "#FFFFFF",
-  subtextColor = "#888888",
+  primaryColor,
+  secondaryColor,
+  backgroundColor,
+  textColor,
+  subtextColor,
 }) => {
+  const tokens = useAppDesignTokens();
+  
+  const finalPrimaryColor = primaryColor || tokens.colors.primary;
+  const finalSecondaryColor = secondaryColor || tokens.colors.surfaceSecondary;
+  const finalBackgroundColor = backgroundColor || tokens.colors.surface;
+  const finalTextColor = textColor || tokens.colors.textPrimary;
+  const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
+
   return (
-    <View style={[styles.container, { backgroundColor }, containerStyle]}>
+    <View style={[styles.container, { backgroundColor: finalBackgroundColor }, containerStyle]}>
       <View style={styles.header}>
         <View style={styles.titleSection}>
-          <Text style={[styles.levelTitle, { color: textColor }, titleStyle]}>
+          <AtomicText style={[styles.levelTitle, { color: finalTextColor }, titleStyle]}>
             {levelTitle}
-          </Text>
+          </AtomicText>
           {showPoints && (
-            <Text style={[styles.subtitle, { color: subtextColor }, subtitleStyle]}>
+            <AtomicText style={[styles.subtitle, { color: finalSubtextColor }, subtitleStyle]}>
               {points} / {points + pointsToNext}
-            </Text>
+            </AtomicText>
           )}
         </View>
 
-        <View style={[styles.badge, { backgroundColor: `${primaryColor}20`, borderColor: `${primaryColor}40` }, badgeStyle]}>
-          <Text style={[styles.badgeText, { color: primaryColor }, badgeTextStyle]}>
+        <View style={[styles.badge, { backgroundColor: withAlpha(finalPrimaryColor, 0.2), borderColor: withAlpha(finalPrimaryColor, 0.4) }, badgeStyle]}>
+          <AtomicText style={[styles.badgeText, { color: finalPrimaryColor }, badgeTextStyle]}>
             {level}
-          </Text>
+          </AtomicText>
         </View>
       </View>
 
-      <View style={[styles.progressBar, { backgroundColor: secondaryColor }, progressBarStyle]}>
+      <View style={[styles.progressBar, { backgroundColor: finalSecondaryColor }, progressBarStyle]}>
         <View
           style={[
             styles.progressFill,
-            { width: `${Math.min(100, progress)}%`, backgroundColor: primaryColor },
+            { width: `${Math.min(100, progress)}%`, backgroundColor: finalPrimaryColor },
             progressFillStyle,
           ]}
         />

package/src/domains/gamification/components/PointsBadge.tsx

@@ -4,15 +4,14 @@
  */
 
 import React from "react";
-import { View, Text, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+import { useAppDesignTokens, AtomicText, withAlpha } from "@umituz/react-native-design-system";
 
 export interface PointsBadgeProps {
   points: number;
   icon?: React.ReactNode;
-  // Customization
   containerStyle?: ViewStyle;
   textStyle?: TextStyle;
-  // Colors
   backgroundColor?: string;
   textColor?: string;
   borderColor?: string;
@@ -23,22 +22,27 @@ export const PointsBadge: React.FC<PointsBadgeProps> = ({
   icon,
   containerStyle,
   textStyle,
-  backgroundColor = "#FFD70020",
-  textColor = "#FFD700",
-  borderColor = "#FFD70040",
+  backgroundColor,
+  textColor,
+  borderColor,
 }) => {
+  const tokens = useAppDesignTokens();
+  const finalTextColor = textColor || tokens.colors.primary;
+  const finalBackgroundColor = backgroundColor || withAlpha(finalTextColor, 0.1);
+  const finalBorderColor = borderColor || withAlpha(finalTextColor, 0.2);
+
   return (
     <View
       style={[
         styles.container,
-        { backgroundColor, borderColor },
+        { backgroundColor: finalBackgroundColor, borderColor: finalBorderColor },
         containerStyle,
       ]}
     >
       {icon}
-      <Text style={[styles.text, { color: textColor }, textStyle]}>
+      <AtomicText style={[styles.text, { color: finalTextColor }, textStyle]}>
         {points}
-      </Text>
+      </AtomicText>
     </View>
   );
 };

package/src/domains/gamification/components/StatsCard.tsx

@@ -4,18 +4,17 @@
  */
 
 import React from "react";
-import { View, Text, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+import { useAppDesignTokens, AtomicText, withAlpha } from "@umituz/react-native-design-system";
 
 export interface StatsCardProps {
   value: number;
   label: string;
   icon: React.ReactNode;
   suffix?: string;
-  // Customization
   containerStyle?: ViewStyle;
   valueStyle?: TextStyle;
   labelStyle?: TextStyle;
-  // Colors
   accentColor?: string;
   backgroundColor?: string;
   textColor?: string;
@@ -30,27 +29,34 @@ export const StatsCard: React.FC<StatsCardProps> = ({
   containerStyle,
   valueStyle,
   labelStyle,
-  accentColor = "#FFD700",
-  backgroundColor = "#1A1A1A",
-  textColor = "#FFFFFF",
-  subtextColor = "#888888",
+  accentColor,
+  backgroundColor,
+  textColor,
+  subtextColor,
 }) => {
+  const tokens = useAppDesignTokens();
+  
+  const finalAccentColor = accentColor || tokens.colors.primary;
+  const finalBackgroundColor = backgroundColor || tokens.colors.surface;
+  const finalTextColor = textColor || tokens.colors.textPrimary;
+  const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
+
   return (
-    <View style={[styles.container, { backgroundColor }, containerStyle]}>
-      <View style={[styles.iconContainer, { backgroundColor: `${accentColor}15` }]}>
+    <View style={[styles.container, { backgroundColor: finalBackgroundColor }, containerStyle]}>
+      <View style={[styles.iconContainer, { backgroundColor: withAlpha(finalAccentColor, 0.15) }]}>
         {icon}
       </View>
       <View style={styles.valueRow}>
-        <Text style={[styles.value, { color: textColor }, valueStyle]}>
+        <AtomicText style={[styles.value, { color: finalTextColor }, valueStyle]}>
           {value}
-        </Text>
+        </AtomicText>
         {suffix && (
-          <Text style={[styles.suffix, { color: subtextColor }]}>{suffix}</Text>
+          <AtomicText style={[styles.suffix, { color: finalSubtextColor }]}>{suffix}</AtomicText>
         )}
       </View>
-      <Text style={[styles.label, { color: subtextColor }, labelStyle]}>
+      <AtomicText style={[styles.label, { color: finalSubtextColor }, labelStyle]}>
         {label}
-      </Text>
+      </AtomicText>
     </View>
   );
 };

package/src/domains/gamification/components/StreakDisplay.tsx

@@ -4,20 +4,19 @@
  */
 
 import React from "react";
-import { View, Text, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+import { View, StyleSheet, type ViewStyle, type TextStyle } from "react-native";
+import { useAppDesignTokens, AtomicText, withAlpha } from "@umituz/react-native-design-system";
 
 export interface StreakDisplayProps {
   current: number;
   longest: number;
-  currentLabel: string; // e.g., "Current Streak"
-  bestLabel: string; // e.g., "Best"
-  daysLabel: string; // e.g., "days"
+  currentLabel: string;
+  bestLabel: string;
+  daysLabel: string;
   icon?: React.ReactNode;
-  // Customization
   containerStyle?: ViewStyle;
   numberStyle?: TextStyle;
   labelStyle?: TextStyle;
-  // Colors
   primaryColor?: string;
   backgroundColor?: string;
   textColor?: string;
@@ -34,35 +33,42 @@ export const StreakDisplay: React.FC<StreakDisplayProps> = ({
   containerStyle,
   numberStyle,
   labelStyle,
-  primaryColor = "#FF6B35",
-  backgroundColor = "#1A1A1A",
-  textColor = "#FFFFFF",
-  subtextColor = "#888888",
+  primaryColor,
+  backgroundColor,
+  textColor,
+  subtextColor,
 }) => {
+  const tokens = useAppDesignTokens();
+  
+  const finalPrimaryColor = primaryColor || tokens.colors.primary;
+  const finalBackgroundColor = backgroundColor || tokens.colors.surface;
+  const finalTextColor = textColor || tokens.colors.textPrimary;
+  const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
+
   return (
-    <View style={[styles.container, { backgroundColor }, containerStyle]}>
+    <View style={[styles.container, { backgroundColor: finalBackgroundColor }, containerStyle]}>
       <View style={styles.mainStreak}>
         {icon && <View style={styles.iconContainer}>{icon}</View>}
         <View style={styles.streakInfo}>
-          <Text style={[styles.number, { color: primaryColor }, numberStyle]}>
+          <AtomicText style={[styles.number, { color: finalPrimaryColor }, numberStyle]}>
             {current}
-          </Text>
-          <Text style={[styles.label, { color: subtextColor }, labelStyle]}>
+          </AtomicText>
+          <AtomicText style={[styles.label, { color: finalSubtextColor }, labelStyle]}>
             {daysLabel}
-          </Text>
+          </AtomicText>
         </View>
-        <Text style={[styles.currentLabel, { color: textColor }]}>
+        <AtomicText style={[styles.currentLabel, { color: finalTextColor }]}>
           {currentLabel}
-        </Text>
+        </AtomicText>
       </View>
 
-      <View style={[styles.bestStreak, { backgroundColor: `${primaryColor}20` }]}>
-        <Text style={[styles.bestLabel, { color: subtextColor }]}>
+      <View style={[styles.bestStreak, { backgroundColor: withAlpha(finalPrimaryColor, 0.2) }]}>
+        <AtomicText style={[styles.bestLabel, { color: finalSubtextColor }]}>
           {bestLabel}
-        </Text>
-        <Text style={[styles.bestNumber, { color: primaryColor }]}>
+        </AtomicText>
+        <AtomicText style={[styles.bestNumber, { color: finalPrimaryColor }]}>
           {longest}
-        </Text>
+        </AtomicText>
       </View>
     </View>
   );

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ViewStyle } from 'react-native';
-import { useNavigation } from '@react-navigation/native';
+import { useAppNavigation } from '@umituz/react-native-design-system';
 import { LegalConfig } from '../../domain/entities/LegalConfig';
 import { SettingsItemCard } from '../../../../presentation/components/SettingsItemCard';
 
@@ -21,7 +21,7 @@ export const LegalSection: React.FC<LegalSectionProps> = ({
     description: propsDescription,
     sectionTitle: propsSectionTitle,
 }) => {
-    const navigation = useNavigation();
+    const navigation = useAppNavigation();
 
     const route = config?.route || config?.defaultRoute || 'Legal';
     const title = propsTitle || config?.title;

package/src/domains/notifications/presentation/components/NotificationsSection.tsx

@@ -6,11 +6,9 @@
 import React, { useCallback, useMemo } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
 import { View, TouchableOpacity, StyleSheet } from 'react-native';
-import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { AtomicText, AtomicIcon, useAppNavigation } from '@umituz/react-native-design-system';
 import { useAppDesignTokens } from '@umituz/react-native-design-system';
 // @ts-ignore - Optional peer dependency
-import { useNavigation } from '@react-navigation/native';
-// @ts-ignore - Optional peer dependency
 import { useLocalization } from '@umituz/react-native-localization';
 
 export interface NotificationsSectionConfig {
@@ -29,7 +27,7 @@ export const NotificationsSection: React.FC<NotificationsSectionProps> = ({
   config,
   containerStyle,
 }) => {
-  const navigation = useNavigation();
+  const navigation = useAppNavigation();
   const { t } = useLocalization();
   const tokens = useAppDesignTokens();
   const styles = useMemo(() => createStyles(tokens), [tokens]);

package/src/domains/notifications/presentation/screens/NotificationSettingsScreen.tsx

@@ -5,14 +5,13 @@
 
 import React from 'react';
 import { View } from 'react-native';
-// @ts-ignore - Optional peer dependency
-import { useNavigation } from '@react-navigation/native';
 import { 
   AtomicCard, 
   ScreenLayout, 
   AtomicSpinner,
   NavigationHeader,
-  useAppDesignTokens
+  useAppDesignTokens,
+  useAppNavigation
 } from '@umituz/react-native-design-system';
 import { useLocalization } from '@umituz/react-native-localization';
 import { QuietHoursCard } from '../../quietHours/presentation/components/QuietHoursCard';
@@ -38,7 +37,7 @@ export const NotificationSettingsScreen: React.FC<NotificationSettingsScreenProp
   quietHoursTranslations,
   onHapticFeedback,
 }) => {
-  const navigation = useNavigation();
+  const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
   const { t } = useLocalization();
   const styles = createStyles(tokens);

package/src/domains/rating/presentation/components/StarRating.tsx

@@ -27,8 +27,8 @@ export const StarRating: React.FC<StarRatingProps> = ({
     const styles = getStyles(tokens);
     const [internalRating, setInternalRating] = useState(rating);
 
-    const filledColor = activeColor || tokens.colors.warning || "#FFD700";
-    const emptyColor = inactiveColor || tokens.colors.border || "#E0E0E0";
+    const filledColor = activeColor || tokens.colors.warning;
+    const emptyColor = inactiveColor || tokens.colors.borderLight;
     
     // Scale the size
     const responsiveSize = size;