@umituz/react-native-onboarding 2.10.0 → 3.0.0

package/src/infrastructure/storage/OnboardingStoreActions.ts

@@ -0,0 +1,195 @@
+/**
+ * Onboarding Store Actions
+ * Single Responsibility: Async store actions
+ */
+
+import {
+  storageRepository,
+  StorageKey,
+  unwrap,
+} from "@umituz/react-native-storage";
+import type { OnboardingUserData } from "../../domain/entities/OnboardingUserData";
+import type { OnboardingStoreState } from "./OnboardingStoreState";
+
+const DEFAULT_STORAGE_KEY = StorageKey.ONBOARDING_COMPLETED;
+const USER_DATA_STORAGE_KEY = "@onboarding_user_data";
+
+export interface OnboardingStoreActions {
+  initialize: (storageKey?: string) => Promise<void>;
+  complete: (storageKey?: string) => Promise<void>;
+  skip: (storageKey?: string) => Promise<void>;
+  reset: (storageKey?: string) => Promise<void>;
+  saveAnswer: (questionId: string, answer: any) => Promise<void>;
+  setUserData: (data: OnboardingUserData) => Promise<void>;
+}
+
+export function createOnboardingStoreActions(
+  set: (state: Partial<OnboardingStoreState>) => void,
+  get: () => OnboardingStoreState
+): OnboardingStoreActions {
+  return {
+    initialize: async (storageKey = DEFAULT_STORAGE_KEY) => {
+      try {
+        set({ loading: true, error: null });
+
+        const completionResult = await storageRepository.getString(storageKey, "false");
+        const isComplete = unwrap(completionResult, "false") === "true";
+
+        const userDataResult = await storageRepository.getObject<OnboardingUserData>(
+          USER_DATA_STORAGE_KEY,
+          { answers: {} }
+        );
+        const userData = unwrap(userDataResult, { answers: {} });
+
+        set({
+          isOnboardingComplete: isComplete,
+          userData,
+          loading: false,
+          error: completionResult.success ? null : "Failed to load onboarding status",
+        });
+
+        if (__DEV__) {
+          console.log('[OnboardingStore] Initialized with completion status:', isComplete);
+        }
+      } catch (error) {
+        set({
+          loading: false,
+          error: error instanceof Error ? error.message : "Failed to initialize onboarding",
+        });
+        
+        if (__DEV__) {
+          console.error('[OnboardingStore] Initialization error:', error);
+        }
+      }
+    },
+
+    complete: async (storageKey = DEFAULT_STORAGE_KEY) => {
+      try {
+        set({ loading: true, error: null });
+
+        const result = await storageRepository.setString(storageKey, "true");
+
+        const userData = { ...get().userData };
+        userData.completedAt = new Date().toISOString();
+
+        await storageRepository.setObject(USER_DATA_STORAGE_KEY, userData);
+
+        set({
+          isOnboardingComplete: result.success,
+          userData,
+          loading: false,
+          error: result.success ? null : "Failed to complete onboarding",
+        });
+
+        if (__DEV__) {
+          console.log('[OnboardingStore] Onboarding completed successfully');
+        }
+      } catch (error) {
+        set({
+          loading: false,
+          error: error instanceof Error ? error.message : "Failed to complete onboarding",
+        });
+        
+        if (__DEV__) {
+          console.error('[OnboardingStore] Completion error:', error);
+        }
+      }
+    },
+
+    skip: async (storageKey = DEFAULT_STORAGE_KEY) => {
+      try {
+        set({ loading: true, error: null });
+
+        const result = await storageRepository.setString(storageKey, "true");
+
+        const userData = { ...get().userData };
+        userData.skipped = true;
+        userData.completedAt = new Date().toISOString();
+        await storageRepository.setObject(USER_DATA_STORAGE_KEY, userData);
+
+        set({
+          isOnboardingComplete: result.success,
+          userData,
+          loading: false,
+          error: result.success ? null : "Failed to skip onboarding",
+        });
+
+        if (__DEV__) {
+          console.log('[OnboardingStore] Onboarding skipped successfully');
+        }
+      } catch (error) {
+        set({
+          loading: false,
+          error: error instanceof Error ? error.message : "Failed to skip onboarding",
+        });
+        
+        if (__DEV__) {
+          console.error('[OnboardingStore] Skip error:', error);
+        }
+      }
+    },
+
+    reset: async (storageKey = DEFAULT_STORAGE_KEY) => {
+      try {
+        set({ loading: true, error: null });
+
+        const result = await storageRepository.removeItem(storageKey);
+        await storageRepository.removeItem(USER_DATA_STORAGE_KEY);
+
+        set({
+          isOnboardingComplete: false,
+          currentStep: 0,
+          userData: { answers: {} },
+          loading: false,
+          error: result.success ? null : "Failed to reset onboarding",
+        });
+
+        if (__DEV__) {
+          console.log('[OnboardingStore] Onboarding reset successfully');
+        }
+      } catch (error) {
+        set({
+          loading: false,
+          error: error instanceof Error ? error.message : "Failed to reset onboarding",
+        });
+        
+        if (__DEV__) {
+          console.error('[OnboardingStore] Reset error:', error);
+        }
+      }
+    },
+
+    saveAnswer: async (questionId: string, answer: any) => {
+      try {
+        const userData = { ...get().userData };
+        userData.answers[questionId] = answer;
+
+        await storageRepository.setObject(USER_DATA_STORAGE_KEY, userData);
+        set({ userData });
+
+        if (__DEV__) {
+          console.log('[OnboardingStore] Answer saved for question:', questionId);
+        }
+      } catch (error) {
+        if (__DEV__) {
+          console.error('[OnboardingStore] Failed to save answer:', error);
+        }
+      }
+    },
+
+    setUserData: async (data: OnboardingUserData) => {
+      try {
+        await storageRepository.setObject(USER_DATA_STORAGE_KEY, data);
+        set({ userData: data });
+
+        if (__DEV__) {
+          console.log('[OnboardingStore] User data updated successfully');
+        }
+      } catch (error) {
+        if (__DEV__) {
+          console.error('[OnboardingStore] Failed to set user data:', error);
+        }
+      }
+    },
+  };
+}

package/src/infrastructure/storage/OnboardingStoreSelectors.ts

@@ -0,0 +1,25 @@
+/**
+ * Onboarding Store Selectors
+ * Single Responsibility: Store state selectors
+ */
+
+import type { OnboardingStoreState } from "./OnboardingStoreState";
+
+export interface OnboardingStoreSelectors {
+  getAnswer: (questionId: string) => any;
+  getUserData: () => OnboardingStoreState['userData'];
+}
+
+export function createOnboardingStoreSelectors(
+  get: () => OnboardingStoreState
+): OnboardingStoreSelectors {
+  return {
+    getAnswer: (questionId: string) => {
+      return get().userData.answers[questionId];
+    },
+
+    getUserData: () => {
+      return get().userData;
+    },
+  };
+}

package/src/infrastructure/storage/OnboardingStoreState.ts

@@ -0,0 +1,22 @@
+/**
+ * Onboarding Store State
+ * Single Responsibility: Store state interface and initial state
+ */
+
+import type { OnboardingUserData } from "../../domain/entities/OnboardingUserData";
+
+export interface OnboardingStoreState {
+  isOnboardingComplete: boolean;
+  currentStep: number;
+  loading: boolean;
+  error: string | null;
+  userData: OnboardingUserData;
+}
+
+export const initialOnboardingState: OnboardingStoreState = {
+  isOnboardingComplete: false,
+  currentStep: 0,
+  loading: true,
+  error: null,
+  userData: { answers: {} },
+};

package/src/infrastructure/storage/__tests__/OnboardingStore.test.ts

@@ -0,0 +1,85 @@
+/**
+ * OnboardingStore Tests
+ */
+
+import { renderHook, act } from '@testing-library/react-native';
+import { useOnboardingStore, useOnboarding } from '../OnboardingStore';
+
+// Mock storage repository
+jest.mock('@umituz/react-native-storage', () => ({
+  storageRepository: {
+    getString: jest.fn(),
+    setString: jest.fn(),
+    getObject: jest.fn(),
+    setObject: jest.fn(),
+    removeItem: jest.fn(),
+  },
+  StorageKey: {
+    ONBOARDING_COMPLETED: '@onboarding_completed',
+  },
+  unwrap: jest.fn((result, defaultValue) => result.success ? result.data : defaultValue),
+}));
+
+describe('OnboardingStore', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  describe('useOnboardingStore', () => {
+    it('should have initial state', () => {
+      const { result } = renderHook(() => useOnboardingStore());
+
+      expect(result.current.isOnboardingComplete).toBe(false);
+      expect(result.current.currentStep).toBe(0);
+      expect(result.current.loading).toBe(true);
+      expect(result.current.error).toBe(null);
+      expect(result.current.userData).toEqual({ answers: {} });
+    });
+
+    it('should set current step', () => {
+      const { result } = renderHook(() => useOnboardingStore());
+
+      act(() => {
+        result.current.setCurrentStep(5);
+      });
+
+      expect(result.current.currentStep).toBe(5);
+    });
+
+    it('should set loading state', () => {
+      const { result } = renderHook(() => useOnboardingStore());
+
+      act(() => {
+        result.current.setLoading(false);
+      });
+
+      expect(result.current.loading).toBe(false);
+    });
+
+    it('should set error state', () => {
+      const { result } = renderHook(() => useOnboardingStore());
+      const errorMessage = 'Test error';
+
+      act(() => {
+        result.current.setError(errorMessage);
+      });
+
+      expect(result.current.error).toBe(errorMessage);
+    });
+  });
+
+  describe('useOnboarding', () => {
+    it('should return all store properties and methods', () => {
+      const { result } = renderHook(() => useOnboarding());
+
+      expect(typeof result.current.initialize).toBe('function');
+      expect(typeof result.current.complete).toBe('function');
+      expect(typeof result.current.skip).toBe('function');
+      expect(typeof result.current.reset).toBe('function');
+      expect(typeof result.current.saveAnswer).toBe('function');
+      expect(typeof result.current.getAnswer).toBe('function');
+      expect(typeof result.current.getUserData).toBe('function');
+      expect(typeof result.current.setUserData).toBe('function');
+    });
+  });
+});

package/src/presentation/components/OnboardingHeader.tsx

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from "react";
 import { View, TouchableOpacity, Text, StyleSheet } from "react-native";
-import { ArrowLeft } from "lucide-react-native";
+import { Feather } from "@expo/vector-icons";
 import { useLocalization } from "@umituz/react-native-localization";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 
@@ -58,9 +58,10 @@ export const OnboardingHeader: React.FC<OnboardingHeaderProps> = ({
           activeOpacity={0.7}
           hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
         >
-          <ArrowLeft
+          <Feather
+            name="arrow-left"
             size={20}
-            {...({ color: useGradient ? "#FFFFFF" : tokens.colors.textPrimary } as any)}
+            color={useGradient ? "#FFFFFF" : tokens.colors.textPrimary}
           />
         </TouchableOpacity>
       ) : (
@@ -92,14 +93,14 @@ const getStyles = (
       width: 40,
       height: 40,
       borderRadius: 20,
-      backgroundColor: useGradient 
-        ? "rgba(255, 255, 255, 0.2)" 
+      backgroundColor: useGradient
+        ? "rgba(255, 255, 255, 0.2)"
         : tokens.colors.surface,
       alignItems: "center",
       justifyContent: "center",
       borderWidth: 1,
-      borderColor: useGradient 
-        ? "rgba(255, 255, 255, 0.3)" 
+      borderColor: useGradient
+        ? "rgba(255, 255, 255, 0.3)"
         : tokens.colors.borderLight,
     },
     headerButtonDisabled: {

package/src/presentation/components/OnboardingSlide.tsx

@@ -6,7 +6,7 @@
 
 import React, { useMemo } from "react";
 import { View, Text, StyleSheet, ScrollView } from "react-native";
-import * as LucideIcons from "lucide-react-native";
+import { Feather } from "@expo/vector-icons";
 import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system-theme";
 import type { OnboardingSlide as OnboardingSlideType } from "../../domain/entities/OnboardingSlide";
 
@@ -19,11 +19,11 @@ export const OnboardingSlide: React.FC<OnboardingSlideProps> = ({ slide, useGrad
   const tokens = useAppDesignTokens();
   const styles = useMemo(() => getStyles(tokens, useGradient), [tokens, useGradient]);
 
-  // Check if icon is an emoji (contains emoji characters) or Lucide icon name
+  // Check if icon is an emoji (contains emoji characters)
   const isEmoji = /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(slide.icon);
 
-  // Get Lucide icon component
-  const IconComponent = !isEmoji ? (LucideIcons as any)[slide.icon] : null;
+  // Validate if it's a valid Feather icon name
+  const isValidFeatherIcon = !isEmoji && typeof slide.icon === 'string';
 
   return (
     <ScrollView
@@ -36,8 +36,12 @@ export const OnboardingSlide: React.FC<OnboardingSlideProps> = ({ slide, useGrad
           <View style={styles.iconContainer}>
             {isEmoji ? (
               <Text style={styles.icon}>{slide.icon}</Text>
-            ) : IconComponent ? (
-              <IconComponent size={60} color="#FFFFFF" />
+            ) : isValidFeatherIcon ? (
+              <Feather
+                name={slide.icon as any}
+                size={60}
+                color="#FFFFFF"
+              />
             ) : (
               <Text style={styles.icon}>📱</Text>
             )}
@@ -61,8 +65,12 @@ export const OnboardingSlide: React.FC<OnboardingSlideProps> = ({ slide, useGrad
           <View style={styles.iconContainer}>
             {isEmoji ? (
               <Text style={styles.icon}>{slide.icon}</Text>
-            ) : IconComponent ? (
-              <IconComponent size={60} color={tokens.colors.textPrimary} />
+            ) : isValidFeatherIcon ? (
+              <Feather
+                name={slide.icon as any}
+                size={60}
+                color={tokens.colors.textPrimary}
+              />
             ) : (
               <Text style={styles.icon}>📱</Text>
             )}

package/src/presentation/components/questions/MultipleChoiceQuestion.tsx

@@ -7,6 +7,7 @@
 import React from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
+import { useTheme } from "@umituz/react-native-design-system-theme";
 import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 
 export interface MultipleChoiceQuestionProps {
@@ -20,6 +21,8 @@ export const MultipleChoiceQuestion: React.FC<MultipleChoiceQuestionProps> = ({
   value = [],
   onChange,
 }) => {
+  const { tokens } = useTheme() as any;
+  
   const isEmoji = (icon: string) =>
     /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(icon);
 
@@ -57,17 +60,28 @@ export const MultipleChoiceQuestion: React.FC<MultipleChoiceQuestionProps> = ({
               <AtomicIcon
                 name={option.icon as any}
                 customSize={24}
-                customColor={isSelected ? "#FFFFFF" : "rgba(255, 255, 255, 0.8)"}
+                customColor={isSelected ? tokens.colors.textPrimary : tokens.colors.textSecondary}
               />
             )}
           </View>
         )}
-        <Text style={[styles.optionLabel, isSelected && styles.optionLabelSelected]}>
+        <Text style={[
+          styles.optionLabel, 
+          isSelected && styles.optionLabelSelected,
+          { color: isSelected ? tokens.colors.textPrimary : tokens.colors.textSecondary }
+        ]}>
           {option.label}
         </Text>
-        <View style={[styles.checkbox, isSelected && styles.checkboxSelected]}>
+        <View style={[
+          styles.checkbox, 
+          isSelected && { borderWidth: 3 },
+          { 
+            borderColor: isSelected ? tokens.colors.borderPrimary : tokens.colors.borderSecondary,
+            backgroundColor: isSelected ? tokens.colors.backgroundSecondary : 'transparent'
+          }
+        ]}>
           {isSelected && (
-            <AtomicIcon name="Check" customSize={16} customColor="#FFFFFF" />
+            <AtomicIcon name="Check" customSize={16} customColor={tokens.colors.textPrimary} />
           )}
         </View>
       </TouchableOpacity>
@@ -78,7 +92,7 @@ export const MultipleChoiceQuestion: React.FC<MultipleChoiceQuestionProps> = ({
     <View style={styles.container}>
       {question.options?.map(renderOption)}
       {question.validation?.maxSelections && (
-        <Text style={styles.hint}>
+        <Text style={[styles.hint, { color: tokens.colors.textSecondary }]}>
           Select up to {question.validation.maxSelections} options
         </Text>
       )}
@@ -94,15 +108,12 @@ const styles = StyleSheet.create({
   option: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: "rgba(255, 255, 255, 0.1)",
     borderRadius: 12,
     padding: 16,
     borderWidth: 2,
-    borderColor: "rgba(255, 255, 255, 0.2)",
   },
   optionSelected: {
-    backgroundColor: "rgba(255, 255, 255, 0.25)",
-    borderColor: "rgba(255, 255, 255, 0.5)",
+    borderWidth: 3,
   },
   optionIcon: {
     marginRight: 12,
@@ -113,11 +124,9 @@ const styles = StyleSheet.create({
   optionLabel: {
     flex: 1,
     fontSize: 16,
-    color: "rgba(255, 255, 255, 0.9)",
     fontWeight: "500",
   },
   optionLabelSelected: {
-    color: "#FFFFFF",
     fontWeight: "600",
   },
   checkbox: {
@@ -125,17 +134,11 @@ const styles = StyleSheet.create({
     height: 24,
     borderRadius: 6,
     borderWidth: 2,
-    borderColor: "rgba(255, 255, 255, 0.5)",
     alignItems: "center",
     justifyContent: "center",
   },
-  checkboxSelected: {
-    borderColor: "#FFFFFF",
-    backgroundColor: "rgba(255, 255, 255, 0.3)",
-  },
   hint: {
     fontSize: 13,
-    color: "rgba(255, 255, 255, 0.7)",
     textAlign: "center",
     marginTop: 4,
   },

package/src/presentation/components/questions/RatingQuestion.tsx

@@ -7,6 +7,7 @@
 import React from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
+import { useTheme } from "@umituz/react-native-design-system-theme";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 
 export interface RatingQuestionProps {
@@ -20,6 +21,7 @@ export const RatingQuestion: React.FC<RatingQuestionProps> = ({
   value = 0,
   onChange,
 }) => {
+  const { tokens } = useTheme() as any;
   const { validation } = question;
   const max = validation?.max ?? 5;
 
@@ -36,7 +38,7 @@ export const RatingQuestion: React.FC<RatingQuestionProps> = ({
         <AtomicIcon
           name={isFilled ? "Star" : "Star"}
           customSize={48}
-          customColor={isFilled ? "#FFD700" : "rgba(255, 255, 255, 0.3)"}
+          customColor={isFilled ? tokens.colors.warning : tokens.colors.textSecondary}
         />
       </TouchableOpacity>
     );
@@ -48,7 +50,7 @@ export const RatingQuestion: React.FC<RatingQuestionProps> = ({
         {Array.from({ length: max }, (_, i) => renderStar(i))}
       </View>
       {value > 0 && (
-        <Text style={styles.valueText}>
+        <Text style={[styles.valueText, { color: tokens.colors.textPrimary }]}>
           {value} / {max}
         </Text>
       )}
@@ -71,7 +73,6 @@ const styles = StyleSheet.create({
   },
   valueText: {
     fontSize: 18,
-    color: "rgba(255, 255, 255, 0.9)",
     fontWeight: "600",
   },
 });

package/src/presentation/components/questions/SingleChoiceQuestion.tsx

@@ -7,6 +7,7 @@
 import React from "react";
 import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
+import { useTheme } from "@umituz/react-native-design-system-theme";
 import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 
 export interface SingleChoiceQuestionProps {
@@ -20,6 +21,8 @@ export const SingleChoiceQuestion: React.FC<SingleChoiceQuestionProps> = ({
   value,
   onChange,
 }) => {
+  const { tokens } = useTheme() as any;
+  
   const isEmoji = (icon: string) =>
     /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(icon);
 
@@ -41,16 +44,24 @@ export const SingleChoiceQuestion: React.FC<SingleChoiceQuestionProps> = ({
               <AtomicIcon
                 name={option.icon as any}
                 customSize={24}
-                customColor={isSelected ? "#FFFFFF" : "rgba(255, 255, 255, 0.8)"}
+                customColor={isSelected ? tokens.colors.textPrimary : tokens.colors.textSecondary}
               />
             )}
           </View>
         )}
-        <Text style={[styles.optionLabel, isSelected && styles.optionLabelSelected]}>
+        <Text style={[
+          styles.optionLabel, 
+          isSelected && styles.optionLabelSelected,
+          { color: isSelected ? tokens.colors.textPrimary : tokens.colors.textSecondary }
+        ]}>
           {option.label}
         </Text>
-        <View style={[styles.radio, isSelected && styles.radioSelected]}>
-          {isSelected && <View style={styles.radioInner} />}
+        <View style={[
+          styles.radio, 
+          isSelected && { borderWidth: 3 },
+          { borderColor: isSelected ? tokens.colors.borderPrimary : tokens.colors.borderSecondary }
+        ]}>
+          {isSelected && <View style={[styles.radioInner, { backgroundColor: tokens.colors.textPrimary }]} />}
         </View>
       </TouchableOpacity>
     );
@@ -71,15 +82,12 @@ const styles = StyleSheet.create({
   option: {
     flexDirection: "row",
     alignItems: "center",
-    backgroundColor: "rgba(255, 255, 255, 0.1)",
     borderRadius: 12,
     padding: 16,
     borderWidth: 2,
-    borderColor: "rgba(255, 255, 255, 0.2)",
   },
   optionSelected: {
-    backgroundColor: "rgba(255, 255, 255, 0.25)",
-    borderColor: "rgba(255, 255, 255, 0.5)",
+    borderWidth: 3,
   },
   optionIcon: {
     marginRight: 12,
@@ -90,11 +98,9 @@ const styles = StyleSheet.create({
   optionLabel: {
     flex: 1,
     fontSize: 16,
-    color: "rgba(255, 255, 255, 0.9)",
     fontWeight: "500",
   },
   optionLabelSelected: {
-    color: "#FFFFFF",
     fontWeight: "600",
   },
   radio: {
@@ -102,18 +108,13 @@ const styles = StyleSheet.create({
     height: 24,
     borderRadius: 12,
     borderWidth: 2,
-    borderColor: "rgba(255, 255, 255, 0.5)",
     alignItems: "center",
     justifyContent: "center",
   },
-  radioSelected: {
-    borderColor: "#FFFFFF",
-  },
   radioInner: {
     width: 12,
     height: 12,
     borderRadius: 6,
-    backgroundColor: "#FFFFFF",
   },
 });