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

package/src/onboarding/presentation/screens/ChatOnboardingScreen.tsx

@@ -0,0 +1,276 @@
+/**
+ * Chat Onboarding Screen
+ *
+ * Chat-based onboarding experience for user engagement
+ * Fully configurable flow, optional mascot, lazy-loaded animations
+ *
+ * Responsive Design:
+ * - Uses useSafeAreaInsets() from react-native-safe-area-context for proper device compatibility
+ * - Flexible flex-based layouts that adapt to all screen sizes
+ * - KeyboardAvoidingView for proper keyboard handling on iOS/Android
+ * - Percentage-based maxWidth in chat messages for responsive text layout
+ * - Proper insets integration with device and safe-area modules
+ *
+ * Compatible with:
+ * - @umituz/react-native-design-system/device (useDeviceInfo)
+ * - @umituz/react-native-design-system/safe-area (useSafeAreaInsets)
+ * - All screen sizes (iPhone, iPad, Android phones/tablets)
+ */
+
+import React, { memo } from "react";
+import {
+  View,
+  StyleSheet,
+  ScrollView,
+  TextInput,
+  TouchableOpacity,
+  KeyboardAvoidingView,
+  Platform,
+  ViewStyle,
+  Text,
+} from "react-native";
+import { useResponsive } from "../../../responsive/useResponsive";
+
+import type { ChatStep } from "../../domain/entities/ChatStep";
+import { useChatOnboarding } from "../hooks/useChatOnboarding";
+import { ChatMessageComponent, ChatOptionButton, TypingIndicator } from "../components/chat";
+
+export interface ChatOnboardingScreenProps {
+  /** Chat onboarding flow configuration */
+  flow: Record<string, ChatStep>;
+
+  /** Initial step ID */
+  initialStepId?: string;
+
+  /** Completion callback */
+  onComplete?: () => void;
+
+  /** Skip callback */
+  onSkip?: () => void;
+
+  /** Show mascot (default: false) */
+  showMascot?: boolean;
+
+  /** Mascot component to render */
+  renderMascot?: (state: string) => React.ReactNode;
+
+  /** Theme colors */
+  theme?: {
+    /** Background color */
+    background?: string;
+
+    /** Message background color */
+    messageBackground?: string;
+
+    /** Message text color */
+    messageText?: string;
+
+    /** User message background color */
+    userMessageBackground?: string;
+
+    /** User message text color */
+    userMessageText?: string;
+
+    /** Button background color */
+    buttonBackground?: string;
+
+    /** Button text color */
+    buttonText?: string;
+
+    /** Button border color */
+    buttonBorder?: string;
+  };
+
+  /** Custom styles */
+  style?: ViewStyle;
+
+  /** Delay between messages */
+  messageDelay?: number;
+
+  /** Render custom icon */
+  renderIcon?: (iconName: string) => React.ReactNode;
+
+  /** Storage key for progress persistence */
+  storageKey?: string;
+}
+
+/**
+ * Chat onboarding screen component
+ */
+export const ChatOnboardingScreen = memo(
+  ({
+    flow,
+    initialStepId,
+    onComplete,
+    onSkip,
+    showMascot = false,
+    renderMascot,
+    theme = {},
+    style,
+    messageDelay = 500,
+    renderIcon,
+  }: ChatOnboardingScreenProps) => {
+    const responsive = useResponsive();
+
+    const {
+      currentStep,
+      messages,
+      showOptions,
+      isProcessing,
+      showTypingIndicator,
+      handleOptionSelect,
+      handleSubmitName,
+    } = useChatOnboarding({
+      flow,
+      initialStepId,
+      onComplete,
+      onSkip,
+      messageDelay,
+    });
+
+    const [nameInput, setNameInput] = React.useState("");
+
+    const handleNameSubmit = () => {
+      handleSubmitName(nameInput);
+      setNameInput("");
+    };
+
+    const containerStyle = [
+      styles.container,
+      {
+        backgroundColor: theme.background || "#FFFFFF",
+        paddingBottom: responsive.insets.bottom + 20,
+        paddingTop: responsive.insets.top + 20,
+      },
+      style,
+    ];
+
+    return (
+      <KeyboardAvoidingView
+        style={containerStyle}
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        keyboardVerticalOffset={Platform.OS === "ios" ? 0 : 20}
+      >
+        {/* Mascot Section */}
+        {showMascot && renderMascot && currentStep?.mascotState && (
+          <View style={styles.mascotContainer}>{renderMascot(currentStep.mascotState)}</View>
+        )}
+
+        {/* Messages Section */}
+        <ScrollView
+          style={styles.messagesContainer}
+          contentContainerStyle={styles.messagesContent}
+          showsVerticalScrollIndicator={false}
+        >
+          {messages.map((msg, index) => (
+            <ChatMessageComponent
+              key={`${currentStep?.id}-${index}`}
+              message={msg}
+              backgroundColor={theme.messageBackground}
+              textColor={theme.messageText}
+              userBackgroundColor={theme.userMessageBackground}
+              userTextColor={theme.userMessageText}
+            />
+          ))}
+
+          {showTypingIndicator && (
+            <TypingIndicator
+              backgroundColor={theme.messageBackground}
+              dotColor={theme.messageText}
+            />
+          )}
+
+          {/* Options Section */}
+          {showOptions && currentStep?.options && (
+            <View style={styles.optionsContainer}>
+              {currentStep.options.map((option, index) => (
+                <ChatOptionButton
+                  key={`${option.value}-${index}`}
+                  option={option}
+                  onPress={handleOptionSelect}
+                  backgroundColor={theme.buttonBackground}
+                  textColor={theme.buttonText}
+                  borderColor={theme.buttonBorder}
+                  disabled={isProcessing}
+                  renderIcon={renderIcon}
+                />
+              ))}
+            </View>
+          )}
+
+          {/* Name Input Section */}
+          {currentStep?.isNameInput && (
+            <View style={styles.inputContainer}>
+              <TextInput
+                style={[styles.nameInput, { borderColor: theme.buttonBorder }]}
+                placeholder="Enter your name..."
+                placeholderTextColor={theme.messageText}
+                value={nameInput}
+                onChangeText={setNameInput}
+                onSubmitEditing={handleNameSubmit}
+                returnKeyType="done"
+                autoCapitalize="words"
+              />
+              <TouchableOpacity
+                style={[styles.submitButton, { backgroundColor: theme.buttonBackground }]}
+                onPress={handleNameSubmit}
+                disabled={isProcessing || !nameInput.trim()}
+              >
+                <Text style={[styles.submitButtonText, { color: theme.buttonText }]}>Send</Text>
+              </TouchableOpacity>
+            </View>
+          )}
+        </ScrollView>
+      </KeyboardAvoidingView>
+    );
+  }
+);
+
+ChatOnboardingScreen.displayName = "ChatOnboardingScreen";
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  mascotContainer: {
+    alignItems: "center",
+    paddingVertical: 20,
+  },
+  messagesContainer: {
+    flex: 1,
+    paddingHorizontal: 16,
+  },
+  messagesContent: {
+    paddingTop: 10,
+  },
+  optionsContainer: {
+    marginTop: 16,
+    marginBottom: 16,
+  },
+  inputContainer: {
+    flexDirection: "row",
+    alignItems: "center",
+    marginTop: 12,
+    marginBottom: 16,
+  },
+  nameInput: {
+    flex: 1,
+    height: 48,
+    borderWidth: 1,
+    borderRadius: 12,
+    paddingHorizontal: 16,
+    fontSize: 16,
+    marginRight: 8,
+  },
+  submitButton: {
+    height: 48,
+    paddingHorizontal: 20,
+    borderRadius: 12,
+    justifyContent: "center",
+    alignItems: "center",
+  },
+  submitButtonText: {
+    fontSize: 16,
+    fontWeight: "600",
+  },
+});

package/src/utils/index.ts

@@ -0,0 +1,13 @@
+/**
+ * Utils Module
+ *
+ * Centralized utility functions for the design system.
+ */
+
+export {
+  calculateResponsiveSize,
+  calculateResponsiveSizes,
+  calculateResponsiveSizeSubtle,
+  calculateLineHeight,
+  createResponsiveSizes,
+} from './responsiveUtils';

package/src/utils/responsiveUtils.ts

@@ -0,0 +1,110 @@
+/**
+ * Responsive Utility Functions
+ *
+ * Centralized responsive calculations to avoid code duplication.
+ * All components should use these utilities instead of manual calculations.
+ */
+
+/**
+ * Calculate responsive size from base value
+ * Multiplies base size by spacingMultiplier and floors the result
+ *
+ * @param baseSize - Base size in pixels (e.g., 16, 24, 32)
+ * @param spacingMultiplier - Multiplier from design tokens (0.9, 1.0, 1.2)
+ * @returns Responsive size in pixels (floored for integer values)
+ *
+ * @example
+ * const responsive = useResponsive();
+ * const padding = calculateResponsiveSize(16, responsive.spacingMultiplier); // 14.4 → 14
+ */
+export const calculateResponsiveSize = (
+  baseSize: number,
+  spacingMultiplier: number
+): number => {
+  return Math.floor(baseSize * spacingMultiplier);
+};
+
+/**
+ * Calculate multiple responsive sizes at once
+ * Useful for component configs with multiple size properties
+ *
+ * @param sizes - Object with base sizes
+ * @param spacingMultiplier - Multiplier from design tokens
+ * @returns Object with responsive sizes
+ *
+ * @example
+ * const baseConfig = { padding: 16, margin: 24, fontSize: 14 };
+ * const responsiveConfig = calculateResponsiveSizes(baseConfig, spacingMultiplier);
+ * // { padding: 14, margin: 21, fontSize: 12 }
+ */
+export const calculateResponsiveSizes = <T extends Record<string, number>>(
+  sizes: T,
+  spacingMultiplier: number
+): { [K in keyof T]: number } => {
+  const result = {} as { [K in keyof T]: number };
+
+  for (const key in sizes) {
+    if (Object.prototype.hasOwnProperty.call(sizes, key)) {
+      result[key] = calculateResponsiveSize(sizes[key], spacingMultiplier);
+    }
+  }
+
+  return result;
+};
+
+/**
+ * Calculate responsive size with subtle scaling
+ * For values that shouldn't scale as much (e.g., borderWidth, borderRadius)
+ * Uses 0.8x of the spacing multiplier
+ *
+ * @param baseSize - Base size in pixels
+ * @param spacingMultiplier - Multiplier from design tokens
+ * @returns Responsive size with subtle scaling
+ *
+ * @example
+ * const borderWidth = calculateResponsiveSizeSubtle(2, spacingMultiplier); // 2 → 2 (small tablets)
+ */
+export const calculateResponsiveSizeSubtle = (
+  baseSize: number,
+  spacingMultiplier: number
+): number => {
+  const subtleMultiplier = Math.max(1, spacingMultiplier * 0.8);
+  return Math.floor(baseSize * subtleMultiplier);
+};
+
+/**
+ * Calculate responsive line height from font size
+ * Standard 1.5x ratio for readability
+ *
+ * @param fontSize - Font size in pixels
+ * @param spacingMultiplier - Multiplier from design tokens
+ * @returns Line height in pixels
+ *
+ * @example
+ * const lineHeight = calculateLineHeight(16, spacingMultiplier); // 24 → 20
+ */
+export const calculateLineHeight = (
+  fontSize: number,
+  spacingMultiplier: number
+): number => {
+  return Math.floor(fontSize * spacingMultiplier * 1.5);
+};
+
+/**
+ * Create responsive StyleSheet values
+ * Converts an object with base sizes to responsive sizes
+ *
+ * @param baseStyles - Object with base style values
+ * @param spacingMultiplier - Multiplier from design tokens
+ * @returns Responsive style values
+ *
+ * @example
+ * const baseSizes = { width: 100, height: 50, padding: 16 };
+ * const responsiveSizes = createResponsiveSizes(baseSizes, spacingMultiplier);
+ */
+export const createResponsiveSizes = <T extends Record<string, number>>(
+  baseSizes: T,
+  spacingMultiplier: number
+): T => {
+  return calculateResponsiveSizes(baseSizes, spacingMultiplier) as T;
+};