@umituz/react-native-settings 4.23.82 → 4.23.84

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.23.82",
+  "version": "4.23.84",
   "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",

package/src/domains/disclaimer/presentation/screens/DisclaimerScreen.tsx

@@ -14,7 +14,13 @@
 
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
-import { useAppDesignTokens, withAlpha, ScreenLayout } from '@umituz/react-native-design-system';
+import { 
+  useAppDesignTokens, 
+  withAlpha, 
+  ScreenLayout, 
+  useAppNavigation, 
+  NavigationHeader 
+} from '@umituz/react-native-design-system';
 import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
 import type { IconName } from '@umituz/react-native-design-system';
 import { useLocalization } from '../../../localization';
@@ -46,12 +52,20 @@ export const DisclaimerScreen: React.FC<DisclaimerScreenProps> = ({
   const displayTitle = title || t(titleKey);
   const displayContent = content || t(contentKey);
 
+  const navigation = useAppNavigation();
+
   return (
     <ScreenLayout
       scrollable={true}
       edges={['bottom']}
       contentContainerStyle={styles.scrollContent}
       hideScrollIndicator={false}
+      header={
+        <NavigationHeader
+          title={displayTitle}
+          onBackPress={() => navigation.goBack()}
+        />
+      }
     >
       {/* Icon Header */}
       <View style={styles.iconHeader}>

package/src/domains/faqs/presentation/screens/FAQScreen.tsx

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from 'react';
 import { View, ScrollView, StyleSheet, ViewStyle, TextStyle, useWindowDimensions } from 'react-native';
-import { useAppDesignTokens, AtomicText, ScreenLayout, getContentMaxWidth } from '@umituz/react-native-design-system';
+import { useAppDesignTokens, AtomicText, ScreenLayout, getContentMaxWidth, NavigationHeader, useAppNavigation } from '@umituz/react-native-design-system';
 import { FAQCategory } from '../../domain/entities/FAQEntity';
 import { useFAQSearch } from '../hooks/useFAQSearch';
 import { useFAQExpansion } from '../hooks/useFAQExpansion';
@@ -45,6 +45,7 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
   renderHeader,
   styles: customStyles,
 }) => {
+  const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
   const { width: windowWidth } = useWindowDimensions();
   const contentMaxWidth = useMemo(() => getContentMaxWidth(windowWidth), [windowWidth]);
@@ -67,6 +68,21 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
     [tokens]
   );
 
+  const handleBack = () => {
+    if (onBack) {
+      onBack();
+    } else {
+      navigation.goBack();
+    }
+  };
+
+  const header = renderHeader ? renderHeader({ onBack: handleBack }) : (
+    <NavigationHeader
+      title={headerTitle}
+      onBackPress={handleBack}
+    />
+  );
+
   const renderContent = () => {
     if (searchQuery && !hasResults) {
       return (
@@ -81,13 +97,6 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
     return (
       <View style={{ flex: 1 }}>
         <View style={[styles.header, customStyles?.header]}>
-          <AtomicText
-            type="headlineMedium"
-            color="textPrimary"
-            style={{ marginBottom: tokens.spacing.md, fontWeight: '700' }}
-          >
-            {headerTitle}
-          </AtomicText>
           <FAQSearchBar
             value={searchQuery}
             onChangeText={setSearchQuery}
@@ -116,23 +125,16 @@ export const FAQScreen: React.FC<FAQScreenProps> = ({
     );
   };
 
-  if (renderHeader && onBack) {
-    return (
-      <View style={{ flex: 1, backgroundColor: tokens.colors.backgroundPrimary }}>
-        <View style={[styles.container, customStyles?.container]}>
-          <View style={{ alignSelf: 'center', width: '100%', maxWidth: contentMaxWidth }}>
-            {renderHeader({ onBack })}
-          </View>
-          {renderContent()}
-        </View>
-      </View>
-    );
-  }
-
   return (
-    <ScreenLayout edges={['bottom']} scrollable={false}>
+    <ScreenLayout 
+      edges={['bottom']} 
+      scrollable={false}
+      header={header}
+    >
       <View style={[styles.container, customStyles?.container]}>
-        {renderContent()}
+        <View style={{ alignSelf: 'center', width: '100%', maxWidth: contentMaxWidth, flex: 1 }}>
+          {renderContent()}
+        </View>
       </View>
     </ScreenLayout>
   );

package/src/domains/feedback/presentation/components/FeedbackForm.styles.ts

@@ -0,0 +1,51 @@
+import { StyleSheet } from "react-native";
+import type { useAppDesignTokens } from "@umituz/react-native-design-system";
+
+export const getFeedbackFormStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: {
+        width: "100%",
+    },
+    typeContainer: {
+        marginBottom: 24,
+    },
+    typeScroll: {
+        gap: 8,
+    },
+    typeButton: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingHorizontal: 16,
+        paddingVertical: 8,
+        borderRadius: 20,
+        borderWidth: 1,
+        gap: 6,
+    },
+    ratingContainer: {
+        alignItems: "center",
+        marginBottom: 24,
+    },
+    stars: {
+        flexDirection: "row",
+        gap: 8,
+    },
+    starButton: {
+        padding: 4,
+    },
+    inputContainer: {
+        marginBottom: 24,
+    },
+    textArea: {
+        textAlignVertical: "top",
+        minHeight: 120,
+        borderWidth: 1,
+        borderRadius: 8,
+        padding: 12,
+    },
+    errorText: {
+        marginTop: 8,
+    },
+    submitButton: {
+        width: "100%",
+    },
+});

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

@@ -8,6 +8,8 @@ import { View, StyleSheet, TouchableOpacity, ScrollView, TextInput } from "react
 import { useAppDesignTokens, AtomicText, AtomicButton, AtomicIcon } from "@umituz/react-native-design-system";
 import type { FeedbackType, FeedbackRating } from "../../domain/entities/FeedbackEntity";
 
+import { getFeedbackFormStyles as getStyles } from "./FeedbackForm.styles";
+
 export interface FeedbackFormProps {
     onSubmit: (data: { type: FeedbackType; rating: FeedbackRating; description: string; title: string }) => Promise<void>;
     texts: {
@@ -151,6 +153,7 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
                             color: tokens.colors.textPrimary,
                             backgroundColor: tokens.colors.surface,
                             borderColor: error ? tokens.colors.error : tokens.colors.border,
+                            fontSize: tokens.typography.bodyMedium.fontSize,
                         }
                     ]}
                 />
@@ -176,52 +179,3 @@ export const FeedbackForm: React.FC<FeedbackFormProps> = ({
     );
 };
 
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
-  StyleSheet.create({
-    container: {
-        width: "100%",
-    },
-    typeContainer: {
-        marginBottom: 24,
-    },
-    typeScroll: {
-        gap: 8,
-    },
-    typeButton: {
-        flexDirection: "row",
-        alignItems: "center",
-        paddingHorizontal: 16,
-        paddingVertical: 8,
-        borderRadius: 20,
-        borderWidth: 1,
-        gap: 6,
-    },
-    ratingContainer: {
-        alignItems: "center",
-        marginBottom: 24,
-    },
-    stars: {
-        flexDirection: "row",
-        gap: 8,
-    },
-    starButton: {
-        padding: 4,
-    },
-    inputContainer: {
-        marginBottom: 24,
-    },
-    textArea: {
-        textAlignVertical: "top",
-        minHeight: 120,
-        borderWidth: 1,
-        borderRadius: 8,
-        padding: 12,
-        fontSize: tokens.typography.bodyMedium.fontSize,
-    },
-    errorText: {
-        marginTop: 8,
-    },
-    submitButton: {
-        width: "100%",
-    },
-});

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

@@ -34,34 +34,31 @@ export const FeedbackModal: React.FC<FeedbackModalProps> = ({
     const tokens = useAppDesignTokens();
     const styles = getStyles(tokens);
 
+    const header = (
+        <NavigationHeader
+            title={title || ""}
+            subtitle={subtitle}
+            rightElement={
+                <TouchableOpacity
+                    onPress={onClose}
+                    style={[styles.closeButton, { backgroundColor: tokens.colors.surfaceVariant }]}
+                >
+                    <AtomicIcon name="close" size="sm" color="onSurface" />
+                </TouchableOpacity>
+            }
+        />
+    );
+
     return (
         <BaseModal visible={visible} onClose={onClose}>
             <ScreenLayout
+                header={header}
                 scrollable={true}
                 edges={[]}
                 keyboardAvoiding={true}
                 contentContainerStyle={styles.content}
                 hideScrollIndicator={false}
             >
-                <View style={[styles.header, { borderBottomColor: tokens.colors.border }]}>
-                    <View style={styles.headerText}>
-                        <AtomicText type="headlineSmall" color="textPrimary">
-                            {title}
-                        </AtomicText>
-                        {subtitle && (
-                            <AtomicText type="bodySmall" color="textSecondary" style={{ marginTop: 4 }}>
-                                {subtitle}
-                            </AtomicText>
-                        )}
-                    </View>
-                    <TouchableOpacity
-                        onPress={onClose}
-                        style={[styles.closeButton, { backgroundColor: tokens.colors.surfaceVariant }]}
-                    >
-                        <AtomicIcon name="close" size="sm" color="onSurface" />
-                    </TouchableOpacity>
-                </View>
-
                 <FeedbackForm
                     onSubmit={onSubmit}
                     initialType={initialType}

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

@@ -6,10 +6,9 @@
 
 import React from "react";
 import { View, ScrollView } from "react-native";
-import { useAppDesignTokens, AtomicText } from "@umituz/react-native-design-system";
+import { useAppDesignTokens, AtomicText, ScreenLayout, NavigationHeader, useAppNavigation } from "@umituz/react-native-design-system";
 import { LevelProgress } from "../LevelProgress";
 import { StreakDisplay } from "../StreakDisplay";
-import { Header } from "./Header";
 import { StatsGrid } from "./StatsGrid";
 import { AchievementsList } from "./AchievementsList";
 import { styles } from "./styles";
@@ -39,6 +38,7 @@ export const GamificationScreenInner: React.FC<GamificationScreenProps> = ({
   subtextColor,
   headerComponent,
 }) => {
+  const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
 
   // Use tokens for fallbacks
@@ -48,75 +48,72 @@ export const GamificationScreenInner: React.FC<GamificationScreenProps> = ({
   const finalTextColor = textColor || tokens.colors.textPrimary;
   const finalSubtextColor = subtextColor || tokens.colors.textSecondary;
 
+  const header = (
+    <NavigationHeader
+      title={title}
+      onBackPress={() => navigation.goBack()}
+    />
+  );
+
   return (
-    <View style={[styles.container, { backgroundColor: finalBackgroundColor }, containerStyle]}>
+    <ScreenLayout
+      header={header}
+      contentContainerStyle={styles.scrollContent}
+      hideScrollIndicator={false}
+    >
       {headerComponent}
 
-      <ScrollView
-        style={styles.scrollView}
-        contentContainerStyle={styles.scrollContent}
-        showsVerticalScrollIndicator={false}
-      >
-        {/* Header */}
-        <Header
-          title={title}
-          headerStyle={headerStyle}
-          titleStyle={titleStyle}
+      {/* Level Progress */}
+      <View style={styles.section}>
+        <LevelProgress
+          {...levelProps}
+          primaryColor={finalAccentColor}
+          backgroundColor={finalCardBackgroundColor}
           textColor={finalTextColor}
+          subtextColor={finalSubtextColor}
         />
+      </View>
 
-        {/* Level Progress */}
+      {/* Streak (if provided) */}
+      {streakProps && (
         <View style={styles.section}>
-          <LevelProgress
-            {...levelProps}
+          <AtomicText
+            style={[styles.sectionTitle, { color: finalTextColor }, sectionTitleStyle]}
+          >
+            {streakTitle}
+          </AtomicText>
+          <StreakDisplay
+            {...streakProps}
             primaryColor={finalAccentColor}
             backgroundColor={finalCardBackgroundColor}
             textColor={finalTextColor}
             subtextColor={finalSubtextColor}
           />
         </View>
+      )}
 
-        {/* Streak (if provided) */}
-        {streakProps && (
-          <View style={styles.section}>
-            <AtomicText
-              style={[styles.sectionTitle, { color: finalTextColor }, sectionTitleStyle]}
-            >
-              {streakTitle}
-            </AtomicText>
-            <StreakDisplay
-              {...streakProps}
-              primaryColor={finalAccentColor}
-              backgroundColor={finalCardBackgroundColor}
-              textColor={finalTextColor}
-              subtextColor={finalSubtextColor}
-            />
-          </View>
-        )}
-
-        {/* Stats Grid */}
-        <StatsGrid
-          statsTitle={statsTitle}
-          stats={stats}
-          accentColor={finalAccentColor}
-          cardBackgroundColor={finalCardBackgroundColor}
-          textColor={finalTextColor}
-          subtextColor={finalSubtextColor}
-          sectionTitleStyle={sectionTitleStyle}
-        />
+      {/* Stats Grid */}
+      <StatsGrid
+        statsTitle={statsTitle}
+        stats={stats}
+        accentColor={finalAccentColor}
+        cardBackgroundColor={finalCardBackgroundColor}
+        textColor={finalTextColor}
+        subtextColor={finalSubtextColor}
+        sectionTitleStyle={sectionTitleStyle}
+      />
 
-        {/* Achievements */}
-        <AchievementsList
-          achievementsTitle={achievementsTitle}
-          achievements={achievements}
-          emptyAchievementsText={emptyAchievementsText}
-          accentColor={finalAccentColor}
-          cardBackgroundColor={finalCardBackgroundColor}
-          textColor={finalTextColor}
-          subtextColor={finalSubtextColor}
-          sectionTitleStyle={sectionTitleStyle}
-        />
-      </ScrollView>
-    </View>
+      {/* Achievements */}
+      <AchievementsList
+        achievementsTitle={achievementsTitle}
+        achievements={achievements}
+        emptyAchievementsText={emptyAchievementsText}
+        accentColor={finalAccentColor}
+        cardBackgroundColor={finalCardBackgroundColor}
+        textColor={finalTextColor}
+        subtextColor={finalSubtextColor}
+        sectionTitleStyle={sectionTitleStyle}
+      />
+    </ScreenLayout>
   );
 };

package/src/domains/legal/presentation/screens/LegalContentScreen.tsx

@@ -9,6 +9,7 @@ import { AtomicText, AtomicButton } from "@umituz/react-native-design-system";
 import { UrlHandlerService } from "../../domain/services/UrlHandlerService";
 import { ContentValidationService } from "../../domain/services/ContentValidationService";
 import { StyleCacheService } from "../../domain/services/StyleCacheService";
+import { useAppNavigation, NavigationHeader } from "@umituz/react-native-design-system";
 
 export interface LegalContentScreenProps {
   content?: string;
@@ -34,6 +35,7 @@ export const LegalContentScreen: React.FC<LegalContentScreenProps> = React.memo(
   createStyles,
 }) => {
   const tokens = useAppDesignTokens();
+  const navigation = useAppNavigation();
 
   const styles = React.useMemo(() => {
     const cacheKey = StyleCacheService.createTokenCacheKey(tokens);
@@ -101,17 +103,15 @@ export const LegalContentScreen: React.FC<LegalContentScreenProps> = React.memo(
       testID={testID}
       scrollable={true}
       hideScrollIndicator={false}
+      header={
+        <NavigationHeader
+          title={title}
+          onBackPress={() => navigation.goBack()}
+        />
+      }
       contentContainerStyle={styles.scrollContent}
     >
       <View style={styles.content}>
-        <AtomicText
-          type="headlineLarge"
-          color="primary"
-          style={styles.title}
-        >
-          {title}
-        </AtomicText>
-
         {contentSection}
       </View>
     </ScreenLayout>

package/src/domains/legal/presentation/screens/LegalScreen.tsx

@@ -6,7 +6,7 @@
  */
 
 import React from "react";
-import { ScreenLayout } from "@umituz/react-native-design-system";
+import { ScreenLayout, NavigationHeader, useAppNavigation } from "@umituz/react-native-design-system";
 import { LegalScreenHeader } from "../components/LegalScreenHeader";
 import { LegalDocumentsList } from "../components/LegalDocumentsList";
 
@@ -45,10 +45,21 @@ export const LegalScreen: React.FC<LegalScreenProps> = React.memo((props) => {
     testID = "legal-screen",
   } = props;
 
+  const navigation = useAppNavigation();
+
   return (
-    <ScreenLayout testID={testID} hideScrollIndicator>
+    <ScreenLayout
+      testID={testID}
+      hideScrollIndicator
+      header={
+        <NavigationHeader
+          title={title || ""}
+          onBackPress={() => navigation.goBack()}
+        />
+      }
+    >
       <LegalScreenHeader title={title} description={description} />
-      
+
       <LegalDocumentsList
         documentsHeader={documentsHeader}
         privacyTitle={privacyTitle}

package/src/domains/notifications/index.ts

@@ -110,7 +110,7 @@ export { ReminderItem } from './reminders/presentation/components/ReminderItem';
 export type { ReminderItemProps, ReminderItemTranslations } from './reminders/presentation/components/ReminderItem';
 
 export { ReminderForm } from './reminders/presentation/components/ReminderForm';
-export type { ReminderFormProps, ReminderFormTranslations } from './reminders/presentation/components/ReminderForm';
+export type { ReminderFormProps, ReminderFormTranslations } from './reminders/presentation/components/ReminderForm.constants';
 
 export { FormButton } from './reminders/presentation/components/FormButton';
 export type { FormButtonProps } from './reminders/presentation/components/FormButton';

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

@@ -7,11 +7,21 @@
 
 import React, { useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
-import { AtomicIcon, AtomicCard, AtomicText, ScreenLayout, BASE_TOKENS, AtomicSpinner, type IconColor } from '@umituz/react-native-design-system';
+import { 
+  AtomicIcon, 
+  AtomicCard, 
+  AtomicText, 
+  ScreenLayout, 
+  BASE_TOKENS, 
+  AtomicSpinner, 
+  type IconColor, 
+  NavigationHeader, 
+  useAppNavigation,
+  useAppDesignTokens,
+  type DesignTokens
+} from '@umituz/react-native-design-system';
 import { Switch } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-design-system';
 import { useNotificationSettings } from '../../infrastructure/hooks/useNotificationSettings';
-import type { DesignTokens } from '@umituz/react-native-design-system';
 
 export interface NotificationsScreenProps {
   translations: {
@@ -30,13 +40,21 @@ export const NotificationsScreen: React.FC<NotificationsScreenProps> = ({
   iconColor = 'primary',
   testID = 'notifications-screen',
 }) => {
+  const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
   const styles = useMemo(() => getStyles(tokens), [tokens]);
   const { notificationsEnabled, setNotificationsEnabled, isLoading } = useNotificationSettings();
 
+  const header = (
+    <NavigationHeader
+      title={translations.title}
+      onBackPress={() => navigation.goBack()}
+    />
+  );
+
   if (isLoading) {
     return (
-      <ScreenLayout testID={testID}>
+      <ScreenLayout testID={testID} header={header}>
         <AtomicSpinner
           size="lg"
           color="primary"
@@ -48,34 +66,43 @@ export const NotificationsScreen: React.FC<NotificationsScreenProps> = ({
   }
 
   return (
-    <ScreenLayout testID={testID} hideScrollIndicator>
-      <AtomicCard style={styles.card}>
-        <View style={styles.settingItem}>
-          <View style={styles.iconContainer}>
-            <AtomicIcon name={iconName} size="lg" color={iconColor as IconColor} />
+    <ScreenLayout 
+      testID={testID} 
+      hideScrollIndicator 
+      header={header}
+    >
+      <View style={styles.content}>
+        <AtomicCard style={styles.card}>
+          <View style={styles.settingItem}>
+            <View style={styles.iconContainer}>
+              <AtomicIcon name={iconName} size="lg" color={iconColor as IconColor} />
+            </View>
+            <View style={styles.textContainer}>
+              <AtomicText type="bodyLarge" style={{ color: tokens.colors.textPrimary }}>
+                {translations.title}
+              </AtomicText>
+              <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary, marginTop: BASE_TOKENS.spacing.xs }}>
+                {translations.description}
+              </AtomicText>
+            </View>
+            <Switch
+              value={notificationsEnabled}
+              onValueChange={setNotificationsEnabled}
+              trackColor={{ false: tokens.colors.surfaceSecondary, true: tokens.colors.primary }}
+              thumbColor={tokens.colors.surface}
+              testID="notifications-toggle"
+            />
           </View>
-          <View style={styles.textContainer}>
-            <AtomicText type="bodyLarge" style={{ color: tokens.colors.textPrimary }}>
-              {translations.title}
-            </AtomicText>
-            <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary, marginTop: BASE_TOKENS.spacing.xs }}>
-              {translations.description}
-            </AtomicText>
-          </View>
-          <Switch
-            value={notificationsEnabled}
-            onValueChange={setNotificationsEnabled}
-            trackColor={{ false: tokens.colors.surfaceSecondary, true: tokens.colors.primary }}
-            thumbColor={tokens.colors.surface}
-            testID="notifications-toggle"
-          />
-        </View>
-      </AtomicCard>
+        </AtomicCard>
+      </View>
     </ScreenLayout>
   );
 };
 
 const getStyles = (tokens: DesignTokens) => StyleSheet.create({
+  content: {
+    padding: BASE_TOKENS.spacing.md,
+  },
   loadingContainer: {
     flex: 1,
     justifyContent: 'center',

package/src/domains/notifications/reminders/presentation/components/ReminderForm.constants.ts

@@ -0,0 +1,35 @@
+import type { Reminder, ReminderFrequency, CreateReminderInput, TimePreset } from '../../../infrastructure/services/types';
+
+export const DEFAULT_HOUR = 9;
+export const DEFAULT_MINUTE = 0;
+export const DEFAULT_WEEKDAY = 2; // Tuesday
+export const MAX_TITLE_LENGTH = 100;
+export const MAX_BODY_LENGTH = 500;
+
+export const VALID_HOUR_RANGE = { min: 0, max: 23 } as const;
+export const VALID_MINUTE_RANGE = { min: 0, max: 59 } as const;
+export const VALID_WEEKDAY_RANGE = { min: 0, max: 6 } as const;
+
+export interface ReminderFormTranslations {
+  titleLabel: string;
+  titlePlaceholder: string;
+  bodyLabel: string;
+  bodyPlaceholder: string;
+  timeLabel: string;
+  frequencyLabel: string;
+  weekdayLabel: string;
+  saveButton: string;
+  cancelButton: string;
+  customTimeLabel: string;
+  getPresetLabel: (key: string) => string;
+  getFrequencyLabel: (key: string) => string;
+  getWeekdayLabel: (key: string) => string;
+}
+
+export interface ReminderFormProps {
+  initialData?: Reminder;
+  translations: ReminderFormTranslations;
+  onSave: (data: CreateReminderInput) => void;
+  onCancel: () => void;
+  timePresets?: TimePreset[];
+}