@umituz/react-native-design-system 4.28.10 → 4.28.12

package/src/molecules/calendar/presentation/components/CalendarDayCell.tsx

@@ -2,7 +2,7 @@
  * Calendar Day Cell Component
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import { TouchableOpacity, View, StyleProp, ViewStyle } from 'react-native';
 import { AtomicText } from '../../../../atoms';
 import { useAppDesignTokens } from '../../../../theme/hooks/useAppDesignTokens';
@@ -38,22 +38,34 @@ export const CalendarDayCell: React.FC<CalendarDayCellProps> = React.memo(({
   const visibleEvents = day.events.slice(0, maxEventIndicators);
   const hiddenEventCount = Math.max(0, eventCount - maxEventIndicators);
 
+  const cellStyle = useMemo(() => [
+    calendarStyles.dayCell,
+    {
+      backgroundColor: isSelected ? tokens.colors.primary : 'transparent',
+      borderColor: isSelected
+        ? tokens.colors.primary
+        : day.isToday
+          ? tokens.colors.primary
+          : tokens.colors.border,
+      borderWidth: isSelected ? 2 : day.isToday ? 2 : 1,
+      opacity: day.isDisabled ? 0.4 : 1,
+    },
+    dayStyle,
+  ], [isSelected, day.isToday, day.isDisabled, tokens.colors.primary, tokens.colors.border, dayStyle]);
+
+  const dayTextStyle = useMemo(() => [
+    calendarStyles.dayText,
+    day.isToday && !isSelected && { fontWeight: 'bold' as const },
+  ], [day.isToday, isSelected]);
+
+  const todayDotStyle = useMemo(() => [
+    calendarStyles.eventDot,
+    { backgroundColor: tokens.colors.success },
+  ], [calendarStyles.eventDot, tokens.colors.success]);
+
   return (
     <TouchableOpacity
-      style={[
-        calendarStyles.dayCell,
-        {
-          backgroundColor: isSelected ? tokens.colors.primary : 'transparent',
-          borderColor: isSelected
-            ? tokens.colors.primary
-            : day.isToday
-              ? tokens.colors.primary
-              : tokens.colors.border,
-          borderWidth: isSelected ? 2 : day.isToday ? 2 : 1,
-          opacity: day.isDisabled ? 0.4 : 1,
-        },
-        dayStyle,
-      ]}
+      style={cellStyle}
       onPress={() => !day.isDisabled && onDateSelect(day.date)}
       disabled={day.isDisabled}
       testID={testID ? `${testID}-day-${index}` : undefined}
@@ -64,31 +76,35 @@ export const CalendarDayCell: React.FC<CalendarDayCellProps> = React.memo(({
       <AtomicText
         type="bodyMedium"
         color={isSelected ? 'inverse' : day.isCurrentMonth ? 'primary' : 'secondary'}
-        style={[calendarStyles.dayText, day.isToday && !isSelected && { fontWeight: 'bold' }]}
+        style={dayTextStyle}
       >
         {day.date.getDate()}
       </AtomicText>
 
       <View style={calendarStyles.eventIndicators}>
         {day.isToday && eventCount === 0 && (
-          <View style={[calendarStyles.eventDot, { backgroundColor: tokens.colors.success }]} />
+          <View style={todayDotStyle} />
         )}
 
-        {visibleEvents.map((event) => (
-          <View
-            key={event.id}
-            style={[
-              calendarStyles.eventDot,
-              {
-                backgroundColor: event.color
-                  ? event.color
-                  : event.isCompleted
-                    ? tokens.colors.success
-                    : tokens.colors.primary,
-              },
-            ]}
-          />
-        ))}
+        {visibleEvents.map((event) => {
+          const eventDotStyle = useMemo(() => [
+            calendarStyles.eventDot,
+            {
+              backgroundColor: event.color
+                ? event.color
+                : event.isCompleted
+                  ? tokens.colors.success
+                  : tokens.colors.primary,
+            },
+          ], [event.color, event.isCompleted, tokens.colors.success, tokens.colors.primary]);
+
+          return (
+            <View
+              key={event.id}
+              style={eventDotStyle}
+            />
+          );
+        })}
 
         {showEventCount && hiddenEventCount > 0 && (
           <AtomicText type="bodySmall" color="secondary" style={calendarStyles.moreEventsText}>

package/src/molecules/circular-menu/CircularMenuItem.tsx

@@ -4,7 +4,7 @@ import { AtomicIcon } from "../../atoms";
 import { AtomicText } from "../../atoms";
 import { useAppDesignTokens } from "../../theme";
 import { LAYOUT } from "./constants";
-import { calculateResponsiveSize } from "../../utils/responsiveUtils";
+import { calculateResponsiveSize } from "../../responsive";
 
 export interface CircularMenuItemProps {
   icon: string;

package/src/molecules/countdown/components/CountdownHeader.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet, TouchableOpacity } from 'react-native';
 import { AtomicText, AtomicIcon, useIconName } from '../../../atoms';
 import { useAppDesignTokens } from '../../../theme';
 import type { IconName } from '../../../atoms';
-import { calculateResponsiveSize } from '../../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../../responsive';
 import { COUNTDOWN_TOGGLE } from '../../../constants';
 
 export interface CountdownHeaderProps {

package/src/molecules/countdown/components/TimeUnit.tsx

@@ -2,7 +2,7 @@ import React, { useMemo } from 'react';
 import { View, StyleSheet } from 'react-native';
 import { AtomicText } from '../../../atoms';
 import { useAppDesignTokens } from '../../../theme';
-import { calculateResponsiveSize } from '../../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../../responsive';
 import { COUNTDOWN_SIZES } from '../../../constants';
 
 export interface TimeUnitProps {

package/src/molecules/hero-section/HeroSection.tsx

@@ -3,7 +3,7 @@ import React, { useMemo } from 'react';
 import { View, StyleSheet, Text, Image } from 'react-native';
 import { useAppDesignTokens } from '../../theme';
 import type { HeroSectionProps } from './types';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../responsive';
 import { HERO_ICON } from '../../constants';
 
 export const HeroSection: React.FC<HeroSectionProps> = ({

package/src/molecules/icon-grid/IconGrid.tsx

@@ -21,7 +21,7 @@ import { AtomicIcon } from '../../atoms';
 import { AtomicText } from '../../atoms';
 import type { IconName } from '../../atoms';
 import { calculateGridItemWidth } from '../../utils/math';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../responsive';
 import { ICON_GRID } from '../../constants';
 
 export interface IconGridItem {

package/src/molecules/info-grid/InfoGrid.tsx

@@ -5,10 +5,10 @@ import { AtomicText } from '../../atoms/AtomicText';
 import { AtomicIcon } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import type { InfoGridProps } from './types';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../responsive';
 import { INFO_GRID_ICONS } from '../../constants';
 
-export const InfoGrid: React.FC<InfoGridProps> = ({
+export const InfoGrid: React.FC<InfoGridProps> = React.memo(({
   title,
   headerIcon,
   items,
@@ -73,6 +73,8 @@ export const InfoGrid: React.FC<InfoGridProps> = ({
     },
   }), [tokens, columns, spacingMultiplier]);
 
+  const memoizedItemStyle = useMemo(() => itemStyle, [itemStyle]);
+
   return (
     <View style={[styles.container, style]}>
       {(title || headerIcon) && (
@@ -88,7 +90,7 @@ export const InfoGrid: React.FC<InfoGridProps> = ({
 
       <View style={styles.grid}>
         {items.map((item) => (
-          <View key={item.text} style={[styles.item, itemStyle]}>
+          <View key={item.text} style={[styles.item, memoizedItemStyle]}>
             {item.icon && (
               <View style={styles.iconContainer}>
                 <AtomicIcon name={item.icon} size="xs" color="primary" />
@@ -102,4 +104,4 @@ export const InfoGrid: React.FC<InfoGridProps> = ({
       </View>
     </View>
   );
-};
+});

package/src/molecules/navigation/TabsNavigator.tsx

@@ -6,7 +6,7 @@ import type { TabNavigatorConfig, TabScreen } from "./types";
 import { NavigationValidator } from "./utils/NavigationValidator";
 import { createTabScreen } from "./utils/ScreenFactory";
 import { useAppDesignTokens } from "../../theme";
-import { calculateResponsiveSize } from "../../utils/responsiveUtils";
+import { calculateResponsiveSize } from "../../responsive";
 import { NAVIGATION } from "../../constants";
 
 // Create the navigator instance ONCE outside the component

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

@@ -4,7 +4,7 @@ import { AtomicText } from '../../../atoms';
 import { AtomicIcon, useIconName } from '../../../atoms';
 import { useAppDesignTokens } from '../../../theme';
 import { useSafeAreaInsets } from '../../../safe-area';
-import { calculateResponsiveSize } from '../../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../../responsive';
 import { NAVIGATION } from '../../../constants';
 
 export interface NavigationHeaderProps {

package/src/organisms/FormContainer.tsx

@@ -97,6 +97,9 @@ export const FormContainer: React.FC<FormContainerProps> = ({
   showsVerticalScrollIndicator = false,
   testID,
   showBorder = true,
+  accessibilityLabel,
+  accessibilityHint,
+  accessible,
 }) => {
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
@@ -138,7 +141,14 @@ export const FormContainer: React.FC<FormContainerProps> = ({
   );
 
   return (
-    <View style={[styles.container, containerStyle]} testID={testID}>
+    <View
+      style={[styles.container, containerStyle]}
+      testID={testID}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityHint={accessibilityHint}
+      accessible={accessible !== false}
+      accessibilityRole="form"
+    >
       <View style={styles.surface}>
         <ScrollView
           style={styles.scrollView}

package/src/tanstack/domain/utils/ErrorHelpers.ts

@@ -146,8 +146,8 @@ export function getErrorCode(error: unknown): string | null {
 /**
  * Log error in development
  */
-export function logError(_context: string, _error: unknown): void {
+export function logError(context: string, error: unknown): void {
   if (__DEV__) {
-    
+    console.error(`[${context}]`, error);
   }
 }

package/src/tanstack/domain/utils/MetricsCalculator.ts

@@ -22,7 +22,12 @@ export class MetricsCalculator {
    * Calculates fetch time for a query
    */
   static calculateFetchTime(query: Query): number {
-    return Date.now() - (query.state.dataUpdatedAt ?? Date.now());
+    const now = Date.now();
+    const updatedAt = query.state.dataUpdatedAt ?? now;
+    const fetchTime = now - updatedAt;
+
+    // Ensure non-negative (handles cases where dataUpdatedAt is in the future)
+    return Math.max(0, fetchTime);
   }
 
   /**

package/src/theme/core/colors/ColorUtils.ts

@@ -34,10 +34,13 @@ export const withAlpha = (hexColor: string, alpha: number): string => {
     return hexColor;
   }
 
-  // Convert 3-digit hex to 6-digit
-  const hex = hexColor.length === 4 
-    ? hexColor.split('').map(c => c + c).join('')
-    : hexColor;
+  let hex = hexColor;
+
+  // Convert 3-digit hex to 6-digit (e.g., #RGB → #RRGGBB)
+  if (hex.length === 4) {
+    // Remove # and double each character, then add # back
+    hex = '#' + hex.slice(1).split('').map(c => c + c).join('');
+  }
 
   const alphaHex = Math.round(alpha * 255)
     .toString(16)

package/src/utils/formatters/stringFormatter.ts

@@ -22,10 +22,19 @@ export function formatFileSize(bytes: number, options: FileSizeFormatOptions = {
   const { decimals = 1, locale = 'en-US' } = options;
 
   if (bytes === 0) return '0 Bytes';
+  if (bytes < 0) {
+    if (__DEV__) {
+      console.warn(`[formatFileSize] File size cannot be negative (received: ${bytes}), treating as 0`);
+    }
+    return '0 Bytes';
+  }
 
   const k = 1024;
-  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
+  const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB']; // Added EB for safety
+  const i = Math.min(
+    Math.floor(Math.log(bytes) / Math.log(k)),
+    sizes.length - 1 // Prevent array out of bounds
+  );
 
   return `${formatNumber(bytes / Math.pow(k, i), { decimals, locale })} ${sizes[i]}`;
 }
@@ -130,10 +139,16 @@ export function formatPhone(phone: string, options: PhoneFormatOptions = {}): st
  * @returns Truncated text
  */
 export function truncateText(text: string, maxLength: number, suffix: string = '...'): string {
-  if (!text || text.length <= maxLength) {
+  if (!text) return '';
+  if (text.length <= maxLength) {
     return text;
   }
 
+  // Ensure we don't end up with negative slice length
+  if (maxLength <= suffix.length) {
+    return suffix.slice(0, maxLength);
+  }
+
   return text.slice(0, maxLength - suffix.length) + suffix;
 }
 

package/src/utils/index.ts

@@ -2,11 +2,151 @@
  * Utils Module
  *
  * Centralized utility functions for the design system.
+ *
+ * Usage:
+ *   import { createMappedArray, retryWithBackoff, formatFileSize, clamp, Logger, DesignSystemError } from '@umituz/react-native-design-system/utils';
  */
 
+// =============================================================================
+// ARRAY UTILITIES
+// =============================================================================
+
 export {
   createMappedArray,
   safeSlice,
   filterById,
   findById,
 } from './arrayUtils';
+
+// =============================================================================
+// TIME CONSTANTS
+// =============================================================================
+
+export {
+  MILLISECONDS_PER_SECOND,
+  MILLISECONDS_PER_MINUTE,
+  MILLISECONDS_PER_HOUR,
+  MILLISECONDS_PER_DAY,
+  SECONDS_PER_MINUTE,
+  SECONDS_PER_HOUR,
+  SECONDS_PER_DAY,
+  MINUTES_PER_HOUR,
+  MINUTES_PER_DAY,
+  ONE_SECOND_MS,
+  FIVE_SECONDS_MS,
+  TEN_SECONDS_MS,
+  THIRTY_SECONDS_MS,
+  ONE_MINUTE_MS,
+  FIVE_MINUTES_MS,
+  TEN_MINUTES_MS,
+  THIRTY_MINUTES_MS,
+  ONE_HOUR_MS,
+  ONE_DAY_MS,
+  DEFAULT_TIMEOUT_MS,
+  DEFAULT_LONG_TIMEOUT_MS,
+  DEFAULT_CACHE_TTL_MS,
+} from './constants/TimeConstants';
+
+// =============================================================================
+// ASYNC UTILITIES
+// =============================================================================
+
+export {
+  retryWithBackoff,
+  retryWithTimeout,
+  isNetworkError,
+  isRetryableHttpStatus,
+  type RetryOptions,
+} from './async';
+
+// =============================================================================
+// FORMATTER UTILITIES
+// =============================================================================
+
+export {
+  formatFileSize,
+  formatDuration,
+  formatPhone,
+  truncateText,
+  capitalize,
+  toTitleCase,
+  toSlug,
+  type FileSizeFormatOptions,
+  type DurationFormatOptions,
+  type PhoneFormatOptions,
+} from './formatters/stringFormatter';
+
+// =============================================================================
+// MATH UTILITIES
+// =============================================================================
+
+export {
+  clamp,
+  calculatePercentage,
+  roundTo,
+  calculateGridItemWidth,
+  isInRange,
+  lerp,
+  mapRange,
+  normalizeProgress,
+  formatPercentage,
+  calculateStepProgress,
+  isComplete,
+  hasStarted,
+  intensityToOpacity,
+  createRgbaColor,
+  ratioToOpacity,
+} from './math';
+
+// =============================================================================
+// LOGGER
+// =============================================================================
+
+export {
+  Logger,
+  logger,
+  type LoggerConfig,
+} from './logger';
+
+// =============================================================================
+// HOOKS
+// =============================================================================
+
+export {
+  useAsyncOperation,
+  type AsyncOperationOptions,
+  type AsyncOperationState,
+  type AsyncOperationActions,
+  type AsyncOperationReturn,
+  type ErrorHandler as AsyncErrorHandler,
+} from './hooks';
+
+// =============================================================================
+// ERROR HANDLING
+// =============================================================================
+
+export {
+  DesignSystemError,
+  ErrorCodes,
+  ErrorCategory,
+} from './errors';
+
+export type {
+  ErrorCode,
+  ErrorMetadata,
+} from './errors';
+
+export { ErrorHandler } from './errors/ErrorHandler';
+
+export type {
+  Result,
+} from './errors/types/Result';
+
+export {
+  ok,
+  err,
+  unwrap,
+  unwrapOr,
+  map,
+  mapError,
+} from './errors';

package/src/utils/math/CalculationUtils.ts

@@ -109,5 +109,14 @@ export function mapRange(
   outMin: number,
   outMax: number
 ): number {
-  return ((value - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
+  const range = inMax - inMin;
+  if (range === 0) {
+    // When input range is zero, return output minimum
+    // This prevents division by zero (Infinity/NaN)
+    if (__DEV__) {
+      console.warn(`[mapRange] Input range is zero (inMin=${inMin}, inMax=${inMax}), returning outMin=${outMin}`);
+    }
+    return outMin;
+  }
+  return ((value - inMin) * (outMax - outMin)) / range + outMin;
 }