@umituz/react-native-exception 1.0.2 → 1.2.0

package/LICENSE

@@ -29,3 +29,8 @@ SOFTWARE.
 
 
 
+
+
+
+
+

package/README.md

@@ -6,6 +6,7 @@ Exception handling and error tracking for React Native apps.
 
 - Centralized exception handling
 - Error boundary component
+- Empty state component for no data scenarios
 - Exception store with Zustand
 - Error categorization and severity levels
 - Exception reporting utilities
@@ -21,6 +22,8 @@ npm install @umituz/react-native-exception
 - `react` >= 18.2.0
 - `react-native` >= 0.74.0
 - `zustand` >= 5.0.2
+- `@umituz/react-native-design-system-theme` >= 1.0.0
+- `@umituz/react-native-design-system` >= 1.0.0
 
 ## Usage
 
@@ -59,6 +62,20 @@ import { useExceptionStore } from '@umituz/react-native-exception';
 const { exceptions, lastError } = useExceptionStore();
 ```
 
+### Empty State
+
+```typescript
+import { EmptyState } from '@umituz/react-native-exception';
+
+<EmptyState
+  icon="inbox"
+  title="No items found"
+  description="Start by adding your first item"
+  actionLabel="Add Item"
+  onAction={() => navigation.navigate('Add')}
+/>
+```
+
 ## License
 
 MIT
@@ -72,3 +89,6 @@ MIT
 
 
 
+
+
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-exception",
-  "version": "1.0.2",
+  "version": "1.2.0",
   "description": "Exception handling and error tracking for React Native apps",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -32,10 +32,13 @@
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "zustand": "^5.0.2",
-    "@umituz/react-native-theme": "*"
+    "uuid": "^9.0.0",
+    "react-native-get-random-values": "^1.11.0",
+    "@umituz/react-native-design-system-theme": "*",
+    "@umituz/react-native-design-system": "*"
   },
   "peerDependenciesMeta": {
-    "@umituz/react-native-theme": {
+    "@umituz/react-native-design-system-theme": {
       "optional": false
     }
   },
@@ -46,7 +49,8 @@
     "react": "^18.2.0",
     "react-native": "^0.74.0",
     "zustand": "^5.0.2",
-    "@umituz/react-native-theme": "latest"
+    "@umituz/react-native-design-system-theme": "latest",
+    "@umituz/react-native-design-system": "latest"
   },
   "publishConfig": {
     "access": "public"

package/src/domain/entities/ExceptionEntity.ts

@@ -3,6 +3,9 @@
  * Pure business logic representation of errors and exceptions
  */
 
+import 'react-native-get-random-values';
+import { v4 as uuidv4 } from 'uuid';
+
 export type ExceptionSeverity = 'fatal' | 'error' | 'warning' | 'info';
 export type ExceptionCategory = 'network' | 'validation' | 'authentication' | 'authorization' | 'business-logic' | 'system' | 'storage' | 'unknown';
 
@@ -48,7 +51,7 @@ export function createException(
   context: ExceptionContext = {}
 ): ExceptionEntity {
   return {
-    id: crypto.randomUUID(),
+    id: uuidv4(),
     message: error.message,
     stack: error.stack,
     severity,
@@ -67,7 +70,7 @@ export function createErrorLog(
   exception: ExceptionEntity
 ): ErrorLog {
   return {
-    id: crypto.randomUUID(),
+    id: uuidv4(),
     exceptionId: exception.id,
     userId: exception.context.userId,
     message: exception.message,
@@ -106,3 +109,8 @@ export function shouldReportException(exception: ExceptionEntity): boolean {
 
 
 
+
+
+
+
+

package/src/domain/repositories/IExceptionRepository.ts

@@ -53,3 +53,8 @@ export interface IExceptionRepository {
 
 
 
+
+
+
+
+

package/src/index.ts

@@ -48,6 +48,11 @@ export { ExceptionService, exceptionService } from './infrastructure/services/Ex
 
 // Components
 export { ErrorBoundary } from './presentation/components/ErrorBoundary';
+export { EmptyState } from './presentation/components/EmptyState';
+export type { EmptyStateProps } from './presentation/components/EmptyState';
+
+
+
 
 
 

package/src/infrastructure/services/ExceptionService.ts

@@ -109,3 +109,8 @@ export const exceptionService = ExceptionService.getInstance();
 
 
 
+
+
+
+
+

package/src/infrastructure/storage/ExceptionStore.ts

@@ -102,3 +102,8 @@ export const useExceptions = () => {
 
 
 
+
+
+
+
+

package/src/presentation/components/EmptyState.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 {
+  useAppDesignTokens,
+  AtomicIcon,
+  AtomicText,
+  STATIC_TOKENS,
+} from "@umituz/react-native-design-system";
+
+export interface EmptyStateProps {
+  icon?: string;
+  title: string;
+  description?: string;
+  actionLabel?: string;
+  onAction?: () => void;
+  illustration?: React.ReactNode;
+}
+
+export const EmptyState: React.FC<EmptyStateProps> = ({
+  icon = "inbox",
+  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, { 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>
+  );
+};
+
+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,
+  },
+  description: {
+    marginBottom: STATIC_TOKENS.spacing.lg,
+    maxWidth: 280,
+  },
+  actionButton: {
+    paddingHorizontal: STATIC_TOKENS.spacing.lg,
+    paddingVertical: STATIC_TOKENS.spacing.md,
+    borderRadius: STATIC_TOKENS.borders.radius.md,
+    marginTop: STATIC_TOKENS.spacing.sm,
+  },
+  actionButtonText: {
+    // AtomicText handles typography
+  },
+});
+

package/src/presentation/components/ErrorBoundary.tsx

@@ -6,7 +6,7 @@
 import React, { Component, ReactNode } from 'react';
 import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
 import { exceptionService } from '../../infrastructure/services/ExceptionService';
-import { useAppDesignTokens } from '@umituz/react-native-theme';
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
 
 interface Props {
   children: ReactNode;