@umituz/react-native-design-system 4.25.117 → 4.26.0

package/dist/image/infrastructure/services/ImageConversionService.d.ts

@@ -2,6 +2,7 @@
  * Image Infrastructure - Conversion Service
  *
  * Handles format conversion, compression, and thumbnail generation
+ * Lazy loads expo-image-manipulator to reduce bundle size
  */
 import type { ImageSaveOptions, ImageManipulationResult, SaveFormat } from '../../domain/entities/ImageTypes';
 export declare class ImageConversionService {

package/dist/tanstack/index.d.ts

@@ -13,7 +13,7 @@ export { BaseRepository } from './domain/repositories/BaseRepository';
 export type { CreateParams, UpdateParams, ListParams, RepositoryOptions, } from './domain/repositories/RepositoryTypes';
 export { RepositoryFactory } from './domain/repositories/RepositoryFactory';
 export { CacheStrategies, createQueryClient, getCacheStrategy, type QueryClientFactoryOptions, } from './infrastructure/config/QueryClientConfig';
-export { createPersister, clearPersistedCache, getPersistedCacheSize, type PersisterFactoryOptions, } from './infrastructure/config/PersisterConfig';
+export { clearPersistedCache, getPersistedCacheSize, type PersisterFactoryOptions, } from './infrastructure/config/PersisterConfig';
 export { getGlobalQueryClient, hasGlobalQueryClient, setGlobalQueryClient, clearGlobalQueryClient, } from './infrastructure/config/QueryClientSingleton';
 export { DevMonitor } from './infrastructure/monitoring/DevMonitor';
 export type { QueryMetrics, CacheStats as QueryCacheStats, DevMonitorOptions, } from './infrastructure/monitoring/DevMonitor.types';

package/dist/tanstack/infrastructure/config/PersisterConfig.d.ts

@@ -3,8 +3,8 @@
  * Infrastructure layer - AsyncStorage persistence setup
  *
  * General-purpose persistence configuration for any React Native app
+ * Lazy loads TanStack persistence packages to reduce bundle size
  */
-import type { Persister } from '@tanstack/react-query-persist-client';
 /**
  * Persister factory options
  */
@@ -33,19 +33,6 @@ export interface PersisterFactoryOptions {
      */
     throttleTime?: number;
 }
-/**
- * Create an AsyncStorage persister for TanStack Query
- *
- * @example
- * ```typescript
- * const persister = createPersister({
- *   keyPrefix: 'myapp',
- *   maxAge: 24 * 60 * 60 * 1000, // 24 hours
- *   busterVersion: '1',
- * });
- * ```
- */
-export declare function createPersister(options?: PersisterFactoryOptions): Persister;
 /**
  * Clear all persisted cache data
  * Useful for logout or cache reset scenarios

package/dist/tanstack/infrastructure/providers/TanstackProvider.d.ts

@@ -1,53 +1,26 @@
 import React from 'react';
-import { QueryClient } from '@tanstack/react-query';
-import type { Persister } from '@tanstack/react-query-persist-client';
 import { type QueryClientFactoryOptions } from '../config/QueryClientConfig';
-import { type PersisterFactoryOptions } from '../config/PersisterConfig';
+/**
+ * Persister factory options
+ */
+export interface PersisterFactoryOptions {
+    keyPrefix?: string;
+    maxAge?: number;
+    busterVersion?: string;
+    throttleTime?: number;
+}
 /**
  * TanStack provider props
  */
 export interface TanstackProviderProps {
-    /**
-     * Child components
-     */
     children: React.ReactNode;
-    /**
-     * Custom QueryClient instance
-     * If not provided, a default one will be created
-     */
-    queryClient?: QueryClient;
-    /**
-     * QueryClient configuration options
-     * Only used if queryClient is not provided
-     */
+    queryClient?: any;
     queryClientOptions?: QueryClientFactoryOptions;
-    /**
-     * Enable AsyncStorage persistence
-     * @default true
-     */
     enablePersistence?: boolean;
-    /**
-     * Enable DevMonitor logging (development only)
-     * @default false
-     */
     enableDevTools?: boolean;
-    /**
-     * Custom persister instance
-     * Only used if enablePersistence is true
-     */
-    persister?: Persister;
-    /**
-     * Persister configuration options
-     * Only used if enablePersistence is true and persister is not provided
-     */
+    persister?: any;
     persisterOptions?: PersisterFactoryOptions;
-    /**
-     * Callback when persistence is successfully restored
-     */
     onPersistSuccess?: () => void;
-    /**
-     * Callback when persistence restoration fails
-     */
     onPersistError?: () => void;
 }
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.117",
+  "version": "4.26.0",
   "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 - TanStack persistence and expo-image-manipulator now lazy loaded",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",

package/src/molecules/BaseModal.tsx

@@ -41,7 +41,16 @@ export const BaseModal: React.FC<BaseModalProps> = ({
     }
   }, [dismissOnBackdrop, onClose]);
 
-  if (!visible) return null;
+  if (__DEV__) {
+    console.log("[BaseModal] Render:", { visible, testID, hasChildren: !!children });
+  }
+
+  if (!visible) {
+    if (__DEV__) {
+      console.log("[BaseModal] Early returning (visible = false)");
+    }
+    return null;
+  }
 
   return (
     <Modal

package/src/molecules/navigation/components/NavigationHeader.tsx

@@ -9,12 +9,14 @@ export interface NavigationHeaderProps {
   title: string;
   onBackPress?: () => void;
   rightElement?: React.ReactNode;
+  centerTitle?: boolean;
 }
 
 export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
   title,
   onBackPress,
   rightElement,
+  centerTitle = true,
 }) => {
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
@@ -43,13 +45,16 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
     },
     title: {
       flex: 1,
-      textAlign: 'left',
+      textAlign: centerTitle ? 'center' : 'left',
     },
-  }), [tokens, insets]);
+    sideElement: {
+      width: centerTitle ? 40 : 'auto',
+    }
+  }), [tokens, insets, centerTitle]);
 
   return (
     <View style={styles.container}>
-      {onBackPress && (
+      {onBackPress ? (
         <TouchableOpacity
           onPress={onBackPress}
           style={styles.backButton}
@@ -62,10 +67,12 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
             color="textPrimary"
           />
         </TouchableOpacity>
-      )}
+      ) : centerTitle ? (
+        <View style={styles.sideElement} />
+      ) : null}
 
       <AtomicText
-        type="titleMedium"
+        type="titleLarge"
         color="textPrimary"
         numberOfLines={1}
         style={styles.title}
@@ -73,11 +80,13 @@ export const NavigationHeader: React.FC<NavigationHeaderProps> = ({
         {title}
       </AtomicText>
 
-      {rightElement && (
-        <View>
+      {rightElement ? (
+        <View style={styles.sideElement}>
           {rightElement}
         </View>
-      )}
+      ) : centerTitle ? (
+        <View style={styles.sideElement} />
+      ) : null}
     </View>
   );
 };

package/src/tanstack/infrastructure/config/PersisterConfig.ts

@@ -7,7 +7,7 @@
  */
 
 import { storageService } from '../../../storage';
-import { DEFAULT_GC_TIME } from '../../domain/constants/CacheDefaults';
+
 
 /**
  * Persister factory options

package/src/tanstack/infrastructure/providers/TanstackProvider.tsx

@@ -1,5 +1,5 @@
 import React, { useState, lazy, Suspense } from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { QueryClientProvider } from '@tanstack/react-query';
 import { createQueryClient, type QueryClientFactoryOptions } from '../config/QueryClientConfig';
 import { setGlobalQueryClient } from '../config/QueryClientSingleton';
 import { DevMonitor } from '../monitoring/DevMonitor';

package/src/timezone/domain/entities/TimezoneCapabilities.ts

@@ -100,6 +100,9 @@ export interface ITimezoneManipulation {
   /** Get middle of day (12:00:00) */
   getMiddleOfDay(date: Date | string | number): Date;
 
+  /** Set specific time of day (hours and minutes) */
+  setTimeOfDay(date: Date | string | number, hours: number, minutes: number): Date;
+
   /** Convert date from one timezone to another */
   convertTimezone(
     date: Date | string | number,

package/src/timezone/index.ts

@@ -29,3 +29,13 @@ export { timezoneService, TimezoneService } from './infrastructure/services/Time
 
 export { useTimezone } from './presentation/hooks/useTimezone';
 export type { UseTimezoneReturn } from './presentation/hooks/useTimezone';
+
+// =============================================================================
+// UTILITIES
+// =============================================================================
+
+export {
+  formatTimeComponent,
+  parseTimeComponent,
+  millisecondsToSeconds,
+} from './infrastructure/utils/TimeUtils';

package/src/timezone/infrastructure/services/CalendarManager.ts

@@ -103,6 +103,12 @@ export class CalendarManager {
         return result;
     }
 
+    setTimeOfDay(date: Date | string | number, hours: number, minutes: number): Date {
+        const result = this.parse(date);
+        result.setHours(hours, minutes, 0, 0);
+        return result;
+    }
+
     getDifferenceInDays(date1: Date | string | number, date2: Date | string | number): number {
         const d1 = this.parse(date1);
         const d2 = this.parse(date2);

package/src/timezone/infrastructure/services/DateFormatter.ts

@@ -162,8 +162,6 @@ export class DateFormatter {
     ): string {
         const d = this.parse(date);
         const now = new Date();
-        const diffInMs = now.getTime() - d.getTime();
-        const diffInDays = Math.floor(diffInMs / (1000 * 60 * 60 * 24));
 
         // Check for today (today at midnight vs date at midnight)
         const todayDate = new Date(now.getFullYear(), now.getMonth(), now.getDate());

package/src/timezone/infrastructure/services/TimezoneService.ts

@@ -52,6 +52,7 @@ export class TimezoneService implements ITimezoneService {
   addDays(date: Date | string | number, days: number): Date { return this.calendar.addDays(date, days); }
   startOfDay(date: Date | string | number): Date { return this.calendar.startOfDay(date); }
   endOfDay(date: Date | string | number): Date { return this.calendar.endOfDay(date); }
+  setTimeOfDay(date: Date | string | number, hours: number, minutes: number): Date { return this.calendar.setTimeOfDay(date, hours, minutes); }
 
   formatDateToString(date: Date | string | number): string { return this.formatter.formatDateToString(date); }
   getCurrentISOString(): string { return this.formatter.formatToISOString(new Date()); }

package/src/timezone/infrastructure/utils/TimeUtils.ts

@@ -0,0 +1,49 @@
+/**
+ * Time Utilities
+ * Utility functions for time formatting and conversion
+ */
+
+/**
+ * Format hours and minutes as "HH:MM" string
+ *
+ * @example
+ * formatTimeComponent(14, 30) // Returns "14:30"
+ * formatTimeComponent(9, 5) // Returns "09:05"
+ *
+ * @param hours - Hours (0-23)
+ * @param minutes - Minutes (0-59)
+ * @returns Formatted time string
+ */
+export function formatTimeComponent(hours: number, minutes: number): string {
+  const h = String(hours).padStart(2, '0');
+  const m = String(minutes).padStart(2, '0');
+  return `${h}:${m}`;
+}
+
+/**
+ * Parse a time string "HH:MM" to hours and minutes
+ *
+ * @example
+ * parseTimeComponent("14:30") // Returns { hours: 14, minutes: 30 }
+ * parseTimeComponent("09:05") // Returns { hours: 9, minutes: 5 }
+ *
+ * @param timeStr - Time string in "HH:MM" format
+ * @returns Object with hours and minutes
+ */
+export function parseTimeComponent(timeStr: string): { hours: number; minutes: number } {
+  const [hours, minutes] = timeStr.split(':').map(Number);
+  return { hours, minutes };
+}
+
+/**
+ * Convert milliseconds to seconds
+ *
+ * @example
+ * millisecondsToSeconds(5000) // Returns 5
+ *
+ * @param ms - Milliseconds
+ * @returns Seconds
+ */
+export function millisecondsToSeconds(ms: number): number {
+  return Math.floor(ms / 1000);
+}