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

package/src/onboarding/presentation/components/OnboardingBackground.tsx

@@ -0,0 +1,91 @@
+/**
+ * Onboarding Background Component
+ * Handles rendering of video, image or solid backgrounds
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+
+import { Image } from "expo-image";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import { BackgroundVideo } from "./BackgroundVideo";
+import { BackgroundImageCollage } from "./BackgroundImageCollage";
+
+interface OnboardingBackgroundProps {
+  currentSlide: OnboardingSlide | undefined;
+  useCustomBackground: boolean;
+  showOverlay: boolean;
+  overlayOpacity: number;
+}
+
+export const OnboardingBackground: React.FC<OnboardingBackgroundProps> = ({
+  currentSlide,
+  useCustomBackground,
+  showOverlay,
+  overlayOpacity,
+}) => {
+  if (!currentSlide) return null;
+
+  const renderContent = () => {
+    if (currentSlide.backgroundVideo) {
+      return (
+        <BackgroundVideo
+          source={currentSlide.backgroundVideo}
+          overlayOpacity={overlayOpacity}
+        />
+      );
+    }
+
+    if (currentSlide.backgroundImages && currentSlide.backgroundImages.length > 0) {
+      return (
+        <BackgroundImageCollage
+          images={currentSlide.backgroundImages}
+          layout={currentSlide.backgroundImagesLayout || "grid"}
+          columns={currentSlide.backgroundImagesColumns}
+          gap={currentSlide.backgroundImagesGap}
+          borderRadius={currentSlide.backgroundImagesBorderRadius}
+        />
+      );
+    }
+
+    if (currentSlide.backgroundImage) {
+      return (
+        <Image
+          source={currentSlide.backgroundImage}
+          style={StyleSheet.absoluteFill}
+          contentFit="cover"
+          transition={500}
+        />
+      );
+    }
+
+    if (useCustomBackground && currentSlide.backgroundColor) {
+      return (
+        <View
+          style={[
+            StyleSheet.absoluteFill,
+            { backgroundColor: currentSlide.backgroundColor }
+          ]}
+        />
+      );
+    }
+
+    return null;
+  };
+
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents="none">
+      {renderContent()}
+      <View
+        style={[
+          StyleSheet.absoluteFill,
+          {
+            backgroundColor: showOverlay
+              ? `rgba(0,0,0,${overlayOpacity})`
+              : "transparent",
+          },
+        ]}
+      />
+    </View>
+  );
+};

package/src/onboarding/presentation/components/OnboardingFooter.tsx

@@ -0,0 +1,151 @@
+import React from "react";
+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 { useOnboardingProvider } from "../providers/OnboardingProvider";
+
+export interface OnboardingFooterProps {
+  currentIndex: number;
+  totalSlides: number;
+  isLastSlide: boolean;
+  onNext: () => void;
+  showProgressBar?: boolean;
+  showDots?: boolean;
+  showProgressText?: boolean;
+  nextButtonText?: string;
+  getStartedButtonText?: string;
+  disabled?: boolean;
+}
+
+export const OnboardingFooter = ({
+  currentIndex,
+  totalSlides,
+  isLastSlide,
+  onNext,
+  showProgressBar = true,
+  showDots = true,
+  showProgressText = true,
+  nextButtonText,
+  getStartedButtonText,
+  disabled = false,
+}: OnboardingFooterProps) => {
+  const insets = useSafeAreaInsets();
+  const { t } = useLocalization();
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
+
+  const buttonText = isLastSlide
+    ? getStartedButtonText || t("onboarding.getStarted")
+    : nextButtonText || t("general.continue");
+
+  const progressPercent = ((currentIndex + 1) / totalSlides) * 100;
+
+  return (
+    <View style={[styles.footer, { paddingBottom: insets.bottom + 24 }]}>
+      {showProgressBar && (
+        <View style={styles.progressContainer}>
+          <View style={[styles.progressBar, { backgroundColor: colors.progressBarBg }]}>
+            <View style={[styles.progressFill, { width: `${progressPercent}%`, backgroundColor: colors.progressFillColor }]} />
+          </View>
+        </View>
+      )}
+
+      {showDots && (
+        <View style={styles.dots}>
+          {Array.from({ length: totalSlides }).map((_, index) => (
+            <View
+              key={index}
+              style={[
+                styles.dot,
+                { backgroundColor: colors.dotColor },
+                index === currentIndex && {
+                  width: 12,
+                  backgroundColor: colors.activeDotColor
+                }
+              ]}
+            />
+          ))}
+        </View>
+      )}
+
+      <TouchableOpacity
+        onPress={onNext}
+        disabled={disabled}
+        activeOpacity={0.7}
+        style={[
+          styles.button,
+          {
+            backgroundColor: colors.buttonBg,
+            opacity: disabled ? 0.5 : 1,
+          },
+        ]}
+      >
+        <AtomicText
+          type="labelLarge"
+          style={[styles.buttonText, { color: colors.buttonTextColor }]}
+        >
+          {buttonText}
+        </AtomicText>
+      </TouchableOpacity>
+
+      {showProgressText && (
+        <AtomicText
+          type="labelSmall"
+          style={[styles.progressText, { color: colors.progressTextColor }]}
+        >
+          {currentIndex + 1} {t("general.of")} {totalSlides}
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  footer: {
+    paddingHorizontal: 24,
+    paddingTop: 24,
+  },
+  progressContainer: {
+    marginBottom: 20,
+  },
+  progressBar: {
+    height: 4,
+    borderRadius: 2,
+    overflow: "hidden",
+  },
+  progressFill: {
+    height: "100%",
+    borderRadius: 2,
+  },
+  dots: {
+    flexDirection: "row",
+    justifyContent: "center",
+    marginBottom: 24,
+    gap: 8,
+  },
+  dot: {
+    width: 6,
+    height: 6,
+    borderRadius: 3,
+  },
+  progressText: {
+    marginTop: 12,
+    textAlign: "center",
+  },
+  button: {
+    width: "100%",
+    minHeight: 52,
+    borderRadius: 16,
+    alignItems: "center",
+    justifyContent: "center",
+    paddingVertical: 16,
+    paddingHorizontal: 24,
+  },
+  buttonText: {
+    fontWeight: "700",
+  },
+});
+
+

package/src/onboarding/presentation/components/OnboardingHeader.tsx

@@ -0,0 +1,92 @@
+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 { useOnboardingProvider } from "../providers/OnboardingProvider";
+
+export interface OnboardingHeaderProps {
+  isFirstSlide: boolean;
+  onBack: () => void;
+  onSkip: () => void;
+  showBackButton?: boolean;
+  showSkipButton?: boolean;
+  skipButtonText?: string;
+}
+
+export const OnboardingHeader = ({
+  isFirstSlide,
+  onBack,
+  onSkip,
+  showBackButton = true,
+  showSkipButton = true,
+  skipButtonText,
+}: OnboardingHeaderProps) => {
+  const { t } = useLocalization();
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
+
+  const skipText = skipButtonText || t("onboarding.skip");
+
+  return (
+    <View style={styles.header}>
+      {showBackButton ? (
+        <TouchableOpacity
+          onPress={() => !isFirstSlide && onBack?.()}
+          disabled={isFirstSlide}
+          style={[
+            styles.headerButton,
+            {
+              backgroundColor: colors.headerButtonBg,
+              borderColor: colors.headerButtonBorder,
+            },
+            isFirstSlide && styles.headerButtonDisabled,
+          ]}
+          activeOpacity={0.7}
+          hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
+        >
+          <AtomicIcon name="chevron-back" customSize={20} customColor={colors.iconColor} />
+        </TouchableOpacity>
+      ) : (
+        <View style={styles.headerButton} />
+      )}
+      {showSkipButton ? (
+        <TouchableOpacity onPress={onSkip} activeOpacity={0.7}>
+          <AtomicText
+            type="labelLarge"
+            style={[styles.skipText, { color: colors.textColor }]}
+          >
+            {skipText}
+          </AtomicText>
+        </TouchableOpacity>
+      ) : <View />}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  header: {
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center",
+    paddingHorizontal: 20,
+    paddingTop: 10,
+    paddingBottom: 20,
+  },
+  headerButton: {
+    width: 40,
+    height: 40,
+    borderRadius: 20,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 1,
+  },
+  headerButtonDisabled: {
+    opacity: 0,
+  },
+  skipText: {
+    fontWeight: "700",
+  },
+});
+
+

package/src/onboarding/presentation/components/OnboardingResetSetting.tsx

@@ -0,0 +1,70 @@
+import React, { useCallback } from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicIcon, AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
+
+export interface OnboardingResetSettingProps {
+    onReset: () => void | Promise<void>;
+    title?: string;
+    description?: string;
+    iconName?: string;
+    iconColor?: string;
+    titleColor?: string;
+    visible?: boolean;
+    isLast?: boolean;
+}
+
+export const OnboardingResetSetting = ({
+    onReset,
+    title,
+    description,
+    iconName = "extension-puzzle",
+    iconColor,
+    titleColor,
+    visible = __DEV__,
+    isLast = false,
+}: OnboardingResetSettingProps) => {
+    const tokens = useAppDesignTokens();
+
+    const handlePress = useCallback(async () => {
+        await onReset();
+    }, [onReset]);
+
+    if (!visible) return null;
+
+    const defaultIconColor = iconColor || tokens.colors.error;
+    const defaultTitleColor = titleColor || tokens.colors.error;
+
+    return (
+        <TouchableOpacity onPress={handlePress} activeOpacity={0.7}>
+            <View style={[styles.container, !isLast && { borderBottomWidth: StyleSheet.hairlineWidth, borderBottomColor: tokens.colors.border }]}>
+                <View style={styles.iconContainer}>
+                    <AtomicIcon name={iconName} size="md" customColor={defaultIconColor} />
+                </View>
+                <View style={styles.content}>
+                    <AtomicText type="bodyLarge" style={{ color: defaultTitleColor, fontWeight: '600' }} numberOfLines={1}>
+                        {title}
+                    </AtomicText>
+                    <AtomicText type="bodyMedium" style={{ color: tokens.colors.textSecondary }} numberOfLines={1}>
+                        {description}
+                    </AtomicText>
+                </View>
+            </View>
+        </TouchableOpacity>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: 16,
+        paddingHorizontal: 20,
+    },
+    iconContainer: {
+        marginRight: 16,
+    },
+    content: {
+        flex: 1,
+    }
+});
+

package/src/onboarding/presentation/components/OnboardingScreenContent.tsx

@@ -0,0 +1,146 @@
+/**
+ * Onboarding Screen Content Component
+ * Single Responsibility: Render onboarding screen content (header, slide, footer)
+ */
+
+import React from "react";
+import { View, StyleSheet, StatusBar } from "react-native";
+import { useTheme } from "@umituz/react-native-design-system";
+import { OnboardingHeader } from "./OnboardingHeader";
+import { OnboardingSlide as OnboardingSlideComponent } from "./OnboardingSlide";
+import { QuestionSlide } from "./QuestionSlide";
+import { OnboardingFooter } from "./OnboardingFooter";
+import { OnboardingBackground } from "./OnboardingBackground";
+import { useOnboardingGestures } from "../hooks/useOnboardingGestures";
+import type { OnboardingScreenContentProps } from "../types/OnboardingProps";
+
+export const OnboardingScreenContent = ({
+  containerStyle,
+  useCustomBackground,
+  currentSlide,
+  isFirstSlide,
+  isLastSlide,
+  currentIndex,
+  totalSlides,
+  currentAnswer,
+  isAnswerValid,
+  showBackButton,
+  showSkipButton,
+  showProgressBar,
+  showDots,
+  showProgressText,
+  skipButtonText,
+  nextButtonText,
+  getStartedButtonText,
+  onBack,
+  onSkip,
+  onNext,
+  onAnswerChange,
+  renderHeader,
+  renderFooter,
+  renderSlide,
+  onUpgrade,
+  showPaywallOnComplete,
+  variant = "default",
+}: OnboardingScreenContentProps) => {
+  const { themeMode } = useTheme();
+
+  const panResponder = useOnboardingGestures({
+    isFirstSlide,
+    isAnswerValid,
+    onNext,
+    onBack,
+  });
+
+  const hasMedia =
+    !!currentSlide?.backgroundImage || 
+    !!currentSlide?.backgroundVideo ||
+    (!!currentSlide?.backgroundImages && currentSlide.backgroundImages.length > 0);
+  const overlayOpacity = currentSlide?.overlayOpacity ?? 0.5;
+  const showOverlay = useCustomBackground || hasMedia;
+
+  return (
+    <View
+      style={[styles.container, containerStyle]}
+      {...panResponder.panHandlers}
+    >
+      <StatusBar
+        barStyle={
+          themeMode === "dark" || showOverlay
+            ? "light-content"
+            : "dark-content"
+        }
+      />
+
+      <OnboardingBackground
+        currentSlide={currentSlide}
+        useCustomBackground={useCustomBackground}
+        showOverlay={showOverlay}
+        overlayOpacity={overlayOpacity}
+      />
+
+      {renderHeader ? (
+        renderHeader({ isFirstSlide, onBack, onSkip })
+      ) : (
+        <OnboardingHeader
+          isFirstSlide={isFirstSlide}
+          onBack={onBack}
+          onSkip={onSkip}
+          showBackButton={showBackButton}
+          showSkipButton={showSkipButton}
+          skipButtonText={skipButtonText}
+        />
+      )}
+
+      {currentSlide && (
+        <View style={styles.content}>
+          {renderSlide ? (
+            renderSlide(currentSlide)
+          ) : currentSlide.type === "question" && currentSlide.question ? (
+            <QuestionSlide
+              slide={currentSlide}
+              value={currentAnswer}
+              onChange={onAnswerChange}
+              variant={variant}
+            />
+          ) : (
+            <OnboardingSlideComponent slide={currentSlide} variant={variant} />
+          )}
+        </View>
+      )}
+
+      {renderFooter ? (
+        renderFooter({
+          currentIndex,
+          totalSlides,
+          isLastSlide,
+          onNext,
+          onUpgrade,
+          showPaywallOnComplete,
+        })
+      ) : (
+        <OnboardingFooter
+          currentIndex={currentIndex}
+          totalSlides={totalSlides}
+          isLastSlide={isLastSlide}
+          onNext={onNext}
+          showProgressBar={showProgressBar}
+          showDots={showDots}
+          showProgressText={showProgressText}
+          nextButtonText={nextButtonText}
+          getStartedButtonText={getStartedButtonText}
+          disabled={!isAnswerValid}
+        />
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  content: {
+    flex: 1,
+  },
+});

package/src/onboarding/presentation/components/OnboardingSlide.tsx

@@ -0,0 +1,124 @@
+/**
+ * OnboardingSlide Component
+ * Single Responsibility: Render a single onboarding slide
+ */
+
+import React from "react";
+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 { useOnboardingProvider } from "../providers/OnboardingProvider";
+
+export interface OnboardingSlideProps {
+  slide: OnboardingSlideType;
+  variant?: "default" | "card" | "minimal" | "fullscreen";
+}
+
+export const OnboardingSlide = ({
+  slide,
+  variant = "default",
+}: OnboardingSlideProps) => {
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
+
+  const shouldShowIcon = slide.icon && !slide.hideIcon;
+  const isEmoji = slide.iconType === 'emoji';
+  const iconSize = variant === "minimal" ? 80 : 72;
+  const contentPosition = slide.contentPosition || "center";
+
+  return (
+    <BaseSlide contentPosition={contentPosition}>
+      {shouldShowIcon && slide.icon && (
+        <View style={styles.iconBox}>
+          {isEmoji ? (
+            <AtomicText style={{ fontSize: iconSize }}>{slide.icon}</AtomicText>
+          ) : (
+            <AtomicIcon
+              name={slide.icon as any}
+              customSize={iconSize}
+              customColor={colors.iconColor}
+            />
+          )}
+        </View>
+      )}
+
+      <AtomicText
+        type="displaySmall"
+        style={[styles.title, { color: colors.textColor }]}
+      >
+        {slide.title}
+      </AtomicText>
+
+      {slide.description && (
+        <AtomicText
+          type="bodyLarge"
+          style={[styles.description, { color: colors.subTextColor }]}
+        >
+          {slide.description}
+        </AtomicText>
+      )}
+
+      {slide.features && slide.features.length > 0 && (
+        <View style={styles.features}>
+          {slide.features.map((feature, index) => (
+            <View
+              key={index}
+              style={[
+                styles.featureItem,
+                { backgroundColor: colors.featureItemBg },
+              ]}
+            >
+              <AtomicIcon
+                name="checkmark-circle"
+                size="sm"
+                customColor={colors.iconColor}
+              />
+              <AtomicText
+                type="bodyMedium"
+                style={[styles.featureText, { color: colors.textColor }]}
+              >
+                {feature}
+              </AtomicText>
+            </View>
+          ))}
+        </View>
+      )}
+    </BaseSlide>
+  );
+};
+
+const styles = StyleSheet.create({
+  iconBox: {
+    marginBottom: 32,
+    height: 100,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  title: {
+    fontWeight: "800",
+    textAlign: "center",
+    marginBottom: 16,
+  },
+  description: {
+    textAlign: "center",
+    lineHeight: 24,
+    marginBottom: 32,
+  },
+  features: {
+    width: "100%",
+    gap: 12,
+  },
+  featureItem: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 16,
+    borderRadius: 16,
+    gap: 12,
+  },
+  featureText: {
+    fontWeight: "600",
+    flex: 1,
+  },
+});