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

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,
+  },
+});

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

@@ -0,0 +1,60 @@
+/**
+ * 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 { RatingQuestion } from "./questions/RatingQuestion";
+
+export interface QuestionRendererProps {
+  question: OnboardingQuestion;
+  value: any;
+  onChange: (value: any) => void;
+}
+
+export const QuestionRenderer = ({
+  question,
+  value,
+  onChange,
+}: QuestionRendererProps) => {
+  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 "rating":
+      return (
+        <RatingQuestion
+          question={question}
+          value={value}
+          onChange={onChange}
+        />
+      );
+    default:
+      return null;
+  }
+};

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

@@ -0,0 +1,67 @@
+/**
+ * QuestionSlide Component
+ * Single Responsibility: Render a question-type slide
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system";
+import type { OnboardingSlide } from "../../domain/entities/OnboardingSlide";
+import { QuestionSlideHeader } from "./QuestionSlideHeader";
+import { QuestionRenderer } from "./QuestionRenderer";
+import { BaseSlide } from "./BaseSlide";
+import { useOnboardingProvider } from "../providers/OnboardingProvider";
+import { useLocalization } from "@umituz/react-native-localization";
+
+export interface QuestionSlideProps {
+  slide: OnboardingSlide;
+  value: any;
+  onChange: (value: any) => void;
+  variant?: "default" | "card" | "minimal" | "fullscreen";
+}
+
+export const QuestionSlide = ({
+  slide,
+  value,
+  onChange,
+  variant: _variant = "default",
+}: QuestionSlideProps) => {
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
+  const { t } = useLocalization();
+  const { question } = slide;
+
+  if (!question) return null;
+
+  return (
+    <BaseSlide contentPosition={slide.contentPosition}>
+      <QuestionSlideHeader slide={slide} />
+
+      <View style={styles.questionContainer}>
+        <QuestionRenderer question={question} value={value} onChange={onChange} />
+      </View>
+
+      {question.validation?.required && !value && (
+        <AtomicText
+          type="labelSmall"
+          style={[styles.requiredHint, { color: colors.errorColor }]}
+        >
+          {t("onboarding.fieldRequired")}
+        </AtomicText>
+      )}
+    </BaseSlide>
+  );
+};
+
+const styles = StyleSheet.create({
+  questionContainer: {
+    marginTop: 24,
+    width: "100%",
+  },
+  requiredHint: {
+    marginTop: 12,
+    textAlign: "center",
+    fontWeight: "600",
+  },
+});

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

@@ -0,0 +1,75 @@
+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 { useOnboardingProvider } from "../providers/OnboardingProvider";
+
+export interface QuestionSlideHeaderProps {
+  slide: OnboardingSlide;
+}
+
+export const QuestionSlideHeader = ({ slide }: QuestionSlideHeaderProps) => {
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
+  const isEmoji = slide.iconType === 'emoji';
+
+  return (
+    <View style={styles.container}>
+      <View style={[
+        styles.iconContainer,
+        {
+          backgroundColor: colors.iconBg,
+          borderColor: colors.iconBorder,
+        }
+      ]}>
+        {isEmoji ? (
+          <AtomicText style={{ fontSize: 48 }}>{slide.icon}</AtomicText>
+        ) : (
+          <AtomicIcon name={slide.icon as any} customSize={48} customColor={colors.textColor} />
+        )}
+      </View>
+
+      <AtomicText type="headlineMedium" style={[styles.title, { color: colors.textColor }]}>
+        {slide.title}
+      </AtomicText>
+
+      {slide.description && (
+        <AtomicText type="bodyMedium" style={[styles.description, { color: colors.subTextColor }]}>
+          {slide.description}
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: "center",
+  },
+  iconContainer: {
+    width: 96,
+    height: 96,
+    borderRadius: 48,
+    alignItems: "center",
+    justifyContent: "center",
+    marginBottom: 24,
+    borderWidth: 2,
+  },
+  title: {
+    fontWeight: "800",
+    textAlign: "center",
+    marginBottom: 12,
+  },
+  description: {
+    textAlign: "center",
+    lineHeight: 22,
+    marginBottom: 24,
+  },
+});
+
+
+
+
+
+

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

@@ -0,0 +1,74 @@
+/**
+ * Multiple Choice Question Component
+ * Single Responsibility: Render multiple choice question with options
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system";
+import { useOnboardingProvider } from "../../providers/OnboardingProvider";
+import { ensureArray } from "../../../infrastructure/utils/arrayUtils";
+import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
+import { QuestionOptionItem } from "./QuestionOptionItem";
+
+export interface MultipleChoiceQuestionProps {
+  question: OnboardingQuestion;
+  value: string[] | undefined;
+  onChange: (value: string[]) => void;
+}
+
+export const MultipleChoiceQuestion = ({
+  question,
+  value,
+  onChange,
+}: MultipleChoiceQuestionProps) => {
+  const {
+    theme: { colors },
+  } = useOnboardingProvider();
+
+  const safeValue = ensureArray(value);
+
+  const handleToggle = (optionId: string) => {
+    const newValue = safeValue.includes(optionId)
+      ? safeValue.filter((id) => id !== optionId)
+      : [...safeValue, optionId];
+
+    if (question.validation?.maxSelections && newValue.length > question.validation.maxSelections) {
+      return;
+    }
+    onChange(newValue);
+  };
+
+  return (
+    <View style={styles.container}>
+      {question.options?.map((option) => (
+        <QuestionOptionItem
+          key={option.id}
+          option={option}
+          isSelected={safeValue.includes(option.id)}
+          onPress={() => handleToggle(option.id)}
+          colors={colors}
+        />
+      ))}
+      {question.validation?.maxSelections && (
+        <AtomicText
+          type="labelSmall"
+          style={[styles.hint, { color: colors.subTextColor }]}
+        >
+          Select up to {question.validation.maxSelections} options
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    width: "100%",
+    gap: 12,
+  },
+  hint: {
+    textAlign: "center",
+    marginTop: 8,
+  },
+});