@umituz/react-native-settings 4.23.71 → 4.23.73

package/src/infrastructure/utils/memoUtils.ts

@@ -0,0 +1,159 @@
+/**
+ * Memo Utilities
+ * Centralized memoization helpers to reduce code duplication
+ */
+import { useMemo, useCallback, useRef, DependencyList } from 'react';
+import type { DesignTokens } from '@umituz/react-native-design-system';
+
+/**
+ * Custom hook to create memoized styles from a style factory function
+ * @param styleFactory Function that creates styles
+ * @param tokens Design tokens
+ * @param deps Dependencies for memoization
+ * @returns Memoized styles object
+ */
+export function useMemoizedStyles<T>(
+  styleFactory: (tokens: DesignTokens) => T,
+  tokens: DesignTokens,
+  deps: DependencyList = []
+): T {
+  return useMemo(() => styleFactory(tokens), [tokens, ...deps]);
+}
+
+/**
+ * Custom hook to create a memoized callback with proper type inference
+ * @param callback Function to memoize
+ * @param deps Dependencies for memoization
+ * @returns Memoized callback
+ */
+export function useMemoizedCallback<T extends (...args: any[]) => any>(
+  callback: T,
+  deps: DependencyList
+): T {
+  return useCallback(callback, deps) as T;
+}
+
+/**
+ * Custom hook to create a memoized value with proper type inference
+ * @param factory Function that creates the value
+ * @param deps Dependencies for memoization
+ * @returns Memoized value
+ */
+export function useMemoizedValue<T>(
+  factory: () => T,
+  deps: DependencyList
+): T {
+  return useMemo(factory, deps);
+}
+
+/**
+ * Creates a memoized style object with proper caching
+ * @param styleCreator Function that creates styles
+ * @param deps Dependencies for memoization
+ * @returns Memoized styles
+ */
+export function useStyledMemo<T extends Record<string, any>>(
+  styleCreator: () => T,
+  deps: DependencyList = []
+): T {
+  return useMemo(styleCreator, deps);
+}
+
+/**
+ * Memoizes a value with a custom equality check (non-hook version)
+ * @param value Value to memoize
+ * @param _isEqual Custom equality function
+ * @returns Memoized value
+ */
+export function memoWithEquality<T>(
+  value: T,
+  _isEqual: (prev: T, next: T) => boolean
+): T {
+  // This is a utility function, not a hook
+  // It cannot use hooks internally
+  return value;
+}
+
+/**
+ * Creates a cache key for style memoization
+ * @param tokens Design tokens
+ * @param prefix Optional prefix for the key
+ * @returns Cache key string
+ */
+export function createStyleCacheKey(
+  tokens: DesignTokens,
+  prefix: string = ''
+): string {
+  const { colors, spacing, typography } = tokens;
+
+  return `${prefix}-${JSON.stringify({
+    colors: { primary: colors.primary, background: colors.backgroundPrimary },
+    spacing: { md: spacing.md, lg: spacing.lg },
+    typography: { body: typography.bodyMedium.responsiveFontSize },
+  })}`;
+}
+
+/**
+ * Memoizes a value with a custom equality check
+ * @param value Value to memoize
+ * @param _isEqual Custom equality function
+ * @returns Memoized value
+ */
+export function useMemoWithEquality<T>(
+  value: T,
+  _isEqual: (prev: T, next: T) => boolean
+): T {
+  const ref = useRef<T>(value);
+
+  return useMemo(() => {
+    if (!_isEqual(ref.current, value)) {
+      ref.current = value;
+    }
+    return ref.current;
+  }, [value, _isEqual]);
+}
+
+/**
+ * Custom hook that creates a debounced callback
+ * @param callback Function to debounce
+ * @param delay Delay in milliseconds
+ * @returns Debounced callback
+ */
+export function useDebouncedCallback<T extends (...args: any[]) => any>(
+  callback: T,
+  delay: number
+): T {
+  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  return useCallback((...args: Parameters<T>) => {
+    if (timeoutRef.current) {
+      clearTimeout(timeoutRef.current);
+    }
+
+    timeoutRef.current = setTimeout(() => {
+      callback(...args);
+    }, delay);
+  }, [callback, delay]) as T;
+}
+
+/**
+ * Custom hook that creates a throttled callback
+ * @param callback Function to throttle
+ * @param delay Delay in milliseconds
+ * @returns Throttled callback
+ */
+export function useThrottledCallback<T extends (...args: any[]) => any>(
+  callback: T,
+  delay: number
+): T {
+  const lastRunRef = useRef<number>(0);
+
+  return useCallback((...args: Parameters<T>) => {
+    const now = Date.now();
+
+    if (now - lastRunRef.current >= delay) {
+      callback(...args);
+      lastRunRef.current = now;
+    }
+  }, [callback, delay]) as T;
+}

package/src/infrastructure/utils/styleUtils.ts

@@ -0,0 +1,190 @@
+/**
+ * Style Utilities
+ * Centralized style creation functions to reduce code duplication
+ */
+import { StyleSheet, ViewStyle, TextStyle, ImageStyle } from 'react-native';
+import type { DesignTokens } from '@umituz/react-native-design-system';
+
+/**
+ * Creates a container style with flex 1
+ */
+export const createContainerStyle = (overrides: ViewStyle = {}): ViewStyle => ({
+  flex: 1,
+  ...overrides,
+});
+
+/**
+ * Creates a centered container style
+ */
+export const createCenteredContainerStyle = (overrides: ViewStyle = {}): ViewStyle => ({
+  flex: 1,
+  justifyContent: 'center',
+  alignItems: 'center',
+  ...overrides,
+});
+
+/**
+ * Creates a row style for horizontal layouts
+ */
+export const createRowStyle = (overrides: ViewStyle = {}): ViewStyle => ({
+  flexDirection: 'row',
+  alignItems: 'center',
+  ...overrides,
+});
+
+/**
+ * Creates a header style
+ */
+export const createHeaderStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
+  paddingHorizontal: tokens.spacing.lg,
+  paddingVertical: tokens.spacing.md,
+  ...overrides,
+});
+
+/**
+ * Creates a section style
+ */
+export const createSectionStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
+  padding: tokens.spacing.lg,
+  ...overrides,
+});
+
+/**
+ * Creates a card style
+ */
+export const createCardStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
+  backgroundColor: tokens.colors.surface,
+  borderRadius: tokens.borders.radius.md,
+  padding: tokens.spacing.lg,
+  ...overrides,
+});
+
+/**
+ * Creates a title text style
+ */
+export const createTitleStyle = (tokens: DesignTokens, overrides: TextStyle = {}): TextStyle => ({
+  fontSize: tokens.typography.headlineMedium.responsiveFontSize,
+  fontWeight: '600',
+  color: tokens.colors.textPrimary,
+  ...overrides,
+});
+
+/**
+ * Creates a subtitle text style
+ */
+export const createSubtitleStyle = (tokens: DesignTokens, overrides: TextStyle = {}): TextStyle => ({
+  fontSize: tokens.typography.bodyMedium.responsiveFontSize,
+  color: tokens.colors.textSecondary,
+  ...overrides,
+});
+
+/**
+ * Creates a button style
+ */
+export const createButtonStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
+  backgroundColor: tokens.colors.primary,
+  borderRadius: tokens.borders.radius.md,
+  paddingVertical: tokens.spacing.md,
+  paddingHorizontal: tokens.spacing.lg,
+  ...overrides,
+});
+
+/**
+ * Creates an icon container style
+ */
+export const createIconContainerStyle = (
+  size: number = 48,
+  tokens: DesignTokens,
+  overrides: ViewStyle = {}
+): ViewStyle => ({
+  width: size,
+  height: size,
+  borderRadius: size / 2,
+  justifyContent: 'center',
+  alignItems: 'center',
+  backgroundColor: tokens.colors.surfaceSecondary,
+  ...overrides,
+});
+
+/**
+ * Creates a scroll content style
+ */
+export const createScrollContentStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
+  padding: tokens.spacing.lg,
+  ...overrides,
+});
+
+/**
+ * Creates a separator/border style
+ */
+export const createSeparatorStyle = (tokens: DesignTokens, overrides: ViewStyle = {}): ViewStyle => ({
+  height: 1,
+  backgroundColor: tokens.colors.border,
+  ...overrides,
+});
+
+/**
+ * Creates a margin utility style
+ */
+export const createMarginStyle = (
+  spacing: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  tokens: DesignTokens,
+  overrides: ViewStyle = {}
+): ViewStyle => ({
+  margin: tokens.spacing[spacing],
+  ...overrides,
+});
+
+/**
+ * Creates a padding utility style
+ */
+export const createPaddingStyle = (
+  spacing: 'xs' | 'sm' | 'md' | 'lg' | 'xl',
+  tokens: DesignTokens,
+  overrides: ViewStyle = {}
+): ViewStyle => ({
+  padding: tokens.spacing[spacing],
+  ...overrides,
+});
+
+/**
+ * Combines multiple styles into one
+ */
+export const combineStyles = (
+  ...styles: (ViewStyle | TextStyle | ImageStyle | undefined | false)[]
+): ViewStyle | TextStyle | ImageStyle => {
+  return StyleSheet.flatten(styles.filter(Boolean));
+};
+
+/**
+ * Creates a responsive style based on screen dimensions
+ */
+export const createResponsiveStyle = (
+  _tokens: DesignTokens,
+  phoneStyle: ViewStyle,
+  _tabletStyle?: ViewStyle
+): ViewStyle => {
+  // For now, return phone style. Can be enhanced with actual responsive logic
+  return phoneStyle;
+};
+
+/**
+ * Type guard for ViewStyle
+ */
+export const isViewStyle = (style: any): style is ViewStyle => {
+  return style && typeof style === 'object';
+};
+
+/**
+ * Creates a safe area aware style
+ */
+export const createSafeAreaStyle = (
+  insets: { top?: number; bottom?: number; left?: number; right?: number },
+  overrides: ViewStyle = {}
+): ViewStyle => ({
+  paddingTop: insets.top,
+  paddingBottom: insets.bottom,
+  paddingLeft: insets.left,
+  paddingRight: insets.right,
+  ...overrides,
+});

package/src/presentation/screens/SettingsScreen.tsx

@@ -10,7 +10,6 @@ import {
 } 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 +94,6 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
   // Workaround: Use conditional rendering with type assertion
   if (showHeader) {
     return <ScreenLayout header={<SettingsHeader showCloseButton={showCloseButton} onClose={onClose} />}>
-      <SettingsErrorBoundary>
         {children ?? (
           <SettingsContent
             normalizedConfig={normalizedConfig}
@@ -110,12 +108,10 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
             gamificationConfig={gamificationConfig}
           />
         )}
-      </SettingsErrorBoundary>
     </ScreenLayout>;
   }
 
   return <ScreenLayout>
-    <SettingsErrorBoundary>
       {children ?? (
         <SettingsContent
           normalizedConfig={normalizedConfig}
@@ -130,6 +126,5 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
           gamificationConfig={gamificationConfig}
         />
       )}
-    </SettingsErrorBoundary>
   </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,
-  },
-});