@umituz/react-native-onboarding 3.3.8 → 3.3.10

package/src/presentation/components/OnboardingSlide.tsx

@@ -1,96 +1,106 @@
-/**
- * Onboarding Slide Component
- *
- * Displays a single onboarding slide with icon, title, and description
- * Supports multiple variants (default, card, minimal) and dark mode
- */
-
-import React, { useMemo } from "react";
-import { View, Text, ScrollView } from "react-native";
-import { AtomicIcon } from "@umituz/react-native-design-system";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import React from "react";
+import { View, ScrollView, StyleSheet } from "react-native";
+import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
 import type { OnboardingSlide as OnboardingSlideType } from "../../domain/entities/OnboardingSlide";
 import type { OnboardingThemeVariant } from "../../domain/entities/OnboardingTheme";
-import { createOnboardingStyles } from "../styles/OnboardingSlideStyles";
+import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
 
 export interface OnboardingSlideProps {
   slide: OnboardingSlideType;
-  useGradient?: boolean;
   variant?: OnboardingThemeVariant;
 }
 
-const EMOJI_REGEX = /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u;
-
-export const OnboardingSlide: React.FC<OnboardingSlideProps> = ({
+export const OnboardingSlide = ({
   slide,
-  useGradient = false,
   variant = "default"
-}) => {
-  const tokens = useAppDesignTokens();
-  const styles = useMemo(
-    () => createOnboardingStyles(tokens, useGradient, variant),
-    [tokens, useGradient, variant]
-  );
-
-  const isEmoji = EMOJI_REGEX.test(slide.icon);
-  // Simple check for valid icon name - assuming string and not emoji
-  const isValidIconName = !isEmoji && typeof slide.icon === "string" && slide.icon.length > 0;
+}: OnboardingSlideProps) => {
+  const { colors } = useOnboardingTheme();
 
-  const iconColor = useGradient ? tokens.colors.surface : tokens.colors.primary;
-  const iconSize = variant === "minimal" ? 80 : 64;
-
-  const renderIcon = () => {
-    if (isEmoji) {
-      return <Text style={{ fontSize: iconSize }}>{slide.icon}</Text>;
-    }
-    if (isValidIconName) {
-      return <AtomicIcon name={slide.icon} customSize={iconSize} customColor={iconColor} />;
-    }
-    // Fallback if no icon
-    if (slide.image) {
-      // TODO: Implement image support if needed, for now just placeholder
-      return <AtomicIcon name="image" customSize={iconSize} customColor={iconColor} />;
-    }
-    return null;
-  };
-
-  const renderFeatures = () => {
-    if (!slide.features || slide.features.length === 0) return null;
-    return (
-      <View style={styles.featuresContainer}>
-        {slide.features.map((feature, index) => (
-          <View key={index} style={styles.featureItem}>
-            <Text style={styles.featureBullet}>•</Text>
-            <Text style={styles.featureText}>{feature}</Text>
-          </View>
-        ))}
-      </View>
-    );
-  };
+  const isEmoji = slide.iconType === 'emoji';
+  const hasIcon = slide.icon && slide.icon.length > 0;
+  const iconSize = variant === "minimal" ? 80 : 72;
 
   return (
-    <ScrollView
-      contentContainerStyle={styles.content}
-      showsVerticalScrollIndicator={false}
-      bounces={false}
-    >
+    <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false} bounces={false}>
       <View style={styles.slideContainer}>
-        {/* Icon Section */}
-        {(isEmoji || isValidIconName) && (
+        {hasIcon && (
           <View style={styles.iconBox}>
-            {renderIcon()}
+            {isEmoji ? (
+              <AtomicText style={{ fontSize: iconSize }}>{slide.icon}</AtomicText>
+            ) : (
+              <AtomicIcon name={slide.icon} customSize={iconSize} customColor={colors.iconColor} />
+            )}
           </View>
         )}
 
-        {/* Text Section */}
-        <Text style={styles.title}>{slide.title}</Text>
-        <Text style={styles.description}>{slide.description}</Text>
+        <AtomicText type="headlineMedium" style={[styles.title, { color: colors.textColor }]}>
+          {slide.title}
+        </AtomicText>
+
+        <AtomicText type="bodyLarge" style={[styles.description, { color: colors.subTextColor }]}>
+          {slide.description}
+        </AtomicText>
 
-        {/* Features Section */}
-        {renderFeatures()}
+        {slide.features && slide.features.length > 0 && (
+          <View style={styles.featuresContainer}>
+            {slide.features.map((feature, index) => (
+              <View key={index} style={styles.featureItem}>
+                <AtomicIcon name="checkmark-circle" size="sm" customColor={colors.iconColor} />
+                <AtomicText type="bodyMedium" style={[styles.featureText, { color: colors.textColor }]}>
+                  {feature}
+                </AtomicText>
+              </View>
+            ))}
+          </View>
+        )}
       </View>
     </ScrollView>
   );
 };
 
+const styles = StyleSheet.create({
+  content: {
+    flexGrow: 1,
+    paddingTop: 40,
+  },
+  slideContainer: {
+    paddingHorizontal: 30,
+    alignItems: "center",
+  },
+  iconBox: {
+    marginBottom: 40,
+    height: 120,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  title: {
+    textAlign: "center",
+    marginBottom: 16,
+    fontWeight: "800",
+  },
+  description: {
+    textAlign: "center",
+    lineHeight: 24,
+    marginBottom: 32,
+    opacity: 0.9,
+  },
+  featuresContainer: {
+    width: "100%",
+    gap: 12,
+    marginTop: 8,
+  },
+  featureItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+    backgroundColor: "rgba(255, 255, 255, 0.1)",
+    padding: 12,
+    borderRadius: 12,
+  },
+  featureText: {
+    flex: 1,
+  },
+});
+
+
 

package/src/presentation/components/QuestionRenderer.tsx

@@ -16,11 +16,11 @@ export interface QuestionRendererProps {
   onChange: (value: any) => void;
 }
 
-export const QuestionRenderer: React.FC<QuestionRendererProps> = ({
+export const QuestionRenderer = ({
   question,
   value,
   onChange,
-}) => {
+}: QuestionRendererProps) => {
   switch (question.type) {
     case "single_choice":
       return (

package/src/presentation/components/QuestionSlide.tsx

@@ -1,71 +1,67 @@
-/**
- * Question Slide Component
- * Single Responsibility: Display question slide with header and question
- */
-
-import React, { useMemo } from "react";
-import { View, Text, ScrollView } from "react-native";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import React from "react";
+import { View, ScrollView, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system";
 import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
 import type { OnboardingThemeVariant } from "../../domain/entities/OnboardingTheme";
 import { QuestionSlideHeader } from "./QuestionSlideHeader";
 import { QuestionRenderer } from "./QuestionRenderer";
-import { createQuestionStyles } from "../styles/QuestionSlideStyles";
+import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
 
 export interface QuestionSlideProps {
   slide: OnboardingSlide;
   value: any;
   onChange: (value: any) => void;
-  useGradient?: boolean;
   variant?: OnboardingThemeVariant;
 }
 
-export const QuestionSlide: React.FC<QuestionSlideProps> = ({
+export const QuestionSlide = ({
   slide,
   value,
   onChange,
-  useGradient = false,
-  variant = "default",
-}) => {
-  const tokens = useAppDesignTokens();
-  const styles = useMemo(
-    () => createQuestionStyles(tokens, useGradient, variant),
-    [tokens, useGradient, variant]
-  );
+}: QuestionSlideProps) => {
+  const { colors } = useOnboardingTheme();
   const { question } = slide;
 
-  if (!question) {
-    return null;
-  }
-
-  const content = (
-    <>
-      <QuestionSlideHeader slide={slide} useGradient={useGradient} />
-
-      <View style={styles.questionContainer}>
-        <QuestionRenderer
-          question={question}
-          value={value}
-          onChange={onChange}
-        />
-      </View>
-
-      {question.validation?.required && !value && (
-        <Text style={styles.requiredHint}>* This field is required</Text>
-      )}
-    </>
-  );
+  if (!question) return null;
 
   return (
-    <ScrollView
-      contentContainerStyle={styles.content}
-      showsVerticalScrollIndicator={false}
-      bounces={false}
-    >
+    <ScrollView contentContainerStyle={styles.content} showsVerticalScrollIndicator={false} bounces={false}>
       <View style={styles.slideContainer}>
-        {content}
+        <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 }]}
+          >
+            * This field is required
+          </AtomicText>
+        )}
       </View>
     </ScrollView>
   );
 };
 
+const styles = StyleSheet.create({
+  content: {
+    flexGrow: 1,
+    paddingTop: 40,
+  },
+  slideContainer: {
+    paddingHorizontal: 24,
+  },
+  questionContainer: {
+    marginTop: 24,
+  },
+  requiredHint: {
+    marginTop: 12,
+    textAlign: "center",
+    fontWeight: "600",
+  },
+});
+
+

package/src/presentation/components/QuestionSlideHeader.tsx

@@ -1,88 +1,73 @@
-/**
- * Question Slide Header Component
- * Single Responsibility: Display slide header (icon, title, description)
- */
-
 import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import { AtomicIcon } from "@umituz/react-native-design-system";
-import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system";
+import { View, StyleSheet } from "react-native";
+import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
 import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
 
 export interface QuestionSlideHeaderProps {
   slide: OnboardingSlide;
-  useGradient: boolean;
 }
 
-const isEmoji = (icon: string): boolean =>
-  /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(icon);
-
-export const QuestionSlideHeader: React.FC<QuestionSlideHeaderProps> = ({
+export const QuestionSlideHeader = ({
   slide,
-  useGradient,
-}) => {
-  const tokens = useAppDesignTokens();
-  const styles = getStyles(tokens, useGradient);
+}: QuestionSlideHeaderProps) => {
+  const { colors } = useOnboardingTheme();
+  const isEmoji = slide.iconType === 'emoji';
 
   return (
-    <>
-      <View style={styles.iconContainer}>
-        {isEmoji(slide.icon) ? (
-          <Text style={styles.icon}>{slide.icon}</Text>
+    <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={useGradient ? "#FFFFFF" : tokens.colors.textPrimary}
-          />
+          <AtomicIcon name={slide.icon as any} customSize={48} customColor={colors.textColor} />
         )}
       </View>
 
-      <Text style={styles.title}>{slide.title}</Text>
+      <AtomicText type="headlineMedium" style={[styles.title, { color: colors.textColor }]}>
+        {slide.title}
+      </AtomicText>
 
-      {slide.description && <Text style={styles.description}>{slide.description}</Text>}
-    </>
+      {slide.description && (
+        <AtomicText type="bodyMedium" style={[styles.description, { color: colors.subTextColor }]}>
+          {slide.description}
+        </AtomicText>
+      )}
+    </View>
   );
 };
 
-const getStyles = (
-  tokens: ReturnType<typeof useAppDesignTokens>,
-  useGradient: boolean,
-) =>
-  StyleSheet.create({
-    iconContainer: {
-      width: 96,
-      height: 96,
-      borderRadius: 48,
-      backgroundColor: useGradient
-        ? "rgba(255, 255, 255, 0.25)"
-        : withAlpha(tokens.colors.primary, 0.2),
-      alignItems: "center",
-      justifyContent: "center",
-      marginBottom: 24,
-      borderWidth: 2,
-      borderColor: useGradient
-        ? "rgba(255, 255, 255, 0.4)"
-        : withAlpha(tokens.colors.primary, 0.4),
-    },
-    icon: {
-      fontSize: 48,
-    },
-    title: {
-      fontSize: 24,
-      fontWeight: "bold",
-      color: useGradient ? "#FFFFFF" : tokens.colors.textPrimary,
-      textAlign: "center",
-      marginBottom: 12,
-    },
-    description: {
-      fontSize: 15,
-      color: useGradient ? "rgba(255, 255, 255, 0.9)" : tokens.colors.textSecondary,
-      textAlign: "center",
-      lineHeight: 22,
-      marginBottom: 24,
-    },
-  });
+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/presentation/components/questions/MultipleChoiceQuestion.tsx

@@ -1,13 +1,6 @@
-/**
- * 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";
-import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicIcon, AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
 import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 
 export interface MultipleChoiceQuestionProps {
@@ -16,17 +9,13 @@ export interface MultipleChoiceQuestionProps {
   onChange: (value: string[]) => void;
 }
 
-export const MultipleChoiceQuestion: React.FC<MultipleChoiceQuestionProps> = ({
+export const MultipleChoiceQuestion = ({
   question,
   value = [],
   onChange,
-}) => {
+}: MultipleChoiceQuestionProps) => {
   const tokens = useAppDesignTokens();
 
-  if (!tokens) {
-    return null;
-  }
-
   const isEmoji = (icon: string) =>
     /[\u{1F300}-\u{1F9FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u.test(icon);
 
@@ -35,57 +24,51 @@ export const MultipleChoiceQuestion: React.FC<MultipleChoiceQuestionProps> = ({
       ? value.filter((id) => id !== optionId)
       : [...value, optionId];
 
-    // Check max selections
-    if (
-      question.validation?.maxSelections &&
-      newValue.length > question.validation.maxSelections
-    ) {
+    if (question.validation?.maxSelections && newValue.length > question.validation.maxSelections) {
       return;
     }
-
     onChange(newValue);
   };
 
   const renderOption = (option: QuestionOption) => {
     const isSelected = value.includes(option.id);
+    const textColor = isSelected ? tokens.colors.textPrimary : tokens.colors.textSecondary;
 
     return (
       <TouchableOpacity
         key={option.id}
-        style={[styles.option, isSelected && styles.optionSelected]}
+        style={[
+          styles.option,
+          {
+            backgroundColor: isSelected ? tokens.colors.primary + '10' : tokens.colors.surface,
+            borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
+          }
+        ]}
         onPress={() => handleToggle(option.id)}
         activeOpacity={0.7}
       >
         {option.icon && (
           <View style={styles.optionIcon}>
             {isEmoji(option.icon) ? (
-              <Text style={styles.emoji}>{option.icon}</Text>
+              <AtomicText style={{ fontSize: 24 }}>{option.icon}</AtomicText>
             ) : (
-              <AtomicIcon
-                name={option.icon as any}
-                customSize={24}
-                customColor={isSelected ? tokens.colors.textPrimary : tokens.colors.textSecondary}
-              />
+              <AtomicIcon name={option.icon as any} customSize={24} customColor={textColor} />
             )}
           </View>
         )}
-        <Text style={[
-          styles.optionLabel,
-          isSelected && styles.optionLabelSelected,
-          { color: isSelected ? tokens.colors.textPrimary : tokens.colors.textSecondary }
-        ]}>
+        <AtomicText type="bodyLarge" style={[styles.optionLabel, { color: textColor, fontWeight: isSelected ? '700' : '500' }]}>
           {option.label}
-        </Text>
+        </AtomicText>
         <View style={[
           styles.checkbox,
-          isSelected && { borderWidth: 3 },
           {
             borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
-            backgroundColor: isSelected ? tokens.colors.backgroundSecondary : 'transparent'
+            backgroundColor: isSelected ? tokens.colors.primary : 'transparent',
+            borderWidth: isSelected ? 0 : 2,
           }
         ]}>
           {isSelected && (
-            <AtomicIcon name="Check" customSize={16} customColor={tokens.colors.primary} />
+            <AtomicIcon name="checkmark" customSize={16} customColor="#FFFFFF" />
           )}
         </View>
       </TouchableOpacity>
@@ -96,9 +79,9 @@ export const MultipleChoiceQuestion: React.FC<MultipleChoiceQuestionProps> = ({
     <View style={styles.container}>
       {question.options?.map(renderOption)}
       {question.validation?.maxSelections && (
-        <Text style={[styles.hint, { color: tokens.colors.textSecondary }]}>
+        <AtomicText type="labelSmall" style={[styles.hint, { color: tokens.colors.textSecondary }]}>
           Select up to {question.validation.maxSelections} options
-        </Text>
+        </AtomicText>
       )}
     </View>
   );
@@ -112,39 +95,27 @@ const styles = StyleSheet.create({
   option: {
     flexDirection: "row",
     alignItems: "center",
-    borderRadius: 12,
+    borderRadius: 16,
     padding: 16,
     borderWidth: 2,
   },
-  optionSelected: {
-    borderWidth: 3,
-  },
   optionIcon: {
     marginRight: 12,
   },
-  emoji: {
-    fontSize: 24,
-  },
   optionLabel: {
     flex: 1,
-    fontSize: 16,
-    fontWeight: "500",
-  },
-  optionLabelSelected: {
-    fontWeight: "600",
   },
   checkbox: {
     width: 24,
     height: 24,
-    borderRadius: 6,
-    borderWidth: 2,
+    borderRadius: 8,
     alignItems: "center",
     justifyContent: "center",
   },
   hint: {
-    fontSize: 13,
     textAlign: "center",
-    marginTop: 4,
+    marginTop: 8,
   },
 });
 
+