@umituz/react-native-notifications 1.5.8 → 1.5.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-notifications",
-  "version": "1.5.8",
+  "version": "1.5.9",
   "description": "Offline-first local notifications system for React Native apps using expo-notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/components/RemindersNavRow.styles.ts

@@ -0,0 +1,38 @@
+/**
+ * RemindersNavRow Styles
+ */
+
+import { StyleSheet } from 'react-native';
+import type { DesignTokens } from '@umituz/react-native-design-system';
+
+export const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    navRow: {
+      flexDirection: 'row',
+      alignItems: 'center',
+    },
+    iconContainer: {
+      width: 44,
+      height: 44,
+      borderRadius: 22,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: 12,
+    },
+    textContainer: {
+      flex: 1,
+      marginRight: 12,
+    },
+    badge: {
+      backgroundColor: tokens.colors.primary,
+      paddingHorizontal: 8,
+      paddingVertical: 2,
+      borderRadius: 10,
+      marginRight: 8,
+    },
+    badgeText: {
+      color: tokens.colors.surface,
+      fontWeight: '600',
+    },
+  });

package/src/presentation/components/RemindersNavRow.tsx

@@ -0,0 +1,51 @@
+/**
+ * RemindersNavRow Component
+ * Reusable navigation row for reminders section with badge
+ */
+
+import React from 'react';
+import { View, TouchableOpacity } from 'react-native';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { createStyles } from './RemindersNavRow.styles';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+
+export interface RemindersNavRowProps {
+  title: string;
+  description: string;
+  count: number;
+  onPress: () => void;
+}
+
+export const RemindersNavRow: React.FC<RemindersNavRowProps> = ({
+  title,
+  description,
+  count,
+  onPress,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = createStyles(tokens);
+
+  return (
+    <TouchableOpacity style={styles.navRow} onPress={onPress} activeOpacity={0.7}>
+      <View style={styles.iconContainer}>
+        <AtomicIcon name="time" size="md" color="primary" />
+      </View>
+      <View style={styles.textContainer}>
+        <AtomicText type="bodyLarge" style={{ color: tokens.colors.textPrimary }}>
+          {title}
+        </AtomicText>
+        <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>
+          {description}
+        </AtomicText>
+      </View>
+      {count > 0 && (
+        <View style={styles.badge}>
+          <AtomicText type="bodySmall" style={styles.badgeText}>
+            {count}
+          </AtomicText>
+        </View>
+      )}
+      <AtomicIcon name="chevron-forward" size="md" color="secondary" />
+    </TouchableOpacity>
+  );
+};

package/src/presentation/hooks/useTimePicker.ts

@@ -0,0 +1,71 @@
+/**
+ * useTimePicker Hook
+ * Encapsulates DateTimePicker logic for notification settings
+ */
+
+import { useState, useCallback } from 'react';
+import type { QuietHoursConfig } from '../../infrastructure/services/types';
+
+export type PickerMode = 'start' | 'end' | null;
+
+export interface UseTimePickerParams {
+  quietHours: QuietHoursConfig;
+  onStartTimeChange: (hours: number, minutes: number) => void;
+  onEndTimeChange: (hours: number, minutes: number) => void;
+}
+
+export interface TimePickerHandlers {
+  pickerMode: PickerMode;
+  handleStartTimePress: () => void;
+  handleEndTimePress: () => void;
+  handleTimeChange: (event: any, selectedDate?: Date) => void;
+  getPickerDate: () => Date;
+}
+
+export const useTimePicker = ({
+  quietHours,
+  onStartTimeChange,
+  onEndTimeChange,
+}: UseTimePickerParams): TimePickerHandlers => {
+  const [pickerMode, setPickerMode] = useState<PickerMode>(null);
+
+  const handleStartTimePress = useCallback(() => {
+    setPickerMode('start');
+  }, []);
+
+  const handleEndTimePress = useCallback(() => {
+    setPickerMode('end');
+  }, []);
+
+  const handleTimeChange = useCallback((event: any, selectedDate?: Date) => {
+    if (event.type === 'set' && selectedDate) {
+      const hours = selectedDate.getHours();
+      const minutes = selectedDate.getMinutes();
+
+      if (pickerMode === 'start') {
+        onStartTimeChange(hours, minutes);
+      } else if (pickerMode === 'end') {
+        onEndTimeChange(hours, minutes);
+      }
+    }
+    setPickerMode(null);
+  }, [pickerMode, onStartTimeChange, onEndTimeChange]);
+
+  const getPickerDate = useCallback((): Date => {
+    const date = new Date();
+    if (pickerMode === 'start') {
+      date.setHours(quietHours.startHour, quietHours.startMinute);
+    } else if (pickerMode === 'end') {
+      date.setHours(quietHours.endHour, quietHours.endMinute);
+    }
+    return date;
+  }, [pickerMode, quietHours]);
+
+  return {
+    pickerMode,
+    handleStartTimePress,
+    handleEndTimePress,
+    handleTimeChange,
+    getPickerDate,
+  };
+};

package/src/presentation/screens/NotificationSettingsScreen.styles.ts

@@ -0,0 +1,30 @@
+/**
+ * NotificationSettingsScreen Styles
+ * Extracted styles for better organization and maintainability
+ */
+
+import { StyleSheet } from 'react-native';
+import type { DesignTokens } from '@umituz/react-native-design-system';
+
+export const createStyles = (tokens: DesignTokens) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      padding: 16,
+    },
+    loadingContainer: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+    },
+    card: {
+      marginBottom: 16,
+      padding: 16,
+      backgroundColor: tokens.colors.surface,
+    },
+    divider: {
+      height: 1,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      marginVertical: 12,
+    },
+  });

package/src/presentation/screens/NotificationSettingsScreen.tsx

@@ -3,21 +3,22 @@
  * Clean presentation-only screen for notification settings
  */
 
-import React, { useMemo, useState } from 'react';
-import { View, StyleSheet, TouchableOpacity } from 'react-native';
-import { AtomicText, AtomicIcon, AtomicCard, ScreenLayout, AtomicSpinner } from '@umituz/react-native-design-system';
-import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import React from 'react';
+import { View } from 'react-native';
+import { AtomicCard, ScreenLayout, AtomicSpinner } from '@umituz/react-native-design-system';
 import { QuietHoursCard } from '../../domains/quietHours/presentation/components/QuietHoursCard';
 import { SettingRow } from '../components/SettingRow';
+import { RemindersNavRow } from '../components/RemindersNavRow';
 import { useNotificationSettingsUI } from '../hooks/useNotificationSettingsUI';
+import { useTimePicker } from '../hooks/useTimePicker';
 import { useReminders } from '../../domains/reminders/infrastructure/storage/RemindersStore';
 import { useQuietHoursActions } from '../../domains/quietHours/infrastructure/hooks/useQuietHoursActions';
 import type { NotificationSettingsTranslations, QuietHoursTranslations } from '../../infrastructure/services/types';
+import { createStyles } from './NotificationSettingsScreen.styles';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 // @ts-ignore - Optional peer dependency
 import DateTimePicker from '@react-native-community/datetimepicker';
 
-type PickerMode = 'start' | 'end' | null;
-
 export interface NotificationSettingsScreenProps {
   translations: NotificationSettingsTranslations;
   quietHoursTranslations: QuietHoursTranslations;
@@ -30,10 +31,9 @@ export const NotificationSettingsScreen: React.FC<NotificationSettingsScreenProp
   onHapticFeedback,
 }) => {
   const tokens = useAppDesignTokens();
-  const styles = useMemo(() => createStyles(tokens), [tokens]);
+  const styles = createStyles(tokens);
   const reminders = useReminders();
   const { setStartTime, setEndTime } = useQuietHoursActions();
-  const [pickerMode, setPickerMode] = useState<PickerMode>(null);
 
   const {
     preferences,
@@ -45,42 +45,16 @@ export const NotificationSettingsScreen: React.FC<NotificationSettingsScreenProp
     handleQuietHoursToggle,
   } = useNotificationSettingsUI();
 
+  const timePicker = useTimePicker({
+    quietHours,
+    onStartTimeChange: setStartTime,
+    onEndTimeChange: setEndTime,
+  });
+
   const handleRemindersPress = () => {
     // Navigate to reminders screen when implemented
   };
 
-  const handleStartTimePress = () => {
-    setPickerMode('start');
-  };
-
-  const handleEndTimePress = () => {
-    setPickerMode('end');
-  };
-
-  const handleTimeChange = (event: any, selectedDate?: Date) => {
-    if (event.type === 'set' && selectedDate) {
-      const hours = selectedDate.getHours();
-      const minutes = selectedDate.getMinutes();
-
-      if (pickerMode === 'start') {
-        setStartTime(hours, minutes);
-      } else if (pickerMode === 'end') {
-        setEndTime(hours, minutes);
-      }
-    }
-    setPickerMode(null);
-  };
-
-  const getPickerDate = () => {
-    const date = new Date();
-    if (pickerMode === 'start') {
-      date.setHours(quietHours.startHour, quietHours.startMinute);
-    } else if (pickerMode === 'end') {
-      date.setHours(quietHours.endHour, quietHours.endMinute);
-    }
-    return date;
-  };
-
   if (isLoading) {
     return (
       <ScreenLayout>
@@ -126,98 +100,32 @@ export const NotificationSettingsScreen: React.FC<NotificationSettingsScreenProp
             </AtomicCard>
 
             <AtomicCard style={styles.card}>
-              <TouchableOpacity style={styles.navRow} onPress={handleRemindersPress} activeOpacity={0.7}>
-                <View style={styles.iconContainer}>
-                  <AtomicIcon name="time" size="md" color="primary" />
-                </View>
-                <View style={styles.textContainer}>
-                  <AtomicText type="bodyLarge" style={{ color: tokens.colors.textPrimary }}>
-                    {translations.remindersTitle}
-                  </AtomicText>
-                  <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary }}>
-                    {translations.remindersDescription}
-                  </AtomicText>
-                </View>
-                {reminders.length > 0 && (
-                  <View style={styles.badge}>
-                    <AtomicText type="bodySmall" style={styles.badgeText}>
-                      {reminders.length}
-                    </AtomicText>
-                  </View>
-                )}
-                <AtomicIcon name="chevron-forward" size="md" color="secondary" />
-              </TouchableOpacity>
+              <RemindersNavRow
+                title={translations.remindersTitle}
+                description={translations.remindersDescription}
+                count={reminders.length}
+                onPress={handleRemindersPress}
+              />
             </AtomicCard>
 
             <QuietHoursCard
               config={quietHours}
               translations={quietHoursTranslations}
               onToggle={handleQuietHoursToggle}
-              onStartTimePress={handleStartTimePress}
-              onEndTimePress={handleEndTimePress}
+              onStartTimePress={timePicker.handleStartTimePress}
+              onEndTimePress={timePicker.handleEndTimePress}
             />
           </>
         )}
       </View>
-      {pickerMode && (
+      {timePicker.pickerMode && (
         <DateTimePicker
-          value={getPickerDate()}
+          value={timePicker.getPickerDate()}
           mode="time"
           is24Hour={true}
-          onChange={handleTimeChange}
+          onChange={timePicker.handleTimeChange}
         />
       )}
     </ScreenLayout>
   );
 };
-
-const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
-  StyleSheet.create({
-    container: {
-      flex: 1,
-      padding: 16,
-    },
-    loadingContainer: {
-      flex: 1,
-      justifyContent: 'center',
-      alignItems: 'center',
-    },
-    card: {
-      marginBottom: 16,
-      padding: 16,
-      backgroundColor: tokens.colors.surface,
-    },
-    divider: {
-      height: 1,
-      backgroundColor: tokens.colors.surfaceSecondary,
-      marginVertical: 12,
-    },
-    navRow: {
-      flexDirection: 'row',
-      alignItems: 'center',
-    },
-    iconContainer: {
-      width: 44,
-      height: 44,
-      borderRadius: 22,
-      backgroundColor: tokens.colors.surfaceSecondary,
-      justifyContent: 'center',
-      alignItems: 'center',
-      marginRight: 12,
-    },
-    textContainer: {
-      flex: 1,
-      marginRight: 12,
-    },
-    badge: {
-      backgroundColor: tokens.colors.primary,
-      paddingHorizontal: 8,
-      paddingVertical: 2,
-      borderRadius: 10,
-      marginRight: 8,
-    },
-    badgeText: {
-      color: tokens.colors.surface,
-      fontWeight: '600',
-    },
-  });