@umituz/react-native-exception 1.2.2 → 1.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-exception",
-  "version": "1.2.2",
+  "version": "1.2.3",
   "description": "Exception handling and error tracking for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/index.ts

@@ -54,6 +54,8 @@ export { ExceptionLogger } from './infrastructure/services/ExceptionLogger';
 export { ErrorBoundary } from './presentation/components/ErrorBoundary';
 export { EmptyState } from './presentation/components/EmptyState';
 export type { EmptyStateProps } from './presentation/components/EmptyState';
+export { ErrorState } from './presentation/components/ErrorState';
+export type { ErrorStateProps } from './presentation/components/ErrorState';
 
 
 

package/src/infrastructure/services/ExceptionReporter.ts

@@ -122,3 +122,13 @@ export class ExceptionReporter {
     this.config = { ...this.config, ...config };
   }
 }
+
+
+
+
+
+
+
+
+
+

package/src/presentation/components/ErrorState.tsx

@@ -0,0 +1,113 @@
+/**
+ * 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,
+  useAppDesignTokens,
+  STATIC_TOKENS,
+} from "@umituz/react-native-design-system";
+
+export interface ErrorStateProps {
+  /** Icon name from lucide-react-native */
+  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 ErrorState: React.FC<ErrorStateProps> = ({
+  icon = "AlertCircle",
+  title,
+  description,
+  actionLabel,
+  onAction,
+  illustration,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  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}>
+        {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="RefreshCw" size="sm" color="onPrimary" />
+          <AtomicText type="labelLarge" color="onPrimary">
+            {actionLabel}
+          </AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: "center",
+    justifyContent: "center",
+    padding: STATIC_TOKENS.spacing.xl,
+  },
+  iconContainer: {
+    width: 120,
+    height: 120,
+    borderRadius: 60,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: STATIC_TOKENS.spacing.lg,
+  },
+  title: {
+    marginBottom: STATIC_TOKENS.spacing.sm,
+    textAlign: "center",
+  },
+  description: {
+    marginBottom: STATIC_TOKENS.spacing.lg,
+    maxWidth: 280,
+    textAlign: "center",
+  },
+  actionButton: {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingHorizontal: STATIC_TOKENS.spacing.lg,
+    paddingVertical: STATIC_TOKENS.spacing.md,
+    borderRadius: STATIC_TOKENS.borders.radius.full,
+    marginTop: STATIC_TOKENS.spacing.sm,
+    gap: STATIC_TOKENS.spacing.sm,
+  },
+});