@umituz/react-native-settings 4.23.81 → 4.23.83

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[];
+}

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

@@ -0,0 +1,22 @@
+import { StyleSheet } from 'react-native';
+import type { useAppDesignTokens } from '@umituz/react-native-design-system';
+
+export const createReminderFormStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      padding: 16,
+      backgroundColor: tokens.colors.surface,
+    },
+    section: { marginBottom: 20 },
+    label: { color: tokens.colors.textPrimary, marginBottom: 8 },
+    input: {
+      backgroundColor: tokens.colors.surfaceSecondary,
+      borderRadius: 8,
+      padding: 12,
+      fontSize: 16,
+      color: tokens.colors.textPrimary,
+    },
+    multilineInput: { minHeight: 80, textAlignVertical: 'top' },
+    buttonRow: { flexDirection: 'row', gap: 12, marginTop: 24 },
+  });

package/src/domains/notifications/reminders/presentation/components/ReminderForm.tsx

@@ -11,44 +11,20 @@ import { TimePresetSelector } from './TimePresetSelector';
 import { FrequencySelector } from './FrequencySelector';
 import { WeekdaySelector } from './WeekdaySelector';
 import { FormButton } from './FormButton';
+import { 
+  DEFAULT_HOUR, 
+  DEFAULT_MINUTE, 
+  DEFAULT_WEEKDAY, 
+  MAX_TITLE_LENGTH, 
+  MAX_BODY_LENGTH, 
+  VALID_HOUR_RANGE, 
+  VALID_MINUTE_RANGE, 
+  VALID_WEEKDAY_RANGE,
+  type ReminderFormProps,
+} from './ReminderForm.constants';
+import { createReminderFormStyles as createStyles } from './ReminderForm.styles';
 import { DEFAULT_TIME_PRESETS, FREQUENCY_OPTIONS } from '../../infrastructure/config/reminderPresets';
-import type { Reminder, ReminderFrequency, CreateReminderInput, TimePreset } from '../../../infrastructure/services/types';
-
-// Constants for magic numbers
-const DEFAULT_HOUR = 9;
-const DEFAULT_MINUTE = 0;
-const DEFAULT_WEEKDAY = 2; // Tuesday
-const MAX_TITLE_LENGTH = 100;
-const MAX_BODY_LENGTH = 500;
-
-// Validation constants
-const VALID_HOUR_RANGE = { min: 0, max: 23 } as const;
-const VALID_MINUTE_RANGE = { min: 0, max: 59 } as const;
-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[];
-}
+import type { ReminderFrequency, TimePreset } from '../../../infrastructure/services/types';
 
 export const ReminderForm: React.FC<ReminderFormProps> = ({
   initialData,
@@ -207,23 +183,3 @@ export const ReminderForm: React.FC<ReminderFormProps> = ({
     </ScrollView>
   );
 };
-
-const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
-  StyleSheet.create({
-    container: {
-      flex: 1,
-      padding: 16,
-      backgroundColor: tokens.colors.surface,
-    },
-    section: { marginBottom: 20 },
-    label: { color: tokens.colors.textPrimary, marginBottom: 8 },
-    input: {
-      backgroundColor: tokens.colors.surfaceSecondary,
-      borderRadius: 8,
-      padding: 12,
-      fontSize: 16,
-      color: tokens.colors.textPrimary,
-    },
-    multilineInput: { minHeight: 80, textAlignVertical: 'top' },
-    buttonRow: { flexDirection: 'row', gap: 12, marginTop: 24 },
-  });

package/src/domains/notifications/reminders/presentation/screens/ReminderListScreen.tsx

@@ -5,8 +5,15 @@
 
 import React, { useMemo, useCallback } from 'react';
 import { View, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
-import { AtomicText, AtomicIcon, AtomicSpinner } from '@umituz/react-native-design-system';
-import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import { 
+  AtomicText, 
+  AtomicIcon, 
+  AtomicSpinner, 
+  ScreenLayout, 
+  NavigationHeader, 
+  useAppNavigation,
+  useAppDesignTokens
+} from '@umituz/react-native-design-system';
 import { ReminderItem } from '../components/ReminderItem';
 import { useReminders, useRemindersLoading } from '../../infrastructure/storage/RemindersStore';
 import { useReminderActions } from '../../infrastructure/hooks/useReminderActions';
@@ -25,6 +32,7 @@ export const ReminderListScreen: React.FC<ReminderListScreenProps> = ({
   onEditPress,
   maxReminders = 20,
 }) => {
+  const navigation = useAppNavigation();
   const tokens = useAppDesignTokens();
   const styles = useMemo(() => createStyles(tokens), [tokens]);
 
@@ -69,32 +77,39 @@ export const ReminderListScreen: React.FC<ReminderListScreenProps> = ({
 
   const keyExtractor = useCallback((item: Reminder) => item.id, []);
 
+  const header = (
+    <NavigationHeader
+      title={translations.screenTitle}
+      onBackPress={() => navigation.goBack()}
+    />
+  );
+
   if (isLoading) {
     return (
-      <View style={[styles.loadingContainer, { backgroundColor: tokens.colors.surface }]}>
+      <ScreenLayout header={header}>
         <AtomicSpinner size="lg" color="primary" fullContainer />
-      </View>
+      </ScreenLayout>
     );
   }
 
   return (
-    <View style={{ flex: 1 }}>
+    <ScreenLayout header={header}>
       <FlatList
         data={reminders}
         renderItem={renderItem}
         keyExtractor={keyExtractor}
         ListEmptyComponent={renderEmpty}
-        contentContainerStyle={[styles.listContent, { backgroundColor: tokens.colors.surface }]}
+        contentContainerStyle={styles.listContent}
         showsVerticalScrollIndicator={false}
       />
 
       {canAddMore && (
         <TouchableOpacity style={styles.fab} onPress={onAddPress} activeOpacity={0.8}>
-          <AtomicIcon name="add" size="md" color="onSurface" />
+          <AtomicIcon name="add" size="md" color="onPrimary" />
           <AtomicText type="bodyMedium" style={styles.fabText}>{translations.addButtonLabel}</AtomicText>
         </TouchableOpacity>
       )}
-    </View>
+    </ScreenLayout>
   );
 };
 
@@ -102,7 +117,7 @@ const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
   StyleSheet.create({
     loadingContainer: { flex: 1, justifyContent: 'center', alignItems: 'center' },
     listContent: { padding: 16, paddingBottom: 100, flexGrow: 1 },
-    emptyContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 32 },
+    emptyContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', paddingHorizontal: 32, paddingTop: 100 },
     emptyIconContainer: {
       width: 80,
       height: 80,
@@ -127,5 +142,5 @@ const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
       justifyContent: 'center',
       gap: 8,
     },
-    fabText: { color: tokens.colors.surface, fontWeight: '600' },
+    fabText: { color: tokens.colors.onPrimary, fontWeight: '600' },
   });

package/src/domains/video-tutorials/presentation/screens/VideoTutorialsScreen.tsx

@@ -18,6 +18,8 @@ import {
   ScreenLayout,
   AtomicSpinner,
   AtomicText,
+  useAppNavigation,
+  NavigationHeader,
 } from "@umituz/react-native-design-system";
 import type { DesignTokens } from "@umituz/react-native-design-system";
 import type { VideoTutorial } from "../../types";
@@ -67,23 +69,32 @@ export const VideoTutorialsScreen: React.FC<VideoTutorialsScreenProps> = React.m
       [handleTutorialPress]
     );
 
+    const navigation = useAppNavigation();
+
     if (isLoading) return <AtomicSpinner size="lg" fullContainer />;
 
     const hasFeatured = featuredTutorials && featuredTutorials.length > 0;
     const hasTutorials = tutorials && tutorials.length > 0;
 
+    const header = (
+      <NavigationHeader
+        title={title}
+        onBackPress={() => navigation.goBack()}
+      />
+    );
+
     if (!hasTutorials && !hasFeatured) {
       return (
-        <View style={styles.emptyContainer}>
-          <AtomicText color="secondary" type="bodyLarge">{emptyMessage}</AtomicText>
-        </View>
+        <ScreenLayout header={header} edges={["bottom"]}>
+          <View style={styles.emptyContainer}>
+            <AtomicText color="secondary" type="bodyLarge">{emptyMessage}</AtomicText>
+          </View>
+        </ScreenLayout>
       );
     }
 
     return (
-      <ScreenLayout scrollable={false} edges={["top", "bottom"]}>
-        <AtomicText style={styles.title}>{title}</AtomicText>
-
+      <ScreenLayout header={header} scrollable={false} edges={["bottom"]}>
         {hasFeatured && (
           <View style={styles.section}>
             <AtomicText color="secondary" style={styles.sectionTitle}>{featuredTitle}</AtomicText>

package/src/presentation/components/SettingsFooter.tsx

@@ -13,9 +13,9 @@ export const SettingsFooter: React.FC<SettingsFooterProps> = ({
   appVersion,
   versionLabel,
 }) => {
-  const displayText = versionText || (appVersion && versionLabel
-    ? `${versionLabel} ${appVersion}`
-    : appVersion);
+  const displayText = versionText || (appVersion 
+    ? (versionLabel ? `${versionLabel} ${appVersion}` : `Version ${appVersion}`)
+    : undefined);
 
   if (!displayText) return null;
 

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -6,7 +6,12 @@
  */
 
 import React from "react";
-import { useAppDesignTokens, StackNavigator, type StackScreen, type StackNavigatorConfig } from "@umituz/react-native-design-system";
+import {
+  useAppDesignTokens,
+  StackNavigator,
+  type StackScreen,
+  type StackNavigatorConfig,
+} from "@umituz/react-native-design-system";
 import { useLocalization, LanguageSelectionScreen } from "../../domains/localization";
 import { NotificationSettingsScreen } from "../../domains/notifications";
 import { AccountScreen } from "@umituz/react-native-auth";
@@ -16,30 +21,31 @@ import { FAQScreen } from "../../domains/faqs";
 import { AboutScreen } from "../../domains/about";
 import { LegalScreen } from "../../domains/legal";
 import { GamificationScreen } from "../../domains/gamification";
-import { useNavigationHandlers } from "./hooks";
+import { useNavigationHandlers, useSettingsScreens } from "./hooks";
 import {
   createNotificationTranslations,
   createQuietHoursTranslations,
   createLegalScreenProps,
 } from "./utils";
-import type { SettingsStackParamList, SettingsStackNavigatorProps, AdditionalScreen } from "./types";
+import type { SettingsStackParamList, SettingsStackNavigatorProps } from "./types";
 
-export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
-  appInfo,
-  legalUrls,
-  faqData,
-  config = {},
-  showUserProfile = false,
-  userProfile,
-  accountConfig,
-  additionalScreens = [],
-  devSettings,
-  customSections = [],
-  showHeader = true,
-  showCloseButton = false,
-  onClose,
-  gamificationConfig,
-}) => {
+export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = (props) => {
+  const {
+    appInfo,
+    legalUrls,
+    faqData,
+    config = {},
+    showUserProfile = false,
+    userProfile,
+    accountConfig,
+    additionalScreens = [],
+    devSettings,
+    customSections = [],
+    showHeader = true,
+    showCloseButton = false,
+    onClose,
+    gamificationConfig,
+  } = props;
   const tokens = useAppDesignTokens();
   const { t } = useLocalization();
   const { handlePrivacyPress, handleTermsPress, handleEulaPress, aboutConfig } =
@@ -47,21 +53,9 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
 
   const screenOptions = React.useMemo(
     () => ({
-      headerStyle: {
-        backgroundColor: tokens.colors.surface,
-        borderBottomColor: tokens.colors.borderLight,
-        borderBottomWidth: 1,
-        elevation: 0,
-        shadowOpacity: 0,
-      },
-      headerTintColor: tokens.colors.textPrimary,
-      headerTitleStyle: {
-        color: tokens.colors.textPrimary,
-        fontWeight: "600" as const,
-      },
-      headerBackTitle: t("settings.title"),
+      headerShown: false,
     }),
-    [tokens, t]
+    []
   );
 
   const notificationTranslations = React.useMemo(() => createNotificationTranslations(t), [t]);
@@ -71,150 +65,14 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
     [t, handlePrivacyPress, handleTermsPress, handleEulaPress]
   );
 
-  const screens = React.useMemo(() => {
-    const baseScreens: StackScreen[] = [
-      {
-        name: "SettingsMain",
-        options: { headerShown: false },
-        children: () => (
-          <SettingsScreen
-            config={config}
-            appVersion={appInfo.version}
-            showUserProfile={showUserProfile}
-            userProfile={userProfile}
-            devSettings={devSettings}
-            customSections={customSections}
-            showHeader={showHeader}
-            showCloseButton={showCloseButton}
-            onClose={onClose}
-          />
-        ),
-      },
-      {
-        name: "Appearance",
-        component: AppearanceScreen,
-        options: { headerShown: false },
-      },
-      {
-        name: "About",
-        options: { headerTitle: t("settings.about.title") },
-        children: () => <AboutScreen config={aboutConfig} />,
-      },
-      {
-        name: "Legal",
-        options: { headerTitle: t("settings.legal.title") },
-        children: () => <LegalScreen {...legalScreenProps} />,
-      },
-      {
-        name: "Notifications",
-        options: { headerShown: false },
-        children: () => (
-          <NotificationSettingsScreen
-            translations={notificationTranslations}
-            quietHoursTranslations={quietHoursTranslations}
-          />
-        ),
-      },
-    ];
-
-    // FAQ screen - conditionally add
-    const faqScreen: StackScreen | null = (faqData && faqData.categories.length > 0)
-      ? {
-          name: "FAQ",
-          options: { headerTitle: t("settings.faqs.title") },
-          children: () => (
-            <FAQScreen
-              categories={faqData.categories}
-              searchPlaceholder={t("settings.faqs.searchPlaceholder")}
-              emptySearchTitle={t("settings.faqs.emptySearchTitle")}
-              emptySearchMessage={t("settings.faqs.emptySearchMessage")}
-              headerTitle={t("settings.faqs.headerTitle")}
-            />
-          ),
-        }
-      : null;
-
-    // Additional screens - map to StackScreen format
-    const additionalStackScreens: StackScreen[] = (additionalScreens as readonly AdditionalScreen[]).map((screen: AdditionalScreen): StackScreen => {
-      // Create base screen object
-      const stackScreen: Record<string, unknown> = {
-        name: screen.name,
-      };
-
-      // Conditionally add properties
-      if (screen.component) {
-        stackScreen.component = screen.component;
-      }
-      if (screen.children) {
-        stackScreen.children = screen.children;
-      }
-      if (screen.options) {
-        stackScreen.options = screen.options;
-      }
-
-      // Type assertion to StackScreen
-      return stackScreen as unknown as StackScreen;
-    });
-
-    // Gamification screen - conditionally add
-    const gamificationScreen: StackScreen | null = gamificationConfig?.enabled
-      ? {
-          name: "Gamification",
-          options: { headerTitle: t("settings.gamification.title") },
-          children: () => <GamificationScreen config={gamificationConfig} />,
-        }
-      : null;
-
-    // Language selection screen
-    const languageScreen: StackScreen = {
-      name: "LanguageSelection",
-      options: { headerShown: false },
-      children: () => (
-        <LanguageSelectionScreen
-          headerTitle={t("settings.language.title")}
-          searchPlaceholder={t("settings.languageSelection.searchPlaceholder")}
-        />
-      ),
-    };
-
-    // Account screen - conditionally add
-    const accountScreen: StackScreen | null = accountConfig
-      ? {
-          name: "Account",
-          options: { headerTitle: t("settings.account.title") },
-          children: () => <AccountScreen config={accountConfig} />,
-        }
-      : null;
-
-    // Compose final list using spread operator (immutable)
-    return [
-      ...baseScreens,
-      ...(faqScreen ? [faqScreen] : []),
-      ...additionalStackScreens,
-      ...(gamificationScreen ? [gamificationScreen] : []),
-      languageScreen,
-      ...(accountScreen ? [accountScreen] : []),
-    ];
-  }, [
-    t,
-    showHeader,
-    showCloseButton,
-    onClose,
-    config,
-    appInfo.version,
-    showUserProfile,
-    userProfile,
-    devSettings,
-    customSections,
+  const screens = useSettingsScreens({
+    ...props,
     aboutConfig,
-    legalScreenProps,
+    legalProps: legalScreenProps,
     notificationTranslations,
     quietHoursTranslations,
-    faqData,
-    additionalScreens,
-    gamificationConfig,
-    accountConfig,
-  ]);
+    t,
+  });
 
   const navigatorConfig: StackNavigatorConfig<SettingsStackParamList> = {
     initialRouteName: "SettingsMain",

package/src/presentation/navigation/hooks/index.ts

@@ -3,3 +3,4 @@
  */
 
 export { useNavigationHandlers } from "./useNavigationHandlers";
+export { useSettingsScreens } from "./useSettingsScreens";