@umituz/react-native-settings 4.17.14 → 4.17.16

package/src/domains/about/infrastructure/repositories/__tests__/AboutRepository.test.ts

@@ -0,0 +1,153 @@
+/**
+ * Tests for AboutRepository
+ */
+import { AboutRepository } from '../AboutRepository';
+import { AppInfo } from '../../../domain/entities/AppInfo';
+
+describe('AboutRepository', () => {
+  let repository: AboutRepository;
+  const mockAppInfo: AppInfo = {
+    name: 'Test App',
+    version: '1.0.0',
+    description: 'Test Description',
+    developer: 'Test Developer',
+  };
+
+  beforeEach(() => {
+    repository = new AboutRepository();
+  });
+
+  afterEach(() => {
+    repository.destroy();
+  });
+
+  describe('saveAppInfo', () => {
+    it('should save app info successfully', async () => {
+      await expect(repository.saveAppInfo(mockAppInfo)).resolves.not.toThrow();
+      
+      const savedInfo = await repository.getAppInfo();
+      expect(savedInfo).toEqual(mockAppInfo);
+    });
+
+    it('should throw error for invalid input', async () => {
+      await expect(repository.saveAppInfo(null as unknown)).rejects.toThrow('Invalid app info provided');
+      await expect(repository.saveAppInfo(undefined as unknown)).rejects.toThrow('Invalid app info provided');
+      await expect(repository.saveAppInfo('invalid' as unknown)).rejects.toThrow('Invalid app info provided');
+    });
+
+    it('should store a copy of the data', async () => {
+      const appInfoCopy = { ...mockAppInfo };
+      await repository.saveAppInfo(mockAppInfo);
+      
+      // Modify original object
+      appInfoCopy.name = 'Modified';
+      
+      const savedInfo = await repository.getAppInfo();
+      expect(savedInfo.name).toBe('Test App'); // Should not be affected
+    });
+  });
+
+  describe('getAppInfo', () => {
+    it('should return saved app info', async () => {
+      await repository.saveAppInfo(mockAppInfo);
+      
+      const retrievedInfo = await repository.getAppInfo();
+      expect(retrievedInfo).toEqual(mockAppInfo);
+    });
+
+    it('should throw error when not initialized', async () => {
+      await expect(repository.getAppInfo()).rejects.toThrow('App info not initialized');
+    });
+
+    it('should return a copy of the data', async () => {
+      await repository.saveAppInfo(mockAppInfo);
+      
+      const retrievedInfo = await repository.getAppInfo();
+      
+      // Modify returned object
+      const modifiedInfo = { ...retrievedInfo };
+      modifiedInfo.name = 'Modified';
+      
+      // Get it again to verify original is unchanged
+      const retrievedInfo2 = await repository.getAppInfo();
+      expect(retrievedInfo2.name).toBe('Test App');
+    });
+
+    it('should throw error when destroyed', async () => {
+      await repository.saveAppInfo(mockAppInfo);
+      repository.destroy();
+      
+      await expect(repository.getAppInfo()).rejects.toThrow('Repository has been destroyed');
+    });
+  });
+
+  describe('updateAppInfo', () => {
+    beforeEach(async () => {
+      await repository.saveAppInfo(mockAppInfo);
+    });
+
+    it('should update app info successfully', async () => {
+      const updates = { name: 'Updated App', version: '2.0.0' };
+      
+      const updatedInfo = await repository.updateAppInfo(updates);
+      
+      expect(updatedInfo.name).toBe('Updated App');
+      expect(updatedInfo.version).toBe('2.0.0');
+      expect(updatedInfo.description).toBe('Test Description'); // Unchanged
+      expect(updatedInfo.developer).toBe('Test Developer'); // Unchanged
+    });
+
+    it('should throw error when not initialized', async () => {
+      const newRepository = new AboutRepository();
+      
+      await expect(newRepository.updateAppInfo({ name: 'Test' })).rejects.toThrow('App info not initialized');
+    });
+
+    it('should throw error for invalid updates', async () => {
+      await expect(repository.updateAppInfo(null as unknown)).rejects.toThrow('Invalid updates provided');
+      await expect(repository.updateAppInfo(undefined as unknown)).rejects.toThrow('Invalid updates provided');
+      await expect(repository.updateAppInfo('invalid' as unknown)).rejects.toThrow('Invalid updates provided');
+    });
+
+    it('should return a copy of the updated data', async () => {
+      const updates = { name: 'Updated App' };
+      
+      const updatedInfo = await repository.updateAppInfo(updates);
+      
+      // Modify returned object
+      const modifiedInfo = { ...updatedInfo };
+      modifiedInfo.name = 'Modified';
+      
+      // Get it again to verify original is unchanged
+      const updatedInfo2 = await repository.getAppInfo();
+      expect(updatedInfo2.name).toBe('Updated App');
+    });
+
+    it('should throw error when destroyed', async () => {
+      repository.destroy();
+      
+      await expect(repository.updateAppInfo({ name: 'Test' })).rejects.toThrow('Repository has been destroyed');
+    });
+  });
+
+  describe('destroy', () => {
+    it('should cleanup resources', async () => {
+      await repository.saveAppInfo(mockAppInfo);
+      
+      repository.destroy();
+      
+      await expect(repository.getAppInfo()).rejects.toThrow('Repository has been destroyed');
+      await expect(repository.updateAppInfo({ name: 'Test' })).rejects.toThrow('Repository has been destroyed');
+      await expect(repository.saveAppInfo(mockAppInfo)).rejects.toThrow('Repository has been destroyed');
+    });
+
+    it('should be safe to call multiple times', async () => {
+      await repository.saveAppInfo(mockAppInfo);
+      
+      repository.destroy();
+      repository.destroy(); // Should not throw
+      
+      await expect(repository.getAppInfo()).rejects.toThrow('Repository has been destroyed');
+    });
+  });
+});

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

@@ -0,0 +1,104 @@
+/**
+ * About Content Component
+ * Displays the list of about items organized in sections
+ */
+import React from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import { AboutSettingItem } from './AboutSettingItem';
+import { AppInfo } from '../../domain/entities/AppInfo';
+import { AboutConfig } from '../../domain/entities/AppInfo';
+
+import { useResponsiveDesignTokens } from '@umituz/react-native-design-system';
+
+export interface AboutContentProps {
+  /** App information to display */
+  appInfo: AppInfo;
+  /** Configuration for actions */
+  config: AboutConfig;
+}
+
+const AboutSectionHeader: React.FC<{ title: string }> = ({ title }) => {
+  const tokens = useResponsiveDesignTokens();
+  const colors = tokens.colors;
+
+  return (
+    <Text style={[styles.sectionHeader, { color: colors.textSecondary }]}>{title}</Text>
+  );
+};
+
+export const AboutContent: React.FC<AboutContentProps> = ({
+  appInfo,
+  config,
+}) => {
+  const hasContactInfo = appInfo.developer || appInfo.contactEmail || appInfo.websiteUrl;
+  const hasMoreInfo = appInfo.moreAppsUrl;
+
+  const texts = config.texts || {};
+
+  return (
+    <View style={styles.content}>
+      {hasContactInfo && (
+        <View style={styles.section}>
+          <AboutSectionHeader title={texts.contact || "Contact"} />
+
+          {appInfo.developer && (
+            <AboutSettingItem
+              title={texts.developer || "Developer"}
+              value={appInfo.developer}
+              testID="developer-item"
+            />
+          )}
+
+          {appInfo.contactEmail && (
+            <AboutSettingItem
+              title={texts.email || "Email"}
+              value={appInfo.contactEmail}
+              onPress={config.actions?.onEmailPress}
+              testID="email-item"
+              showChevron={!!config.actions?.onEmailPress}
+            />
+          )}
+
+          {appInfo.websiteUrl && (
+            <AboutSettingItem
+              title={texts.website || "Website"}
+              value={appInfo.websiteDisplay || appInfo.websiteUrl}
+              onPress={config.actions?.onWebsitePress}
+              testID="website-item"
+              showChevron={!!config.actions?.onWebsitePress}
+            />
+          )}
+        </View>
+      )}
+
+      {hasMoreInfo && (
+        <View style={styles.section}>
+          <AboutSectionHeader title={texts.more || "More"} />
+          <AboutSettingItem
+            title={texts.moreApps || "More Apps"}
+            onPress={config.actions?.onMoreAppsPress}
+            testID="more-apps-item"
+            showChevron={!!config.actions?.onMoreAppsPress}
+          />
+        </View>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  content: {
+    paddingVertical: 8,
+  },
+  section: {
+    marginBottom: 24,
+  },
+  sectionHeader: {
+    fontSize: 13,
+    fontWeight: '600',
+    marginBottom: 8,
+    paddingHorizontal: 16,
+    textTransform: 'uppercase',
+    letterSpacing: 0.5,
+  },
+});

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

@@ -0,0 +1,79 @@
+/**
+ * About Header Component
+ * Displays app name, version, and description
+ */
+import React from 'react';
+import {
+  View,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+import { AppInfo } from '../../domain/entities/AppInfo';
+
+export interface AboutHeaderProps {
+  /** App information to display */
+  appInfo: AppInfo;
+  /** Custom container style */
+  containerStyle?: ViewStyle;
+  /** Custom title style */
+  titleStyle?: TextStyle;
+  /** Custom version style */
+  versionStyle?: TextStyle;
+  descriptionStyle?: TextStyle;
+  versionPrefix?: string;
+  testID?: string;
+}
+
+import { useResponsiveDesignTokens } from '@umituz/react-native-design-system';
+
+export const AboutHeader: React.FC<AboutHeaderProps> = ({
+  appInfo,
+  containerStyle,
+  titleStyle,
+  versionStyle,
+  descriptionStyle,
+  versionPrefix = "Version",
+  testID,
+}) => {
+  const tokens = useResponsiveDesignTokens();
+  const colors = tokens.colors;
+
+  return (
+    <View style={[styles.header, { borderBottomColor: colors.border }, containerStyle]} testID={testID}>
+      <Text style={[styles.appName, { color: colors.textPrimary }, titleStyle]}>{appInfo.name}</Text>
+      <Text style={[styles.version, { color: colors.textSecondary }, versionStyle]}>
+        {versionPrefix} {appInfo.version}
+      </Text>
+      {appInfo.description && (
+        <Text style={[styles.description, { color: colors.textSecondary }, descriptionStyle]}>
+          {appInfo.description}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    alignItems: 'center',
+    paddingVertical: 24,
+    paddingHorizontal: 16,
+    borderBottomWidth: 1,
+  },
+  appName: {
+    fontSize: 24,
+    fontWeight: 'bold',
+    marginBottom: 4,
+  },
+  version: {
+    fontSize: 16,
+    marginBottom: 8,
+  },
+  description: {
+    fontSize: 14,
+    textAlign: 'center',
+    lineHeight: 20,
+  },
+});

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

@@ -0,0 +1,134 @@
+import React from 'react';
+import { View, Pressable, StyleSheet, ViewStyle } from 'react-native';
+import { useNavigation } from '@react-navigation/native';
+import { useResponsiveDesignTokens, AtomicIcon, AtomicText } from '@umituz/react-native-design-system';
+import { AboutConfig } from '../../domain/entities/AppInfo';
+
+export interface AboutSectionProps {
+    config?: AboutConfig;
+    onPress?: () => void;
+    containerStyle?: ViewStyle;
+    title?: string;
+    description?: string;
+    sectionTitle?: string;
+}
+
+export const AboutSection: React.FC<AboutSectionProps> = ({
+    config,
+    onPress,
+    containerStyle,
+    title: propsTitle,
+    description: propsDescription,
+    sectionTitle: propsSectionTitle,
+}) => {
+    const navigation = useNavigation();
+    const tokens = useResponsiveDesignTokens();
+    const colors = tokens.colors;
+
+    const route = config?.route || config?.defaultRoute || 'About';
+    const title = propsTitle || config?.title;
+    const description = propsDescription || config?.description;
+    const sectionTitle = propsSectionTitle || title;
+
+    const handlePress = () => {
+        if (onPress) {
+            onPress();
+        } else {
+            navigation.navigate(route as never);
+        }
+    };
+
+    if (!title) return null;
+
+    return (
+        <View style={[styles.sectionContainer, { backgroundColor: colors.surface }, containerStyle]}>
+            {!!sectionTitle && (
+                <View style={styles.headerContainer}>
+                    <AtomicText
+                        type="titleMedium"
+                        color="primary"
+                    >
+                        {sectionTitle}
+                    </AtomicText>
+                </View>
+            )}
+            <Pressable
+                style={({ pressed }) => [
+                    styles.itemContainer,
+                    {
+                        backgroundColor: pressed ? `${colors.primary}08` : 'transparent',
+                    },
+                ]}
+                onPress={handlePress}
+            >
+                <View style={styles.content}>
+                    <View
+                        style={[
+                            styles.iconContainer,
+                            { backgroundColor: `${colors.primary}15` },
+                        ]}
+                    >
+                        <AtomicIcon name="information-circle" size="lg" color="primary" />
+                    </View>
+                    <View style={styles.textContainer}>
+                        <AtomicText
+                            type="bodyLarge"
+                            color="primary"
+                            numberOfLines={1}
+                            style={{ marginBottom: 4 }}
+                        >
+                            {title}
+                        </AtomicText>
+                        {!!description && (
+                            <AtomicText
+                                type="bodyMedium"
+                                color="secondary"
+                                numberOfLines={2}
+                            >
+                                {description}
+                            </AtomicText>
+                        )}
+                    </View>
+                    <AtomicIcon name="chevron-right" size="md" color="secondary" />
+                </View>
+            </Pressable>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    sectionContainer: {
+        marginBottom: 16,
+        borderRadius: 12,
+        overflow: 'hidden',
+    },
+    headerContainer: {
+        paddingHorizontal: 16,
+        paddingTop: 16,
+        paddingBottom: 8,
+    },
+    itemContainer: {
+        flexDirection: 'row',
+        alignItems: 'center',
+        paddingHorizontal: 16,
+        paddingVertical: 16,
+        minHeight: 72,
+    },
+    content: {
+        flex: 1,
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    iconContainer: {
+        width: 48,
+        height: 48,
+        borderRadius: 12,
+        justifyContent: 'center',
+        alignItems: 'center',
+        marginRight: 16,
+    },
+    textContainer: {
+        flex: 1,
+        marginRight: 8,
+    },
+});

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

@@ -0,0 +1,208 @@
+/**
+ * About Setting Item Component
+ * Reusable setting item for about screen
+ * Fully configurable and generic
+ * Optimized for performance and memory safety
+ */
+import React, { useMemo, useCallback } from 'react';
+import {
+  TouchableOpacity,
+  View,
+  Text,
+  StyleSheet,
+  ViewStyle,
+  TextStyle,
+} from 'react-native';
+
+export interface AboutSettingItemProps {
+  /** Icon component (any React component) */
+  icon?: React.ReactNode;
+  /** Main title text */
+  title: string;
+  /** Optional description text */
+  description?: string;
+  /** Optional value to display on the right */
+  value?: string;
+  /** Callback when pressed */
+  onPress?: () => void;
+  /** Show chevron arrow on right */
+  showChevron?: boolean;
+  /** Custom container style */
+  containerStyle?: ViewStyle;
+  /** Custom title style */
+  titleStyle?: TextStyle;
+  /** Custom description style */
+  descriptionStyle?: TextStyle;
+  /** Custom value style */
+  valueStyle?: TextStyle;
+  /** Custom icon container style */
+  iconContainerStyle?: ViewStyle;
+  /** Make item look disabled */
+  disabled?: boolean;
+  /** Test ID for E2E testing */
+  testID?: string;
+  /** Custom chevron color */
+  chevronColor?: string;
+}
+
+import { useResponsiveDesignTokens } from '@umituz/react-native-design-system';
+
+export const AboutSettingItem: React.FC<AboutSettingItemProps> = ({
+  icon,
+  title,
+  description,
+  value,
+  onPress,
+  showChevron = !!onPress,
+  containerStyle,
+  titleStyle,
+  descriptionStyle,
+  valueStyle,
+  iconContainerStyle,
+  disabled = false,
+  testID,
+  chevronColor,
+}) => {
+  const tokens = useResponsiveDesignTokens();
+  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]);
+
+  // Memoize icon container styles
+  const iconContainerStyles = useMemo(() => {
+    return [
+      styles.iconContainer,
+      iconContainerStyle
+    ];
+  }, [iconContainerStyle]);
+
+  // Memoize chevron styles
+  const chevronStyles = useMemo(() => {
+    return [
+      styles.chevron,
+      { color: chevronColor || colors.textSecondary }
+    ];
+  }, [chevronColor, colors.textSecondary]);
+
+  // 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;
+    }
+
+    return (
+      <View style={iconContainerStyles}>
+        {icon}
+      </View>
+    );
+  }, [icon, iconContainerStyles]);
+
+  // Memoize content rendering
+  const renderContent = useMemo(() => {
+    return (
+      <View style={styles.content}>
+        <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]);
+
+  // 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]);
+
+  // Memoize chevron rendering
+  const renderChevron = useMemo(() => {
+    if (!showChevron) {
+      return null;
+    }
+
+    return (
+      <Text style={chevronStyles}>›</Text>
+    );
+  }, [showChevron, chevronStyles]);
+
+  return (
+    <Container
+      style={containerStyles}
+      onPress={handlePress}
+      disabled={disabled}
+      testID={testID}
+    >
+      {renderIcon}
+      {renderContent}
+      {renderValue}
+      {renderChevron}
+    </Container>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    paddingVertical: 12,
+    paddingHorizontal: 16,
+  },
+  disabled: {
+    opacity: 0.5,
+  },
+  iconContainer: {
+    marginRight: 12,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  content: {
+    flex: 1,
+  },
+  title: {
+    fontSize: 16,
+    fontWeight: '500',
+  },
+  description: {
+    fontSize: 14,
+    marginTop: 2,
+  },
+  value: {
+    fontSize: 16,
+    marginRight: 8,
+    flexShrink: 1,
+    textAlign: 'right',
+    maxWidth: '60%',
+  },
+  chevron: {
+    fontSize: 20,
+    fontWeight: '300',
+  },
+});