@umituz/react-native-settings 4.23.85 → 4.23.87

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

@@ -4,22 +4,20 @@
  */
 
 import React, { useState, useMemo, useCallback } from 'react';
-import { View, TextInput, StyleSheet, ScrollView } from 'react-native';
+import { View, TextInput, ScrollView } from 'react-native';
 import { AtomicText } from '@umituz/react-native-design-system';
 import { useAppDesignTokens } from '@umituz/react-native-design-system';
 import { TimePresetSelector } from './TimePresetSelector';
 import { FrequencySelector } from './FrequencySelector';
 import { WeekdaySelector } from './WeekdaySelector';
 import { FormButton } from './FormButton';
-import { 
-  DEFAULT_HOUR, 
-  DEFAULT_MINUTE, 
-  DEFAULT_WEEKDAY, 
-  MAX_TITLE_LENGTH, 
-  MAX_BODY_LENGTH, 
-  VALID_HOUR_RANGE, 
-  VALID_MINUTE_RANGE, 
-  VALID_WEEKDAY_RANGE,
+import { validateReminderForm } from '../../../../../infrastructure/utils/validation';
+import {
+  DEFAULT_HOUR,
+  DEFAULT_MINUTE,
+  DEFAULT_WEEKDAY,
+  MAX_TITLE_LENGTH,
+  MAX_BODY_LENGTH,
   type ReminderFormProps,
 } from './ReminderForm.constants';
 import { createReminderFormStyles as createStyles } from './ReminderForm.styles';
@@ -44,25 +42,16 @@ export const ReminderForm: React.FC<ReminderFormProps> = ({
   const [minute, setMinute] = useState(initialData?.minute ?? DEFAULT_MINUTE);
   const [weekday, setWeekday] = useState(initialData?.weekday ?? DEFAULT_WEEKDAY);
   const [isCustomTime, setIsCustomTime] = useState(!initialData?.timePresetId);
-
-  // Validation helper functions
-  const isValidHour = useCallback((h: number): boolean => {
-    return h >= VALID_HOUR_RANGE.min && h <= VALID_HOUR_RANGE.max;
-  }, []);
-
-  const isValidMinute = useCallback((m: number): boolean => {
-    return m >= VALID_MINUTE_RANGE.min && m <= VALID_MINUTE_RANGE.max;
-  }, []);
-
-  const isValidWeekday = useCallback((w: number): boolean => {
-    return w >= VALID_WEEKDAY_RANGE.min && w <= VALID_WEEKDAY_RANGE.max;
-  }, []);
+  // FIXED: Add error state for user feedback
+  const [error, setError] = useState<string | null>(null);
 
   const handlePresetSelect = useCallback((preset: TimePreset) => {
     setSelectedPresetId(preset.id);
     setHour(preset.hour);
     setMinute(preset.minute);
     setIsCustomTime(false);
+    // Clear error when user changes something
+    setError(null);
   }, []);
 
   const handleCustomSelect = useCallback(() => {
@@ -74,29 +63,26 @@ export const ReminderForm: React.FC<ReminderFormProps> = ({
     const trimmedTitle = title.trim();
     const trimmedBody = body.trim();
 
-    // Validate title
-    if (!trimmedTitle) {
-      return;
-    }
-
-    if (trimmedTitle.length > MAX_TITLE_LENGTH) {
-      return;
-    }
-
-    // Validate body length
-    if (trimmedBody.length > MAX_BODY_LENGTH) {
-      return;
-    }
+    // Validate using centralized validation
+    const validationResult = validateReminderForm({
+      title: trimmedTitle,
+      body: trimmedBody,
+      frequency,
+      hour,
+      minute,
+      weekday,
+      maxTitleLength: MAX_TITLE_LENGTH,
+      maxBodyLength: MAX_BODY_LENGTH,
+    });
 
-    // Validate time values
-    if (!isValidHour(hour) || !isValidMinute(minute)) {
+    if (!validationResult.isValid) {
+      // FIXED: Show error to user
+      setError(validationResult.error || "Validation failed");
       return;
     }
 
-    // Validate weekday if frequency is weekly
-    if (frequency === 'weekly' && !isValidWeekday(weekday)) {
-      return;
-    }
+    // Clear error and proceed
+    setError(null);
 
     // Sanitize input (React Native handles XSS, but we trim extra whitespace)
     const sanitizedTitle = trimmedTitle.replace(/\s+/g, ' ').trim();
@@ -112,7 +98,7 @@ export const ReminderForm: React.FC<ReminderFormProps> = ({
       weekday: frequency === 'weekly' ? weekday : undefined,
       dayOfMonth: frequency === 'monthly' ? 1 : undefined,
     });
-  }, [title, body, frequency, selectedPresetId, hour, minute, weekday, isCustomTime, onSave, isValidHour, isValidMinute, isValidWeekday]);
+  }, [title, body, frequency, selectedPresetId, hour, minute, weekday, isCustomTime, onSave]);
 
   return (
     <ScrollView style={styles.container} showsVerticalScrollIndicator={false}>
@@ -121,7 +107,10 @@ export const ReminderForm: React.FC<ReminderFormProps> = ({
         <TextInput
           style={styles.input}
           value={title}
-          onChangeText={setTitle}
+          onChangeText={(text) => {
+            setTitle(text);
+            setError(null); // Clear error on input
+          }}
           placeholder={translations.titlePlaceholder}
           placeholderTextColor={tokens.colors.textSecondary}
         />
@@ -132,7 +121,10 @@ export const ReminderForm: React.FC<ReminderFormProps> = ({
         <TextInput
           style={[styles.input, styles.multilineInput]}
           value={body}
-          onChangeText={setBody}
+          onChangeText={(text) => {
+            setBody(text);
+            setError(null); // Clear error on input
+          }}
           placeholder={translations.bodyPlaceholder}
           placeholderTextColor={tokens.colors.textSecondary}
           multiline
@@ -171,9 +163,23 @@ export const ReminderForm: React.FC<ReminderFormProps> = ({
         </View>
       )}
 
+      {/* FIXED: Show error message to user */}
+      {error && (
+        <View style={styles.section}>
+          <AtomicText type="bodySmall" color="error">
+            {error}
+          </AtomicText>
+        </View>
+      )}
+
       <View style={styles.buttonRow}>
         <FormButton label={translations.cancelButton} onPress={onCancel} variant="secondary" />
-        <FormButton label={translations.saveButton} onPress={handleSave} disabled={!title.trim()} />
+        {/* FIXED: Disable button when form is invalid */}
+        <FormButton
+          label={translations.saveButton}
+          onPress={handleSave}
+          disabled={!title.trim() || !frequency}
+        />
       </View>
     </ScrollView>
   );

package/src/infrastructure/types/commonComponentTypes.ts

@@ -0,0 +1,142 @@
+/**
+ * Common Component Types
+ * Shared interfaces for common component props to reduce duplication
+ */
+
+import type { StyleProp, ViewStyle } from "react-native";
+import type { IconName } from "@umituz/react-native-design-system";
+
+/**
+ * Base props for settings item components
+ */
+export interface BaseSettingsItemProps {
+  title: string;
+  description?: string;
+  icon?: IconName;
+  onPress?: () => void;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/**
+ * Base props for card components
+ */
+export interface BaseCardProps {
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/**
+ * Base props for section components
+ */
+export interface BaseSectionProps {
+  title?: string;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/**
+ * Navigation item props
+ */
+export interface NavigationItemProps extends BaseSettingsItemProps {
+  route?: string;
+  showChevron?: boolean;
+}
+
+/**
+ * Toggle item props (items with switches)
+ */
+export interface ToggleItemProps extends BaseSettingsItemProps {
+  showSwitch: true;
+  switchValue: boolean;
+  onSwitchChange: (value: boolean) => void;
+}
+
+/**
+ * Pressable item props
+ */
+export interface PressableItemProps extends BaseSettingsItemProps {
+  onPress: () => void;
+}
+
+/**
+ * Icon styling props
+ */
+export interface IconStyleProps {
+  iconBgColor?: string;
+  iconColor?: string;
+  iconSize?: number;
+}
+
+/**
+ * Loading state props
+ */
+export interface LoadingStateProps {
+  loading?: boolean;
+}
+
+/**
+ * Badge props (for notification counts, etc.)
+ */
+export interface BadgeProps {
+  badge?: string | number;
+  badgeColor?: string;
+  badgeTextColor?: string;
+}
+
+/**
+ * Screen header props
+ */
+export interface ScreenHeaderProps {
+  title: string;
+  subtitle?: string;
+  showBackButton?: boolean;
+  onBackPress?: () => void;
+  rightElement?: React.ReactNode;
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * List item props
+ */
+export interface ListItemProps extends BaseSettingsItemProps {
+  rightElement?: React.ReactNode;
+  leftElement?: React.ReactNode;
+}
+
+/**
+ * Modal props
+ */
+export interface BaseModalProps {
+  visible: boolean;
+  onClose: () => void;
+  title?: string;
+  testID?: string;
+}
+
+/**
+ * Form input props
+ */
+export interface BaseInputProps {
+  value: string;
+  onChangeText: (text: string) => void;
+  placeholder?: string;
+  error?: string;
+  disabled?: boolean;
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}
+
+/**
+ * Button props
+ */
+export interface BaseButtonProps {
+  title: string;
+  onPress: () => void;
+  disabled?: boolean;
+  loading?: boolean;
+  variant?: "primary" | "secondary" | "danger" | "ghost";
+  style?: StyleProp<ViewStyle>;
+  testID?: string;
+}

package/src/infrastructure/utils/async/core.ts

@@ -0,0 +1,109 @@
+/**
+ * Core Async Operation Utilities
+ * Base types and handlers for async operations
+ */
+
+import type { ValidationResult } from "../validation";
+
+/**
+ * Result type for async operations
+ */
+export type AsyncResult<T, E = Error> =
+  | { success: true; data: T }
+  | { success: false; error: E };
+
+/**
+ * Generic async handler with error handling
+ */
+export const handleAsyncOperation = async <T>(
+  operation: () => Promise<T>,
+  onError?: (error: Error) => void
+): Promise<AsyncResult<T>> => {
+  try {
+    const data = await operation();
+    return { success: true, data };
+  } catch (error) {
+    const err = error instanceof Error ? error : new Error(String(error));
+    if (onError) {
+      onError(err);
+    }
+    return { success: false, error: err };
+  }
+};
+
+/**
+ * Async operation with loading state
+ * FIXED: Properly handles errors in onSuccess callback
+ */
+export const createAsyncHandler = <T extends unknown[], R>(
+  handler: (...args: T) => Promise<R>,
+  options: {
+    onLoadingStart?: () => void;
+    onLoadingEnd?: () => void;
+    onError?: (error: Error) => void;
+    onSuccess?: (result: R) => void;
+  }
+) => {
+  return async (...args: T): Promise<void> => {
+    const { onLoadingStart, onLoadingEnd, onError, onSuccess } = options;
+
+    let loadingStarted = false;
+
+    try {
+      onLoadingStart?.();
+      loadingStarted = true;
+      const result = await handler(...args);
+      // FIXED: Wrap onSuccess in try-catch to handle errors separately
+      try {
+        onSuccess?.(result);
+      } catch (callbackError) {
+        // Log callback error but don't treat it as handler error
+        if (typeof __DEV__ !== "undefined" && __DEV__) {
+          console.error("[createAsyncHandler] onSuccess callback error:", callbackError);
+        }
+      }
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error(String(error));
+      onError?.(err);
+    } finally {
+      // FIXED: Only call onLoadingEnd if it was started
+      if (loadingStarted) {
+        try {
+          onLoadingEnd?.();
+        } catch (callbackError) {
+          // Log callback error but don't throw
+          if (typeof __DEV__ !== "undefined" && __DEV__) {
+            console.error("[createAsyncHandler] onLoadingEnd callback error:", callbackError);
+          }
+        }
+      }
+    }
+  };
+};
+
+/**
+ * Async operation with validation
+ */
+export const createValidatedAsyncHandler = <T, R>(
+  validator: (data: T) => ValidationResult,
+  handler: (data: T) => Promise<R>,
+  options: {
+    onValidationError?: (error: string) => void;
+    onError?: (error: Error) => void;
+  } = {}
+) => {
+  return async (data: T): Promise<AsyncResult<R>> => {
+    const { onValidationError, onError } = options;
+
+    // Validate first
+    const validationResult = validator(data);
+    if (!validationResult.isValid) {
+      const error = new Error(validationResult.error || "Validation failed");
+      onValidationError?.(error.message);
+      return { success: false, error };
+    }
+
+    // Execute handler
+    return handleAsyncOperation(() => handler(data), onError);
+  };
+};

package/src/infrastructure/utils/async/debounceAndBatch.ts

@@ -0,0 +1,69 @@
+/**
+ * Debounce and Batch Utilities
+ * Utilities for debouncing and batching async operations
+ */
+
+import type { AsyncResult } from "./core";
+
+/**
+ * Debounced async operation
+ */
+export const createDebouncedAsyncOperation = <T extends unknown[], R>(
+  operation: (...args: T) => Promise<R>,
+  delayMs: number
+): ((...args: T) => Promise<R>) => {
+  let timeoutId: NodeJS.Timeout | null = null;
+
+  return (...args: T): Promise<R> => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+    }
+
+    return new Promise((resolve, reject) => {
+      timeoutId = setTimeout(async () => {
+        try {
+          const result = await operation(...args);
+          resolve(result);
+        } catch (error) {
+          reject(error);
+        }
+      }, delayMs);
+    });
+  };
+};
+
+/**
+ * Batch async operations
+ */
+export const batchAsyncOperations = async <T, R>(
+  items: T[],
+  operation: (item: T) => Promise<R>,
+  options: {
+    concurrency?: number;
+    onProgress?: (completed: number, total: number) => void;
+  } = {}
+): Promise<AsyncResult<R[]>> => {
+  const { concurrency = 5, onProgress } = options;
+
+  try {
+    const results: R[] = [];
+    const batches: T[][] = [];
+
+    // Create batches
+    for (let i = 0; i < items.length; i += concurrency) {
+      batches.push(items.slice(i, i + concurrency));
+    }
+
+    // Process batches
+    for (const batch of batches) {
+      const batchResults = await Promise.all(batch.map(operation));
+      results.push(...batchResults);
+      onProgress?.(results.length, items.length);
+    }
+
+    return { success: true, data: results };
+  } catch (error) {
+    const err = error instanceof Error ? error : new Error(String(error));
+    return { success: false, error: err };
+  }
+};

package/src/infrastructure/utils/async/index.ts

@@ -0,0 +1,8 @@
+/**
+ * Async Utilities
+ * Barrel export for all async utility modules
+ */
+
+export * from "./core";
+export * from "./retryAndTimeout";
+export * from "./debounceAndBatch";

package/src/infrastructure/utils/async/retryAndTimeout.ts

@@ -0,0 +1,57 @@
+/**
+ * Retry and Timeout Utilities
+ * Utilities for handling retries and timeouts in async operations
+ */
+
+/**
+ * Retry utility for async operations
+ */
+export const retryAsyncOperation = async <T>(
+  operation: () => Promise<T>,
+  options: {
+    maxAttempts?: number;
+    delayMs?: number;
+    backoffMultiplier?: number;
+    onRetry?: (attempt: number, error: Error) => void;
+  } = {}
+): Promise<T> => {
+  const {
+    maxAttempts = 3,
+    delayMs = 1000,
+    backoffMultiplier = 2,
+    onRetry,
+  } = options;
+
+  let lastError: Error | undefined;
+
+  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+    try {
+      return await operation();
+    } catch (error) {
+      lastError = error instanceof Error ? error : new Error(String(error));
+
+      if (attempt < maxAttempts) {
+        onRetry?.(attempt, lastError);
+        const delay = delayMs * Math.pow(backoffMultiplier, attempt - 1);
+        await new Promise((resolve) => setTimeout(resolve, delay));
+      }
+    }
+  }
+
+  throw lastError || new Error("Operation failed after retries");
+};
+
+/**
+ * Timeout wrapper for async operations
+ */
+export const withTimeout = async <T>(
+  operation: Promise<T>,
+  timeoutMs: number,
+  timeoutMessage: string = "Operation timed out"
+): Promise<T> => {
+  const timeoutPromise = new Promise<never>((_, reject) => {
+    setTimeout(() => reject(new Error(timeoutMessage)), timeoutMs);
+  });
+
+  return Promise.race([operation, timeoutPromise]);
+};

package/src/infrastructure/utils/configFactory.ts

@@ -0,0 +1,101 @@
+/**
+ * Configuration Factory
+ * Generic configuration creator to reduce duplication in base-configs
+ */
+
+import type { TranslationFunction } from "../../presentation/utils/config-creators/types";
+
+/**
+ * Feature visibility configuration
+ * - true: Always show (if navigation screen exists)
+ * - false: Never show
+ * - 'auto': Automatically detect (check if navigation screen exists and package is available)
+ */
+export type FeatureVisibility = boolean | "auto";
+
+/**
+ * Base configuration type for all settings items
+ */
+export interface BaseConfigType {
+  enabled?: FeatureVisibility;
+  title?: string;
+  description?: string;
+  icon?: string;
+  route?: string;
+  onPress?: () => void;
+}
+
+/**
+ * Configuration parameters for creating a settings item config
+ */
+export interface ConfigCreatorParams {
+  t: TranslationFunction;
+  titleKey: string;
+  descriptionKey: string;
+  icon: string;
+  routeOrOnPress?: string | (() => void);
+  defaultRoute?: string;
+}
+
+/**
+ * Generic configuration creator function
+ * Reduces duplication across all config creators
+ */
+export const createBaseConfig = <T extends BaseConfigType = BaseConfigType>(
+  params: ConfigCreatorParams
+): T => {
+  const { t, titleKey, descriptionKey, icon, routeOrOnPress, defaultRoute } = params;
+
+  return {
+    enabled: true,
+    title: t(titleKey),
+    description: t(descriptionKey),
+    icon,
+    route: typeof routeOrOnPress === "string" ? routeOrOnPress : defaultRoute,
+    onPress: typeof routeOrOnPress === "function" ? routeOrOnPress : undefined,
+  } as T;
+};
+
+/**
+ * Create a configuration with extended properties
+ */
+export const createConfigWithExtensions = <T extends BaseConfigType>(
+  baseParams: ConfigCreatorParams,
+  extensions: Partial<Omit<T, keyof BaseConfigType>>
+): T => {
+  const baseConfig = createBaseConfig<T>(baseParams);
+  return { ...baseConfig, ...extensions };
+};
+
+/**
+ * Create a disabled configuration
+ */
+export const createDisabledConfig = <T extends BaseConfigType>(
+  params: Omit<ConfigCreatorParams, "routeOrOnPress" | "defaultRoute">
+): T => {
+  const baseConfig = createBaseConfig<T>(params);
+  return { ...baseConfig, enabled: false } as T;
+};
+
+/**
+ * Batch create configurations
+ */
+export const createBatchConfigs = <T extends BaseConfigType>(
+  items: Array<{
+    titleKey: string;
+    descriptionKey: string;
+    icon: string;
+    routeOrOnPress?: string | (() => void);
+  }>,
+  t: TranslationFunction
+): T[] => {
+  return items.map((item) =>
+    createBaseConfig<T>({
+      t,
+      titleKey: item.titleKey,
+      descriptionKey: item.descriptionKey,
+      icon: item.icon,
+      routeOrOnPress: item.routeOrOnPress,
+    })
+  );
+};