@umituz/react-native-design-system 4.23.83 → 4.23.85

package/src/media/infrastructure/utils/PermissionManager.ts

@@ -0,0 +1,92 @@
+/**
+ * Permission Manager
+ *
+ * Centralized permission handling for media operations.
+ */
+
+import * as ImagePicker from "expo-image-picker";
+import { MediaLibraryPermission } from "../../domain/entities/Media";
+import { mapPermissionStatus } from "./mediaPickerMappers";
+
+/**
+ * Permission type for media operations
+ */
+export type PermissionType = 'camera' | 'mediaLibrary';
+
+/**
+ * Permission manager for media operations
+ */
+export class PermissionManager {
+    /**
+     * Requests camera permission
+     */
+    static async requestCameraPermission(): Promise<MediaLibraryPermission> {
+        try {
+            const { status } = await ImagePicker.requestCameraPermissionsAsync();
+            return mapPermissionStatus(status);
+        } catch {
+            return MediaLibraryPermission.DENIED;
+        }
+    }
+
+    /**
+     * Requests media library permission
+     */
+    static async requestMediaLibraryPermission(): Promise<MediaLibraryPermission> {
+        try {
+            const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+            return mapPermissionStatus(status);
+        } catch {
+            return MediaLibraryPermission.DENIED;
+        }
+    }
+
+    /**
+     * Gets current camera permission status
+     */
+    static async getCameraPermissionStatus(): Promise<MediaLibraryPermission> {
+        try {
+            const { status } = await ImagePicker.getCameraPermissionsAsync();
+            return mapPermissionStatus(status);
+        } catch {
+            return MediaLibraryPermission.DENIED;
+        }
+    }
+
+    /**
+     * Gets current media library permission status
+     */
+    static async getMediaLibraryPermissionStatus(): Promise<MediaLibraryPermission> {
+        try {
+            const { status } = await ImagePicker.getMediaLibraryPermissionsAsync();
+            return mapPermissionStatus(status);
+        } catch {
+            return MediaLibraryPermission.DENIED;
+        }
+    }
+
+    /**
+     * Generic permission request based on type
+     */
+    static async requestPermission(type: PermissionType): Promise<MediaLibraryPermission> {
+        return type === 'camera'
+            ? this.requestCameraPermission()
+            : this.requestMediaLibraryPermission();
+    }
+
+    /**
+     * Generic permission status check based on type
+     */
+    static async getPermissionStatus(type: PermissionType): Promise<MediaLibraryPermission> {
+        return type === 'camera'
+            ? this.getCameraPermissionStatus()
+            : this.getMediaLibraryPermissionStatus();
+    }
+
+    /**
+     * Checks if permission is granted
+     */
+    static isPermissionGranted(status: MediaLibraryPermission): boolean {
+        return status === MediaLibraryPermission.GRANTED || status === MediaLibraryPermission.LIMITED;
+    }
+}

package/src/media/presentation/hooks/useMedia.ts

@@ -7,6 +7,7 @@
 
 import { useState, useCallback } from "react";
 import { MediaPickerService } from "../../infrastructure/services/MediaPickerService";
+import { PermissionManager } from "../../infrastructure/utils/PermissionManager";
 import type {
   MediaPickerOptions,
   MediaPickerResult,
@@ -140,7 +141,7 @@ export const useMedia = () => {
   const requestCameraPermission =
     useCallback(async (): Promise<MediaLibraryPermission> => {
       try {
-        return await MediaPickerService.requestCameraPermission();
+        return await PermissionManager.requestCameraPermission();
       } catch {
         return MediaLibraryPermission.DENIED;
       }
@@ -149,7 +150,7 @@ export const useMedia = () => {
   const requestMediaLibraryPermission =
     useCallback(async (): Promise<MediaLibraryPermission> => {
       try {
-        return await MediaPickerService.requestMediaLibraryPermission();
+        return await PermissionManager.requestMediaLibraryPermission();
       } catch {
         return MediaLibraryPermission.DENIED;
       }
@@ -158,7 +159,7 @@ export const useMedia = () => {
   const getCameraPermissionStatus =
     useCallback(async (): Promise<MediaLibraryPermission> => {
       try {
-        return await MediaPickerService.getCameraPermissionStatus();
+        return await PermissionManager.getCameraPermissionStatus();
       } catch {
         return MediaLibraryPermission.DENIED;
       }
@@ -167,7 +168,7 @@ export const useMedia = () => {
   const getMediaLibraryPermissionStatus =
     useCallback(async (): Promise<MediaLibraryPermission> => {
       try {
-        return await MediaPickerService.getMediaLibraryPermissionStatus();
+        return await PermissionManager.getMediaLibraryPermissionStatus();
       } catch {
         return MediaLibraryPermission.DENIED;
       }

package/src/molecules/alerts/AlertBanner.tsx

@@ -6,15 +6,14 @@
  * Auto-dismisses after duration (default 3 seconds).
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { StyleSheet, View, Pressable } from 'react-native';
 import { useSafeAreaInsets } from '../../safe-area';
 import { AtomicText, AtomicIcon, useIconName } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
-import { Alert, AlertType, AlertPosition } from './AlertTypes';
+import { Alert, AlertPosition } from './AlertTypes';
 import { useAlertStore } from './AlertStore';
-
-const DEFAULT_DURATION = 3000;
+import { getAlertBackgroundColor, getAlertTextColor, DEFAULT_ALERT_DURATION } from './utils/alertUtils';
 
 interface AlertBannerProps {
     alert: Alert;
@@ -26,37 +25,22 @@ export function AlertBanner({ alert }: AlertBannerProps) {
     const tokens = useAppDesignTokens();
     const closeIcon = useIconName('close');
 
-    const handleDismiss = () => {
+    const handleDismiss = useCallback(() => {
         dismissAlert(alert.id);
         alert.onDismiss?.();
-    };
+    }, [alert.id, dismissAlert, alert.onDismiss]);
 
     // Auto-dismiss after duration
     useEffect(() => {
-        const duration = alert.duration ?? DEFAULT_DURATION;
+        const duration = alert.duration ?? DEFAULT_ALERT_DURATION;
         if (duration <= 0) return;
 
         const timer = setTimeout(handleDismiss, duration);
         return () => clearTimeout(timer);
-    }, [alert.id, alert.duration]);
-
-    const getBackgroundColor = (type: AlertType): string => {
-        switch (type) {
-            case AlertType.SUCCESS:
-                return tokens.colors.success;
-            case AlertType.ERROR:
-                return tokens.colors.error;
-            case AlertType.WARNING:
-                return tokens.colors.warning;
-            case AlertType.INFO:
-                return tokens.colors.info;
-            default:
-                return tokens.colors.backgroundSecondary;
-        }
-    };
+    }, [alert.duration, handleDismiss]);
 
-    const backgroundColor = getBackgroundColor(alert.type);
-    const textColor = tokens.colors.textInverse;
+    const backgroundColor = getAlertBackgroundColor(alert.type, tokens);
+    const textColor = getAlertTextColor(tokens);
     const isTop = alert.position === AlertPosition.TOP;
 
     return (

package/src/molecules/alerts/AlertInline.tsx

@@ -6,7 +6,8 @@ import React from 'react';
 import { StyleSheet, View } from 'react-native';
 import { AtomicText } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
-import { Alert, AlertType } from './AlertTypes';
+import { Alert } from './AlertTypes';
+import { getAlertBorderColor, getAlertBackgroundColorInline } from './utils/alertUtils';
 
 interface AlertInlineProps {
     alert: Alert;
@@ -15,32 +16,12 @@ interface AlertInlineProps {
 export const AlertInline: React.FC<AlertInlineProps> = ({ alert }) => {
     const tokens = useAppDesignTokens();
 
-    const getBorderColor = () => {
-        switch (alert.type) {
-            case AlertType.SUCCESS: return tokens.colors.success;
-            case AlertType.ERROR: return tokens.colors.error;
-            case AlertType.WARNING: return tokens.colors.warning;
-            case AlertType.INFO: return tokens.colors.info;
-            default: return tokens.colors.border;
-        }
-    };
-
-    const getBackgroundColor = () => {
-        switch (alert.type) {
-            case AlertType.SUCCESS: return tokens.colors.success + '15';
-            case AlertType.ERROR: return tokens.colors.error + '15';
-            case AlertType.WARNING: return tokens.colors.warning + '15';
-            case AlertType.INFO: return tokens.colors.info + '15';
-            default: return tokens.colors.backgroundSecondary;
-        }
-    };
-
     return (
         <View style={[
             styles.container,
             {
-                borderColor: getBorderColor(),
-                backgroundColor: getBackgroundColor(),
+                borderColor: getAlertBorderColor(alert.type, tokens),
+                backgroundColor: getAlertBackgroundColorInline(alert.type, tokens),
                 borderRadius: tokens.borders.radius.sm,
                 padding: tokens.spacing.md,
                 marginVertical: tokens.spacing.sm,

package/src/molecules/alerts/AlertModal.tsx

@@ -6,8 +6,9 @@ import React from 'react';
 import { StyleSheet, View, Modal, Pressable } from 'react-native';
 import { AtomicText, AtomicButton } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
-import { Alert, AlertType } from './AlertTypes';
+import { Alert } from './AlertTypes';
 import { useAlertStore } from './AlertStore';
+import { getAlertBackgroundColor } from './utils/alertUtils';
 
 interface AlertModalProps {
     alert: Alert;
@@ -22,15 +23,7 @@ export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
         alert.onDismiss?.();
     };
 
-    const getHeaderColor = () => {
-        switch (alert.type) {
-            case AlertType.SUCCESS: return tokens.colors.success;
-            case AlertType.ERROR: return tokens.colors.error;
-            case AlertType.WARNING: return tokens.colors.warning;
-            case AlertType.INFO: return tokens.colors.info;
-            default: return tokens.colors.primary;
-        }
-    };
+    const headerColor = getAlertBackgroundColor(alert.type, tokens);
 
     return (
         <Modal
@@ -53,7 +46,7 @@ export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
                         borderColor: tokens.colors.border,
                     }
                 ]}>
-                    <View style={[styles.header, { backgroundColor: getHeaderColor() }]}>
+                    <View style={[styles.header, { backgroundColor: headerColor }]}>
                         <AtomicText type="titleLarge" style={{ color: tokens.colors.textInverse }}>
                             {alert.title}
                         </AtomicText>

package/src/molecules/alerts/AlertToast.tsx

@@ -5,18 +5,19 @@
  * Floats on top of content.
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useCallback } from 'react';
 import { StyleSheet, View, Pressable } from 'react-native';
 import { AtomicText, AtomicIcon, useIconName } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import { Alert } from './AlertTypes';
 import { useAlertStore } from './AlertStore';
 import {
-  getAlertBackgroundColor,
-  getActionButtonStyle,
-  getActionTextColor,
-  DEFAULT_TOAST_DURATION,
-} from './utils/alertToastHelpers';
+    getAlertBackgroundColor,
+    getAlertTextColor,
+    getActionButtonStyle,
+    getActionTextColor,
+    DEFAULT_ALERT_DURATION,
+} from './utils/alertUtils';
 
 interface AlertToastProps {
   alert: Alert;
@@ -27,28 +28,28 @@ export function AlertToast({ alert }: AlertToastProps) {
   const tokens = useAppDesignTokens();
   const closeIcon = useIconName('close');
 
-  const dismiss = () => {
+  const dismiss = useCallback(() => {
     dismissAlert(alert.id);
     alert.onDismiss?.();
-  };
+  }, [alert.id, dismissAlert, alert.onDismiss]);
 
-  const handleDismiss = () => {
+  const handleDismiss = useCallback(() => {
     if (alert.dismissible) {
       dismiss();
     }
-  };
+  }, [alert.dismissible, dismiss]);
 
   // Auto-dismiss after duration
   useEffect(() => {
-    const duration = alert.duration ?? DEFAULT_TOAST_DURATION;
+    const duration = alert.duration ?? DEFAULT_ALERT_DURATION;
     if (duration <= 0) return;
 
     const timer = setTimeout(dismiss, duration);
     return () => clearTimeout(timer);
-  }, [alert.id, alert.duration]);
+  }, [alert.duration, dismiss]);
 
   const backgroundColor = getAlertBackgroundColor(alert.type, tokens);
-  const textColor = tokens.colors.textInverse;
+  const textColor = getAlertTextColor(tokens);
 
   return (
     <View

package/src/molecules/alerts/utils/alertUtils.ts

@@ -0,0 +1,133 @@
+/**
+ * Alert Utilities
+ *
+ * Helper functions for alert component styling and behavior.
+ */
+
+import type { DesignTokens } from '../../../theme';
+import type { StyleProp, ViewStyle } from 'react-native';
+import { AlertType } from '../AlertTypes';
+import type { AlertAction } from '../AlertTypes';
+
+/**
+ * Gets background color for alert type
+ *
+ * @param type - Alert type
+ * @param tokens - Design tokens containing color definitions
+ * @returns Color string for the alert type
+ */
+export function getAlertBackgroundColor(type: AlertType, tokens: DesignTokens): string {
+    const colors = {
+        [AlertType.SUCCESS]: tokens.colors.success,
+        [AlertType.ERROR]: tokens.colors.error,
+        [AlertType.WARNING]: tokens.colors.warning,
+        [AlertType.INFO]: tokens.colors.info,
+    };
+    return colors[type] || tokens.colors.backgroundSecondary;
+}
+
+/**
+ * Gets border color for alert type
+ *
+ * @param type - Alert type
+ * @param tokens - Design tokens containing color definitions
+ * @returns Border color string for the alert type
+ */
+export function getAlertBorderColor(type: AlertType, tokens: DesignTokens): string {
+    const colors = {
+        [AlertType.SUCCESS]: tokens.colors.success,
+        [AlertType.ERROR]: tokens.colors.error,
+        [AlertType.WARNING]: tokens.colors.warning,
+        [AlertType.INFO]: tokens.colors.info,
+    };
+    return colors[type] || tokens.colors.border;
+}
+
+/**
+ * Gets background color with opacity for inline alerts
+ *
+ * @param type - Alert type
+ * @param tokens - Design tokens containing color definitions
+ * @param opacity - Opacity value (0-255 hex), default '15' for ~8%
+ * @returns Background color string with opacity
+ */
+export function getAlertBackgroundColorInline(type: AlertType, tokens: DesignTokens, opacity: string = '15'): string {
+    const baseColor = getAlertBackgroundColor(type, tokens);
+    return baseColor + opacity;
+}
+
+/**
+ * Gets text color for alert type
+ *
+ * @param tokens - Design tokens containing color definitions
+ * @returns Text color string (typically inverse for alerts)
+ */
+export function getAlertTextColor(tokens: DesignTokens): string {
+    return tokens.colors.textInverse;
+}
+
+/**
+ * Gets default icon for alert type
+ *
+ * @param type - Alert type
+ * @returns Icon name or undefined
+ */
+export function getAlertIcon(type: AlertType): string | undefined {
+    switch (type) {
+        case AlertType.SUCCESS:
+            return 'CheckCircle';
+        case AlertType.ERROR:
+            return 'AlertCircle';
+        case AlertType.WARNING:
+            return 'AlertTriangle';
+        case AlertType.INFO:
+            return 'Info';
+        default:
+            return undefined;
+    }
+}
+
+/**
+ * Gets action button style
+ *
+ * @param actionStyle - Button style type
+ * @param tokens - Design tokens
+ * @returns Style object
+ */
+export function getActionButtonStyle(
+    actionStyle: AlertAction['style'],
+    tokens: DesignTokens
+): StyleProp<ViewStyle> {
+    if (actionStyle === 'secondary') {
+        return {
+            backgroundColor: undefined,
+            borderWidth: 1,
+            borderColor: tokens.colors.textInverse,
+        };
+    }
+
+    const colors = {
+        primary: tokens.colors.backgroundPrimary,
+        destructive: tokens.colors.error,
+    };
+    return { backgroundColor: colors[actionStyle as keyof typeof colors] || tokens.colors.backgroundSecondary };
+}
+
+/**
+ * Gets action text color
+ *
+ * @param actionStyle - Button style type
+ * @param tokens - Design tokens
+ * @returns Text color string
+ */
+export function getActionTextColor(
+    actionStyle: AlertAction['style'],
+    tokens: DesignTokens
+): string {
+    return actionStyle === 'primary' ? tokens.colors.textPrimary : tokens.colors.textInverse;
+}
+
+/**
+ * Default alert duration in milliseconds
+ */
+export const DEFAULT_ALERT_DURATION = 3000;

package/src/molecules/calendar/infrastructure/storage/CalendarStore.ts

@@ -3,7 +3,7 @@
  * Convenience hook that combines all calendar stores
  */
 
-import { useMemo } from 'react';
+import { useMemo, useCallback } from 'react';
 import { useCalendarEvents } from '../stores/useCalendarEvents';
 import { useCalendarNavigation } from '../stores/useCalendarNavigation';
 import { useCalendarView } from '../stores/useCalendarView';
@@ -26,22 +26,22 @@ export const useCalendar = () => {
   const navigation = useCalendarNavigation();
   const view = useCalendarView();
 
-  // Utility functions
-  const getEventsForDate = (date: Date) => {
+  // Utility functions - memoized to prevent recreating on every render
+  const getEventsForDate = useCallback((date: Date) => {
     return events.events.filter(event => {
       const eventDate = new Date(event.date);
       return eventDate.toDateString() === date.toDateString();
     });
-  };
+  }, [events.events]);
 
-  const getEventsForMonth = (year: number, month: number) => {
+  const getEventsForMonth = useCallback((year: number, month: number) => {
     return events.events.filter(event => {
       const eventDate = new Date(event.date);
       return eventDate.getFullYear() === year && eventDate.getMonth() === month;
     });
-  };
+  }, [events.events]);
 
-  return {
+  return useMemo(() => ({
     // Events state and actions
     events: events.events,
     isLoading: events.isLoading,
@@ -70,7 +70,29 @@ export const useCalendar = () => {
     // Utility functions
     getEventsForDate,
     getEventsForMonth,
-  };
+  }), [
+    events.events,
+    events.isLoading,
+    events.error,
+    events.loadEvents,
+    events.addEvent,
+    events.updateEvent,
+    events.deleteEvent,
+    events.completeEvent,
+    events.uncompleteEvent,
+    events.clearError,
+    events.clearAllEvents,
+    navigation.selectedDate,
+    navigation.currentMonth,
+    navigation.setSelectedDate,
+    navigation.goToToday,
+    navigation.navigateMonth,
+    navigation.setCurrentMonth,
+    view.viewMode,
+    view.setViewMode,
+    getEventsForDate,
+    getEventsForMonth,
+  ]);
 };
 
 /**
@@ -85,6 +107,40 @@ export const useCalendarStore = () => {
     return CalendarService.getMonthDays(year, month, calendar.events);
   }, [calendar.currentMonth, calendar.events]);
 
+  const actions = useMemo(() => ({
+    loadEvents: calendar.loadEvents,
+    addEvent: calendar.addEvent,
+    updateEvent: calendar.updateEvent,
+    deleteEvent: calendar.deleteEvent,
+    completeEvent: calendar.completeEvent,
+    uncompleteEvent: calendar.uncompleteEvent,
+    setSelectedDate: calendar.setSelectedDate,
+    goToToday: calendar.goToToday,
+    navigateMonth: calendar.navigateMonth,
+    setCurrentMonth: calendar.setCurrentMonth,
+    setViewMode: calendar.setViewMode,
+    getEventsForDate: calendar.getEventsForDate,
+    getEventsForMonth: calendar.getEventsForMonth,
+    clearError: calendar.clearError,
+    clearAllEvents: calendar.clearAllEvents,
+  }), [
+    calendar.loadEvents,
+    calendar.addEvent,
+    calendar.updateEvent,
+    calendar.deleteEvent,
+    calendar.completeEvent,
+    calendar.uncompleteEvent,
+    calendar.setSelectedDate,
+    calendar.goToToday,
+    calendar.navigateMonth,
+    calendar.setCurrentMonth,
+    calendar.setViewMode,
+    calendar.getEventsForDate,
+    calendar.getEventsForMonth,
+    calendar.clearError,
+    calendar.clearAllEvents,
+  ]);
+
   return {
     events: calendar.events,
     selectedDate: calendar.selectedDate,
@@ -92,23 +148,7 @@ export const useCalendarStore = () => {
     viewMode: calendar.viewMode,
     isLoading: calendar.isLoading,
     error: calendar.error,
-    actions: {
-      loadEvents: calendar.loadEvents,
-      addEvent: calendar.addEvent,
-      updateEvent: calendar.updateEvent,
-      deleteEvent: calendar.deleteEvent,
-      completeEvent: calendar.completeEvent,
-      uncompleteEvent: calendar.uncompleteEvent,
-      setSelectedDate: calendar.setSelectedDate,
-      goToToday: calendar.goToToday,
-      navigateMonth: calendar.navigateMonth,
-      setCurrentMonth: calendar.setCurrentMonth,
-      setViewMode: calendar.setViewMode,
-      getEventsForDate: calendar.getEventsForDate,
-      getEventsForMonth: calendar.getEventsForMonth,
-      clearError: calendar.clearError,
-      clearAllEvents: calendar.clearAllEvents,
-    },
+    actions,
     days,
   };
 };

package/src/molecules/countdown/hooks/useCountdown.ts

@@ -44,6 +44,14 @@ export function useCountdown(
     );
 
     const expiredRef = useRef(false);
+    const onExpireRef = useRef(onExpire);
+    const onTickRef = useRef(onTick);
+
+    // Keep refs in sync with latest callbacks
+    useEffect(() => {
+        onExpireRef.current = onExpire;
+        onTickRef.current = onTick;
+    }, [onExpire, onTick]);
 
     const updateTime = useCallback(() => {
         if (!target) return;
@@ -51,18 +59,18 @@ export function useCountdown(
         const remaining = calculateTimeRemaining(target.date);
         setTimeRemaining(remaining);
 
-        if (onTick) {
-            onTick(remaining);
+        if (onTickRef.current) {
+            onTickRef.current(remaining);
         }
 
         if (remaining.isExpired && !expiredRef.current) {
             expiredRef.current = true;
             setIsActive(false);
-            if (onExpire) {
-                onExpire();
+            if (onExpireRef.current) {
+                onExpireRef.current();
             }
         }
-    }, [target, onTick, onExpire]);
+    }, [target]);
 
     useEffect(() => {
         if (!isActive || !target) return;