@umituz/react-native-design-system 4.25.111 → 4.25.113

package/dist/timezone/domain/entities/TimezoneCapabilities.d.ts

@@ -36,6 +36,17 @@ export interface ITimezoneFormatting {
     formatToISOString(date: Date | string | number): string;
     /** Format duration in milliseconds to human readable string */
     formatDuration(milliseconds: number): string;
+    /** Format time as minutes:seconds (e.g., "3:45", "12:05") */
+    formatTimeShort(seconds: number): string;
+    /** Format date with relative time labels (Today, Yesterday, X days ago, X weeks ago) */
+    formatRelativeDate(date: Date | string | number, locale: string, translations?: {
+        today?: string;
+        yesterday?: string;
+        daysAgo?: string;
+        weeksAgo?: string;
+    }): string;
+    /** Format date in short format (Jan 1, 2024) */
+    formatShortDate(date: Date | string | number, locale: string): string;
     /** Get relative time from now ("5 minutes ago", "in 2 hours") */
     fromNow(date: Date | string | number, locale?: string): string;
 }

package/dist/timezone/infrastructure/services/DateFormatter.d.ts

@@ -9,4 +9,35 @@ export declare class DateFormatter {
     formatRelativeTime(date: Date | string | number, locale: string): string;
     parse(date: Date | string | number): Date;
     formatDuration(milliseconds: number): string;
+    /**
+     * Format time as minutes:seconds (e.g., "3:45", "12:05")
+     * @param seconds - Time in seconds
+     * @returns Formatted time string
+     */
+    formatTimeShort(seconds: number): string;
+    /**
+     * Format date with relative time labels (Today, Yesterday, X days ago, X weeks ago)
+     * @param date - Date to format
+     * @param locale - Locale code
+     * @param translations - Optional translations for "Today", "Yesterday", "days ago", "weeks ago"
+     * @returns Formatted relative date string
+     */
+    formatRelativeDate(date: Date | string | number, locale: string, translations?: {
+        today?: string;
+        yesterday?: string;
+        daysAgo?: string;
+        weeksAgo?: string;
+    }): string;
+    /**
+     * Get default translation for relative time keys
+     */
+    private getDefaultTranslation;
+    /**
+     * Format date in short format (Jan 1, 2024)
+     */
+    formatShortDate(date: Date | string | number, locale: string): string;
+    /**
+     * Alias for formatRelativeTime - more semantic name for "time ago" formatting
+     */
+    fromNow(date: Date | string | number, locale: string): string;
 }

package/dist/timezone/infrastructure/services/TimezoneService.d.ts

@@ -45,6 +45,14 @@ export declare class TimezoneService implements ITimezoneService {
     getTimezoneOffsetFor(timezone: string, date?: Date | string | number): number;
     convertTimezone(date: Date | string | number, fromTimezone: string, toTimezone: string): Date;
     formatDuration(milliseconds: number): string;
+    formatTimeShort(seconds: number): string;
+    formatRelativeDate(date: Date | string | number, locale: string, translations?: {
+        today?: string;
+        yesterday?: string;
+        daysAgo?: string;
+        weeksAgo?: string;
+    }): string;
+    formatShortDate(date: Date | string | number, locale: string): string;
     isWeekend(date: Date | string | number): boolean;
     addBusinessDays(date: Date | string | number, days: number): Date;
     isFirstDayOfMonth(date: Date | string | number): boolean;

package/dist/timezone/presentation/hooks/useTimezone.d.ts

@@ -15,6 +15,14 @@ export interface UseTimezoneReturn {
     formatToISOString: (date: Date) => string;
     formatRelativeTime: (date: Date) => string;
     formatDateTime: (date: Date, options?: Intl.DateTimeFormatOptions) => string;
+    formatTimeShort: (seconds: number) => string;
+    formatRelativeDate: (date: Date, translations?: {
+        today?: string;
+        yesterday?: string;
+        daysAgo?: string;
+        weeksAgo?: string;
+    }) => string;
+    formatShortDate: (date: Date) => string;
     getTimezones: () => TimezoneInfo[];
     isValid: (date: Date) => boolean;
     getAge: (birthDate: Date) => number;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.111",
-  "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",
+  "version": "4.25.113",
+  "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 now lazy loaded",
   "main": "./src/index.ts",
   "types": "./dist/index.d.ts",
   "sideEffects": false,
@@ -172,6 +172,10 @@
     "react-native-svg": "^15.12.1",
     "rn-emoji-keyboard": "^1.7.0"
   },
+  "optionalDependencies": {
+    "@tanstack/query-async-storage-persister": "^5.0.0",
+    "@tanstack/react-query-persist-client": "^5.0.0"
+  },
   "keywords": [
     "react-native",
     "design-system",

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

@@ -3,12 +3,11 @@
  * Infrastructure layer - AsyncStorage persistence setup
  *
  * General-purpose persistence configuration for any React Native app
+ * Lazy loads TanStack persistence packages to reduce bundle size
  */
 
-import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
 import { storageService } from '../../../storage';
 import { DEFAULT_GC_TIME } from '../../domain/constants/CacheDefaults';
-import type { Persister } from '@tanstack/react-query-persist-client';
 
 /**
  * Persister factory options
@@ -44,6 +43,7 @@ export interface PersisterFactoryOptions {
 
 /**
  * Create an AsyncStorage persister for TanStack Query
+ * Lazy loads the persistence packages to reduce initial bundle size
  *
  * @example
  * ```typescript
@@ -54,7 +54,15 @@ export interface PersisterFactoryOptions {
  * });
  * ```
  */
-export function createPersister(options: PersisterFactoryOptions = {}): Persister {
+export async function createPersister(options: PersisterFactoryOptions = {}) {
+  // Lazy load TanStack persistence packages
+  const [{ createAsyncStoragePersister }, { default: { PersistQueryClient }] = await Promise.all([
+    import('@tanstack/query-async-storage-persister'),
+    import('@tanstack/react-query-persist-client'),
+  ]);
+
+  type Persister = ReturnType<typeof createAsyncStoragePersister>;
+
   const {
     keyPrefix = 'tanstack-query',
     maxAge = DEFAULT_GC_TIME.LONG,
@@ -106,7 +114,7 @@ export function createPersister(options: PersisterFactoryOptions = {}): Persiste
         return undefined;
       }
     },
-  });
+  }) as Persister;
 }
 
 /**

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

@@ -59,6 +59,24 @@ export interface ITimezoneFormatting {
   /** Format duration in milliseconds to human readable string */
   formatDuration(milliseconds: number): string;
 
+  /** Format time as minutes:seconds (e.g., "3:45", "12:05") */
+  formatTimeShort(seconds: number): string;
+
+  /** Format date with relative time labels (Today, Yesterday, X days ago, X weeks ago) */
+  formatRelativeDate(
+    date: Date | string | number,
+    locale: string,
+    translations?: {
+      today?: string;
+      yesterday?: string;
+      daysAgo?: string;
+      weeksAgo?: string;
+    }
+  ): string;
+
+  /** Format date in short format (Jan 1, 2024) */
+  formatShortDate(date: Date | string | number, locale: string): string;
+
   /** Get relative time from now ("5 minutes ago", "in 2 hours") */
   fromNow(date: Date | string | number, locale?: string): string;
 }

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

@@ -131,4 +131,113 @@ export class DateFormatter {
 
         return parts.join(' ');
     }
+
+    /**
+     * Format time as minutes:seconds (e.g., "3:45", "12:05")
+     * @param seconds - Time in seconds
+     * @returns Formatted time string
+     */
+    formatTimeShort(seconds: number): string {
+        const mins = Math.floor(seconds / 60);
+        const secs = seconds % 60;
+        return `${mins}:${secs.toString().padStart(2, '0')}`;
+    }
+
+    /**
+     * Format date with relative time labels (Today, Yesterday, X days ago, X weeks ago)
+     * @param date - Date to format
+     * @param locale - Locale code
+     * @param translations - Optional translations for "Today", "Yesterday", "days ago", "weeks ago"
+     * @returns Formatted relative date string
+     */
+    formatRelativeDate(
+        date: Date | string | number,
+        locale: string,
+        translations?: {
+            today?: string;
+            yesterday?: string;
+            daysAgo?: string;
+            weeksAgo?: string;
+        }
+    ): 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());
+        const targetDate = new Date(d.getFullYear(), d.getMonth(), d.getDate());
+        const daysDiff = Math.floor((todayDate.getTime() - targetDate.getTime()) / (1000 * 60 * 60 * 24));
+
+        if (daysDiff === 0) {
+            return translations?.today || this.getDefaultTranslation('today', locale);
+        }
+
+        if (daysDiff === 1) {
+            return translations?.yesterday || this.getDefaultTranslation('yesterday', locale);
+        }
+
+        if (daysDiff > 0 && daysDiff < 7) {
+            const template = translations?.daysAgo || this.getDefaultTranslation('daysAgo', locale);
+            return template.replace('{{days}}', daysDiff.toString());
+        }
+
+        if (daysDiff >= 7 && daysDiff < 30) {
+            const weeks = Math.floor(daysDiff / 7);
+            const template = translations?.weeksAgo || this.getDefaultTranslation('weeksAgo', locale);
+            return template.replace('{{weeks}}', weeks.toString());
+        }
+
+        // Fall back to regular date format for older dates
+        return this.formatDate(d, locale, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        });
+    }
+
+    /**
+     * Get default translation for relative time keys
+     */
+    private getDefaultTranslation(key: string, locale: string): string {
+        const translations: Record<string, Record<string, string>> = {
+            today: {
+                en: 'Today',
+                tr: 'Bugün',
+            },
+            yesterday: {
+                en: 'Yesterday',
+                tr: 'Dün',
+            },
+            daysAgo: {
+                en: '{{days}} days ago',
+                tr: '{{days}} gün önce',
+            },
+            weeksAgo: {
+                en: '{{weeks}} weeks ago',
+                tr: '{{weeks}} hafta önce',
+            },
+        };
+
+        return translations[key]?.[locale] || translations[key]?.en || key;
+    }
+
+    /**
+     * Format date in short format (Jan 1, 2024)
+     */
+    formatShortDate(date: Date | string | number, locale: string): string {
+        return this.formatDate(date, locale, {
+            year: 'numeric',
+            month: 'short',
+            day: 'numeric',
+        });
+    }
+
+    /**
+     * Alias for formatRelativeTime - more semantic name for "time ago" formatting
+     */
+    fromNow(date: Date | string | number, locale: string): string {
+        return this.formatRelativeTime(date, locale);
+    }
 }

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

@@ -99,6 +99,25 @@ export class TimezoneService implements ITimezoneService {
 
   formatDuration(milliseconds: number): string { return this.formatter.formatDuration(milliseconds); }
 
+  formatTimeShort(seconds: number): string { return this.formatter.formatTimeShort(seconds); }
+
+  formatRelativeDate(
+    date: Date | string | number,
+    locale: string,
+    translations?: {
+      today?: string;
+      yesterday?: string;
+      daysAgo?: string;
+      weeksAgo?: string;
+    }
+  ): string {
+    return this.formatter.formatRelativeDate(date, locale, translations);
+  }
+
+  formatShortDate(date: Date | string | number, locale: string): string {
+    return this.formatter.formatShortDate(date, locale);
+  }
+
   isWeekend(date: Date | string | number): boolean { return this.businessCalendar.isWeekend(date); }
 
   addBusinessDays(date: Date | string | number, days: number): Date {

package/src/timezone/presentation/hooks/useTimezone.ts

@@ -18,6 +18,17 @@ export interface UseTimezoneReturn {
   formatToISOString: (date: Date) => string;
   formatRelativeTime: (date: Date) => string;
   formatDateTime: (date: Date, options?: Intl.DateTimeFormatOptions) => string;
+  formatTimeShort: (seconds: number) => string;
+  formatRelativeDate: (
+    date: Date,
+    translations?: {
+      today?: string;
+      yesterday?: string;
+      daysAgo?: string;
+      weeksAgo?: string;
+    }
+  ) => string;
+  formatShortDate: (date: Date) => string;
   getTimezones: () => TimezoneInfo[];
   isValid: (date: Date) => boolean;
   getAge: (birthDate: Date) => number;
@@ -66,9 +77,19 @@ export const useTimezone = (options?: UseTimezoneOptions): UseTimezoneReturn =>
         timezoneService.formatDateTime(date, locale, opts),
       formatRelativeTime: (date: Date) =>
         timezoneService.formatRelativeTime(date, locale),
+      formatShortDate: (date: Date) =>
+        timezoneService.formatShortDate(date, locale),
+      formatRelativeDate: (date: Date, translations?: {
+        today?: string;
+        yesterday?: string;
+        daysAgo?: string;
+        weeksAgo?: string;
+      }) =>
+        timezoneService.formatRelativeDate(date, locale, translations),
       fromNow: (date: Date) =>
         timezoneService.fromNow(date, locale),
       // Locale-independent delegates
+      formatTimeShort: (seconds: number) => timezoneService.formatTimeShort(seconds),
       getCalendarDays: (year: number, month: number) => timezoneService.getCalendarDays(year, month),
       isToday: (date: Date) => timezoneService.isToday(date),
       isSameDay: (date1: Date, date2: Date) => timezoneService.isSameDay(date1, date2),