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

package/src/molecules/SearchBar/SearchBar.tsx

@@ -12,7 +12,7 @@ import type { SearchBarProps } from './types';
 import { calculateResponsiveSize } from '../../responsive';
 import { MISC_SIZES } from '../../constants';
 
-export const SearchBar: React.FC<SearchBarProps> = ({
+export const SearchBar: React.FC<SearchBarProps> = React.memo(({
     value,
     onChangeText,
     onSubmit,
@@ -22,8 +22,8 @@ export const SearchBar: React.FC<SearchBarProps> = ({
     placeholder = 'Search...',
     loading = false,
     disabled = false,
-    containerStyle,
-    inputStyle,
+    containerStyle: propContainerStyle,
+    inputStyle: propInputStyle,
     testID,
 }) => {
     const tokens = useAppDesignTokens();
@@ -42,19 +42,30 @@ export const SearchBar: React.FC<SearchBarProps> = ({
 
     const spacingMultiplier = tokens.spacingMultiplier;
 
+    const containerStyle = useMemo(() => [
+        styles.container,
+        {
+            backgroundColor: tokens.colors.surfaceVariant,
+            borderColor: tokens.colors.border,
+            height: calculateResponsiveSize(MISC_SIZES.searchInputHeight, spacingMultiplier),
+            paddingHorizontal: calculateResponsiveSize(tokens.spacing.md, spacingMultiplier),
+            borderRadius: calculateResponsiveSize(MISC_SIZES.searchBorderRadius, spacingMultiplier),
+        },
+        propContainerStyle,
+    ], [tokens.colors.surfaceVariant, tokens.colors.border, spacingMultiplier, propContainerStyle]);
+
+    const inputTextStyle = useMemo(() => [
+        styles.input,
+        {
+            color: tokens.colors.textPrimary,
+            fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+        },
+        propInputStyle,
+    ], [styles.input, tokens.colors.textPrimary, tokens.typography.bodyMedium.responsiveFontSize, propInputStyle]);
+
     return (
         <View
-            style={[
-                styles.container,
-                {
-                    backgroundColor: tokens.colors.surfaceVariant,
-                    borderColor: tokens.colors.border,
-                    height: calculateResponsiveSize(MISC_SIZES.searchInputHeight, spacingMultiplier),
-                    paddingHorizontal: calculateResponsiveSize(tokens.spacing.md, spacingMultiplier),
-                    borderRadius: calculateResponsiveSize(MISC_SIZES.searchBorderRadius, spacingMultiplier),
-                },
-                containerStyle,
-            ]}
+            style={containerStyle}
             testID={testID}
         >
             <View style={styles.searchIcon}>
@@ -77,14 +88,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
                 returnKeyType="search"
                 autoCapitalize="none"
                 autoCorrect={false}
-                style={[
-                    styles.input,
-                    {
-                        color: tokens.colors.textPrimary,
-                        fontSize: tokens.typography.bodyMedium.responsiveFontSize,
-                    },
-                    inputStyle,
-                ]}
+                style={inputTextStyle}
             />
 
             {(loading || showClear) && (
@@ -116,7 +120,7 @@ export const SearchBar: React.FC<SearchBarProps> = ({
             )}
         </View>
     );
-};
+});
 
 const styles = StyleSheet.create({
     container: {

package/src/molecules/action-footer/ActionFooter.tsx

@@ -58,38 +58,39 @@ export const ActionFooter = React.memo<ActionFooterProps>(({
   const tokens = useAppDesignTokens();
   const spacingMultiplier = tokens.spacingMultiplier;
 
-  const baseStyles = createStyles(spacingMultiplier);
-
   const themedStyles = useMemo(
-    () => ({
-      container: {
-        ...baseStyles.container,
-        paddingVertical: tokens.spacing.md,
-        gap: tokens.spacing.md,
-      },
-      backButton: {
-        ...baseStyles.backButton,
-        borderRadius: tokens.borders.radius.lg,
-        backgroundColor: tokens.colors.surface,
-        borderColor: tokens.colors.outlineVariant,
-      },
-      actionButton: {
-        ...baseStyles.actionButton,
-        borderRadius: tokens.borders.radius.lg,
-      },
-      actionContent: {
-        ...baseStyles.actionContent,
-        backgroundColor: tokens.colors.primary,
-        gap: tokens.spacing.sm,
-        paddingHorizontal: tokens.spacing.lg,
-      },
-      actionText: {
-        ...baseStyles.actionText,
-        color: tokens.colors.onPrimary,
-        fontSize: calculateResponsiveSize(18, spacingMultiplier),
-      },
-    }),
-    [baseStyles, tokens, spacingMultiplier],
+    () => {
+      const baseStyles = createStyles(spacingMultiplier);
+      return {
+        container: {
+          ...baseStyles.container,
+          paddingVertical: tokens.spacing.md,
+          gap: tokens.spacing.md,
+        },
+        backButton: {
+          ...baseStyles.backButton,
+          borderRadius: tokens.borders.radius.lg,
+          backgroundColor: tokens.colors.surface,
+          borderColor: tokens.colors.outlineVariant,
+        },
+        actionButton: {
+          ...baseStyles.actionButton,
+          borderRadius: tokens.borders.radius.lg,
+        },
+        actionContent: {
+          ...baseStyles.actionContent,
+          backgroundColor: tokens.colors.primary,
+          gap: tokens.spacing.sm,
+          paddingHorizontal: tokens.spacing.lg,
+        },
+        actionText: {
+          ...baseStyles.actionText,
+          color: tokens.colors.onPrimary,
+          fontSize: calculateResponsiveSize(18, spacingMultiplier),
+        },
+      };
+    },
+    [tokens, spacingMultiplier],
   );
 
   const handleBackPress = useCallback(() => {

package/src/molecules/alerts/AlertService.ts

@@ -7,6 +7,12 @@ import { Alert, AlertType, AlertMode, AlertOptions, AlertPosition } from './Aler
 import { useAlertStore } from './AlertStore';
 
 export class AlertService {
+    // Debouncing state
+    private static lastAlertTime = 0;
+    private static debounceDelay = 300; // ms
+    private static pendingAlertTimeout: ReturnType<typeof setTimeout> | null = null;
+    private static pendingAlert: { type: AlertType; mode: AlertMode; title: string; message?: string; options?: AlertOptions } | null = null;
+
     /**
      * Creates a base Alert object with defaults
      */
@@ -59,38 +65,71 @@ export class AlertService {
         return this.createAlert(AlertType.INFO, AlertMode.TOAST, title, message, options);
     }
 
+    /**
+     * Add alert with debouncing to prevent spam
+     */
+    private static addAlertDebounced(type: AlertType, mode: AlertMode, title: string, message?: string, options?: AlertOptions): string {
+        const now = Date.now();
+        const timeSinceLastAlert = now - this.lastAlertTime;
+
+        // Clear any pending alert
+        if (this.pendingAlertTimeout) {
+            clearTimeout(this.pendingAlertTimeout);
+            this.pendingAlertTimeout = null;
+        }
+
+        // If enough time has passed, show immediately
+        if (timeSinceLastAlert >= this.debounceDelay) {
+            const alert = this.createAlert(type, mode, title, message, options);
+            useAlertStore.getState().addAlert(alert);
+            this.lastAlertTime = now;
+            return alert.id;
+        }
+
+        // Otherwise, debounce and show the latest alert after delay
+        this.pendingAlert = { type, mode, title, message, options };
+        this.pendingAlertTimeout = setTimeout(() => {
+            if (this.pendingAlert) {
+                const alert = this.createAlert(
+                    this.pendingAlert.type,
+                    this.pendingAlert.mode,
+                    this.pendingAlert.title,
+                    this.pendingAlert.message,
+                    this.pendingAlert.options
+                );
+                useAlertStore.getState().addAlert(alert);
+                this.lastAlertTime = Date.now();
+                this.pendingAlert = null;
+                this.pendingAlertTimeout = null;
+            }
+        }, this.debounceDelay);
+
+        // Return a placeholder ID (the real alert will be shown after debounce)
+        return `pending-${Date.now()}`;
+    }
+
     /**
      * Convenience methods to show alerts directly from outside React components
      * These access the Zustand store directly without requiring hooks
      */
     static success(title: string, message?: string, options?: AlertOptions): string {
-        const alert = this.createSuccessAlert(title, message, options);
-        useAlertStore.getState().addAlert(alert);
-        return alert.id;
+        return this.addAlertDebounced(AlertType.SUCCESS, AlertMode.TOAST, title, message, options);
     }
 
     static error(title: string, message?: string, options?: AlertOptions): string {
-        const alert = this.createErrorAlert(title, message, options);
-        useAlertStore.getState().addAlert(alert);
-        return alert.id;
+        return this.addAlertDebounced(AlertType.ERROR, AlertMode.TOAST, title, message, options);
     }
 
     static warning(title: string, message?: string, options?: AlertOptions): string {
-        const alert = this.createWarningAlert(title, message, options);
-        useAlertStore.getState().addAlert(alert);
-        return alert.id;
+        return this.addAlertDebounced(AlertType.WARNING, AlertMode.TOAST, title, message, options);
     }
 
     static info(title: string, message?: string, options?: AlertOptions): string {
-        const alert = this.createInfoAlert(title, message, options);
-        useAlertStore.getState().addAlert(alert);
-        return alert.id;
+        return this.addAlertDebounced(AlertType.INFO, AlertMode.TOAST, title, message, options);
     }
 
     static show(type: AlertType, mode: AlertMode, title: string, message?: string, options?: AlertOptions): string {
-        const alert = this.createAlert(type, mode, title, message, options);
-        useAlertStore.getState().addAlert(alert);
-        return alert.id;
+        return this.addAlertDebounced(type, mode, title, message, options);
     }
 
     static dismiss(id: string): void {
@@ -98,6 +137,12 @@ export class AlertService {
     }
 
     static clear(): void {
+        // Clear any pending alert
+        if (this.pendingAlertTimeout) {
+            clearTimeout(this.pendingAlertTimeout);
+            this.pendingAlertTimeout = null;
+            this.pendingAlert = null;
+        }
         useAlertStore.getState().clearAlerts();
     }
 }

package/src/molecules/avatar/Avatar.tsx

@@ -48,7 +48,7 @@ const AvatarContent: React.FC<AvatarContentProps> = React.memo(({
   icon,
   config,
   borderRadius,
-  imageStyle,
+  imageStyle: propImageStyle,
 }) => {
   const tokens = useAppDesignTokens();
 
@@ -59,8 +59,8 @@ const AvatarContent: React.FC<AvatarContentProps> = React.memo(({
       height: config.size,
       borderRadius,
     },
-    imageStyle,
-  ], [config.size, borderRadius, imageStyle]);
+    propImageStyle,
+  ], [config.size, borderRadius, propImageStyle]);
 
   const initialsStyle = useMemo(() => [
     styles.initials,

package/src/molecules/avatar/AvatarGroup.tsx

@@ -58,13 +58,13 @@ const AvatarItem = React.memo<{
   spacing: number;
   avatarStyle: any;
 }>(({ item, index, size, shape, spacing, avatarStyle }) => {
-  const wrapperStyle = useMemo(
-    () => [
-      styles.avatarWrapper,
-      index > 0 && { marginLeft: spacing },
-    ],
-    [index, spacing]
-  );
+  const wrapperStyle = useMemo(() => {
+    const baseStyle = [styles.avatarWrapper];
+    if (index > 0) {
+      baseStyle.push({ marginLeft: spacing });
+    }
+    return baseStyle;
+  }, [index, spacing]);
 
   return (
     <View style={wrapperStyle}>

package/src/molecules/calendar/infrastructure/utils/DateUtilities.ts

@@ -96,7 +96,18 @@ export class DateUtilities {
     const year = parts[0] ?? 0;
     const month = parts[1] ?? 1;
     const day = parts[2] ?? 1;
-    return new Date(year, month - 1, day);
+
+    const date = new Date(year, month - 1, day);
+
+    // Validate the date is not invalid
+    if (isNaN(date.getTime())) {
+      if (__DEV__) {
+        console.warn(`[DateUtilities] Invalid date string: ${dateString}`);
+      }
+      throw new Error(`Invalid date string: ${dateString}`);
+    }
+
+    return date;
   }
 
   /**

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/info-grid/InfoGrid.tsx

@@ -8,7 +8,7 @@ import type { InfoGridProps } from './types';
 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/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

@@ -118,10 +118,9 @@ export {
   type AsyncOperationState,
   type AsyncOperationActions,
   type AsyncOperationReturn,
+  type ErrorHandler as AsyncErrorHandler,
 } from './hooks';
 
-export type { ErrorHandler as AsyncErrorHandler } from './hooks';
-
 // =============================================================================
 // ERROR HANDLING
 // =============================================================================
@@ -130,8 +129,11 @@ export {
   DesignSystemError,
   ErrorCodes,
   ErrorCategory,
-  type ErrorCode,
-  type ErrorMetadata,
+} from './errors';
+
+export type {
+  ErrorCode,
+  ErrorMetadata,
 } from './errors';
 
 export { ErrorHandler } from './errors/ErrorHandler';

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;
 }