@umituz/react-native-settings 4.19.2 → 4.19.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.19.2",
+  "version": "4.19.3",
   "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",
@@ -88,4 +88,4 @@
     "@react-native-firebase/firestore": "^23.7.0",
     "firebase": "^12.7.0"
   }
-}
+}

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

@@ -1,12 +1,8 @@
 import React from 'react';
-import { View, StyleSheet, ViewStyle } from 'react-native';
+import { ViewStyle } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import {
-    useResponsiveDesignTokens,
-    AtomicText,
-    ListItem
-} from '@umituz/react-native-design-system';
 import { AboutConfig } from '../../domain/entities/AppInfo';
+import { SettingsItemCard } from '../../../../presentation/components/SettingsItemCard';
 
 export interface AboutSectionProps {
     config?: AboutConfig;
@@ -26,12 +22,11 @@ export const AboutSection: React.FC<AboutSectionProps> = ({
     sectionTitle: propsSectionTitle,
 }) => {
     const navigation = useNavigation();
-    const tokens = useResponsiveDesignTokens();
 
     const route = config?.route || config?.defaultRoute || 'About';
     const title = propsTitle || config?.title;
     const description = propsDescription || config?.description;
-    const sectionTitle = propsSectionTitle || title;
+    const sectionTitle = propsSectionTitle;
 
     const handlePress = () => {
         if (onPress) {
@@ -44,34 +39,13 @@ export const AboutSection: React.FC<AboutSectionProps> = ({
     if (!title) return null;
 
     return (
-        <View style={[styles.sectionContainer, { backgroundColor: tokens.colors.surface }, containerStyle]}>
-            {!!sectionTitle && (
-                <View style={styles.headerContainer}>
-                    <AtomicText type="titleMedium" color="primary">
-                        {sectionTitle}
-                    </AtomicText>
-                </View>
-            )}
-            <ListItem
-                title={title}
-                subtitle={description}
-                leftIcon="information-circle"
-                rightIcon="chevron-forward"
-                onPress={handlePress}
-            />
-        </View>
+        <SettingsItemCard
+            title={title}
+            description={description}
+            icon="information-circle-outline"
+            onPress={handlePress}
+            containerStyle={containerStyle}
+            sectionTitle={sectionTitle}
+        />
     );
 };
-
-const styles = StyleSheet.create({
-    sectionContainer: {
-        marginBottom: 16,
-        borderRadius: 12,
-        overflow: 'hidden',
-    },
-    headerContainer: {
-        paddingHorizontal: 16,
-        paddingTop: 16,
-        paddingBottom: 8,
-    },
-});

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

@@ -1,8 +1,8 @@
 import React from 'react';
-import { View, Pressable, StyleSheet, ViewStyle } from 'react-native';
+import { ViewStyle } from 'react-native';
 import { useNavigation } from '@react-navigation/native';
-import { useResponsiveDesignTokens, AtomicIcon, AtomicText } from '@umituz/react-native-design-system';
 import { LegalConfig } from '../../domain/entities/LegalConfig';
+import { SettingsItemCard } from '../../../../presentation/components/SettingsItemCard';
 
 export interface LegalSectionProps {
     config?: LegalConfig;
@@ -22,13 +22,11 @@ export const LegalSection: React.FC<LegalSectionProps> = ({
     sectionTitle: propsSectionTitle,
 }) => {
     const navigation = useNavigation();
-    const tokens = useResponsiveDesignTokens();
-    const colors = tokens.colors;
 
     const route = config?.route || config?.defaultRoute || 'Legal';
     const title = propsTitle || config?.title;
     const description = propsDescription || config?.description;
-    const sectionTitle = propsSectionTitle || title;
+    const sectionTitle = propsSectionTitle;
 
     const handlePress = () => {
         if (onPress) {
@@ -41,94 +39,13 @@ export const LegalSection: React.FC<LegalSectionProps> = ({
     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="document-text" 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-forward" size="md" color="secondary" />
-                </View>
-            </Pressable>
-        </View>
+        <SettingsItemCard
+            title={title}
+            description={description}
+            icon="document-text-outline"
+            onPress={handlePress}
+            containerStyle={containerStyle}
+            sectionTitle={sectionTitle}
+        />
     );
 };
-
-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/presentation/components/SettingItem.tsx

@@ -4,8 +4,8 @@ import {
   AtomicIcon,
   AtomicText,
   useResponsiveDesignTokens,
-  ListItem
 } from "@umituz/react-native-design-system";
+import { SettingsItemCard } from "./SettingsItemCard";
 
 export interface SettingItemProps {
   icon: string;
@@ -104,19 +104,14 @@ export const SettingItem: React.FC<SettingItemProps> = ({
     );
   }
 
-  // Use design system's ListItem for regular items
+  // Use SettingsItemCard for regular items
   return (
-    <ListItem
+    <SettingsItemCard
       title={title}
-      subtitle={value}
-      leftIcon={icon}
-      rightIcon="chevron-forward"
-      onPress={onPress}
-      disabled={disabled}
-      style={{
-        borderBottomWidth: isLast ? 0 : 1,
-        borderBottomColor: `${tokens.colors.onSurface}10`,
-      }}
+      description={value}
+      icon={icon as any}
+      onPress={onPress || (() => { })}
+      iconColor={iconColor}
     />
   );
 };