@umituz/react-native-design-system 4.25.67 → 4.25.69

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "4.25.67",
+  "version": "4.25.69",
   "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID, image, timezone, offline, onboarding, and loading utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

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

@@ -37,13 +37,15 @@ export class ValidationManager {
         return this.validateMultipleChoice(answer, validation);
       case "text_input":
         return this.validateTextInput(answer, validation);
+      case "date":
+        return this.validateDate(answer, validation);
       case "rating":
         return this.validateNumeric(answer, validation);
       default:
         break;
     }
 
-    // Custom validator
+    // Custom validator (for types not covered by switch, e.g. default)
     if (validation.customValidator) {
       const customResult = validation.customValidator(answer);
       return customResult === true;
@@ -85,10 +87,20 @@ export class ValidationManager {
   ): boolean {
     if (!validation) return true;
 
+    // If no answer yet (undefined/null), valid only when not required
+    if (answer === undefined || answer === null) {
+      return !validation.required;
+    }
+
     if (typeof answer !== "string") {
       return false;
     }
 
+    // Empty string: valid only when not required
+    if (!answer.trim() && validation.required) {
+      return false;
+    }
+
     if (validation.minLength && answer.length < validation.minLength) {
       return false;
     }
@@ -97,9 +109,36 @@ export class ValidationManager {
       return false;
     }
 
+    // Run custom validator if provided
+    if (validation.customValidator) {
+      const customResult = validation.customValidator(answer);
+      return customResult === true;
+    }
+
     return true;
   }
 
+  /**
+   * Validate date answer (ISO string from date picker)
+   */
+  private static validateDate(
+    answer: OnboardingAnswerValue,
+    validation: OnboardingQuestion["validation"],
+  ): boolean {
+    if (!validation) return true;
+
+    if (answer === undefined || answer === null) {
+      return !validation.required;
+    }
+
+    if (typeof answer !== "string" || !answer) {
+      return !validation.required;
+    }
+
+    const d = new Date(answer);
+    return !isNaN(d.getTime());
+  }
+
   /**
    * Validate numeric answer (rating)
    */

package/src/onboarding/presentation/components/QuestionRenderer.tsx

@@ -9,6 +9,7 @@ import { SingleChoiceQuestion } from "./questions/SingleChoiceQuestion";
 import { MultipleChoiceQuestion } from "./questions/MultipleChoiceQuestion";
 import { TextInputQuestion } from "./questions/TextInputQuestion";
 import { RatingQuestion } from "./questions/RatingQuestion";
+import { DateQuestion } from "./questions/DateQuestion";
 
 export interface QuestionRendererProps {
   question: OnboardingQuestion;
@@ -54,6 +55,14 @@ export const QuestionRenderer = ({
           onChange={onChange as (value: number) => void}
         />
       );
+    case "date":
+      return (
+        <DateQuestion
+          question={question}
+          value={value as string | undefined}
+          onChange={onChange as (value: string) => void}
+        />
+      );
     default:
       return null;
   }

package/src/onboarding/presentation/components/QuestionSlideHeader.tsx

@@ -16,19 +16,21 @@ export const QuestionSlideHeader = ({ slide }: QuestionSlideHeaderProps) => {
 
   return (
     <View style={styles.container}>
-      <View style={[
-        styles.iconContainer,
-        {
-          backgroundColor: colors.iconBg,
-          borderColor: colors.iconBorder,
-        }
-      ]}>
-        {isEmoji ? (
-          <AtomicText style={{ fontSize: 48 }}>{slide.icon}</AtomicText>
-        ) : (
-          <AtomicIcon name={slide.icon} customSize={48} customColor={colors.textColor} />
-        )}
-      </View>
+      {!slide.hideIcon && (
+        <View style={[
+          styles.iconContainer,
+          {
+            backgroundColor: colors.iconBg,
+            borderColor: colors.iconBorder,
+          }
+        ]}>
+          {isEmoji ? (
+            <AtomicText style={{ fontSize: 48 }}>{slide.icon}</AtomicText>
+          ) : (
+            <AtomicIcon name={slide.icon} customSize={48} customColor={colors.textColor} />
+          )}
+        </View>
+      )}
 
       <AtomicText type="headlineMedium" style={[styles.title, { color: colors.textColor }]}>
         {slide.title}

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

@@ -0,0 +1,58 @@
+import React, { useCallback } from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicDatePicker } from "../../../../atoms/AtomicDatePicker";
+import { useOnboardingProvider } from "../../providers/OnboardingProvider";
+import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
+
+export interface DateQuestionProps {
+  question: OnboardingQuestion;
+  value: string | undefined;
+  onChange: (value: string) => void;
+}
+
+export const DateQuestion = ({
+  question,
+  value,
+  onChange,
+}: DateQuestionProps) => {
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
+
+  const dateValue = value ? new Date(value) : null;
+
+  const handleChange = useCallback(
+    (date: Date) => {
+      onChange(date.toISOString());
+    },
+    [onChange],
+  );
+
+  return (
+    <View style={styles.container}>
+      <AtomicDatePicker
+        value={dateValue}
+        onChange={handleChange}
+        placeholder={question.placeholder}
+        maximumDate={new Date()}
+        style={[
+          styles.picker,
+          {
+            borderColor: dateValue ? colors.iconColor : colors.headerButtonBorder,
+          },
+        ]}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+  },
+  picker: {
+    borderRadius: 16,
+    borderWidth: 2,
+    overflow: "hidden",
+  },
+});