@umituz/react-native-settings 4.19.2 → 4.19.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.19.2",
+  "version": "4.19.4",
   "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",
@@ -55,8 +55,13 @@
   "devDependencies": {
     "@babel/plugin-transform-runtime": "^7.28.5",
     "@expo/vector-icons": "^15.0.0",
+    "@gorhom/bottom-sheet": "^5.2.8",
+    "@react-native-community/datetimepicker": "^8.5.1",
+    "@react-navigation/bottom-tabs": "^7.9.0",
     "@react-navigation/native": "^6.1.18",
     "@react-navigation/stack": "^6.4.1",
+    "@sentry/react-native": "^7.8.0",
+    "@sentry/types": "^10.32.1",
     "@tanstack/react-query": "^5.0.0",
     "@types/jest": "^29.5.14",
     "@types/react": "~19.1.10",
@@ -64,15 +69,40 @@
     "@typescript-eslint/parser": "^7.0.0",
     "@umituz/react-native-auth": "latest",
     "@umituz/react-native-design-system": "latest",
+    "@umituz/react-native-filesystem": "^2.1.7",
+    "@umituz/react-native-firebase": "^1.13.28",
+    "@umituz/react-native-haptics": "^1.0.3",
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-notifications": "latest",
     "@umituz/react-native-onboarding": "latest",
+    "@umituz/react-native-sentry": "^1.4.2",
     "@umituz/react-native-storage": "latest",
     "@umituz/react-native-tanstack": "latest",
+    "@umituz/react-native-uuid": "^1.2.2",
     "eslint": "^8.57.0",
+    "expo-apple-authentication": "^8.0.8",
+    "expo-application": "^7.0.8",
+    "expo-clipboard": "^8.0.8",
+    "expo-crypto": "^15.0.8",
+    "expo-device": "^8.0.10",
+    "expo-file-system": "^19.0.21",
+    "expo-haptics": "^15.0.8",
+    "expo-image": "^3.0.11",
+    "expo-linear-gradient": "^15.0.8",
+    "expo-localization": "^17.0.8",
+    "expo-notifications": "^0.32.15",
+    "expo-sharing": "^14.0.8",
+    "expo-video": "^3.0.15",
+    "i18next": "^25.7.3",
     "react": "19.1.0",
+    "react-i18next": "^16.5.0",
     "react-native": "0.81.5",
-    "typescript": "^5.3.0"
+    "react-native-gesture-handler": "^2.30.0",
+    "react-native-reanimated": "^4.2.1",
+    "react-native-safe-area-context": "^5.6.2",
+    "rn-emoji-keyboard": "^1.7.0",
+    "typescript": "^5.3.0",
+    "zustand": "^5.0.9"
   },
   "publishConfig": {
     "access": "public"
@@ -88,4 +118,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/index.ts

@@ -86,6 +86,9 @@ export { SettingsErrorBoundary } from './presentation/components/SettingsErrorBo
 export { StorageClearSetting } from './presentation/components/StorageClearSetting';
 export type { StorageClearSettingProps } from './presentation/components/StorageClearSetting';
 
+export { CloudSyncSetting } from './presentation/components/CloudSyncSetting';
+export type { CloudSyncSettingProps } from './presentation/components/CloudSyncSetting';
+
 export { DevSettingsSection } from './presentation/components/DevSettingsSection';
 export type { DevSettingsProps } from './presentation/components/DevSettingsSection';
 

package/src/presentation/components/CloudSyncSetting.tsx

@@ -0,0 +1,70 @@
+/**
+ * Cloud Sync Setting Component
+ * Displays cloud sync status and allows triggering sync
+ */
+
+import React, { useMemo } from "react";
+import { SettingItem } from "./SettingItem";
+
+export interface CloudSyncSettingProps {
+  title?: string;
+  description?: string;
+  isSyncing?: boolean;
+  lastSynced?: Date | null;
+  onPress?: () => void;
+  disabled?: boolean;
+  isLast?: boolean;
+}
+
+const formatLastSynced = (date: Date): string => {
+  const now = new Date();
+  const diffMs = now.getTime() - date.getTime();
+  const diffMinutes = Math.floor(diffMs / (1000 * 60));
+  const diffHours = Math.floor(diffMinutes / 60);
+  const diffDays = Math.floor(diffHours / 24);
+
+  if (diffMinutes < 1) {
+    return "last_synced_just_now";
+  }
+  if (diffMinutes < 60) {
+    return `last_synced_${diffMinutes}m_ago`;
+  }
+  if (diffHours < 24) {
+    return `last_synced_${diffHours}h_ago`;
+  }
+  return `last_synced_${diffDays}d_ago`;
+};
+
+export const CloudSyncSetting: React.FC<CloudSyncSettingProps> = ({
+  title = "cloud_sync",
+  description,
+  isSyncing = false,
+  lastSynced,
+  onPress,
+  disabled = false,
+  isLast = false,
+}) => {
+  const displayValue = useMemo(() => {
+    if (isSyncing) {
+      return "syncing";
+    }
+    if (description) {
+      return description;
+    }
+    if (lastSynced) {
+      return formatLastSynced(lastSynced);
+    }
+    return undefined;
+  }, [isSyncing, description, lastSynced]);
+
+  return (
+    <SettingItem
+      icon="cloud"
+      title={title}
+      value={displayValue}
+      onPress={onPress}
+      disabled={disabled || isSyncing}
+      isLast={isLast}
+    />
+  );
+};

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}
     />
   );
 };