@umituz/react-native-onboarding 2.6.5 → 2.6.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "2.6.5",
+  "version": "2.6.7",
   "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",
@@ -30,10 +30,8 @@
     "type": "git",
     "url": "https://github.com/umituz/react-native-onboarding"
   },
-  "dependencies": {
-    "@react-native-community/slider": "^4.5.0"
-  },
   "peerDependencies": {
+    "@react-native-community/slider": "^4.5.0",
     "@umituz/react-native-storage": "latest",
     "@umituz/react-native-localization": "latest",
     "@umituz/react-native-design-system-theme": "latest",

package/src/presentation/components/QuestionRenderer.tsx

@@ -0,0 +1,70 @@
+/**
+ * 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;
+}
+
+export const QuestionRenderer: React.FC<QuestionRendererProps> = ({
+  question,
+  value,
+  onChange,
+}) => {
+  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;
+  }
+};
+

package/src/presentation/components/QuestionSlide.tsx

@@ -1,19 +1,14 @@
 /**
  * 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;
@@ -36,55 +31,19 @@ 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 content = (
+    <>
+      <QuestionSlideHeader slide={slide} useGradient={useGradient} />
 
-  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;
-    }
-  };
+      <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>
+      )}
+    </>
+  );
 
   return (
     <ScrollView
@@ -92,75 +51,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 +89,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 +100,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,50 +1,115 @@
 /**
  * Slider Question Component
- *
- * Slider for numeric value selection
+ * Single Responsibility: Display slider for numeric value selection
  */
 
-import React from "react";
-import { View, Text, StyleSheet } from "react-native";
-import Slider from "@react-native-community/slider";
+import React, { useMemo } from "react";
+import { View, Text, TouchableOpacity, StyleSheet } from "react-native";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 
+// Lazy import slider to handle peer dependency gracefully
+let SliderComponent: any = null;
+try {
+  // eslint-disable-next-line @typescript-eslint/no-require-imports
+  SliderComponent = require("@react-native-community/slider").default;
+} catch {
+  // Slider not available - will show fallback
+}
+
 export interface SliderQuestionProps {
   question: OnboardingQuestion;
   value: number | undefined;
   onChange: (value: number) => void;
 }
 
+const getSliderConfig = (question: OnboardingQuestion) => {
+  const { validation } = question;
+  const min = validation?.min ?? 0;
+  const max = validation?.max ?? 100;
+  return { min, max };
+};
+
+const SliderFallback: React.FC<{
+  min: number;
+  max: number;
+  value: number;
+  onChange: (value: number) => void;
+}> = ({ min, max, value, onChange }) => {
+  const handleIncrement = () => {
+    if (value < max) {
+      onChange(value + 1);
+    }
+  };
+
+  const handleDecrement = () => {
+    if (value > min) {
+      onChange(value - 1);
+    }
+  };
+
+  return (
+    <View style={styles.fallbackContainer}>
+      <View style={styles.fallbackControls}>
+        <TouchableOpacity
+          style={styles.fallbackButton}
+          onPress={handleDecrement}
+          activeOpacity={0.7}
+        >
+          <Text style={styles.fallbackButtonText}>−</Text>
+        </TouchableOpacity>
+        <Text style={styles.fallbackValue}>{value}</Text>
+        <TouchableOpacity
+          style={styles.fallbackButton}
+          onPress={handleIncrement}
+          activeOpacity={0.7}
+        >
+          <Text style={styles.fallbackButtonText}>+</Text>
+        </TouchableOpacity>
+      </View>
+      <View style={styles.fallbackLabels}>
+        <Text style={styles.label}>{min}</Text>
+        <Text style={styles.label}>{max}</Text>
+      </View>
+    </View>
+  );
+};
+
 export const SliderQuestion: React.FC<SliderQuestionProps> = ({
   question,
   value,
   onChange,
 }) => {
-  const { validation } = question;
-  const min = validation?.min ?? 0;
-  const max = validation?.max ?? 100;
+  const { min, max } = useMemo(() => getSliderConfig(question), [question]);
   const currentValue = value ?? min;
 
+  const sliderProps = {
+    style: styles.slider,
+    minimumValue: min,
+    maximumValue: max,
+    value: currentValue,
+    onValueChange: onChange,
+    minimumTrackTintColor: "#FFFFFF",
+    maximumTrackTintColor: "rgba(255, 255, 255, 0.3)",
+    thumbTintColor: "#FFFFFF",
+    step: 1,
+  };
+
   return (
     <View style={styles.container}>
       <View style={styles.valueContainer}>
         <Text style={styles.valueText}>{currentValue}</Text>
       </View>
-      <Slider
-        style={styles.slider}
-        minimumValue={min}
-        maximumValue={max}
-        value={currentValue}
-        onValueChange={onChange}
-        minimumTrackTintColor="#FFFFFF"
-        maximumTrackTintColor="rgba(255, 255, 255, 0.3)"
-        thumbTintColor="#FFFFFF"
-        step={1}
-      />
-      <View style={styles.labels}>
-        <Text style={styles.label}>{min}</Text>
-        <Text style={styles.label}>{max}</Text>
-      </View>
+      {SliderComponent ? (
+        <>
+          <SliderComponent {...sliderProps} />
+          <View style={styles.labels}>
+            <Text style={styles.label}>{min}</Text>
+            <Text style={styles.label}>{max}</Text>
+          </View>
+        </>
+      ) : (
+        <SliderFallback min={min} max={max} value={currentValue} onChange={onChange} />
+      )}
     </View>
   );
 };
@@ -77,5 +142,39 @@ const styles = StyleSheet.create({
     color: "rgba(255, 255, 255, 0.7)",
     fontWeight: "500",
   },
+  fallbackContainer: {
+    width: "100%",
+  },
+  fallbackControls: {
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 24,
+  },
+  fallbackButton: {
+    width: 60,
+    height: 60,
+    backgroundColor: "rgba(255, 255, 255, 0.2)",
+    borderRadius: 30,
+    alignItems: "center",
+    justifyContent: "center",
+  },
+  fallbackButtonText: {
+    fontSize: 48,
+    fontWeight: "bold",
+    color: "#FFFFFF",
+    lineHeight: 60,
+  },
+  fallbackValue: {
+    fontSize: 36,
+    fontWeight: "bold",
+    color: "#FFFFFF",
+    minWidth: 80,
+    textAlign: "center",
+  },
+  fallbackLabels: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    marginTop: 16,
+  },
 });
-