@umituz/react-native-onboarding 3.3.8 → 3.3.10

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

@@ -1,13 +1,6 @@
-/**
- * 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";
-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 } from "../../../domain/entities/OnboardingQuestion";
 
 export interface RatingQuestionProps {
@@ -16,48 +9,34 @@ export interface RatingQuestionProps {
   onChange: (value: number) => void;
 }
 
-export const RatingQuestion: React.FC<RatingQuestionProps> = ({
+export const RatingQuestion = ({
   question,
   value = 0,
   onChange,
-}) => {
+}: RatingQuestionProps) => {
   const tokens = useAppDesignTokens();
-
-  if (!tokens) {
-    return null;
-  }
-
-  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 ? tokens.colors.warning : tokens.colors.textSecondary}
-        />
-      </TouchableOpacity>
-    );
-  };
+  const max = question.validation?.max ?? 5;
 
   return (
     <View style={styles.container}>
       <View style={styles.stars}>
-        {Array.from({ length: max }, (_, i) => renderStar(i))}
+        {Array.from({ length: max }).map((_, i) => {
+          const isFilled = i < value;
+          return (
+            <TouchableOpacity key={i} onPress={() => onChange(i + 1)} activeOpacity={0.7} style={styles.star}>
+              <AtomicIcon
+                name={isFilled ? "star" : "star-outline"}
+                customSize={48}
+                customColor={isFilled ? tokens.colors.warning : tokens.colors.border}
+              />
+            </TouchableOpacity>
+          );
+        })}
       </View>
       {value > 0 && (
-        <Text style={[styles.valueText, { color: tokens.colors.textPrimary }]}>
+        <AtomicText type="headlineSmall" style={[styles.valueText, { color: tokens.colors.textPrimary }]}>
           {value} / {max}
-        </Text>
+        </AtomicText>
       )}
     </View>
   );
@@ -70,15 +49,15 @@ const styles = StyleSheet.create({
   },
   stars: {
     flexDirection: "row",
-    gap: 8,
-    marginBottom: 16,
+    gap: 12,
+    marginBottom: 20,
   },
   star: {
-    padding: 4,
+    padding: 2,
   },
   valueText: {
-    fontSize: 18,
-    fontWeight: "600",
+    fontWeight: "800",
   },
 });
 
+

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

@@ -1,13 +1,6 @@
-/**
- * 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";
-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 SingleChoiceQuestionProps {
@@ -16,57 +9,56 @@ export interface SingleChoiceQuestionProps {
   onChange: (value: string) => void;
 }
 
-export const SingleChoiceQuestion: React.FC<SingleChoiceQuestionProps> = ({
+export const SingleChoiceQuestion = ({
   question,
   value,
   onChange,
-}) => {
+}: SingleChoiceQuestionProps) => {
   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);
 
   const renderOption = (option: QuestionOption) => {
     const isSelected = value === 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={() => onChange(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}
+                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.radio,
-          isSelected && { borderWidth: 3 },
-          { borderColor: isSelected ? tokens.colors.primary : tokens.colors.border }
-        ]}>
-          {isSelected && <View style={[styles.radioInner, { backgroundColor: tokens.colors.textPrimary }]} />}
-        </View>
+          {
+            borderColor: isSelected ? tokens.colors.primary : tokens.colors.border,
+            borderWidth: isSelected ? 6 : 2,
+          }
+        ]} />
       </TouchableOpacity>
     );
   };
@@ -86,39 +78,21 @@ 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",
   },
   radio: {
     width: 24,
     height: 24,
     borderRadius: 12,
-    borderWidth: 2,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-  radioInner: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
   },
 });
 
+

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

@@ -1,12 +1,6 @@
-/**
- * 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 { useAppDesignTokens } from "@umituz/react-native-design-system";
+import { View, TextInput, StyleSheet } from "react-native";
+import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 
 export interface TextInputQuestionProps {
@@ -15,11 +9,11 @@ export interface TextInputQuestionProps {
   onChange: (value: string) => void;
 }
 
-export const TextInputQuestion: React.FC<TextInputQuestionProps> = ({
+export const TextInputQuestion = ({
   question,
   value = "",
   onChange,
-}) => {
+}: TextInputQuestionProps) => {
   const tokens = useAppDesignTokens();
   const { validation } = question;
 
@@ -29,8 +23,8 @@ export const TextInputQuestion: React.FC<TextInputQuestionProps> = ({
         style={[
           styles.input,
           {
-            backgroundColor: tokens.colors.backgroundSecondary,
-            borderColor: tokens.colors.border,
+            backgroundColor: tokens.colors.surface,
+            borderColor: tokens.colors.borderLight,
             color: tokens.colors.textPrimary,
           }
         ]}
@@ -39,15 +33,15 @@ export const TextInputQuestion: React.FC<TextInputQuestionProps> = ({
         placeholder={question.placeholder || "Type your answer..."}
         placeholderTextColor={tokens.colors.textSecondary}
         maxLength={validation?.maxLength}
-        multiline={validation?.maxLength ? validation.maxLength > 100 : false}
-        numberOfLines={validation?.maxLength && validation.maxLength > 100 ? 4 : 1}
+        multiline={(validation?.maxLength ?? 0) > 100}
+        numberOfLines={(validation?.maxLength ?? 0) > 100 ? 5 : 1}
         autoCapitalize="sentences"
         autoCorrect={true}
       />
       {validation?.maxLength && (
-        <Text style={[styles.charCount, { color: tokens.colors.textSecondary }]}>
+        <AtomicText type="labelSmall" style={[styles.charCount, { color: tokens.colors.textSecondary }]}>
           {value.length} / {validation.maxLength}
-        </Text>
+        </AtomicText>
       )}
     </View>
   );
@@ -58,15 +52,16 @@ const styles = StyleSheet.create({
     width: "100%",
   },
   input: {
-    borderRadius: 12,
-    padding: 16,
+    borderRadius: 16,
+    padding: 18,
     fontSize: 16,
     borderWidth: 2,
-    minHeight: 56,
+    minHeight: 60,
   },
   charCount: {
-    fontSize: 13,
     textAlign: "right",
     marginTop: 8,
+    fontWeight: "600",
   },
 });
+

package/src/presentation/providers/OnboardingThemeProvider.tsx

@@ -0,0 +1,98 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+
+interface OnboardingColors {
+    iconColor: string;
+    textColor: string;
+    subTextColor: string;
+    buttonBg: string;
+    buttonTextColor: string;
+    progressBarBg: string;
+    progressFillColor: string;
+    dotColor: string;
+    activeDotColor: string;
+    progressTextColor: string;
+    headerButtonBg: string;
+    headerButtonBorder: string;
+    iconBg: string;
+    iconBorder: string;
+    errorColor: string;
+}
+
+interface OnboardingThemeValue {
+    colors: OnboardingColors;
+    useGradient: boolean;
+}
+
+const OnboardingTheme = createContext<OnboardingThemeValue | null>(null);
+
+export interface OnboardingThemeProviderProps {
+    children: React.ReactNode;
+    useGradient?: boolean;
+}
+
+export const OnboardingThemeProvider = ({
+    children,
+    useGradient = false,
+}: OnboardingThemeProviderProps) => {
+    const tokens = useAppDesignTokens();
+
+    const colors = useMemo<OnboardingColors>(() => {
+        if (useGradient) {
+            return {
+                iconColor: tokens.colors.surface,
+                textColor: tokens.colors.surface,
+                subTextColor: tokens.colors.surface + 'CC',
+                buttonBg: tokens.colors.surface,
+                buttonTextColor: tokens.colors.primary,
+                progressBarBg: tokens.colors.surface + '30',
+                progressFillColor: tokens.colors.surface,
+                dotColor: tokens.colors.surface + '60',
+                activeDotColor: tokens.colors.surface,
+                progressTextColor: tokens.colors.surface + 'CC',
+                headerButtonBg: tokens.colors.surface + '30',
+                headerButtonBorder: tokens.colors.surface + '50',
+                iconBg: tokens.colors.surface + '30',
+                iconBorder: tokens.colors.surface + '60',
+                errorColor: tokens.colors.surface,
+            };
+        }
+
+        return {
+            iconColor: tokens.colors.primary,
+            textColor: tokens.colors.textPrimary,
+            subTextColor: tokens.colors.textSecondary,
+            buttonBg: tokens.colors.primary,
+            buttonTextColor: tokens.colors.onPrimary,
+            progressBarBg: tokens.colors.borderLight,
+            progressFillColor: tokens.colors.primary,
+            dotColor: tokens.colors.borderLight,
+            activeDotColor: tokens.colors.primary,
+            progressTextColor: tokens.colors.textSecondary,
+            headerButtonBg: tokens.colors.surface,
+            headerButtonBorder: tokens.colors.borderLight,
+            iconBg: tokens.colors.primary + '15',
+            iconBorder: tokens.colors.primary + '30',
+            errorColor: tokens.colors.error,
+        };
+    }, [tokens, useGradient]);
+
+    const value = useMemo(
+        () => ({ colors, useGradient }),
+        [colors, useGradient]
+    );
+
+    return (
+        <OnboardingTheme.Provider value={value}>
+            {children}
+        </OnboardingTheme.Provider>
+    );
+};
+
+export const useOnboardingTheme = (): OnboardingThemeValue => {
+    const theme = useContext(OnboardingTheme);
+    if (!theme) {
+        throw new Error('useOnboardingTheme must be used within OnboardingThemeProvider');
+    }
+    return theme;
+};

package/src/presentation/screens/OnboardingScreen.tsx

@@ -12,6 +12,7 @@ import { StyleSheet } from "react-native";
 import type { OnboardingOptions } from "../../domain/entities/OnboardingOptions";
 import { useOnboardingScreenState } from "../hooks/useOnboardingScreenState";
 import { OnboardingScreenContent } from "../components/OnboardingScreenContent";
+import { OnboardingThemeProvider } from "../providers/OnboardingThemeProvider";
 
 export interface OnboardingScreenProps extends OnboardingOptions {
   /**
@@ -53,7 +54,7 @@ export interface OnboardingScreenProps extends OnboardingOptions {
   showPaywallOnComplete?: boolean;
 }
 
-export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
+export const OnboardingScreen = ({
   slides,
   onComplete,
   onSkip,
@@ -74,7 +75,7 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   showPaywallOnComplete = false,
   useGradient: globalUseGradient = false,
   themeVariant = "default",
-}) => {
+}: OnboardingScreenProps) => {
   if (__DEV__) {
     console.log("[OnboardingScreen] Rendering with slides:", slides?.length);
   }
@@ -114,35 +115,37 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   }
 
   return (
-    <OnboardingScreenContent
-      containerStyle={[styles.container, containerStyle]}
-      useGradient={useGradient}
-      currentSlide={currentSlide}
-      isFirstSlide={isFirstSlide}
-      isLastSlide={isLastSlide}
-      currentIndex={currentIndex}
-      totalSlides={filteredSlides.length}
-      currentAnswer={currentAnswer}
-      isAnswerValid={isAnswerValid}
-      showBackButton={showBackButton}
-      showSkipButton={showSkipButton}
-      showProgressBar={showProgressBar}
-      showDots={showDots}
-      showProgressText={showProgressText}
-      skipButtonText={skipButtonText}
-      nextButtonText={nextButtonText}
-      getStartedButtonText={getStartedButtonText}
-      onBack={handlePrevious}
-      onSkip={handleSkip}
-      onNext={handleNext}
-      onAnswerChange={setCurrentAnswer}
-      renderHeader={renderHeader}
-      renderFooter={renderFooter}
-      renderSlide={renderSlide}
-      onUpgrade={onUpgrade}
-      showPaywallOnComplete={showPaywallOnComplete}
-      variant={themeVariant}
-    />
+    <OnboardingThemeProvider useGradient={useGradient}>
+      <OnboardingScreenContent
+        containerStyle={[styles.container, containerStyle]}
+        useGradient={useGradient}
+        currentSlide={currentSlide}
+        isFirstSlide={isFirstSlide}
+        isLastSlide={isLastSlide}
+        currentIndex={currentIndex}
+        totalSlides={filteredSlides.length}
+        currentAnswer={currentAnswer}
+        isAnswerValid={isAnswerValid}
+        showBackButton={showBackButton}
+        showSkipButton={showSkipButton}
+        showProgressBar={showProgressBar}
+        showDots={showDots}
+        showProgressText={showProgressText}
+        skipButtonText={skipButtonText}
+        nextButtonText={nextButtonText}
+        getStartedButtonText={getStartedButtonText}
+        onBack={handlePrevious}
+        onSkip={handleSkip}
+        onNext={handleNext}
+        onAnswerChange={setCurrentAnswer}
+        renderHeader={renderHeader}
+        renderFooter={renderFooter}
+        renderSlide={renderSlide}
+        onUpgrade={onUpgrade}
+        showPaywallOnComplete={showPaywallOnComplete}
+        variant={themeVariant}
+      />
+    </OnboardingThemeProvider>
   );
 };
 

package/src/presentation/styles/OnboardingSlideStyles.ts

@@ -1,139 +0,0 @@
-import { StyleSheet } from "react-native";
-import { withAlpha } from "@umituz/react-native-design-system";
-
-export const createOnboardingStyles = (
-    tokens: any,
-    useGradient: boolean,
-    variant: "default" | "card" | "minimal" | "fullscreen" = "default"
-) => {
-    const isDark = tokens.isDark;
-
-    // Base styles
-    const baseStyles = StyleSheet.create({
-        content: {
-            flexGrow: 1,
-            justifyContent: "center",
-            alignItems: "center",
-            paddingHorizontal: 24,
-            paddingVertical: 40,
-        },
-        title: {
-            ...tokens.typography.headingLarge,
-            textAlign: "center",
-            marginBottom: 16,
-            color: useGradient ? "#FFFFFF" : tokens.colors.textPrimary,
-        },
-        description: {
-            ...tokens.typography.bodyLarge,
-            textAlign: "center",
-            color: useGradient
-                ? "rgba(255, 255, 255, 0.9)"
-                : tokens.colors.textSecondary,
-            lineHeight: 24,
-            marginBottom: 24,
-            maxWidth: 320,
-        },
-        iconContainer: {
-            marginBottom: 40,
-            alignItems: "center",
-            justifyContent: "center",
-        },
-        featuresContainer: {
-            width: "100%",
-            marginTop: 24,
-            paddingHorizontal: 16,
-        },
-        featureItem: {
-            flexDirection: "row",
-            alignItems: "flex-start",
-            marginBottom: 16,
-            backgroundColor: useGradient
-                ? "rgba(255, 255, 255, 0.1)"
-                : tokens.colors.surfaceSecondary,
-            padding: 12,
-            borderRadius: 12,
-        },
-        featureBullet: {
-            color: useGradient ? "#FFFFFF" : tokens.colors.primary,
-            fontSize: 18,
-            marginRight: 12,
-            marginTop: 2,
-        },
-        featureText: {
-            flex: 1,
-            ...tokens.typography.bodyMedium,
-            color: useGradient ? "#FFFFFF" : tokens.colors.textPrimary,
-        },
-    });
-
-    // Variant specific styles
-    if (variant === "card") {
-        return StyleSheet.create({
-            ...baseStyles,
-            slideContainer: {
-                width: "100%",
-                maxWidth: 400,
-                backgroundColor: useGradient ? "transparent" : tokens.colors.surface,
-                borderRadius: 24,
-                padding: 32,
-                alignItems: "center",
-                // Shadow only for non-gradient or light mode
-                ...(!useGradient && {
-                    borderWidth: 1,
-                    borderColor: tokens.colors.borderLight,
-                }),
-            },
-            iconBox: {
-                width: 100,
-                height: 100,
-                borderRadius: 50,
-                backgroundColor: useGradient
-                    ? "rgba(255, 255, 255, 0.2)"
-                    : withAlpha(tokens.colors.primary, 0.1),
-                alignItems: "center",
-                justifyContent: "center",
-                marginBottom: 24,
-            }
-        });
-    }
-
-    if (variant === "minimal") {
-        return StyleSheet.create({
-            ...baseStyles,
-            slideContainer: {
-                width: "100%",
-                alignItems: "center",
-                padding: 0,
-            },
-            title: {
-                ...baseStyles.title,
-                fontSize: 32,
-                marginBottom: 24,
-            },
-            iconBox: {
-                marginBottom: 48,
-            }
-        });
-    }
-
-    // Default / Fullscreen
-    return StyleSheet.create({
-        ...baseStyles,
-        slideContainer: {
-            width: "100%",
-            alignItems: "center",
-            padding: 16,
-        },
-        iconBox: {
-            width: 120,
-            height: 120,
-            borderRadius: 60,
-            backgroundColor: useGradient
-                ? "rgba(255, 255, 255, 0.15)"
-                : tokens.colors.surfaceSecondary,
-            alignItems: "center",
-            justifyContent: "center",
-            marginBottom: 32,
-        }
-    });
-};