@umituz/react-native-notifications 1.1.6 → 1.3.0

package/src/infrastructure/services/types.ts

@@ -1,81 +1,174 @@
 /**
  * Offline-First Notification Types
  * Uses expo-notifications for local device notifications
- * NO backend, NO user IDs, NO push notifications
  */
 
-/**
- * Notification channel for managing notification delivery
- */
+// ============================================================================
+// NOTIFICATION CHANNEL TYPES
+// ============================================================================
+
 export interface NotificationChannel {
   id: string;
   channel_type: 'push' | 'in_app';
   channel_address: string;
-  preferences: Record<string, any>;
+  preferences: Record<string, unknown>;
   is_verified: boolean;
   is_active: boolean;
   created_at: string;
 }
 
-/**
- * Notification data structure
- */
-export interface Notification {
-  id: string;
-  title: string;
-  body: string;
-  scheduled_for?: string;
-  data?: Record<string, any>;
-}
+// ============================================================================
+// NOTIFICATION TRIGGER TYPES
+// ============================================================================
 
-/**
- * User notification preferences
- */
-export interface NotificationPreferences {
-  push_enabled: boolean;
-  quiet_hours: {
-    enabled: boolean;
-    start_time: string;
-    end_time: string;
-    timezone: string;
-  };
-  categories: Record<string, {
-    push: boolean;
-    in_app: boolean;
-  }>;
-}
-
-/**
- * Trigger types for scheduling notifications
- */
 export type NotificationTrigger =
   | { type: 'date'; date: Date }
   | { type: 'daily'; hour: number; minute: number }
   | { type: 'weekly'; weekday: number; hour: number; minute: number }
   | { type: 'monthly'; day: number; hour: number; minute: number };
 
-/**
- * Options for scheduling a notification
- */
 export interface ScheduleNotificationOptions {
   title: string;
   body: string;
-  data?: Record<string, any>;
+  data?: Record<string, unknown>;
   trigger: NotificationTrigger;
   sound?: boolean | string;
   badge?: number;
   categoryIdentifier?: string;
 }
 
-/**
- * Scheduled notification details
- */
 export interface ScheduledNotification {
   identifier: string;
   content: {
     title: string;
     body: string;
-    data: Record<string, any>;
+    data: Record<string, unknown>;
   };
-  trigger: any;
+  trigger: unknown;
+}
+
+// ============================================================================
+// TIME PRESET TYPES
+// ============================================================================
+
+export interface TimePreset {
+  id: string;
+  hour: number;
+  minute: number;
+  labelKey: string;
+  iconName: string;
+}
+
+// ============================================================================
+// REMINDER TYPES
+// ============================================================================
+
+export type ReminderFrequency = 'once' | 'daily' | 'weekly' | 'monthly';
+
+export interface Reminder {
+  id: string;
+  title: string;
+  body: string;
+  frequency: ReminderFrequency;
+  timePresetId?: string;
+  hour: number;
+  minute: number;
+  weekday?: number;
+  dayOfMonth?: number;
+  enabled: boolean;
+  notificationId?: string;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface CreateReminderInput {
+  title: string;
+  body: string;
+  frequency: ReminderFrequency;
+  timePresetId?: string;
+  hour: number;
+  minute: number;
+  weekday?: number;
+  dayOfMonth?: number;
+}
+
+export interface UpdateReminderInput {
+  title?: string;
+  body?: string;
+  frequency?: ReminderFrequency;
+  timePresetId?: string;
+  hour?: number;
+  minute?: number;
+  weekday?: number;
+  dayOfMonth?: number;
+  enabled?: boolean;
+}
+
+// ============================================================================
+// QUIET HOURS TYPES
+// ============================================================================
+
+export interface QuietHoursConfig {
+  enabled: boolean;
+  startHour: number;
+  startMinute: number;
+  endHour: number;
+  endMinute: number;
+}
+
+// ============================================================================
+// NOTIFICATION PREFERENCES
+// ============================================================================
+
+export interface NotificationPreferences {
+  enabled: boolean;
+  sound: boolean;
+  vibration: boolean;
+  quietHours: QuietHoursConfig;
+}
+
+// ============================================================================
+// SCREEN CONFIGURATION TYPES
+// ============================================================================
+
+export interface ReminderTranslations {
+  screenTitle: string;
+  emptyTitle: string;
+  emptyDescription: string;
+  addButtonLabel: string;
+  editButtonLabel: string;
+  deleteButtonLabel: string;
+  enabledLabel: string;
+  disabledLabel: string;
+  frequencyOnce: string;
+  frequencyDaily: string;
+  frequencyWeekly: string;
+  frequencyMonthly: string;
+  timeLabel: string;
+  titlePlaceholder: string;
+  bodyPlaceholder: string;
+  saveButtonLabel: string;
+  cancelButtonLabel: string;
+}
+
+export interface QuietHoursTranslations {
+  title: string;
+  description: string;
+  startTimeLabel: string;
+  endTimeLabel: string;
+  enabledLabel: string;
+}
+
+export interface NotificationSettingsTranslations {
+  screenTitle: string;
+  masterToggleTitle: string;
+  masterToggleDescription: string;
+  soundTitle: string;
+  soundDescription: string;
+  vibrationTitle: string;
+  vibrationDescription: string;
+  remindersTitle: string;
+  remindersDescription: string;
+  quietHoursTitle: string;
+  quietHoursDescription: string;
 }

package/src/infrastructure/storage/RemindersStore.ts

@@ -0,0 +1,150 @@
+/**
+ * Reminders Store - Zustand State Management
+ * Manages reminder state with AsyncStorage persistence
+ */
+
+import { create } from 'zustand';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import type { Reminder, QuietHoursConfig, NotificationPreferences } from '../services/types';
+
+const STORAGE_KEYS = {
+  REMINDERS: '@notifications:reminders',
+  PREFERENCES: '@notifications:preferences',
+  QUIET_HOURS: '@notifications:quiet_hours',
+} as const;
+
+// ============================================================================
+// STORE INTERFACE
+// ============================================================================
+
+interface RemindersState {
+  reminders: Reminder[];
+  preferences: NotificationPreferences;
+  isLoading: boolean;
+  isInitialized: boolean;
+}
+
+interface RemindersActions {
+  loadReminders: () => Promise<void>;
+  addReminder: (reminder: Reminder) => Promise<void>;
+  updateReminder: (id: string, updates: Partial<Reminder>) => Promise<void>;
+  deleteReminder: (id: string) => Promise<void>;
+  toggleReminder: (id: string) => Promise<void>;
+  loadPreferences: () => Promise<void>;
+  updatePreferences: (updates: Partial<NotificationPreferences>) => Promise<void>;
+  updateQuietHours: (quietHours: QuietHoursConfig) => Promise<void>;
+  reset: () => Promise<void>;
+}
+
+type RemindersStore = RemindersState & RemindersActions;
+
+// ============================================================================
+// DEFAULT VALUES
+// ============================================================================
+
+const DEFAULT_PREFERENCES: NotificationPreferences = {
+  enabled: false,
+  sound: false,
+  vibration: false,
+  quietHours: {
+    enabled: false,
+    startHour: 22,
+    startMinute: 0,
+    endHour: 7,
+    endMinute: 0,
+  },
+};
+
+// ============================================================================
+// STORE IMPLEMENTATION
+// ============================================================================
+
+export const useRemindersStore = create<RemindersStore>((set, get) => ({
+  reminders: [],
+  preferences: DEFAULT_PREFERENCES,
+  isLoading: true,
+  isInitialized: false,
+
+  loadReminders: async () => {
+    try {
+      const data = await AsyncStorage.getItem(STORAGE_KEYS.REMINDERS);
+      const reminders = data ? JSON.parse(data) : [];
+      set({ reminders, isLoading: false, isInitialized: true });
+    } catch {
+      set({ reminders: [], isLoading: false, isInitialized: true });
+    }
+  },
+
+  addReminder: async (reminder: Reminder) => {
+    const { reminders } = get();
+    const updated = [...reminders, reminder];
+    set({ reminders: updated });
+    await AsyncStorage.setItem(STORAGE_KEYS.REMINDERS, JSON.stringify(updated));
+  },
+
+  updateReminder: async (id: string, updates: Partial<Reminder>) => {
+    const { reminders } = get();
+    const updated = reminders.map(r =>
+      r.id === id ? { ...r, ...updates, updatedAt: new Date().toISOString() } : r
+    );
+    set({ reminders: updated });
+    await AsyncStorage.setItem(STORAGE_KEYS.REMINDERS, JSON.stringify(updated));
+  },
+
+  deleteReminder: async (id: string) => {
+    const { reminders } = get();
+    const updated = reminders.filter(r => r.id !== id);
+    set({ reminders: updated });
+    await AsyncStorage.setItem(STORAGE_KEYS.REMINDERS, JSON.stringify(updated));
+  },
+
+  toggleReminder: async (id: string) => {
+    const { reminders } = get();
+    const updated = reminders.map(r =>
+      r.id === id ? { ...r, enabled: !r.enabled, updatedAt: new Date().toISOString() } : r
+    );
+    set({ reminders: updated });
+    await AsyncStorage.setItem(STORAGE_KEYS.REMINDERS, JSON.stringify(updated));
+  },
+
+  loadPreferences: async () => {
+    try {
+      const data = await AsyncStorage.getItem(STORAGE_KEYS.PREFERENCES);
+      const preferences = data ? { ...DEFAULT_PREFERENCES, ...JSON.parse(data) } : DEFAULT_PREFERENCES;
+      set({ preferences });
+    } catch {
+      set({ preferences: DEFAULT_PREFERENCES });
+    }
+  },
+
+  updatePreferences: async (updates: Partial<NotificationPreferences>) => {
+    const { preferences } = get();
+    const updated = { ...preferences, ...updates };
+    set({ preferences: updated });
+    await AsyncStorage.setItem(STORAGE_KEYS.PREFERENCES, JSON.stringify(updated));
+  },
+
+  updateQuietHours: async (quietHours: QuietHoursConfig) => {
+    const { preferences } = get();
+    const updated = { ...preferences, quietHours };
+    set({ preferences: updated });
+    await AsyncStorage.setItem(STORAGE_KEYS.PREFERENCES, JSON.stringify(updated));
+  },
+
+  reset: async () => {
+    set({ reminders: [], preferences: DEFAULT_PREFERENCES });
+    await AsyncStorage.multiRemove([STORAGE_KEYS.REMINDERS, STORAGE_KEYS.PREFERENCES]);
+  },
+}));
+
+// ============================================================================
+// SELECTOR HOOKS
+// ============================================================================
+
+export const useReminders = () => useRemindersStore(state => state.reminders);
+export const useEnabledReminders = () => useRemindersStore(state => state.reminders.filter(r => r.enabled));
+export const useReminderById = (id: string) => useRemindersStore(state => state.reminders.find(r => r.id === id));
+export const useNotificationPreferences = () => useRemindersStore(state => state.preferences);
+export const useQuietHours = () => useRemindersStore(state => state.preferences.quietHours);
+export const useRemindersLoading = () => useRemindersStore(state => state.isLoading);
+export const useRemindersInitialized = () => useRemindersStore(state => state.isInitialized);

package/src/presentation/components/FormButton.tsx

@@ -0,0 +1,66 @@
+/**
+ * FormButton Component
+ * Simple button for forms
+ */
+
+import React, { useMemo } from 'react';
+import { TouchableOpacity, StyleSheet } from 'react-native';
+import { AtomicText } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+
+export interface FormButtonProps {
+  label: string;
+  onPress: () => void;
+  variant?: 'primary' | 'secondary';
+  disabled?: boolean;
+}
+
+export const FormButton: React.FC<FormButtonProps> = ({
+  label,
+  onPress,
+  variant = 'primary',
+  disabled = false,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  const isPrimary = variant === 'primary';
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.button,
+        isPrimary ? styles.primaryButton : styles.secondaryButton,
+        disabled ? styles.disabled : undefined,
+      ]}
+      onPress={onPress}
+      disabled={disabled}
+      activeOpacity={0.7}
+    >
+      <AtomicText
+        type="bodyMedium"
+        style={[styles.label, isPrimary ? styles.primaryLabel : styles.secondaryLabel]}
+      >
+        {label}
+      </AtomicText>
+    </TouchableOpacity>
+  );
+};
+
+const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    button: {
+      flex: 1,
+      paddingVertical: 14,
+      paddingHorizontal: 16,
+      borderRadius: 10,
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    primaryButton: { backgroundColor: tokens.colors.primary },
+    secondaryButton: { backgroundColor: tokens.colors.surfaceSecondary },
+    disabled: { opacity: 0.5 },
+    label: { fontWeight: '600' },
+    primaryLabel: { color: tokens.colors.surface },
+    secondaryLabel: { color: tokens.colors.textPrimary },
+  });

package/src/presentation/components/FrequencySelector.tsx

@@ -0,0 +1,72 @@
+/**
+ * FrequencySelector Component
+ * Allows selection of reminder frequency
+ */
+
+import React, { useMemo } from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import type { ReminderFrequency } from '../../infrastructure/services/types';
+import type { FrequencyOption } from '../../infrastructure/config/reminderPresets';
+
+export interface FrequencySelectorProps {
+  options: FrequencyOption[];
+  selectedFrequency: ReminderFrequency;
+  onSelect: (frequency: ReminderFrequency) => void;
+  getLabel: (labelKey: string) => string;
+}
+
+export const FrequencySelector: React.FC<FrequencySelectorProps> = ({
+  options,
+  selectedFrequency,
+  onSelect,
+  getLabel,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  return (
+    <View style={styles.container}>
+      {options.map(option => {
+        const isSelected = selectedFrequency === option.id;
+        return (
+          <TouchableOpacity
+            key={option.id}
+            style={[styles.button, isSelected ? styles.selectedButton : undefined]}
+            onPress={() => onSelect(option.id)}
+            activeOpacity={0.7}
+          >
+            <AtomicIcon
+              name={option.iconName}
+              size="sm"
+              color={isSelected ? 'surface' : 'textSecondary'}
+            />
+            <AtomicText type="bodySmall" style={isSelected ? styles.selectedText : styles.text}>
+              {getLabel(option.labelKey)}
+            </AtomicText>
+          </TouchableOpacity>
+        );
+      })}
+    </View>
+  );
+};
+
+const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: { flexDirection: 'row', gap: 8 },
+    button: {
+      flex: 1,
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center',
+      paddingVertical: 10,
+      paddingHorizontal: 8,
+      borderRadius: 8,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      gap: 6,
+    },
+    selectedButton: { backgroundColor: tokens.colors.primary },
+    text: { color: tokens.colors.textSecondary },
+    selectedText: { color: tokens.colors.surface },
+  });