@umituz/react-native-design-system 2.6.128 → 2.7.0

package/src/onboarding/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/onboarding/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/onboarding/infrastructure/hooks/useOnboardingAnswers.ts

@@ -0,0 +1,69 @@
+/**
+ * useOnboardingAnswers Hook
+ *
+ * Manages answer state and operations for onboarding questions
+ * Follows Single Responsibility Principle
+ */
+
+import { useState, useEffect, useCallback } from "react";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import { useOnboarding } from "../storage/OnboardingStore";
+
+export interface UseOnboardingAnswersReturn {
+  currentAnswer: any;
+  setCurrentAnswer: (answer: any) => void;
+  loadAnswerForSlide: (slide: OnboardingSlide | undefined) => void;
+  saveCurrentAnswer: (slide: OnboardingSlide | undefined) => Promise<void>;
+}
+
+/**
+ * Hook for managing onboarding question answers
+ * @param currentSlide - The current slide being displayed
+ * @returns Answer state and operations
+ */
+export function useOnboardingAnswers(
+  currentSlide: OnboardingSlide | undefined,
+): UseOnboardingAnswersReturn {
+  const onboardingStore = useOnboarding();
+  const [currentAnswer, setCurrentAnswer] = useState<any>(undefined);
+
+  /**
+   * Load answer for a specific slide
+   */
+  const loadAnswerForSlide = useCallback(
+    (slide: OnboardingSlide | undefined) => {
+      if (slide?.question) {
+        const savedAnswer = onboardingStore.getAnswer(slide.question.id);
+        setCurrentAnswer(savedAnswer ?? slide.question.defaultValue);
+      } else {
+        setCurrentAnswer(undefined);
+      }
+    },
+    [onboardingStore],
+  );
+
+  /**
+   * Save current answer for a slide
+   */
+  const saveCurrentAnswer = useCallback(
+    async (slide: OnboardingSlide | undefined) => {
+      if (slide?.question && currentAnswer !== undefined) {
+        await onboardingStore.saveAnswer(slide.question.id, currentAnswer);
+      }
+    },
+    [currentAnswer, onboardingStore],
+  );
+
+  // Load answer when slide changes
+  useEffect(() => {
+    loadAnswerForSlide(currentSlide);
+  }, [currentSlide, loadAnswerForSlide]);
+
+  return {
+    currentAnswer,
+    setCurrentAnswer,
+    loadAnswerForSlide,
+    saveCurrentAnswer,
+  };
+}
+

package/src/onboarding/infrastructure/hooks/useOnboardingNavigation.ts

@@ -0,0 +1,75 @@
+/**
+ * useOnboardingNavigation Hook
+ *
+ * Manages navigation state and callbacks for onboarding flow
+ */
+
+import { useState, useCallback } from "react";
+import { DeviceEventEmitter } from "react-native";
+
+export interface UseOnboardingNavigationReturn {
+  currentIndex: number;
+  goToNext: () => void;
+  goToPrevious: () => void;
+  complete: () => Promise<void>;
+  skip: () => Promise<void>;
+  isLastSlide: boolean;
+  isFirstSlide: boolean;
+}
+
+/**
+ * Hook for managing onboarding navigation
+ *
+ * @param totalSlides - Total number of slides
+ * @param onComplete - Callback when onboarding completes
+ * @param onSkip - Callback when onboarding is skipped
+ * @returns Navigation state and handlers
+ */
+export const useOnboardingNavigation = (
+  totalSlides: number,
+  onComplete?: () => void | Promise<void>,
+  onSkip?: () => void | Promise<void>,
+): UseOnboardingNavigationReturn => {
+  const [currentIndex, setCurrentIndex] = useState(0);
+
+  const goToNext = useCallback(() => {
+    if (currentIndex < totalSlides - 1) {
+      setCurrentIndex(currentIndex + 1);
+    }
+  }, [currentIndex, totalSlides]);
+
+  const goToPrevious = useCallback(() => {
+    if (currentIndex > 0) {
+      setCurrentIndex(currentIndex - 1);
+    }
+  }, [currentIndex]);
+
+  const complete = useCallback(async () => {
+    if (onComplete) {
+      await onComplete();
+    }
+    // Emit event for app-level handling
+     
+    if (__DEV__) console.log("[useOnboardingNavigation] Emitting onboarding-complete event");
+    DeviceEventEmitter.emit("onboarding-complete");
+  }, [onComplete]);
+
+  const skip = useCallback(async () => {
+    if (onSkip) {
+      await onSkip();
+    }
+    // Emit event for app-level handling
+    DeviceEventEmitter.emit("onboarding-complete");
+  }, [onSkip]);
+
+  return {
+    currentIndex,
+    goToNext,
+    goToPrevious,
+    complete,
+    skip,
+    isLastSlide: currentIndex === totalSlides - 1,
+    isFirstSlide: currentIndex === 0,
+  };
+};
+

package/src/onboarding/infrastructure/services/SlideManager.ts

@@ -0,0 +1,53 @@
+/**
+ * Onboarding Slide Service
+ *
+ * Business logic for filtering and processing onboarding slides
+ * Follows Single Responsibility Principle
+ */
+
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import type { OnboardingUserData } from "../../domain/entities/OnboardingUserData";
+
+/**
+ * SlideManager
+ */
+export class SlideManager {
+  /**
+   * Filter slides based on skipIf conditions
+   * @param slides - All available slides
+   * @param userData - User's onboarding data including answers
+   * @returns Filtered slides that should be shown
+   */
+  static filterSlides(
+    slides: OnboardingSlide[] | undefined,
+    userData: OnboardingUserData,
+  ): OnboardingSlide[] {
+    // Safety check: return empty array if slides is undefined or not an array
+    if (!slides || !Array.isArray(slides)) {
+      return [];
+    }
+    return slides.filter((slide) => {
+      if (slide.skipIf) {
+        return !slide.skipIf(userData.answers);
+      }
+      return true;
+    });
+  }
+
+  /**
+   * Get slide at specific index
+   * @param slides - Filtered slides array
+   * @param index - Slide index
+   * @returns Slide at index or undefined
+   */
+  static getSlideAtIndex(
+    slides: OnboardingSlide[],
+    index: number,
+  ): OnboardingSlide | undefined {
+    if (index < 0 || index >= slides.length) {
+      return undefined;
+    }
+    return slides[index];
+  }
+}
+

package/src/onboarding/infrastructure/services/ValidationManager.ts

@@ -0,0 +1,127 @@
+/**
+ * Onboarding Validation Service
+ *
+ * Business logic for validating onboarding question answers
+ * Follows Single Responsibility Principle
+ */
+
+import type { OnboardingQuestion } from "../../domain/entities/OnboardingQuestion";
+
+/**
+ * ValidationManager
+ */
+export class ValidationManager {
+  /**
+   * Validate answer against question validation rules
+   * @param question - The question to validate against
+   * @param answer - The answer to validate
+   * @returns true if valid, false otherwise
+   */
+  static validateAnswer(
+    question: OnboardingQuestion,
+    answer: any,
+  ): boolean {
+    const { validation } = question;
+    if (!validation) {
+      return true;
+    }
+
+    // Required validation
+    if (validation.required && !answer) {
+      return false;
+    }
+
+    // Type-specific validations
+    switch (question.type) {
+      case "multiple_choice":
+        return this.validateMultipleChoice(answer, validation);
+      case "text_input":
+        return this.validateTextInput(answer, validation);
+      case "rating":
+        return this.validateNumeric(answer, validation);
+      default:
+        break;
+    }
+
+    // Custom validator
+    if (validation.customValidator) {
+      const customResult = validation.customValidator(answer);
+      return customResult === true;
+    }
+
+    return true;
+  }
+
+  /**
+   * Validate multiple choice answer
+   */
+  private static validateMultipleChoice(
+    answer: any,
+    validation: OnboardingQuestion["validation"],
+  ): boolean {
+    if (!validation) return true;
+
+    if (validation.minSelections) {
+      if (!answer || !Array.isArray(answer) || answer.length < validation.minSelections) {
+        return false;
+      }
+    }
+
+    if (validation.maxSelections) {
+      if (Array.isArray(answer) && answer.length > validation.maxSelections) {
+        return false;
+      }
+    }
+
+    return true;
+  }
+
+  /**
+   * Validate text input answer
+   */
+  private static validateTextInput(
+    answer: any,
+    validation: OnboardingQuestion["validation"],
+  ): boolean {
+    if (!validation) return true;
+
+    if (typeof answer !== "string") {
+      return false;
+    }
+
+    if (validation.minLength && answer.length < validation.minLength) {
+      return false;
+    }
+
+    if (validation.maxLength && answer.length > validation.maxLength) {
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * Validate numeric answer (rating)
+   */
+  private static validateNumeric(
+    answer: any,
+    validation: OnboardingQuestion["validation"],
+  ): boolean {
+    if (!validation) return true;
+
+    if (typeof answer !== "number") {
+      return false;
+    }
+
+    if (validation.min !== undefined && answer < validation.min) {
+      return false;
+    }
+
+    if (validation.max !== undefined && answer > validation.max) {
+      return false;
+    }
+
+    return true;
+  }
+}
+

package/src/onboarding/infrastructure/storage/OnboardingStore.ts

@@ -0,0 +1,99 @@
+/**
+ * Onboarding Store
+ *
+ * Zustand store for managing onboarding completion state
+ * Uses @umituz/react-native-storage for persistence
+ */
+
+import { useMemo } from "react";
+import { createStore } from "@umituz/react-native-storage";
+import type { OnboardingStoreState } from "./OnboardingStoreState";
+import { initialOnboardingState } from "./OnboardingStoreState";
+import { createOnboardingStoreActions } from "./OnboardingStoreActions";
+import type { OnboardingUserData } from "../../domain/entities/OnboardingUserData";
+import { createOnboardingStoreSelectors } from "./OnboardingStoreSelectors";
+
+interface OnboardingActions {
+  // Simple actions
+  setCurrentStep: (step: number) => void;
+  setLoading: (loading: boolean) => void;
+  setError: (error: string | null) => void;
+  setState: (state: Partial<OnboardingStoreState>) => void;
+  getState: () => OnboardingStoreState;
+  // Async actions for initialization (match OnboardingStoreActions signatures)
+  initialize: (storageKey?: string) => Promise<void>;
+  complete: (storageKey?: string) => Promise<void>;
+  skip: (storageKey?: string) => Promise<void>;
+  reset: (storageKey?: string) => Promise<void>;
+  saveAnswer: (questionId: string, answer: unknown) => Promise<void>;
+  setUserData: (data: OnboardingUserData) => Promise<void>;
+}
+
+export const useOnboardingStore = createStore<
+  OnboardingStoreState,
+  OnboardingActions
+>({
+  name: "onboarding-store",
+  initialState: initialOnboardingState,
+  persist: false,
+  actions: (
+    set: (state: Partial<OnboardingStoreState>) => void,
+    get: () => OnboardingStoreState
+  ): OnboardingActions => {
+    const actions = createOnboardingStoreActions(set, get);
+
+    return {
+      setCurrentStep: (step: number) => set({ currentStep: step }),
+      setLoading: (loading: boolean) => set({ loading }),
+      setError: (error: string | null) => set({ error }),
+      setState: set,
+      getState: get,
+
+      // Async actions from actions module
+      initialize: actions.initialize,
+      complete: actions.complete,
+      skip: actions.skip,
+      reset: actions.reset,
+      saveAnswer: actions.saveAnswer,
+      setUserData: actions.setUserData,
+    };
+  },
+});
+
+/**
+ * Hook for accessing onboarding state
+ * Memoized to prevent unnecessary re-renders in consumer components
+ */
+export const useOnboarding = () => {
+  const store = useOnboardingStore();
+  const setState = store.setState;
+  const getState = store.getState;
+
+  const actions = useMemo(() => createOnboardingStoreActions(setState, getState), [setState, getState]);
+  const selectors = useMemo(() => createOnboardingStoreSelectors(getState), [getState]);
+
+  return useMemo(() => ({
+    // 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,
+  }), [store, actions, selectors]);
+};
+