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

package/src/molecules/SearchBar/SearchBar.tsx

@@ -9,10 +9,10 @@ import { useAppDesignTokens } from '../../theme';
 import { AtomicIcon, useIconName } from '../../atoms';
 import { AtomicSpinner } from '../../atoms/AtomicSpinner';
 import type { SearchBarProps } from './types';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+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/StepHeader/StepHeader.tsx

@@ -12,7 +12,7 @@ import { useAppDesignTokens } from "../../theme/hooks/useAppDesignTokens";
 import {
   calculateResponsiveSize,
   calculateLineHeight,
-} from "../../utils/responsiveUtils";
+} from "../../responsive";
 import { SPACING, STEP_INDICATOR } from "../../constants";
 import { createMappedArray } from "../../utils";
 

package/src/molecules/StepProgress/StepProgress.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from "react";
 import { View, StyleSheet, ViewStyle } from "react-native";
 import { useAppDesignTokens } from '../../theme/hooks/useAppDesignTokens';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../responsive';
 import { STEP_INDICATOR } from '../../constants';
 import { createMappedArray } from '../../utils/arrayUtils';
 

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

@@ -5,7 +5,7 @@ import { AtomicText } from '../../atoms/AtomicText';
 import { AtomicIcon } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import type { ActionFooterProps } from './types';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../responsive';
 import { NAVIGATION } from '../../constants';
 
 const createStyles = (spacingMultiplier: number) => StyleSheet.create({
@@ -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/AlertModal.tsx

@@ -9,7 +9,7 @@ import { useAppDesignTokens } from '../../theme';
 import { Alert, AlertType } from './AlertTypes';
 import { getAlertBackgroundColor } from './utils/alertUtils';
 import { useAlertDismissHandler } from './hooks';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../responsive';
 import { MODAL_SIZES, ALERT_MODAL_ICON } from '../../constants';
 
 interface AlertModalProps {
@@ -82,6 +82,36 @@ export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
         },
     }), [spacingMultiplier, tokens]);
 
+    const modalStyle = useMemo(() => [
+        styles.modal,
+        {
+            backgroundColor: tokens.colors.backgroundPrimary,
+            borderRadius: tokens.borders.radius.xl ?? 20,
+            borderWidth: 1,
+            borderColor: tokens.colors.border,
+        }
+    ], [styles.modal, tokens.colors.backgroundPrimary, tokens.borders.radius.xl, tokens.colors.border]);
+
+    const iconCircleStyle = useMemo(() => [
+        styles.iconCircle,
+        { backgroundColor: accentColor + '22' }
+    ], [styles.iconCircle, accentColor]);
+
+    const titleStyle = useMemo(() => [
+        styles.title,
+        { color: tokens.colors.textPrimary }
+    ], [styles.title, tokens.colors.textPrimary]);
+
+    const messageStyle = useMemo(() => [
+        styles.message,
+        { color: tokens.colors.textSecondary }
+    ], [styles.message, tokens.colors.textSecondary]);
+
+    const actionsContainerStyle = useMemo(() => [
+        hasTwoActions ? styles.actionsRow : styles.actionsColumn,
+        { marginTop: tokens.spacing.lg, gap: tokens.spacing.sm }
+    ], [hasTwoActions, styles.actionsRow, styles.actionsColumn, tokens.spacing.lg, tokens.spacing.sm]);
+
     return (
         <Modal
             visible
@@ -94,20 +124,9 @@ export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
                     style={styles.backdrop}
                     onPress={alert.dismissible ? handleClose : undefined}
                 />
-                <View style={[
-                    styles.modal,
-                    {
-                        backgroundColor: tokens.colors.backgroundPrimary,
-                        borderRadius: tokens.borders.radius.xl ?? 20,
-                        borderWidth: 1,
-                        borderColor: tokens.colors.border,
-                    }
-                ]}>
+                <View style={modalStyle}>
                     {/* Icon circle */}
-                    <View style={[
-                        styles.iconCircle,
-                        { backgroundColor: accentColor + '22' }
-                    ]}>
+                    <View style={iconCircleStyle}>
                         <AtomicIcon
                             name={iconName}
                             customSize={calculateResponsiveSize(36, spacingMultiplier)}
@@ -118,7 +137,7 @@ export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
                     {/* Title */}
                     <AtomicText
                         type="titleLarge"
-                        style={[styles.title, { color: tokens.colors.textPrimary }]}
+                        style={titleStyle}
                     >
                         {alert.title}
                     </AtomicText>
@@ -127,17 +146,14 @@ export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
                     {!!alert.message && (
                         <AtomicText
                             type="bodyMedium"
-                            style={[styles.message, { color: tokens.colors.textSecondary }]}
+                            style={messageStyle}
                         >
                             {alert.message}
                         </AtomicText>
                     )}
 
                     {/* Actions */}
-                    <View style={[
-                        hasTwoActions ? styles.actionsRow : styles.actionsColumn,
-                        { marginTop: tokens.spacing.lg, gap: tokens.spacing.sm }
-                    ]}>
+                    <View style={actionsContainerStyle}>
                         {alert.actions.length === 0 ? (
                             <AtomicButton
                                 title="Close"

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

@@ -12,7 +12,7 @@ import { AtomicText, AtomicIcon } from '../../atoms';
 import type { AvatarSize, AvatarShape } from './Avatar.types';
 import type { SizeConfig } from './Avatar.types';
 import { AVATAR_SIZES } from '../../constants';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../responsive';
 import { AvatarUtils } from './Avatar.utils';
 
 export interface AvatarProps {
@@ -48,23 +48,33 @@ const AvatarContent: React.FC<AvatarContentProps> = React.memo(({
   icon,
   config,
   borderRadius,
-  imageStyle,
+  imageStyle: propImageStyle,
 }) => {
   const tokens = useAppDesignTokens();
 
+  const imageStyle = useMemo(() => [
+    styles.image,
+    {
+      width: config.size,
+      height: config.size,
+      borderRadius,
+    },
+    propImageStyle,
+  ], [config.size, borderRadius, propImageStyle]);
+
+  const initialsStyle = useMemo(() => [
+    styles.initials,
+    {
+      fontSize: config.fontSize,
+      color: tokens.colors.textInverse,
+    },
+  ], [config.fontSize, tokens.colors.textInverse]);
+
   if (hasImage) {
     return (
       <Image
         source={{ uri }}
-        style={[
-          styles.image,
-          {
-            width: config.size,
-            height: config.size,
-            borderRadius,
-          },
-          imageStyle,
-        ]}
+        style={imageStyle}
       />
     );
   }
@@ -73,13 +83,7 @@ const AvatarContent: React.FC<AvatarContentProps> = React.memo(({
     return (
       <AtomicText
         type="bodyMedium"
-        style={[
-          styles.initials,
-          {
-            fontSize: config.fontSize,
-            color: tokens.colors.textInverse,
-          },
-        ]}
+        style={initialsStyle}
       >
         {initials}
       </AtomicText>
@@ -154,20 +158,35 @@ export const Avatar: React.FC<AvatarProps> = ({
     right: 0,
   }), []);
 
+  const containerStyle = useMemo(() => [
+    styles.container,
+    {
+      width: config.size,
+      height: config.size,
+      borderRadius,
+      backgroundColor: bgColor,
+    },
+    style,
+  ], [config.size, borderRadius, bgColor, style]);
+
+  const statusStyle = useMemo(() => [
+    styles.statusIndicator,
+    {
+      width: config.statusSize,
+      height: config.statusSize,
+      borderRadius: config.statusSize / 2,
+      backgroundColor: AvatarUtils.getStatusColor(status),
+      borderWidth: config.borderWidth,
+      borderColor: tokens.colors.onBackground,
+      ...statusPosition,
+    },
+  ], [config.statusSize, config.borderWidth, status, tokens.colors.onBackground, statusPosition]);
+
   const AvatarWrapper = onPress ? TouchableOpacity : View;
 
   return (
     <AvatarWrapper
-      style={[
-        styles.container,
-        {
-          width: config.size,
-          height: config.size,
-          borderRadius,
-          backgroundColor: bgColor,
-        },
-        style,
-      ]}
+      style={containerStyle}
       onPress={onPress}
       disabled={!onPress}
       accessibilityRole={onPress ? 'button' : 'image'}
@@ -187,18 +206,7 @@ export const Avatar: React.FC<AvatarProps> = ({
 
       {showStatus && (
         <View
-          style={[
-            styles.statusIndicator,
-            {
-              width: config.statusSize,
-              height: config.statusSize,
-              borderRadius: config.statusSize / 2,
-              backgroundColor: AvatarUtils.getStatusColor(status),
-              borderWidth: config.borderWidth,
-              borderColor: tokens.colors.onBackground,
-              ...statusPosition,
-            },
-          ]}
+          style={statusStyle}
           accessibilityLabel={`Status: ${status}`}
           accessibilityRole="none"
         />

package/src/molecules/avatar/AvatarGroup.tsx

@@ -12,7 +12,7 @@ import { AtomicText } from '../../atoms';
 import { Avatar } from './Avatar';
 import type { AvatarSize, AvatarShape } from './Avatar.types';
 import { AVATAR_SIZES } from '../../constants';
-import { calculateResponsiveSize } from '../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../responsive';
 import type { SizeConfig } from './Avatar.types';
 
 const AVATAR_CONSTANTS = {
@@ -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/bottom-sheet/components/BottomSheet.tsx

@@ -3,7 +3,7 @@ import { Modal, View, StyleSheet, Pressable } from 'react-native';
 import { useAppDesignTokens } from '../../../theme';
 import { useSafeAreaInsets } from '../../../safe-area';
 import { getResponsiveBottomSheetLayout } from '../../../responsive';
-import { calculateResponsiveSize } from '../../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../../responsive';
 import { BOTTOM_SHEET_HANDLE } from '../../../constants';
 import type {
   BottomSheetRef,

package/src/molecules/bottom-sheet/components/BottomSheetModal.tsx

@@ -3,7 +3,7 @@ import { Modal, View, StyleSheet, Pressable } from 'react-native';
 import { useAppDesignTokens } from '../../../theme';
 import { useSafeAreaInsets } from '../../../safe-area';
 import { getResponsiveBottomSheetLayout } from '../../../responsive';
-import { calculateResponsiveSize } from '../../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../../responsive';
 import { BOTTOM_SHEET_HANDLE } from '../../../constants';
 import type { BottomSheetModalRef, BottomSheetModalProps } from '../types/BottomSheet';
 

package/src/molecules/bottom-sheet/components/filter/FilterSheet.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet, ScrollView, Modal, Pressable, GestureResponderEvent }
 import { useSafeAreaInsets } from "../../../../safe-area";
 import { AtomicButton } from '../../../../atoms';
 import { useAppDesignTokens } from '../../../../theme';
-import { calculateResponsiveSize } from '../../../../utils/responsiveUtils';
+import { calculateResponsiveSize } from '../../../../responsive';
 import { BOTTOM_SHEET_HANDLE } from '../../../../constants';
 import type { FilterOption } from "../../types/Filter";
 import { FilterUtils } from "../../types/Filter";

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