@umituz/react-native-onboarding 3.6.9 → 3.6.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-onboarding",
-  "version": "3.6.9",
+  "version": "3.6.10",
   "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/index.ts

@@ -68,7 +68,8 @@ export {
 export { OnboardingScreen, type OnboardingScreenProps } from "./presentation/screens/OnboardingScreen";
 export { OnboardingHeader, type OnboardingHeaderProps } from "./presentation/components/OnboardingHeader";
 export { OnboardingFooter, type OnboardingFooterProps } from "./presentation/components/OnboardingFooter";
-export { OnboardingThemeProvider, type OnboardingThemeProviderProps, useOnboardingTheme } from "./presentation/providers/OnboardingThemeProvider";
+export { OnboardingProvider, type OnboardingProviderProps, useOnboardingProvider } from "./presentation/providers/OnboardingProvider";
+export type { OnboardingTheme, OnboardingColors } from "./presentation/types/OnboardingTheme";
 
 // Export OnboardingSlide component
 // Note: TypeScript doesn't allow exporting both a type and a value with the same name

package/src/presentation/components/OnboardingFooter.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet, TouchableOpacity } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
 import { useLocalization } from "@umituz/react-native-localization";
 import { AtomicText } from "@umituz/react-native-design-system";
-import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
+import { useOnboardingProvider } from "../providers/OnboardingProvider";
 
 export interface OnboardingFooterProps {
   currentIndex: number;
@@ -32,7 +32,9 @@ export const OnboardingFooter = ({
 }: OnboardingFooterProps) => {
   const insets = useSafeAreaInsets();
   const { t } = useLocalization();
-  const { colors } = useOnboardingTheme();
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
 
   const buttonText = isLastSlide
     ? getStartedButtonText || t("onboarding.getStarted")

package/src/presentation/components/OnboardingHeader.tsx

@@ -2,7 +2,7 @@ import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
 import { useLocalization } from "@umituz/react-native-localization";
-import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
+import { useOnboardingProvider } from "../providers/OnboardingProvider";
 
 export interface OnboardingHeaderProps {
   isFirstSlide: boolean;
@@ -22,7 +22,9 @@ export const OnboardingHeader = ({
   skipButtonText,
 }: OnboardingHeaderProps) => {
   const { t } = useLocalization();
-  const { colors } = useOnboardingTheme();
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
 
   const skipText = skipButtonText || t("onboarding.skip");
 

package/src/presentation/components/OnboardingSlide.tsx

@@ -8,7 +8,7 @@ import { View, StyleSheet } from "react-native";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
 import type { OnboardingSlide as OnboardingSlideType } from "../../domain/entities/OnboardingSlide";
 import { BaseSlide } from "./BaseSlide";
-import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
+import { useOnboardingProvider } from "../providers/OnboardingProvider";
 
 export interface OnboardingSlideProps {
   slide: OnboardingSlideType;
@@ -19,7 +19,9 @@ export const OnboardingSlide = ({
   slide,
   variant = "default",
 }: OnboardingSlideProps) => {
-  const { colors } = useOnboardingTheme();
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
 
   const shouldShowIcon = slide.icon && !slide.hideIcon;
   const isEmoji = slide.iconType === 'emoji';

package/src/presentation/components/QuestionSlide.tsx

@@ -10,7 +10,7 @@ import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
 import { QuestionSlideHeader } from "./QuestionSlideHeader";
 import { QuestionRenderer } from "./QuestionRenderer";
 import { BaseSlide } from "./BaseSlide";
-import { useOnboardingTheme } from "../providers/OnboardingThemeProvider";
+import { useOnboardingProvider } from "../providers/OnboardingProvider";
 import { useLocalization } from "@umituz/react-native-localization";
 
 export interface QuestionSlideProps {
@@ -26,7 +26,9 @@ export const QuestionSlide = ({
   onChange,
   variant: _variant = "default",
 }: QuestionSlideProps) => {
-  const { colors } = useOnboardingTheme();
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
   const { t } = useLocalization();
   const { question } = slide;
 

package/src/presentation/components/QuestionSlideHeader.tsx

@@ -2,16 +2,16 @@ import React from "react";
 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";
+import { useOnboardingProvider } from "../providers/OnboardingProvider";
 
 export interface QuestionSlideHeaderProps {
   slide: OnboardingSlide;
 }
 
-export const QuestionSlideHeader = ({
-  slide,
-}: QuestionSlideHeaderProps) => {
-  const { colors } = useOnboardingTheme();
+export const QuestionSlideHeader = ({ slide }: QuestionSlideHeaderProps) => {
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
   const isEmoji = slide.iconType === 'emoji';
 
   return (

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
-import { useOnboardingTheme } from "../../providers/OnboardingThemeProvider";
+import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 
 export interface MultipleChoiceQuestionProps {
@@ -15,7 +15,9 @@ export const MultipleChoiceQuestion = ({
   value = [],
   onChange,
 }: MultipleChoiceQuestionProps) => {
-  const { colors } = useOnboardingTheme();
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
 
   const handleToggle = (optionId: string) => {
     const newValue = value.includes(optionId)

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
-import { useOnboardingTheme } from "../../providers/OnboardingThemeProvider";
+import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 
 export interface RatingQuestionProps {
@@ -15,7 +15,9 @@ export const RatingQuestion = ({
   value = 0,
   onChange,
 }: RatingQuestionProps) => {
-  const { colors } = useOnboardingTheme();
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
   const max = question.validation?.max ?? 5;
 
   return (

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon, AtomicText } from "@umituz/react-native-design-system";
-import { useOnboardingTheme } from "../../providers/OnboardingThemeProvider";
+import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 
 export interface SingleChoiceQuestionProps {
@@ -15,7 +15,9 @@ export const SingleChoiceQuestion = ({
   value,
   onChange,
 }: SingleChoiceQuestionProps) => {
-  const { colors } = useOnboardingTheme();
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
 
   const renderOption = (option: QuestionOption) => {
     const isSelected = value === option.id;

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

@@ -1,7 +1,7 @@
 import React from "react";
 import { View, TextInput, StyleSheet } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system";
-import { useOnboardingTheme } from "../../providers/OnboardingThemeProvider";
+import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 
 export interface TextInputQuestionProps {
@@ -15,7 +15,9 @@ export const TextInputQuestion = ({
   value = "",
   onChange,
 }: TextInputQuestionProps) => {
-  const { colors } = useOnboardingTheme();
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
   const { validation } = question;
 
   return (

package/src/presentation/providers/OnboardingProvider.tsx

@@ -0,0 +1,51 @@
+/**
+ * Onboarding Provider
+ * 
+ * Central manager for onboarding theme and configuration.
+ * All values are passed from the main application.
+ */
+
+import React, { createContext, useContext, useMemo } from "react";
+import type { OnboardingTheme, OnboardingColors } from "../types/OnboardingTheme";
+
+interface OnboardingProviderValue {
+  theme: OnboardingTheme;
+}
+
+const OnboardingScope = createContext<OnboardingProviderValue | undefined>(undefined);
+
+export interface OnboardingProviderProps {
+  children: React.ReactNode;
+  useGradient: boolean;
+  colors: OnboardingColors;
+}
+
+export const OnboardingProvider = ({
+  children,
+  useGradient,
+  colors,
+}: OnboardingProviderProps) => {
+  const value = useMemo(
+    () => ({
+      theme: {
+        colors,
+        useGradient,
+      },
+    }),
+    [colors, useGradient]
+  );
+
+  return (
+    <OnboardingScope.Provider value={value}>
+      {children}
+    </OnboardingScope.Provider>
+  );
+};
+
+export const useOnboardingProvider = (): OnboardingProviderValue => {
+  const scope = useContext(OnboardingScope);
+  if (!scope) {
+    throw new Error("useOnboardingProvider must be used within OnboardingProvider");
+  }
+  return scope;
+};

package/src/presentation/screens/OnboardingScreen.tsx

@@ -12,7 +12,8 @@ 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";
+import { OnboardingProvider } from "../providers/OnboardingProvider";
+import type { OnboardingColors } from "../types/OnboardingTheme";
 
 export interface OnboardingScreenProps extends OnboardingOptions {
   /**
@@ -52,6 +53,11 @@ export interface OnboardingScreenProps extends OnboardingOptions {
    * When true, shows premium paywall before completing onboarding
    */
   showPaywallOnComplete?: boolean;
+
+  /**
+   * Theme colors for the onboarding (Required to avoid hardcoded values)
+   */
+  themeColors: OnboardingColors;
 }
 
 export const OnboardingScreen = ({
@@ -75,6 +81,7 @@ export const OnboardingScreen = ({
   showPaywallOnComplete = false,
   useGradient: globalUseGradient = false,
   themeVariant = "default",
+  themeColors,
 }: OnboardingScreenProps) => {
   if (__DEV__) {
     console.log("[OnboardingScreen] Rendering with slides:", slides?.length);
@@ -115,7 +122,7 @@ export const OnboardingScreen = ({
   }
 
   return (
-    <OnboardingThemeProvider useGradient={useGradient}>
+    <OnboardingProvider useGradient={useGradient} colors={themeColors}>
       <OnboardingScreenContent
         containerStyle={[styles.container, containerStyle]}
         useGradient={useGradient}
@@ -145,7 +152,7 @@ export const OnboardingScreen = ({
         showPaywallOnComplete={showPaywallOnComplete}
         variant={themeVariant}
       />
-    </OnboardingThemeProvider>
+    </OnboardingProvider>
   );
 };
 

package/src/presentation/types/OnboardingTheme.ts

@@ -0,0 +1,27 @@
+/**
+ * Onboarding Theme Types
+ */
+
+export 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;
+  featureItemBg: string;
+}
+
+export interface OnboardingTheme {
+  colors: OnboardingColors;
+  useGradient: boolean;
+}

package/src/domain/entities/OnboardingTheme.ts

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

package/src/presentation/providers/OnboardingThemeProvider.tsx

@@ -1,103 +0,0 @@
-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;
-    featureItemBg: string;
-}
-
-interface OnboardingThemeValue {
-    colors: OnboardingColors;
-    useGradient: boolean;
-}
-
-const OnboardingThemeInternal = createContext<OnboardingThemeValue | undefined>(undefined);
-
-export interface OnboardingThemeProviderProps {
-    children: React.ReactNode;
-    useGradient?: boolean;
-}
-
-export const OnboardingThemeProvider = ({
-    children,
-    useGradient = false,
-}: OnboardingThemeProviderProps) => {
-    const tokens = useAppDesignTokens();
-
-    const colors = useMemo<OnboardingColors>(() => {
-        const primaryContent = tokens.colors.onPrimary || "#FFFFFF";
-
-        if (useGradient) {
-            return {
-                iconColor: primaryContent,
-                textColor: primaryContent,
-                subTextColor: primaryContent + "CC",
-                buttonBg: primaryContent,
-                buttonTextColor: tokens.colors.primary,
-                progressBarBg: primaryContent + "40",
-                progressFillColor: primaryContent,
-                dotColor: primaryContent + "66",
-                activeDotColor: primaryContent,
-                progressTextColor: primaryContent + "CC",
-                headerButtonBg: primaryContent + "33",
-                headerButtonBorder: primaryContent + "59",
-                iconBg: primaryContent + "33",
-                iconBorder: primaryContent + "59",
-                errorColor: "#FFCDD2",
-                featureItemBg: primaryContent + "1A",
-            };
-        }
-
-        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,
-            featureItemBg: tokens.colors.surfaceSecondary || tokens.colors.surfaceVariant || "rgba(0,0,0,0.05)",
-        };
-    }, [tokens, useGradient]);
-
-    const value = useMemo(
-        () => ({ colors, useGradient }),
-        [colors, useGradient]
-    );
-
-    return (
-        <OnboardingThemeInternal.Provider value={value}>
-            {children}
-        </OnboardingThemeInternal.Provider>
-    );
-};
-
-export const useOnboardingTheme = (): OnboardingThemeValue => {
-    const theme = useContext(OnboardingThemeInternal);
-    if (!theme) {
-        throw new Error('useOnboardingTheme must be used within OnboardingThemeProvider');
-    }
-    return theme;
-};