@umituz/react-native-onboarding 3.2.0 → 3.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.2.0",
+  "version": "3.2.1",
   "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",
@@ -68,4 +68,4 @@
     "README.md",
     "LICENSE"
   ]
-}
+}

package/src/domain/entities/OnboardingOptions.ts

@@ -91,5 +91,14 @@ export interface OnboardingOptions {
    * When true, all slides will use gradient backgrounds if available
    */
   useGradient?: boolean;
+
+  /**
+   * Visual theme variant (default: "default")
+   * - default: Standard layout
+   * - card: Content in a card with shadow
+   * - minimal: Clean, text-focused layout
+   * - fullscreen: Immersive fullscreen layout
+   */
+  themeVariant?: "default" | "card" | "minimal" | "fullscreen";
 }
 

package/src/domain/entities/OnboardingTheme.ts

@@ -0,0 +1,6 @@
+/**
+ * Onboarding Theme Variant
+ *
+ * Defines the visual style of the onboarding flow
+ */
+export type OnboardingThemeVariant = "default" | "card" | "minimal" | "fullscreen";

package/src/presentation/components/OnboardingScreenContent.tsx

@@ -51,6 +51,7 @@ export interface OnboardingScreenContentProps {
   renderSlide?: (slide: OnboardingSlide) => React.ReactNode;
   onUpgrade?: () => void;
   showPaywallOnComplete?: boolean;
+  variant?: "default" | "card" | "minimal" | "fullscreen";
 }
 
 export const OnboardingScreenContent: React.FC<OnboardingScreenContentProps> = ({
@@ -80,6 +81,7 @@ export const OnboardingScreenContent: React.FC<OnboardingScreenContentProps> = (
   renderSlide,
   onUpgrade,
   showPaywallOnComplete,
+  variant = "default",
 }) => {
   const { themeMode } = useTheme();
 
@@ -120,9 +122,14 @@ export const OnboardingScreenContent: React.FC<OnboardingScreenContentProps> = (
             value={currentAnswer}
             onChange={onAnswerChange}
             useGradient={useGradient}
+            variant={variant}
           />
         ) : (
-          <OnboardingSlideComponent slide={currentSlide} useGradient={useGradient} />
+          <OnboardingSlideComponent
+            slide={currentSlide}
+            useGradient={useGradient}
+            variant={variant}
+          />
         ))}
       {renderFooter ? (
         renderFooter({

package/src/presentation/components/OnboardingSlide.tsx

@@ -2,37 +2,56 @@
  * Onboarding Slide Component
  *
  * Displays a single onboarding slide with icon, title, and description
- * Uses AtomicIcon from design system for consistent icon rendering
+ * Supports multiple variants (default, card, minimal) and dark mode
  */
 
 import React, { useMemo } from "react";
-import { View, Text, StyleSheet, ScrollView } from "react-native";
+import { View, Text, 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 as OnboardingSlideType } from "../../domain/entities/OnboardingSlide";
+import type { OnboardingThemeVariant } from "../../domain/entities/OnboardingTheme";
+import { createOnboardingStyles } from "../styles/OnboardingSlideStyles";
 
 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> = ({ slide, useGradient = false }) => {
+export const OnboardingSlide: React.FC<OnboardingSlideProps> = ({
+  slide,
+  useGradient = false,
+  variant = "default"
+}) => {
   const tokens = useAppDesignTokens();
-  const styles = useMemo(() => getStyles(tokens, useGradient), [tokens, useGradient]);
+  const styles = useMemo(
+    () => createOnboardingStyles(tokens, useGradient, variant),
+    [tokens, useGradient, variant]
+  );
 
   const isEmoji = EMOJI_REGEX.test(slide.icon);
-  const isValidIconName = !isEmoji && typeof slide.icon === "string";
+  // Simple check for valid icon name - assuming string and not emoji
+  const isValidIconName = !isEmoji && typeof slide.icon === "string" && slide.icon.length > 0;
+
+  const iconColor = useGradient ? "#FFFFFF" : tokens.colors.primary;
+  const iconSize = variant === "minimal" ? 80 : 64;
 
-  const renderIcon = (color: string) => {
+  const renderIcon = () => {
     if (isEmoji) {
-      return <Text style={styles.icon}>{slide.icon}</Text>;
+      return <Text style={{ fontSize: iconSize }}>{slide.icon}</Text>;
     }
     if (isValidIconName) {
-      return <AtomicIcon name={slide.icon} customSize={60} customColor={color} />;
+      return <AtomicIcon name={slide.icon} customSize={iconSize} customColor={iconColor} />;
     }
-    return <Text style={styles.icon}>📱</Text>;
+    // 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 = () => {
@@ -49,111 +68,29 @@ export const OnboardingSlide: React.FC<OnboardingSlideProps> = ({ slide, useGrad
     );
   };
 
-  const iconColor = useGradient ? "#FFFFFF" : tokens.colors.textPrimary;
-
   return (
     <ScrollView
       contentContainerStyle={styles.content}
       showsVerticalScrollIndicator={false}
+      bounces={false}
     >
-      {useGradient ? (
-        <>
-          <View style={styles.iconContainer}>{renderIcon(iconColor)}</View>
-          <Text style={styles.title}>{slide.title}</Text>
-          <Text style={styles.description}>{slide.description}</Text>
-          {renderFeatures()}
-        </>
-      ) : (
-        <View style={styles.slideContent}>
-          <View style={styles.iconContainer}>{renderIcon(iconColor)}</View>
-          <Text style={styles.title}>{slide.title}</Text>
-          <Text style={styles.description}>{slide.description}</Text>
-          {renderFeatures()}
-        </View>
-      )}
+      <View style={styles.slideContainer}>
+        {/* Icon Section */}
+        {(isEmoji || isValidIconName) && (
+          <View style={styles.iconBox}>
+            {renderIcon()}
+          </View>
+        )}
+
+        {/* Text Section */}
+        <Text style={styles.title}>{slide.title}</Text>
+        <Text style={styles.description}>{slide.description}</Text>
+
+        {/* Features Section */}
+        {renderFeatures()}
+      </View>
     </ScrollView>
   );
 };
 
-const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>, useGradient: boolean) =>
-  StyleSheet.create({
-    content: {
-      flexGrow: 1,
-      justifyContent: "center",
-      alignItems: "center",
-      paddingHorizontal: 30,
-      paddingVertical: 40,
-    },
-    slideContent: {
-      alignItems: "center",
-      maxWidth: 400,
-      width: "100%",
-      backgroundColor: tokens.colors.surface,
-      padding: 30,
-      borderRadius: 24,
-      borderWidth: 1,
-      borderColor: tokens.colors.borderLight,
-      shadowColor: tokens.colors.textPrimary,
-      shadowOffset: {
-        width: 0,
-        height: 4,
-      },
-      shadowOpacity: 0.1,
-      shadowRadius: 8,
-      elevation: 4,
-    },
-    iconContainer: {
-      width: 120,
-      height: 120,
-      borderRadius: 60,
-      backgroundColor: useGradient
-        ? "rgba(255, 255, 255, 0.25)"
-        : withAlpha(tokens.colors.primary, 0.2),
-      alignItems: "center",
-      justifyContent: "center",
-      marginBottom: 40,
-      borderWidth: 2,
-      borderColor: useGradient
-        ? "rgba(255, 255, 255, 0.4)"
-        : withAlpha(tokens.colors.primary, 0.4),
-    },
-    icon: {
-      fontSize: 60,
-    },
-    title: {
-      fontSize: 28,
-      fontWeight: "bold",
-      color: useGradient ? "#FFFFFF" : tokens.colors.textPrimary,
-      textAlign: "center",
-      marginBottom: 16,
-    },
-    description: {
-      fontSize: 16,
-      color: useGradient ? "rgba(255, 255, 255, 0.9)" : tokens.colors.textSecondary,
-      textAlign: "center",
-      lineHeight: 24,
-      marginBottom: 20,
-    },
-    featuresContainer: {
-      width: "100%",
-      marginTop: 10,
-    },
-    featureItem: {
-      flexDirection: "row",
-      alignItems: "flex-start",
-      marginBottom: 12,
-    },
-    featureBullet: {
-      color: useGradient ? "#FFFFFF" : tokens.colors.primary,
-      fontSize: 20,
-      marginRight: 12,
-      marginTop: 2,
-    },
-    featureText: {
-      flex: 1,
-      fontSize: 15,
-      color: useGradient ? "rgba(255, 255, 255, 0.9)" : tokens.colors.textSecondary,
-      lineHeight: 22,
-    },
-  });
 

package/src/presentation/components/QuestionSlide.tsx

@@ -4,17 +4,20 @@
  */
 
 import React, { useMemo } from "react";
-import { View, Text, StyleSheet, ScrollView } from "react-native";
+import { View, Text, ScrollView } from "react-native";
 import { useAppDesignTokens } from "@umituz/react-native-design-system-theme";
 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";
 
 export interface QuestionSlideProps {
   slide: OnboardingSlide;
   value: any;
   onChange: (value: any) => void;
   useGradient?: boolean;
+  variant?: OnboardingThemeVariant;
 }
 
 export const QuestionSlide: React.FC<QuestionSlideProps> = ({
@@ -22,9 +25,13 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
   value,
   onChange,
   useGradient = false,
+  variant = "default",
 }) => {
   const tokens = useAppDesignTokens();
-  const styles = useMemo(() => getStyles(tokens, useGradient), [tokens, useGradient]);
+  const styles = useMemo(
+    () => createQuestionStyles(tokens, useGradient, variant),
+    [tokens, useGradient, variant]
+  );
   const { question } = slide;
 
   if (!question) {
@@ -53,54 +60,12 @@ export const QuestionSlide: React.FC<QuestionSlideProps> = ({
     <ScrollView
       contentContainerStyle={styles.content}
       showsVerticalScrollIndicator={false}
+      bounces={false}
     >
-      {useGradient ? (
-        content
-      ) : (
-        <View style={styles.slideContent}>{content}</View>
-      )}
+      <View style={styles.slideContainer}>
+        {content}
+      </View>
     </ScrollView>
   );
 };
 
-const getStyles = (
-  tokens: ReturnType<typeof useAppDesignTokens>,
-  useGradient: boolean,
-) =>
-  StyleSheet.create({
-    content: {
-      flexGrow: 1,
-      justifyContent: "center",
-      alignItems: "center",
-      paddingHorizontal: 30,
-      paddingVertical: 20,
-    },
-    slideContent: {
-      alignItems: "center",
-      maxWidth: 500,
-      width: "100%",
-      backgroundColor: tokens.colors.surface,
-      padding: 30,
-      borderRadius: 24,
-      borderWidth: 1,
-      borderColor: tokens.colors.borderLight,
-      shadowColor: tokens.colors.textPrimary,
-      shadowOffset: {
-        width: 0,
-        height: 4,
-      },
-      shadowOpacity: 0.1,
-      shadowRadius: 8,
-      elevation: 4,
-    },
-    questionContainer: {
-      width: "100%",
-      marginTop: 8,
-    },
-    requiredHint: {
-      fontSize: 13,
-      color: useGradient ? "rgba(255, 255, 255, 0.8)" : tokens.colors.textSecondary,
-      fontStyle: "italic",
-      marginTop: 12,
-    },
-  });

package/src/presentation/screens/OnboardingScreen.tsx

@@ -73,6 +73,7 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
   onUpgrade,
   showPaywallOnComplete = false,
   useGradient: globalUseGradient = false,
+  themeVariant = "default",
 }) => {
   if (__DEV__) {
     console.log("[OnboardingScreen] Rendering with slides:", slides?.length);
@@ -140,6 +141,7 @@ export const OnboardingScreen: React.FC<OnboardingScreenProps> = ({
       renderSlide={renderSlide}
       onUpgrade={onUpgrade}
       showPaywallOnComplete={showPaywallOnComplete}
+      variant={themeVariant}
     />
   );
 };

package/src/presentation/styles/OnboardingSlideStyles.ts

@@ -0,0 +1,144 @@
+import { StyleSheet } from "react-native";
+import { withAlpha } from "@umituz/react-native-design-system-theme";
+
+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 && {
+                    shadowColor: tokens.colors.shadow,
+                    shadowOffset: { width: 0, height: 4 },
+                    shadowOpacity: 0.1,
+                    shadowRadius: 12,
+                    elevation: 5,
+                    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,
+        }
+    });
+};

package/src/presentation/styles/QuestionSlideStyles.ts

@@ -0,0 +1,78 @@
+import { StyleSheet } from "react-native";
+
+export const createQuestionStyles = (
+    tokens: any,
+    useGradient: boolean,
+    variant: "default" | "card" | "minimal" | "fullscreen" = "default"
+) => {
+    // Base styles
+    const baseStyles = StyleSheet.create({
+        content: {
+            flexGrow: 1,
+            justifyContent: "center",
+            alignItems: "center",
+            paddingHorizontal: 24,
+            paddingVertical: 20,
+        },
+        questionContainer: {
+            width: "100%",
+            marginTop: 24,
+        },
+        requiredHint: {
+            fontSize: 13,
+            color: useGradient ? "rgba(255, 255, 255, 0.8)" : tokens.colors.textSecondary,
+            fontStyle: "italic",
+            marginTop: 16,
+            textAlign: "left",
+            alignSelf: "flex-start",
+            marginLeft: 4,
+        },
+    });
+
+    if (variant === "card") {
+        return StyleSheet.create({
+            ...baseStyles,
+            slideContainer: {
+                width: "100%",
+                maxWidth: 500,
+                backgroundColor: useGradient ? "transparent" : tokens.colors.surface,
+                borderRadius: 24,
+                padding: 32,
+                alignItems: "center",
+                ...(!useGradient && {
+                    shadowColor: tokens.colors.shadow,
+                    shadowOffset: { width: 0, height: 4 },
+                    shadowOpacity: 0.1,
+                    shadowRadius: 12,
+                    elevation: 5,
+                    borderWidth: 1,
+                    borderColor: tokens.colors.borderLight,
+                }),
+            },
+        });
+    }
+
+    if (variant === "minimal") {
+        return StyleSheet.create({
+            ...baseStyles,
+            slideContainer: {
+                width: "100%",
+                alignItems: "stretch",
+                padding: 0,
+            },
+        });
+    }
+
+    // Default
+    return StyleSheet.create({
+        ...baseStyles,
+        slideContainer: {
+            width: "100%",
+            maxWidth: 500,
+            alignItems: "center",
+            padding: 16,
+            backgroundColor: useGradient ? "rgba(255, 255, 255, 0.1)" : tokens.colors.surfaceSecondary,
+            borderRadius: 16,
+        },
+    });
+};