@umituz/react-native-design-system 4.23.117 → 4.23.119

package/src/molecules/alerts/AlertBanner.tsx

@@ -6,38 +6,28 @@
  * Auto-dismisses after duration (default 3 seconds).
  */
 
-import React, { useEffect, useCallback } from 'react';
+import React from 'react';
 import { StyleSheet, View, Pressable } from 'react-native';
 import { useSafeAreaInsets } from '../../safe-area';
-import { AtomicText, AtomicIcon, useIconName } from '../../atoms';
+import { AtomicText, useIconName } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import { Alert, AlertPosition } from './AlertTypes';
-import { useAlertStore } from './AlertStore';
-import { getAlertBackgroundColor, getAlertTextColor, DEFAULT_ALERT_DURATION } from './utils/alertUtils';
+import { getAlertBackgroundColor, getAlertTextColor, getActionButtonStyle, getActionTextColor } from './utils/alertUtils';
+import { useAlertDismissHandler, useAlertAutoDismiss } from './hooks';
+import { AlertIcon, AlertContent } from './components';
 
 interface AlertBannerProps {
     alert: Alert;
 }
 
 export function AlertBanner({ alert }: AlertBannerProps) {
-    const dismissAlert = useAlertStore((state: { dismissAlert: (id: string) => void }) => state.dismissAlert);
     const insets = useSafeAreaInsets();
     const tokens = useAppDesignTokens();
     const closeIcon = useIconName('close');
 
-    const handleDismiss = useCallback(() => {
-        dismissAlert(alert.id);
-        alert.onDismiss?.();
-    }, [alert.id, dismissAlert, alert.onDismiss]);
-
-    // Auto-dismiss after duration
-    useEffect(() => {
-        const duration = alert.duration ?? DEFAULT_ALERT_DURATION;
-        if (duration <= 0) return;
-
-        const timer = setTimeout(handleDismiss, duration);
-        return () => clearTimeout(timer);
-    }, [alert.duration, handleDismiss]);
+    // Use shared hooks (replaces 20 lines of duplicate code)
+    const handleDismiss = useAlertDismissHandler(alert);
+    useAlertAutoDismiss(alert, handleDismiss);
 
     const backgroundColor = getAlertBackgroundColor(alert.type, tokens);
     const textColor = getAlertTextColor(tokens);
@@ -59,36 +49,22 @@ export function AlertBanner({ alert }: AlertBannerProps) {
             <View style={styles.content}>
                 <View style={styles.row}>
                     {alert.icon && (
-                        <AtomicIcon
+                        <AlertIcon
                             name={alert.icon}
-                            customSize={20}
-                            customColor={textColor}
-                            style={{ marginRight: tokens.spacing.sm }}
+                            color={textColor}
+                            marginRight={tokens.spacing.sm}
                         />
                     )}
 
-                    <View style={styles.textContainer}>
-                        <AtomicText
-                            type="bodyMedium"
-                            style={[styles.title, { color: textColor }]}
-                            numberOfLines={1}
-                        >
-                            {alert.title}
-                        </AtomicText>
-
-                        {alert.message && (
-                            <AtomicText
-                                type="bodySmall"
-                                style={[
-                                    styles.message,
-                                    { color: textColor, marginTop: tokens.spacing.xs },
-                                ]}
-                                numberOfLines={2}
-                            >
-                                {alert.message}
-                            </AtomicText>
-                        )}
-                    </View>
+                    <AlertContent
+                        title={alert.title}
+                        message={alert.message}
+                        titleColor={textColor}
+                        messageColor={textColor}
+                        messageMarginTop={tokens.spacing.xs}
+                        titleNumberOfLines={1}
+                        messageNumberOfLines={2}
+                    />
 
                     {alert.dismissible && (
                         <Pressable
@@ -96,7 +72,7 @@ export function AlertBanner({ alert }: AlertBannerProps) {
                             style={[styles.closeButton, { marginLeft: tokens.spacing.sm }]}
                             hitSlop={8}
                         >
-                            <AtomicIcon name={closeIcon} customSize={20} customColor={textColor} />
+                            <AlertIcon name={closeIcon} color={textColor} />
                         </Pressable>
                     )}
                 </View>
@@ -118,14 +94,16 @@ export function AlertBanner({ alert }: AlertBannerProps) {
                                         paddingVertical: tokens.spacing.xs,
                                         paddingHorizontal: tokens.spacing.sm,
                                         marginRight: tokens.spacing.xs,
+                                        borderRadius: tokens.borders.radius.sm,
                                     },
+                                    getActionButtonStyle(action.style, tokens),
                                 ]}
                             >
                                 <AtomicText
                                     type="bodySmall"
                                     style={[
                                         styles.actionText,
-                                        { color: textColor },
+                                        { color: getActionTextColor(action.style, tokens) },
                                     ]}
                                 >
                                     {action.label}

package/src/molecules/alerts/AlertInline.tsx

@@ -4,10 +4,10 @@
 
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { AtomicText } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import { Alert } from './AlertTypes';
 import { getAlertBorderColor, getAlertBackgroundColorInline } from './utils/alertUtils';
+import { AlertContent } from './components';
 
 interface AlertInlineProps {
     alert: Alert;
@@ -27,14 +27,13 @@ export const AlertInline: React.FC<AlertInlineProps> = ({ alert }) => {
                 marginVertical: tokens.spacing.sm,
             }
         ]}>
-            <AtomicText type="bodyMedium" style={{ color: tokens.colors.textPrimary, fontWeight: '700' }}>
-                {alert.title}
-            </AtomicText>
-            {alert.message && (
-                <AtomicText type="bodySmall" style={{ color: tokens.colors.textSecondary, marginTop: tokens.spacing.xs }}>
-                    {alert.message}
-                </AtomicText>
-            )}
+            <AlertContent
+                title={alert.title}
+                message={alert.message}
+                titleColor={tokens.colors.textPrimary}
+                messageColor={tokens.colors.textSecondary}
+                messageMarginTop={tokens.spacing.xs}
+            />
         </View>
     );
 };

package/src/molecules/alerts/AlertModal.tsx

@@ -4,24 +4,22 @@
 
 import React from 'react';
 import { StyleSheet, View, Modal, Pressable } from 'react-native';
-import { AtomicText, AtomicButton } from '../../atoms';
+import { AtomicButton } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import { Alert } from './AlertTypes';
-import { useAlertStore } from './AlertStore';
 import { getAlertBackgroundColor } from './utils/alertUtils';
+import { useAlertDismissHandler } from './hooks';
+import { AlertContent } from './components';
 
 interface AlertModalProps {
     alert: Alert;
 }
 
 export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
-    const dismissAlert = useAlertStore((state: { dismissAlert: (id: string) => void }) => state.dismissAlert);
     const tokens = useAppDesignTokens();
 
-    const handleClose = () => {
-        dismissAlert(alert.id);
-        alert.onDismiss?.();
-    };
+    // Use shared hook (replaces 8 lines of duplicate code)
+    const handleClose = useAlertDismissHandler(alert);
 
     const headerColor = getAlertBackgroundColor(alert.type, tokens);
 
@@ -47,16 +45,26 @@ export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
                     }
                 ]}>
                     <View style={[styles.header, { backgroundColor: headerColor }]}>
-                        <AtomicText type="titleLarge" style={{ color: tokens.colors.textInverse }}>
-                            {alert.title}
-                        </AtomicText>
+                        <AlertContent
+                            title={alert.title}
+                            message=""
+                            titleColor={tokens.colors.textInverse}
+                            messageColor={tokens.colors.textInverse}
+                            titleType="titleLarge"
+                            textAlign="center"
+                        />
                     </View>
 
                     <View style={[styles.content, { padding: tokens.spacing.lg }]}>
                         {alert.message && (
-                            <AtomicText type="bodyMedium" style={{ color: tokens.colors.textPrimary, textAlign: 'center' }}>
-                                {alert.message}
-                            </AtomicText>
+                            <AlertContent
+                                title=""
+                                message={alert.message}
+                                titleColor={tokens.colors.textPrimary}
+                                messageColor={tokens.colors.textPrimary}
+                                messageType="bodyMedium"
+                                textAlign="center"
+                            />
                         )}
 
                         <View style={[styles.actions, { marginTop: tokens.spacing.lg, gap: tokens.spacing.sm }]}>
@@ -66,10 +74,11 @@ export const AlertModal: React.FC<AlertModalProps> = ({ alert }) => {
                                     title={action.label}
                                     variant={action.style === 'destructive' ? 'danger' : action.style === 'secondary' ? 'secondary' : 'primary'}
                                     onPress={async () => {
+                                        // BUG FIX: Execute action BEFORE closing (was backwards)
+                                        await action.onPress();
                                         if (action.closeOnPress ?? true) {
                                             handleClose();
                                         }
-                                        await action.onPress();
                                     }}
                                     fullWidth
                                 />

package/src/molecules/alerts/AlertToast.tsx

@@ -5,48 +5,31 @@
  * Floats on top of content.
  */
 
-import React, { useEffect, useCallback } from 'react';
+import React from 'react';
 import { StyleSheet, View, Pressable } from 'react-native';
-import { AtomicText, AtomicIcon, useIconName } from '../../atoms';
+import { AtomicText, useIconName } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
 import { Alert } from './AlertTypes';
-import { useAlertStore } from './AlertStore';
 import {
     getAlertBackgroundColor,
     getAlertTextColor,
     getActionButtonStyle,
     getActionTextColor,
-    DEFAULT_ALERT_DURATION,
 } from './utils/alertUtils';
+import { useAlertDismissHandler, useAlertAutoDismiss } from './hooks';
+import { AlertIcon, AlertContent } from './components';
 
 interface AlertToastProps {
   alert: Alert;
 }
 
 export function AlertToast({ alert }: AlertToastProps) {
-  const dismissAlert = useAlertStore((state: { dismissAlert: (id: string) => void }) => state.dismissAlert);
   const tokens = useAppDesignTokens();
   const closeIcon = useIconName('close');
 
-  const dismiss = useCallback(() => {
-    dismissAlert(alert.id);
-    alert.onDismiss?.();
-  }, [alert.id, dismissAlert, alert.onDismiss]);
-
-  const handleDismiss = useCallback(() => {
-    if (alert.dismissible) {
-      dismiss();
-    }
-  }, [alert.dismissible, dismiss]);
-
-  // Auto-dismiss after duration
-  useEffect(() => {
-    const duration = alert.duration ?? DEFAULT_ALERT_DURATION;
-    if (duration <= 0) return;
-
-    const timer = setTimeout(dismiss, duration);
-    return () => clearTimeout(timer);
-  }, [alert.duration, dismiss]);
+  // Use shared hooks (replaces 25 lines of duplicate code)
+  const handleDismiss = useAlertDismissHandler(alert);
+  useAlertAutoDismiss(alert, handleDismiss);
 
   const backgroundColor = getAlertBackgroundColor(alert.type, tokens);
   const textColor = getAlertTextColor(tokens);
@@ -63,39 +46,28 @@ export function AlertToast({ alert }: AlertToastProps) {
       ]}
       testID={alert.testID}
     >
-      <Pressable onPress={handleDismiss} style={styles.content}>
+      <Pressable
+        onPress={alert.dismissible ? handleDismiss : undefined}
+        style={styles.content}
+      >
         <View style={styles.row}>
           {alert.icon && (
-            <AtomicIcon
+            <AlertIcon
               name={alert.icon}
-              customSize={20}
-              customColor={textColor}
-              style={{ marginRight: tokens.spacing.sm }}
+              color={textColor}
+              marginRight={tokens.spacing.sm}
             />
           )}
 
-          <View style={styles.textContainer}>
-            <AtomicText
-              type="bodyMedium"
-              style={[styles.title, { color: textColor }]}
-              numberOfLines={2}
-            >
-              {alert.title}
-            </AtomicText>
-
-            {alert.message && (
-              <AtomicText
-                type="bodySmall"
-                style={[
-                  styles.message,
-                  { color: textColor, marginTop: tokens.spacing.xs },
-                ]}
-                numberOfLines={3}
-              >
-                {alert.message}
-              </AtomicText>
-            )}
-          </View>
+          <AlertContent
+            title={alert.title}
+            message={alert.message}
+            titleColor={textColor}
+            messageColor={textColor}
+            messageMarginTop={tokens.spacing.xs}
+            titleNumberOfLines={2}
+            messageNumberOfLines={3}
+          />
 
           {alert.dismissible && (
             <Pressable
@@ -103,7 +75,7 @@ export function AlertToast({ alert }: AlertToastProps) {
               style={[styles.closeButton, { marginLeft: tokens.spacing.sm }]}
               hitSlop={8}
             >
-              <AtomicIcon name={closeIcon} customSize={20} customColor={textColor} />
+              <AlertIcon name={closeIcon} color={textColor} />
             </Pressable>
           )}
         </View>
@@ -116,7 +88,7 @@ export function AlertToast({ alert }: AlertToastProps) {
                 onPress={async () => {
                   await action.onPress();
                   if (action.closeOnPress ?? true) {
-                    dismiss();
+                    handleDismiss();
                   }
                 }}
                 style={[

package/src/molecules/alerts/components/AlertContent.tsx

@@ -0,0 +1,79 @@
+/**
+ * AlertContent Component
+ *
+ * Shared title + message layout for alert variants.
+ */
+
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { AtomicText } from '../../../atoms';
+
+interface AlertContentProps {
+  title: string;
+  message?: string;
+  titleColor: string;
+  messageColor: string;
+  titleType?: 'bodyMedium' | 'titleLarge';
+  messageType?: 'bodySmall' | 'bodyMedium';
+  messageMarginTop?: number;
+  titleNumberOfLines?: number;
+  messageNumberOfLines?: number;
+  textAlign?: 'left' | 'center' | 'right';
+}
+
+export function AlertContent({
+  title,
+  message,
+  titleColor,
+  messageColor,
+  titleType = 'bodyMedium',
+  messageType = 'bodySmall',
+  messageMarginTop = 0,
+  titleNumberOfLines = 2,
+  messageNumberOfLines = 3,
+  textAlign = 'left',
+}: AlertContentProps) {
+  return (
+    <View style={styles.container}>
+      <AtomicText
+        type={titleType}
+        style={[
+          styles.title,
+          { color: titleColor, textAlign },
+        ]}
+        numberOfLines={titleNumberOfLines}
+      >
+        {title}
+      </AtomicText>
+
+      {message && (
+        <AtomicText
+          type={messageType}
+          style={[
+            styles.message,
+            {
+              color: messageColor,
+              marginTop: messageMarginTop,
+              textAlign,
+            },
+          ]}
+          numberOfLines={messageNumberOfLines}
+        >
+          {message}
+        </AtomicText>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  title: {
+    fontWeight: '700',
+  },
+  message: {
+    opacity: 0.9,
+  },
+});

package/src/molecules/alerts/components/AlertIcon.tsx

@@ -0,0 +1,31 @@
+/**
+ * AlertIcon Component
+ *
+ * Shared icon rendering for alert variants.
+ */
+
+import React from 'react';
+import { AtomicIcon } from '../../../atoms';
+
+interface AlertIconProps {
+  name: string;
+  color: string;
+  size?: number;
+  marginRight?: number;
+}
+
+export function AlertIcon({
+  name,
+  color,
+  size = 20,
+  marginRight = 0
+}: AlertIconProps) {
+  return (
+    <AtomicIcon
+      name={name}
+      customSize={size}
+      customColor={color}
+      style={{ marginRight }}
+    />
+  );
+}

package/src/molecules/alerts/components/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Alert Components Barrel Export
+ */
+
+export { AlertIcon } from './AlertIcon';
+export { AlertContent } from './AlertContent';

package/src/molecules/alerts/hooks/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Alert Hooks Barrel Export
+ */
+
+export { useAlertDismissHandler } from './useAlertDismissHandler';
+export { useAlertAutoDismiss } from './useAlertAutoDismiss';

package/src/molecules/alerts/hooks/useAlertAutoDismiss.ts

@@ -0,0 +1,26 @@
+/**
+ * useAlertAutoDismiss Hook
+ *
+ * Handles auto-dismiss timer for alerts with duration.
+ * Checks dismissible flag before setting timer (fixes AlertBanner bug).
+ */
+
+import { useEffect } from 'react';
+import type { Alert } from '../AlertTypes';
+import { DEFAULT_ALERT_DURATION } from '../utils/alertUtils';
+
+export function useAlertAutoDismiss(
+  alert: Alert,
+  onDismiss: () => void
+) {
+  useEffect(() => {
+    // BUG FIX: Check dismissible flag before auto-dismissing
+    if (!alert.dismissible) return;
+
+    const duration = alert.duration ?? DEFAULT_ALERT_DURATION;
+    if (duration <= 0) return;
+
+    const timer = setTimeout(onDismiss, duration);
+    return () => clearTimeout(timer);
+  }, [alert.duration, alert.dismissible, onDismiss]);
+}

package/src/molecules/alerts/hooks/useAlertDismissHandler.ts

@@ -0,0 +1,21 @@
+/**
+ * useAlertDismissHandler Hook
+ *
+ * Extracts common dismiss logic from all alert variants.
+ * Combines store dismissal with optional callback.
+ */
+
+import { useCallback } from 'react';
+import { useAlertStore } from '../AlertStore';
+import type { Alert } from '../AlertTypes';
+
+export function useAlertDismissHandler(alert: Alert) {
+  const dismissAlert = useAlertStore((state) => state.dismissAlert);
+
+  const handleDismiss = useCallback(() => {
+    dismissAlert(alert.id);
+    alert.onDismiss?.();
+  }, [alert.id, alert.onDismiss, dismissAlert]);
+
+  return handleDismiss;
+}

package/src/molecules/alerts/utils/alertUtils.ts

@@ -66,27 +66,6 @@ export function getAlertTextColor(tokens: DesignTokens): string {
     return tokens.colors.textInverse;
 }
 
-/**
- * Gets default icon for alert type
- *
- * @param type - Alert type
- * @returns Icon name or undefined
- */
-export function getAlertIcon(type: AlertType): string | undefined {
-    switch (type) {
-        case AlertType.SUCCESS:
-            return 'CheckCircle';
-        case AlertType.ERROR:
-            return 'AlertCircle';
-        case AlertType.WARNING:
-            return 'AlertTriangle';
-        case AlertType.INFO:
-            return 'Info';
-        default:
-            return undefined;
-    }
-}
-
 /**
  * Gets action button style
  *