@umituz/react-native-onboarding 2.9.0 → 3.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "2.9.0",
+  "version": "3.0.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",
@@ -36,8 +36,8 @@
     "@umituz/react-native-design-system-theme": "latest",
     "@umituz/react-native-design-system": "latest",
     "@umituz/react-native-design-system-atoms": "latest",
+    "@expo/vector-icons": ">=14.0.0",
     "expo-linear-gradient": "^15.0.0",
-    "lucide-react-native": "^0.344.0",
     "react": ">=18.2.0",
     "react-native": ">=0.74.0",
     "react-native-safe-area-context": "^5.0.0",
@@ -50,8 +50,8 @@
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-design-system-theme": "latest",
     "@umituz/react-native-design-system-atoms": "latest",
+    "@expo/vector-icons": ">=14.0.0",
     "expo-linear-gradient": "^15.0.7",
-    "lucide-react-native": "^0.344.0",
     "react": "^18.2.0",
     "react-native": "^0.74.0",
     "react-native-safe-area-context": "^5.6.0",
@@ -66,4 +66,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/index.ts

@@ -48,10 +48,18 @@ export {
   useOnboardingStore,
   useOnboarding,
 } from "./infrastructure/storage/OnboardingStore";
+export type { OnboardingStoreState } from "./infrastructure/storage/OnboardingStoreState";
+export type { OnboardingStoreActions } from "./infrastructure/storage/OnboardingStoreActions";
+export type { OnboardingStoreSelectors } from "./infrastructure/storage/OnboardingStoreSelectors";
 export {
   useOnboardingNavigation,
   type UseOnboardingNavigationReturn,
 } from "./infrastructure/hooks/useOnboardingNavigation";
+export {
+  useOnboardingContainerStyle,
+  type UseOnboardingContainerStyleProps,
+  type UseOnboardingContainerStyleReturn,
+} from "./presentation/hooks/useOnboardingContainerStyle";
 
 // =============================================================================
 // PRESENTATION LAYER - Components and Screens

package/src/infrastructure/hooks/__tests__/useOnboardingAnswers.test.ts

@@ -0,0 +1,163 @@
+/**
+ * OnboardingAnswers Hook Tests
+ */
+
+import { renderHook, act } from '@testing-library/react-native';
+import { useOnboardingAnswers } from '../useOnboardingAnswers';
+import { useOnboardingStore } from '../../storage/OnboardingStore';
+
+// Mock the store
+jest.mock('../../storage/OnboardingStore', () => ({
+  useOnboardingStore: jest.fn(),
+}));
+
+const mockUseOnboardingStore = useOnboardingStore as jest.MockedFunction<typeof useOnboardingStore>;
+
+describe('useOnboardingAnswers', () => {
+  const mockGetAnswer = jest.fn();
+  const mockSaveAnswer = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    mockUseOnboardingStore.mockReturnValue({
+      getAnswer: mockGetAnswer,
+      saveAnswer: mockSaveAnswer,
+    } as any);
+  });
+
+  it('should initialize with undefined answer', () => {
+    const mockSlide = {
+      id: '1',
+      type: 'question',
+      question: {
+        id: 'q1',
+        type: 'single',
+        text: 'Test question',
+      },
+    };
+
+    const { result } = renderHook(() => useOnboardingAnswers(mockSlide));
+
+    expect(result.current.currentAnswer).toBeUndefined();
+    expect(mockGetAnswer).toHaveBeenCalledWith('q1');
+  });
+
+  it('should load saved answer for slide', () => {
+    const mockSlide = {
+      id: '1',
+      type: 'question',
+      question: {
+        id: 'q1',
+        type: 'single',
+        text: 'Test question',
+      },
+    };
+
+    mockGetAnswer.mockReturnValue('option1');
+
+    const { result } = renderHook(() => useOnboardingAnswers(mockSlide));
+
+    expect(result.current.currentAnswer).toBe('option1');
+  });
+
+  it('should use default value when no saved answer', () => {
+    const mockSlide = {
+      id: '1',
+      type: 'question',
+      question: {
+        id: 'q1',
+        type: 'single',
+        text: 'Test question',
+        defaultValue: 'default',
+      },
+    };
+
+    mockGetAnswer.mockReturnValue(undefined);
+
+    const { result } = renderHook(() => useOnboardingAnswers(mockSlide));
+
+    expect(result.current.currentAnswer).toBe('default');
+  });
+
+  it('should set current answer', () => {
+    const mockSlide = {
+      id: '1',
+      type: 'question',
+      question: {
+        id: 'q1',
+        type: 'single',
+        text: 'Test question',
+      },
+    };
+
+    const { result } = renderHook(() => useOnboardingAnswers(mockSlide));
+
+    act(() => {
+      result.current.setCurrentAnswer('newAnswer');
+    });
+
+    expect(result.current.currentAnswer).toBe('newAnswer');
+  });
+
+  it('should save answer for slide', async () => {
+    const mockSlide = {
+      id: '1',
+      type: 'question',
+      question: {
+        id: 'q1',
+        type: 'single',
+        text: 'Test question',
+      },
+    };
+
+    mockSaveAnswer.mockResolvedValue(undefined);
+
+    const { result } = renderHook(() => useOnboardingAnswers(mockSlide));
+
+    act(() => {
+      result.current.setCurrentAnswer('answer1');
+    });
+
+    await act(async () => {
+      await result.current.saveCurrentAnswer(mockSlide);
+    });
+
+    expect(mockSaveAnswer).toHaveBeenCalledWith('q1', 'answer1');
+  });
+
+  it('should not save answer for non-question slide', async () => {
+    const mockSlide = {
+      id: '1',
+      type: 'welcome',
+      title: 'Welcome',
+    };
+
+    const { result } = renderHook(() => useOnboardingAnswers(mockSlide));
+
+    await act(async () => {
+      await result.current.saveCurrentAnswer(mockSlide);
+    });
+
+    expect(mockSaveAnswer).not.toHaveBeenCalled();
+  });
+
+  it('should not save undefined answer', async () => {
+    const mockSlide = {
+      id: '1',
+      type: 'question',
+      question: {
+        id: 'q1',
+        type: 'single',
+        text: 'Test question',
+      },
+    };
+
+    const { result } = renderHook(() => useOnboardingAnswers(mockSlide));
+
+    await act(async () => {
+      await result.current.saveCurrentAnswer(mockSlide);
+    });
+
+    expect(mockSaveAnswer).not.toHaveBeenCalled();
+  });
+});

package/src/infrastructure/hooks/__tests__/useOnboardingNavigation.test.ts

@@ -0,0 +1,121 @@
+/**
+ * OnboardingNavigation Hook Tests
+ */
+
+import { renderHook, act } from '@testing-library/react-native';
+import { useOnboardingNavigation } from '../useOnboardingNavigation';
+
+describe('useOnboardingNavigation', () => {
+  const mockOnComplete = jest.fn();
+  const mockOnSkip = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should initialize with first slide', () => {
+    const { result } = renderHook(() =>
+      useOnboardingNavigation(3, mockOnComplete, mockOnSkip)
+    );
+
+    expect(result.current.currentIndex).toBe(0);
+    expect(result.current.isFirstSlide).toBe(true);
+    expect(result.current.isLastSlide).toBe(false);
+  });
+
+  it('should navigate to next slide', () => {
+    const { result } = renderHook(() =>
+      useOnboardingNavigation(3, mockOnComplete, mockOnSkip)
+    );
+
+    act(() => {
+      result.current.goToNext();
+    });
+
+    expect(result.current.currentIndex).toBe(1);
+    expect(result.current.isFirstSlide).toBe(false);
+    expect(result.current.isLastSlide).toBe(false);
+  });
+
+  it('should navigate to previous slide', () => {
+    const { result } = renderHook(() =>
+      useOnboardingNavigation(3, mockOnComplete, mockOnSkip)
+    );
+
+    act(() => {
+      result.current.goToNext();
+    });
+    act(() => {
+      result.current.goToPrevious();
+    });
+
+    expect(result.current.currentIndex).toBe(0);
+    expect(result.current.isFirstSlide).toBe(true);
+  });
+
+  it('should handle last slide correctly', () => {
+    const { result } = renderHook(() =>
+      useOnboardingNavigation(2, mockOnComplete, mockOnSkip)
+    );
+
+    act(() => {
+      result.current.goToNext();
+    });
+
+    expect(result.current.currentIndex).toBe(1);
+    expect(result.current.isLastSlide).toBe(true);
+  });
+
+  it('should not go beyond last slide', () => {
+    const { result } = renderHook(() =>
+      useOnboardingNavigation(2, mockOnComplete, mockOnSkip)
+    );
+
+    act(() => {
+      result.current.goToNext();
+    });
+    act(() => {
+      result.current.goToNext();
+    });
+
+    expect(result.current.currentIndex).toBe(1);
+    expect(result.current.isLastSlide).toBe(true);
+  });
+
+  it('should not go before first slide', () => {
+    const { result } = renderHook(() =>
+      useOnboardingNavigation(2, mockOnComplete, mockOnSkip)
+    );
+
+    act(() => {
+      result.current.goToPrevious();
+    });
+
+    expect(result.current.currentIndex).toBe(0);
+    expect(result.current.isFirstSlide).toBe(true);
+  });
+
+  it('should call onComplete when completing', async () => {
+    const { result } = renderHook(() =>
+      useOnboardingNavigation(1, mockOnComplete, mockOnSkip)
+    );
+
+    await act(async () => {
+      await result.current.complete();
+    });
+
+    expect(mockOnComplete).toHaveBeenCalled();
+  });
+
+  it('should call onSkip when skipping', async () => {
+    const { result } = renderHook(() =>
+      useOnboardingNavigation(1, mockOnComplete, mockOnSkip)
+    );
+
+    await act(async () => {
+      await result.current.skip();
+    });
+
+    expect(mockOnSkip).toHaveBeenCalled();
+  });
+});

package/src/infrastructure/hooks/useOnboardingAnswers.ts

@@ -7,7 +7,7 @@
 
 import { useState, useEffect, useCallback } from "react";
 import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
-import { useOnboardingStore } from "../storage/OnboardingStore";
+import { useOnboarding } from "../storage/OnboardingStore";
 
 export interface UseOnboardingAnswersReturn {
   currentAnswer: any;
@@ -24,7 +24,7 @@ export interface UseOnboardingAnswersReturn {
 export function useOnboardingAnswers(
   currentSlide: OnboardingSlide | undefined,
 ): UseOnboardingAnswersReturn {
-  const onboardingStore = useOnboardingStore();
+  const onboardingStore = useOnboarding();
   const [currentAnswer, setCurrentAnswer] = useState<any>(undefined);
 
   /**

package/src/infrastructure/storage/OnboardingStore.ts

@@ -6,187 +6,62 @@
  */
 
 import { create } from "zustand";
-import {
-  storageRepository,
-  StorageKey,
-  unwrap,
-} from "@umituz/react-native-storage";
-import type { OnboardingUserData } from "../../domain/entities/OnboardingUserData";
+import type { OnboardingStoreState } from "./OnboardingStoreState";
+import { initialOnboardingState } from "./OnboardingStoreState";
+import { createOnboardingStoreActions } from "./OnboardingStoreActions";
+import { createOnboardingStoreSelectors } from "./OnboardingStoreSelectors";
 
-interface OnboardingStore {
-  // State
-  isOnboardingComplete: boolean;
-  currentStep: number;
-  loading: boolean;
-  error: string | null;
-  userData: OnboardingUserData;
-
-  // Actions
-  initialize: (storageKey?: string) => Promise<void>;
-  complete: (storageKey?: string) => Promise<void>;
-  skip: (storageKey?: string) => Promise<void>;
+interface OnboardingStore extends OnboardingStoreState {
+  // Simple actions
   setCurrentStep: (step: number) => void;
-  reset: (storageKey?: string) => Promise<void>;
   setLoading: (loading: boolean) => void;
   setError: (error: string | null) => void;
-  saveAnswer: (questionId: string, answer: any) => Promise<void>;
-  getAnswer: (questionId: string) => any;
-  getUserData: () => OnboardingUserData;
-  setUserData: (data: OnboardingUserData) => Promise<void>;
+  setState: (state: Partial<OnboardingStoreState>) => void;
+  getState: () => OnboardingStoreState;
 }
 
-const DEFAULT_STORAGE_KEY = StorageKey.ONBOARDING_COMPLETED;
-const USER_DATA_STORAGE_KEY = "@onboarding_user_data";
-
 export const useOnboardingStore = create<OnboardingStore>((set, get) => ({
-  isOnboardingComplete: false,
-  currentStep: 0,
-  loading: true,
-  error: null,
-  userData: { answers: {} },
-
-  initialize: async (storageKey = DEFAULT_STORAGE_KEY) => {
-    set({ loading: true, error: null });
-
-    // Load completion status
-    const completionResult = await storageRepository.getString(storageKey, "false");
-    const isComplete = unwrap(completionResult, "false") === "true";
-
-    // Load user data
-    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",
-    });
-  },
-
-  complete: async (storageKey = DEFAULT_STORAGE_KEY) => {
-    set({ loading: true, error: null });
-
-    const result = await storageRepository.setString(storageKey, "true");
-
-    // Update user data with completion timestamp
-    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",
-    });
-  },
-
-  skip: async (storageKey = DEFAULT_STORAGE_KEY) => {
-    set({ loading: true, error: null });
-
-    const result = await storageRepository.setString(storageKey, "true");
-
-    // Update user data with skipped flag
-    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",
-    });
-  },
+  ...initialOnboardingState,
 
   setCurrentStep: (step) => set({ currentStep: step }),
-
-  reset: async (storageKey = DEFAULT_STORAGE_KEY) => {
-    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",
-    });
-  },
-
   setLoading: (loading) => set({ loading }),
   setError: (error) => set({ error }),
-
-  saveAnswer: async (questionId: string, answer: any) => {
-    const userData = get().userData;
-    userData.answers[questionId] = answer;
-
-    await storageRepository.setObject(USER_DATA_STORAGE_KEY, userData);
-    set({ userData: { ...userData } });
-  },
-
-  getAnswer: (questionId: string) => {
-    return get().userData.answers[questionId];
-  },
-
-  getUserData: () => {
-    return get().userData;
-  },
-
-  setUserData: async (data: OnboardingUserData) => {
-    await storageRepository.setObject(USER_DATA_STORAGE_KEY, data);
-    set({ userData: data });
-  },
+  setState: set,
+  getState: get,
 }));
 
 /**
  * Hook for accessing onboarding state
  */
 export const useOnboarding = () => {
-  const {
-    isOnboardingComplete,
-    currentStep,
-    loading,
-    error,
-    userData,
-    initialize,
-    complete,
-    skip,
-    setCurrentStep,
-    reset,
-    setLoading,
-    setError,
-    saveAnswer,
-    getAnswer,
-    getUserData,
-    setUserData,
-  } = useOnboardingStore();
+  const store = useOnboardingStore();
+  const setState = store.setState as any;
+  const getState = () => store;
+  const actions = createOnboardingStoreActions(setState, getState);
+  const selectors = createOnboardingStoreSelectors(getState);
 
   return {
-    isOnboardingComplete,
-    currentStep,
-    loading,
-    error,
-    userData,
-    initialize,
-    complete,
-    skip,
-    setCurrentStep,
-    reset,
-    setLoading,
-    setError,
-    saveAnswer,
-    getAnswer,
-    getUserData,
-    setUserData,
+    // State
+    isOnboardingComplete: store.isOnboardingComplete,
+    currentStep: store.currentStep,
+    loading: store.loading,
+    error: store.error,
+    userData: store.userData,
+    
+    // Actions
+    initialize: actions.initialize,
+    complete: actions.complete,
+    skip: actions.skip,
+    setCurrentStep: store.setCurrentStep,
+    reset: actions.reset,
+    setLoading: store.setLoading,
+    setError: store.setError,
+    saveAnswer: actions.saveAnswer,
+    setUserData: actions.setUserData,
+    
+    // Selectors
+    getAnswer: selectors.getAnswer,
+    getUserData: selectors.getUserData,
   };
 };