@umituz/react-native-design-system 2.6.128 → 2.7.0

package/src/onboarding/presentation/hooks/useOnboardingScreenState.ts

@@ -0,0 +1,146 @@
+/**
+ * useOnboardingScreenState Hook
+ * Single Responsibility: Coordinate onboarding screen state
+ */
+
+import { useMemo, useEffect } from "react";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import { useOnboarding } from "../../infrastructure/storage/OnboardingStore";
+import { useOnboardingNavigation } from "../../infrastructure/hooks/useOnboardingNavigation";
+import { useOnboardingAnswers } from "../../infrastructure/hooks/useOnboardingAnswers";
+import { useOnboardingContainerStyle } from "./useOnboardingContainerStyle";
+import { useOnboardingScreenHandlers } from "./useOnboardingScreenHandlers";
+import { SlideManager } from "../../infrastructure/services/SlideManager";
+import { ValidationManager } from "../../infrastructure/services/ValidationManager";
+import { shouldUseCustomBackground } from "../../infrastructure/utils/backgroundUtils";
+
+export interface UseOnboardingScreenStateProps {
+  slides: OnboardingSlide[] | undefined;
+  storageKey?: string;
+  onComplete?: () => void | Promise<void>;
+  onSkip?: () => void | Promise<void>;
+  globalUseCustomBackground?: boolean;
+}
+
+export interface UseOnboardingScreenStateReturn {
+  filteredSlides: OnboardingSlide[];
+  currentSlide: OnboardingSlide | undefined;
+  currentIndex: number;
+  isFirstSlide: boolean;
+  isLastSlide: boolean;
+  currentAnswer: unknown;
+  isAnswerValid: boolean;
+  useCustomBackground: boolean;
+  containerStyle: unknown;
+  handleNext: () => Promise<void>;
+  handlePrevious: () => void;
+  handleSkip: () => Promise<void>;
+  setCurrentAnswer: (value: unknown) => void;
+}
+
+export function useOnboardingScreenState({
+  slides,
+  storageKey,
+  onComplete,
+  onSkip,
+  globalUseCustomBackground = false,
+}: UseOnboardingScreenStateProps): UseOnboardingScreenStateReturn {
+  const onboardingStore = useOnboarding();
+
+  const filteredSlides = useMemo(() => {
+    if (!slides || !Array.isArray(slides) || slides.length === 0) {
+      return [];
+    }
+    const userData = onboardingStore.userData;
+    return SlideManager.filterSlides(slides, userData);
+  }, [slides, onboardingStore.userData]);
+
+  const {
+    currentIndex,
+    goToNext,
+    goToPrevious,
+    complete: completeOnboarding,
+    skip: skipOnboarding,
+    isLastSlide,
+    isFirstSlide,
+  } = useOnboardingNavigation(
+    filteredSlides.length,
+    async () => {
+      await onboardingStore.complete(storageKey);
+      if (onComplete) {
+        await onComplete();
+      }
+    },
+    async () => {
+      await onboardingStore.skip(storageKey);
+      if (onSkip) {
+        await onSkip();
+      }
+    }
+  );
+
+  const currentSlide = useMemo(
+    () => SlideManager.getSlideAtIndex(filteredSlides, currentIndex),
+    [filteredSlides, currentIndex]
+  );
+
+  const {
+    currentAnswer,
+    setCurrentAnswer,
+    loadAnswerForSlide,
+    saveCurrentAnswer,
+  } = useOnboardingAnswers(currentSlide);
+
+  const { handleNext, handlePrevious, handleSkip } = useOnboardingScreenHandlers(
+    {
+      filteredSlides,
+      currentSlide,
+      currentIndex,
+      isLastSlide,
+      saveCurrentAnswer,
+      completeOnboarding,
+      goToNext,
+      goToPrevious,
+      skipOnboarding,
+      loadAnswerForSlide,
+    }
+  );
+
+  const useCustomBackground = shouldUseCustomBackground(currentSlide, globalUseCustomBackground);
+
+  const isAnswerValid = useMemo(() => {
+    if (!currentSlide?.question) {
+      return true;
+    }
+    return ValidationManager.validateAnswer(
+      currentSlide.question,
+      currentAnswer
+    );
+  }, [currentSlide, currentAnswer]);
+
+  const { containerStyle } = useOnboardingContainerStyle({ useCustomBackground });
+
+  useEffect(() => {
+    return () => {
+      if (__DEV__) {
+        console.log("[useOnboardingScreenState] Cleanup completed");
+      }
+    };
+  }, []);
+
+  return {
+    filteredSlides,
+    currentSlide,
+    currentIndex,
+    isFirstSlide,
+    isLastSlide,
+    currentAnswer,
+    isAnswerValid,
+    useCustomBackground,
+    containerStyle,
+    handleNext,
+    handlePrevious,
+    handleSkip,
+    setCurrentAnswer,
+  };
+}

package/src/onboarding/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;
+  useCustomBackground: boolean;
+  colors: OnboardingColors;
+}
+
+export const OnboardingProvider = ({
+  children,
+  useCustomBackground,
+  colors,
+}: OnboardingProviderProps) => {
+  const value = useMemo(
+    () => ({
+      theme: {
+        colors,
+        useCustomBackground,
+      },
+    }),
+    [colors, useCustomBackground]
+  );
+
+  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/onboarding/presentation/screens/OnboardingScreen.tsx

@@ -0,0 +1,189 @@
+/**
+ * Onboarding Screen
+ *
+ * Main onboarding screen component with theme-aware colors
+ * Generic and reusable across hundreds of apps
+ *
+ * This component only handles UI coordination - no business logic
+ */
+
+import React, { useMemo } from "react";
+import { StyleSheet } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system";
+import type { OnboardingOptions } from "../../domain/entities/OnboardingOptions";
+import { useOnboardingScreenState } from "../hooks/useOnboardingScreenState";
+import { OnboardingScreenContent } from "../components/OnboardingScreenContent";
+import { OnboardingProvider } from "../providers/OnboardingProvider";
+import type { OnboardingColors } from "../types/OnboardingTheme";
+
+export interface OnboardingScreenProps extends OnboardingOptions {
+  /**
+   * Optional custom header component
+   */
+  renderHeader?: (props: {
+    isFirstSlide: boolean;
+    onBack: () => void;
+    onSkip: () => void;
+  }) => React.ReactNode;
+
+  /**
+   * Optional custom footer component
+   */
+  renderFooter?: (props: {
+    currentIndex: number;
+    totalSlides: number;
+    isLastSlide: boolean;
+    onNext: () => void;
+    onUpgrade?: () => void;
+    showPaywallOnComplete?: boolean;
+  }) => React.ReactNode;
+
+  /**
+   * Optional custom slide component
+   */
+  renderSlide?: (slide: OnboardingOptions["slides"][0]) => React.ReactNode;
+
+  /**
+   * Optional upgrade callback for premium features
+   * Called when user wants to upgrade from onboarding
+   */
+  onUpgrade?: () => void;
+
+  /**
+   * Show paywall modal on onboarding completion (default: false)
+   * When true, shows premium paywall before completing onboarding
+   */
+  showPaywallOnComplete?: boolean;
+
+  /**
+   * Theme colors for the onboarding (Optional - will use design tokens if not provided)
+   */
+  themeColors?: OnboardingColors;
+}
+
+export const OnboardingScreen = ({
+  slides,
+  onComplete,
+  onSkip,
+  skipButtonText,
+  nextButtonText,
+  getStartedButtonText,
+  showSkipButton = true,
+  showBackButton = true,
+  showProgressBar = true,
+  showDots = true,
+  showProgressText = true,
+  storageKey,
+  autoComplete: _autoComplete = false,
+  renderHeader,
+  renderFooter,
+  renderSlide,
+  onUpgrade,
+  showPaywallOnComplete = false,
+  useCustomBackground: globalUseCustomBackground = false,
+  themeVariant = "default",
+  themeColors: providedThemeColors,
+}: OnboardingScreenProps) => {
+  if (__DEV__) {
+    console.log("[OnboardingScreen] Rendering with slides:", slides?.length);
+  }
+
+  const tokens = useAppDesignTokens();
+
+  const themeColors = useMemo(
+    () =>
+      providedThemeColors ?? {
+        iconColor: tokens.colors.primary,
+        textColor: tokens.colors.textPrimary,
+        subTextColor: tokens.colors.textSecondary,
+        buttonBg: tokens.colors.primary,
+        buttonTextColor: tokens.colors.onPrimary,
+        progressBarBg: tokens.colors.surfaceSecondary,
+        progressFillColor: tokens.colors.primary,
+        dotColor: tokens.colors.surfaceSecondary,
+        activeDotColor: tokens.colors.primary,
+        progressTextColor: tokens.colors.textSecondary,
+        headerButtonBg: tokens.colors.surface,
+        headerButtonBorder: tokens.colors.borderLight,
+        iconBg: tokens.colors.surfaceSecondary,
+        iconBorder: tokens.colors.borderLight,
+        errorColor: tokens.colors.error,
+        featureItemBg: tokens.colors.surfaceSecondary,
+      },
+    [providedThemeColors, tokens]
+  );
+
+  const {
+    filteredSlides,
+    currentSlide,
+    currentIndex,
+    isFirstSlide,
+    isLastSlide,
+    currentAnswer,
+    isAnswerValid,
+    useCustomBackground,
+    containerStyle,
+    handleNext,
+    handlePrevious,
+    handleSkip,
+    setCurrentAnswer,
+  } = useOnboardingScreenState({
+    slides,
+    storageKey,
+    onComplete,
+    onSkip,
+    globalUseCustomBackground,
+  });
+
+  if (__DEV__) {
+    console.log("[OnboardingScreen] filteredSlides:", filteredSlides?.length);
+  }
+
+  // Early return if no slides - prevents rendering empty/broken screen
+  if (filteredSlides.length === 0) {
+    if (__DEV__) {
+      console.log("[OnboardingScreen] No slides, returning null");
+    }
+    return null;
+  }
+
+  return (
+    <OnboardingProvider useCustomBackground={useCustomBackground} colors={themeColors}>
+      <OnboardingScreenContent
+        containerStyle={[styles.container, containerStyle]}
+        useCustomBackground={useCustomBackground}
+        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}
+      />
+    </OnboardingProvider>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+});

package/src/onboarding/presentation/types/OnboardingProps.ts

@@ -0,0 +1,46 @@
+/**
+ * Onboarding Screen Content Props
+ */
+
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+
+export interface OnboardingScreenContentProps {
+  containerStyle?: any;
+  useCustomBackground: boolean;
+  currentSlide: OnboardingSlide | undefined;
+  isFirstSlide: boolean;
+  isLastSlide: boolean;
+  currentIndex: number;
+  totalSlides: number;
+  currentAnswer: any;
+  isAnswerValid: boolean;
+  showBackButton: boolean;
+  showSkipButton: boolean;
+  showProgressBar: boolean;
+  showDots: boolean;
+  showProgressText: boolean;
+  skipButtonText?: string;
+  nextButtonText?: string;
+  getStartedButtonText?: string;
+  onBack: () => void;
+  onSkip: () => void;
+  onNext: () => void;
+  onAnswerChange: (value: any) => void;
+  renderHeader?: (props: {
+    isFirstSlide: boolean;
+    onBack: () => void;
+    onSkip: () => void;
+  }) => React.ReactNode;
+  renderFooter?: (props: {
+    currentIndex: number;
+    totalSlides: number;
+    isLastSlide: boolean;
+    onNext: () => void;
+    onUpgrade?: () => void;
+    showPaywallOnComplete?: boolean;
+  }) => React.ReactNode;
+  renderSlide?: (slide: OnboardingSlide) => React.ReactNode;
+  onUpgrade?: () => void;
+  showPaywallOnComplete?: boolean;
+  variant?: "default" | "card" | "minimal" | "fullscreen";
+}

package/src/onboarding/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;
+  useCustomBackground: boolean;
+}