@umituz/react-native-settings 4.20.52 → 4.20.54

package/package.json

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

package/src/domains/about/presentation/components/AboutSettingItem.tsx

@@ -4,7 +4,7 @@
  * Fully configurable and generic
  * Optimized for performance and memory safety
  */
-import React, { useMemo, useCallback } from 'react';
+import React, { memo, useCallback } from 'react';
 import {
   TouchableOpacity,
   View,
@@ -13,6 +13,7 @@ import {
   ViewStyle,
   TextStyle,
 } from 'react-native';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
 
 export interface AboutSettingItemProps {
   /** Icon component (any React component) */
@@ -45,9 +46,7 @@ export interface AboutSettingItemProps {
   chevronColor?: string;
 }
 
-import { useAppDesignTokens } from '@umituz/react-native-design-system';
-
-export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
+export const AboutSettingItem: React.FC<AboutSettingItemProps> = memo(({
   icon,
   title,
   description,
@@ -67,107 +66,61 @@ export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
   const styles = getStyles(tokens);
   const colors = tokens.colors;
 
-  // Memoize container type to prevent unnecessary re-renders
-  const Container = useMemo(() => {
-    return onPress ? TouchableOpacity : View;
-  }, [onPress]) as React.ComponentType<React.ComponentProps<typeof TouchableOpacity | typeof View>>;
-
-  // Memoize container styles
-  const containerStyles = useMemo(() => {
-    return [
-      styles.container,
-      { backgroundColor: colors.surface },
-      disabled && styles.disabled,
-      containerStyle
-    ];
-  }, [disabled, containerStyle, colors.surface, styles]);
+  const Container = onPress ? TouchableOpacity : View;
 
-  // Memoize icon container styles
-  const iconContainerStyles = useMemo(() => {
-    return [
-      styles.iconContainer,
-      iconContainerStyle
-    ];
-  }, [iconContainerStyle, styles]);
-
-  // Memoize chevron styles
-  const chevronStyles = useMemo(() => {
-    return [
-      styles.chevron,
-      { color: chevronColor || colors.textSecondary }
-    ];
-  }, [chevronColor, colors.textSecondary, styles]);
-
-  // Memoize press handler to prevent unnecessary re-renders
   const handlePress = useCallback(() => {
     if (onPress && !disabled) {
       onPress();
     }
   }, [onPress, disabled]);
 
-  // Memoize icon rendering
-  const renderIcon = useMemo(() => {
-    if (!icon) {
-      return null;
-    }
+  const containerStyles = [
+    styles.container,
+    { backgroundColor: colors.surface },
+    disabled && styles.disabled,
+    containerStyle,
+  ];
 
-    return (
-      <View style={iconContainerStyles}>
-        {icon}
-      </View>
-    );
-  }, [icon, iconContainerStyles]);
+  const iconContainerStyles = [
+    styles.iconContainer,
+    iconContainerStyle,
+  ];
+
+  const chevronStyles = [
+    styles.chevron,
+    { color: chevronColor || colors.textSecondary },
+  ];
+
+  return (
+    <Container
+      style={containerStyles}
+      onPress={handlePress}
+      disabled={disabled}
+      testID={testID}
+    >
+      {icon && <View style={iconContainerStyles}>{icon}</View>}
 
-  // Memoize content rendering
-  const renderContent = useMemo(() => {
-    return (
       <View style={styles.content}>
-        <Text style={[styles.title, { color: colors.textPrimary }, titleStyle]}>{title}</Text>
+        <Text style={[styles.title, { color: colors.textPrimary }, titleStyle]}>
+          {title}
+        </Text>
         {description && (
           <Text style={[styles.description, { color: colors.textSecondary }, descriptionStyle]}>
             {description}
           </Text>
         )}
       </View>
-    );
-  }, [title, description, titleStyle, descriptionStyle, colors.textPrimary, colors.textSecondary, styles]);
-
-  // Memoize value rendering
-  const renderValue = useMemo(() => {
-    if (!value) {
-      return null;
-    }
-
-    return (
-      <Text style={[styles.value, { color: colors.textSecondary }, valueStyle]}>{value}</Text>
-    );
-  }, [value, valueStyle, colors.textSecondary, styles]);
-
-  // Memoize chevron rendering
-  const renderChevron = useMemo(() => {
-    if (!showChevron) {
-      return null;
-    }
 
-    return (
-      <Text style={chevronStyles}>›</Text>
-    );
-  }, [showChevron, chevronStyles]);
+      {value && (
+        <Text style={[styles.value, { color: colors.textSecondary }, valueStyle]}>
+          {value}
+        </Text>
+      )}
 
-  return (
-    <Container
-      style={containerStyles}
-      onPress={handlePress}
-      disabled={disabled}
-      testID={testID}
-    >
-      {renderIcon}
-      {renderContent}
-      {renderValue}
-      {renderChevron}
+      {showChevron && <Text style={chevronStyles}>›</Text>}
     </Container>
   );
-};
+});
 
 const getStyles = (tokens: any) => StyleSheet.create({
   container: {
@@ -206,4 +159,4 @@ const getStyles = (tokens: any) => StyleSheet.create({
     fontSize: 20,
     fontWeight: '300',
   },
-});
+});

package/src/domains/about/presentation/hooks/useAboutInfo.ts

@@ -3,9 +3,10 @@
  * Provides reactive state management for About data
  * Optimized for performance and memory safety
  */
-import { useState, useEffect, useCallback, useRef } from 'react';
+import { useState, useCallback, useRef, useEffect } from 'react';
 import { AppInfo, AboutConfig } from '../../domain/entities/AppInfo';
 import { AboutRepository } from '../../infrastructure/repositories/AboutRepository';
+import { createDefaultAppInfo } from '../../utils/AppInfoFactory';
 
 export interface UseAboutInfoOptions {
   /** Initial configuration */
@@ -42,161 +43,114 @@ export const useAboutInfo = (
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  // Prevent infinite loops and memory leaks
   const isInitializedRef = useRef(false);
   const isMountedRef = useRef(true);
 
+  const setErrorIfMounted = useCallback((err: string | null) => {
+    if (isMountedRef.current) {
+      setError(err);
+    }
+  }, []);
+
+  const setLoadingIfMounted = useCallback((value: boolean) => {
+    if (isMountedRef.current) {
+      setLoading(value);
+    }
+  }, []);
+
   const initialize = useCallback(async (config: AboutConfig, force = false) => {
-    // Prevent multiple initializations unless forced
     if (isInitializedRef.current && !force) {
       return;
     }
 
-    // Check if component is still mounted
     if (!isMountedRef.current) {
       return;
     }
 
-    setLoading(true);
-    setError(null);
+    setLoadingIfMounted(true);
+    setErrorIfMounted(null);
 
     try {
-      const defaultAppInfo: AppInfo = {
-        name: config.appInfo?.name || '',
-        version: config.appInfo?.version || '1.0.0',
-        description: config.appInfo?.description,
-        developer: config.appInfo?.developer,
-        contactEmail: config.appInfo?.contactEmail,
-        websiteUrl: config.appInfo?.websiteUrl,
-        websiteDisplay: config.appInfo?.websiteDisplay,
-        moreAppsUrl: config.appInfo?.moreAppsUrl,
-      };
-
+      const defaultAppInfo = createDefaultAppInfo(config);
       await repository.saveAppInfo(defaultAppInfo);
 
-      // Only update state if component is still mounted
       if (isMountedRef.current) {
         setAppInfo(defaultAppInfo);
         isInitializedRef.current = true;
       }
     } catch (err) {
-      if (!isMountedRef.current) {
-        return;
-      }
-
-      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
-      setError(errorMessage);
+      setErrorIfMounted(err instanceof Error ? err.message : 'Unknown error');
     } finally {
-      // Only update loading state if component is still mounted
-      if (isMountedRef.current) {
-        setLoading(false);
-      }
+      setLoadingIfMounted(false);
     }
-  }, [repository]);
+  }, [repository, setErrorIfMounted, setLoadingIfMounted]);
 
   const update = useCallback(async (config: AboutConfig) => {
     if (!isMountedRef.current) {
       return;
     }
 
-    setLoading(true);
-    setError(null);
+    setLoadingIfMounted(true);
+    setErrorIfMounted(null);
 
     try {
-      const updatedAppInfo: AppInfo = {
-        name: config.appInfo?.name || '',
-        version: config.appInfo?.version || '1.0.0',
-        description: config.appInfo?.description,
-        developer: config.appInfo?.developer,
-        contactEmail: config.appInfo?.contactEmail,
-        websiteUrl: config.appInfo?.websiteUrl,
-        websiteDisplay: config.appInfo?.websiteDisplay,
-        moreAppsUrl: config.appInfo?.moreAppsUrl,
-      };
-
+      const updatedAppInfo = createDefaultAppInfo(config);
       await repository.saveAppInfo(updatedAppInfo);
 
-      // Only update state if component is still mounted
       if (isMountedRef.current) {
         setAppInfo(updatedAppInfo);
       }
     } catch (err) {
-      if (!isMountedRef.current) {
-        return;
-      }
-
-      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
-      setError(errorMessage);
+      setErrorIfMounted(err instanceof Error ? err.message : 'Unknown error');
     } finally {
-      // Only update loading state if component is still mounted
-      if (isMountedRef.current) {
-        setLoading(false);
-      }
+      setLoadingIfMounted(false);
     }
-  }, [repository]);
+  }, [repository, setErrorIfMounted, setLoadingIfMounted]);
 
   const updateAppInfo = useCallback(async (updates: Partial<AppInfo>) => {
     if (!appInfo || !isMountedRef.current) {
       if (isMountedRef.current) {
-        setError('App info not initialized');
+        setErrorIfMounted('App info not initialized');
       }
       return;
     }
 
-    setLoading(true);
-    setError(null);
+    setLoadingIfMounted(true);
+    setErrorIfMounted(null);
 
     try {
       const updatedInfo = await repository.updateAppInfo(updates);
 
-      // Only update state if component is still mounted
       if (isMountedRef.current) {
         setAppInfo(updatedInfo);
       }
     } catch (err) {
-      if (!isMountedRef.current) {
-        return;
-      }
-
-      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
-      setError(errorMessage);
+      setErrorIfMounted(err instanceof Error ? err.message : 'Unknown error');
     } finally {
-      // Only update loading state if component is still mounted
-      if (isMountedRef.current) {
-        setLoading(false);
-      }
+      setLoadingIfMounted(false);
     }
-  }, [repository, appInfo]);
+  }, [repository, appInfo, setErrorIfMounted, setLoadingIfMounted]);
 
   const refresh = useCallback(async () => {
     if (!isMountedRef.current || !appInfo) {
       return;
     }
 
-    setLoading(true);
-    setError(null);
+    setLoadingIfMounted(true);
+    setErrorIfMounted(null);
 
     try {
       const refreshedInfo = await repository.getAppInfo();
 
-      // Only update state if component is still mounted
       if (isMountedRef.current) {
         setAppInfo(refreshedInfo);
       }
     } catch (err) {
-      if (!isMountedRef.current) {
-        return;
-      }
-
-      const errorMessage = err instanceof Error ? err.message : 'Unknown error';
-      setError(errorMessage);
+      setErrorIfMounted(err instanceof Error ? err.message : 'Unknown error');
     } finally {
-      // Only update loading state if component is still mounted
-      if (isMountedRef.current) {
-        setLoading(false);
-      }
+      setLoadingIfMounted(false);
     }
-  }, [repository, appInfo]);
+  }, [repository, appInfo, setErrorIfMounted, setLoadingIfMounted]);
 
   const reset = useCallback(() => {
     if (!isMountedRef.current) {
@@ -209,40 +163,24 @@ export const useAboutInfo = (
     isInitializedRef.current = false;
   }, []);
 
-  // Cleanup on unmount to prevent memory leaks
   useEffect(() => {
     return () => {
       isMountedRef.current = false;
 
-      // Cleanup repository if it has destroy method
       if (repository && typeof repository.destroy === 'function') {
         repository.destroy();
       }
     };
   }, [repository]);
 
-
-
-  // Set initial config when provided (if autoInit is not explicitly false)
   useEffect(() => {
     if (initialConfig && autoInit !== false && isMountedRef.current && !isInitializedRef.current) {
-      const defaultAppInfo: AppInfo = {
-        name: initialConfig.appInfo?.name || '',
-        version: initialConfig.appInfo?.version || '1.0.0',
-        description: initialConfig.appInfo?.description,
-        developer: initialConfig.appInfo?.developer,
-        contactEmail: initialConfig.appInfo?.contactEmail,
-        websiteUrl: initialConfig.appInfo?.websiteUrl,
-        websiteDisplay: initialConfig.appInfo?.websiteDisplay,
-        moreAppsUrl: initialConfig.appInfo?.moreAppsUrl,
-      };
-
+      const defaultAppInfo = createDefaultAppInfo(initialConfig);
       setAppInfo(defaultAppInfo);
       isInitializedRef.current = true;
     }
   }, [initialConfig, autoInit]);
 
-  // Auto-initialize with dependency optimization
   useEffect(() => {
     if (autoInit === true && initialConfig && isMountedRef.current) {
       initialize(initialConfig, true);
@@ -259,4 +197,4 @@ export const useAboutInfo = (
     refresh,
     reset,
   };
-};
+};

package/src/domains/about/presentation/hooks/useAboutInfo.types.ts

@@ -0,0 +1,32 @@
+/**
+ * useAboutInfo Hook Types
+ * Type definitions for about info hook
+ */
+
+import type { AppInfo, AboutConfig } from '../../domain/entities/AppInfo';
+
+export interface UseAboutInfoOptions {
+  /** Initial configuration */
+  initialConfig?: AboutConfig;
+  /** Auto-initialize on mount */
+  autoInit?: boolean;
+}
+
+export interface UseAboutInfoReturn {
+  /** Current app info */
+  appInfo: AppInfo | null;
+  /** Loading state */
+  loading: boolean;
+  /** Error state */
+  error: string | null;
+  /** Initialize with config */
+  initialize: (config: AboutConfig) => Promise<void>;
+  /** Update with new config */
+  update: (config: AboutConfig) => Promise<void>;
+  /** Update app info */
+  updateAppInfo: (updates: Partial<AppInfo>) => Promise<void>;
+  /** Refresh current app info */
+  refresh: () => Promise<void>;
+  /** Reset to initial state */
+  reset: () => void;
+}

package/src/domains/about/utils/AppInfoFactory.ts

@@ -0,0 +1,19 @@
+/**
+ * AppInfo Factory Utility
+ * Creates AppInfo objects from AboutConfig
+ */
+import { AppInfo, AboutConfig } from '../domain/entities/AppInfo';
+
+/**
+ * Creates a default AppInfo object from AboutConfig
+ */
+export const createDefaultAppInfo = (config: AboutConfig): AppInfo => ({
+  name: config.appInfo?.name || '',
+  version: config.appInfo?.version || '1.0.0',
+  description: config.appInfo?.description,
+  developer: config.appInfo?.developer,
+  contactEmail: config.appInfo?.contactEmail,
+  websiteUrl: config.appInfo?.websiteUrl,
+  websiteDisplay: config.appInfo?.websiteDisplay,
+  moreAppsUrl: config.appInfo?.moreAppsUrl,
+});

package/src/domains/about/utils/index.ts

@@ -3,6 +3,8 @@
  * General purpose utilities for all applications
  */
 
+export { createDefaultAppInfo } from './AppInfoFactory';
+
 /**
  * Create default configuration with overrides
  */

package/src/domains/legal/index.ts

@@ -6,3 +6,4 @@
 export * from './presentation/screens/LegalScreen';
 export * from './presentation/screens/PrivacyPolicyScreen';
 export * from './presentation/screens/TermsOfServiceScreen';
+export { LegalContentScreen } from './presentation/screens/LegalContentScreen';

package/src/domains/legal/presentation/screens/LegalContentScreen.tsx

@@ -0,0 +1,140 @@
+/**
+ * Base Legal Content Screen Component
+ * Shared logic for legal document screens
+ */
+import React from "react";
+import { View, ScrollView, StyleSheet } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { AtomicText, AtomicButton } from "@umituz/react-native-design-system";
+import { UrlHandlerService } from "../../domain/services/UrlHandlerService";
+import { ContentValidationService } from "../../domain/services/ContentValidationService";
+import { StyleCacheService } from "../../domain/services/StyleCacheService";
+
+export interface LegalContentScreenProps {
+  content?: string;
+  url?: string;
+  title: string;
+  viewOnlineText?: string;
+  openText?: string;
+  onUrlPress?: () => void;
+  testID?: string;
+  styleCacheKey: string;
+  createStyles: (tokens: any) => ReturnType<typeof StyleSheet.create>;
+}
+
+export const LegalContentScreen: React.FC<LegalContentScreenProps> = React.memo(({
+  content,
+  url,
+  title,
+  viewOnlineText,
+  openText,
+  onUrlPress,
+  testID,
+  styleCacheKey,
+  createStyles,
+}) => {
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
+
+  React.useEffect(() => {
+    ContentValidationService.validateScreenContent(
+      content,
+      url,
+      title,
+      viewOnlineText,
+      openText,
+      styleCacheKey
+    );
+  }, [content, url, title, viewOnlineText, openText, styleCacheKey]);
+
+  const styles = React.useMemo(() => {
+    const cacheKey = StyleCacheService.createTokenCacheKey(tokens);
+    return StyleCacheService.getCachedStyles(
+      styleCacheKey,
+      cacheKey,
+      () => createStyles(tokens)
+    );
+  }, [tokens, styleCacheKey, createStyles]);
+
+  const handleUrlPress = React.useCallback(async () => {
+    if (onUrlPress) {
+      onUrlPress();
+    } else if (url) {
+      try {
+        await UrlHandlerService.openUrl(url);
+      } catch {
+        // Silent error handling
+      }
+    }
+  }, [onUrlPress, url]);
+
+  const containerStyle = React.useMemo(() => [
+    styles.container,
+    {
+      backgroundColor: tokens.colors.backgroundPrimary,
+      paddingTop: insets.top,
+    },
+  ], [styles.container, tokens.colors.backgroundPrimary, insets.top]);
+
+  const showContent = React.useMemo(() => !!(content), [content]);
+  const showUrlSection = React.useMemo(() =>
+    ContentValidationService.shouldShowUrlSection(url, onUrlPress),
+    [url, onUrlPress]
+  );
+
+  const contentSection = React.useMemo(() => {
+    if (showContent) {
+      return (
+        <AtomicText type="bodyMedium" color="onSurface" style={styles.text}>
+          {content}
+        </AtomicText>
+      );
+    }
+
+    if (showUrlSection) {
+      return (
+        <View style={styles.urlContainer}>
+          <AtomicText
+            type="bodyMedium"
+            color="secondary"
+            style={styles.urlText}
+          >
+            {viewOnlineText}
+          </AtomicText>
+          <AtomicButton
+            variant="primary"
+            onPress={handleUrlPress}
+            fullWidth
+            style={styles.urlButton}
+          >
+            {openText}
+          </AtomicButton>
+        </View>
+      );
+    }
+
+    return null;
+  }, [showContent, showUrlSection, styles, content, viewOnlineText, openText, handleUrlPress]);
+
+  return (
+    <View style={containerStyle} testID={testID}>
+      <ScrollView
+        contentContainerStyle={styles.scrollContent}
+        showsVerticalScrollIndicator={false}
+      >
+        <View style={styles.content}>
+          <AtomicText
+            type="headlineLarge"
+            color="primary"
+            style={styles.title}
+          >
+            {title}
+          </AtomicText>
+
+          {contentSection}
+        </View>
+      </ScrollView>
+    </View>
+  );
+});