@umituz/react-native-settings 1.10.2 → 1.11.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "1.10.2",
+  "version": "1.11.0",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/index.ts

@@ -61,3 +61,9 @@ export type { UserProfileHeaderProps } from './presentation/components/UserProfi
 
 export { DisclaimerSetting } from './presentation/components/DisclaimerSetting';
 
+export { CloudSyncSetting } from './presentation/components/CloudSyncSetting';
+export type { CloudSyncSettingProps } from './presentation/components/CloudSyncSetting';
+
+export { StorageClearSetting } from './presentation/components/StorageClearSetting';
+export type { StorageClearSettingProps } from './presentation/components/StorageClearSetting';
+

package/src/presentation/components/CloudSyncSetting.tsx

@@ -0,0 +1,65 @@
+/**
+ * Cloud Sync Setting Component
+ * Single Responsibility: Display cloud sync setting item
+ */
+
+import React from "react";
+import { Cloud } from "lucide-react-native";
+import { SettingItem } from "./SettingItem";
+import type { SettingItemProps } from "./SettingItem";
+
+export interface CloudSyncSettingProps {
+  title?: string;
+  description?: string;
+  isSyncing?: boolean;
+  lastSynced?: Date | null;
+  onPress?: () => void;
+  iconColor?: string;
+  titleColor?: string;
+}
+
+export const CloudSyncSetting: React.FC<CloudSyncSettingProps> = ({
+  title = "Cloud Sync",
+  description,
+  isSyncing = false,
+  lastSynced,
+  onPress,
+  iconColor,
+  titleColor,
+}) => {
+  const formatLastSynced = (date: Date | null | undefined): string => {
+    if (!date) return "Never synced";
+    const now = new Date();
+    const diff = now.getTime() - date.getTime();
+    const minutes = Math.floor(diff / 60000);
+    const hours = Math.floor(minutes / 60);
+    const days = Math.floor(hours / 24);
+
+    if (minutes < 1) return "Just now";
+    if (minutes < 60) return `${minutes}m ago`;
+    if (hours < 24) return `${hours}h ago`;
+    if (days < 7) return `${days}d ago`;
+    return date.toLocaleDateString();
+  };
+
+  const displayDescription =
+    description ||
+    (isSyncing
+      ? "Syncing..."
+      : lastSynced
+        ? `Last synced: ${formatLastSynced(lastSynced)}`
+        : "Sync your data to the cloud");
+
+  return (
+    <SettingItem
+      icon={Cloud}
+      title={title}
+      value={displayDescription}
+      onPress={onPress}
+      iconColor={iconColor}
+      titleColor={titleColor}
+      disabled={isSyncing}
+    />
+  );
+};
+

package/src/presentation/components/SettingItem.tsx

@@ -32,6 +32,8 @@ export interface SettingItemProps {
   titleColor?: string;
   /** Test ID for E2E testing */
   testID?: string;
+  /** Disable the item */
+  disabled?: boolean;
 }
 
 export const SettingItem: React.FC<SettingItemProps> = ({
@@ -46,6 +48,7 @@ export const SettingItem: React.FC<SettingItemProps> = ({
   iconColor,
   titleColor,
   testID,
+  disabled = false,
 }) => {
   const tokens = useAppDesignTokens();
   const colors = tokens.colors;
@@ -59,8 +62,8 @@ export const SettingItem: React.FC<SettingItemProps> = ({
           { backgroundColor: colors.backgroundPrimary },
         ]}
         onPress={onPress}
-        disabled={showSwitch}
-        activeOpacity={0.7}
+        disabled={showSwitch || disabled}
+        activeOpacity={disabled ? 1 : 0.7}
         testID={testID}
       >
         <View style={styles.content}>
@@ -80,7 +83,12 @@ export const SettingItem: React.FC<SettingItemProps> = ({
             <Text
               style={[
                 styles.title,
-                { color: titleColor || colors.textPrimary },
+                {
+                  color: disabled
+                    ? colors.textSecondary
+                    : titleColor || colors.textPrimary,
+                  opacity: disabled ? 0.5 : 1,
+                },
               ]}
               numberOfLines={1}
             >

package/src/presentation/components/StorageClearSetting.tsx

@@ -0,0 +1,45 @@
+/**
+ * Storage Clear Setting Component
+ * Single Responsibility: Display storage clear setting (DEV only)
+ * Only visible in __DEV__ mode
+ */
+
+import React from "react";
+import { Trash2 } from "lucide-react-native";
+import { SettingItem } from "./SettingItem";
+
+export interface StorageClearSettingProps {
+  title?: string;
+  description?: string;
+  onPress?: () => void;
+  iconColor?: string;
+  titleColor?: string;
+  isLast?: boolean;
+}
+
+export const StorageClearSetting: React.FC<StorageClearSettingProps> = ({
+  title = "Clear All Storage",
+  description = "Clear all local storage data (DEV only)",
+  onPress,
+  iconColor = "#EF4444",
+  titleColor = "#EF4444",
+  isLast = false,
+}) => {
+  // Only render in DEV mode
+  if (!__DEV__) {
+    return null;
+  }
+
+  return (
+    <SettingItem
+      icon={Trash2}
+      title={title}
+      value={description}
+      onPress={onPress}
+      iconColor={iconColor}
+      titleColor={titleColor}
+      isLast={isLast}
+    />
+  );
+};
+

package/src/presentation/components/UserProfileHeader.tsx

@@ -5,9 +5,10 @@
  */
 
 import React from "react";
-import { View, Text, TouchableOpacity, StyleSheet, Image } from "react-native";
+import { View, TouchableOpacity, StyleSheet, Image } from "react-native";
 import { ChevronRight } from "lucide-react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { AtomicText } from "@umituz/react-native-design-system-atoms";
 import { useNavigation } from "@react-navigation/native";
 
 export interface UserProfileHeaderProps {
@@ -58,34 +59,42 @@ export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
       style={[
         styles.container,
         {
-          backgroundColor: colors.backgroundPrimary,
-          borderColor: colors.borderLight,
+          backgroundColor: colors.surface,
+          paddingHorizontal: spacing.md,
+          paddingVertical: spacing.md,
+          marginHorizontal: spacing.md,
         },
       ]}
       onPress={handlePress}
       activeOpacity={0.7}
     >
       <View style={styles.content}>
-        <Image
-          source={{ uri: finalAvatarUrl }}
-          style={[styles.avatar, { borderColor: `${colors.primary}40` }]}
-        />
-        <View style={styles.textContainer}>
-          <Text
-            style={[styles.name, { color: colors.textPrimary }]}
+        <View style={[styles.avatarContainer, { borderColor: `${colors.primary}30` }]}>
+          <Image
+            source={{ uri: finalAvatarUrl }}
+            style={styles.avatar}
+          />
+        </View>
+        <View style={[styles.textContainer, { marginLeft: spacing.md }]}>
+          <AtomicText
+            type="headlineSmall"
+            style={[styles.name, { color: colors.textPrimary, marginBottom: spacing.xs }]}
             numberOfLines={1}
           >
             {finalDisplayName}
-          </Text>
-          <Text
+          </AtomicText>
+          <AtomicText
+            type="bodySmall"
             style={[styles.id, { color: colors.textSecondary }]}
             numberOfLines={1}
           >
-            ID: {finalUserId.substring(0, 8)}...
-          </Text>
+            ID: {finalUserId.substring(0, 10)}...
+          </AtomicText>
         </View>
       </View>
-      <ChevronRight size={20} color={colors.textSecondary} />
+      <View style={[styles.chevronContainer, { marginLeft: spacing.sm }]}>
+        <ChevronRight size={22} color={colors.textSecondary} strokeWidth={2.5} />
+      </View>
     </TouchableOpacity>
   );
 };
@@ -95,37 +104,42 @@ const styles = StyleSheet.create({
     flexDirection: "row",
     alignItems: "center",
     justifyContent: "space-between",
-    paddingHorizontal: 20,
-    paddingVertical: 20,
-    marginHorizontal: 16,
     marginTop: 0,
     marginBottom: 0,
-    borderRadius: 16,
-    borderWidth: 1,
+    borderRadius: 20,
+    minHeight: 80,
   },
   content: {
     flexDirection: "row",
     alignItems: "center",
     flex: 1,
   },
+  avatarContainer: {
+    width: 64,
+    height: 64,
+    borderRadius: 32,
+    borderWidth: 2,
+    overflow: "hidden",
+    backgroundColor: "transparent",
+  },
   avatar: {
-    width: 56,
-    height: 56,
-    borderRadius: 28,
-    borderWidth: 2.5,
+    width: "100%",
+    height: "100%",
   },
   textContainer: {
-    marginLeft: 16,
     flex: 1,
   },
   name: {
-    fontSize: 16,
-    fontWeight: "600",
-    marginBottom: 4,
+    fontWeight: "700",
   },
   id: {
-    fontSize: 12,
-    fontWeight: "400",
+    fontWeight: "500",
+    opacity: 0.7,
+  },
+  chevronContainer: {
+    justifyContent: "center",
+    alignItems: "center",
   },
 });
 
+