@umituz/react-native-settings 4.19.1 → 4.19.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/package.json +1 -1
  2. package/src/domains/about/presentation/components/AboutSection.tsx +11 -37
  3. package/src/domains/appearance/presentation/components/AppearanceSection.tsx +10 -96
  4. package/src/domains/legal/presentation/components/LegalSection.tsx +11 -94
  5. package/src/index.ts +3 -0
  6. package/src/presentation/components/SettingItem.tsx +7 -12
  7. package/src/presentation/components/SettingsItemCard.tsx +139 -0
  8. package/src/presentation/screens/components/sections/FeatureSettingsSection.tsx +15 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@umituz/react-native-settings",
3
- "version": "4.19.1",
3
+ "version": "4.19.3",
4
4
  "description": "Complete settings hub for React Native apps - consolidated package with settings, about, legal, appearance, feedback, FAQs, and rating",
5
5
  "main": "./src/index.ts",
6
6
  "types": "./src/index.ts",
package/src/domains/about/presentation/components/AboutSection.tsx CHANGED
@@ -1,12 +1,8 @@
1
1
  import React from 'react';
2
- import { View, StyleSheet, ViewStyle } from 'react-native';
2
+ import { ViewStyle } from 'react-native';
3
3
  import { useNavigation } from '@react-navigation/native';
4
- import {
5
- useResponsiveDesignTokens,
6
- AtomicText,
7
- ListItem
8
- } from '@umituz/react-native-design-system';
9
4
  import { AboutConfig } from '../../domain/entities/AppInfo';
5
+ import { SettingsItemCard } from '../../../../presentation/components/SettingsItemCard';
10
6
 
11
7
  export interface AboutSectionProps {
12
8
  config?: AboutConfig;
@@ -26,12 +22,11 @@ export const AboutSection: React.FC<AboutSectionProps> = ({
26
22
  sectionTitle: propsSectionTitle,
27
23
  }) => {
28
24
  const navigation = useNavigation();
29
- const tokens = useResponsiveDesignTokens();
30
25
 
31
26
  const route = config?.route || config?.defaultRoute || 'About';
32
27
  const title = propsTitle || config?.title;
33
28
  const description = propsDescription || config?.description;
34
- const sectionTitle = propsSectionTitle || title;
29
+ const sectionTitle = propsSectionTitle;
35
30
 
36
31
  const handlePress = () => {
37
32
  if (onPress) {
@@ -44,34 +39,13 @@ export const AboutSection: React.FC<AboutSectionProps> = ({
44
39
  if (!title) return null;
45
40
 
46
41
  return (
47
- <View style={[styles.sectionContainer, { backgroundColor: tokens.colors.surface }, containerStyle]}>
48
- {!!sectionTitle && (
49
- <View style={styles.headerContainer}>
50
- <AtomicText type="titleMedium" color="primary">
51
- {sectionTitle}
52
- </AtomicText>
53
- </View>
54
- )}
55
- <ListItem
56
- title={title}
57
- subtitle={description}
58
- leftIcon="information-circle"
59
- rightIcon="chevron-forward"
60
- onPress={handlePress}
61
- />
62
- </View>
42
+ <SettingsItemCard
43
+ title={title}
44
+ description={description}
45
+ icon="information-circle-outline"
46
+ onPress={handlePress}
47
+ containerStyle={containerStyle}
48
+ sectionTitle={sectionTitle}
49
+ />
63
50
  );
64
51
  };
65
-
66
- const styles = StyleSheet.create({
67
- sectionContainer: {
68
- marginBottom: 16,
69
- borderRadius: 12,
70
- overflow: 'hidden',
71
- },
72
- headerContainer: {
73
- paddingHorizontal: 16,
74
- paddingTop: 16,
75
- paddingBottom: 8,
76
- },
77
- });
package/src/domains/appearance/presentation/components/AppearanceSection.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
- import { View, Pressable, StyleSheet, ViewStyle } from 'react-native';
2
+ import { ViewStyle } from 'react-native';
3
3
  import { useNavigation } from '@react-navigation/native';
4
- import { useResponsiveDesignTokens, AtomicIcon, AtomicText } from '@umituz/react-native-design-system';
5
4
  import { AppearanceSectionConfig } from '../../types';
5
+ import { SettingsItemCard } from '../../../../presentation/components/SettingsItemCard';
6
6
 
7
7
  export interface AppearanceSectionProps {
8
8
  config?: AppearanceSectionConfig;
@@ -24,17 +24,11 @@ export const AppearanceSection: React.FC<AppearanceSectionProps> = ({
24
24
  description: descriptionProp,
25
25
  }) => {
26
26
  const navigation = useNavigation();
27
- const tokens = useResponsiveDesignTokens();
28
- const colors = tokens.colors;
29
27
 
30
28
  const route = config?.route || config?.defaultRoute || 'Appearance';
31
- // Use props first, then config, then strict empty string to avoid hardcoded English
32
29
  const title = titleProp || config?.title;
33
30
  const description = descriptionProp || config?.description;
34
31
 
35
- // Only display section title if provided
36
- const displaySectionTitle = sectionTitle || title;
37
-
38
32
  const handlePress = () => {
39
33
  if (onPress) {
40
34
  onPress();
@@ -46,94 +40,14 @@ export const AppearanceSection: React.FC<AppearanceSectionProps> = ({
46
40
  if (!title) return null;
47
41
 
48
42
  return (
49
- <View style={[styles.sectionContainer, { backgroundColor: colors.surface }, containerStyle]}>
50
- {!!displaySectionTitle && (
51
- <View style={styles.headerContainer}>
52
- <AtomicText
53
- type="titleMedium"
54
- color="primary"
55
- >
56
- {displaySectionTitle}
57
- </AtomicText>
58
- </View>
59
- )}
60
- <Pressable
61
- style={({ pressed }) => [
62
- styles.itemContainer,
63
- {
64
- backgroundColor: pressed ? `${colors.primary}08` : 'transparent',
65
- },
66
- ]}
67
- onPress={handlePress}
68
- >
69
- <View style={styles.content}>
70
- <View
71
- style={[
72
- styles.iconContainer,
73
- { backgroundColor: `${colors.primary}15` },
74
- ]}
75
- >
76
- <AtomicIcon name="color-palette" size="lg" color="primary" />
77
- </View>
78
- <View style={styles.textContainer}>
79
- <AtomicText
80
- type="bodyLarge"
81
- color="primary"
82
- numberOfLines={1}
83
- style={{ marginBottom: 4 }}
84
- >
85
- {title}
86
- </AtomicText>
87
- {!!description && (
88
- <AtomicText
89
- type="bodyMedium"
90
- color="secondary"
91
- numberOfLines={2}
92
- >
93
- {description}
94
- </AtomicText>
95
- )}
96
- </View>
97
- <AtomicIcon name="chevron-forward" size="md" color="secondary" />
98
- </View>
99
- </Pressable>
100
- </View>
43
+ <SettingsItemCard
44
+ title={title}
45
+ description={description}
46
+ icon="color-palette"
47
+ onPress={handlePress}
48
+ containerStyle={containerStyle}
49
+ sectionTitle={sectionTitle}
50
+ />
101
51
  );
102
52
  };
103
53
 
104
- const styles = StyleSheet.create({
105
- sectionContainer: {
106
- marginBottom: 16,
107
- borderRadius: 12,
108
- overflow: 'hidden',
109
- },
110
- headerContainer: {
111
- paddingHorizontal: 16,
112
- paddingTop: 16,
113
- paddingBottom: 8,
114
- },
115
- itemContainer: {
116
- flexDirection: 'row',
117
- alignItems: 'center',
118
- paddingHorizontal: 16,
119
- paddingVertical: 16,
120
- minHeight: 72,
121
- },
122
- content: {
123
- flex: 1,
124
- flexDirection: 'row',
125
- alignItems: 'center',
126
- },
127
- iconContainer: {
128
- width: 48,
129
- height: 48,
130
- borderRadius: 12,
131
- justifyContent: 'center',
132
- alignItems: 'center',
133
- marginRight: 16,
134
- },
135
- textContainer: {
136
- flex: 1,
137
- marginRight: 8,
138
- },
139
- });
package/src/domains/legal/presentation/components/LegalSection.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import React from 'react';
2
- import { View, Pressable, StyleSheet, ViewStyle } from 'react-native';
2
+ import { ViewStyle } from 'react-native';
3
3
  import { useNavigation } from '@react-navigation/native';
4
- import { useResponsiveDesignTokens, AtomicIcon, AtomicText } from '@umituz/react-native-design-system';
5
4
  import { LegalConfig } from '../../domain/entities/LegalConfig';
5
+ import { SettingsItemCard } from '../../../../presentation/components/SettingsItemCard';
6
6
 
7
7
  export interface LegalSectionProps {
8
8
  config?: LegalConfig;
@@ -22,13 +22,11 @@ export const LegalSection: React.FC<LegalSectionProps> = ({
22
22
  sectionTitle: propsSectionTitle,
23
23
  }) => {
24
24
  const navigation = useNavigation();
25
- const tokens = useResponsiveDesignTokens();
26
- const colors = tokens.colors;
27
25
 
28
26
  const route = config?.route || config?.defaultRoute || 'Legal';
29
27
  const title = propsTitle || config?.title;
30
28
  const description = propsDescription || config?.description;
31
- const sectionTitle = propsSectionTitle || title;
29
+ const sectionTitle = propsSectionTitle;
32
30
 
33
31
  const handlePress = () => {
34
32
  if (onPress) {
@@ -41,94 +39,13 @@ export const LegalSection: React.FC<LegalSectionProps> = ({
41
39
  if (!title) return null;
42
40
 
43
41
  return (
44
- <View style={[styles.sectionContainer, { backgroundColor: colors.surface }, containerStyle]}>
45
- {!!sectionTitle && (
46
- <View style={styles.headerContainer}>
47
- <AtomicText
48
- type="titleMedium"
49
- color="primary"
50
- >
51
- {sectionTitle}
52
- </AtomicText>
53
- </View>
54
- )}
55
- <Pressable
56
- style={({ pressed }) => [
57
- styles.itemContainer,
58
- {
59
- backgroundColor: pressed ? `${colors.primary}08` : 'transparent',
60
- },
61
- ]}
62
- onPress={handlePress}
63
- >
64
- <View style={styles.content}>
65
- <View
66
- style={[
67
- styles.iconContainer,
68
- { backgroundColor: `${colors.primary}15` },
69
- ]}
70
- >
71
- <AtomicIcon name="document-text" size="lg" color="primary" />
72
- </View>
73
- <View style={styles.textContainer}>
74
- <AtomicText
75
- type="bodyLarge"
76
- color="primary"
77
- numberOfLines={1}
78
- style={{ marginBottom: 4 }}
79
- >
80
- {title}
81
- </AtomicText>
82
- {!!description && (
83
- <AtomicText
84
- type="bodyMedium"
85
- color="secondary"
86
- numberOfLines={2}
87
- >
88
- {description}
89
- </AtomicText>
90
- )}
91
- </View>
92
- <AtomicIcon name="chevron-forward" size="md" color="secondary" />
93
- </View>
94
- </Pressable>
95
- </View>
42
+ <SettingsItemCard
43
+ title={title}
44
+ description={description}
45
+ icon="document-text-outline"
46
+ onPress={handlePress}
47
+ containerStyle={containerStyle}
48
+ sectionTitle={sectionTitle}
49
+ />
96
50
  );
97
51
  };
98
-
99
- const styles = StyleSheet.create({
100
- sectionContainer: {
101
- marginBottom: 16,
102
- borderRadius: 12,
103
- overflow: 'hidden',
104
- },
105
- headerContainer: {
106
- paddingHorizontal: 16,
107
- paddingTop: 16,
108
- paddingBottom: 8,
109
- },
110
- itemContainer: {
111
- flexDirection: 'row',
112
- alignItems: 'center',
113
- paddingHorizontal: 16,
114
- paddingVertical: 16,
115
- minHeight: 72,
116
- },
117
- content: {
118
- flex: 1,
119
- flexDirection: 'row',
120
- alignItems: 'center',
121
- },
122
- iconContainer: {
123
- width: 48,
124
- height: 48,
125
- borderRadius: 12,
126
- justifyContent: 'center',
127
- alignItems: 'center',
128
- marginRight: 16,
129
- },
130
- textContainer: {
131
- flex: 1,
132
- marginRight: 8,
133
- },
134
- });
package/src/index.ts CHANGED
@@ -72,6 +72,9 @@ export type {
72
72
  export { SettingItem } from './presentation/components/SettingItem';
73
73
  export type { SettingItemProps } from './presentation/components/SettingItem';
74
74
 
75
+ export { SettingsItemCard } from './presentation/components/SettingsItemCard';
76
+ export type { SettingsItemCardProps } from './presentation/components/SettingsItemCard';
77
+
75
78
  export { SettingsSection } from './presentation/components/SettingsSection';
76
79
  export type { SettingsSectionProps } from './presentation/components/SettingsSection';
77
80
 
package/src/presentation/components/SettingItem.tsx CHANGED
@@ -4,8 +4,8 @@ import {
4
4
  AtomicIcon,
5
5
  AtomicText,
6
6
  useResponsiveDesignTokens,
7
- ListItem
8
7
  } from "@umituz/react-native-design-system";
8
+ import { SettingsItemCard } from "./SettingsItemCard";
9
9
 
10
10
  export interface SettingItemProps {
11
11
  icon: string;
@@ -104,19 +104,14 @@ export const SettingItem: React.FC<SettingItemProps> = ({
104
104
  );
105
105
  }
106
106
 
107
- // Use design system's ListItem for regular items
107
+ // Use SettingsItemCard for regular items
108
108
  return (
109
- <ListItem
109
+ <SettingsItemCard
110
110
  title={title}
111
- subtitle={value}
112
- leftIcon={icon}
113
- rightIcon="chevron-forward"
114
- onPress={onPress}
115
- disabled={disabled}
116
- style={{
117
- borderBottomWidth: isLast ? 0 : 1,
118
- borderBottomColor: `${tokens.colors.onSurface}10`,
119
- }}
111
+ description={value}
112
+ icon={icon as any}
113
+ onPress={onPress || (() => { })}
114
+ iconColor={iconColor}
120
115
  />
121
116
  );
122
117
  };
package/src/presentation/components/SettingsItemCard.tsx ADDED
@@ -0,0 +1,139 @@
1
+ import React from "react";
2
+ import { View, Pressable, StyleSheet, ViewStyle } from "react-native";
3
+ import {
4
+ useResponsiveDesignTokens,
5
+ AtomicIcon,
6
+ AtomicText,
7
+ type IconName,
8
+ } from "@umituz/react-native-design-system";
9
+
10
+ export interface SettingsItemCardProps {
11
+ /** Item title */
12
+ title: string;
13
+ /** Optional description or current value */
14
+ description?: string;
15
+ /** Icon name from AtomicIcon */
16
+ icon: IconName;
17
+ /** On press handler */
18
+ onPress: () => void;
19
+ /** Optional container style */
20
+ containerStyle?: ViewStyle;
21
+ /** Optional section title (shows above the card) */
22
+ sectionTitle?: string;
23
+ /** Optional right icon (defaults to chevron-forward) */
24
+ rightIcon?: IconName;
25
+ /** Optional icon background color (defaults to primary with opacity) */
26
+ iconBgColor?: string;
27
+ /** Optional icon color */
28
+ iconColor?: string;
29
+ }
30
+
31
+ /**
32
+ * SettingsItemCard
33
+ *
34
+ * A premium, consistent card for settings items used across all apps.
35
+ * Follows the visual style of the Appearance section.
36
+ */
37
+ export const SettingsItemCard: React.FC<SettingsItemCardProps> = ({
38
+ title,
39
+ description,
40
+ icon,
41
+ onPress,
42
+ containerStyle,
43
+ sectionTitle,
44
+ rightIcon = "chevron-forward",
45
+ iconBgColor,
46
+ iconColor,
47
+ }) => {
48
+ const tokens = useResponsiveDesignTokens();
49
+ const colors = tokens.colors;
50
+
51
+ const defaultIconBg = iconBgColor || `${colors.primary}15`;
52
+ const defaultIconColor = iconColor || colors.primary;
53
+
54
+ return (
55
+ <View
56
+ style={[
57
+ styles.sectionContainer,
58
+ { backgroundColor: colors.surface },
59
+ containerStyle,
60
+ ]}
61
+ >
62
+ {!!sectionTitle && (
63
+ <View style={styles.headerContainer}>
64
+ <AtomicText type="titleMedium" color="primary">
65
+ {sectionTitle}
66
+ </AtomicText>
67
+ </View>
68
+ )}
69
+ <Pressable
70
+ style={({ pressed }) => [
71
+ styles.itemContainer,
72
+ {
73
+ backgroundColor: pressed ? `${colors.primary}08` : "transparent",
74
+ },
75
+ ]}
76
+ onPress={onPress}
77
+ >
78
+ <View style={styles.content}>
79
+ <View style={[styles.iconContainer, { backgroundColor: defaultIconBg }]}>
80
+ <AtomicIcon name={icon} size="lg" customColor={defaultIconColor} />
81
+ </View>
82
+ <View style={styles.textContainer}>
83
+ <AtomicText
84
+ type="bodyLarge"
85
+ color="onSurface"
86
+ numberOfLines={1}
87
+ style={{ marginBottom: 4 }}
88
+ >
89
+ {title}
90
+ </AtomicText>
91
+ {!!description && (
92
+ <AtomicText type="bodyMedium" color="secondary" numberOfLines={2}>
93
+ {description}
94
+ </AtomicText>
95
+ )}
96
+ </View>
97
+ <AtomicIcon name={rightIcon} size="sm" color="secondary" />
98
+ </View>
99
+ </Pressable>
100
+ </View>
101
+ );
102
+ };
103
+
104
+ const styles = StyleSheet.create({
105
+ sectionContainer: {
106
+ marginBottom: 16,
107
+ borderRadius: 12,
108
+ overflow: "hidden",
109
+ },
110
+ headerContainer: {
111
+ paddingHorizontal: 16,
112
+ paddingTop: 16,
113
+ paddingBottom: 8,
114
+ },
115
+ itemContainer: {
116
+ flexDirection: "row",
117
+ alignItems: "center",
118
+ paddingHorizontal: 16,
119
+ paddingVertical: 16,
120
+ minHeight: 72,
121
+ },
122
+ content: {
123
+ flex: 1,
124
+ flexDirection: "row",
125
+ alignItems: "center",
126
+ },
127
+ iconContainer: {
128
+ width: 48,
129
+ height: 48,
130
+ borderRadius: 12,
131
+ justifyContent: "center",
132
+ alignItems: "center",
133
+ marginRight: 16,
134
+ },
135
+ textContainer: {
136
+ flex: 1,
137
+ marginRight: 8,
138
+ },
139
+ });
package/src/presentation/screens/components/sections/FeatureSettingsSection.tsx CHANGED
@@ -1,8 +1,9 @@
1
1
  import React from "react";
2
+ import { useNavigation } from "@react-navigation/native";
2
3
  import { AppearanceSection } from "../../../../domains/appearance/presentation/components/AppearanceSection";
3
- import { LanguageSection } from "@umituz/react-native-localization";
4
4
  import { NotificationsSection } from "@umituz/react-native-notifications";
5
5
  import { useLocalization } from "@umituz/react-native-localization";
6
+ import { SettingsItemCard } from "../../../components/SettingsItemCard";
6
7
  import type { NormalizedConfig } from "../../utils/normalizeConfig";
7
8
 
8
9
  interface FeatureSettingsSectionProps {
@@ -18,7 +19,13 @@ export const FeatureSettingsSection: React.FC<FeatureSettingsSectionProps> = ({
18
19
  normalizedConfig,
19
20
  features,
20
21
  }) => {
21
- const { t } = useLocalization();
22
+ const { t, currentLanguage } = useLocalization();
23
+ const navigation = useNavigation();
24
+
25
+ const handleLanguagePress = () => {
26
+ const route = normalizedConfig.language.config?.route || "LanguageSelection";
27
+ navigation.navigate(route as never);
28
+ };
22
29
 
23
30
  return (
24
31
  <>
@@ -34,14 +41,12 @@ export const FeatureSettingsSection: React.FC<FeatureSettingsSectionProps> = ({
34
41
  )}
35
42
 
36
43
  {features.language && (
37
- <LanguageSection
38
- config={{
39
- ...normalizedConfig.language.config,
40
- title: t("settings.languageSelection.title"),
41
- description:
42
- normalizedConfig.language.config?.description ||
43
- t("settings.languageSelection.description"),
44
- }}
44
+ <SettingsItemCard
45
+ title={t("settings.languageSelection.title")}
46
+ description={currentLanguage || "English"}
47
+ icon="globe-outline"
48
+ onPress={handleLanguagePress}
49
+ sectionTitle={t("settings.languageSelection.title")}
45
50
  />
46
51
  )}
47
52