@umituz/react-native-settings 5.4.8 → 5.4.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "5.4.8",
+  "version": "5.4.10",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification - expo-store-review and expo-device now lazy loaded",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",
@@ -153,9 +153,6 @@
     "@react-native-async-storage/async-storage": "^2.2.0",
     "@react-native-community/datetimepicker": "^8.6.0",
     "@react-native-community/slider": "^5.1.1",
-    "@react-navigation/bottom-tabs": "^7.9.0",
-    "@react-navigation/native": "^7.1.26",
-    "@react-navigation/stack": "^7.6.13",
     "@tanstack/query-async-storage-persister": "^5.66.7",
     "@tanstack/react-query": "^5.0.0",
     "@tanstack/react-query-persist-client": "^5.66.7",

package/src/core/base/BaseService.ts

@@ -0,0 +1,141 @@
+/**
+ * BaseService
+ *
+ * Abstract base class for all domain services.
+ * Provides consistent error handling, logging, and result patterns.
+ *
+ * @example
+ * ```ts
+ * class MyService extends BaseService {
+ *   protected serviceName = 'MyService';
+ *
+ *   async doSomething(input: Input): Promise<Data> {
+ *     return this.execute('doSomething', async () => {
+ *       // Your logic here
+ *       return result;
+ *     });
+ *   }
+ * }
+ * ```
+ */
+
+import { isDev } from '../../utils/devUtils';
+import { formatErrorMessage } from '../../utils/errorUtils';
+
+export type Result<T> =
+  | { success: true; data: T }
+  | { success: false; error: string };
+
+export type AsyncResult<T> = Promise<Result<T>>;
+
+/**
+ * Abstract base service with error handling and logging
+ */
+export abstract class BaseService {
+  /**
+   * Service name for logging (must be implemented by subclass)
+   */
+  protected abstract serviceName: string;
+
+  /**
+   * Execute an operation with automatic error handling and logging
+   *
+   * @param operation - Operation name for logging
+   * @param fn - Async function to execute
+   * @returns Result object with success flag
+   */
+  protected async execute<T>(
+    operation: string,
+    fn: () => Promise<T>
+  ): AsyncResult<T> {
+    try {
+      const data = await fn();
+      return { success: true, data };
+    } catch (error) {
+      this.logError(operation, error);
+      return { success: false, error: formatErrorMessage(error) };
+    }
+  }
+
+  /**
+   * Execute without error handling (for critical operations that should crash)
+   *
+   * @param operation - Operation name for logging
+   * @param fn - Async function to execute
+   * @returns Direct result from function
+   */
+  protected async executeUnsafe<T>(
+    operation: string,
+    fn: () => Promise<T>
+  ): Promise<T> {
+    try {
+      return await fn();
+    } catch (error) {
+      this.logError(operation, error);
+      throw error; // Re-throw for caller to handle
+    }
+  }
+
+  /**
+   * Execute a synchronous operation with error handling
+   *
+   * @param operation - Operation name for logging
+   * @param fn - Sync function to execute
+   * @returns Result object with success flag
+   */
+  protected executeSync<T>(
+    operation: string,
+    fn: () => T
+  ): Result<T> {
+    try {
+      const data = fn();
+      return { success: true, data };
+    } catch (error) {
+      this.logError(operation, error);
+      return { success: false, error: formatErrorMessage(error) };
+    }
+  }
+
+  /**
+   * Log error in development mode
+   *
+   * @param operation - Operation name
+   * @param error - Error to log
+   */
+  protected logError(operation: string, error: unknown): void {
+    if (isDev()) {
+      console.error(`[${this.serviceName}] ${operation}:`, error);
+    }
+  }
+
+  /**
+   * Log info in development mode
+   *
+   * @param operation - Operation name
+   * @param message - Message to log
+   */
+  protected logInfo(operation: string, message: string): void {
+    if (isDev()) {
+      console.log(`[${this.serviceName}] ${operation}:`, message);
+    }
+  }
+
+  /**
+   * Log warning in development mode
+   *
+   * @param operation - Operation name
+   * @param message - Warning message
+   */
+  protected logWarning(operation: string, message: string): void {
+    if (isDev()) {
+      console.warn(`[${this.serviceName}] ${operation}:`, message);
+    }
+  }
+
+  /**
+   * Check if running in development mode
+   */
+  protected get isDev(): boolean {
+    return isDev();
+  }
+}

package/src/core/index.ts

@@ -0,0 +1,60 @@
+/**
+ * Core Layer - Public API
+ *
+ * Foundational utilities and base classes for the entire application.
+ *
+ * @example
+ * ```ts
+ * import { BaseService, logger, ModalPresets } from '@/core';
+ *
+ * class MyService extends BaseService {
+ *   protected serviceName = 'MyService';
+ * }
+ * ```
+ */
+
+// =============================================================================
+// BASE CLASSES
+// =============================================================================
+
+export { BaseService } from './base/BaseService';
+export type { Result, AsyncResult } from './base/BaseService';
+
+// =============================================================================
+// UTILITIES
+// =============================================================================
+
+export { logger, log, createLogger } from './utils/logger';
+export type { Logger, LogContext } from './utils/logger';
+
+export { validators, valid, invalid, validateAll } from './utils/validators';
+export type { ValidationResult } from './utils/validators';
+
+// =============================================================================
+// PATTERNS - MODAL
+// =============================================================================
+
+export { useModalState, useModalStateWithResult } from './patterns/Modal/useModalState';
+export type { ModalState, ModalConfig, ModalAction, ModalContent, ModalBehavior, ModalResult } from './patterns/Modal/ModalConfig';
+export { ModalPresets, confirmed, dismissed } from './patterns/Modal/ModalConfig';
+
+// =============================================================================
+// PATTERNS - SCREEN
+// =============================================================================
+
+export { useScreenData, useSimpleScreenData } from './patterns/Screen/useScreenData';
+export type {
+  ScreenData,
+  ScreenDataState,
+  ScreenDataActions,
+  ScreenFetchFunction,
+  ScreenConfig,
+  ScreenHeader,
+  ScreenLoading,
+  ScreenError,
+  ScreenEmpty,
+  ScreenLayout,
+  UseScreenDataOptions,
+} from './patterns/Screen/ScreenConfig';
+
+export { ScreenPresets } from './patterns/Screen/ScreenConfig';

package/src/core/patterns/Modal/ModalConfig.ts

@@ -0,0 +1,282 @@
+/**
+ * Modal Configuration Types
+ *
+ * Standardized configuration for all modal components.
+ * Ensures consistency across the application.
+ *
+ * @example
+ * ```ts
+ * const config: ModalConfig = {
+ *   title: 'Rating',
+ *   content: 'Rate this app',
+ *   actions: [
+ *     { label: 'OK', onPress: () => {}, variant: 'primary' }
+ *   ]
+ * };
+ * ```
+ */
+
+import type { ReactNode } from 'react';
+
+/**
+ * Modal action button configuration
+ */
+export interface ModalAction {
+  /**
+   * Button label text
+   */
+  label: string;
+
+  /**
+   * Button press handler
+   */
+  onPress: () => void | Promise<void>;
+
+  /**
+   * Button variant
+   */
+  variant?: 'primary' | 'secondary' | 'outline' | 'text' | 'danger';
+
+  /**
+   * Disable button
+   */
+  disabled?: boolean;
+
+  /**
+   * Show loading indicator
+   */
+  loading?: boolean;
+
+  /**
+   * Test ID for E2E testing
+   */
+  testID?: string;
+}
+
+/**
+ * Modal content configuration
+ */
+export interface ModalContent {
+  /**
+   * Modal title
+   */
+  title?: string;
+
+  /**
+   * Modal subtitle or description
+   */
+  subtitle?: string;
+
+  /**
+   * Main content (can be string or React component)
+   */
+  message?: string | ReactNode;
+
+  /**
+   * Custom icon name
+   */
+  icon?: string;
+
+  /**
+   * Icon color
+   */
+  iconColor?: string;
+
+  /**
+   * Custom header component (overrides title/subtitle)
+   */
+  header?: ReactNode;
+
+  /**
+   * Custom body component (overrides message)
+   */
+  body?: ReactNode;
+
+  /**
+   * Custom footer component (overrides actions)
+   */
+  footer?: ReactNode;
+}
+
+/**
+ * Modal behavior configuration
+ */
+export interface ModalBehavior {
+  /**
+   * Close on backdrop press
+   */
+  closeOnBackdropPress?: boolean;
+
+  /**
+   * Close on back button press (Android)
+   */
+  closeOnBackPress?: boolean;
+
+  /**
+   * Animation type
+   */
+  animation?: 'none' | 'slide' | 'fade' | 'scale';
+
+  /**
+   * Dismissible flag
+   */
+  dismissible?: boolean;
+}
+
+/**
+ * Complete modal configuration
+ */
+export interface ModalConfig extends ModalContent, ModalBehavior {
+  /**
+   * Modal actions (buttons)
+   */
+  actions?: ModalAction[];
+
+  /**
+   * Maximum width (for responsive design)
+   */
+  maxWidth?: number;
+
+  /**
+   * Test ID for E2E testing
+   */
+  testID?: string;
+
+  /**
+   * Custom container style
+   */
+  containerStyle?: object;
+
+  /**
+   * Custom content style
+   */
+  contentStyle?: object;
+}
+
+/**
+ * Modal state for useModalState hook
+ */
+export interface ModalState {
+  /**
+   * Modal visibility
+   */
+  visible: boolean;
+
+  /**
+   * Current modal configuration
+   */
+  config: ModalConfig | null;
+
+  /**
+   * Show modal with configuration
+   */
+  show: (config: ModalConfig) => void;
+
+  /**
+   * Hide modal
+   */
+  hide: () => void;
+
+  /**
+   * Update modal configuration
+   */
+  update: (config: Partial<ModalConfig>) => void;
+}
+
+/**
+ * Modal result type for async operations
+ */
+export type ModalResult<T = void> =
+  | { confirmed: true; data: T }
+  | { confirmed: false };
+
+/**
+ * Create a confirmed modal result
+ */
+export function confirmed<T>(data?: T): ModalResult<T> {
+  return { confirmed: true, data: data as T };
+}
+
+/**
+ * Create a dismissed modal result
+ */
+export function dismissed(): ModalResult<never> {
+  return { confirmed: false };
+}
+
+/**
+ * Common preset configurations
+ */
+export const ModalPresets: {
+  /**
+   * Alert modal (single OK button)
+   */
+  alert: (title: string, message: string, okText?: string) => ModalConfig;
+
+  /**
+   * Confirm modal (OK and Cancel buttons)
+   */
+  confirm: (
+    title: string,
+    message: string,
+    confirmText?: string,
+    cancelText?: string
+  ) => ModalConfig;
+
+  /**
+   * Info modal (just message with icon)
+   */
+  info: (title: string, message: string, icon?: string) => ModalConfig;
+
+  /**
+   * Error modal (error styling)
+   */
+  error: (title: string, message: string) => ModalConfig;
+
+  /**
+   * Loading modal (spinner)
+   */
+  loading: (message: string) => ModalConfig;
+} = {
+  alert: (title, message, okText = 'OK') => ({
+    title,
+    message,
+    actions: [{ label: okText, onPress: () => {}, variant: 'primary' }],
+    dismissible: true,
+  }),
+
+  confirm: (title, message, confirmText = 'Confirm', cancelText = 'Cancel') => ({
+    title,
+    message,
+    actions: [
+      { label: cancelText, onPress: () => {}, variant: 'outline' },
+      { label: confirmText, onPress: () => {}, variant: 'primary' },
+    ],
+    dismissible: true,
+  }),
+
+  info: (title, message, icon = 'info') => ({
+    title,
+    message,
+    icon,
+    actions: [{ label: 'OK', onPress: () => {}, variant: 'primary' }],
+    dismissible: true,
+  }),
+
+  error: (title, message) => ({
+    title,
+    message,
+    icon: 'error',
+    iconColor: 'error',
+    actions: [{ label: 'OK', onPress: () => {}, variant: 'primary' }],
+    dismissible: true,
+  }),
+
+  loading: (message) => ({
+    message,
+    actions: [],
+    dismissible: false,
+    closeOnBackdropPress: false,
+    closeOnBackPress: false,
+  }),
+};

package/src/core/patterns/Modal/useModalState.ts

@@ -0,0 +1,128 @@
+/**
+ * useModalState Hook
+ *
+ * Generic modal state management hook.
+ * Replaces modal-specific state logic across domains.
+ *
+ * @example
+ * ```ts
+ * const modal = useModalState();
+ *
+ * // Show modal
+ * modal.show({
+ *   title: 'Confirm',
+ *   message: 'Are you sure?',
+ *   actions: [...]
+ * });
+ *
+ * // Hide modal
+ * modal.hide();
+ * ```
+ */
+
+import { useCallback, useState } from 'react';
+import type { ModalConfig, ModalState } from './ModalConfig';
+
+/**
+ * Generic modal state management hook
+ */
+export function useModalState(initialConfig: ModalConfig | null = null): ModalState {
+  const [config, setConfig] = useState<ModalConfig | null>(initialConfig);
+  const [visible, setVisible] = useState(false);
+
+  const show = useCallback((newConfig: ModalConfig) => {
+    setConfig(newConfig);
+    setVisible(true);
+  }, []);
+
+  const hide = useCallback(() => {
+    setVisible(false);
+    // Note: We keep config for animation purposes
+    // It will be reset when modal closes completely
+  }, []);
+
+  const update = useCallback((updates: Partial<ModalConfig>) => {
+    setConfig((prev) => {
+      if (!prev) return null;
+      return { ...prev, ...updates };
+    });
+  }, []);
+
+  return {
+    visible,
+    config,
+    show,
+    hide,
+    update,
+  };
+}
+
+/**
+ * Extended modal state with result handling
+ *
+ * @example
+ * ```ts
+ * const modal = useModalStateWithResult<string>();
+ *
+ * const result = await modal.showAsync({
+ *   title: 'Input',
+ *   actions: [
+ *     { label: 'OK', onPress: (resolve) => resolve('data') }
+ *   ]
+ * });
+ *
+ * if (result.confirmed) {
+ *   console.log(result.data);
+ * }
+ * ```
+ */
+export function useModalStateWithResult<T = void>() {
+  const [config, setConfig] = useState<ModalConfig | null>(null);
+  const [visible, setVisible] = useState(false);
+  const [resolver, setResolver] = useState<{
+    resolve: (result: import('./ModalConfig').ModalResult<T>) => void;
+    reject: (error: Error) => void;
+  } | null>(null);
+
+  const showAsync = useCallback(
+    (newConfig: ModalConfig): Promise<import('./ModalConfig').ModalResult<T>> => {
+      return new Promise((resolve, reject) => {
+        setResolver({ resolve, reject });
+        setConfig(newConfig);
+        setVisible(true);
+      });
+    },
+    []
+  );
+
+  const hide = useCallback(() => {
+    setVisible(false);
+    resolver?.resolve({ confirmed: false });
+    setResolver(null);
+  }, [resolver]);
+
+  const confirm = useCallback(
+    (data?: T) => {
+      setVisible(false);
+      resolver?.resolve({ confirmed: true, data: data as T });
+      setResolver(null);
+    },
+    [resolver]
+  );
+
+  const update = useCallback((updates: Partial<ModalConfig>) => {
+    setConfig((prev) => {
+      if (!prev) return null;
+      return { ...prev, ...updates };
+    });
+  }, []);
+
+  return {
+    visible,
+    config,
+    showAsync,
+    hide,
+    confirm,
+    update,
+  };
+}