@umituz/react-native-design-system 2.6.107 → 2.6.111

package/src/exception/infrastructure/services/ExceptionService.ts

@@ -0,0 +1,154 @@
+/**
+ * Exception Service - Infrastructure Layer
+ *
+ * Facade for exception handling using composition.
+ * Delegates to specialized services for specific operations.
+ *
+ * SOLID: Facade pattern - Single entry point, delegates to specialists
+ * DRY: Avoids code duplication by composing smaller services
+ * KISS: Simple interface, complex operations delegated
+ */
+
+import type {
+  ExceptionEntity,
+  ExceptionContext,
+  ExceptionSeverity,
+  ExceptionCategory,
+} from '../../domain/entities/ExceptionEntity';
+import { ExceptionHandler } from './ExceptionHandler';
+import { ExceptionReporter } from './ExceptionReporter';
+import { ExceptionLogger } from './ExceptionLogger';
+import { useExceptionStore } from '../storage/ExceptionStore';
+
+export class ExceptionService {
+  private logger: ExceptionLogger;
+  private reporter: ExceptionReporter;
+
+  constructor(reporterConfig?: ExceptionReporter['config']) {
+    this.logger = new ExceptionLogger();
+    this.reporter = new ExceptionReporter(
+      reporterConfig || {
+        enabled: false,
+        environment: 'development'
+      }
+    );
+  }
+
+  /**
+   * Handle an exception
+   */
+  async handleException(
+    error: Error,
+    severity: ExceptionSeverity = 'error',
+    category: ExceptionCategory = 'unknown',
+    context: ExceptionContext = {},
+  ): Promise<void> {
+    const exception = ExceptionHandler.createException(error, severity, category, context);
+
+    // Add to store
+    useExceptionStore.getState().addException(exception);
+
+    // Log locally
+    await this.logger.logException(exception);
+
+    // Report to external service if needed
+    if (ExceptionHandler.shouldReportException(exception)) {
+      await this.reporter.reportException(exception);
+    }
+
+    // Mark as handled
+    useExceptionStore.getState().markAsHandled(exception.id);
+  }
+
+  /**
+   * Handle network errors
+   */
+  async handleNetworkError(error: Error, context: ExceptionContext = {}): Promise<void> {
+    await this.handleException(error, 'error', 'network', context);
+  }
+
+  /**
+   * Handle validation errors
+   */
+  async handleValidationError(error: Error, context: ExceptionContext = {}): Promise<void> {
+    await this.handleException(error, 'warning', 'validation', context);
+  }
+
+  /**
+   * Handle authentication errors
+   */
+  async handleAuthError(error: Error, context: ExceptionContext = {}): Promise<void> {
+    await this.handleException(error, 'error', 'authentication', context);
+  }
+
+  /**
+   * Handle system errors
+   */
+  async handleSystemError(error: Error, context: ExceptionContext = {}): Promise<void> {
+    await this.handleException(error, 'fatal', 'system', context);
+  }
+
+  /**
+   * Get stored exceptions
+   */
+  async getStoredExceptions(): Promise<ExceptionEntity[]> {
+    return this.logger.getStoredExceptions();
+  }
+
+  /**
+   * Get exception statistics
+   */
+  async getExceptionStats() {
+    return this.logger.getExceptionStats();
+  }
+
+  /**
+   * Clear stored exceptions
+   */
+  async clearStoredExceptions(): Promise<void> {
+    await this.logger.clearStoredExceptions();
+  }
+
+  /**
+   * Update reporter configuration
+   */
+  updateReporterConfig(config: Partial<ExceptionReporter['config']>): void {
+    this.reporter.updateConfig(config);
+  }
+
+  /**
+   * Set max stored exceptions
+   */
+  setMaxStoredExceptions(limit: number): void {
+    this.logger.setMaxStoredExceptions(limit);
+  }
+
+  /**
+   * Handle storage/permission errors
+   */
+  async handleStorageError(error: Error, context: ExceptionContext = {}): Promise<void> {
+    await this.handleException(error, 'error', 'storage', context);
+  }
+
+  /**
+   * Handle fatal errors
+   */
+  async handleFatalError(error: Error, context: ExceptionContext = {}): Promise<void> {
+    await this.handleException(error, 'fatal', 'system', context);
+  }
+
+  /**
+   * Clear all exceptions
+   */
+  clearExceptions(): void {
+    useExceptionStore.getState().clearExceptions();
+  }
+}
+
+// Export default instance
+export const exceptionService = new ExceptionService();
+
+
+
+
+

package/src/exception/infrastructure/storage/ExceptionStore.ts

@@ -0,0 +1,44 @@
+/**
+ * Exception Store
+ * Zustand store for exception state management
+ */
+
+import { createStore } from '@umituz/react-native-storage';
+import type { ExceptionEntity } from '../../domain/entities/ExceptionEntity';
+
+interface ExceptionState {
+    exceptions: ExceptionEntity[];
+}
+
+interface ExceptionActions {
+    addException: (exception: ExceptionEntity) => void;
+    clearExceptions: () => void;
+    markAsHandled: (id: string) => void;
+}
+
+export const useExceptionStore = createStore<ExceptionState, ExceptionActions>({
+    name: 'exception-store',
+    initialState: {
+        exceptions: [],
+    },
+    persist: false,
+    actions: (set: (state: Partial<ExceptionState>) => void, get: () => ExceptionState) => ({
+        addException: (exception: ExceptionEntity) =>
+            set({ exceptions: [...get().exceptions, exception] }),
+        clearExceptions: () => set({ exceptions: [] }),
+        markAsHandled: (id: string) =>
+            set({
+                exceptions: get().exceptions.map((e: ExceptionEntity) =>
+                    e.id === id ? { ...e, handled: true } : e
+                ),
+            }),
+    }),
+});
+
+/**
+ * Hook to get exceptions from store
+ */
+export const useExceptions = () => {
+    const exceptions = useExceptionStore((state: ExceptionState) => state.exceptions);
+    return exceptions;
+};

package/src/exception/presentation/components/ErrorBoundary.tsx

@@ -0,0 +1,129 @@
+/**
+ * Error Boundary Component
+ * Catches React errors and provides fallback UI
+ */
+
+import React, { Component, ReactNode } from 'react';
+import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
+import { exceptionService } from '../../infrastructure/services/ExceptionService';
+import { useAppDesignTokens } from '../../../theme';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+  onError?: (error: Error, errorInfo: React.ErrorInfo) => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: null,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
+    // Log error to exception service
+    exceptionService.handleFatalError(error, {
+      componentStack: errorInfo.componentStack ?? undefined,
+      screen: 'ErrorBoundary',
+    });
+
+    // Call external onError if provided
+    if (this.props.onError) {
+      this.props.onError(error, errorInfo);
+    }
+  }
+
+  handleReset = (): void => {
+    this.setState({
+      hasError: false,
+      error: null,
+    });
+  };
+
+  render(): ReactNode {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      return (
+        <ErrorDisplay error={this.state.error} onReset={this.handleReset} />
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+interface ErrorDisplayProps {
+  error: Error | null;
+  onReset: () => void;
+}
+
+const ErrorDisplay: React.FC<ErrorDisplayProps> = ({ error, onReset }) => {
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
+
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Something went wrong</Text>
+      <Text style={styles.message}>
+        {error?.message || 'An unexpected error occurred'}
+      </Text>
+      <TouchableOpacity style={styles.button} onPress={onReset}>
+        <Text style={styles.buttonText}>Try Again</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    button: {
+      backgroundColor: tokens.colors.primary,
+      borderRadius: tokens.borders.radius.sm,
+      paddingHorizontal: tokens.spacing.lg,
+      paddingVertical: tokens.spacing.sm,
+    },
+    buttonText: {
+      color: tokens.colors.textInverse,
+      fontSize: tokens.typography.bodyLarge.fontSize,
+      fontWeight: tokens.typography.labelLarge.fontWeight,
+    },
+    container: {
+      alignItems: 'center',
+      backgroundColor: tokens.colors.backgroundPrimary,
+      flex: 1,
+      justifyContent: 'center',
+      padding: tokens.spacing.lg,
+    },
+    message: {
+      color: tokens.colors.textSecondary,
+      fontSize: tokens.typography.bodyLarge.fontSize,
+      marginBottom: tokens.spacing.lg,
+      textAlign: 'center',
+    },
+    title: {
+      color: tokens.colors.textPrimary,
+      fontSize: tokens.typography.headlineSmall.fontSize,
+      fontWeight: tokens.typography.headlineSmall.fontWeight,
+      marginBottom: tokens.spacing.sm,
+    },
+  });
+
+

package/src/exception/presentation/components/ExceptionEmptyState.tsx

@@ -0,0 +1,123 @@
+/**
+ * Empty State Component
+ * Displays when no data is available
+ *
+ * Presentation Layer - UI Component
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { AtomicIcon, AtomicText } from "../../../atoms";
+import { useAppDesignTokens } from "../../../theme";
+
+export interface ExceptionEmptyStateProps {
+  icon?: string;
+  title: string;
+  description?: string;
+  actionLabel?: string;
+  onAction?: () => void;
+  illustration?: React.ReactNode;
+}
+
+export const ExceptionEmptyState: React.FC<ExceptionEmptyStateProps> = ({
+  icon = "inbox",
+  title,
+  description,
+  actionLabel,
+  onAction,
+  illustration,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = React.useMemo(
+    () =>
+      StyleSheet.create({
+        actionButton: {
+          borderRadius: tokens.borders.radius.md,
+          marginTop: tokens.spacing.sm,
+          paddingHorizontal: tokens.spacing.lg,
+          paddingVertical: tokens.spacing.md,
+        },
+        actionButtonText: {
+          // AtomicText handles typography
+        },
+        container: {
+          alignItems: "center",
+          flex: 1,
+          justifyContent: "center",
+          padding: tokens.spacing.xl,
+        },
+        description: {
+          marginBottom: tokens.spacing.lg,
+          maxWidth: 280,
+        },
+        iconContainer: {
+          alignItems: "center",
+          borderRadius: 60,
+          height: 120,
+          justifyContent: "center",
+          marginBottom: tokens.spacing.lg,
+          width: 120,
+        },
+        title: {
+          marginBottom: tokens.spacing.sm,
+        },
+      }),
+    [tokens],
+  );
+
+  return (
+    <View style={styles.container}>
+      {illustration ? (
+        illustration
+      ) : (
+        <View
+          style={[
+            styles.iconContainer,
+            { backgroundColor: tokens.colors.surface },
+          ]}
+        >
+          <AtomicIcon name={icon} size="xxl" color="secondary" />
+        </View>
+      )}
+
+      <AtomicText
+        type="headlineSmall"
+        color="primary"
+        style={[styles.title, { textAlign: "center" }]}
+      >
+        {title}
+      </AtomicText>
+
+      {description && (
+        <AtomicText
+          type="bodyMedium"
+          color="secondary"
+          style={[styles.description, { textAlign: "center" }]}
+        >
+          {description}
+        </AtomicText>
+      )}
+
+      {actionLabel && onAction && (
+        <TouchableOpacity
+          style={[
+            styles.actionButton,
+            { backgroundColor: tokens.colors.primary },
+          ]}
+          onPress={onAction}
+          activeOpacity={0.8}
+        >
+          <AtomicText
+            type="labelLarge"
+            color="onPrimary"
+            style={styles.actionButtonText}
+          >
+            {actionLabel}
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+

package/src/exception/presentation/components/ExceptionErrorState.tsx

@@ -0,0 +1,118 @@
+/**
+ * Error State Component
+ * Generic error display with retry action
+ *
+ * Presentation Layer - UI Component
+ */
+
+import React from "react";
+import { View, StyleSheet, TouchableOpacity } from "react-native";
+import {
+  AtomicIcon,
+  AtomicText,
+} from "../../../atoms";
+import {
+  useAppDesignTokens,
+} from "../../../theme";
+
+export interface ExceptionErrorStateProps {
+  /** Icon name from Ionicons */
+  icon?: string;
+  /** Error title */
+  title: string;
+  /** Error description */
+  description?: string;
+  /** Retry button label */
+  actionLabel?: string;
+  /** Retry action callback */
+  onAction?: () => void;
+  /** Custom illustration instead of icon */
+  illustration?: React.ReactNode;
+}
+
+export const ExceptionErrorState: React.FC<ExceptionErrorStateProps> = ({
+  icon = "alert-circle-outline",
+  title,
+  description,
+  actionLabel,
+  onAction,
+  illustration,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = React.useMemo(
+    () =>
+      StyleSheet.create({
+        actionButton: {
+          alignItems: "center",
+          borderRadius: tokens.borders.radius.full,
+          flexDirection: "row",
+          gap: tokens.spacing.sm,
+          marginTop: tokens.spacing.sm,
+          paddingHorizontal: tokens.spacing.lg,
+          paddingVertical: tokens.spacing.md,
+        },
+        container: {
+          alignItems: "center",
+          flex: 1,
+          justifyContent: "center",
+          padding: tokens.spacing.xl,
+        },
+        description: {
+          marginBottom: tokens.spacing.lg,
+          maxWidth: 280,
+          textAlign: "center",
+        },
+        iconContainer: {
+          alignItems: "center",
+          borderRadius: 60,
+          height: 120,
+          justifyContent: "center",
+          marginBottom: tokens.spacing.lg,
+          width: 120,
+        },
+        title: {
+          marginBottom: tokens.spacing.sm,
+          textAlign: "center",
+        },
+      }),
+    [tokens],
+  );
+
+  return (
+    <View style={styles.container}>
+      {illustration ? (
+        illustration
+      ) : (
+        <View
+          style={[styles.iconContainer, { backgroundColor: tokens.colors.surface }]}
+        >
+          <AtomicIcon name={icon as never} size="xxl" color="secondary" />
+        </View>
+      )}
+
+      <AtomicText type="headlineSmall" color="primary" style={styles.title}>
+        {title}
+      </AtomicText>
+
+      {description && (
+        <AtomicText type="bodyMedium" color="secondary" style={styles.description}>
+          {description}
+        </AtomicText>
+      )}
+
+      {actionLabel && onAction && (
+        <TouchableOpacity
+          style={[styles.actionButton, { backgroundColor: tokens.colors.primary }]}
+          onPress={onAction}
+          activeOpacity={0.8}
+        >
+          <AtomicIcon name="refresh-outline" size="sm" color="onPrimary" />
+          <AtomicText type="labelLarge" color="onPrimary">
+            {actionLabel}
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};

package/src/exports/exception.ts

@@ -0,0 +1,7 @@
+/**
+ * Exception Exports
+ *
+ * Exception handling and error tracking for React Native apps
+ */
+
+export * from '../exception';

package/src/exports/infinite-scroll.ts

@@ -0,0 +1,7 @@
+/**
+ * Infinite Scroll Exports
+ *
+ * Modern infinite scroll system for React Native
+ */
+
+export * from '../infinite-scroll';

package/src/exports/uuid.ts

@@ -0,0 +1,7 @@
+/**
+ * UUID Exports
+ *
+ * UUID generation utilities for React Native
+ */
+
+export * from '../uuid';

package/src/index.ts

@@ -57,6 +57,21 @@ export * from './exports/organisms';
 // =============================================================================
 export * from './exports/safe-area';
 
+// =============================================================================
+// EXCEPTION EXPORTS
+// =============================================================================
+export * from './exports/exception';
+
+// =============================================================================
+// INFINITE SCROLL EXPORTS
+// =============================================================================
+export * from './exports/infinite-scroll';
+
+// =============================================================================
+// UUID EXPORTS
+// =============================================================================
+export * from './exports/uuid';
+
 // =============================================================================
 // VARIANT UTILITIES
 // =============================================================================

package/src/infinite-scroll/domain/interfaces/infinite-scroll-list-props.ts

@@ -0,0 +1,67 @@
+/**
+ * Infinite Scroll List Props Interface
+ *
+ * Domain interface for component props
+ * Follows SOLID, DRY, KISS principles
+ */
+
+import type React from "react";
+import type { InfiniteScrollConfig } from "../types/infinite-scroll-config";
+
+export interface InfiniteScrollListProps<T> {
+  /**
+   * Configuration for infinite scroll
+   */
+  config: InfiniteScrollConfig<T>;
+
+  /**
+   * Render function for each item
+   */
+  renderItem: (item: T, index: number) => React.ReactElement;
+
+  /**
+   * Optional: Custom loading component
+   */
+  loadingComponent?: React.ReactElement;
+
+  /**
+   * Optional: Custom loading more component
+   */
+  loadingMoreComponent?: React.ReactElement;
+
+  /**
+   * Optional: Custom empty component
+   */
+  emptyComponent?: React.ReactElement;
+
+  /**
+   * Optional: Custom error component
+   */
+  errorComponent?: (error: string, retry: () => void) => React.ReactElement;
+
+  /**
+   * Optional: List header component
+   */
+  ListHeaderComponent?: React.ReactElement;
+
+  /**
+   * Optional: List footer component
+   */
+  ListFooterComponent?: React.ReactElement;
+
+  /**
+   * Optional: Additional FlatList props
+   */
+  flatListProps?: Omit<
+    React.ComponentProps<typeof import("react-native").FlatList<T>>,
+    | "data"
+    | "renderItem"
+    | "keyExtractor"
+    | "onEndReached"
+    | "onEndReachedThreshold"
+    | "onRefresh"
+    | "refreshing"
+    | "ListHeaderComponent"
+    | "ListFooterComponent"
+  >;
+}