@umituz/react-native-onboarding 3.1.1 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "Advanced onboarding flow for React Native apps with personalization questions, theme-aware colors, animations, and customizable slides. SOLID, DRY, KISS principles applied.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/index.ts

@@ -91,3 +91,7 @@ export type { TextInputQuestionProps } from "./presentation/components/questions
 export { RatingQuestion } from "./presentation/components/questions/RatingQuestion";
 export type { RatingQuestionProps } from "./presentation/components/questions/RatingQuestion";
 
+export { OnboardingResetSetting } from "./presentation/components/OnboardingResetSetting";
+export type { OnboardingResetSettingProps } from "./presentation/components/OnboardingResetSetting";
+
+

package/src/presentation/components/OnboardingResetSetting.tsx

@@ -0,0 +1,98 @@
+/**
+ * Onboarding Reset Setting Component
+ * Single Responsibility: Provide onboarding reset functionality for settings screens
+ * Generic component for hundreds of apps
+ */
+
+import React, { useCallback } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+export interface OnboardingResetSettingProps {
+    /** Callback when reset is triggered */
+    onReset: () => void | Promise<void>;
+    /** Custom icon name */
+    iconName?: string;
+    /** Custom icon color */
+    iconColor?: string;
+    /** Custom title color */
+    titleColor?: string;
+    /** Whether to show this setting (default: only in __DEV__) */
+    visible?: boolean;
+    /** Is last item in list */
+    isLast?: boolean;
+}
+
+export const OnboardingResetSetting: React.FC<OnboardingResetSettingProps> = ({
+    onReset,
+    iconName = "refresh-outline",
+    iconColor,
+    titleColor,
+    visible = __DEV__,
+    isLast = false,
+}) => {
+    const tokens = useAppDesignTokens();
+
+    const handlePress = useCallback(async () => {
+        await onReset();
+    }, [onReset]);
+
+    if (!visible) {
+        return null;
+    }
+
+    const defaultIconColor = iconColor || tokens.colors.warning;
+    const defaultTitleColor = titleColor || tokens.colors.warning;
+
+    return (
+        <TouchableOpacity onPress={handlePress} activeOpacity={0.7}>
+            <View style={[styles.container, !isLast && { borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: tokens.colors.border }]}>
+                <View style={styles.iconContainer}>
+                    <AtomicIcon
+                        name={iconName}
+                        size="md"
+                        customColor={defaultIconColor}
+                    />
+                </View>
+                <View style={styles.content}>
+                    <Text
+                        style={[styles.title, { color: defaultTitleColor }]}
+                        numberOfLines={1}
+                    >
+                        onboarding_reset_title
+                    </Text>
+                    <Text
+                        style={[styles.description, { color: tokens.colors.textSecondary }]}
+                        numberOfLines={1}
+                    >
+                        onboarding_reset_description
+                    </Text>
+                </View>
+            </View>
+        </TouchableOpacity>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: 12,
+        paddingHorizontal: 16,
+    },
+    iconContainer: {
+        marginRight: 12,
+    },
+    content: {
+        flex: 1,
+    },
+    title: {
+        fontSize: 16,
+        fontWeight: "500",
+    },
+    description: {
+        fontSize: 14,
+        marginTop: 2,
+    },
+});