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

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

@@ -0,0 +1,60 @@
+/**
+ * Question Renderer Component
+ * Single Responsibility: Render appropriate question component based on type
+ */
+
+import React from "react";
+import type { OnboardingQuestion } from "../../domain/entities/OnboardingQuestion";
+import { SingleChoiceQuestion } from "./questions/SingleChoiceQuestion";
+import { MultipleChoiceQuestion } from "./questions/MultipleChoiceQuestion";
+import { TextInputQuestion } from "./questions/TextInputQuestion";
+import { RatingQuestion } from "./questions/RatingQuestion";
+
+export interface QuestionRendererProps {
+  question: OnboardingQuestion;
+  value: any;
+  onChange: (value: any) => void;
+}
+
+export const QuestionRenderer = ({
+  question,
+  value,
+  onChange,
+}: QuestionRendererProps) => {
+  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 "rating":
+      return (
+        <RatingQuestion
+          question={question}
+          value={value}
+          onChange={onChange}
+        />
+      );
+    default:
+      return null;
+  }
+};

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

@@ -0,0 +1,67 @@
+/**
+ * QuestionSlide Component
+ * Single Responsibility: Render a question-type slide
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import { QuestionSlideHeader } from "./QuestionSlideHeader";
+import { QuestionRenderer } from "./QuestionRenderer";
+import { BaseSlide } from "./BaseSlide";
+import { useOnboardingProvider } from "../providers/OnboardingProvider";
+import { useLocalization } from "@umituz/react-native-localization";
+
+export interface QuestionSlideProps {
+  slide: OnboardingSlide;
+  value: any;
+  onChange: (value: any) => void;
+  variant?: "default" | "card" | "minimal" | "fullscreen";
+}
+
+export const QuestionSlide = ({
+  slide,
+  value,
+  onChange,
+  variant: _variant = "default",
+}: QuestionSlideProps) => {
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
+  const { t } = useLocalization();
+  const { question } = slide;
+
+  if (!question) return null;
+
+  return (
+    <BaseSlide contentPosition={slide.contentPosition}>
+      <QuestionSlideHeader slide={slide} />
+
+      <View style={styles.questionContainer}>
+        <QuestionRenderer question={question} value={value} onChange={onChange} />
+      </View>
+
+      {question.validation?.required && !value && (
+        <AtomicText
+          type="labelSmall"
+          style={[styles.requiredHint, { color: colors.errorColor }]}
+        >
+          {t("onboarding.fieldRequired")}
+        </AtomicText>
+      )}
+    </BaseSlide>
+  );
+};
+
+const styles = StyleSheet.create({
+  questionContainer: {
+    marginTop: 24,
+    width: "100%",
+  },
+  requiredHint: {
+    marginTop: 12,
+    textAlign: "center",
+    fontWeight: "600",
+  },
+});

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

@@ -0,0 +1,75 @@
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import { useOnboardingProvider } from "../providers/OnboardingProvider";
+
+export interface QuestionSlideHeaderProps {
+  slide: OnboardingSlide;
+}
+
+export const QuestionSlideHeader = ({ slide }: QuestionSlideHeaderProps) => {
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
+  const isEmoji = slide.iconType === 'emoji';
+
+  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 as any} customSize={48} customColor={colors.textColor} />
+        )}
+      </View>
+
+      <AtomicText type="headlineMedium" style={[styles.title, { color: colors.textColor }]}>
+        {slide.title}
+      </AtomicText>
+
+      {slide.description && (
+        <AtomicText type="bodyMedium" style={[styles.description, { color: colors.subTextColor }]}>
+          {slide.description}
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+  },
+  iconContainer: {
+    width: 96,
+    height: 96,
+    borderRadius: 48,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 24,
+    borderWidth: 2,
+  },
+  title: {
+    fontWeight: "800",
+    textAlign: "center",
+    marginBottom: 12,
+  },
+  description: {
+    textAlign: "center",
+    lineHeight: 22,
+    marginBottom: 24,
+  },
+});
+
+
+
+
+
+

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

@@ -0,0 +1,74 @@
+/**
+ * Multiple Choice Question Component
+ * Single Responsibility: Render multiple choice question with options
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system";
+import { useOnboardingProvider } from "../../providers/OnboardingProvider";
+import { ensureArray } from "../../../infrastructure/utils/arrayUtils";
+import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
+import { QuestionOptionItem } from "./QuestionOptionItem";
+
+export interface MultipleChoiceQuestionProps {
+  question: OnboardingQuestion;
+  value: string[] | undefined;
+  onChange: (value: string[]) => void;
+}
+
+export const MultipleChoiceQuestion = ({
+  question,
+  value,
+  onChange,
+}: MultipleChoiceQuestionProps) => {
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
+
+  const safeValue = ensureArray(value);
+
+  const handleToggle = (optionId: string) => {
+    const newValue = safeValue.includes(optionId)
+      ? safeValue.filter((id) => id !== optionId)
+      : [...safeValue, optionId];
+
+    if (question.validation?.maxSelections && newValue.length > question.validation.maxSelections) {
+      return;
+    }
+    onChange(newValue);
+  };
+
+  return (
+    <View style={styles.container}>
+      {question.options?.map((option) => (
+        <QuestionOptionItem
+          key={option.id}
+          option={option}
+          isSelected={safeValue.includes(option.id)}
+          onPress={() => handleToggle(option.id)}
+          colors={colors}
+        />
+      ))}
+      {question.validation?.maxSelections && (
+        <AtomicText
+          type="labelSmall"
+          style={[styles.hint, { color: colors.subTextColor }]}
+        >
+          Select up to {question.validation.maxSelections} options
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    gap: 12,
+  },
+  hint: {
+    textAlign: "center",
+    marginTop: 8,
+  },
+});

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",
+  },
+});
+