@umituz/react-native-design-system 4.28.5 → 4.28.7

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/components/questions/MultipleChoiceQuestion.tsx

@@ -4,12 +4,13 @@
  */
 
 import React from "react";
-import { View, StyleSheet } from "react-native";
+import { View } from "react-native";
 import { AtomicText } from "../../../../atoms/AtomicText";
 import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import { ensureArray } from "../../../infrastructure/utils/arrayUtils";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
 import { QuestionOptionItem } from "./QuestionOptionItem";
+import { questionStyles } from "./questionStyles";
 
 export interface MultipleChoiceQuestionProps {
   question: OnboardingQuestion;
@@ -40,7 +41,7 @@ export const MultipleChoiceQuestion = ({
   };
 
   return (
-    <View style={styles.container}>
+    <View style={[questionStyles.container, { gap: 12 }]}>
       {question.options?.map((option) => (
         <QuestionOptionItem
           key={option.id}
@@ -53,7 +54,7 @@ export const MultipleChoiceQuestion = ({
       {question.validation?.maxSelections && (
         <AtomicText
           type="labelSmall"
-          style={[styles.hint, { color: colors.subTextColor }]}
+          style={[questionStyles.hint, { color: colors.subTextColor }]}
         >
           Select up to {question.validation.maxSelections} options
         </AtomicText>
@@ -61,14 +62,3 @@ export const MultipleChoiceQuestion = ({
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    gap: 12,
-  },
-  hint: {
-    textAlign: "center",
-    marginTop: 8,
-  },
-});

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

@@ -4,10 +4,11 @@
  */
 
 import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { View, TouchableOpacity } from "react-native";
 import { AtomicIcon, AtomicText } from "../../../../atoms";
 import type { QuestionOption } from "../../../domain/entities/OnboardingQuestion";
 import type { OnboardingColors } from "../../types/OnboardingTheme";
+import { questionStyles, OPTION_ICON_SIZE, OPTION_EMOJI_SIZE } from "./questionStyles";
 
 export interface QuestionOptionItemProps {
   option: QuestionOption;
@@ -27,7 +28,7 @@ export const QuestionOptionItem = React.memo(({
   return (
     <TouchableOpacity
       style={[
-        styles.option,
+        questionStyles.option,
         {
           backgroundColor: isSelected ? colors.iconBg : colors.featureItemBg,
           borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
@@ -42,15 +43,15 @@ export const QuestionOptionItem = React.memo(({
     >
       {option.icon && (
         <View style={[
-          styles.optionIcon,
+          questionStyles.optionIcon,
           { backgroundColor: isSelected ? colors.iconColor : colors.featureItemBg }
         ]}>
           {isEmoji ? (
-            <AtomicText style={{ fontSize: 24 }}>{option.icon}</AtomicText>
+            <AtomicText style={{ fontSize: OPTION_EMOJI_SIZE }}>{option.icon}</AtomicText>
           ) : (
             <AtomicIcon
               name={option.icon}
-              customSize={20}
+              customSize={OPTION_ICON_SIZE}
               customColor={isSelected ? colors.buttonTextColor : colors.subTextColor}
             />
           )}
@@ -59,7 +60,7 @@ export const QuestionOptionItem = React.memo(({
       <AtomicText
         type="bodyLarge"
         style={[
-          styles.optionLabel,
+          questionStyles.optionLabel,
           {
             color: isSelected ? colors.textColor : colors.subTextColor,
             fontWeight: isSelected ? '700' : '500'
@@ -69,7 +70,7 @@ export const QuestionOptionItem = React.memo(({
         {option.label}
       </AtomicText>
       <View style={[
-        styles.checkbox,
+        questionStyles.checkbox,
         {
           borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
           backgroundColor: isSelected ? colors.iconColor : 'transparent',
@@ -87,32 +88,3 @@ export const QuestionOptionItem = React.memo(({
     </TouchableOpacity>
   );
 });
-
-const styles = StyleSheet.create({
-  option: {
-    flexDirection: "row",
-    alignItems: "center",
-    borderRadius: 20,
-    padding: 16,
-    marginBottom: 8,
-  },
-  optionIcon: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 16,
-  },
-  optionLabel: {
-    flex: 1,
-    fontSize: 16,
-  },
-  checkbox: {
-    width: 24,
-    height: 24,
-    borderRadius: 8,
-    alignItems: "center",
-    justifyContent: "center",
-  },
-});

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

@@ -3,6 +3,7 @@ import { View, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicIcon, AtomicText } from "../../../../atoms";
 import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import type { OnboardingQuestion } from "../../../domain/entities/OnboardingQuestion";
+import { createMappedArray } from "../../../../utils/arrayUtils";
 
 export interface RatingQuestionProps {
   question: OnboardingQuestion;
@@ -23,7 +24,7 @@ export const RatingQuestion = ({
   return (
     <View style={styles.container}>
       <View style={styles.stars}>
-        {Array.from({ length: max }).map((_, i) => {
+        {createMappedArray(max, (i) => {
           const isFilled = i < value;
           return (
             <TouchableOpacity

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

@@ -1,8 +1,9 @@
 import React from "react";
-import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { View, TouchableOpacity } from "react-native";
 import { AtomicIcon, AtomicText } from "../../../../atoms";
 import { useOnboardingProvider } from "../../providers/OnboardingProvider";
 import type { OnboardingQuestion, QuestionOption } from "../../../domain/entities/OnboardingQuestion";
+import { questionStyles, OPTION_ICON_SIZE, OPTION_EMOJI_SIZE } from "./questionStyles";
 
 export interface SingleChoiceQuestionProps {
   question: OnboardingQuestion;
@@ -27,7 +28,7 @@ export const SingleChoiceQuestion = ({
       <TouchableOpacity
         key={option.id}
         style={[
-          styles.option,
+          questionStyles.option,
           {
             backgroundColor: isSelected ? colors.iconBg : colors.featureItemBg,
             borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder,
@@ -39,29 +40,29 @@ export const SingleChoiceQuestion = ({
       >
         {option.icon && (
           <View style={[
-            styles.optionIcon,
+            questionStyles.optionIcon,
             { backgroundColor: isSelected ? colors.iconColor : colors.featureItemBg }
           ]}>
             {isEmoji ? (
-              <AtomicText style={{ fontSize: 24 }}>{option.icon}</AtomicText>
+              <AtomicText style={{ fontSize: OPTION_EMOJI_SIZE }}>{option.icon}</AtomicText>
             ) : (
               <AtomicIcon
                 name={option.icon}
-                customSize={20}
+                customSize={OPTION_ICON_SIZE}
                 customColor={isSelected ? colors.buttonTextColor : colors.subTextColor}
               />
             )}
           </View>
         )}
-        <AtomicText type="bodyLarge" style={[styles.optionLabel, { color: isSelected ? colors.textColor : colors.subTextColor, fontWeight: isSelected ? '700' : '500' }]}>
+        <AtomicText type="bodyLarge" style={[questionStyles.optionLabel, { color: isSelected ? colors.textColor : colors.subTextColor, fontWeight: isSelected ? '700' : '500' }]}>
           {option.label}
         </AtomicText>
         <View style={[
-          styles.radioOuter,
+          questionStyles.radioOuter,
           { borderColor: isSelected ? colors.iconColor : colors.headerButtonBorder }
         ]}>
           {isSelected && (
-            <View style={[styles.radioInner, { backgroundColor: colors.iconColor }]} />
+            <View style={[questionStyles.radioInner, { backgroundColor: colors.iconColor }]} />
           )}
         </View>
       </TouchableOpacity>
@@ -69,49 +70,8 @@ export const SingleChoiceQuestion = ({
   };
 
   return (
-    <View style={styles.container}>
+    <View style={[questionStyles.container, { gap: 12 }]}>
       {question.options?.map(renderOption)}
     </View>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    width: "100%",
-    gap: 12,
-  },
-  option: {
-    flexDirection: "row",
-    alignItems: "center",
-    borderRadius: 20,
-    padding: 16,
-    marginBottom: 8,
-  },
-  optionIcon: {
-    width: 40,
-    height: 40,
-    borderRadius: 20,
-    alignItems: 'center',
-    justifyContent: 'center',
-    marginRight: 16,
-  },
-  optionLabel: {
-    flex: 1,
-    fontSize: 16,
-  },
-  radioOuter: {
-    width: 24,
-    height: 24,
-    borderRadius: 12,
-    borderWidth: 2,
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  radioInner: {
-    width: 12,
-    height: 12,
-    borderRadius: 6,
-  },
-});
-
-