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

package/src/onboarding/presentation/components/questions/QuestionOptionItem.tsx

@@ -0,0 +1,115 @@
+/**
+ * Question Option Item Component
+ * Single Responsibility: Render a single selectable option
+ */
+
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
+import type { QuestionOption } from "../../../domain/entities/OnboardingQuestion";
+import type { OnboardingColors } from "../../types/OnboardingTheme";
+
+export interface QuestionOptionItemProps {
+  option: QuestionOption;
+  isSelected: boolean;
+  onPress: () => void;
+  colors: OnboardingColors;
+}
+
+export const QuestionOptionItem = ({
+  option,
+  isSelected,
+  onPress,
+  colors,
+}: QuestionOptionItemProps) => {
+  const isEmoji = option.iconType === 'emoji';
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.option,
+        {
+          backgroundColor: isSelected ? colors.iconBg : colors.featureItemBg,
+          borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
+          borderWidth: isSelected ? 2 : 1,
+        }
+      ]}
+      onPress={onPress}
+      activeOpacity={0.8}
+    >
+      {option.icon && (
+        <View style={[
+          styles.optionIcon,
+          { backgroundColor: isSelected ? colors.iconColor : colors.featureItemBg }
+        ]}>
+          {isEmoji ? (
+            <AtomicText style={{ fontSize: 24 }}>{option.icon}</AtomicText>
+          ) : (
+            <AtomicIcon
+              name={option.icon as any}
+              customSize={20}
+              customColor={isSelected ? colors.buttonTextColor : colors.subTextColor}
+            />
+          )}
+        </View>
+      )}
+      <AtomicText
+        type="bodyLarge"
+        style={[
+          styles.optionLabel,
+          {
+            color: isSelected ? colors.textColor : colors.subTextColor,
+            fontWeight: isSelected ? '700' : '500'
+          }
+        ]}
+      >
+        {option.label}
+      </AtomicText>
+      <View style={[
+        styles.checkbox,
+        {
+          borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
+          backgroundColor: isSelected ? colors.iconColor : 'transparent',
+          borderWidth: isSelected ? 0 : 2,
+        }
+      ]}>
+        {isSelected && (
+          <AtomicIcon
+            name="checkmark"
+            customSize={16}
+            customColor={colors.buttonTextColor}
+          />
+        )}
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 20,
+    padding: 16,
+    marginBottom: 8,
+  },
+  optionIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 16,
+  },
+  optionLabel: {
+    flex: 1,
+    fontSize: 16,
+  },
+  checkbox: {
+    width: 24,
+    height: 24,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+});

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

@@ -0,0 +1,66 @@
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
+import { useOnboardingProvider } from "../../providers/OnboardingProvider";
+import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
+
+export interface RatingQuestionProps {
+  question: OnboardingQuestion;
+  value: number | undefined;
+  onChange: (value: number) => void;
+}
+
+export const RatingQuestion = ({
+  question,
+  value = 0,
+  onChange,
+}: RatingQuestionProps) => {
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
+  const max = question.validation?.max ?? 5;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.stars}>
+        {Array.from({ length: max }).map((_, i) => {
+          const isFilled = i < value;
+          return (
+            <TouchableOpacity key={i} onPress={() => onChange(i + 1)} activeOpacity={0.8} style={styles.star}>
+              <AtomicIcon
+                name={isFilled ? "star" : "star-outline"}
+                customSize={48}
+                customColor={isFilled ? colors.iconColor : colors.headerButtonBorder}
+              />
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+      {value > 0 && (
+        <AtomicText type="headlineSmall" style={[styles.valueText, { color: colors.textColor, marginTop: 12 }]}>
+          {value} <AtomicText type="bodyMedium" color="textSecondary">/ {max}</AtomicText>
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    alignItems: "center",
+  },
+  stars: {
+    flexDirection: "row",
+    gap: 12,
+    marginBottom: 20,
+  },
+  star: {
+    padding: 2,
+  },
+  valueText: {
+    fontWeight: "800",
+  },
+});
+
+

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

@@ -0,0 +1,117 @@
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
+import { useOnboardingProvider } from "../../providers/OnboardingProvider";
+import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
+
+export interface SingleChoiceQuestionProps {
+  question: OnboardingQuestion;
+  value: string | undefined;
+  onChange: (value: string) => void;
+}
+
+export const SingleChoiceQuestion = ({
+  question,
+  value,
+  onChange,
+}: SingleChoiceQuestionProps) => {
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
+
+  const renderOption = (option: QuestionOption) => {
+    const isSelected = value === option.id;
+    const isEmoji = option.iconType === 'emoji';
+
+    return (
+      <TouchableOpacity
+        key={option.id}
+        style={[
+          styles.option,
+          {
+            backgroundColor: isSelected ? colors.iconBg : colors.featureItemBg,
+            borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
+            borderWidth: isSelected ? 2 : 1,
+          }
+        ]}
+        onPress={() => onChange(option.id)}
+        activeOpacity={0.8}
+      >
+        {option.icon && (
+          <View style={[
+            styles.optionIcon,
+            { backgroundColor: isSelected ? colors.iconColor : colors.featureItemBg }
+          ]}>
+            {isEmoji ? (
+              <AtomicText style={{ fontSize: 24 }}>{option.icon}</AtomicText>
+            ) : (
+              <AtomicIcon
+                name={option.icon as any}
+                customSize={20}
+                customColor={isSelected ? colors.buttonTextColor : colors.subTextColor}
+              />
+            )}
+          </View>
+        )}
+        <AtomicText type="bodyLarge" style={[styles.optionLabel, { color: isSelected ? colors.textColor : colors.subTextColor, fontWeight: isSelected ? '700' : '500' }]}>
+          {option.label}
+        </AtomicText>
+        <View style={[
+          styles.radioOuter,
+          { borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder }
+        ]}>
+          {isSelected && (
+            <View style={[styles.radioInner, { backgroundColor: colors.iconColor }]} />
+          )}
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      {question.options?.map(renderOption)}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    gap: 12,
+  },
+  option: {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: 20,
+    padding: 16,
+    marginBottom: 8,
+  },
+  optionIcon: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: 'center',
+    justifyContent: 'center',
+    marginRight: 16,
+  },
+  optionLabel: {
+    flex: 1,
+    fontSize: 16,
+  },
+  radioOuter: {
+    width: 24,
+    height: 24,
+    borderRadius: 12,
+    borderWidth: 2,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  radioInner: {
+    width: 12,
+    height: 12,
+    borderRadius: 6,
+  },
+});
+
+

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

@@ -0,0 +1,71 @@
+import React from "react";
+import { View, TextInput, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system";
+import { useOnboardingProvider } from "../../providers/OnboardingProvider";
+import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
+
+export interface TextInputQuestionProps {
+  question: OnboardingQuestion;
+  value: string | undefined;
+  onChange: (value: string) => void;
+}
+
+export const TextInputQuestion = ({
+  question,
+  value = "",
+  onChange,
+}: TextInputQuestionProps) => {
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
+  const { validation } = question;
+
+  return (
+    <View style={styles.container}>
+      <TextInput
+        style={[
+          styles.input,
+          {
+            backgroundColor: colors.featureItemBg,
+            borderColor: value ? colors.iconColor : colors.headerButtonBorder,
+            color: colors.textColor,
+          }
+        ]}
+        value={value}
+        onChangeText={onChange}
+        placeholder={question.placeholder}
+        placeholderTextColor={colors.subTextColor}
+        maxLength={validation?.maxLength}
+        multiline={(validation?.maxLength ?? 0) > 100}
+        numberOfLines={(validation?.maxLength ?? 0) > 100 ? 5 : 1}
+        autoCapitalize="sentences"
+        autoCorrect={true}
+        textAlignVertical="top"
+      />
+      {validation?.maxLength && (
+        <AtomicText type="labelSmall" style={[styles.charCount, { color: colors.subTextColor }]}>
+          {value.length} / {validation.maxLength}
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+  input: {
+    borderRadius: 16,
+    padding: 18,
+    fontSize: 16,
+    borderWidth: 2,
+    minHeight: 60,
+  },
+  charCount: {
+    textAlign: "right",
+    marginTop: 8,
+    fontWeight: "600",
+  },
+});
+

package/src/onboarding/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', () => ({
+  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';
+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 custom background disabled', () => {
+    const { result } = renderHook(() =>
+      useOnboardingContainerStyle({ useCustomBackground: false })
+    );
+
+    expect(result.current.containerStyle).toEqual([
+      {
+        paddingTop: 44,
+        backgroundColor: '#ffffff',
+      },
+    ]);
+  });
+
+  it('should return container style with custom background enabled', () => {
+    const { result } = renderHook(() =>
+      useOnboardingContainerStyle({ useCustomBackground: 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({ useCustomBackground: 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({ useCustomBackground: false })
+    );
+
+    expect(result.current.containerStyle[0].backgroundColor).toBe('#f0f0f0');
+  });
+});

package/src/onboarding/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";
+
+export interface UseOnboardingContainerStyleProps {
+  useCustomBackground: boolean;
+}
+
+export interface UseOnboardingContainerStyleReturn {
+  containerStyle: any;
+}
+
+export function useOnboardingContainerStyle({
+  useCustomBackground,
+}: UseOnboardingContainerStyleProps): UseOnboardingContainerStyleReturn {
+  const insets = useSafeAreaInsets();
+  const tokens = useAppDesignTokens();
+
+  const containerStyle = useMemo(
+    () => [
+      {
+        paddingTop: insets.top,
+        backgroundColor: useCustomBackground ? "transparent" : tokens.colors.backgroundPrimary,
+      },
+    ],
+    [insets.top, useCustomBackground, tokens.colors.backgroundPrimary],
+  );
+
+  return {
+    containerStyle,
+  };
+}

package/src/onboarding/presentation/hooks/useOnboardingGestures.ts

@@ -0,0 +1,45 @@
+/**
+ * useOnboardingGestures Hook
+ * Handles swipe gestures for onboarding navigation
+ */
+
+import { useRef } from "react";
+import { PanResponder } from "react-native";
+
+interface UseOnboardingGesturesProps {
+  isFirstSlide: boolean;
+  isAnswerValid: boolean;
+  onNext: () => void;
+  onBack: () => void;
+}
+
+export const useOnboardingGestures = ({
+  isFirstSlide,
+  isAnswerValid,
+  onNext,
+  onBack,
+}: UseOnboardingGesturesProps) => {
+  const panResponder = useRef(
+    PanResponder.create({
+      onMoveShouldSetPanResponder: (_, gestureState) => {
+        // Only trigger for horizontal swipes
+        return Math.abs(gestureState.dx) > 20 && Math.abs(gestureState.dy) < 40;
+      },
+      onPanResponderRelease: (_, gestureState) => {
+        if (gestureState.dx > 50) {
+          // Swipe Right -> Previous
+          if (!isFirstSlide) {
+            onBack();
+          }
+        } else if (gestureState.dx < -50) {
+          // Swipe Left -> Next
+          if (isAnswerValid) {
+            onNext();
+          }
+        }
+      },
+    })
+  ).current;
+
+  return panResponder;
+};

package/src/onboarding/presentation/hooks/useOnboardingScreenHandlers.ts

@@ -0,0 +1,114 @@
+/**
+ * useOnboardingScreenHandlers Hook
+ * Single Responsibility: Handle onboarding screen user interactions
+ */
+
+import { useCallback } from "react";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import { SlideManager } from "../../infrastructure/services/SlideManager";
+
+export interface UseOnboardingScreenHandlersProps {
+  filteredSlides: OnboardingSlide[];
+  currentSlide: OnboardingSlide | undefined;
+  currentIndex: number;
+  isLastSlide: boolean;
+  saveCurrentAnswer: (slide: OnboardingSlide) => Promise<void>;
+  completeOnboarding: () => Promise<void>;
+  goToNext: () => void;
+  goToPrevious: () => void;
+  skipOnboarding: () => Promise<void>;
+  loadAnswerForSlide: (slide: OnboardingSlide) => void;
+}
+
+export interface UseOnboardingScreenHandlersReturn {
+  handleNext: () => Promise<void>;
+  handlePrevious: () => void;
+  handleSkip: () => Promise<void>;
+}
+
+export function useOnboardingScreenHandlers({
+  filteredSlides,
+  currentSlide,
+  currentIndex,
+  isLastSlide,
+  saveCurrentAnswer,
+  completeOnboarding,
+  goToNext,
+  goToPrevious,
+  skipOnboarding,
+  loadAnswerForSlide,
+}: UseOnboardingScreenHandlersProps): UseOnboardingScreenHandlersReturn {
+  const handleNext = useCallback(async () => {
+    if (!currentSlide) return;
+
+    try {
+      await saveCurrentAnswer(currentSlide);
+
+      if (isLastSlide) {
+        await completeOnboarding();
+      } else {
+        goToNext();
+
+        const nextSlide = SlideManager.getSlideAtIndex(
+          filteredSlides,
+          currentIndex + 1
+        );
+
+        if (nextSlide) {
+          loadAnswerForSlide(nextSlide);
+        }
+      }
+    } catch (error) {
+      if (__DEV__) {
+        console.error("[useOnboardingScreenHandlers] Error in handleNext:", error);
+      }
+    }
+  }, [
+    currentSlide,
+    isLastSlide,
+    saveCurrentAnswer,
+    completeOnboarding,
+    goToNext,
+    filteredSlides,
+    currentIndex,
+    loadAnswerForSlide,
+  ]);
+
+  const handlePrevious = useCallback(() => {
+    try {
+      goToPrevious();
+
+      const prevSlide = SlideManager.getSlideAtIndex(
+        filteredSlides,
+        currentIndex - 1
+      );
+
+      if (prevSlide) {
+        loadAnswerForSlide(prevSlide);
+      }
+    } catch (error) {
+      if (__DEV__) {
+        console.error(
+          "[useOnboardingScreenHandlers] Error in handlePrevious:",
+          error
+        );
+      }
+    }
+  }, [goToPrevious, filteredSlides, currentIndex, loadAnswerForSlide]);
+
+  const handleSkip = useCallback(async () => {
+    try {
+      await skipOnboarding();
+    } catch (error) {
+      if (__DEV__) {
+        console.error("[useOnboardingScreenHandlers] Error in handleSkip:", error);
+      }
+    }
+  }, [skipOnboarding]);
+
+  return {
+    handleNext,
+    handlePrevious,
+    handleSkip,
+  };
+}