@umituz/react-native-onboarding 1.0.9 → 2.0.1

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

@@ -0,0 +1,119 @@
+/**
+ * Single Choice Question Component
+ *
+ * Radio button style question for single selection
+ */
+
+import React from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
+import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
+
+export interface SingleChoiceQuestionProps {
+  question: OnboardingQuestion;
+  value: string | undefined;
+  onChange: (value: string) => void;
+}
+
+export const SingleChoiceQuestion: React.FC<SingleChoiceQuestionProps> = ({
+  question,
+  value,
+  onChange,
+}) => {
+  const isEmoji = (icon: string) =>
+    /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(icon);
+
+  const renderOption = (option: QuestionOption) => {
+    const isSelected = value === option.id;
+
+    return (
+      <TouchableOpacity
+        key={option.id}
+        style={[styles.option, isSelected && styles.optionSelected]}
+        onPress={() => onChange(option.id)}
+        activeOpacity={0.7}
+      >
+        {option.icon && (
+          <View style={styles.optionIcon}>
+            {isEmoji(option.icon) ? (
+              <Text style={styles.emoji}>{option.icon}</Text>
+            ) : (
+              <AtomicIcon
+                name={option.icon as any}
+                customSize={24}
+                customColor={isSelected ? "#FFFFFF" : "rgba(255, 255, 255, 0.8)"}
+              />
+            )}
+          </View>
+        )}
+        <Text style={[styles.optionLabel, isSelected && styles.optionLabelSelected]}>
+          {option.label}
+        </Text>
+        <View style={[styles.radio, isSelected && styles.radioSelected]}>
+          {isSelected && <View style={styles.radioInner} />}
+        </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",
+    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)",
+  },
+  optionIcon: {
+    marginRight: 12,
+  },
+  emoji: {
+    fontSize: 24,
+  },
+  optionLabel: {
+    flex: 1,
+    fontSize: 16,
+    color: "rgba(255, 255, 255, 0.9)",
+    fontWeight: "500",
+  },
+  optionLabelSelected: {
+    color: "#FFFFFF",
+    fontWeight: "600",
+  },
+  radio: {
+    width: 24,
+    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",
+  },
+});
+

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

@@ -0,0 +1,81 @@
+/**
+ * Slider Question Component
+ *
+ * Slider for numeric value selection
+ */
+
+import React from "react";
+import { View, Text, StyleSheet } from "react-native";
+import Slider from "@react-native-community/slider";
+import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
+
+export interface SliderQuestionProps {
+  question: OnboardingQuestion;
+  value: number | undefined;
+  onChange: (value: number) => void;
+}
+
+export const SliderQuestion: React.FC<SliderQuestionProps> = ({
+  question,
+  value,
+  onChange,
+}) => {
+  const { validation } = question;
+  const min = validation?.min ?? 0;
+  const max = validation?.max ?? 100;
+  const currentValue = value ?? min;
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.valueContainer}>
+        <Text style={styles.valueText}>{currentValue}</Text>
+      </View>
+      <Slider
+        style={styles.slider}
+        minimumValue={min}
+        maximumValue={max}
+        value={currentValue}
+        onValueChange={onChange}
+        minimumTrackTintColor="#FFFFFF"
+        maximumTrackTintColor="rgba(255, 255, 255, 0.3)"
+        thumbTintColor="#FFFFFF"
+        step={1}
+      />
+      <View style={styles.labels}>
+        <Text style={styles.label}>{min}</Text>
+        <Text style={styles.label}>{max}</Text>
+      </View>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    paddingHorizontal: 8,
+  },
+  valueContainer: {
+    alignItems: "center",
+    marginBottom: 16,
+  },
+  valueText: {
+    fontSize: 48,
+    fontWeight: "bold",
+    color: "#FFFFFF",
+  },
+  slider: {
+    width: "100%",
+    height: 40,
+  },
+  labels: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: 8,
+  },
+  label: {
+    fontSize: 14,
+    color: "rgba(255, 255, 255, 0.7)",
+    fontWeight: "500",
+  },
+});
+

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

@@ -0,0 +1,68 @@
+/**
+ * Text Input Question Component
+ *
+ * Text input field for free-form text answers
+ */
+
+import React from "react";
+import { View, TextInput, StyleSheet, Text } from "react-native";
+import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
+
+export interface TextInputQuestionProps {
+  question: OnboardingQuestion;
+  value: string | undefined;
+  onChange: (value: string) => void;
+}
+
+export const TextInputQuestion: React.FC<TextInputQuestionProps> = ({
+  question,
+  value = "",
+  onChange,
+}) => {
+  const { validation } = question;
+
+  return (
+    <View style={styles.container}>
+      <TextInput
+        style={styles.input}
+        value={value}
+        onChangeText={onChange}
+        placeholder={question.placeholder || "Type your answer..."}
+        placeholderTextColor="rgba(255, 255, 255, 0.5)"
+        maxLength={validation?.maxLength}
+        multiline={validation?.maxLength ? validation.maxLength > 100 : false}
+        numberOfLines={validation?.maxLength && validation.maxLength > 100 ? 4 : 1}
+        autoCapitalize="sentences"
+        autoCorrect={true}
+      />
+      {validation?.maxLength && (
+        <Text style={styles.charCount}>
+          {value.length} / {validation.maxLength}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    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/screens/OnboardingScreen.tsx

@@ -5,7 +5,7 @@
  * Generic and reusable across hundreds of apps
  */
 
-import React, { useMemo } from "react";
+import React, { useMemo, useState, useEffect } from "react";
 import { View, StyleSheet, StatusBar } from "react-native";
 import { LinearGradient } from "expo-linear-gradient";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
@@ -14,6 +14,7 @@ import { useOnboardingNavigation } from "../../infrastructure/hooks/useOnboardin
 import { useOnboardingStore } from "../../infrastructure/storage/OnboardingStore";
 import { OnboardingHeader } from "../components/OnboardingHeader";
 import { OnboardingSlide as OnboardingSlideComponent } from "../components/OnboardingSlide";
+import { QuestionSlide } from "../components/QuestionSlide";
 import { OnboardingFooter } from "../components/OnboardingFooter";
 
 export interface OnboardingScreenProps extends OnboardingOptions {
@@ -83,8 +84,25 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
 }) => {
   const insets = useSafeAreaInsets();
   const onboardingStore = useOnboardingStore();
+  const [currentAnswer, setCurrentAnswer] = useState<any>(undefined);
+
+  // Filter slides based on skipIf conditions
+  const filteredSlides = useMemo(() => {
+    const userData = onboardingStore.getUserData();
+    return slides.filter((slide) => {
+      if (slide.skipIf) {
+        return !slide.skipIf(userData.answers);
+      }
+      return true;
+    });
+  }, [slides, onboardingStore]);
 
   const handleComplete = async () => {
+    // Save current answer if exists
+    if (currentSlide.question && currentAnswer !== undefined) {
+      await onboardingStore.saveAnswer(currentSlide.question.id, currentAnswer);
+    }
+
     await onboardingStore.complete(storageKey);
     if (onComplete) {
       await onComplete();
@@ -104,9 +122,14 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
     goToPrevious,
     isLastSlide,
     isFirstSlide,
-  } = useOnboardingNavigation(slides.length, handleComplete, handleSkip);
+  } = useOnboardingNavigation(filteredSlides.length, handleComplete, handleSkip);
+
+  const handleNext = async () => {
+    // Save current answer if exists
+    if (currentSlide.question && currentAnswer !== undefined) {
+      await onboardingStore.saveAnswer(currentSlide.question.id, currentAnswer);
+    }
 
-  const handleNext = () => {
     if (isLastSlide) {
       if (autoComplete) {
         handleComplete();
@@ -115,12 +138,85 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
       }
     } else {
       goToNext();
+      // Load next slide's answer
+      const nextSlide = filteredSlides[currentIndex + 1];
+      if (nextSlide?.question) {
+        const savedAnswer = onboardingStore.getAnswer(nextSlide.question.id);
+        setCurrentAnswer(savedAnswer);
+      } else {
+        setCurrentAnswer(undefined);
+      }
+    }
+  };
+
+  const handlePrevious = () => {
+    goToPrevious();
+    // Load previous slide's answer
+    if (currentIndex > 0) {
+      const prevSlide = filteredSlides[currentIndex - 1];
+      if (prevSlide?.question) {
+        const savedAnswer = onboardingStore.getAnswer(prevSlide.question.id);
+        setCurrentAnswer(savedAnswer);
+      } else {
+        setCurrentAnswer(undefined);
+      }
     }
   };
 
-  const currentSlide = slides[currentIndex];
+  const currentSlide = filteredSlides[currentIndex];
   const styles = useMemo(() => getStyles(insets), [insets]);
 
+  // Load current slide's answer on mount and when slide changes
+  useEffect(() => {
+    if (currentSlide?.question) {
+      const savedAnswer = onboardingStore.getAnswer(currentSlide.question.id);
+      setCurrentAnswer(savedAnswer ?? currentSlide.question.defaultValue);
+    } else {
+      setCurrentAnswer(undefined);
+    }
+  }, [currentIndex, currentSlide, onboardingStore]);
+
+  // Validate current answer
+  const isAnswerValid = useMemo(() => {
+    if (!currentSlide?.question) return true;
+
+    const { validation } = currentSlide.question;
+    if (!validation) return true;
+
+    // Required validation
+    if (validation.required && !currentAnswer) return false;
+
+    // Type-specific validations
+    switch (currentSlide.question.type) {
+      case "multiple_choice":
+        if (validation.minSelections && (!currentAnswer || currentAnswer.length < validation.minSelections)) {
+          return false;
+        }
+        break;
+      case "text_input":
+        if (validation.minLength && (!currentAnswer || currentAnswer.length < validation.minLength)) {
+          return false;
+        }
+        break;
+      case "slider":
+      case "rating":
+        if (validation.min !== undefined && currentAnswer < validation.min) {
+          return false;
+        }
+        if (validation.max !== undefined && currentAnswer > validation.max) {
+          return false;
+        }
+        break;
+    }
+
+    // Custom validator
+    if (validation.customValidator) {
+      return validation.customValidator(currentAnswer) === true;
+    }
+
+    return true;
+  }, [currentSlide, currentAnswer]);
+
   return (
     <View style={styles.container}>
       <StatusBar barStyle="light-content" />
@@ -133,13 +229,13 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
       {renderHeader ? (
         renderHeader({
           isFirstSlide,
-          onBack: goToPrevious,
+          onBack: handlePrevious,
           onSkip: handleSkip,
         })
       ) : (
         <OnboardingHeader
           isFirstSlide={isFirstSlide}
-          onBack={goToPrevious}
+          onBack={handlePrevious}
           onSkip={handleSkip}
           showBackButton={showBackButton}
           showSkipButton={showSkipButton}
@@ -148,13 +244,19 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
       )}
       {renderSlide ? (
         renderSlide(currentSlide)
+      ) : currentSlide.type === "question" && currentSlide.question ? (
+        <QuestionSlide
+          slide={currentSlide}
+          value={currentAnswer}
+          onChange={setCurrentAnswer}
+        />
       ) : (
         <OnboardingSlideComponent slide={currentSlide} />
       )}
       {renderFooter ? (
         renderFooter({
           currentIndex,
-          totalSlides: slides.length,
+          totalSlides: filteredSlides.length,
           isLastSlide,
           onNext: handleNext,
           onUpgrade,
@@ -163,7 +265,7 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
       ) : (
         <OnboardingFooter
           currentIndex={currentIndex}
-          totalSlides={slides.length}
+          totalSlides={filteredSlides.length}
           isLastSlide={isLastSlide}
           onNext={handleNext}
           showProgressBar={showProgressBar}
@@ -171,6 +273,7 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
           showProgressText={showProgressText}
           nextButtonText={nextButtonText}
           getStartedButtonText={getStartedButtonText}
+          disabled={!isAnswerValid}
         />
       )}
     </View>