@umituz/react-native-onboarding 1.0.9 → 2.0.0

package/src/infrastructure/storage/OnboardingStore.ts

@@ -11,6 +11,7 @@ import {
   StorageKey,
   unwrap,
 } from "@umituz/react-native-storage";
+import type { OnboardingUserData } from "../../domain/entities/OnboardingUserData";
 
 interface OnboardingStore {
   // State
@@ -18,6 +19,7 @@ interface OnboardingStore {
   currentStep: number;
   loading: boolean;
   error: string | null;
+  userData: OnboardingUserData;
 
   // Actions
   initialize: (storageKey?: string) => Promise<void>;
@@ -27,26 +29,41 @@ interface OnboardingStore {
   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>;
 }
 
 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 });
 
-    const result = await storageRepository.getString(storageKey, "false");
-    const data = unwrap(result, "false");
+    // 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: data === "true",
+      isOnboardingComplete: isComplete,
+      userData,
       loading: false,
-      error: result.success ? null : result.error?.message || null,
+      error: completionResult.success ? null : completionResult.error?.message || null,
     });
   },
 
@@ -55,8 +72,14 @@ export const useOnboardingStore = create<OnboardingStore>((set, get) => ({
 
     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 : result.error?.message || null,
     });
@@ -67,8 +90,15 @@ export const useOnboardingStore = create<OnboardingStore>((set, get) => ({
 
     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 : result.error?.message || null,
     });
@@ -80,10 +110,12 @@ export const useOnboardingStore = create<OnboardingStore>((set, get) => ({
     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 : result.error?.message || null,
     });
@@ -91,6 +123,27 @@ export const useOnboardingStore = create<OnboardingStore>((set, get) => ({
 
   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 });
+  },
 }));
 
 /**
@@ -102,6 +155,7 @@ export const useOnboarding = () => {
     currentStep,
     loading,
     error,
+    userData,
     initialize,
     complete,
     skip,
@@ -109,6 +163,10 @@ export const useOnboarding = () => {
     reset,
     setLoading,
     setError,
+    saveAnswer,
+    getAnswer,
+    getUserData,
+    setUserData,
   } = useOnboardingStore();
 
   return {
@@ -116,6 +174,7 @@ export const useOnboarding = () => {
     currentStep,
     loading,
     error,
+    userData,
     initialize,
     complete,
     skip,
@@ -123,6 +182,10 @@ export const useOnboarding = () => {
     reset,
     setLoading,
     setError,
+    saveAnswer,
+    getAnswer,
+    getUserData,
+    setUserData,
   };
 };
 

package/src/presentation/components/OnboardingFooter.tsx

@@ -20,6 +20,7 @@ export interface OnboardingFooterProps {
   showProgressText?: boolean;
   nextButtonText?: string;
   getStartedButtonText?: string;
+  disabled?: boolean;
 }
 
 export const OnboardingFooter: React.FC<OnboardingFooterProps> = ({
@@ -32,6 +33,7 @@ export const OnboardingFooter: React.FC<OnboardingFooterProps> = ({
   showProgressText = true,
   nextButtonText,
   getStartedButtonText,
+  disabled = false,
 }) => {
   const insets = useSafeAreaInsets();
   const { t } = useLocalization();
@@ -68,8 +70,15 @@ export const OnboardingFooter: React.FC<OnboardingFooterProps> = ({
         </View>
       )}
 
-      <TouchableOpacity style={styles.button} onPress={onNext}>
-        <Text style={styles.buttonText}>{buttonText}</Text>
+      <TouchableOpacity
+        style={[styles.button, disabled && styles.buttonDisabled]}
+        onPress={onNext}
+        disabled={disabled}
+        activeOpacity={disabled ? 1 : 0.7}
+      >
+        <Text style={[styles.buttonText, disabled && styles.buttonTextDisabled]}>
+          {buttonText}
+        </Text>
       </TouchableOpacity>
 
       {showProgressText && (
@@ -128,11 +137,17 @@ const getStyles = (
       alignItems: "center",
       marginBottom: 12,
     },
+    buttonDisabled: {
+      backgroundColor: "rgba(255, 255, 255, 0.4)",
+    },
     buttonText: {
       color: tokens.colors.primary,
       fontSize: 16,
       fontWeight: "bold",
     },
+    buttonTextDisabled: {
+      color: "rgba(255, 255, 255, 0.6)",
+    },
     progressText: {
       color: "rgba(255, 255, 255, 0.75)",
       fontSize: 12,

package/src/presentation/components/QuestionSlide.tsx

@@ -0,0 +1,177 @@
+/**
+ * Question Slide Component
+ *
+ * Displays a personalization question slide
+ */
+
+import React, { useMemo } from "react";
+import { View, Text, StyleSheet, ScrollView } from "react-native";
+import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import { SingleChoiceQuestion } from "./questions/SingleChoiceQuestion";
+import { MultipleChoiceQuestion } from "./questions/MultipleChoiceQuestion";
+import { TextInputQuestion } from "./questions/TextInputQuestion";
+import { SliderQuestion } from "./questions/SliderQuestion";
+import { RatingQuestion } from "./questions/RatingQuestion";
+
+export interface QuestionSlideProps {
+  slide: OnboardingSlide;
+  value: any;
+  onChange: (value: any) => void;
+}
+
+export const QuestionSlide: React.FC<QuestionSlideProps> = ({
+  slide,
+  value,
+  onChange,
+}) => {
+  const styles = useMemo(() => getStyles(), []);
+  const { question } = slide;
+
+  if (!question) {
+    return null;
+  }
+
+  // Check if icon is an emoji or Lucide icon name
+  const isEmoji = /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(slide.icon);
+
+  const renderQuestion = () => {
+    switch (question.type) {
+      case "single_choice":
+        return (
+          <SingleChoiceQuestion
+            question={question}
+            value={value}
+            onChange={onChange}
+          />
+        );
+      case "multiple_choice":
+        return (
+          <MultipleChoiceQuestion
+            question={question}
+            value={value}
+            onChange={onChange}
+          />
+        );
+      case "text_input":
+        return (
+          <TextInputQuestion
+            question={question}
+            value={value}
+            onChange={onChange}
+          />
+        );
+      case "slider":
+        return (
+          <SliderQuestion
+            question={question}
+            value={value}
+            onChange={onChange}
+          />
+        );
+      case "rating":
+        return (
+          <RatingQuestion
+            question={question}
+            value={value}
+            onChange={onChange}
+          />
+        );
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <ScrollView
+      contentContainerStyle={styles.content}
+      showsVerticalScrollIndicator={false}
+    >
+      <View style={styles.slideContent}>
+        {/* Icon */}
+        <View style={styles.iconContainer}>
+          {isEmoji ? (
+            <Text style={styles.icon}>{slide.icon}</Text>
+          ) : (
+            <AtomicIcon
+              name={slide.icon as any}
+              customSize={48}
+              customColor="#FFFFFF"
+            />
+          )}
+        </View>
+
+        {/* Title */}
+        <Text style={styles.title}>{slide.title}</Text>
+
+        {/* Description */}
+        {slide.description && (
+          <Text style={styles.description}>{slide.description}</Text>
+        )}
+
+        {/* Question */}
+        <View style={styles.questionContainer}>{renderQuestion()}</View>
+
+        {/* Validation hint */}
+        {question.validation?.required && !value && (
+          <Text style={styles.requiredHint}>* This field is required</Text>
+        )}
+      </View>
+    </ScrollView>
+  );
+};
+
+const getStyles = () =>
+  StyleSheet.create({
+    content: {
+      flexGrow: 1,
+      justifyContent: "center",
+      alignItems: "center",
+      paddingHorizontal: 30,
+      paddingVertical: 20,
+    },
+    slideContent: {
+      alignItems: "center",
+      maxWidth: 500,
+      width: "100%",
+    },
+    iconContainer: {
+      width: 96,
+      height: 96,
+      borderRadius: 48,
+      backgroundColor: "rgba(255, 255, 255, 0.2)",
+      alignItems: "center",
+      justifyContent: "center",
+      marginBottom: 24,
+      borderWidth: 2,
+      borderColor: "rgba(255, 255, 255, 0.3)",
+    },
+    icon: {
+      fontSize: 48,
+    },
+    title: {
+      fontSize: 24,
+      fontWeight: "bold",
+      color: "#FFFFFF",
+      textAlign: "center",
+      marginBottom: 12,
+    },
+    description: {
+      fontSize: 15,
+      color: "rgba(255, 255, 255, 0.9)",
+      textAlign: "center",
+      lineHeight: 22,
+      marginBottom: 24,
+    },
+    questionContainer: {
+      width: "100%",
+      marginTop: 8,
+    },
+    requiredHint: {
+      fontSize: 13,
+      color: "rgba(255, 255, 255, 0.7)",
+      fontStyle: "italic",
+      marginTop: 12,
+    },
+  });
+

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

@@ -0,0 +1,143 @@
+/**
+ * Multiple Choice Question Component
+ *
+ * Checkbox style question for multiple selections
+ */
+
+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 MultipleChoiceQuestionProps {
+  question: OnboardingQuestion;
+  value: string[] | undefined;
+  onChange: (value: string[]) => void;
+}
+
+export const MultipleChoiceQuestion: React.FC<MultipleChoiceQuestionProps> = ({
+  question,
+  value = [],
+  onChange,
+}) => {
+  const isEmoji = (icon: string) =>
+    /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(icon);
+
+  const handleToggle = (optionId: string) => {
+    const newValue = value.includes(optionId)
+      ? value.filter((id) => id !== optionId)
+      : [...value, optionId];
+
+    // Check max selections
+    if (
+      question.validation?.maxSelections &&
+      newValue.length > question.validation.maxSelections
+    ) {
+      return;
+    }
+
+    onChange(newValue);
+  };
+
+  const renderOption = (option: QuestionOption) => {
+    const isSelected = value.includes(option.id);
+
+    return (
+      <TouchableOpacity
+        key={option.id}
+        style={[styles.option, isSelected && styles.optionSelected]}
+        onPress={() => handleToggle(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.checkbox, isSelected && styles.checkboxSelected]}>
+          {isSelected && (
+            <AtomicIcon name="Check" customSize={16} customColor="#FFFFFF" />
+          )}
+        </View>
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      {question.options?.map(renderOption)}
+      {question.validation?.maxSelections && (
+        <Text style={styles.hint}>
+          Select up to {question.validation.maxSelections} options
+        </Text>
+      )}
+    </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",
+  },
+  checkbox: {
+    width: 24,
+    height: 24,
+    borderRadius: 6,
+    borderWidth: 2,
+    borderColor: "rgba(255, 255, 255, 0.5)",
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  checkboxSelected: {
+    borderColor: "#FFFFFF",
+    backgroundColor: "rgba(255, 255, 255, 0.3)",
+  },
+  hint: {
+    fontSize: 13,
+    color: "rgba(255, 255, 255, 0.7)",
+    textAlign: "center",
+    marginTop: 4,
+  },
+});
+

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

@@ -0,0 +1,78 @@
+/**
+ * Rating Question Component
+ *
+ * Star rating or numeric rating 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 } from "../../../domain/entities/OnboardingQuestion";
+
+export interface RatingQuestionProps {
+  question: OnboardingQuestion;
+  value: number | undefined;
+  onChange: (value: number) => void;
+}
+
+export const RatingQuestion: React.FC<RatingQuestionProps> = ({
+  question,
+  value = 0,
+  onChange,
+}) => {
+  const { validation } = question;
+  const max = validation?.max ?? 5;
+
+  const renderStar = (index: number) => {
+    const isFilled = index < value;
+
+    return (
+      <TouchableOpacity
+        key={index}
+        onPress={() => onChange(index + 1)}
+        activeOpacity={0.7}
+        style={styles.star}
+      >
+        <AtomicIcon
+          name={isFilled ? "Star" : "Star"}
+          customSize={48}
+          customColor={isFilled ? "#FFD700" : "rgba(255, 255, 255, 0.3)"}
+        />
+      </TouchableOpacity>
+    );
+  };
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.stars}>
+        {Array.from({ length: max }, (_, i) => renderStar(i))}
+      </View>
+      {value > 0 && (
+        <Text style={styles.valueText}>
+          {value} / {max}
+        </Text>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    alignItems: "center",
+  },
+  stars: {
+    flexDirection: "row",
+    gap: 8,
+    marginBottom: 16,
+  },
+  star: {
+    padding: 4,
+  },
+  valueText: {
+    fontSize: 18,
+    color: "rgba(255, 255, 255, 0.9)",
+    fontWeight: "600",
+  },
+});
+