@umituz/react-native-settings 4.23.27 → 4.23.28

package/package.json

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

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

@@ -11,8 +11,11 @@ export interface AboutSectionProps {
     title?: string;
     description?: string;
     sectionTitle?: string;
+    noBackground?: boolean;
+    hideMargin?: boolean;
 }
 
+
 export const AboutSection: React.FC<AboutSectionProps> = ({
     config,
     onPress,
@@ -20,7 +23,10 @@ export const AboutSection: React.FC<AboutSectionProps> = ({
     title: propsTitle,
     description: propsDescription,
     sectionTitle: propsSectionTitle,
+    noBackground,
+    hideMargin,
 }) => {
+
     const navigation = useAppNavigation();
 
     const route = config?.route || config?.defaultRoute || 'About';
@@ -48,6 +54,9 @@ export const AboutSection: React.FC<AboutSectionProps> = ({
             onPress={handlePress}
             containerStyle={containerStyle}
             sectionTitle={sectionTitle}
+            noBackground={noBackground}
+            hideMargin={hideMargin}
         />
     );
 };
+

package/src/domains/appearance/presentation/components/AppearanceSection.tsx

@@ -13,8 +13,11 @@ export interface AppearanceSectionProps {
     title?: string;
     /** Optional explicit description override */
     description?: string;
+    noBackground?: boolean;
+    hideMargin?: boolean;
 }
 
+
 export const AppearanceSection: React.FC<AppearanceSectionProps> = ({
     config,
     onPress,
@@ -22,7 +25,10 @@ export const AppearanceSection: React.FC<AppearanceSectionProps> = ({
     sectionTitle,
     title: titleProp,
     description: descriptionProp,
+    noBackground,
+    hideMargin,
 }) => {
+
     const navigation = useAppNavigation();
 
     const route = config?.route || config?.defaultRoute || 'Appearance';
@@ -49,7 +55,10 @@ export const AppearanceSection: React.FC<AppearanceSectionProps> = ({
             onPress={handlePress}
             containerStyle={containerStyle}
             sectionTitle={sectionTitle}
+            noBackground={noBackground}
+            hideMargin={hideMargin}
         />
     );
 };
 
+

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

@@ -11,8 +11,11 @@ export interface LegalSectionProps {
     title?: string;
     description?: string;
     sectionTitle?: string;
+    noBackground?: boolean;
+    hideMargin?: boolean;
 }
 
+
 export const LegalSection: React.FC<LegalSectionProps> = ({
     config,
     onPress,
@@ -20,7 +23,10 @@ export const LegalSection: React.FC<LegalSectionProps> = ({
     title: propsTitle,
     description: propsDescription,
     sectionTitle: propsSectionTitle,
+    noBackground,
+    hideMargin,
 }) => {
+
     const navigation = useAppNavigation();
 
     const route = config?.route || config?.defaultRoute || 'Legal';
@@ -48,6 +54,9 @@ export const LegalSection: React.FC<LegalSectionProps> = ({
             onPress={handlePress}
             containerStyle={containerStyle}
             sectionTitle={sectionTitle}
+            noBackground={noBackground}
+            hideMargin={hideMargin}
         />
     );
 };
+

package/src/domains/notifications/presentation/components/NotificationsSection.tsx

@@ -1,15 +1,8 @@
-/**
- * NotificationsSection Component
- * Settings section for notifications - navigates to full screen
- */
-
-import React, { useCallback, useMemo } from 'react';
+import React, { useCallback } from 'react';
 import type { StyleProp, ViewStyle } from 'react-native';
-import { View, TouchableOpacity, StyleSheet } from 'react-native';
-import { AtomicText, AtomicIcon, useAppNavigation } from '@umituz/react-native-design-system';
-import { useAppDesignTokens } from '@umituz/react-native-design-system';
-// @ts-ignore - Optional peer dependency
+import { useAppNavigation } from '@umituz/react-native-design-system';
 import { useLocalization } from '@umituz/react-native-localization';
+import { SettingsItemCard } from '../../../../presentation/components/SettingsItemCard';
 
 export interface NotificationsSectionConfig {
   route?: string;
@@ -22,16 +15,18 @@ export interface NotificationsSectionConfig {
 export interface NotificationsSectionProps {
   config?: NotificationsSectionConfig;
   containerStyle?: StyleProp<ViewStyle>;
+  noBackground?: boolean;
+  hideMargin?: boolean;
 }
 
 export const NotificationsSection: React.FC<NotificationsSectionProps> = ({
   config,
   containerStyle,
+  noBackground,
+  hideMargin,
 }) => {
   const navigation = useAppNavigation();
   const { t } = useLocalization();
-  const tokens = useAppDesignTokens();
-  const styles = useMemo(() => createStyles(tokens), [tokens]);
 
   const handlePress = useCallback(() => {
     if (config?.onPress) {
@@ -44,44 +39,17 @@ export const NotificationsSection: React.FC<NotificationsSectionProps> = ({
 
   const title = config?.title || t('settings.notifications.title');
   const description = config?.description || t('settings.notifications.description');
-  const sectionTitle = config?.sectionTitle || t('settings.notifications.sectionTitle');
 
   return (
-    <View style={[styles.container, containerStyle]}>
-      <AtomicText type="bodyLarge" style={styles.sectionTitle}>{sectionTitle}</AtomicText>
-
-      <TouchableOpacity
-        style={styles.itemContainer}
-        onPress={handlePress}
-        activeOpacity={0.7}
-      >
-        <View style={styles.iconContainer}>
-          <AtomicIcon name="notifications" size="md" color="primary" />
-        </View>
-        <View style={styles.textContainer}>
-          <AtomicText type="bodyLarge">{title}</AtomicText>
-          <AtomicText type="bodySmall" style={styles.description}>{description}</AtomicText>
-        </View>
-        <AtomicIcon name="chevron-forward" size="md" color="secondary" />
-      </TouchableOpacity>
-    </View>
+    <SettingsItemCard
+      title={title}
+      description={description}
+      icon="notifications"
+      onPress={handlePress}
+      containerStyle={containerStyle}
+      noBackground={noBackground}
+      hideMargin={hideMargin}
+    />
   );
 };
 
-const createStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
-  StyleSheet.create({
-    container: { marginBottom: 16, borderRadius: 12, overflow: 'hidden', backgroundColor: tokens.colors.surface },
-    sectionTitle: { fontWeight: '600', paddingHorizontal: 16, paddingTop: 16, paddingBottom: 8 },
-    itemContainer: { flexDirection: 'row', alignItems: 'center', paddingHorizontal: 16, paddingVertical: 16, minHeight: 72 },
-    iconContainer: {
-      width: 48,
-      height: 48,
-      borderRadius: 12,
-      justifyContent: 'center',
-      alignItems: 'center',
-      marginRight: 16,
-      backgroundColor: tokens.colors.surfaceSecondary,
-    },
-    textContainer: { flex: 1, marginRight: 8 },
-    description: { color: tokens.colors.textSecondary, marginTop: 4 },
-  });

package/src/presentation/components/SettingsItemCard.tsx

@@ -24,8 +24,11 @@ export interface SettingsItemCardProps {
     switchValue?: boolean;
     onSwitchChange?: (value: boolean) => void;
     disabled?: boolean;
+    noBackground?: boolean;
+    hideMargin?: boolean;
 }
 
+
 export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
     title,
     description,
@@ -41,7 +44,10 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
     switchValue,
     onSwitchChange,
     disabled = false,
+    noBackground = false,
+    hideMargin = false,
 }) => {
+
     const tokens = useAppDesignTokens();
     const colors = tokens.colors;
 
@@ -95,12 +101,15 @@ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
             style={[
                 styles.sectionContainer,
                 { 
-                    backgroundColor: colors.surface,
-                    borderRadius: tokens.borders.radius.lg,
+                    backgroundColor: noBackground ? "transparent" : colors.surface,
+                    borderRadius: noBackground ? 0 : tokens.borders.radius.lg,
                 },
+                hideMargin && { marginBottom: 0 },
                 containerStyle,
             ]}
         >
+
+
             {!!sectionTitle && (
                 <View style={styles.headerContainer}>
                     <AtomicText type="labelMedium" color="textSecondary" style={{ textTransform: 'uppercase' }}>

package/src/presentation/screens/components/sections/FeatureSettingsSection.tsx

@@ -6,6 +6,8 @@ import { useLocalization, getLanguageByCode } from "@umituz/react-native-localiz
 import { SettingsItemCard } from "../../../components/SettingsItemCard";
 import type { NormalizedConfig } from "../../utils/normalizeConfig";
 
+import { SettingsSection } from "../../../components/SettingsSection";
+
 interface FeatureSettingsSectionProps {
   normalizedConfig: NormalizedConfig;
   features: {
@@ -26,18 +28,24 @@ export const FeatureSettingsSection: React.FC<FeatureSettingsSectionProps> = ({
     if (normalizedConfig.language.config?.onPress) {
       normalizedConfig.language.config.onPress();
     } else {
-      const route = normalizedConfig.language.config?.route || "LanguageSelection";
+      const route =
+        normalizedConfig.language.config?.route || "LanguageSelection";
       navigation.navigate(route as never);
     }
   };
 
   const currentLanguageData = getLanguageByCode(currentLanguage);
-  const languageDisplayName = currentLanguageData 
+  const languageDisplayName = currentLanguageData
     ? `${currentLanguageData.flag} ${currentLanguageData.nativeName}`
     : currentLanguage;
 
+  if (!features.appearance && !features.language && !features.notifications)
+    return null;
+
   return (
-    <>
+    <SettingsSection
+      title={t("settings.sections.app.title") || t("settings.sections.app") || "App Settings"}
+    >
       {features.appearance && (
         <AppearanceSection
           config={{
@@ -45,7 +53,8 @@ export const FeatureSettingsSection: React.FC<FeatureSettingsSectionProps> = ({
             title: t("settings.appearance.title"),
             description: t("settings.appearance.description"),
           }}
-          sectionTitle={t("settings.appearance.title")}
+          noBackground={true}
+          hideMargin={true}
         />
       )}
 
@@ -55,7 +64,8 @@ export const FeatureSettingsSection: React.FC<FeatureSettingsSectionProps> = ({
           description={languageDisplayName}
           icon="globe-outline"
           onPress={handleLanguagePress}
-          sectionTitle={t("settings.languageSelection.title")}
+          noBackground={true}
+          hideMargin={true}
         />
       )}
 
@@ -66,8 +76,12 @@ export const FeatureSettingsSection: React.FC<FeatureSettingsSectionProps> = ({
             title: t("settings.notifications.title"),
             description: t("settings.notifications.description"),
           }}
+          noBackground={true}
+          hideMargin={true}
         />
       )}
-    </>
+
+    </SettingsSection>
   );
 };
+

package/src/presentation/screens/components/sections/IdentitySettingsSection.tsx

@@ -4,6 +4,8 @@ import { LegalSection } from "../../../../domains/legal/presentation/components/
 import { useLocalization } from "@umituz/react-native-localization";
 import type { NormalizedConfig } from "../../utils/normalizeConfig";
 
+import { SettingsSection } from "../../../components/SettingsSection";
+
 interface IdentitySettingsSectionProps {
     normalizedConfig: NormalizedConfig;
     features: any;
@@ -15,8 +17,10 @@ export const IdentitySettingsSection: React.FC<IdentitySettingsSectionProps> = (
 }) => {
     const { t } = useLocalization();
 
+    if (!features.about && !features.legal) return null;
+
     return (
-        <>
+        <SettingsSection title={t("settings.about.title")}>
             {features.about && (
                 <AboutSection
                     config={{
@@ -24,7 +28,8 @@ export const IdentitySettingsSection: React.FC<IdentitySettingsSectionProps> = (
                         title: t("settings.about.title"),
                         description: t("settings.about.description"),
                     }}
-                    sectionTitle={t("settings.about.title")}
+                    noBackground={true}
+                    hideMargin={true}
                 />
             )}
 
@@ -35,9 +40,12 @@ export const IdentitySettingsSection: React.FC<IdentitySettingsSectionProps> = (
                         title: t("settings.legal.title"),
                         description: t("settings.legal.description"),
                     }}
-                    sectionTitle={t("settings.legal.title")}
+                    noBackground={true}
+                    hideMargin={true}
                 />
             )}
-        </>
+        </SettingsSection>
     );
 };
+
+

package/src/presentation/screens/components/sections/SupportSettingsSection.tsx

@@ -28,7 +28,15 @@ export const SupportSettingsSection: React.FC<SupportSettingsSectionProps> = ({
             {(features.feedback || features.rating) && (
                 <SupportSection
                     renderSection={(props: any) => <>{props.children}</>}
-                    renderItem={(props: any) => <SettingsItemCard title={props.title} icon={props.icon} onPress={props.onPress} />}
+                    renderItem={(props: any) => (
+                        <SettingsItemCard 
+                            title={props.title} 
+                            icon={props.icon} 
+                            onPress={props.onPress} 
+                            noBackground={true}
+                            hideMargin={true}
+                        />
+                    )}
                     feedbackConfig={{
                         enabled: features.feedback,
                         config: {
@@ -78,8 +86,11 @@ export const SupportSettingsSection: React.FC<SupportSettingsSectionProps> = ({
                     description={normalizedConfig.faqs.config?.description || t("settings.faqs.description")}
                     icon="help-circle-outline"
                     onPress={handleFAQPress}
+                    noBackground={true}
+                    hideMargin={true}
                 />
             )}
         </SettingsSection>
     );
 };
+