@umituz/react-native-settings 4.23.71 → 4.23.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.23.71",
+  "version": "4.23.72",
   "description": "Complete settings hub for React Native apps - consolidated package with settings, localization, about, legal, appearance, feedback, FAQs, rating, and gamification",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/index.ts

@@ -91,7 +91,6 @@ export type { SettingsSectionProps } from './presentation/components/SettingsSec
 export { SettingsFooter } from './presentation/components/SettingsFooter';
 export type { SettingsFooterProps } from './presentation/components/SettingsFooter';
 
-export { SettingsErrorBoundary } from './presentation/components/SettingsErrorBoundary';
 
 
 // =============================================================================

package/src/presentation/screens/SettingsScreen.tsx

@@ -7,10 +7,10 @@ import React from "react";
 import {
   ScreenLayout,
   useAppNavigation,
+  ErrorBoundary,
 } from "@umituz/react-native-design-system";
 import { SettingsHeader } from "./components/SettingsHeader";
 import { SettingsContent } from "./components/SettingsContent";
-import { SettingsErrorBoundary } from "../components/SettingsErrorBoundary";
 import { normalizeSettingsConfig } from "./utils/normalizeConfig";
 import { useFeatureDetection } from "./hooks/useFeatureDetection";
 import type { SettingsConfig, CustomSettingsSection } from "./types";
@@ -95,7 +95,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
   // Workaround: Use conditional rendering with type assertion
   if (showHeader) {
     return <ScreenLayout header={<SettingsHeader showCloseButton={showCloseButton} onClose={onClose} />}>
-      <SettingsErrorBoundary>
+      <ErrorBoundary>
         {children ?? (
           <SettingsContent
             normalizedConfig={normalizedConfig}
@@ -110,12 +110,12 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
             gamificationConfig={gamificationConfig}
           />
         )}
-      </SettingsErrorBoundary>
+      </ErrorBoundary>
     </ScreenLayout>;
   }
 
   return <ScreenLayout>
-    <SettingsErrorBoundary>
+    <ErrorBoundary>
       {children ?? (
         <SettingsContent
           normalizedConfig={normalizedConfig}
@@ -130,6 +130,6 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
           gamificationConfig={gamificationConfig}
         />
       )}
-    </SettingsErrorBoundary>
+    </ErrorBoundary>
   </ScreenLayout>;
 };

package/src/presentation/components/SettingsErrorBoundary/README.md

@@ -1,67 +0,0 @@
-# Settings Error Boundary
-
-## Purpose
-
-Error boundary component for catching and handling errors in settings screens and components, providing fallback UI and error recovery options.
-
-## File Paths
-
-- **Component**: `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/presentation/components/SettingsErrorBoundary/SettingsErrorBoundary.tsx`
-
-## Strategy
-
-1. **Error Containment**: Catches JavaScript errors in the component tree below it, preventing app crashes
-2. **User-Friendly Fallback**: Displays clear, non-technical error messages to users
-3. **Error Recovery**: Provides retry or reset actions to recover from errors
-4. **Development Support**: Shows detailed error information in development mode for debugging
-5. **Error Reporting**: Integrates with error tracking services for monitoring
-
-## Restrictions (Forbidden)
-
-### DO NOT
-- ❌ DO NOT wrap individual small components (use at screen or major section level)
-- ❌ DO NOT use error boundaries to handle expected errors (e.g., network failures)
-- ❌ DO NOT show technical stack traces to end users in production
-
-### NEVER
-- ❌ NEVER use error boundaries inside event handlers or async code
-- ❌ NEVER use error boundaries to control flow or business logic
-- ❌ NEVER expose sensitive information in error messages
-
-### AVOID
-- ❌ AVOID nesting multiple error boundaries without clear purpose
-- ❌ AVOID generic error messages that don't help users understand what happened
-- ❌ AVOID blocking the entire app when a recoverable error occurs
-
-## Rules (Mandatory)
-
-### ALWAYS
-- ✅ ALWAYS provide a clear fallback UI when errors occur
-- ✅ ALWAYS log errors for debugging and monitoring
-- ✅ ALWAYS integrate with error tracking services (e.g., Sentry)
-- ✅ ALWAYS show user-friendly error messages in production
-
-### MUST
-- ✅ MUST offer recovery options (retry, reset, or navigation) to users
-- ✅ MUST ensure error boundaries don't interfere with normal error handling
-- ✅ MUST test error scenarios during development
-
-### SHOULD
-- ✅ SHOULD provide context-specific error messages when possible
-- ✅ SHOULD include development-only error details for debugging
-- ✅ SHOULD offer a way to report errors or contact support
-
-## AI Agent Guidelines
-
-1. **File Reference**: When implementing error handling, refer to `/Users/umituz/Desktop/github/umituz/apps/artificial_intelligence/npm-packages/react-native-settings/src/presentation/components/SettingsErrorBoundary/SettingsErrorBoundary.tsx`
-2. **Placement Strategy**: Place error boundaries at strategic locations (screen level, major feature sections)
-3. **Fallback Design**: Design fallback UIs that match your app's visual design
-4. **Error Tracking**: Always integrate with error tracking services like Sentry or Crashlytics
-5. **Recovery Logic**: Implement appropriate recovery actions based on error type and context
-
-## Component Reference
-
-Related components:
-- **SettingsScreen**: Main screen component that uses error boundaries
-- **SettingsContent**: Content component wrapped by error boundaries
-- **React Error Boundaries**: Official React documentation for error boundaries

package/src/presentation/components/SettingsErrorBoundary.tsx

@@ -1,139 +0,0 @@
-/**
- * Settings Error Boundary Component
- * Catches and handles errors in settings components
- */
-
-import React, { Component, ReactNode } from 'react';
-import { View, StyleSheet } from 'react-native';
-import { useAppDesignTokens } from '@umituz/react-native-design-system';
-import { AtomicText, AtomicIcon } from '@umituz/react-native-design-system';
-import { useLocalization } from '../../domains/localization';
-
-interface Props {
-  children: ReactNode;
-  fallback?: ReactNode;
-  fallbackTitle?: string;
-  fallbackMessage?: string;
-}
-
-interface State {
-  hasError: boolean;
-  error?: Error;
-}
-
-export class SettingsErrorBoundary extends Component<Props, State> {
-  override state: State = {
-    hasError: false,
-    error: undefined,
-  };
-
-  static getDerivedStateFromError(error: Error): State {
-    return { hasError: true, error };
-  }
-
-  override componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
-    // Log error to console in development
-    if (__DEV__) {
-      console.error('Settings Error Boundary caught an error:', error);
-      console.error('Error Info:', errorInfo);
-    }
-
-    // TODO: Send to error tracking service in production
-    // Example: Sentry.captureException(error, { contexts: { react: { errorInfo } } });
-  }
-
-  override render(): ReactNode {
-    const { hasError, error } = this.state;
-    const { children, fallback, fallbackTitle, fallbackMessage } = this.props;
-
-    if (hasError) {
-      if (fallback) {
-        return fallback;
-      }
-
-      return (
-        <ErrorBoundaryFallback
-          error={error}
-          fallbackTitle={fallbackTitle}
-          fallbackMessage={fallbackMessage}
-        />
-      );
-    }
-
-    return children;
-  }
-}
-
-interface ErrorBoundaryFallbackProps {
-  error?: Error;
-  fallbackTitle?: string;
-  fallbackMessage?: string;
-}
-
-const ErrorBoundaryFallback: React.FC<ErrorBoundaryFallbackProps> = ({
-  error,
-  fallbackTitle,
-  fallbackMessage
-}) => {
-  const tokens = useAppDesignTokens();
-  const { t } = useLocalization();
-
-  const title = __DEV__ && error?.message
-    ? t("error_boundary.dev_title")
-    : (fallbackTitle || t("error_boundary.title"));
-
-  const message = __DEV__ && error?.message
-    ? `${t("error_boundary.dev_message")}: ${error.message}`
-    : (fallbackMessage || t("error_boundary.message"));
-
-  return (
-    <View style={[styles.container, { backgroundColor: tokens.colors.backgroundPrimary }]}>
-      <View style={[styles.content, { backgroundColor: tokens.colors.surface }]}>
-        <AtomicIcon
-          name="alert-circle"
-          color="warning"
-          size="lg"
-          style={styles.icon}
-        />
-        <AtomicText
-          type="headlineSmall"
-          color="primary"
-          style={styles.title}
-        >
-          {title}
-        </AtomicText>
-        <AtomicText
-          type="bodyMedium"
-          color="secondary"
-          style={styles.message}
-        >
-          {message}
-        </AtomicText>
-      </View>
-    </View>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: {
-    flex: 1,
-    padding: 16,
-    justifyContent: 'center',
-  },
-  content: {
-    alignItems: 'center',
-    padding: 24,
-    borderRadius: 12,
-  },
-  icon: {
-    marginBottom: 16,
-  },
-  title: {
-    marginBottom: 8,
-    textAlign: 'center',
-  },
-  message: {
-    textAlign: 'center',
-    lineHeight: 20,
-  },
-});