@umituz/react-native-onboarding 2.6.6 → 2.6.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "2.6.6",
+  "version": "2.6.8",
   "description": "Advanced onboarding flow for React Native apps with personalization questions, theme-aware colors, animations, and customizable slides. SOLID, DRY, KISS principles applied.",
   "main": "./src/index.ts",
   "types": "./src/index.ts",

package/src/presentation/components/QuestionRenderer.tsx

@@ -0,0 +1,85 @@
+/**
+ * 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 { SliderQuestion } from "./questions/SliderQuestion";
+import { RatingQuestion } from "./questions/RatingQuestion";
+
+export interface QuestionRendererProps {
+  question: OnboardingQuestion;
+  value: any;
+  onChange: (value: any) => void;
+  SliderComponent?: React.ComponentType<{
+    style?: any;
+    minimumValue: number;
+    maximumValue: number;
+    value: number;
+    onValueChange: (value: number) => void;
+    minimumTrackTintColor?: string;
+    maximumTrackTintColor?: string;
+    thumbTintColor?: string;
+    step?: number;
+  }>;
+}
+
+export const QuestionRenderer: React.FC<QuestionRendererProps> = ({
+  question,
+  value,
+  onChange,
+  SliderComponent,
+}) => {
+  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":
+      if (!SliderComponent) {
+        return null;
+      }
+      return (
+        <SliderQuestion
+          question={question}
+          value={value}
+          onChange={onChange}
+          SliderComponent={SliderComponent}
+        />
+      );
+    case "rating":
+      return (
+        <RatingQuestion
+          question={question}
+          value={value}
+          onChange={onChange}
+        />
+      );
+    default:
+      return null;
+  }
+};

package/src/presentation/components/QuestionSlide.tsx

@@ -1,25 +1,31 @@
 /**
  * Question Slide Component
- *
- * Displays a personalization question slide
+ * Single Responsibility: Display question slide with header and question
  */
 
 import React, { useMemo } from "react";
 import { View, Text, StyleSheet, ScrollView } from "react-native";
-import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
-import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system-theme";
+import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 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";
+import { QuestionSlideHeader } from "./QuestionSlideHeader";
+import { QuestionRenderer } from "./QuestionRenderer";
 
 export interface QuestionSlideProps {
   slide: OnboardingSlide;
   value: any;
   onChange: (value: any) => void;
   useGradient?: boolean;
+  SliderComponent?: React.ComponentType<{
+    style?: any;
+    minimumValue: number;
+    maximumValue: number;
+    value: number;
+    onValueChange: (value: number) => void;
+    minimumTrackTintColor?: string;
+    maximumTrackTintColor?: string;
+    thumbTintColor?: string;
+    step?: number;
+  }>;
 }
 
 export const QuestionSlide: React.FC<QuestionSlideProps> = ({
@@ -27,6 +33,7 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
   value,
   onChange,
   useGradient = false,
+  SliderComponent,
 }) => {
   const tokens = useAppDesignTokens();
   const styles = useMemo(() => getStyles(tokens, useGradient), [tokens, useGradient]);
@@ -36,55 +43,24 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
     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;
-    }
-  };
+  const content = (
+    <>
+      <QuestionSlideHeader slide={slide} useGradient={useGradient} />
+
+      <View style={styles.questionContainer}>
+        <QuestionRenderer
+          question={question}
+          value={value}
+          onChange={onChange}
+          SliderComponent={SliderComponent}
+        />
+      </View>
+
+      {question.validation?.required && !value && (
+        <Text style={styles.requiredHint}>* This field is required</Text>
+      )}
+    </>
+  );
 
   return (
     <ScrollView
@@ -92,75 +68,18 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
       showsVerticalScrollIndicator={false}
     >
       {useGradient ? (
-        // Gradient kullanıldığında card olmadan direkt içerik
-        <>
-          {/* 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>
-          )}
-        </>
+        content
       ) : (
-        // Normal modda card ile
-        <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={tokens.colors.textPrimary}
-              />
-            )}
-          </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>
+        <View style={styles.slideContent}>{content}</View>
       )}
     </ScrollView>
   );
 };
 
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>, useGradient: boolean) =>
+const getStyles = (
+  tokens: ReturnType<typeof useAppDesignTokens>,
+  useGradient: boolean,
+) =>
   StyleSheet.create({
     content: {
       flexGrow: 1,
@@ -187,38 +106,6 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>, useGradient: b
       shadowRadius: 8,
       elevation: 4,
     },
-    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,
-    },
     questionContainer: {
       width: "100%",
       marginTop: 8,
@@ -230,4 +117,3 @@ const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>, useGradient: b
       marginTop: 12,
     },
   });
-

package/src/presentation/components/QuestionSlideHeader.tsx

@@ -0,0 +1,86 @@
+/**
+ * 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-atoms";
+import { useAppDesignTokens, withAlpha } from "@umituz/react-native-design-system-theme";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+
+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> = ({
+  slide,
+  useGradient,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens, useGradient);
+
+  return (
+    <>
+      <View style={styles.iconContainer}>
+        {isEmoji(slide.icon) ? (
+          <Text style={styles.icon}>{slide.icon}</Text>
+        ) : (
+          <AtomicIcon
+            name={slide.icon as any}
+            customSize={48}
+            customColor={useGradient ? "#FFFFFF" : tokens.colors.textPrimary}
+          />
+        )}
+      </View>
+
+      <Text style={styles.title}>{slide.title}</Text>
+
+      {slide.description && <Text style={styles.description}>{slide.description}</Text>}
+    </>
+  );
+};
+
+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,
+    },
+  });
+

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

@@ -1,28 +1,43 @@
 /**
  * Slider Question Component
- *
- * Slider for numeric value selection
+ * Single Responsibility: Display slider for numeric value selection
  */
 
-import React from "react";
+import React, { useMemo } from "react";
 import { View, Text, StyleSheet } from "react-native";
-import Slider from "@react-native-community/slider";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 
 export interface SliderQuestionProps {
   question: OnboardingQuestion;
   value: number | undefined;
   onChange: (value: number) => void;
+  SliderComponent: React.ComponentType<{
+    style?: any;
+    minimumValue: number;
+    maximumValue: number;
+    value: number;
+    onValueChange: (value: number) => void;
+    minimumTrackTintColor?: string;
+    maximumTrackTintColor?: string;
+    thumbTintColor?: string;
+    step?: number;
+  }>;
 }
 
+const getSliderConfig = (question: OnboardingQuestion) => {
+  const { validation } = question;
+  const min = validation?.min ?? 0;
+  const max = validation?.max ?? 100;
+  return { min, max };
+};
+
 export const SliderQuestion: React.FC<SliderQuestionProps> = ({
   question,
   value,
   onChange,
+  SliderComponent,
 }) => {
-  const { validation } = question;
-  const min = validation?.min ?? 0;
-  const max = validation?.max ?? 100;
+  const { min, max } = useMemo(() => getSliderConfig(question), [question]);
   const currentValue = value ?? min;
 
   return (
@@ -30,7 +45,7 @@ export const SliderQuestion: React.FC<SliderQuestionProps> = ({
       <View style={styles.valueContainer}>
         <Text style={styles.valueText}>{currentValue}</Text>
       </View>
-      <Slider
+      <SliderComponent
         style={styles.slider}
         minimumValue={min}
         maximumValue={max}
@@ -78,4 +93,3 @@ const styles = StyleSheet.create({
     fontWeight: "500",
   },
 });
-

package/src/presentation/screens/OnboardingScreen.tsx

@@ -62,6 +62,23 @@ export interface OnboardingScreenProps extends OnboardingOptions {
    * When true, shows premium paywall before completing onboarding
    */
   showPaywallOnComplete?: boolean;
+
+  /**
+   * Slider component for slider questions
+   * Required if using slider question type
+   * Import from @react-native-community/slider
+   */
+  SliderComponent?: React.ComponentType<{
+    style?: any;
+    minimumValue: number;
+    maximumValue: number;
+    value: number;
+    onValueChange: (value: number) => void;
+    minimumTrackTintColor?: string;
+    maximumTrackTintColor?: string;
+    thumbTintColor?: string;
+    step?: number;
+  }>;
 }
 
 /**
@@ -89,6 +106,7 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   onUpgrade,
   showPaywallOnComplete = false,
   useGradient: globalUseGradient = false,
+  SliderComponent,
 }) => {
   const insets = useSafeAreaInsets();
   const tokens = useAppDesignTokens();
@@ -231,6 +249,7 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
             value={currentAnswer}
             onChange={setCurrentAnswer}
             useGradient={useGradient}
+            SliderComponent={SliderComponent}
           />
         ) : (
           <OnboardingSlideComponent slide={currentSlide} useGradient={useGradient} />