@umituz/react-native-design-system 4.23.66 → 4.23.68

package/src/molecules/alerts/AlertToast.tsx

@@ -6,209 +6,180 @@
  */
 
 import React, { useEffect } from 'react';
-import { StyleSheet, View, Pressable, StyleProp, ViewStyle } from 'react-native';
+import { StyleSheet, View, Pressable } from 'react-native';
 import { AtomicText, AtomicIcon, useIconName } from '../../atoms';
 import { useAppDesignTokens } from '../../theme';
-import { Alert, AlertType } from './AlertTypes';
+import { Alert } from './AlertTypes';
 import { useAlertStore } from './AlertStore';
-
-const DEFAULT_DURATION = 3000;
+import {
+  getAlertBackgroundColor,
+  getActionButtonStyle,
+  getActionTextColor,
+  DEFAULT_TOAST_DURATION,
+} from './utils/alertToastHelpers';
 
 interface AlertToastProps {
-    alert: Alert;
+  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 = () => {
-        dismissAlert(alert.id);
-        alert.onDismiss?.();
-    };
-
-    const handleDismiss = () => {
-        if (alert.dismissible) {
-            dismiss();
-        }
-    };
-
-    // Auto-dismiss after duration
-    useEffect(() => {
-        const duration = alert.duration ?? DEFAULT_DURATION;
-        if (duration <= 0) return;
-
-        const timer = setTimeout(dismiss, duration);
-        return () => clearTimeout(timer);
-    }, [alert.id, alert.duration]);
-
-    const getBackgroundColor = (type: AlertType): string => {
-        const colors = {
-            [AlertType.SUCCESS]: tokens.colors.success,
-            [AlertType.ERROR]: tokens.colors.error,
-            [AlertType.WARNING]: tokens.colors.warning,
-            [AlertType.INFO]: tokens.colors.info,
-        };
-        return colors[type] || tokens.colors.backgroundSecondary;
-    };
-
-    const getActionButtonStyle = (style?: 'primary' | 'secondary' | 'destructive'): StyleProp<ViewStyle> => {
-        if (style === 'secondary') {
-            return {
-                backgroundColor: undefined,
-                borderWidth: 1,
-                borderColor: tokens.colors.textInverse,
-            };
-        }
-        const colors = {
-            primary: tokens.colors.backgroundPrimary,
-            destructive: tokens.colors.error,
-        };
-        return { backgroundColor: colors[style as keyof typeof colors] || tokens.colors.backgroundSecondary };
-    };
-
-    const getActionTextColor = (style?: 'primary' | 'secondary' | 'destructive'): string => {
-        return style === 'primary' ? tokens.colors.textPrimary : tokens.colors.textInverse;
-    };
-
-    const backgroundColor = getBackgroundColor(alert.type);
-    const textColor = tokens.colors.textInverse;
-
-    return (
-        <View
-            style={[
-                styles.container,
-                {
-                    backgroundColor,
-                    padding: tokens.spacing.md,
-                    borderRadius: tokens.borders.radius.md,
-                },
-            ]}
-            testID={alert.testID}
-        >
-            <Pressable onPress={handleDismiss} style={styles.content}>
-                <View style={styles.row}>
-                    {alert.icon && (
-                        <AtomicIcon
-                            name={alert.icon}
-                            customSize={20}
-                            customColor={textColor}
-                            style={{ 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>
-
-                    {alert.dismissible && (
-                        <Pressable
-                            onPress={handleDismiss}
-                            style={[styles.closeButton, { marginLeft: tokens.spacing.sm }]}
-                            hitSlop={8}
-                        >
-                            <AtomicIcon name={closeIcon} customSize={20} customColor={textColor} />
-                        </Pressable>
-                    )}
-                </View>
-
-                {alert.actions && alert.actions.length > 0 && (
-                    <View style={[styles.actionsContainer, { marginTop: tokens.spacing.sm }]}>
-                        {alert.actions.map((action) => (
-                            <Pressable
-                                key={action.id}
-                                onPress={async () => {
-                                    await action.onPress();
-                                    if (action.closeOnPress ?? true) {
-                                        dismiss();
-                                    }
-                                }}
-                                style={[
-                                    styles.actionButton,
-                                    {
-                                        paddingVertical: tokens.spacing.xs,
-                                        paddingHorizontal: tokens.spacing.sm,
-                                        marginRight: tokens.spacing.xs,
-                                        borderRadius: tokens.borders.radius.sm,
-                                    },
-                                    getActionButtonStyle(action.style),
-                                ]}
-                            >
-                                <AtomicText
-                                    type="bodySmall"
-                                    style={[
-                                        styles.actionText,
-                                        { color: getActionTextColor(action.style) },
-                                    ]}
-                                >
-                                    {action.label}
-                                </AtomicText>
-                            </Pressable>
-                        ))}
-                    </View>
-                )}
+  const dismissAlert = useAlertStore((state: { dismissAlert: (id: string) => void }) => state.dismissAlert);
+  const tokens = useAppDesignTokens();
+  const closeIcon = useIconName('close');
+
+  const dismiss = () => {
+    dismissAlert(alert.id);
+    alert.onDismiss?.();
+  };
+
+  const handleDismiss = () => {
+    if (alert.dismissible) {
+      dismiss();
+    }
+  };
+
+  // Auto-dismiss after duration
+  useEffect(() => {
+    const duration = alert.duration ?? DEFAULT_TOAST_DURATION;
+    if (duration <= 0) return;
+
+    const timer = setTimeout(dismiss, duration);
+    return () => clearTimeout(timer);
+  }, [alert.id, alert.duration]);
+
+  const backgroundColor = getAlertBackgroundColor(alert.type, tokens);
+  const textColor = tokens.colors.textInverse;
+
+  return (
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor,
+          padding: tokens.spacing.md,
+          borderRadius: tokens.borders.radius.md,
+        },
+      ]}
+      testID={alert.testID}
+    >
+      <Pressable onPress={handleDismiss} style={styles.content}>
+        <View style={styles.row}>
+          {alert.icon && (
+            <AtomicIcon
+              name={alert.icon}
+              customSize={20}
+              customColor={textColor}
+              style={{ 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>
+
+          {alert.dismissible && (
+            <Pressable
+              onPress={handleDismiss}
+              style={[styles.closeButton, { marginLeft: tokens.spacing.sm }]}
+              hitSlop={8}
+            >
+              <AtomicIcon name={closeIcon} customSize={20} customColor={textColor} />
             </Pressable>
+          )}
         </View>
-    );
+
+        {alert.actions && alert.actions.length > 0 && (
+          <View style={[styles.actionsContainer, { marginTop: tokens.spacing.sm }]}>
+            {alert.actions.map((action) => (
+              <Pressable
+                key={action.id}
+                onPress={async () => {
+                  await action.onPress();
+                  if (action.closeOnPress ?? true) {
+                    dismiss();
+                  }
+                }}
+                style={[
+                  styles.actionButton,
+                  {
+                    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: getActionTextColor(action.style, tokens) },
+                  ]}
+                >
+                  {action.label}
+                </AtomicText>
+              </Pressable>
+            ))}
+          </View>
+        )}
+      </Pressable>
+    </View>
+  );
 }
 
 const styles = StyleSheet.create({
-    container: {
-        width: '100%',
-    },
-    content: {
-        flex: 1,
-    },
-    row: {
-        flexDirection: 'row',
-        alignItems: 'center',
-    },
-    iconContainer: {
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    textContainer: {
-        flex: 1,
-    },
-    title: {
-        fontWeight: '700',
-    },
-    message: {
-        opacity: 0.9,
-    },
-    closeButton: {
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    actionsContainer: {
-        flexDirection: 'row',
-        flexWrap: 'wrap',
-    },
-    actionButton: {
-        justifyContent: 'center',
-        alignItems: 'center',
-    },
-    actionText: {
-        fontWeight: '700',
-    },
+  container: {
+    width: '100%',
+  },
+  content: {
+    flex: 1,
+  },
+  row: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  textContainer: {
+    flex: 1,
+  },
+  title: {
+    fontWeight: '700',
+  },
+  message: {
+    opacity: 0.9,
+  },
+  closeButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  actionsContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+  },
+  actionButton: {
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  actionText: {
+    fontWeight: '700',
+  },
 });

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

@@ -0,0 +1,70 @@
+/**
+ * Alert Toast Helper Functions
+ * Style and color helpers for alert toast component
+ */
+
+import { AlertType } from '../AlertTypes';
+import type { DesignTokens } from '../../../theme';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+/**
+ * Gets background color for alert type
+ *
+ * @param type - Alert type
+ * @param tokens - Design tokens
+ * @returns Background color string
+ */
+export function getAlertBackgroundColor(type: AlertType, tokens: DesignTokens): string {
+  const colors = {
+    [AlertType.SUCCESS]: tokens.colors.success,
+    [AlertType.ERROR]: tokens.colors.error,
+    [AlertType.WARNING]: tokens.colors.warning,
+    [AlertType.INFO]: tokens.colors.info,
+  };
+  return colors[type] || tokens.colors.backgroundSecondary;
+}
+
+/**
+ * Gets action button style
+ *
+ * @param style - Button style type
+ * @param tokens - Design tokens
+ * @returns Style object
+ */
+export function getActionButtonStyle(
+  style: 'primary' | 'secondary' | 'destructive' | undefined,
+  tokens: DesignTokens
+): StyleProp<ViewStyle> {
+  if (style === 'secondary') {
+    return {
+      backgroundColor: undefined,
+      borderWidth: 1,
+      borderColor: tokens.colors.textInverse,
+    };
+  }
+
+  const colors = {
+    primary: tokens.colors.backgroundPrimary,
+    destructive: tokens.colors.error,
+  };
+  return { backgroundColor: colors[style as keyof typeof colors] || tokens.colors.backgroundSecondary };
+}
+
+/**
+ * Gets action text color
+ *
+ * @param style - Button style type
+ * @param tokens - Design tokens
+ * @returns Text color string
+ */
+export function getActionTextColor(
+  style: 'primary' | 'secondary' | 'destructive' | undefined,
+  tokens: DesignTokens
+): string {
+  return style === 'primary' ? tokens.colors.textPrimary : tokens.colors.textInverse;
+}
+
+/**
+ * Default toast duration in milliseconds
+ */
+export const DEFAULT_TOAST_DURATION = 3000;

package/src/services/api/ApiClient.ts

@@ -0,0 +1,242 @@
+/**
+ * API Client
+ * Centralized HTTP client for API communication
+ */
+
+import type {
+  ApiClientConfig,
+  ApiRequestConfig,
+  ApiResponse,
+} from './types/ApiTypes';
+import {
+  buildURL,
+  buildRequestConfig,
+} from './utils/requestBuilder';
+import {
+  parseResponse,
+  handleHttpError,
+  handleNetworkError,
+  isSuccessfulResponse,
+  fetchWithTimeout,
+} from './utils/responseHandler';
+
+export class ApiClient {
+  private config: ApiClientConfig;
+
+  constructor(config: ApiClientConfig) {
+    this.config = {
+      timeout: 30000,
+      ...config,
+    };
+  }
+
+  /**
+   * Makes an HTTP request
+   *
+   * @param requestConfig - Request configuration
+   * @returns API response
+   */
+  async request<T>(requestConfig: ApiRequestConfig): Promise<ApiResponse<T>> {
+    try {
+      // Apply request interceptors
+      let config = requestConfig;
+      for (const interceptor of this.config.requestInterceptors || []) {
+        config = await interceptor(config);
+      }
+
+      // Build request
+      const fullURL = config.url.startsWith('http')
+        ? config.url
+        : buildURL(this.config.baseURL, config.url, config.params);
+
+      const fetchOptions = buildRequestConfig({
+        ...config,
+        headers: { ...this.config.headers, ...config.headers },
+      });
+
+      // Make request with timeout
+      const response = await fetchWithTimeout(
+        fullURL,
+        fetchOptions,
+        config.timeout || this.config.timeout || 30000
+      );
+
+      // Check for HTTP errors
+      if (!isSuccessfulResponse(response)) {
+        const error = await handleHttpError(response);
+
+        // Apply error interceptors
+        let finalError = error;
+        for (const interceptor of this.config.errorInterceptors || []) {
+          finalError = await interceptor(finalError);
+        }
+
+        throw finalError;
+      }
+
+      // Parse response
+      let parsedResponse = await parseResponse<T>(response);
+
+      // Apply response interceptors
+      for (const interceptor of this.config.responseInterceptors || []) {
+        parsedResponse = await interceptor(parsedResponse);
+      }
+
+      return parsedResponse;
+    } catch (error) {
+      // Handle network errors
+      const apiError = handleNetworkError(error);
+
+      // Apply error interceptors
+      let finalError = apiError;
+      for (const interceptor of this.config.errorInterceptors || []) {
+        finalError = await interceptor(finalError);
+      }
+
+      throw finalError;
+    }
+  }
+
+  /**
+   * Makes a GET request
+   *
+   * @param url - Request URL
+   * @param params - Query parameters
+   * @param config - Additional config
+   * @returns API response
+   */
+  async get<T>(
+    url: string,
+    params?: Record<string, string | number | boolean | undefined>,
+    config?: Partial<ApiRequestConfig>
+  ): Promise<ApiResponse<T>> {
+    return this.request<T>({
+      url,
+      method: 'GET',
+      params,
+      ...config,
+    });
+  }
+
+  /**
+   * Makes a POST request
+   *
+   * @param url - Request URL
+   * @param body - Request body
+   * @param config - Additional config
+   * @returns API response
+   */
+  async post<T>(
+    url: string,
+    body?: any,
+    config?: Partial<ApiRequestConfig>
+  ): Promise<ApiResponse<T>> {
+    return this.request<T>({
+      url,
+      method: 'POST',
+      body,
+      ...config,
+    });
+  }
+
+  /**
+   * Makes a PUT request
+   *
+   * @param url - Request URL
+   * @param body - Request body
+   * @param config - Additional config
+   * @returns API response
+   */
+  async put<T>(
+    url: string,
+    body?: any,
+    config?: Partial<ApiRequestConfig>
+  ): Promise<ApiResponse<T>> {
+    return this.request<T>({
+      url,
+      method: 'PUT',
+      body,
+      ...config,
+    });
+  }
+
+  /**
+   * Makes a PATCH request
+   *
+   * @param url - Request URL
+   * @param body - Request body
+   * @param config - Additional config
+   * @returns API response
+   */
+  async patch<T>(
+    url: string,
+    body?: any,
+    config?: Partial<ApiRequestConfig>
+  ): Promise<ApiResponse<T>> {
+    return this.request<T>({
+      url,
+      method: 'PATCH',
+      body,
+      ...config,
+    });
+  }
+
+  /**
+   * Makes a DELETE request
+   *
+   * @param url - Request URL
+   * @param config - Additional config
+   * @returns API response
+   */
+  async delete<T>(
+    url: string,
+    config?: Partial<ApiRequestConfig>
+  ): Promise<ApiResponse<T>> {
+    return this.request<T>({
+      url,
+      method: 'DELETE',
+      ...config,
+    });
+  }
+
+  /**
+   * Updates base configuration
+   *
+   * @param updates - Configuration updates
+   */
+  updateConfig(updates: Partial<ApiClientConfig>): void {
+    this.config = { ...this.config, ...updates };
+  }
+
+  /**
+   * Gets current configuration
+   *
+   * @returns Current configuration
+   */
+  getConfig(): ApiClientConfig {
+    return { ...this.config };
+  }
+}
+
+/**
+ * Creates a singleton API client instance
+ *
+ * @param config - API client configuration
+ * @returns API client instance
+ */
+let apiClientInstance: ApiClient | null = null;
+
+export function createApiClient(config: ApiClientConfig): ApiClient {
+  if (!apiClientInstance) {
+    apiClientInstance = new ApiClient(config);
+  }
+  return apiClientInstance;
+}
+
+export function getApiClient(): ApiClient | null {
+  return apiClientInstance;
+}
+
+export function resetApiClient(): void {
+  apiClientInstance = null;
+}

package/src/services/api/index.ts

@@ -0,0 +1,9 @@
+/**
+ * API Service Index
+ * Centralized export of API service components
+ */
+
+export * from './ApiClient';
+export * from './types/ApiTypes';
+export * from './utils/requestBuilder';
+export * from './utils/responseHandler';