@umituz/react-native-design-system 4.23.67 → 4.23.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.23.67",
+  "version": "4.23.69",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/atoms/EmptyState.tsx

@@ -7,7 +7,7 @@
  * Purpose: Empty state indication across all apps
  */
 
-import React from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef, useContext } from 'react';
 import { View, StyleSheet, TouchableOpacity, ViewStyle } from 'react-native';
 import { AtomicIcon } from './icon';
 import { AtomicText } from './AtomicText';
@@ -39,7 +39,7 @@ export const EmptyState: React.FC<EmptyStateProps> = ({
   const tokens = useAppDesignTokens();
   const displayDescription = description || subtitle;
 
-  const themedStyles = React.useMemo(
+  const themedStyles = useMemo(
     () =>
       StyleSheet.create({
         container: {

package/src/atoms/icon/AtomicIcon.tsx

@@ -20,19 +20,27 @@
  * <AtomicIcon name="favorite" size="md" color="primary" />
  */
 
-import React from "react";
-import { View, StyleSheet, StyleProp, ViewStyle } from "react-native";
-import Svg, { Path } from "react-native-svg";
-import { useAppDesignTokens } from "../../theme";
-import { useIconRenderer, type IconRenderProps } from "./iconStore";
+import React from 'react';
+import { StyleProp, ViewStyle } from 'react-native';
+import { useAppDesignTokens } from '../../theme/hooks/useAppDesignTokens';
+import { useIconRenderer } from './iconStore';
 import {
   type IconSize as BaseIconSize,
   type IconColor,
-} from "./AtomicIcon.types";
+} from './AtomicIcon.types';
+import {
+  calculateIconSize,
+  calculateIconColor,
+} from './utils/iconUtils';
+import {
+  renderSvgIcon,
+  renderWithBackground,
+  buildIconRenderProps,
+} from './components/iconRenderer';
 
 export type IconSize = BaseIconSize;
 export type IconName = string;
-export type { IconColor, IconRenderProps };
+export type { IconColor };
 
 export interface AtomicIconProps {
   /** Icon name - interpreted by the app's icon renderer */
@@ -61,44 +69,20 @@ export interface AtomicIconProps {
   style?: StyleProp<ViewStyle>;
 }
 
-const getSemanticColor = (
-  color: IconColor,
-  tokens: ReturnType<typeof useAppDesignTokens>
-): string => {
-  const colorMap: Record<IconColor, string> = {
-    primary: tokens.colors.primary,
-    secondary: tokens.colors.secondary,
-    success: tokens.colors.success,
-    warning: tokens.colors.warning,
-    error: tokens.colors.error,
-    info: tokens.colors.info,
-    onSurface: tokens.colors.onSurface,
-    surfaceVariant: tokens.colors.surfaceVariant,
-    onPrimary: tokens.colors.onPrimary,
-    onSecondary: tokens.colors.onSecondary,
-    textInverse: tokens.colors.textInverse,
-    textPrimary: tokens.colors.textPrimary,
-    textSecondary: tokens.colors.textSecondary,
-    textTertiary: tokens.colors.textTertiary,
-    onSurfaceVariant: tokens.colors.onSurfaceVariant,
-  };
-  return colorMap[color];
-};
-
 /**
  * Agnostic icon component - requires iconRenderer in DesignSystemProvider
  */
 export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(
   ({
     name,
-    size = "md",
+    size = 'md',
     customSize,
     color,
     customColor,
     withBackground = false,
     backgroundColor,
     svgPath,
-    svgViewBox = "0 0 24 24",
+    svgViewBox = '0 0 24 24',
     accessibilityLabel,
     testID,
     style,
@@ -106,34 +90,19 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(
     const tokens = useAppDesignTokens();
     const iconRenderer = useIconRenderer();
 
-    // Calculate size
-    const baseSize = customSize ?? size;
-    const iconSizesMap = tokens.iconSizes as Record<string, number>;
-    const sizeInPixels: number =
-      typeof baseSize === "number"
-        ? baseSize * tokens.spacingMultiplier
-        : iconSizesMap[baseSize] ?? iconSizesMap["md"] ?? 24;
-
-    // Calculate color
-    const iconColor = customColor
-      ? customColor
-      : color
-        ? getSemanticColor(color, tokens)
-        : tokens.colors.textPrimary;
+    // Calculate size and color using utility functions
+    const sizeInPixels = calculateIconSize(size, customSize, tokens);
+    const iconColor = calculateIconColor(customColor, color, tokens);
 
     // SVG path rendering (built-in, no external dependency)
     if (svgPath) {
-      const svgElement = (
-        <Svg
-          viewBox={svgViewBox}
-          width={sizeInPixels}
-          height={sizeInPixels}
-          key="custom-svg-icon"
-          testID={testID}
-          accessibilityLabel={accessibilityLabel}
-        >
-          <Path d={svgPath} fill={iconColor} />
-        </Svg>
+      const svgElement = renderSvgIcon(
+        svgPath,
+        svgViewBox,
+        sizeInPixels,
+        iconColor,
+        testID,
+        accessibilityLabel
       );
 
       if (withBackground) {
@@ -154,27 +123,27 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(
     if (!iconRenderer) {
       if (__DEV__) {
         console.warn(
-          "[DesignSystem] AtomicIcon requires an iconRenderer in DesignSystemProvider.\n" +
-            "Example:\n" +
-            "<DesignSystemProvider\n" +
+          '[DesignSystem] AtomicIcon requires an iconRenderer in DesignSystemProvider.\n' +
+            'Example:\n' +
+            '<DesignSystemProvider\n' +
             '  iconRenderer={({ name, size, color }) => (\n' +
             '    <YourIconLibrary name={name} size={size} color={color} />\n' +
-            "  )}\n" +
-            ">"
+            '  )}\n' +
+            '>'
         );
       }
       return null;
     }
 
-    // Build render props
-    const renderProps: IconRenderProps = {
-      name: name || "",
-      size: sizeInPixels,
-      color: iconColor,
-      style: style as StyleProp<ViewStyle>,
+    // Build render props and render icon
+    const renderProps = buildIconRenderProps(
+      name || '',
+      sizeInPixels,
+      iconColor,
+      style,
       testID,
-      accessibilityLabel,
-    };
+      accessibilityLabel
+    );
 
     const iconElement = iconRenderer(renderProps);
 
@@ -193,44 +162,4 @@ export const AtomicIcon: React.FC<AtomicIconProps> = React.memo(
   }
 );
 
-AtomicIcon.displayName = "AtomicIcon";
-
-/**
- * Helper to render icon with circular background
- */
-function renderWithBackground(
-  iconElement: React.ReactNode,
-  sizeInPixels: number,
-  bgColor: string,
-  style: StyleProp<ViewStyle> | undefined,
-  testID: string | undefined,
-  accessibilityLabel: string | undefined
-): React.ReactElement {
-  const containerSize = sizeInPixels + 16;
-
-  return (
-    <View
-      style={[
-        styles.backgroundContainer,
-        {
-          width: containerSize,
-          height: containerSize,
-          borderRadius: containerSize / 2,
-          backgroundColor: bgColor,
-        },
-        style,
-      ]}
-      testID={testID}
-      accessibilityLabel={accessibilityLabel}
-    >
-      {iconElement}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  backgroundContainer: {
-    justifyContent: "center",
-    alignItems: "center",
-  },
-});
+AtomicIcon.displayName = 'AtomicIcon';

package/src/atoms/icon/components/iconRenderer.tsx

@@ -0,0 +1,118 @@
+/**
+ * Icon Renderer Components
+ * SVG rendering and background rendering logic
+ */
+
+import React from 'react';
+import { View, StyleSheet, StyleProp, ViewStyle } from 'react-native';
+import Svg, { Path } from 'react-native-svg';
+import type { IconRenderProps } from '../iconStore';
+
+/**
+ * Renders an SVG icon from path data
+ *
+ * @param svgPath - SVG path string
+ * @param svgViewBox - SVG viewBox attribute
+ * @param size - Icon size in pixels
+ * @param color - Icon color
+ * @param testID - Test ID for testing
+ * @param accessibilityLabel - Accessibility label
+ * @returns SVG element
+ */
+export function renderSvgIcon(
+  svgPath: string,
+  svgViewBox: string,
+  size: number,
+  color: string,
+  testID?: string,
+  accessibilityLabel?: string
+): React.ReactElement {
+  return (
+    <Svg
+      viewBox={svgViewBox}
+      width={size}
+      height={size}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+    >
+      <Path d={svgPath} fill={color} />
+    </Svg>
+  );
+}
+
+/**
+ * Renders an icon with a circular background
+ *
+ * @param iconElement - Icon element to wrap
+ * @param size - Icon size in pixels
+ * @param backgroundColor - Background color
+ * @param style - Additional styles
+ * @param testID - Test ID for testing
+ * @param accessibilityLabel - Accessibility label
+ * @returns Wrapped icon with background
+ */
+export function renderWithBackground(
+  iconElement: React.ReactNode,
+  size: number,
+  backgroundColor: string,
+  style?: StyleProp<ViewStyle>,
+  testID?: string,
+  accessibilityLabel?: string
+): React.ReactElement {
+  const containerSize = size + 16;
+
+  return (
+    <View
+      style={[
+        styles.backgroundContainer,
+        {
+          width: containerSize,
+          height: containerSize,
+          borderRadius: containerSize / 2,
+          backgroundColor,
+        },
+        style,
+      ]}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+    >
+      {iconElement}
+    </View>
+  );
+}
+
+/**
+ * Builds render props for custom icon renderer
+ *
+ * @param name - Icon name
+ * @param size - Icon size in pixels
+ * @param color - Icon color
+ * @param style - Additional styles
+ * @param testID - Test ID
+ * @param accessibilityLabel - Accessibility label
+ * @returns Icon render props
+ */
+export function buildIconRenderProps(
+  name: string,
+  size: number,
+  color: string,
+  style?: StyleProp<ViewStyle>,
+  testID?: string,
+  accessibilityLabel?: string
+): IconRenderProps {
+  return {
+    name,
+    size,
+    color,
+    style: style as StyleProp<ViewStyle>,
+    testID,
+    accessibilityLabel,
+  };
+}
+
+const styles = StyleSheet.create({
+  backgroundContainer: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+});

package/src/atoms/icon/utils/iconUtils.ts

@@ -0,0 +1,94 @@
+/**
+ * Icon Utility Functions
+ * Helper functions for icon color and size calculations
+ */
+
+import type { IconColor } from '../AtomicIcon.types';
+import type { DesignTokens } from '../../../theme/types/ThemeTypes';
+
+/**
+ * Maps semantic color names to actual color values from tokens
+ *
+ * @param color - Semantic color name
+ * @param tokens - Design tokens
+ * @returns Hex color string
+ */
+export function getSemanticColor(
+  color: IconColor,
+  tokens: DesignTokens
+): string {
+  const colorMap: Record<IconColor, string> = {
+    primary: tokens.colors.primary,
+    secondary: tokens.colors.secondary,
+    success: tokens.colors.success,
+    warning: tokens.colors.warning,
+    error: tokens.colors.error,
+    info: tokens.colors.info,
+    onSurface: tokens.colors.onSurface,
+    surfaceVariant: tokens.colors.surfaceVariant,
+    onPrimary: tokens.colors.onPrimary,
+    onSecondary: tokens.colors.onSecondary,
+    textInverse: tokens.colors.textInverse,
+    textPrimary: tokens.colors.textPrimary,
+    textSecondary: tokens.colors.textSecondary,
+    textTertiary: tokens.colors.textTertiary,
+    onSurfaceVariant: tokens.colors.onSurfaceVariant,
+  };
+  return colorMap[color];
+}
+
+/**
+ * Calculates icon size in pixels
+ *
+ * @param size - Size preset or custom size value
+ * @param customSize - Custom size in pixels (overrides size)
+ * @param tokens - Design tokens
+ * @returns Size in pixels
+ */
+export function calculateIconSize(
+  size: string | number,
+  customSize: number | undefined,
+  tokens: DesignTokens
+): number {
+  const baseSize = customSize ?? size;
+  const iconSizesMap = tokens.iconSizes as Record<string, number>;
+
+  return typeof baseSize === 'number'
+    ? baseSize * tokens.spacingMultiplier
+    : iconSizesMap[baseSize] ?? iconSizesMap['md'] ?? 24;
+}
+
+/**
+ * Calculates icon color
+ *
+ * @param customColor - Custom color override
+ * @param semanticColor - Semantic color from theme
+ * @param tokens - Design tokens
+ * @returns Hex color string
+ */
+export function calculateIconColor(
+  customColor: string | undefined,
+  semanticColor: IconColor | undefined,
+  tokens: DesignTokens
+): string {
+  if (customColor) {
+    return customColor;
+  }
+
+  if (semanticColor) {
+    return getSemanticColor(semanticColor, tokens);
+  }
+
+  return tokens.colors.textPrimary;
+}
+
+/**
+ * Calculates container size for icon with background
+ *
+ * @param iconSize - Icon size in pixels
+ * @param padding - Padding around icon (default: 16)
+ * @returns Container size
+ */
+export function calculateContainerSize(iconSize: number, padding: number = 16): number {
+  return iconSize + padding;
+}

package/src/exception/infrastructure/services/ExceptionService.ts

@@ -21,17 +21,22 @@ import { ExceptionLogger } from './ExceptionLogger';
 import { useExceptionStore } from '../storage/ExceptionStore';
 
 export class ExceptionService {
-  private logger: ExceptionLogger;
-  private reporter: ExceptionReporter;
+  private logger: ExceptionLogger | null = null;
+  private reporter: ExceptionReporter | null = null;
+  private reporterConfig: ExceptionReporter['config'];
 
   constructor(reporterConfig?: ExceptionReporter['config']) {
-    this.logger = new ExceptionLogger();
-    this.reporter = new ExceptionReporter(
-      reporterConfig || {
-        enabled: false,
-        environment: 'development'
-      }
-    );
+    this.reporterConfig = reporterConfig || {
+      enabled: false,
+      environment: 'development'
+    };
+  }
+
+  private ensureInitialized() {
+    if (!this.logger) {
+      this.logger = new ExceptionLogger();
+      this.reporter = new ExceptionReporter(this.reporterConfig);
+    }
   }
 
   /**
@@ -43,17 +48,19 @@ export class ExceptionService {
     category: ExceptionCategory = 'unknown',
     context: ExceptionContext = {},
   ): Promise<void> {
+    this.ensureInitialized();
+
     const exception = ExceptionHandler.createException(error, severity, category, context);
 
     // Add to store
     useExceptionStore.getState().addException(exception);
 
     // Log locally
-    await this.logger.logException(exception);
+    await this.logger!.logException(exception);
 
     // Report to external service if needed
     if (ExceptionHandler.shouldReportException(exception)) {
-      await this.reporter.reportException(exception);
+      await this.reporter!.reportException(exception);
     }
 
     // Mark as handled
@@ -92,35 +99,40 @@ export class ExceptionService {
    * Get stored exceptions
    */
   async getStoredExceptions(): Promise<ExceptionEntity[]> {
-    return this.logger.getStoredExceptions();
+    this.ensureInitialized();
+    return this.logger!.getStoredExceptions();
   }
 
   /**
    * Get exception statistics
    */
   async getExceptionStats() {
-    return this.logger.getExceptionStats();
+    this.ensureInitialized();
+    return this.logger!.getExceptionStats();
   }
 
   /**
    * Clear stored exceptions
    */
   async clearStoredExceptions(): Promise<void> {
-    await this.logger.clearStoredExceptions();
+    this.ensureInitialized();
+    await this.logger!.clearStoredExceptions();
   }
 
   /**
    * Update reporter configuration
    */
   updateReporterConfig(config: Partial<ExceptionReporter['config']>): void {
-    this.reporter.updateConfig(config);
+    this.ensureInitialized();
+    this.reporter!.updateConfig(config);
   }
 
   /**
    * Set max stored exceptions
    */
   setMaxStoredExceptions(limit: number): void {
-    this.logger.setMaxStoredExceptions(limit);
+    this.ensureInitialized();
+    this.logger!.setMaxStoredExceptions(limit);
   }
 
   /**
@@ -145,7 +157,7 @@ export class ExceptionService {
   }
 }
 
-// Export default instance
+// Export default instance - lazy initialization
 export const exceptionService = new ExceptionService();
 
 

package/src/exception/presentation/components/ExceptionEmptyState.tsx

@@ -29,7 +29,7 @@ export const ExceptionEmptyState: React.FC<ExceptionEmptyStateProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const styles = React.useMemo(
+  const styles = useMemo(
     () =>
       StyleSheet.create({
         actionButton: {

package/src/exception/presentation/components/ExceptionErrorState.tsx

@@ -44,7 +44,7 @@ export const ExceptionErrorState: React.FC<ExceptionErrorStateProps> = ({
   const refreshIcon = useIconName('refresh');
   const displayIcon = icon || alertCircleIcon;
 
-  const styles = React.useMemo(
+  const styles = useMemo(
     () =>
       StyleSheet.create({
         actionButton: {

package/src/image/infrastructure/services/ImageBatchService.ts

@@ -5,6 +5,7 @@
  */
 
 import type { ImageManipulationResult } from '../../domain/entities/ImageTypes';
+import type { BatchOperation } from '../types/BatchTypes';
 import { BatchProcessor } from '../utils/BatchProcessor';
 
 export interface BatchProcessingOptions {
@@ -27,13 +28,6 @@ export interface BatchProcessingResult {
   failureCount: number;
 }
 
-export interface BatchOperation {
-  uri: string;
-  type: 'resize' | 'crop' | 'filter' | 'compress' | 'convert';
-  params: Record<string, unknown>;
-  options?: Record<string, unknown>;
-}
-
 export class ImageBatchService {
   static async processBatch(
     operations: BatchOperation[],

package/src/image/infrastructure/types/BatchTypes.ts

@@ -0,0 +1,11 @@
+/**
+ * Batch Operation Types
+ * Shared types for batch processing operations
+ */
+
+export interface BatchOperation {
+  uri: string;
+  type: 'resize' | 'crop' | 'filter' | 'compress' | 'convert';
+  params: Record<string, unknown>;
+  options?: Record<string, unknown>;
+}

package/src/image/infrastructure/utils/BatchProcessor.ts

@@ -5,7 +5,7 @@
  */
 
 import type { ImageManipulationResult, ImageCropArea, SaveFormat } from '../../domain/entities/ImageTypes';
-import type { BatchOperation } from '../services/ImageBatchService';
+import type { BatchOperation } from '../types/BatchTypes';
 import { ImageTransformService } from '../services/ImageTransformService';
 import { ImageConversionService } from '../services/ImageConversionService';
 import { ImageValidator } from './ImageValidator';

package/src/image/infrastructure/utils/ImageErrorHandler.ts

@@ -9,6 +9,7 @@ export class ImageError extends Error {
     ) {
         super(message);
         this.name = 'ImageError';
+        Object.setPrototypeOf(this, ImageError.prototype);
     }
 }
 

package/src/infinite-scroll/presentation/components/infinite-scroll-list.tsx

@@ -62,13 +62,13 @@ function InfiniteScrollListComponent<T>({
 }: InfiniteScrollListProps<T>): React.ReactElement {
   const { items, state, loadMore, refresh, canLoadMore } = useInfiniteScroll(config);
 
-  const handleEndReached = React.useCallback(() => {
+  const handleEndReached = useCallback(() => {
     if (canLoadMore && config.autoLoad !== false) {
       loadMore();
     }
   }, [canLoadMore, loadMore, config.autoLoad]);
 
-  const getItemKey = React.useCallback(
+  const getItemKey = useCallback(
     (item: T, index: number): string => {
       if (config.getItemKey) {
         return config.getItemKey(item, index);

package/src/layouts/ScreenHeader/ScreenHeader.tsx

@@ -12,7 +12,7 @@
  * - Fully configurable for general purpose use
  */
 
-import React from 'react';
+import React, { useState, useEffect, useCallback, useMemo, useRef, useContext } from 'react';
 import { View, TouchableOpacity, ViewStyle } from 'react-native';
 import { AtomicIcon, AtomicText } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
@@ -71,7 +71,7 @@ const ScreenHeaderBackButton: React.FC<{
   backIconColor?: 'primary' | 'secondary' | 'error' | 'warning' | 'success' | 'surfaceVariant';
   testID?: string;
 }> = ({ hideBackButton, onBackPress, backIconName, backIconColor, testID }) => {
-  const handleBackPress = React.useCallback(() => {
+  const handleBackPress = useCallback(() => {
     if (onBackPress) {
       onBackPress();
     }
@@ -136,7 +136,7 @@ export const ScreenHeader: React.FC<ScreenHeaderProps> = ({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const headerStyle = React.useMemo(() => [
+  const headerStyle = useMemo(() => [
     {
       flexDirection: 'row' as const,
       alignItems: 'center' as const,