@umituz/react-native-settings 5.4.9 → 5.4.10

package/src/core/patterns/Screen/ScreenConfig.ts

@@ -0,0 +1,375 @@
+/**
+ * Screen Configuration Types
+ *
+ * Standardized configuration for all screen components.
+ * Ensures consistency across the application.
+ *
+ * @example
+ * ```ts
+ * const config: ScreenConfig = {
+ *   title: 'Settings',
+ *   loadingMessage: 'Loading settings...',
+ *   errorMessage: 'Failed to load settings'
+ * };
+ * ```
+ */
+
+import type { ReactNode } from 'react';
+
+/**
+ * Screen header configuration
+ */
+export interface ScreenHeader {
+  /**
+   * Header title
+   */
+  title?: string;
+
+  /**
+   * Header subtitle
+   */
+  subtitle?: string;
+
+  /**
+   * Show back button
+   */
+  showBackButton?: boolean;
+
+  /**
+   * Custom back button handler
+   */
+  onBackPress?: () => void;
+
+  /**
+   * Custom header component
+   */
+  custom?: ReactNode;
+
+  /**
+   * Right action buttons
+   */
+  actions?: Array<{
+    icon: string;
+    onPress: () => void;
+    testID?: string;
+  }>;
+
+  /**
+   * Test ID for E2E testing
+   */
+  testID?: string;
+}
+
+/**
+ * Screen loading state configuration
+ */
+export interface ScreenLoading {
+  /**
+   * Loading spinner size
+   */
+  size?: 'sm' | 'md' | 'lg' | 'xl';
+
+  /**
+   * Loading message
+   */
+  message?: string;
+
+  /**
+   * Custom loading component
+   */
+  custom?: ReactNode;
+
+  /**
+   * Show full container spinner
+   */
+  fullContainer?: boolean;
+}
+
+/**
+ * Screen error state configuration
+ */
+export interface ScreenError {
+  /**
+   * Error message prefix
+   */
+  prefix?: string;
+
+  /**
+   * Default error message (when error details unknown)
+   */
+  message?: string;
+
+  /**
+   * Retry button text
+   */
+  retryText?: string;
+
+  /**
+   * Show retry button
+   */
+  showRetry?: boolean;
+
+  /**
+   * Retry handler
+   */
+  onRetry?: () => void;
+
+  /**
+   * Custom error component
+   */
+  custom?: ReactNode;
+
+  /**
+   * Error icon name
+   */
+  icon?: string;
+}
+
+/**
+ * Screen empty state configuration
+ */
+export interface ScreenEmpty {
+  /**
+   * Empty state message
+   */
+  message?: string;
+
+  /**
+   * Empty state description
+   */
+  description?: string;
+
+  /**
+   * Empty state icon
+   */
+  icon?: string;
+
+  /**
+   * Custom empty component
+   */
+  custom?: ReactNode;
+
+  /**
+   * Action button label
+   */
+  actionLabel?: string;
+
+  /**
+   * Action button handler
+   */
+  onAction?: () => void;
+}
+
+/**
+ * Screen layout configuration
+ */
+export interface ScreenLayout {
+  /**
+   * Safe area edges
+   */
+  edges?: Array<'top' | 'bottom' | 'left' | 'right'>;
+
+  /**
+   * Scrollable content
+   */
+  scrollable?: boolean;
+
+  /**
+   * Keyboard avoiding view
+   */
+  keyboardAvoiding?: boolean;
+
+  /**
+   * Hide scroll indicator
+   */
+  hideScrollIndicator?: boolean;
+
+  /**
+   * Content container style
+   */
+  contentContainerStyle?: object;
+
+  /**
+   * Test ID for E2E testing
+   */
+  testID?: string;
+}
+
+/**
+ * Complete screen configuration
+ */
+export interface ScreenConfig {
+  /**
+   * Screen header configuration
+   */
+  header?: ScreenHeader;
+
+  /**
+   * Loading state configuration
+   */
+  loading?: ScreenLoading;
+
+  /**
+   * Error state configuration
+   */
+  error?: ScreenError;
+
+  /**
+   * Empty state configuration
+   */
+  empty?: ScreenEmpty;
+
+  /**
+   * Layout configuration
+   */
+  layout?: ScreenLayout;
+
+  /**
+   * Custom container style
+   */
+  containerStyle?: object;
+
+  /**
+   * Screen test ID
+   */
+  testID?: string;
+}
+
+/**
+ * Screen data state (for useScreenData hook)
+ */
+export interface ScreenDataState<T> {
+  /**
+   * Loading state
+   */
+  loading: boolean;
+
+  /**
+   * Error message
+   */
+  error: string | null;
+
+  /**
+   * Data
+   */
+  data: T | null;
+
+  /**
+   * Is initialized
+   */
+  initialized: boolean;
+}
+
+/**
+ * Screen data actions (for useScreenData hook)
+ */
+export interface ScreenDataActions<T> {
+  /**
+   * Set loading state
+   */
+  setLoading: (loading: boolean) => void;
+
+  /**
+   * Set error state
+   */
+  setError: (error: string | null) => void;
+
+  /**
+   * Set data state
+   */
+  setData: (data: T | null) => void;
+
+  /**
+   * Reset state
+   */
+  reset: () => void;
+
+  /**
+   * Refresh data (calls fetch function)
+   */
+  refresh: () => Promise<void>;
+}
+
+/**
+ * Screen data hook return type
+ */
+export type ScreenData<T> = ScreenDataState<T> & ScreenDataActions<T>;
+
+/**
+ * Screen fetch function type
+ */
+export type ScreenFetchFunction<T> = () => Promise<T>;
+
+/**
+ * Common preset configurations
+ */
+export const ScreenPresets: {
+  /**
+   * Default screen configuration
+   */
+  default: ScreenConfig;
+
+  /**
+   * Modal screen configuration (no back button, full edges)
+   */
+  modal: ScreenConfig;
+
+  /**
+   * Loading screen configuration
+   */
+  loading: (message?: string) => ScreenConfig;
+
+  /**
+   * Error screen configuration
+   */
+  error: (message?: string) => ScreenConfig;
+} = {
+  default: {
+    header: {
+      showBackButton: true,
+    },
+    layout: {
+      edges: ['top', 'bottom', 'left', 'right'],
+      scrollable: true,
+    },
+    loading: {
+      size: 'lg',
+      fullContainer: true,
+    },
+    error: {
+      icon: 'error',
+      showRetry: true,
+    },
+  },
+
+  modal: {
+    header: {
+      showBackButton: false,
+    },
+    layout: {
+      edges: [],
+      scrollable: true,
+      keyboardAvoiding: true,
+    },
+    loading: {
+      size: 'md',
+      fullContainer: true,
+    },
+  },
+
+  loading: (message = 'Loading...') => ({
+    loading: {
+      size: 'lg',
+      message,
+      fullContainer: true,
+    },
+  }),
+
+  error: (message = 'Something went wrong') => ({
+    error: {
+      icon: 'error',
+      message,
+      showRetry: true,
+    },
+  }),
+};

package/src/core/patterns/Screen/useScreenData.ts

@@ -0,0 +1,202 @@
+/**
+ * useScreenData Hook
+ *
+ * Generic screen data management hook.
+ * Handles loading, error, and data states for screens.
+ *
+ * @example
+ * ```ts
+ * const screenData = useScreenData({
+ *   fetch: async () => await api.getData(),
+ *   autoFetch: true
+ * });
+ *
+ * if (screenData.loading) return <LoadingSpinner />;
+ * if (screenData.error) return <ErrorMessage error={screenData.error} />;
+ * return <DataView data={screenData.data} />;
+ * ```
+ */
+
+import { useCallback, useEffect, useRef, useState } from 'react';
+import type {
+  ScreenData,
+  ScreenDataState,
+  ScreenDataActions,
+  ScreenFetchFunction,
+} from './ScreenConfig';
+
+export interface UseScreenDataOptions<T> {
+  /**
+   * Fetch function to load data
+   */
+  fetch: ScreenFetchFunction<T>;
+
+  /**
+   * Auto-fetch on mount
+   */
+  autoFetch?: boolean;
+
+  /**
+   * Initial data
+   */
+  initialData?: T | null;
+
+  /**
+   * Dependencies for re-fetching
+   */
+  deps?: unknown[];
+
+  /**
+   * Error handler
+   */
+  onError?: (error: Error) => void;
+
+  /**
+   * Success handler
+   */
+  onSuccess?: (data: T) => void;
+}
+
+/**
+ * Generic screen data management hook
+ */
+export function useScreenData<T>(options: UseScreenDataOptions<T>): ScreenData<T> {
+  const {
+    fetch,
+    autoFetch = true,
+    initialData = null,
+    deps = [],
+    onError,
+    onSuccess,
+  } = options;
+
+  const [state, setState] = useState<ScreenDataState<T>>({
+    loading: autoFetch,
+    error: null,
+    data: initialData,
+    initialized: false,
+  });
+
+  const isMountedRef = useRef(true);
+  const isFetchingRef = useRef(false);
+
+  // Update mounted ref
+  useEffect(() => {
+    isMountedRef.current = true;
+    return () => {
+      isMountedRef.current = false;
+    };
+  }, []);
+
+  // Reset function
+  const reset = useCallback(() => {
+    setState({
+      loading: false,
+      error: null,
+      data: null,
+      initialized: false,
+    });
+  }, []);
+
+  // Set loading function
+  const setLoading = useCallback((loading: boolean) => {
+    if (isMountedRef.current) {
+      setState((prev) => ({ ...prev, loading }));
+    }
+  }, []);
+
+  // Set error function
+  const setError = useCallback((error: string | null) => {
+    if (isMountedRef.current) {
+      setState((prev) => ({ ...prev, error, loading: false }));
+    }
+  }, []);
+
+  // Set data function
+  const setData = useCallback((data: T | null) => {
+    if (isMountedRef.current) {
+      setState((prev) => ({ ...prev, data, loading: false, error: null, initialized: true }));
+    }
+  }, []);
+
+  // Refresh function
+  const refresh = useCallback(async () => {
+    // Prevent concurrent fetches
+    if (isFetchingRef.current) {
+      return;
+    }
+
+    isFetchingRef.current = true;
+    setLoading(true);
+    setError(null);
+
+    try {
+      const data = await fetch();
+
+      if (isMountedRef.current) {
+        setState((prev) => ({
+          ...prev,
+          data,
+          loading: false,
+          error: null,
+          initialized: true,
+        }));
+        onSuccess?.(data);
+      }
+    } catch (error) {
+      if (isMountedRef.current) {
+        const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+        setState((prev) => ({
+          ...prev,
+          error: errorMessage,
+          loading: false,
+        }));
+        onError?.(error as Error);
+      }
+    } finally {
+      isFetchingRef.current = false;
+    }
+  }, [fetch, setLoading, setError, onSuccess, onError]);
+
+  // Auto-fetch on mount and dependency changes
+  useEffect(() => {
+    if (autoFetch && !state.initialized) {
+      refresh();
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoFetch, state.initialized, ...deps]);
+
+  return {
+    ...state,
+    setLoading,
+    setError,
+    setData,
+    reset,
+    refresh,
+  };
+}
+
+/**
+ * Simple version for basic use cases
+ *
+ * @example
+ * ```ts
+ * const { loading, error, data, refresh } = useSimpleScreenData(
+ *   async () => await api.getData()
+ * );
+ * ```
+ */
+export function useSimpleScreenData<T>(
+  fetch: ScreenFetchFunction<T>,
+  autoFetch = true
+): ScreenDataState<T> & { refresh: () => Promise<void> } {
+  const screenData = useScreenData({ fetch, autoFetch });
+
+  return {
+    loading: screenData.loading,
+    error: screenData.error,
+    data: screenData.data,
+    initialized: screenData.initialized,
+    refresh: screenData.refresh,
+  };
+}

package/src/core/utils/logger.ts

@@ -0,0 +1,138 @@
+/**
+ * Logger Utility
+ *
+ * Centralized logging with development mode support.
+ * All logging should go through this utility for consistency.
+ *
+ * @example
+ * ```ts
+ * import { logger } from '@/core/utils/logger';
+ *
+ * logger.info('MyComponent', 'Component mounted');
+ * logger.error('MyService', 'Operation failed', error);
+ * ```
+ */
+
+import { isDev } from '../../utils/devUtils';
+
+export type LogLevel = 'info' | 'warn' | 'error' | 'debug';
+
+interface LogContext {
+  component?: string;
+  service?: string;
+  domain?: string;
+  operation?: string;
+}
+
+/**
+ * Centralized logger with development mode support
+ */
+export class Logger {
+  private context: LogContext;
+
+  constructor(context: LogContext) {
+    this.context = context;
+  }
+
+  /**
+   * Log info message (only in development)
+   */
+  info(message: string, ...args: unknown[]): void {
+    if (isDev()) {
+      const prefix = this.formatPrefix('INFO');
+      console.log(prefix, message, ...args);
+    }
+  }
+
+  /**
+   * Log warning message (only in development)
+   */
+  warn(message: string, ...args: unknown[]): void {
+    if (isDev()) {
+      const prefix = this.formatPrefix('WARN');
+      console.warn(prefix, message, ...args);
+    }
+  }
+
+  /**
+   * Log error message (only in development)
+   */
+  error(message: string, error?: unknown, ...args: unknown[]): void {
+    if (isDev()) {
+      const prefix = this.formatPrefix('ERROR');
+      console.error(prefix, message, error, ...args);
+    }
+  }
+
+  /**
+   * Log debug message (only in development)
+   */
+  debug(message: string, ...args: unknown[]): void {
+    if (isDev()) {
+      const prefix = this.formatPrefix('DEBUG');
+      console.log(prefix, message, ...args);
+    }
+  }
+
+  /**
+   * Create a child logger with additional context
+   */
+  child(additionalContext: Partial<LogContext>): Logger {
+    return new Logger({ ...this.context, ...additionalContext });
+  }
+
+  /**
+   * Format log prefix with context
+   */
+  private formatPrefix(level: LogLevel): string {
+    const parts = [`[${level}]`];
+
+    if (this.context.domain) {
+      parts.push(this.context.domain);
+    }
+
+    if (this.context.service) {
+      parts.push(this.context.service);
+    }
+
+    if (this.context.component) {
+      parts.push(this.context.component);
+    }
+
+    if (this.context.operation) {
+      parts.push(`#${this.context.operation}`);
+    }
+
+    return parts.join(' | ');
+  }
+}
+
+/**
+ * Create a logger instance with context
+ *
+ * @example
+ * ```ts
+ * const logger = createLogger({ component: 'MyComponent' });
+ * logger.info('Something happened');
+ * // Output: [INFO] | MyComponent: Something happened
+ * ```
+ */
+export function createLogger(context: LogContext): Logger {
+  return new Logger(context);
+}
+
+/**
+ * Default logger instance for quick usage
+ */
+export const logger = new Logger({});
+
+/**
+ * Convenience functions for quick logging
+ */
+export const log = {
+  info: (message: string, ...args: unknown[]) => logger.info(message, ...args),
+  warn: (message: string, ...args: unknown[]) => logger.warn(message, ...args),
+  error: (message: string, error?: unknown, ...args: unknown[]) =>
+    logger.error(message, error, ...args),
+  debug: (message: string, ...args: unknown[]) => logger.debug(message, ...args),
+};