@umituz/react-native-settings 4.21.10 → 4.21.12

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

@@ -0,0 +1,61 @@
+/**
+ * WeekdaySelector Component
+ * Allows selection of a weekday for weekly reminders
+ */
+
+import React, { useMemo } from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { AtomicText } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import { WEEKDAY_OPTIONS } from '../../infrastructure/config/reminderPresets';
+
+export interface WeekdaySelectorProps {
+  selectedWeekday: number;
+  onSelect: (weekday: number) => void;
+  getLabel: (key: string) => string;
+}
+
+export const WeekdaySelector: React.FC<WeekdaySelectorProps> = ({
+  selectedWeekday,
+  onSelect,
+  getLabel,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  return (
+    <View style={styles.container}>
+      {WEEKDAY_OPTIONS.map(option => {
+        const isSelected = selectedWeekday === option.id;
+        return (
+          <TouchableOpacity
+            key={option.id}
+            style={[styles.button, isSelected ? styles.selectedButton : undefined]}
+            onPress={() => onSelect(option.id)}
+            activeOpacity={0.7}
+          >
+            <AtomicText type="bodySmall" style={isSelected ? styles.selectedText : styles.text}>
+              {getLabel(option.shortLabelKey)}
+            </AtomicText>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: { flexDirection: 'row', justifyContent: 'space-between', gap: 4 },
+    button: {
+      flex: 1,
+      paddingVertical: 10,
+      paddingHorizontal: 4,
+      borderRadius: 8,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      alignItems: 'center',
+    },
+    selectedButton: { backgroundColor: tokens.colors.primary },
+    text: { color: tokens.colors.textSecondary, fontWeight: '500' },
+    selectedText: { color: tokens.colors.surface, fontWeight: '500' },
+  });

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

@@ -0,0 +1,131 @@
+/**
+ * ReminderListScreen
+ * Displays list of reminders with add, edit, delete functionality
+ */
+
+import React, { useEffect, 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 { ReminderItem } from '../components/ReminderItem';
+import { useRemindersStore, useReminders, useRemindersLoading } from '../../infrastructure/storage/RemindersStore';
+import { useReminderActions } from '../../infrastructure/hooks/useReminderActions';
+import type { Reminder, ReminderTranslations } from '../../../../infrastructure/services/types';
+
+export interface ReminderListScreenProps {
+  translations: ReminderTranslations;
+  onAddPress: () => void;
+  onEditPress: (reminder: Reminder) => void;
+  maxReminders?: number;
+}
+
+export const ReminderListScreen: React.FC<ReminderListScreenProps> = ({
+  translations,
+  onAddPress,
+  onEditPress,
+  maxReminders = 20,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  const reminders = useReminders();
+  const isLoading = useRemindersLoading();
+  const { toggleReminderEnabled, removeReminder } = useReminderActions();
+
+  const handleToggle = useCallback(async (id: string) => {
+    await toggleReminderEnabled(id);
+  }, [toggleReminderEnabled]);
+
+  const handleDelete = useCallback(async (id: string) => {
+    await removeReminder(id);
+  }, [removeReminder]);
+
+  const canAddMore = reminders.length < maxReminders;
+
+  const renderItem = useCallback(({ item }: { item: Reminder }) => (
+    <ReminderItem
+      reminder={item}
+      translations={{
+        frequencyOnce: translations.frequencyOnce,
+        frequencyDaily: translations.frequencyDaily,
+        frequencyWeekly: translations.frequencyWeekly,
+        frequencyMonthly: translations.frequencyMonthly,
+      }}
+      onToggle={handleToggle}
+      onEdit={onEditPress}
+      onDelete={handleDelete}
+    />
+  ), [translations, handleToggle, onEditPress, handleDelete]);
+
+  const renderEmpty = useCallback(() => (
+    <View style={styles.emptyContainer}>
+      <View style={styles.emptyIconContainer}>
+        <AtomicIcon name="notifications-off" size="xl" color="secondary" />
+      </View>
+      <AtomicText type="bodyLarge" style={styles.emptyTitle}>{translations.emptyTitle}</AtomicText>
+      <AtomicText type="bodySmall" style={styles.emptyDescription}>{translations.emptyDescription}</AtomicText>
+    </View>
+  ), [translations, styles]);
+
+  const keyExtractor = useCallback((item: Reminder) => item.id, []);
+
+  if (isLoading) {
+    return (
+      <View style={[styles.loadingContainer, { backgroundColor: tokens.colors.surface }]}>
+        <AtomicSpinner size="lg" color="primary" fullContainer />
+      </View>
+    );
+  }
+
+  return (
+    <View style={{ flex: 1 }}>
+      <FlatList
+        data={reminders}
+        renderItem={renderItem}
+        keyExtractor={keyExtractor}
+        ListEmptyComponent={renderEmpty}
+        contentContainerStyle={[styles.listContent, { backgroundColor: tokens.colors.surface }]}
+        showsVerticalScrollIndicator={false}
+      />
+
+      {canAddMore && (
+        <TouchableOpacity style={styles.fab} onPress={onAddPress} activeOpacity={0.8}>
+          <AtomicIcon name="add" size="md" color="onSurface" />
+          <AtomicText type="bodyMedium" style={styles.fabText}>{translations.addButtonLabel}</AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+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 },
+    emptyIconContainer: {
+      width: 80,
+      height: 80,
+      borderRadius: 40,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginBottom: 16,
+    },
+    emptyTitle: { color: tokens.colors.textPrimary, textAlign: 'center', marginBottom: 8 },
+    emptyDescription: { color: tokens.colors.textSecondary, textAlign: 'center' },
+    fab: {
+      position: 'absolute',
+      bottom: 24,
+      left: 16,
+      right: 16,
+      backgroundColor: tokens.colors.primary,
+      borderRadius: 12,
+      paddingVertical: 14,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: 8,
+    },
+    fabText: { color: tokens.colors.surface, fontWeight: '600' },
+  });

package/src/notifications/index.ts

@@ -0,0 +1,139 @@
+/**
+ * Notifications Package - Public API
+ * Offline-first local notifications using expo-notifications
+ */
+
+// ============================================================================
+// TYPES
+// ============================================================================
+
+export type {
+  NotificationTrigger,
+  ScheduleNotificationOptions,
+  ScheduledNotification,
+  TimePreset,
+  ReminderFrequency,
+  Reminder,
+  CreateReminderInput,
+  UpdateReminderInput,
+  QuietHoursConfig,
+  NotificationPreferences,
+  ReminderTranslations,
+  QuietHoursTranslations,
+  NotificationSettingsTranslations,
+} from './infrastructure/services/types';
+
+// ============================================================================
+// CONFIGURATION
+// ============================================================================
+
+export { notificationsConfig } from './infrastructure/config/notificationsConfig';
+export type {
+  NotificationSetting,
+  NotificationSection,
+  NotificationsConfig,
+} from './infrastructure/config/notificationsConfig';
+
+export {
+  DEFAULT_TIME_PRESETS,
+  FREQUENCY_OPTIONS,
+  WEEKDAY_OPTIONS,
+  getTimePresetById,
+  formatTime,
+  parseTime,
+} from './domains/reminders/infrastructure/config/reminderPresets';
+export type { FrequencyOption, WeekdayOption } from './domains/reminders/infrastructure/config/reminderPresets';
+
+// ============================================================================
+// SERVICES
+// ============================================================================
+
+export { NotificationService, notificationService } from './infrastructure/services/NotificationService';
+export { NotificationManager } from './infrastructure/services/NotificationManager';
+
+// ============================================================================
+// STORES
+// ============================================================================
+
+export { useNotificationsStore, useNotifications } from './infrastructure/storage/NotificationsStore';
+export {
+  useRemindersStore,
+  usePreferencesStore,
+  useReminders,
+  useEnabledReminders,
+  useReminderById,
+  useNotificationPreferences,
+  useQuietHours,
+  useRemindersLoading,
+  useRemindersInitialized,
+} from './domains/reminders/infrastructure/storage/RemindersStore';
+
+// ============================================================================
+// HOOKS
+// ============================================================================
+
+export { useNotificationSettings } from './infrastructure/hooks/useNotificationSettings';
+export { useReminderActions } from './domains/reminders/infrastructure/hooks/useReminderActions';
+export { useQuietHoursActions } from './domains/quietHours/infrastructure/hooks/useQuietHoursActions';
+export { useNotificationSettingsUI } from './presentation/hooks/useNotificationSettingsUI';
+
+// ============================================================================
+// SCREENS
+// ============================================================================
+
+export { NotificationsScreen } from './presentation/screens/NotificationsScreen';
+export type { NotificationsScreenProps } from './presentation/screens/NotificationsScreen';
+
+export { NotificationSettingsScreen } from './presentation/screens/NotificationSettingsScreen';
+export type { NotificationSettingsScreenProps } from './presentation/screens/NotificationSettingsScreen';
+
+export { ReminderListScreen } from './domains/reminders/presentation/screens/ReminderListScreen';
+export type { ReminderListScreenProps } from './domains/reminders/presentation/screens/ReminderListScreen';
+
+// ============================================================================
+// COMPONENTS
+// ============================================================================
+
+export { NotificationsSection } from './presentation/components/NotificationsSection';
+export type { NotificationsSectionProps, NotificationsSectionConfig } from './presentation/components/NotificationsSection';
+
+export { TimePresetSelector } from './domains/reminders/presentation/components/TimePresetSelector';
+export type { TimePresetSelectorProps } from './domains/reminders/presentation/components/TimePresetSelector';
+
+export { FrequencySelector } from './domains/reminders/presentation/components/FrequencySelector';
+export type { FrequencySelectorProps } from './domains/reminders/presentation/components/FrequencySelector';
+
+export { WeekdaySelector } from './domains/reminders/presentation/components/WeekdaySelector';
+export type { WeekdaySelectorProps } from './domains/reminders/presentation/components/WeekdaySelector';
+
+export { ReminderItem } from './domains/reminders/presentation/components/ReminderItem';
+export type { ReminderItemProps, ReminderItemTranslations } from './domains/reminders/presentation/components/ReminderItem';
+
+export { ReminderForm } from './domains/reminders/presentation/components/ReminderForm';
+export type { ReminderFormProps, ReminderFormTranslations } from './domains/reminders/presentation/components/ReminderForm';
+
+export { FormButton } from './domains/reminders/presentation/components/FormButton';
+export type { FormButtonProps } from './domains/reminders/presentation/components/FormButton';
+
+export { QuietHoursCard } from './domains/quietHours/presentation/components/QuietHoursCard';
+export type { QuietHoursCardProps } from './domains/quietHours/presentation/components/QuietHoursCard';
+
+export { RemindersNavRow } from './presentation/components/RemindersNavRow';
+export type { RemindersNavRowProps } from './presentation/components/RemindersNavRow';
+
+export { SettingRow } from './presentation/components/SettingRow';
+export type { SettingRowProps } from './presentation/components/SettingRow';
+
+// ============================================================================
+// UTILS
+// ============================================================================
+
+export { generateId, generateReminderId } from './infrastructure/utils/idGenerator';
+export { buildTrigger } from './infrastructure/utils/triggerBuilder';
+
+// ============================================================================
+// HOOKS - UTILS
+// ============================================================================
+
+export { useTimePicker } from './presentation/hooks/useTimePicker';
+export type { PickerMode, UseTimePickerParams, TimePickerHandlers } from './presentation/hooks/useTimePicker';

package/src/notifications/infrastructure/config/notificationsConfig.ts

@@ -0,0 +1,98 @@
+/**
+ * Notifications Configuration
+ * Defines notification settings structure
+ */
+
+export interface NotificationSetting {
+  id: string;
+  titleKey: string;
+  descKey: string;
+  icon: string;
+}
+
+export interface NotificationSection {
+  id: string;
+  titleKey: string;
+  settings: NotificationSetting[];
+}
+
+export interface NotificationsConfig {
+  sections: NotificationSection[];
+}
+
+export const notificationsConfig: NotificationsConfig = {
+  sections: [
+    {
+      id: 'channels',
+      titleKey: 'notifications.channels',
+      settings: [
+        {
+          id: 'pushNotifications',
+          titleKey: 'notifications.push',
+          descKey: 'notifications.pushDesc',
+          icon: 'notifications',
+        },
+        {
+          id: 'emailNotifications',
+          titleKey: 'notifications.email',
+          descKey: 'notifications.emailDesc',
+          icon: 'email',
+        },
+        {
+          id: 'smsNotifications',
+          titleKey: 'notifications.sms',
+          descKey: 'notifications.smsDesc',
+          icon: 'message',
+        },
+      ],
+    },
+    {
+      id: 'content',
+      titleKey: 'notifications.content',
+      settings: [
+        {
+          id: 'appUpdates',
+          titleKey: 'notifications.updates',
+          descKey: 'notifications.updatesDesc',
+          icon: 'update',
+        },
+        {
+          id: 'features',
+          titleKey: 'notifications.features',
+          descKey: 'notifications.featuresDesc',
+          icon: 'new-releases',
+        },
+        {
+          id: 'tips',
+          titleKey: 'notifications.tips',
+          descKey: 'notifications.tipsDesc',
+          icon: 'tips-and-updates',
+        },
+      ],
+    },
+    {
+      id: 'activity',
+      titleKey: 'notifications.activity',
+      settings: [
+        {
+          id: 'reminders',
+          titleKey: 'notifications.reminders',
+          descKey: 'notifications.remindersDesc',
+          icon: 'alarm',
+        },
+        {
+          id: 'achievements',
+          titleKey: 'notifications.achievements',
+          descKey: 'notifications.achievementsDesc',
+          icon: 'emoji-events',
+        },
+        {
+          id: 'social',
+          titleKey: 'notifications.social',
+          descKey: 'notifications.socialDesc',
+          icon: 'people',
+        },
+      ],
+    },
+  ],
+};

package/src/notifications/infrastructure/hooks/useNotificationSettings.ts

@@ -0,0 +1,37 @@
+/**
+ * Simple notification settings hook
+ */
+
+import { createStore } from '@umituz/react-native-storage';
+
+interface NotificationSettingsState {
+  notificationsEnabled: boolean;
+  isLoading: boolean;
+}
+
+interface NotificationSettingsActions {
+  setNotificationsEnabled: (value: boolean) => void;
+}
+
+const useNotificationSettingsStore = createStore<NotificationSettingsState, NotificationSettingsActions>({
+  name: 'notification-settings-store',
+  initialState: {
+    notificationsEnabled: true,
+    isLoading: true,
+  },
+  persist: true,
+  actions: (set) => ({
+    setNotificationsEnabled: (value: boolean) => set({ notificationsEnabled: value }),
+  }),
+});
+
+export const useNotificationSettings = () => {
+  const store = useNotificationSettingsStore();
+  const { notificationsEnabled, isLoading, setNotificationsEnabled } = store;
+
+  return {
+    notificationsEnabled,
+    setNotificationsEnabled,
+    isLoading,
+  };
+};

package/src/notifications/infrastructure/services/NotificationBadgeManager.ts

@@ -0,0 +1,28 @@
+import * as Notifications from 'expo-notifications';
+import { Platform } from 'react-native';
+import { devError } from '../utils/dev';
+
+export class NotificationBadgeManager {
+  async getBadgeCount(): Promise<number> {
+    try {
+      if (Platform.OS === 'ios') {
+        return await Notifications.getBadgeCountAsync();
+      }
+      return 0;
+    } catch (error) {
+      devError('[NotificationBadgeManager] Get badge count failed:', error);
+      return 0;
+    }
+  }
+
+  async setBadgeCount(count: number): Promise<void> {
+    try {
+      if (Platform.OS === 'ios') {
+        await Notifications.setBadgeCountAsync(count);
+      }
+    } catch (error) {
+      devError('[NotificationBadgeManager] Set badge count failed:', error);
+      throw error;
+    }
+  }
+}

package/src/notifications/infrastructure/services/NotificationManager.ts

@@ -0,0 +1,138 @@
+/**
+ * NotificationManager - Core Notification Operations
+ *
+ * Offline-first notification system using expo-notifications.
+ * Works in ALL apps (offline, online, hybrid) - no backend required.
+ */
+
+import * as Notifications from 'expo-notifications';
+import * as Device from 'expo-device';
+import { Platform } from 'react-native';
+import { NotificationPermissions } from './NotificationPermissions';
+import { NotificationScheduler } from './NotificationScheduler';
+import { NotificationBadgeManager } from './NotificationBadgeManager';
+import { devLog, devError } from '../utils/dev';
+import type { NotificationTrigger, ScheduleNotificationOptions, ScheduledNotification } from './types';
+
+export class NotificationManager {
+  private permissions: NotificationPermissions;
+  private scheduler: NotificationScheduler;
+  private badgeManager: NotificationBadgeManager;
+
+  constructor() {
+    this.permissions = new NotificationPermissions();
+    this.scheduler = new NotificationScheduler();
+    this.badgeManager = new NotificationBadgeManager();
+  }
+
+  static configure() {
+    Notifications.setNotificationHandler({
+      handleNotification: async () => ({
+        shouldShowAlert: true,
+        shouldPlaySound: true,
+        shouldSetBadge: true,
+        shouldShowBanner: true,
+        shouldShowList: true,
+      }),
+    });
+
+    devLog('[NotificationManager] Configured notification handler');
+  }
+
+  async requestPermissions(): Promise<boolean> {
+    try {
+      const result = await this.permissions.requestPermissions();
+      
+      devLog('[NotificationManager] Permissions requested:', result);
+      
+      return result;
+    } catch (error) {
+      devError('[NotificationManager] Permission request failed:', error);
+      return false;
+    }
+  }
+
+  async hasPermissions(): Promise<boolean> {
+    try {
+      return await this.permissions.hasPermissions();
+    } catch (error) {
+      devError('[NotificationManager] Permission check failed:', error);
+      return false;
+    }
+  }
+
+  async scheduleNotification(options: ScheduleNotificationOptions): Promise<string> {
+    try {
+      const id = await this.scheduler.scheduleNotification(options);
+      
+      devLog('[NotificationManager] Notification scheduled:', id);
+      
+      return id;
+    } catch (error) {
+      devError('[NotificationManager] Schedule notification failed:', error);
+      throw error;
+    }
+  }
+
+  async cancelNotification(notificationId: string): Promise<void> {
+    try {
+      await this.scheduler.cancelNotification(notificationId);
+      
+      devLog('[NotificationManager] Notification cancelled:', notificationId);
+    } catch (error) {
+      devError('[NotificationManager] Cancel notification failed:', error);
+      throw error;
+    }
+  }
+
+  async cancelAllNotifications(): Promise<void> {
+    try {
+      await this.scheduler.cancelAllNotifications();
+      
+      devLog('[NotificationManager] All notifications cancelled');
+    } catch (error) {
+      devError('[NotificationManager] Cancel all notifications failed:', error);
+      throw error;
+    }
+  }
+
+  async getScheduledNotifications(): Promise<ScheduledNotification[]> {
+    try {
+      return await this.scheduler.getScheduledNotifications();
+    } catch (error) {
+      devError('[NotificationManager] Get scheduled notifications failed:', error);
+      return [];
+    }
+  }
+
+  async dismissAllNotifications(): Promise<void> {
+    try {
+      await Notifications.dismissAllNotificationsAsync();
+      
+      devLog('[NotificationManager] All notifications dismissed');
+    } catch (error) {
+      devError('[NotificationManager] Dismiss all notifications failed:', error);
+      throw error;
+    }
+  }
+
+  async getBadgeCount(): Promise<number> {
+    try {
+      return await this.badgeManager.getBadgeCount();
+    } catch (error) {
+      devError('[NotificationManager] Get badge count failed:', error);
+      return 0;
+    }
+  }
+
+  async setBadgeCount(count: number): Promise<void> {
+    try {
+      await this.badgeManager.setBadgeCount(count);
+      
+      devLog('[NotificationManager] Badge count set:', count);
+    } catch (error) {
+      devError('[NotificationManager] Set badge count failed:', error);
+      throw error;
+    }
+  }
+}