@umituz/react-native-onboarding 2.9.0 → 3.0.0

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

@@ -6,6 +6,7 @@
 
 import React from "react";
 import { View, TextInput, StyleSheet, Text } from "react-native";
+import { useTheme } from "@umituz/react-native-design-system-theme";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 
 export interface TextInputQuestionProps {
@@ -19,16 +20,24 @@ export const TextInputQuestion: React.FC<TextInputQuestionProps> = ({
   value = "",
   onChange,
 }) => {
+  const { tokens } = useTheme() as any;
   const { validation } = question;
 
   return (
     <View style={styles.container}>
       <TextInput
-        style={styles.input}
+        style={[
+          styles.input,
+          {
+            backgroundColor: tokens.colors.backgroundSecondary,
+            borderColor: tokens.colors.borderSecondary,
+            color: tokens.colors.textPrimary,
+          }
+        ]}
         value={value}
         onChangeText={onChange}
         placeholder={question.placeholder || "Type your answer..."}
-        placeholderTextColor="rgba(255, 255, 255, 0.5)"
+        placeholderTextColor={tokens.colors.textSecondary}
         maxLength={validation?.maxLength}
         multiline={validation?.maxLength ? validation.maxLength > 100 : false}
         numberOfLines={validation?.maxLength && validation.maxLength > 100 ? 4 : 1}
@@ -36,7 +45,7 @@ export const TextInputQuestion: React.FC<TextInputQuestionProps> = ({
         autoCorrect={true}
       />
       {validation?.maxLength && (
-        <Text style={styles.charCount}>
+        <Text style={[styles.charCount, { color: tokens.colors.textSecondary }]}>
           {value.length} / {validation.maxLength}
         </Text>
       )}
@@ -49,18 +58,14 @@ const styles = StyleSheet.create({
     width: "100%",
   },
   input: {
-    backgroundColor: "rgba(255, 255, 255, 0.15)",
     borderRadius: 12,
     padding: 16,
     fontSize: 16,
-    color: "#FFFFFF",
     borderWidth: 2,
-    borderColor: "rgba(255, 255, 255, 0.3)",
     minHeight: 56,
   },
   charCount: {
     fontSize: 13,
-    color: "rgba(255, 255, 255, 0.6)",
     textAlign: "right",
     marginTop: 8,
   },

package/src/presentation/hooks/__tests__/useOnboardingContainerStyle.test.ts

@@ -0,0 +1,96 @@
+/**
+ * OnboardingContainerStyle Hook Tests
+ */
+
+import { renderHook } from '@testing-library/react-native';
+import { useOnboardingContainerStyle } from '../useOnboardingContainerStyle';
+
+// Mock theme hook
+jest.mock('@umituz/react-native-design-system-theme', () => ({
+  useAppDesignTokens: jest.fn(),
+}));
+
+// Mock safe area insets
+jest.mock('react-native-safe-area-context', () => ({
+  useSafeAreaInsets: jest.fn(),
+}));
+
+import { useAppDesignTokens } from '@umituz/react-native-design-system-theme';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+
+const mockUseAppDesignTokens = useAppDesignTokens as jest.MockedFunction<typeof useAppDesignTokens>;
+const mockUseSafeAreaInsets = useSafeAreaInsets as jest.MockedFunction<typeof useSafeAreaInsets>;
+
+describe('useOnboardingContainerStyle', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    
+    mockUseSafeAreaInsets.mockReturnValue({
+      top: 44,
+      bottom: 34,
+      left: 0,
+      right: 0,
+    });
+
+    mockUseAppDesignTokens.mockReturnValue({
+      colors: {
+        backgroundPrimary: '#ffffff',
+      },
+    } as any);
+  });
+
+  it('should return container style with gradient disabled', () => {
+    const { result } = renderHook(() =>
+      useOnboardingContainerStyle({ useGradient: false })
+    );
+
+    expect(result.current.containerStyle).toEqual([
+      {
+        paddingTop: 44,
+        backgroundColor: '#ffffff',
+      },
+    ]);
+  });
+
+  it('should return container style with gradient enabled', () => {
+    const { result } = renderHook(() =>
+      useOnboardingContainerStyle({ useGradient: true })
+    );
+
+    expect(result.current.containerStyle).toEqual([
+      {
+        paddingTop: 44,
+        backgroundColor: 'transparent',
+      },
+    ]);
+  });
+
+  it('should use correct top inset', () => {
+    mockUseSafeAreaInsets.mockReturnValue({
+      top: 50,
+      bottom: 34,
+      left: 0,
+      right: 0,
+    });
+
+    const { result } = renderHook(() =>
+      useOnboardingContainerStyle({ useGradient: false })
+    );
+
+    expect(result.current.containerStyle[0].paddingTop).toBe(50);
+  });
+
+  it('should use theme background color', () => {
+    mockUseAppDesignTokens.mockReturnValue({
+      colors: {
+        backgroundPrimary: '#f0f0f0',
+      },
+    } as any);
+
+    const { result } = renderHook(() =>
+      useOnboardingContainerStyle({ useGradient: false })
+    );
+
+    expect(result.current.containerStyle[0].backgroundColor).toBe('#f0f0f0');
+  });
+});

package/src/presentation/hooks/useOnboardingContainerStyle.ts

@@ -0,0 +1,37 @@
+/**
+ * useOnboardingContainerStyle Hook
+ * Single Responsibility: Manage container styling for onboarding screen
+ */
+
+import { useMemo } from "react";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+
+export interface UseOnboardingContainerStyleProps {
+  useGradient: boolean;
+}
+
+export interface UseOnboardingContainerStyleReturn {
+  containerStyle: any;
+}
+
+export function useOnboardingContainerStyle({
+  useGradient,
+}: UseOnboardingContainerStyleProps): UseOnboardingContainerStyleReturn {
+  const insets = useSafeAreaInsets();
+  const tokens = useAppDesignTokens();
+
+  const containerStyle = useMemo(
+    () => [
+      {
+        paddingTop: insets.top,
+        backgroundColor: useGradient ? "transparent" : tokens.colors.backgroundPrimary,
+      },
+    ],
+    [insets.top, useGradient, tokens.colors.backgroundPrimary],
+  );
+
+  return {
+    containerStyle,
+  };
+}

package/src/presentation/hooks/useOnboardingScreenState.ts

@@ -1,15 +1,14 @@
 /**
  * useOnboardingScreenState Hook
- * Single Responsibility: Manage onboarding screen state and handlers
+ * Single Responsibility: Coordinate onboarding screen state and handlers
  */
 
-import { useMemo } from "react";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
+import { useMemo, useCallback, useEffect } from "react";
 import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
-import { useOnboardingStore } from "../../infrastructure/storage/OnboardingStore";
+import { useOnboarding } from "../../infrastructure/storage/OnboardingStore";
 import { useOnboardingNavigation } from "../../infrastructure/hooks/useOnboardingNavigation";
 import { useOnboardingAnswers } from "../../infrastructure/hooks/useOnboardingAnswers";
+import { useOnboardingContainerStyle } from "./useOnboardingContainerStyle";
 import { OnboardingSlideService } from "../../infrastructure/services/OnboardingSlideService";
 import { OnboardingValidationService } from "../../infrastructure/services/OnboardingValidationService";
 import { shouldUseGradient } from "../../infrastructure/utils/gradientUtils";
@@ -45,18 +44,16 @@ export function useOnboardingScreenState({
   onSkip,
   globalUseGradient = false,
 }: UseOnboardingScreenStateProps): UseOnboardingScreenStateReturn {
-  const insets = useSafeAreaInsets();
-  const tokens = useAppDesignTokens();
-  const onboardingStore = useOnboardingStore();
+  const onboardingStore = useOnboarding();
 
   // Filter slides using service
   const filteredSlides = useMemo(() => {
     if (!slides || !Array.isArray(slides) || slides.length === 0) {
       return [];
     }
-    const userData = onboardingStore.getUserData();
+    const userData = onboardingStore.userData;
     return OnboardingSlideService.filterSlides(slides, userData);
-  }, [slides, onboardingStore]);
+  }, [slides, onboardingStore.userData]);
 
   // Navigation hook
   const {
@@ -97,35 +94,59 @@ export function useOnboardingScreenState({
     saveCurrentAnswer,
   } = useOnboardingAnswers(currentSlide);
 
-  // Handle next slide
-  const handleNext = async () => {
-    await saveCurrentAnswer(currentSlide);
-    if (isLastSlide) {
-      await completeOnboarding();
-    } else {
-      goToNext();
-      const nextSlide = OnboardingSlideService.getSlideAtIndex(
+  // Handle next slide with useCallback for performance
+  const handleNext = useCallback(async () => {
+    if (!currentSlide) return;
+    
+    try {
+      await saveCurrentAnswer(currentSlide);
+      if (isLastSlide) {
+        await completeOnboarding();
+      } else {
+        goToNext();
+        const nextSlide = OnboardingSlideService.getSlideAtIndex(
+          filteredSlides,
+          currentIndex + 1,
+        );
+        if (nextSlide) {
+          loadAnswerForSlide(nextSlide);
+        }
+      }
+    } catch (error) {
+      if (__DEV__) {
+        console.error('[useOnboardingScreenState] Error in handleNext:', error);
+      }
+    }
+  }, [currentSlide, isLastSlide, saveCurrentAnswer, completeOnboarding, goToNext, filteredSlides, currentIndex, loadAnswerForSlide]);
+
+  // Handle previous slide with useCallback for performance
+  const handlePrevious = useCallback(() => {
+    try {
+      goToPrevious();
+      const prevSlide = OnboardingSlideService.getSlideAtIndex(
         filteredSlides,
-        currentIndex + 1,
+        currentIndex - 1,
       );
-      loadAnswerForSlide(nextSlide);
+      if (prevSlide) {
+        loadAnswerForSlide(prevSlide);
+      }
+    } catch (error) {
+      if (__DEV__) {
+        console.error('[useOnboardingScreenState] Error in handlePrevious:', error);
+      }
     }
-  };
-
-  // Handle previous slide
-  const handlePrevious = () => {
-    goToPrevious();
-    const prevSlide = OnboardingSlideService.getSlideAtIndex(
-      filteredSlides,
-      currentIndex - 1,
-    );
-    loadAnswerForSlide(prevSlide);
-  };
-
-  // Handle skip
-  const handleSkip = async () => {
-    await skipOnboarding();
-  };
+  }, [goToPrevious, filteredSlides, currentIndex, loadAnswerForSlide]);
+
+  // Handle skip with useCallback for performance
+  const handleSkip = useCallback(async () => {
+    try {
+      await skipOnboarding();
+    } catch (error) {
+      if (__DEV__) {
+        console.error('[useOnboardingScreenState] Error in handleSkip:', error);
+      }
+    }
+  }, [skipOnboarding]);
 
   // Check if gradient should be used
   const useGradient = shouldUseGradient(currentSlide, globalUseGradient);
@@ -141,16 +162,18 @@ export function useOnboardingScreenState({
     );
   }, [currentSlide, currentAnswer]);
 
-  // Container style
-  const containerStyle = useMemo(
-    () => [
-      {
-        paddingTop: insets.top,
-        backgroundColor: useGradient ? "transparent" : tokens.colors.backgroundPrimary,
-      },
-    ],
-    [insets.top, useGradient, tokens.colors.backgroundPrimary],
-  );
+  // Container style using dedicated hook
+  const { containerStyle } = useOnboardingContainerStyle({ useGradient });
+
+  // Cleanup effect to prevent memory leaks
+  useEffect(() => {
+    return () => {
+      // Cleanup any pending operations or subscriptions
+      if (__DEV__) {
+        console.log('[useOnboardingScreenState] Cleanup completed');
+      }
+    };
+  }, []);
 
   return {
     filteredSlides,

package/src/presentation/screens/OnboardingScreen.tsx

@@ -96,6 +96,11 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
     globalUseGradient,
   });
 
+  // Early return if no slides - prevents rendering empty/broken screen
+  if (filteredSlides.length === 0) {
+    return null;
+  }
+
   return (
     <OnboardingScreenContent
       containerStyle={[styles.container, containerStyle]}