@umituz/react-native-settings 4.8.0 → 4.10.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-settings",
-  "version": "4.8.0",
+  "version": "4.10.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

@@ -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/presentation/components/DevSettingsSection.tsx

@@ -0,0 +1,105 @@
+/**
+ * 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 { storageRepository } from "@umituz/react-native-storage";
+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 {
+  /** Enable dev settings section (default: true in __DEV__ mode) */
+  enabled?: boolean;
+  /** Optional callback after storage is cleared (e.g., reload app) */
+  onAfterClear?: () => 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> = ({
+  enabled = true,
+  onAfterClear,
+  sectionTitle,
+  clearDataTitle,
+  clearDataDescription,
+}) => {
+  const { t } = useLocalization();
+  const tokens = useAppDesignTokens();
+
+  // Only render in development mode and when enabled
+  if (!__DEV__ || !enabled) {
+    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 {
+              // Clear all storage using the package's storageRepository
+              await storageRepository.clearAll();
+
+              // Call optional after-clear callback (e.g., reload app)
+              if (onAfterClear) {
+                await onAfterClear();
+              }
+
+              Alert.alert(
+                t("common.success") || "Success",
+                t("settings.devSettings.clearData.success") || "All data cleared successfully"
+              );
+            } 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();
@@ -216,6 +220,16 @@ export const SettingsContent: React.FC<SettingsContentProps> = ({
         </View>
       )}
 
+      {devSettings && (
+        <DevSettingsSection
+          enabled={devSettings.enabled}
+          onAfterClear={devSettings.onAfterClear}
+          sectionTitle={devSettings.sectionTitle}
+          clearDataTitle={devSettings.clearDataTitle}
+          clearDataDescription={devSettings.clearDataDescription}
+        />
+      )}
+
       {showFooter && <SettingsFooter versionText={footerText} appVersion={appVersion} />}
     </ScrollView>
   );