@umituz/react-native-settings 4.20.3 → 4.20.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.20.3",
+  "version": "4.20.5",
   "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/appearance/presentation/screens/AppearanceScreen.tsx

@@ -1,12 +1,12 @@
 /**
  * Appearance Screen
  *
- * Screen for managing appearance settings including theme mode and custom colors
- * Single Responsibility: Presentation orchestration only
+ * Screen for managing appearance settings including theme mode and custom colors.
+ * Uses ScreenLayout from design system for consistent UI.
  */
 
 import React, { useMemo, useCallback } from "react";
-import { ScrollView, StyleSheet, View } from "react-native";
+import { ScreenLayout } from "@umituz/react-native-design-system";
 import { useAppDesignTokens } from "@umituz/react-native-design-system";
 import { useAppearance, useAppearanceActions } from "../../hooks";
 import {
@@ -16,42 +16,14 @@ import {
   AppearancePreview,
   type ThemeOptionConfig,
 } from "../components";
-
 import type { AppearanceTexts } from "../../types";
 
 export interface AppearanceScreenProps {
-  /** Texts for localization */
   texts?: AppearanceTexts;
-
-  /**
-   * Custom header component to override default header
-   */
   headerComponent?: React.ReactNode;
-
-  /**
-   * Show/hide theme mode section
-   */
   showThemeSection?: boolean;
-
-  /**
-   * Show/hide custom colors section
-   */
   showColorsSection?: boolean;
-
-  /**
-   * Show/hide preview section
-   */
   showPreviewSection?: boolean;
-
-  /**
-   * Custom container style
-   */
-  containerStyle?: any;
-
-  /**
-   * Custom content container style
-   */
-  contentContainerStyle?: any;
 }
 
 export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
@@ -60,8 +32,6 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
   showThemeSection = true,
   showColorsSection = true,
   showPreviewSection = true,
-  containerStyle,
-  contentContainerStyle,
 }) => {
   const tokens = useAppDesignTokens();
   const { themeMode } = useAppearance();
@@ -72,10 +42,6 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
     handleResetColors,
   } = useAppearanceActions();
 
-  // Memoize styles to prevent unnecessary re-creation
-  const styles = useMemo(() => getStyles(tokens), [tokens]);
-
-  // Memoize header to prevent unnecessary re-renders
   const headerComponentMemo = useMemo(() => {
     return (
       headerComponent || (
@@ -88,7 +54,6 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
     );
   }, [headerComponent, tokens, texts?.title, texts?.subtitle]);
 
-  // Stable callback for color change to prevent infinite re-renders
   const stableHandleColorChange = useCallback(
     (key: keyof typeof localCustomColors, color: string) => {
       handleColorChange(key, color);
@@ -96,15 +61,11 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
     [handleColorChange]
   );
 
-  // Memoize sections to prevent unnecessary re-renders
   const themeSectionMemo = useMemo(() => {
     if (!showThemeSection) return null;
 
-    // Construct themes from texts prop
-    // This adheres to "Package Driven Design" where content is driven by the consumer (App)
     const themes: ThemeOptionConfig[] = [];
 
-    // We only add the theme option if the corresponding text config is provided
     if (texts?.lightMode) {
       themes.push({
         mode: 'light' as const,
@@ -125,9 +86,6 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
       });
     }
 
-    // If no texts provided, themes array is empty, section will return null.
-    // This forces the consuming app to provide the texts.
-
     return (
       <ThemeModeSection
         tokens={tokens}
@@ -194,34 +152,11 @@ export const AppearanceScreen: React.FC<AppearanceScreenProps> = ({
   ]);
 
   return (
-    <View style={[styles.container, containerStyle]}>
-      <ScrollView
-        style={styles.scrollView}
-        contentContainerStyle={[styles.scrollContent, contentContainerStyle]}
-        showsVerticalScrollIndicator={false}
-        removeClippedSubviews={true} // Performance optimization for long lists
-        scrollEventThrottle={16} // 60fps throttling
-      >
-        {headerComponentMemo}
-        {themeSectionMemo}
-        {colorsSectionMemo}
-        {previewSectionMemo}
-      </ScrollView>
-    </View>
+    <ScreenLayout hideScrollIndicator>
+      {headerComponentMemo}
+      {themeSectionMemo}
+      {colorsSectionMemo}
+      {previewSectionMemo}
+    </ScreenLayout>
   );
 };
-
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
-  StyleSheet.create({
-    container: {
-      flex: 1,
-      backgroundColor: tokens.colors.backgroundPrimary,
-    },
-    scrollView: {
-      flex: 1,
-    },
-    scrollContent: {
-      padding: tokens.spacing.md,
-      paddingBottom: tokens.spacing.xl,
-    },
-  });

package/src/domains/legal/presentation/components/LegalDocumentsList.tsx

@@ -0,0 +1,115 @@
+/**
+ * Legal Documents List Component
+ * 
+ * Displays list of legal documents (Privacy, Terms, EULA).
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { LegalItem } from "./LegalItem";
+import { UrlHandlerService } from "../../domain/services/UrlHandlerService";
+
+interface LegalDocumentsListProps {
+  documentsHeader?: string;
+  privacyTitle?: string;
+  privacyDescription?: string;
+  termsTitle?: string;
+  termsDescription?: string;
+  eulaTitle?: string;
+  eulaDescription?: string;
+  onPrivacyPress?: () => void;
+  onTermsPress?: () => void;
+  onEulaPress?: () => void;
+  eulaUrl?: string;
+}
+
+export const LegalDocumentsList: React.FC<LegalDocumentsListProps> = React.memo(({
+  documentsHeader,
+  privacyTitle,
+  privacyDescription,
+  termsTitle,
+  termsDescription,
+  eulaTitle,
+  eulaDescription,
+  onPrivacyPress,
+  onTermsPress,
+  onEulaPress,
+  eulaUrl,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const handleEulaPress = React.useCallback(async () => {
+    if (__DEV__) {
+      console.log('LegalDocumentsList: EULA pressed', { eulaUrl });
+    }
+
+    if (onEulaPress) {
+      onEulaPress();
+    } else if (eulaUrl) {
+      try {
+        await UrlHandlerService.openUrl(eulaUrl);
+      } catch (error) {
+        if (__DEV__) {
+          console.error('LegalDocumentsList: Error opening EULA URL', error);
+        }
+      }
+    }
+  }, [onEulaPress, eulaUrl]);
+
+  const showPrivacy = !!(onPrivacyPress && privacyTitle);
+  const showTerms = !!(onTermsPress && termsTitle);
+  const showEula = !!((onEulaPress || eulaUrl) && eulaTitle);
+
+  return (
+    <View style={[styles.section, { marginTop: tokens.spacing.md }]}>
+      {documentsHeader && (
+        <AtomicText
+          type="labelLarge"
+          color="textSecondary"
+          style={[styles.sectionHeader, {
+            marginBottom: tokens.spacing.sm,
+            paddingHorizontal: tokens.spacing.md,
+          }]}
+        >
+          {documentsHeader}
+        </AtomicText>
+      )}
+
+      {showPrivacy && (
+        <LegalItem
+          iconName="shield"
+          title={privacyTitle!}
+          description={privacyDescription}
+          onPress={onPrivacyPress}
+          testID="privacy-policy-item"
+        />
+      )}
+
+      {showTerms && (
+        <LegalItem
+          iconName="document-text"
+          title={termsTitle!}
+          description={termsDescription}
+          onPress={onTermsPress}
+          testID="terms-of-service-item"
+        />
+      )}
+
+      {showEula && (
+        <LegalItem
+          iconName="document"
+          title={eulaTitle!}
+          description={eulaDescription}
+          onPress={handleEulaPress}
+          testID="eula-item"
+        />
+      )}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  section: {},
+  sectionHeader: {},
+});

package/src/domains/legal/presentation/components/LegalScreenHeader.tsx

@@ -0,0 +1,45 @@
+/**
+ * Legal Screen Header Component
+ * 
+ * Displays title and description for legal screen.
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+
+interface LegalScreenHeaderProps {
+  title?: string;
+  description?: string;
+}
+
+export const LegalScreenHeader: React.FC<LegalScreenHeaderProps> = React.memo(({
+  title,
+  description,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  if (!title) return null;
+
+  return (
+    <View style={[styles.header, { paddingBottom: tokens.spacing.lg, paddingTop: tokens.spacing.md }]}>
+      <AtomicText type="headlineLarge" color="textPrimary">
+        {title}
+      </AtomicText>
+      {description && (
+        <AtomicText
+          type="bodyMedium"
+          color="textSecondary"
+          style={[styles.subtitle, { marginTop: tokens.spacing.xs }]}
+        >
+          {description}
+        </AtomicText>
+      )}
+    </View>
+  );
+});
+
+const styles = StyleSheet.create({
+  header: {},
+  subtitle: {},
+});

package/src/domains/legal/presentation/components/index.ts

@@ -0,0 +1,5 @@
+export { LegalItem } from "./LegalItem";
+export { LegalLinks } from "./LegalLinks";
+export { LegalSection } from "./LegalSection";
+export { LegalScreenHeader } from "./LegalScreenHeader";
+export { LegalDocumentsList } from "./LegalDocumentsList";

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

@@ -2,236 +2,66 @@
  * Legal Screen Component
  * 
  * Single Responsibility: Layout and orchestration of legal documents list
- * Delegates item rendering to LegalItem component
- * 
- * All text content is passed as props (no localization dependency).
+ * Uses ScreenLayout from design system for consistent UI.
  */
 
 import React from "react";
-import { View, StyleSheet } from "react-native";
-import { useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system";
-import { AtomicText } from "@umituz/react-native-design-system";
 import { ScreenLayout } from "@umituz/react-native-design-system";
-import { LegalItem } from "../components/LegalItem";
-import { UrlHandlerService } from "../../domain/services/UrlHandlerService";
-import { ContentValidationService } from "../../domain/services/ContentValidationService";
-import { StyleCacheService } from "../../domain/services/StyleCacheService";
+import { LegalScreenHeader } from "../components/LegalScreenHeader";
+import { LegalDocumentsList } from "../components/LegalDocumentsList";
 
 export interface LegalScreenProps {
-  /**
-   * Title of the screen
-   */
   title?: string;
-  /**
-   * Description/subtitle text
-   */
   description?: string;
-  /**
-   * Header text for documents section
-   */
   documentsHeader?: string;
-  /**
-   * Privacy Policy button text
-   */
   privacyTitle?: string;
-  /**
-   * Privacy Policy description
-   */
   privacyDescription?: string;
-  /**
-   * Terms of Service button text
-   */
   termsTitle?: string;
-  /**
-   * Terms of Service description
-   */
   termsDescription?: string;
-  /**
-   * EULA button text
-   */
   eulaTitle?: string;
-  /**
-   * EULA description
-   */
   eulaDescription?: string;
-  /**
-   * Callback when Privacy Policy is pressed
-   */
   onPrivacyPress?: () => void;
-  /**
-   * Callback when Terms of Service is pressed
-   */
   onTermsPress?: () => void;
-  /**
-   * Callback when EULA is pressed
-   * Icon name from Feather library (e.g., "shield", "file-text", "file") EULA URL
-   */
   onEulaPress?: () => void;
-  /**
-   * EULA URL (defaults to Apple's standard EULA)
-   */
   eulaUrl?: string;
-  /**
-   * Test ID for E2E testing
-   */
   testID?: string;
 }
 
-export const LegalScreen: React.FC<LegalScreenProps> = React.memo(({
-  title,
-  description,
-  documentsHeader,
-  privacyTitle,
-  privacyDescription,
-  termsTitle,
-  termsDescription,
-  eulaTitle,
-  eulaDescription,
-  onPrivacyPress,
-  onTermsPress,
-  onEulaPress,
-  eulaUrl,
-  testID = "legal-screen",
-}) => {
-  const tokens = useAppDesignTokens();
-
-  // Memoize styles to prevent recreation on every render
-  const styles = React.useMemo(() => {
-    const cacheKey = StyleCacheService.createTokenCacheKey(tokens);
-    return StyleCacheService.getCachedStyles(
-      'LegalScreen',
-      cacheKey,
-      () => createLegalScreenStyles(tokens)
-    );
-  }, [tokens]);
-
-  // Memoize EULA press handler to prevent child re-renders
-  const handleEulaPress = React.useCallback(async () => {
-    if (__DEV__) {
-      console.log('LegalScreen: EULA pressed', { eulaUrl });
-    }
-
-    if (onEulaPress) {
-      onEulaPress();
-    } else if (eulaUrl) {
-      try {
-        await UrlHandlerService.openUrl(eulaUrl);
-      } catch (error) {
-        if (__DEV__) {
-          console.error('LegalScreen: Error opening EULA URL', error);
-        }
-      }
-    }
-  }, [onEulaPress, eulaUrl]);
-
-  // Memoize conditional rendering to prevent unnecessary re-renders
-  const showHeader = React.useMemo(() => !!(title), [title]);
-  const showDescription = React.useMemo(() => !!(description), [description]);
-  const showSectionHeader = React.useMemo(() => !!(documentsHeader), [documentsHeader]);
-  const showPrivacy = React.useMemo(() =>
-    ContentValidationService.shouldShowLegalItem(onPrivacyPress, privacyTitle),
-    [onPrivacyPress, privacyTitle]
-  );
-  const showTerms = React.useMemo(() =>
-    ContentValidationService.shouldShowLegalItem(onTermsPress, termsTitle),
-    [onTermsPress, termsTitle]
-  );
-  const showEula = React.useMemo(() =>
-    !!((onEulaPress || eulaUrl) && eulaTitle),
-    [onEulaPress, eulaUrl, eulaTitle]
-  );
-
-  // Memoize header content
-  const headerContent = React.useMemo(() => {
-    if (!showHeader) return null;
-
-    return (
-      <View style={styles.header}>
-        <AtomicText type="headlineLarge" color="textPrimary">
-          {title}
-        </AtomicText>
-        {showDescription && (
-          <AtomicText
-            type="bodyMedium"
-            color="textSecondary"
-            style={styles.headerSubtitle}
-          >
-            {description}
-          </AtomicText>
-        )}
-      </View>
-    );
-  }, [showHeader, showDescription, styles.header, styles.headerSubtitle, title, description]);
+export const LegalScreen: React.FC<LegalScreenProps> = React.memo((props) => {
+  const {
+    title,
+    description,
+    documentsHeader,
+    privacyTitle,
+    privacyDescription,
+    termsTitle,
+    termsDescription,
+    eulaTitle,
+    eulaDescription,
+    onPrivacyPress,
+    onTermsPress,
+    onEulaPress,
+    eulaUrl,
+    testID = "legal-screen",
+  } = props;
 
   return (
     <ScreenLayout testID={testID} hideScrollIndicator>
-      {/* Header */}
-      {headerContent}
-
-      {/* Legal Documents Section */}
-      <View style={styles.section}>
-        {showSectionHeader && (
-          <AtomicText
-            type="labelLarge"
-            color="textSecondary"
-            style={styles.sectionHeader}
-          >
-            {documentsHeader}
-          </AtomicText>
-        )}
-
-        {/* Privacy Policy */}
-        {showPrivacy && (
-          <LegalItem
-            iconName="shield"
-            title={privacyTitle!}
-            description={privacyDescription}
-            onPress={onPrivacyPress}
-            testID="privacy-policy-item"
-          />
-        )}
-
-        {/* Terms of Service */}
-        {showTerms && (
-          <LegalItem
-            iconName="document-text"
-            title={termsTitle!}
-            description={termsDescription}
-            onPress={onTermsPress}
-            testID="terms-of-service-item"
-          />
-        )}
-
-        {/* EULA */}
-        {showEula && (
-          <LegalItem
-            iconName="document"
-            title={eulaTitle!}
-            description={eulaDescription}
-            onPress={handleEulaPress}
-            testID="eula-item"
-          />
-        )}
-      </View>
+      <LegalScreenHeader title={title} description={description} />
+      
+      <LegalDocumentsList
+        documentsHeader={documentsHeader}
+        privacyTitle={privacyTitle}
+        privacyDescription={privacyDescription}
+        termsTitle={termsTitle}
+        termsDescription={termsDescription}
+        eulaTitle={eulaTitle}
+        eulaDescription={eulaDescription}
+        onPrivacyPress={onPrivacyPress}
+        onTermsPress={onTermsPress}
+        onEulaPress={onEulaPress}
+        eulaUrl={eulaUrl}
+      />
     </ScreenLayout>
   );
 });
-
-const createLegalScreenStyles = (tokens: DesignTokens) => {
-  return StyleSheet.create({
-    header: {
-      paddingBottom: tokens.spacing.lg,
-      paddingTop: tokens.spacing.md,
-    },
-    headerSubtitle: {
-      marginTop: tokens.spacing.xs,
-    },
-    section: {
-      marginTop: tokens.spacing.md,
-    },
-    sectionHeader: {
-      marginBottom: tokens.spacing.sm,
-      paddingHorizontal: tokens.spacing.md,
-    },
-  });
-};