@umituz/react-native-settings 4.7.2 → 4.9.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.7.2",
+  "version": "4.9.0",
   "description": "Settings management for React Native apps - user preferences, theme, language, notifications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -51,6 +51,7 @@
     "@babel/plugin-transform-runtime": "^7.28.5",
     "@expo/vector-icons": "^14.0.0",
     "@react-native/babel-preset": "^0.83.0",
+    "@react-navigation/native": "^6.1.17",
     "@react-navigation/stack": "^7.6.12",
     "@testing-library/jest-native": "^5.4.3",
     "@testing-library/react-hooks": "^8.0.1",

package/src/index.ts

@@ -76,3 +76,5 @@ export type { CloudSyncSettingProps } from './presentation/components/CloudSyncS
 export { StorageClearSetting } from './presentation/components/StorageClearSetting';
 export type { StorageClearSettingProps } from './presentation/components/StorageClearSetting';
 
+export { DevSettingsSection } from './presentation/components/DevSettingsSection';
+export type { DevSettingsProps } from './presentation/components/DevSettingsSection';

package/src/infrastructure/storage/SettingsStore.ts

@@ -35,7 +35,7 @@ const getDefaultSettings = (userId: string): UserSettings => {
   if (DEFAULT_SETTINGS_CACHE.has(userId)) {
     return DEFAULT_SETTINGS_CACHE.get(userId)!;
   }
-  
+
   const settings = {
     userId,
     theme: 'auto' as const,
@@ -48,7 +48,7 @@ const getDefaultSettings = (userId: string): UserSettings => {
     privacyMode: false,
     updatedAt: new Date(),
   };
-  
+
   DEFAULT_SETTINGS_CACHE.set(userId, settings);
   return settings;
 };
@@ -62,12 +62,12 @@ export const useSettingsStore = create<SettingsStore>((set, get) => ({
     if (__DEV__) {
       console.log('SettingsStore: Loading settings for user:', userId);
     }
-    
+
     set({ loading: true, error: null });
 
     try {
       const defaultSettings = getDefaultSettings(userId);
-      const storageKey = createUserKey(StorageKey.SETTINGS, userId);
+      const storageKey = createUserKey(StorageKey.USER_PREFERENCES, userId);
 
       // ✅ DRY: Storage domain handles JSON parse, error handling
       const result = await storageRepository.getItem<UserSettings>(storageKey, defaultSettings);
@@ -127,7 +127,7 @@ export const useSettingsStore = create<SettingsStore>((set, get) => ({
         updatedAt: new Date(),
       };
 
-      const storageKey = createUserKey(StorageKey.SETTINGS, currentSettings.userId);
+      const storageKey = createUserKey(StorageKey.USER_PREFERENCES, currentSettings.userId);
 
       // ✅ DRY: Storage domain replaces JSON.stringify + AsyncStorage + try/catch
       const result = await storageRepository.setItem(storageKey, updatedSettings);
@@ -153,7 +153,7 @@ export const useSettingsStore = create<SettingsStore>((set, get) => ({
     set({ loading: true, error: null });
 
     const defaultSettings = getDefaultSettings(userId);
-    const storageKey = createUserKey(StorageKey.SETTINGS, userId);
+    const storageKey = createUserKey(StorageKey.USER_PREFERENCES, userId);
 
     // ✅ DRY: Storage domain replaces JSON.stringify + AsyncStorage + try/catch
     const result = await storageRepository.setItem(storageKey, defaultSettings);

package/src/presentation/components/DevSettingsSection.tsx

@@ -0,0 +1,95 @@
+/**
+ * Dev Settings Section Component
+ * Only visible in __DEV__ mode
+ * Provides development utilities like clearing storage
+ */
+
+import React from "react";
+import { Alert } from "react-native";
+import { Feather } from "@expo/vector-icons";
+import { useLocalization } from "@umituz/react-native-localization";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { SettingsSection } from "./SettingsSection";
+import { SettingItem } from "./SettingItem";
+
+// Icon wrapper for SettingItem compatibility
+const TrashIcon: React.FC<{ size?: number; color?: string }> = ({ size = 24, color }) => (
+  <Feather name="trash-2" size={size} color={color} />
+);
+
+export interface DevSettingsProps {
+  /** Callback to clear all storage and reset app */
+  onClearAllData?: () => Promise<void>;
+  /** Custom title for the section */
+  sectionTitle?: string;
+  /** Custom title for clear data button */
+  clearDataTitle?: string;
+  /** Custom description for clear data button */
+  clearDataDescription?: string;
+}
+
+export const DevSettingsSection: React.FC<DevSettingsProps> = ({
+  onClearAllData,
+  sectionTitle,
+  clearDataTitle,
+  clearDataDescription,
+}) => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+
+  // Only render in development mode
+  if (!__DEV__) {
+    return null;
+  }
+
+  // Don't render if no handler provided
+  if (!onClearAllData) {
+    return null;
+  }
+
+  const handleClearData = () => {
+    Alert.alert(
+      t("settings.devSettings.clearData.confirmTitle") || "Clear All Data?",
+      t("settings.devSettings.clearData.confirmMessage") || "This will clear all app data and reset to initial state. This action cannot be undone.",
+      [
+        {
+          text: t("common.cancel") || "Cancel",
+          style: "cancel",
+        },
+        {
+          text: t("common.confirm") || "Confirm",
+          style: "destructive",
+          onPress: async () => {
+            try {
+              await onClearAllData();
+            } catch {
+              Alert.alert(
+                t("common.error") || "Error",
+                t("settings.devSettings.clearData.error") || "Failed to clear data"
+              );
+            }
+          },
+        },
+      ]
+    );
+  };
+
+  return (
+    <SettingsSection
+      title={sectionTitle || t("settings.devSettings.title") || "Developer"}
+    >
+      <SettingItem
+        icon={TrashIcon}
+        title={clearDataTitle || t("settings.devSettings.clearData.title") || "Clear All Data"}
+        value={
+          clearDataDescription ||
+          t("settings.devSettings.clearData.description") || "Reset app to initial state (DEV only)"
+        }
+        onPress={handleClearData}
+        iconColor={tokens.colors.error}
+        titleColor={tokens.colors.error}
+        isLast={true}
+      />
+    </SettingsSection>
+  );
+};

package/src/presentation/navigation/SettingsStackNavigator.tsx

@@ -11,6 +11,7 @@ import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 import { SettingsScreen } from "../screens/SettingsScreen";
 import { AppearanceScreen } from "../screens/AppearanceScreen";
 import type { SettingsConfig } from "../screens/types";
+import type { DevSettingsProps } from "../components/DevSettingsSection";
 
 // Default param list - can be extended by apps
 export type SettingsStackParamList = {
@@ -58,6 +59,11 @@ export interface SettingsStackNavigatorProps {
         component: React.ComponentType<any>;
         options?: any;
     }>;
+
+    /**
+     * Dev settings (only shown in __DEV__ mode)
+     */
+    devSettings?: DevSettingsProps;
 }
 
 const Stack = createStackNavigator<SettingsStackParamList>();
@@ -68,6 +74,7 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
     showUserProfile = false,
     userProfile,
     additionalScreens = [],
+    devSettings,
 }) => {
     const tokens = useAppDesignTokens();
 
@@ -93,11 +100,12 @@ export const SettingsStackNavigator: React.FC<SettingsStackNavigatorProps> = ({
                 appVersion={appVersion}
                 showUserProfile={showUserProfile}
                 userProfile={userProfile}
+                devSettings={devSettings}
             />
         );
         Wrapper.displayName = "SettingsScreenWrapper";
         return Wrapper;
-    }, [config, appVersion, showUserProfile, userProfile]);
+    }, [config, appVersion, showUserProfile, userProfile, devSettings]);
 
     return (
         <Stack.Navigator screenOptions={screenOptions}>

package/src/presentation/screens/SettingsScreen.tsx

@@ -16,6 +16,7 @@ import { SettingsErrorBoundary } from "../components/SettingsErrorBoundary";
 import { normalizeSettingsConfig } from "./utils/normalizeConfig";
 import { useFeatureDetection } from "./hooks/useFeatureDetection";
 import type { SettingsConfig, CustomSettingsSection } from "./types";
+import type { DevSettingsProps } from "../components/DevSettingsSection";
 
 export interface SettingsScreenProps {
   config?: SettingsConfig;
@@ -48,6 +49,8 @@ export interface SettingsScreenProps {
   featureOptions?: {
     notificationServiceAvailable?: boolean;
   };
+  /** Dev settings (only shown in __DEV__ mode) */
+  devSettings?: DevSettingsProps;
 }
 
 export const SettingsScreen: React.FC<SettingsScreenProps> = ({
@@ -61,6 +64,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
   showCloseButton = false,
   onClose,
   featureOptions,
+  devSettings,
 }) => {
   const navigation = useNavigation();
   const { themeMode } = useDesignSystemTheme();
@@ -92,6 +96,7 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
           appVersion={appVersion}
           customSections={customSections}
           showCloseButton={showCloseButton}
+          devSettings={devSettings}
         />
       </SettingsErrorBoundary>
     </View>

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

@@ -11,6 +11,7 @@ import { useLocalization } from "@umituz/react-native-localization";
 import { SettingsFooter } from "../../components/SettingsFooter";
 import { UserProfileHeader } from "../../components/UserProfileHeader";
 import { SettingsSection } from "../../components/SettingsSection";
+import { DevSettingsSection, DevSettingsProps } from "../../components/DevSettingsSection";
 import { NotificationsSection } from "@umituz/react-native-notifications";
 import { AboutSection } from "@umituz/react-native-about";
 import { LegalSection } from "@umituz/react-native-legal";
@@ -59,6 +60,8 @@ interface SettingsContentProps {
   appVersion?: string;
   customSections?: CustomSettingsSection[];
   showCloseButton?: boolean;
+  /** Dev settings (only shown in __DEV__ mode) */
+  devSettings?: DevSettingsProps;
 }
 
 export const SettingsContent: React.FC<SettingsContentProps> = ({
@@ -72,6 +75,7 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
   appVersion,
   customSections = [],
   showCloseButton = false,
+  devSettings,
 }) => {
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
@@ -122,23 +126,71 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
       )}
 
       {features.appearance && (
-        <AppearanceSection config={normalizedConfig.appearance.config} />
+        <AppearanceSection
+          config={{
+            ...normalizedConfig.appearance.config,
+            title:
+              normalizedConfig.appearance.config?.title ||
+              t("settings.appearance.title"),
+            description:
+              normalizedConfig.appearance.config?.description ||
+              t("settings.appearance.description"),
+          }}
+        />
       )}
 
       {features.language && (
-        <LanguageSection config={normalizedConfig.language.config} />
+        <LanguageSection
+          config={{
+            ...normalizedConfig.language.config,
+            title: t("settings.languageSelection.title"),
+            description:
+              normalizedConfig.language.config?.description ||
+              t("settings.languageSelection.description"),
+          }}
+        />
       )}
 
       {features.notifications && (
-        <NotificationsSection config={normalizedConfig.notifications.config} />
+        <NotificationsSection
+          config={{
+            ...normalizedConfig.notifications.config,
+            title:
+              normalizedConfig.notifications.config?.title ||
+              t("settings.notifications.title"),
+            description:
+              normalizedConfig.notifications.config?.description ||
+              t("settings.notifications.description"),
+          }}
+        />
       )}
 
       {features.about && (
-        <AboutSection config={normalizedConfig.about.config} />
+        <AboutSection
+          config={{
+            ...normalizedConfig.about.config,
+            title:
+              normalizedConfig.about.config?.title ||
+              t("settings.about.title"),
+            description:
+              normalizedConfig.about.config?.description ||
+              t("settings.about.description"),
+          }}
+        />
       )}
 
       {features.legal && (
-        <LegalSection config={normalizedConfig.legal.config} />
+        <LegalSection
+          config={{
+            ...normalizedConfig.legal.config,
+            title:
+              normalizedConfig.legal.config?.title ||
+              t("settings.legal.title"),
+            description:
+              normalizedConfig.legal.config?.description ||
+              t("settings.legal.description"),
+          }}
+        />
       )}
 
       {features.disclaimer && DisclaimerSetting && (
@@ -168,6 +220,15 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
         </View>
       )}
 
+      {devSettings && (
+        <DevSettingsSection
+          onClearAllData={devSettings.onClearAllData}
+          sectionTitle={devSettings.sectionTitle}
+          clearDataTitle={devSettings.clearDataTitle}
+          clearDataDescription={devSettings.clearDataDescription}
+        />
+      )}
+
       {showFooter && <SettingsFooter versionText={footerText} appVersion={appVersion} />}
     </ScrollView>
   );