@umituz/react-native-settings 4.21.11 → 4.21.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.21.11",
+  "version": "4.21.12",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -38,7 +38,6 @@
     "@umituz/react-native-auth": "latest",
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-localization": "latest",
-    "@umituz/react-native-notifications": "latest",
     "@umituz/react-native-storage": "latest",
     "@umituz/react-native-tanstack": "latest",
     "firebase": "^12.7.0"
@@ -48,6 +47,11 @@
     "@react-navigation/native": ">=6.0.0",
     "@react-navigation/stack": ">=6.0.0",
     "@tanstack/react-query": ">=5.0.0",
+    "expo-notifications": ">=0.28.0",
+    "expo-device": ">=6.0.0",
+    "expo-haptics": ">=15.0.0",
+    "@react-native-community/datetimepicker": ">=8.0.0",
+    "@umituz/react-native-haptics": "latest",
     "react": ">=19.0.0",
     "react-native": ">=0.81.0",
     "react-native-safe-area-context": ">=4.0.0"
@@ -58,6 +62,11 @@
     "@react-navigation/stack": "^7.6.13",
     "@tanstack/react-query": "^5.0.0",
     "@types/react": "~19.1.10",
+    "expo-notifications": "~0.27.6",
+    "expo-device": "~7.0.0",
+    "expo-haptics": "~14.0.0",
+    "@react-native-community/datetimepicker": "^8.2.0",
+    "@umituz/react-native-haptics": "latest",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
     "@typescript-eslint/parser": "^7.18.0",
     "eslint": "^8.57.0",

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

@@ -1,91 +1,46 @@
-/**
- * Gamification Screen Component
- * Wrapper for gamification screen
- */
+import React from 'react';
+import { useGamification } from '../hooks/useGamification';
+import { GamificationScreen } from './GamificationScreen';
+import type { GamificationConfig } from '../types';
 
-import React, { useMemo } from "react";
-import { GamificationScreen as BaseGamificationScreen } from "./GamificationScreen";
-import { useGamification } from "../hooks/useGamification";
-import { useLocalization } from "@umituz/react-native-localization";
-import type { GamificationSettingsConfig } from "../types/settings";
-
-export interface GamificationScreenWrapperProps {
-  config: GamificationSettingsConfig;
+interface GamificationScreenWrapperProps {
+  config: GamificationConfig;
 }
 
-/**
- * Gamification Screen for Settings
- * Displays achievements, levels, streaks, and stats
- */
-export const GamificationScreenWrapper: React.FC<GamificationScreenWrapperProps> = ({
-  config,
-}) => {
-  const { t } = useLocalization();
-  const gamification = useGamification(config.config);
-
-  const screenProps = useMemo(() => {
-    // Map achievements to screen format
-    const achievements = gamification.achievements.map((achievement) => ({
-      id: achievement.id,
-      title: t(`gamification.achievements.${achievement.id}.title`),
-      description: t(`gamification.achievements.${achievement.id}.description`),
-      icon: "trophy",
-      isUnlocked: achievement.isUnlocked,
-      progress: achievement.progress,
-      threshold: achievement.threshold,
-    }));
-
-    // Map stats
-    const stats = [
-      {
-        icon: "star",
-        value: gamification.points,
-        label: t("gamification.stats.totalPoints"),
-      },
-      {
-        icon: "check-circle",
-        value: gamification.totalTasksCompleted,
-        label: t("gamification.stats.tasksCompleted"),
-      },
-      {
-        icon: "award",
-        value: gamification.achievements.filter((a) => a.isUnlocked).length,
-        label: t("gamification.stats.achievementsUnlocked"),
-      },
-    ];
-
-    // Level props
-    const levelProps = {
-      level: gamification.level.currentLevel,
-      points: gamification.level.currentPoints,
-      levelTitle: t("gamification.level.title", {
-        level: gamification.level.currentLevel,
-      }),
-      pointsToNext: gamification.level.pointsToNext,
-      progress: gamification.level.progress,
-      showPoints: true,
-    };
-
-    // Streak props
-    const streakProps = gamification.streak.current > 0
-      ? {
-          current: gamification.streak.current,
-          longest: gamification.streak.longest,
-          currentLabel: t("gamification.streak.current"),
-          bestLabel: t("gamification.streak.best"),
-          daysLabel: t("gamification.streak.days"),
-        }
-      : undefined;
-
-    return {
-      ...config.screenProps,
-      levelProps,
-      stats,
-      achievements,
-      streakProps,
-      emptyAchievementsText: t("gamification.achievements.empty"),
-    };
-  }, [gamification, config.screenProps, t]);
-
-  return <BaseGamificationScreen {...screenProps} />;
+export const GamificationScreenWrapper: React.FC<GamificationScreenWrapperProps> = ({ config }) => {
+  const {
+    points,
+    totalTasksCompleted,
+    level,
+    streak,
+    achievements,
+  } = useGamification(config);
+
+  return (
+    <GamificationScreen
+      title={config.translations.title}
+      statsTitle={config.translations.statsTitle}
+      achievementsTitle={config.translations.achievementsTitle}
+      streakTitle={config.translations.streakTitle}
+      levelProps={{
+        level: level.currentLevel,
+        currentPoints: level.currentPoints,
+        pointsToNext: level.pointsToNext,
+        progress: level.progress,
+        levelTitle: config.translations.levelTitle,
+      }}
+      streakProps={{
+        streak: streak.current,
+        longestStreak: streak.longest,
+        title: config.translations.streakTitle,
+      }}
+      stats={{
+        points,
+        tasksCompleted: totalTasksCompleted,
+        streak: streak.current,
+      }}
+      achievements={achievements}
+      emptyAchievementsText={config.translations.emptyAchievements}
+    />
+  );
 };

package/src/domains/gamification/components/index.ts

@@ -11,3 +11,4 @@ export { StreakDisplay, type StreakDisplayProps } from "./StreakDisplay";
 export { StatsCard, type StatsCardProps } from "./StatsCard";
 export { AchievementItem, type AchievementItemProps } from "./AchievementItem";
 export { GamificationScreen, type GamificationScreenProps } from "./GamificationScreen/index";
+export { GamificationScreenWrapper } from "./GamificationScreenWrapper";

package/src/domains/gamification/index.ts

@@ -1,5 +1,6 @@
 /**
- * @umituz/react-native-gamification
+ * Gamification Domain
+ * Part of @umituz/react-native-settings
  *
  * Generic gamification system for React Native apps
  * All text via props - NO hardcoded strings
@@ -19,12 +20,6 @@ export type {
   GamificationStore,
 } from "./types";
 
-// Settings Integration Types
-export type {
-  GamificationSettingsConfig,
-  GamificationMenuConfig,
-} from "./types/settings";
-
 // Store
 export { useGamificationStore } from "./store/gamificationStore";
 
@@ -58,8 +53,5 @@ export {
   type AchievementItemProps,
   GamificationScreen,
   type GamificationScreenProps,
+  GamificationScreenWrapper,
 } from "./components";
-
-// Settings Integration Components
-export { GamificationScreenWrapper } from "./components/GamificationScreenWrapper";
-export { GamificationSettingsItem } from "./components/GamificationSettingsItem";

package/src/index.ts

@@ -128,6 +128,9 @@ export * from "./domains/gamification";
 // PRESENTATION LAYER - Config Creator Utilities
 // =============================================================================
 
+// Notifications Domain
+export * from "./notifications";
+
 export {
   createAppearanceConfig,
   createLanguageConfig,

package/src/notifications/domains/quietHours/infrastructure/hooks/useQuietHoursActions.ts

@@ -0,0 +1,52 @@
+/**
+ * useQuietHoursActions Hook
+ * Manages quiet hours configuration
+ */
+
+import { useCallback } from 'react';
+import { usePreferencesStore, useQuietHours } from '../../../reminders/infrastructure/storage/RemindersStore';
+import type { QuietHoursConfig } from '../../../../infrastructure/services/types';
+
+export const useQuietHoursActions = () => {
+  const quietHours = useQuietHours();
+  const { updateQuietHours } = usePreferencesStore();
+
+  const setQuietHoursEnabled = useCallback(async (enabled: boolean): Promise<void> => {
+    await updateQuietHours({ ...quietHours, enabled });
+  }, [quietHours, updateQuietHours]);
+
+  const setStartTime = useCallback(async (hour: number, minute: number): Promise<void> => {
+    await updateQuietHours({ ...quietHours, startHour: hour, startMinute: minute });
+  }, [quietHours, updateQuietHours]);
+
+  const setEndTime = useCallback(async (hour: number, minute: number): Promise<void> => {
+    await updateQuietHours({ ...quietHours, endHour: hour, endMinute: minute });
+  }, [quietHours, updateQuietHours]);
+
+  const setQuietHours = useCallback(async (config: QuietHoursConfig): Promise<void> => {
+    await updateQuietHours(config);
+  }, [updateQuietHours]);
+
+  const isInQuietHours = useCallback((): boolean => {
+    if (!quietHours.enabled) return false;
+
+    const now = new Date();
+    const currentMinutes = now.getHours() * 60 + now.getMinutes();
+    const startMinutes = quietHours.startHour * 60 + quietHours.startMinute;
+    const endMinutes = quietHours.endHour * 60 + quietHours.endMinute;
+
+    if (startMinutes <= endMinutes) {
+      return currentMinutes >= startMinutes && currentMinutes < endMinutes;
+    }
+    return currentMinutes >= startMinutes || currentMinutes < endMinutes;
+  }, [quietHours]);
+
+  return {
+    quietHours,
+    setQuietHoursEnabled,
+    setStartTime,
+    setEndTime,
+    setQuietHours,
+    isInQuietHours,
+  };
+};

package/src/notifications/domains/quietHours/presentation/components/QuietHoursCard.tsx

@@ -0,0 +1,112 @@
+/**
+ * QuietHoursCard Component
+ * Displays and manages quiet hours settings
+ */
+
+import React, { useMemo } from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { AtomicText, AtomicIcon, AtomicCard } from '@umituz/react-native-design-system';
+import { Switch } from 'react-native';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import { SettingRow } from '../../../../presentation/components/SettingRow';
+import type { QuietHoursConfig, QuietHoursTranslations } from '../../../../infrastructure/services/types';
+
+export interface QuietHoursCardProps {
+  config: QuietHoursConfig;
+  translations: QuietHoursTranslations;
+  onToggle: (enabled: boolean) => void;
+  onStartTimePress: () => void;
+  onEndTimePress: () => void;
+}
+
+const formatTime = (hour: number, minute: number): string => {
+  return `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+};
+
+export const QuietHoursCard: React.FC<QuietHoursCardProps> = ({
+  config,
+  translations,
+  onToggle,
+  onStartTimePress,
+  onEndTimePress,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = useMemo(() => createStyles(tokens), [tokens]);
+
+  return (
+    <AtomicCard style={styles.card}>
+      <View style={styles.header}>
+        <View style={styles.iconContainer}>
+          <AtomicIcon name="moon" size="md" color="primary" />
+        </View>
+        <View style={styles.headerText}>
+          <AtomicText type="bodyLarge">{translations.title}</AtomicText>
+          <AtomicText type="bodySmall" style={styles.description}>{translations.description}</AtomicText>
+        </View>
+        <Switch
+          value={config.enabled}
+          onValueChange={onToggle}
+          trackColor={{ false: tokens.colors.surfaceSecondary, true: tokens.colors.primary }}
+          thumbColor={tokens.colors.surface}
+        />
+      </View>
+
+      {config.enabled && (
+        <View style={styles.timeContainer}>
+          <TouchableOpacity style={styles.timeButton} onPress={onStartTimePress} activeOpacity={0.7}>
+            <AtomicText type="bodySmall" style={styles.timeLabel}>{translations.startTimeLabel}</AtomicText>
+            <AtomicText type="bodyLarge" style={styles.timeValue}>
+              {formatTime(config.startHour, config.startMinute)}
+            </AtomicText>
+          </TouchableOpacity>
+
+          <View style={styles.timeSeparator}>
+            <AtomicIcon name="arrow-forward" size="sm" color="secondary" />
+          </View>
+
+          <TouchableOpacity style={styles.timeButton} onPress={onEndTimePress} activeOpacity={0.7}>
+            <AtomicText type="bodySmall" style={styles.timeLabel}>{translations.endTimeLabel}</AtomicText>
+            <AtomicText type="bodyLarge" style={styles.timeValue}>
+              {formatTime(config.endHour, config.endMinute)}
+            </AtomicText>
+          </TouchableOpacity>
+        </View>
+      )}
+    </AtomicCard>
+  );
+};
+
+const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    card: { padding: 16, backgroundColor: tokens.colors.surface },
+    header: { flexDirection: 'row', alignItems: 'center' },
+    iconContainer: {
+      width: 48,
+      height: 48,
+      borderRadius: 24,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      justifyContent: 'center',
+      alignItems: 'center',
+      marginRight: 12,
+    },
+    headerText: { flex: 1, marginRight: 12 },
+    description: { color: tokens.colors.textSecondary, marginTop: 2 },
+    timeContainer: {
+      flexDirection: 'row',
+      alignItems: 'center',
+      marginTop: 16,
+      paddingTop: 16,
+      borderTopWidth: 1,
+      borderTopColor: tokens.colors.surfaceSecondary,
+    },
+    timeButton: {
+      flex: 1,
+      backgroundColor: tokens.colors.surfaceSecondary,
+      borderRadius: 8,
+      padding: 12,
+      alignItems: 'center',
+    },
+    timeLabel: { color: tokens.colors.textSecondary, marginBottom: 4 },
+    timeValue: { color: tokens.colors.textPrimary, fontWeight: '600' },
+    timeSeparator: { paddingHorizontal: 12 },
+  });

package/src/notifications/domains/reminders/infrastructure/config/reminderPresets.ts

@@ -0,0 +1,120 @@
+/**
+ * Reminder Presets Configuration
+ * Default time presets and frequency options for reminders
+ */
+
+import type { TimePreset, ReminderFrequency } from '../../../../infrastructure/services/types';
+
+// ============================================================================
+// DEFAULT TIME PRESETS
+// ============================================================================
+
+export const DEFAULT_TIME_PRESETS: TimePreset[] = [
+  {
+    id: 'morning',
+    hour: 8,
+    minute: 0,
+    labelKey: 'notifications.presets.morning',
+    iconName: 'sunny',
+  },
+  {
+    id: 'noon',
+    hour: 12,
+    minute: 0,
+    labelKey: 'notifications.presets.noon',
+    iconName: 'sunny',
+  },
+  {
+    id: 'afternoon',
+    hour: 15,
+    minute: 0,
+    labelKey: 'notifications.presets.afternoon',
+    iconName: 'partly-sunny',
+  },
+  {
+    id: 'evening',
+    hour: 18,
+    minute: 0,
+    labelKey: 'notifications.presets.evening',
+    iconName: 'partly-sunny',
+  },
+  {
+    id: 'night',
+    hour: 21,
+    minute: 0,
+    labelKey: 'notifications.presets.night',
+    iconName: 'moon',
+  },
+];
+
+// ============================================================================
+// FREQUENCY OPTIONS
+// ============================================================================
+
+export interface FrequencyOption {
+  id: ReminderFrequency;
+  labelKey: string;
+  iconName: string;
+}
+
+export const FREQUENCY_OPTIONS: FrequencyOption[] = [
+  {
+    id: 'once',
+    labelKey: 'notifications.frequency.once',
+    iconName: 'calendar',
+  },
+  {
+    id: 'daily',
+    labelKey: 'notifications.frequency.daily',
+    iconName: 'repeat',
+  },
+  {
+    id: 'weekly',
+    labelKey: 'notifications.frequency.weekly',
+    iconName: 'calendar',
+  },
+  {
+    id: 'monthly',
+    labelKey: 'notifications.frequency.monthly',
+    iconName: 'calendar',
+  },
+];
+
+// ============================================================================
+// WEEKDAY OPTIONS
+// ============================================================================
+
+export interface WeekdayOption {
+  id: number;
+  labelKey: string;
+  shortLabelKey: string;
+}
+
+export const WEEKDAY_OPTIONS: WeekdayOption[] = [
+  { id: 1, labelKey: 'notifications.weekdays.sunday', shortLabelKey: 'notifications.weekdays.sun' },
+  { id: 2, labelKey: 'notifications.weekdays.monday', shortLabelKey: 'notifications.weekdays.mon' },
+  { id: 3, labelKey: 'notifications.weekdays.tuesday', shortLabelKey: 'notifications.weekdays.tue' },
+  { id: 4, labelKey: 'notifications.weekdays.wednesday', shortLabelKey: 'notifications.weekdays.wed' },
+  { id: 5, labelKey: 'notifications.weekdays.thursday', shortLabelKey: 'notifications.weekdays.thu' },
+  { id: 6, labelKey: 'notifications.weekdays.friday', shortLabelKey: 'notifications.weekdays.fri' },
+  { id: 7, labelKey: 'notifications.weekdays.saturday', shortLabelKey: 'notifications.weekdays.sat' },
+];
+
+// ============================================================================
+// HELPER FUNCTIONS
+// ============================================================================
+
+export const getTimePresetById = (id: string): TimePreset | undefined => {
+  return DEFAULT_TIME_PRESETS.find(preset => preset.id === id);
+};
+
+export const formatTime = (hour: number, minute: number): string => {
+  const h = hour.toString().padStart(2, '0');
+  const m = minute.toString().padStart(2, '0');
+  return `${h}:${m}`;
+};
+
+export const parseTime = (timeString: string): { hour: number; minute: number } => {
+  const [hour, minute] = timeString.split(':').map(Number);
+  return { hour: hour || 0, minute: minute || 0 };
+};

package/src/notifications/domains/reminders/infrastructure/hooks/useReminderActions.ts

@@ -0,0 +1,106 @@
+/**
+ * useReminderActions Hook
+ * Handles reminder CRUD operations with notification scheduling
+ */
+
+import { useCallback } from 'react';
+import { useRemindersStore } from '../storage/RemindersStore';
+import { NotificationScheduler } from '../../../../infrastructure/services/NotificationScheduler';
+import { generateReminderId } from '../../../../infrastructure/utils/idGenerator';
+import { buildTrigger } from '../../../../infrastructure/utils/triggerBuilder';
+import type { Reminder, CreateReminderInput, UpdateReminderInput } from '../../../../infrastructure/services/types';
+
+const scheduler = new NotificationScheduler();
+
+export const useReminderActions = () => {
+  const { addReminder, updateReminder, deleteReminder, toggleReminder } = useRemindersStore();
+
+  const createReminder = useCallback(async (input: CreateReminderInput): Promise<Reminder> => {
+    const now = new Date().toISOString();
+    const reminder: Reminder = {
+      id: generateReminderId(),
+      ...input,
+      enabled: true,
+      createdAt: now,
+      updatedAt: now,
+    };
+
+    const trigger = buildTrigger(reminder);
+    const notificationId = await scheduler.scheduleNotification({
+      title: reminder.title,
+      body: reminder.body,
+      trigger,
+      data: { reminderId: reminder.id },
+    });
+
+    reminder.notificationId = notificationId;
+    await addReminder(reminder);
+
+    return reminder;
+  }, [addReminder]);
+
+  const editReminder = useCallback(async (id: string, input: UpdateReminderInput): Promise<void> => {
+    const { reminders } = useRemindersStore.getState();
+    const existing = reminders.find(r => r.id === id);
+    if (!existing) return;
+
+    if (existing.notificationId) {
+      await scheduler.cancelNotification(existing.notificationId);
+    }
+
+    const updated: Reminder = { ...existing, ...input, updatedAt: new Date().toISOString() };
+
+    if (updated.enabled) {
+      const trigger = buildTrigger(updated);
+      const notificationId = await scheduler.scheduleNotification({
+        title: updated.title,
+        body: updated.body,
+        trigger,
+        data: { reminderId: updated.id },
+      });
+      updated.notificationId = notificationId;
+    } else {
+      updated.notificationId = undefined;
+    }
+
+    await updateReminder(id, updated);
+  }, [updateReminder]);
+
+  const removeReminder = useCallback(async (id: string): Promise<void> => {
+    const { reminders } = useRemindersStore.getState();
+    const reminder = reminders.find(r => r.id === id);
+
+    if (reminder?.notificationId) {
+      await scheduler.cancelNotification(reminder.notificationId);
+    }
+
+    await deleteReminder(id);
+  }, [deleteReminder]);
+
+  const toggleReminderEnabled = useCallback(async (id: string): Promise<void> => {
+    const { reminders } = useRemindersStore.getState();
+    const reminder = reminders.find(r => r.id === id);
+    if (!reminder) return;
+
+    if (reminder.enabled && reminder.notificationId) {
+      await scheduler.cancelNotification(reminder.notificationId);
+      await updateReminder(id, { enabled: false, notificationId: undefined });
+    } else if (!reminder.enabled) {
+      const trigger = buildTrigger(reminder);
+      const notificationId = await scheduler.scheduleNotification({
+        title: reminder.title,
+        body: reminder.body,
+        trigger,
+        data: { reminderId: reminder.id },
+      });
+      await updateReminder(id, { enabled: true, notificationId });
+    }
+  }, [updateReminder]);
+
+  return {
+    createReminder,
+    editReminder,
+    removeReminder,
+    toggleReminderEnabled,
+  };
+};