@umituz/react-native-design-system 4.28.4 → 4.28.6

package/src/onboarding/presentation/components/chat/ChatMessage.tsx

@@ -0,0 +1,166 @@
+/**
+ * Chat Message Component
+ *
+ * Displays a single message in the chat interface
+ * Lazy loads animations for optimal bundle size
+ * Fully responsive - uses safe area insets and responsive sizing
+ */
+
+import React, { memo, useEffect, useMemo } from "react";
+import { View, Text, StyleSheet, ViewStyle, Dimensions } from "react-native";
+import { useResponsive } from "../../../../responsive/useResponsive";
+
+import type { ChatMessage as ChatMessageEntity } from "../../../domain/entities/ChatMessage";
+
+export interface ChatMessageProps {
+  /** Message data */
+  message: ChatMessageEntity;
+
+  /** Message background color */
+  backgroundColor?: string;
+
+  /** Message text color */
+  textColor?: string;
+
+  /** Important message highlight color */
+  importantColor?: string;
+
+  /** User message background color */
+  userBackgroundColor?: string;
+
+  /** User message text color */
+  userTextColor?: string;
+
+  /** Additional styles */
+  style?: ViewStyle;
+
+  /** Enable animations (default: true) */
+  animate?: boolean;
+}
+
+/**
+ * Chat message bubble component
+ * Responsive design: Uses safe area insets and scales padding/font sizes
+ */
+export const ChatMessage = memo(
+  ({
+    message,
+    backgroundColor = "#FFFFFF",
+    textColor = "#000000",
+    importantColor = "#FF6B6B",
+    userBackgroundColor = "#3B82F6",
+    userTextColor = "#FFFFFF",
+    style,
+    animate = true,
+  }: ChatMessageProps) => {
+    const responsive = useResponsive();
+    const [opacity, setOpacity] = React.useState(0);
+
+    useEffect(() => {
+      if (!animate) {
+        setOpacity(1);
+        return;
+      }
+
+      // Simple fade-in without Reanimated
+      const timer = setTimeout(() => {
+        setOpacity(1);
+      }, 50);
+
+      return () => clearTimeout(timer);
+    }, [animate]);
+
+    // Responsive padding based on screen size (uses central spacingMultiplier)
+    const padding = useMemo(() => Math.floor(12 * responsive.spacingMultiplier), [responsive.spacingMultiplier]);
+    const fontSize = useMemo(() => Math.floor(16 * responsive.spacingMultiplier), [responsive.spacingMultiplier]);
+    const lineHeight = useMemo(() => Math.floor(22 * responsive.spacingMultiplier), [responsive.spacingMultiplier]);
+    const borderRadius = useMemo(() => Math.floor(16 * responsive.spacingMultiplier), [responsive.spacingMultiplier]);
+    const marginBottom = useMemo(() => Math.floor(8 * responsive.spacingMultiplier), [responsive.spacingMultiplier]);
+    const borderWidth = useMemo(() => Math.max(2, Math.floor(2 * responsive.spacingMultiplier)), [responsive.spacingMultiplier]);
+    const maxTextWidth = useMemo(() => {
+      // On tablets, allow wider messages (up to 90% vs 80% on mobile)
+      const screenWidth = Dimensions.get('window').width;
+      const baseMaxWidth = responsive.insets.left + responsive.insets.right > 20 ? 0.9 : 0.8;
+      return Math.floor(screenWidth * baseMaxWidth);
+    }, [responsive.insets.left, responsive.insets.right]);
+
+    const containerStyle = useMemo(
+      () => [
+        styles.container,
+        {
+          maxWidth: maxTextWidth,
+          padding,
+          borderRadius,
+          marginBottom,
+        },
+        message.isUser ? styles.userContainer : styles.botContainer,
+        {
+          backgroundColor: message.isUser ? userBackgroundColor : backgroundColor,
+          opacity,
+        },
+        message.isImportant && !message.isUser ? {
+          borderWidth,
+          borderColor: "#FF6B6B",
+        } : null,
+        style,
+      ],
+      [
+        padding,
+        borderRadius,
+        marginBottom,
+        borderWidth,
+        maxTextWidth,
+        backgroundColor,
+        userBackgroundColor,
+        message.isUser,
+        message.isImportant,
+        opacity,
+        style,
+      ]
+    );
+
+    const textStyle = useMemo(
+      () => [
+        styles.text,
+        {
+          fontSize,
+          lineHeight,
+          color: message.isUser ? userTextColor : textColor,
+        },
+        message.isImportant && !message.isUser
+          ? { color: importantColor, fontWeight: "600" as const }
+          : null,
+      ],
+      [fontSize, lineHeight, textColor, userTextColor, message.isUser, message.isImportant, importantColor]
+    );
+
+    return (
+      <View style={containerStyle}>
+        <Text style={textStyle}>{message.text}</Text>
+      </View>
+    );
+  }
+);
+
+ChatMessage.displayName = "ChatMessage";
+
+const styles = StyleSheet.create({
+  container: {
+    // maxWidth is set dynamically based on screen size
+    padding: 12, // default, will be overridden by responsive value
+    borderRadius: 16, // default, will be overridden
+    marginBottom: 8, // default, will be overridden
+  },
+  userContainer: {
+    alignSelf: "flex-end",
+    borderBottomRightRadius: 4,
+  },
+  botContainer: {
+    alignSelf: "flex-start",
+    borderBottomLeftRadius: 4,
+  },
+  text: {
+    fontSize: 16, // default, will be overridden
+    lineHeight: 22, // default, will be overridden
+  },
+});

package/src/onboarding/presentation/components/chat/ChatOptionButton.tsx

@@ -0,0 +1,145 @@
+/**
+ * Chat Option Button Component
+ *
+ * Displays a selectable option in the chat interface
+ * Lazy loads animations for optimal bundle size
+ * Fully responsive - scales padding, font sizes, and icon sizes
+ */
+
+import React, { memo, useMemo } from "react";
+import { TouchableOpacity, Text, StyleSheet, ViewStyle, View } from "react-native";
+import { useResponsive } from "../../../../responsive/useResponsive";
+import type { ChatOption } from "../../../domain/entities/ChatStep";
+
+export interface ChatOptionButtonProps {
+  /** Option data */
+  option: ChatOption;
+
+  /** Button press handler */
+  onPress: (option: ChatOption) => void;
+
+  /** Button background color */
+  backgroundColor?: string;
+
+  /** Button text color */
+  textColor?: string;
+
+  /** Button border color */
+  borderColor?: string;
+
+  /** Whether button is disabled */
+  disabled?: boolean;
+
+  /** Additional styles */
+  style?: ViewStyle;
+
+  /** Enable animations (default: true) */
+  animate?: boolean;
+
+  /** Custom icon component */
+  renderIcon?: (iconName: string) => React.ReactNode;
+}
+
+/**
+ * Chat option button component
+ * Responsive design: Scales padding, font size, and min-width based on screen size
+ */
+export const ChatOptionButton = memo(
+  ({
+    option,
+    onPress,
+    backgroundColor = "#F3F4F6",
+    textColor = "#1F2937",
+    borderColor = "#E5E7EB",
+    disabled = false,
+    style,
+    renderIcon,
+  }: ChatOptionButtonProps) => {
+    const responsive = useResponsive();
+
+    const handlePress = () => {
+      if (!disabled) {
+        onPress(option);
+      }
+    };
+
+    // Responsive sizing based on screen width and safe area
+    const padding = useMemo(() => Math.floor(14 * responsive.spacingMultiplier), [responsive.spacingMultiplier]);
+    const borderRadius = useMemo(() => Math.floor(12 * responsive.spacingMultiplier), [responsive.spacingMultiplier]);
+    const fontSize = useMemo(() => Math.floor(16 * responsive.spacingMultiplier), [responsive.spacingMultiplier]);
+    const marginBottom = useMemo(() => Math.floor(8 * responsive.spacingMultiplier), [responsive.spacingMultiplier]);
+    const iconMargin = useMemo(() => Math.floor(12 * responsive.spacingMultiplier), [responsive.spacingMultiplier]);
+
+    // Responsive min-width: tablets allow wider buttons
+    const minButtonWidth = useMemo(() => {
+      const screenWidth = responsive.insets.left + responsive.insets.right + 375; // Approximate base width
+      const baseMinWidth = 200;
+      const scaledMinWidth = Math.floor(baseMinWidth * (screenWidth / 375) * responsive.spacingMultiplier);
+      return Math.min(scaledMinWidth, baseMinWidth * 1.5); // Cap at 1.5x for very large screens
+    }, [responsive.insets.left, responsive.insets.right, responsive.spacingMultiplier]);
+
+    const buttonStyle = useMemo(
+      () => [
+        styles.button,
+        {
+          padding,
+          borderRadius,
+          marginBottom,
+          minWidth: minButtonWidth,
+          backgroundColor,
+          borderColor,
+          opacity: disabled ? 0.5 : 1,
+        },
+        style,
+      ],
+      [padding, borderRadius, marginBottom, minButtonWidth, backgroundColor, borderColor, disabled, style]
+    );
+
+    const textStyle = useMemo(
+      () => [
+        styles.text,
+        {
+          fontSize,
+          color: textColor,
+        },
+      ],
+      [fontSize, textColor]
+    );
+
+    return (
+      <TouchableOpacity
+        style={buttonStyle}
+        onPress={handlePress}
+        disabled={disabled}
+        activeOpacity={0.7}
+      >
+        {option.icon && renderIcon && (
+          <View style={[styles.iconContainer, { marginRight: iconMargin }]}>{renderIcon(option.icon)}</View>
+        )}
+        <Text style={textStyle}>{option.label}</Text>
+      </TouchableOpacity>
+    );
+  }
+);
+
+ChatOptionButton.displayName = "ChatOptionButton";
+
+const styles = StyleSheet.create({
+  button: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 14, // default, will be overridden by responsive value
+    borderRadius: 12, // default, will be overridden
+    borderWidth: 1,
+    marginBottom: 8, // default, will be overridden
+    minWidth: 200, // default, will be overridden
+  },
+  iconContainer: {
+    marginRight: 12, // default, will be overridden
+  },
+  text: {
+    fontSize: 16, // default, will be overridden
+    fontWeight: "600",
+    flex: 1,
+  },
+});

package/src/onboarding/presentation/components/chat/TypingIndicator.tsx

@@ -0,0 +1,99 @@
+/**
+ * Typing Indicator Component
+ *
+ * Shows animated typing dots for bot messages
+ * Uses CSS animations for minimal bundle impact
+ * Fully responsive - scales dot size and spacing on larger screens
+ */
+
+import React, { memo, useEffect, useState, useMemo } from "react";
+import { View, StyleSheet, ViewStyle } from "react-native";
+import { useResponsive } from "../../../../responsive/useResponsive";
+
+export interface TypingIndicatorProps {
+  /** Dot color */
+  dotColor?: string;
+
+  /** Container background color */
+  backgroundColor?: string;
+
+  /** Additional styles */
+  style?: ViewStyle;
+
+  /** Animation duration in ms */
+  duration?: number;
+}
+
+/**
+ * Typing indicator dots component
+ * Responsive design: Scales dot size and spacing based on screen size
+ */
+export const TypingIndicator = memo(
+  ({
+    dotColor = "#9CA3AF",
+    backgroundColor = "#F3F4F6",
+    style,
+    duration = 800,
+  }: TypingIndicatorProps) => {
+    const responsive = useResponsive();
+    const [phase, setPhase] = useState(0);
+
+    useEffect(() => {
+      const interval = setInterval(() => {
+        setPhase((prev) => (prev + 1) % 4);
+      }, duration / 4);
+
+      return () => clearInterval(interval);
+    }, [duration]);
+
+    // Responsive sizing - dots scale slightly on tablets
+    const dotSize = useMemo(() => Math.floor(8 * Math.max(1, responsive.spacingMultiplier * 0.8)), [responsive.spacingMultiplier]);
+    const dotRadius = useMemo(() => Math.floor(dotSize / 2), [dotSize]);
+    const dotSpacing = useMemo(() => Math.floor(3 * responsive.spacingMultiplier), [responsive.spacingMultiplier]);
+
+    const padding = useMemo(() => Math.floor(12 * responsive.spacingMultiplier), [responsive.spacingMultiplier]);
+    const borderRadius = useMemo(() => Math.floor(16 * responsive.spacingMultiplier), [responsive.spacingMultiplier]);
+    const marginBottom = useMemo(() => Math.floor(8 * responsive.spacingMultiplier), [responsive.spacingMultiplier]);
+    const minIndicatorWidth = useMemo(() => Math.floor(60 * responsive.spacingMultiplier), [responsive.spacingMultiplier]);
+
+    const dotStyle = (index: number) => [
+      styles.dot,
+      {
+        width: dotSize,
+        height: dotSize,
+        borderRadius: dotRadius,
+        marginHorizontal: dotSpacing,
+        backgroundColor: dotColor,
+        opacity: phase === index ? 1 : 0.3,
+      },
+    ];
+
+    return (
+      <View style={[styles.container, { backgroundColor, padding, borderRadius, marginBottom, minWidth: minIndicatorWidth }, style]}>
+        <View style={dotStyle(0)} />
+        <View style={dotStyle(1)} />
+        <View style={dotStyle(2)} />
+      </View>
+    );
+  }
+);
+
+TypingIndicator.displayName = "TypingIndicator";
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    padding: 12, // default, will be overridden
+    borderRadius: 16, // default, will be overridden
+    alignSelf: "flex-start",
+    marginBottom: 8, // default, will be overridden
+    minWidth: 60, // default, will be overridden
+  },
+  dot: {
+    width: 8, // default, will be overridden
+    height: 8, // default, will be overridden
+    borderRadius: 4, // default, will be overridden
+    marginHorizontal: 3, // default, will be overridden
+  },
+});

package/src/onboarding/presentation/components/chat/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Chat Components Exports
+ */
+
+export { ChatMessage as ChatMessageComponent } from "./ChatMessage";
+export type { ChatMessageProps } from "./ChatMessage";
+
+export { ChatOptionButton } from "./ChatOptionButton";
+export type { ChatOptionButtonProps } from "./ChatOptionButton";
+
+export { TypingIndicator } from "./TypingIndicator";
+export type { TypingIndicatorProps } from "./TypingIndicator";

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

@@ -0,0 +1,278 @@
+/**
+ * Chat Onboarding Hook
+ *
+ * Core state management for chat-based onboarding flows
+ * Generic and reusable across all apps
+ */
+
+import { useState, useCallback, useRef, useEffect, useMemo } from "react";
+
+import type { ChatStep, ChatOption } from "../../domain/entities/ChatStep";
+import type { ChatMessage } from "../../domain/entities/ChatMessage";
+
+export interface UseChatOnboardingOptions {
+  /** Chat onboarding flow configuration */
+  flow: Record<string, ChatStep>;
+
+  /** Initial step ID (default: first step in flow) */
+  initialStepId?: string;
+
+  /** Callback when onboarding completes */
+  onComplete?: () => void;
+
+  /** Callback when user skips onboarding */
+  onSkip?: () => void;
+
+  /** Delay between messages (ms) */
+  messageDelay?: number;
+
+  /** Store progress persistently */
+  storageKey?: string;
+}
+
+export interface UseChatOnboardingReturn {
+  /** Current chat step */
+  currentStep: ChatStep | null;
+
+  /** Current step ID */
+  currentStepId: string;
+
+  /** Array of chat messages */
+  messages: ChatMessage[];
+
+  /** Whether to show options */
+  showOptions: boolean;
+
+  /** Whether processing user input */
+  isProcessing: boolean;
+
+  /** Whether to show typing indicator */
+  showTypingIndicator: boolean;
+
+  /** Handle option selection */
+  handleOptionSelect: (option: ChatOption) => void;
+
+  /** Reset onboarding flow */
+  handleReset: () => void;
+
+  /** Navigate to specific step */
+  setCurrentStepId: (stepId: string) => void;
+
+  /** Submit name input */
+  handleSubmitName: (name: string) => void;
+
+  /** Skip current step */
+  handleSkip: () => void;
+}
+
+/**
+ * Hook for managing chat onboarding state
+ */
+export const useChatOnboarding = ({
+  flow,
+  initialStepId,
+  onComplete,
+  onSkip,
+  messageDelay = 500,
+}: UseChatOnboardingOptions): UseChatOnboardingReturn => {
+  // Get initial step ID
+  const getInitialStepId = useCallback(() => {
+    if (initialStepId) return initialStepId;
+    const stepIds = Object.keys(flow);
+    return stepIds.length > 0 ? stepIds[0] : "";
+  }, [flow, initialStepId]);
+
+  // State
+  const [currentStepId, setCurrentStepId] = useState<string>(getInitialStepId);
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [showOptions, setShowOptions] = useState<boolean>(false);
+  const [isProcessing, setIsProcessing] = useState<boolean>(false);
+  const [showTypingIndicator, setShowTypingIndicator] = useState<boolean>(false);
+
+  // Refs
+  const messageTimersRef = useRef<NodeJS.Timeout[]>([]);
+  const autoAdvanceTimerRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Memoize current step
+  const currentStep = useMemo(() => {
+    return flow[currentStepId] || null;
+  }, [flow, currentStepId]);
+
+  // Clear all timers
+  const clearTimers = useCallback(() => {
+    messageTimersRef.current.forEach((timer) => {
+      clearTimeout(timer);
+    });
+    messageTimersRef.current = [];
+
+    if (autoAdvanceTimerRef.current) {
+      clearTimeout(autoAdvanceTimerRef.current);
+      autoAdvanceTimerRef.current = null;
+    }
+  }, []);
+
+  // Load messages for current step
+  useEffect(() => {
+    if (!currentStep) return;
+
+    clearTimers();
+    setMessages([]);
+    setShowOptions(false);
+    setShowTypingIndicator(true);
+
+    const timers: NodeJS.Timeout[] = [];
+
+    // Show typing indicator first
+    const hideTypingDelay = currentStep.messages.length > 0 ? 300 : 0;
+    timers.push(
+      setTimeout(() => {
+        setShowTypingIndicator(false);
+      }, hideTypingDelay)
+    );
+
+    // Add messages with staggered delays
+    let accumulatedDelay = hideTypingDelay;
+    currentStep.messages.forEach((msg, index) => {
+      const delay = accumulatedDelay + (index > 0 ? messageDelay : 0);
+      timers.push(
+        setTimeout(() => {
+          setMessages((prev) => [
+            ...prev,
+            {
+              text: msg,
+              isUser: false,
+            },
+          ]);
+        }, delay)
+      );
+      accumulatedDelay = delay + msg.length * 10; // Dynamic delay based on message length
+    });
+
+    // Auto-advance if configured
+    if (currentStep.autoNext) {
+      const autoAdvanceDelay = accumulatedDelay + (currentStep.delay || 2000);
+      const timer = setTimeout(() => {
+        setCurrentStepId(currentStep.autoNext!);
+      }, autoAdvanceDelay);
+      autoAdvanceTimerRef.current = timer;
+    } else {
+      // Show options after messages
+      const optionsDelay = accumulatedDelay + 500;
+      timers.push(
+        setTimeout(() => {
+          if (currentStep.options && currentStep.options.length > 0) {
+            setShowOptions(true);
+          }
+        }, optionsDelay)
+      );
+    }
+
+    messageTimersRef.current = timers;
+
+    return () => {
+      clearTimers();
+    };
+  }, [currentStep, messageDelay, clearTimers]);
+
+  // Handle option selection
+  const handleOptionSelect = useCallback(
+    (option: ChatOption) => {
+      if (isProcessing) return;
+
+      setIsProcessing(true);
+      setShowOptions(false);
+
+      // Add user message
+      setMessages((prev) => [
+        ...prev,
+        {
+          text: option.label,
+          isUser: true,
+        },
+      ]);
+
+      // Navigate to next step
+      setTimeout(() => {
+        setCurrentStepId(option.next);
+        setIsProcessing(false);
+      }, 600);
+    },
+    [isProcessing]
+  );
+
+  // Handle name submission
+  const handleSubmitName = useCallback(
+    (name: string) => {
+      if (!currentStep || isProcessing) return;
+
+      setIsProcessing(true);
+
+      // Skip if empty and allowed
+      if (!name.trim() && currentStep.skipIfEmpty) {
+        setCurrentStepId(currentStep.next || "");
+        setIsProcessing(false);
+        return;
+      }
+
+      // Add user message
+      setMessages((prev) => [
+        ...prev,
+        {
+          text: name.trim(),
+          isUser: true,
+        },
+      ]);
+
+      // Navigate to next step
+      setTimeout(() => {
+        if (currentStep?.next) {
+          setCurrentStepId(currentStep.next);
+        }
+        setIsProcessing(false);
+      }, 600);
+    },
+    [currentStep, isProcessing]
+  );
+
+  // Handle skip
+  const handleSkip = useCallback(() => {
+    clearTimers();
+    onSkip?.();
+  }, [clearTimers, onSkip]);
+
+  // Handle reset
+  const handleReset = useCallback(() => {
+    clearTimers();
+    setCurrentStepId(getInitialStepId());
+    setMessages([]);
+    setShowOptions(false);
+    setIsProcessing(false);
+    setShowTypingIndicator(false);
+  }, [clearTimers, getInitialStepId]);
+
+  // Handle completion
+  useEffect(() => {
+    if (currentStep?.isComplete) {
+      const timer = setTimeout(() => {
+        onComplete?.();
+      }, currentStep.delay || 2000);
+
+      return () => clearTimeout(timer);
+    }
+    return undefined;
+  }, [currentStep, onComplete]);
+
+  return {
+    currentStep,
+    currentStepId,
+    messages,
+    showOptions,
+    isProcessing,
+    showTypingIndicator,
+    handleOptionSelect,
+    handleReset,
+    setCurrentStepId,
+    handleSubmitName,
+    handleSkip,
+  };
+};