@umituz/react-native-settings 1.10.3 → 1.11.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "1.10.3",
+  "version": "1.11.1",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -34,6 +34,7 @@
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-design-system-theme": "latest",
     "@umituz/react-native-localization": "latest",
+    "@umituz/react-native-appearance": "latest",
     "expo-linear-gradient": "~14.0.0"
   },
   "devDependencies": {

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

@@ -31,7 +31,7 @@ export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
   userId,
   isGuest = false,
   avatarUrl,
-  accountSettingsRoute = "AccountSettings",
+  accountSettingsRoute,
   onPress,
 }) => {
   const tokens = useAppDesignTokens();
@@ -40,7 +40,6 @@ export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
   const spacing = tokens.spacing;
 
   const finalDisplayName = displayName || (isGuest ? "Guest" : "User");
-  const finalUserId = userId || "Unknown";
   const avatarName = isGuest ? "Guest" : finalDisplayName;
   const finalAvatarUrl =
     avatarUrl ||
@@ -54,20 +53,21 @@ export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
     }
   };
 
-  return (
-    <TouchableOpacity
-      style={[
-        styles.container,
-        {
-          backgroundColor: colors.surface,
-          paddingHorizontal: spacing.md,
-          paddingVertical: spacing.md,
-          marginHorizontal: spacing.md,
-        },
-      ]}
-      onPress={handlePress}
-      activeOpacity={0.7}
-    >
+  const shouldShowChevron = !!(onPress || accountSettingsRoute);
+  const isPressable = !!(onPress || accountSettingsRoute);
+
+  const containerStyle = [
+    styles.container,
+    {
+      backgroundColor: colors.surface,
+      paddingHorizontal: spacing.md,
+      paddingVertical: spacing.md,
+      marginHorizontal: spacing.md,
+    },
+  ];
+
+  const content = (
+    <>
       <View style={styles.content}>
         <View style={[styles.avatarContainer, { borderColor: `${colors.primary}30` }]}>
           <Image
@@ -78,25 +78,34 @@ export const UserProfileHeader: React.FC<UserProfileHeaderProps> = ({
         <View style={[styles.textContainer, { marginLeft: spacing.md }]}>
           <AtomicText
             type="headlineSmall"
-            style={[styles.name, { color: colors.textPrimary, marginBottom: spacing.xs }]}
+            style={[styles.name, { color: colors.textPrimary }]}
             numberOfLines={1}
           >
             {finalDisplayName}
           </AtomicText>
-          <AtomicText
-            type="bodySmall"
-            style={[styles.id, { color: colors.textSecondary }]}
-            numberOfLines={1}
-          >
-            ID: {finalUserId.substring(0, 10)}...
-          </AtomicText>
         </View>
       </View>
-      <View style={[styles.chevronContainer, { marginLeft: spacing.sm }]}>
-        <ChevronRight size={22} color={colors.textSecondary} strokeWidth={2.5} />
-      </View>
-    </TouchableOpacity>
+      {shouldShowChevron && (
+        <View style={[styles.chevronContainer, { marginLeft: spacing.sm }]}>
+          <ChevronRight size={22} color={colors.textSecondary} strokeWidth={2.5} />
+        </View>
+      )}
+    </>
   );
+
+  if (isPressable) {
+    return (
+      <TouchableOpacity
+        style={containerStyle}
+        onPress={handlePress}
+        activeOpacity={0.7}
+      >
+        {content}
+      </TouchableOpacity>
+    );
+  }
+
+  return <View style={containerStyle}>{content}</View>;
 };
 
 const styles = StyleSheet.create({

package/src/presentation/screens/AppearanceScreen.tsx

@@ -1,70 +1,13 @@
 /**
  * Appearance Settings Screen
- * Modern appearance settings with language and theme controls
+ * Advanced appearance settings with theme customization and custom colors
+ * Uses @umituz/react-native-appearance package
  */
 
 import React from "react";
-import { View, StyleSheet } from "react-native";
-import { Languages, Moon, Sun } from "lucide-react-native";
-import { useNavigation } from "@react-navigation/native";
-import {
-  useDesignSystemTheme,
-  useAppDesignTokens,
-  type DesignTokens,
-} from "@umituz/react-native-design-system-theme";
-import { ScreenLayout } from "@umituz/react-native-design-system-organisms";
-import { useLocalization, getLanguageByCode } from "@umituz/react-native-localization";
-import { SettingItem } from "../components/SettingItem";
-import { SettingsSection } from "../components/SettingsSection";
+import { AppearanceScreen } from "@umituz/react-native-appearance";
 
-export const AppearanceScreen: React.FC = () => {
-  const { t, currentLanguage } = useLocalization();
-  const navigation = useNavigation();
-  const { themeMode, setThemeMode } = useDesignSystemTheme();
-  const tokens = useAppDesignTokens();
-  const styles = getStyles(tokens);
-
-  const currentLang = getLanguageByCode(currentLanguage);
-  const languageDisplay = currentLang
-    ? `${currentLang.flag} ${currentLang.nativeName}`
-    : "English";
-  const themeDisplay =
-    themeMode === "dark" ? t("settings.darkMode") : t("settings.lightMode");
-
-  const handleLanguagePress = () => {
-    navigation.navigate("LanguageSelection" as never);
-  };
-
-  const handleThemeToggle = () => {
-    const newMode = themeMode === "dark" ? "light" : "dark";
-    setThemeMode(newMode);
-  };
-
-  return (
-    <ScreenLayout testID="appearance-screen" hideScrollIndicator>
-      {/* Language Section */}
-      <SettingsSection title={t("settings.language")}>
-        <SettingItem
-          icon={Languages}
-          title={t("settings.language")}
-          value={languageDisplay}
-          onPress={handleLanguagePress}
-        />
-      </SettingsSection>
-
-      {/* Theme Section */}
-      <SettingsSection title={t("settings.appearance.darkMode")}>
-        <SettingItem
-          icon={themeMode === "dark" ? Moon : Sun}
-          title={t("settings.appearance.darkMode")}
-          value={themeDisplay}
-          onPress={handleThemeToggle}
-          isLast={true}
-        />
-      </SettingsSection>
-    </ScreenLayout>
-  );
-};
+export { AppearanceScreen };
 
 const getStyles = (tokens: DesignTokens) =>
   StyleSheet.create({

package/src/presentation/screens/SettingsScreen.tsx

@@ -17,6 +17,7 @@ import { SettingsFooter } from "../components/SettingsFooter";
 import { UserProfileHeader } from "../components/UserProfileHeader";
 import { SettingsSection } from "../components/SettingsSection";
 import { AppearanceSection } from "./components/AppearanceSection";
+import { LanguageSection } from "./components/LanguageSection";
 import { NotificationsSection } from "./components/NotificationsSection";
 import { AboutLegalSection } from "./components/AboutLegalSection";
 import { normalizeSettingsConfig } from "./utils/normalizeConfig";
@@ -73,6 +74,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
 
   const hasAnyFeatures =
     features.appearance ||
+    features.language ||
     features.notifications ||
     features.about ||
     features.legal ||
@@ -144,6 +146,10 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
           <AppearanceSection config={normalizedConfig.appearance.config} />
         )}
 
+        {features.language && (
+          <LanguageSection config={normalizedConfig.language.config} />
+        )}
+
         {features.notifications && (
           <NotificationsSection config={normalizedConfig.notifications.config} />
         )}

package/src/presentation/screens/components/AppearanceSection.tsx

@@ -1,6 +1,6 @@
 /**
  * Appearance Section Component
- * Single Responsibility: Render appearance settings section
+ * Single Responsibility: Render appearance settings section (theme customization)
  */
 
 import React from "react";

package/src/presentation/screens/components/LanguageSection.tsx

@@ -0,0 +1,43 @@
+/**
+ * Language Section Component
+ * Single Responsibility: Render language settings section
+ */
+
+import React from "react";
+import { Languages } from "lucide-react-native";
+import { useNavigation } from "@react-navigation/native";
+import { useLocalization, getLanguageByCode } from "@umituz/react-native-localization";
+import { SettingItem } from "../../components/SettingItem";
+import { SettingsSection } from "../../components/SettingsSection";
+import type { LanguageConfig } from "../types";
+
+interface LanguageSectionProps {
+  config?: LanguageConfig;
+}
+
+export const LanguageSection: React.FC<LanguageSectionProps> = ({
+  config,
+}) => {
+  const navigation = useNavigation();
+  const { t, currentLanguage } = useLocalization();
+
+  const route = config?.route || "LanguageSelection";
+  const title = config?.title || t("settings.language");
+  const description = config?.description || "";
+
+  const currentLang = getLanguageByCode(currentLanguage);
+  const languageDisplay = currentLang
+    ? `${currentLang.flag} ${currentLang.nativeName}`
+    : "English";
+
+  return (
+    <SettingsSection title={t("settings.sections.app.title")}>
+      <SettingItem
+        icon={Languages}
+        title={title}
+        value={languageDisplay}
+        onPress={() => navigation.navigate(route as never)}
+      />
+    </SettingsSection>
+  );
+};

package/src/presentation/screens/components/index.ts

@@ -4,6 +4,7 @@
  */
 
 export { AppearanceSection } from "./AppearanceSection";
+export { LanguageSection } from "./LanguageSection";
 export { NotificationsSection } from "./NotificationsSection";
 export { AboutLegalSection } from "./AboutLegalSection";
 

package/src/presentation/screens/hooks/useFeatureDetection.ts

@@ -53,7 +53,7 @@ export function useFeatureDetection(
   navigation: any,
 ) {
   return useMemo(() => {
-    const { appearance, notifications, about, legal, account, support, developer } =
+    const { appearance, language, notifications, about, legal, account, support, developer } =
       normalizedConfig;
 
     return {
@@ -65,6 +65,14 @@ export function useFeatureDetection(
               navigation,
               appearance.config?.route || "Appearance",
             ))),
+      language:
+        language.enabled &&
+        (language.config?.enabled === true ||
+          (language.config?.enabled !== false &&
+            hasNavigationScreen(
+              navigation,
+              language.config?.route || "LanguageSelection",
+            ))),
       notifications:
         notifications.enabled &&
         (notifications.config?.enabled === true ||

package/src/presentation/screens/types.ts

@@ -23,8 +23,6 @@ export interface AppearanceConfig {
   enabled?: FeatureVisibility;
   /** Custom navigation route for appearance screen */
   route?: string;
-  /** Show language selection */
-  showLanguage?: boolean;
   /** Show theme toggle */
   showTheme?: boolean;
   /** Custom appearance title */
@@ -33,6 +31,20 @@ export interface AppearanceConfig {
   description?: string;
 }
 
+/**
+ * Language Settings Configuration
+ */
+export interface LanguageConfig {
+  /** Show language section */
+  enabled?: FeatureVisibility;
+  /** Custom navigation route for language selection screen */
+  route?: string;
+  /** Custom language title */
+  title?: string;
+  /** Custom language description */
+  description?: string;
+}
+
 /**
  * Notifications Settings Configuration
  */
@@ -187,11 +199,17 @@ export interface DeveloperConfig {
  */
 export interface SettingsConfig {
   /**
-   * Appearance settings (Theme & Language)
+   * Appearance settings (Theme customization)
    * @default 'auto'
    */
   appearance?: FeatureVisibility | AppearanceConfig;
 
+  /**
+   * Language settings
+   * @default 'auto'
+   */
+  language?: FeatureVisibility | LanguageConfig;
+
   /**
    * Notifications settings
    * @default 'auto'

package/src/presentation/screens/utils/normalizeConfig.ts

@@ -6,6 +6,7 @@
 import type {
   FeatureVisibility,
   AppearanceConfig,
+  LanguageConfig,
   NotificationsConfig,
   AboutConfig,
   LegalConfig,
@@ -19,6 +20,10 @@ export interface NormalizedConfig {
     enabled: boolean;
     config?: AppearanceConfig;
   };
+  language: {
+    enabled: boolean;
+    config?: LanguageConfig;
+  };
   notifications: {
     enabled: boolean;
     config?: NotificationsConfig;
@@ -78,6 +83,7 @@ export function normalizeSettingsConfig(
 ): NormalizedConfig {
   return {
     appearance: normalizeConfigValue(config?.appearance, "auto"),
+    language: normalizeConfigValue(config?.language, "auto"),
     notifications: normalizeConfigValue(config?.notifications, "auto"),
     about: normalizeConfigValue(config?.about, "auto"),
     legal: normalizeConfigValue(config?.legal, "auto"),