noboarding 1.0.3-beta → 1.0.6-beta

package/src/animationUtils.ts

@@ -0,0 +1,292 @@
+import { Animated, Easing } from 'react-native';
+import type {
+  EntranceAnimation,
+  InteractiveAnimation,
+  TextAnimation,
+  HapticType
+} from './types';
+
+// Lazy load haptics to avoid errors if not installed
+let Haptics: any = null;
+try {
+  Haptics = require('expo-haptics');
+} catch (e) {
+  console.warn('expo-haptics not installed, haptic feedback will be disabled');
+}
+
+// ─── Haptic Feedback Helper ───
+
+export const triggerHaptic = (type: HapticType = 'light') => {
+  if (!Haptics) {
+    // Silently skip if expo-haptics not available
+    return;
+  }
+
+  try {
+    switch (type) {
+      case 'light':
+        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+        break;
+      case 'medium':
+        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium);
+        break;
+      case 'heavy':
+        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy);
+        break;
+      case 'success':
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+        break;
+      case 'warning':
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Warning);
+        break;
+      case 'error':
+        Haptics.notificationAsync(Haptics.NotificationFeedbackType.Error);
+        break;
+    }
+  } catch (error) {
+    console.warn('Haptic feedback failed:', error);
+  }
+};
+
+// ─── Easing Function Mapper ───
+
+export const getEasing = (easingType?: string) => {
+  switch (easingType) {
+    case 'linear':
+      return Easing.linear;
+    case 'ease-in':
+      return Easing.in(Easing.ease);
+    case 'ease-out':
+      return Easing.out(Easing.ease);
+    case 'ease-in-out':
+      return Easing.inOut(Easing.ease);
+    case 'spring':
+      return Easing.elastic(1);
+    default:
+      return Easing.inOut(Easing.ease);
+  }
+};
+
+// ─── Entrance Animations ───
+
+export interface EntranceAnimationValues {
+  opacity: Animated.Value;
+  translateY: Animated.Value;
+  translateX: Animated.Value;
+  scale: Animated.Value;
+}
+
+export const createEntranceAnimationValues = (): EntranceAnimationValues => ({
+  opacity: new Animated.Value(0),
+  translateY: new Animated.Value(0),
+  translateX: new Animated.Value(0),
+  scale: new Animated.Value(1),
+});
+
+export const startEntranceAnimation = (
+  config: EntranceAnimation,
+  values: EntranceAnimationValues,
+  delay: number = 0
+): void => {
+  const duration = config.duration || 400;
+  const totalDelay = (config.delay || 0) + delay;
+  const easing = getEasing(config.easing);
+
+  // Set initial values based on animation type
+  switch (config.type) {
+    case 'fadeIn':
+      values.opacity.setValue(0);
+      break;
+    case 'slideUp':
+      values.opacity.setValue(0);
+      values.translateY.setValue(30);
+      break;
+    case 'slideDown':
+      values.opacity.setValue(0);
+      values.translateY.setValue(-30);
+      break;
+    case 'slideLeft':
+      values.opacity.setValue(0);
+      values.translateX.setValue(30);
+      break;
+    case 'slideRight':
+      values.opacity.setValue(0);
+      values.translateX.setValue(-30);
+      break;
+    case 'scaleIn':
+      values.opacity.setValue(0);
+      values.scale.setValue(0.8);
+      break;
+    case 'none':
+      values.opacity.setValue(1);
+      return;
+  }
+
+  // Animate to final values
+  Animated.parallel([
+    Animated.timing(values.opacity, {
+      toValue: 1,
+      duration,
+      delay: totalDelay,
+      easing,
+      useNativeDriver: true,
+    }),
+    Animated.timing(values.translateY, {
+      toValue: 0,
+      duration,
+      delay: totalDelay,
+      easing,
+      useNativeDriver: true,
+    }),
+    Animated.timing(values.translateX, {
+      toValue: 0,
+      duration,
+      delay: totalDelay,
+      easing,
+      useNativeDriver: true,
+    }),
+    Animated.timing(values.scale, {
+      toValue: 1,
+      duration,
+      delay: totalDelay,
+      easing,
+      useNativeDriver: true,
+    }),
+  ]).start();
+};
+
+// ─── Interactive Animations ───
+
+export const startInteractiveAnimation = (
+  config: InteractiveAnimation,
+  animatedValue: Animated.Value
+): void => {
+  const duration = config.duration || 200;
+  const intensity = config.intensity || (config.type === 'scale' ? 0.95 : 10);
+
+  // Trigger haptic if enabled
+  if (config.haptic && config.hapticType) {
+    triggerHaptic(config.hapticType);
+  }
+
+  switch (config.type) {
+    case 'scale':
+      Animated.sequence([
+        Animated.timing(animatedValue, {
+          toValue: intensity,
+          duration: duration / 2,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          duration: duration / 2,
+          easing: Easing.in(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ]).start();
+      break;
+
+    case 'pulse':
+      const pulseSequence = Animated.sequence([
+        Animated.timing(animatedValue, {
+          toValue: 1.05,
+          duration: duration,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: 1,
+          duration: duration,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ]);
+
+      if (config.repeat) {
+        Animated.loop(pulseSequence).start();
+      } else {
+        pulseSequence.start();
+      }
+      break;
+
+    case 'shake':
+      Animated.sequence([
+        Animated.timing(animatedValue, {
+          toValue: intensity,
+          duration: duration / 8,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: -intensity,
+          duration: duration / 4,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: intensity,
+          duration: duration / 4,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: -intensity,
+          duration: duration / 4,
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: 0,
+          duration: duration / 8,
+          useNativeDriver: true,
+        }),
+      ]).start();
+      break;
+
+    case 'bounce':
+      Animated.sequence([
+        Animated.timing(animatedValue, {
+          toValue: -20,
+          duration: duration / 3,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: 5,
+          duration: duration / 3,
+          easing: Easing.in(Easing.ease),
+          useNativeDriver: true,
+        }),
+        Animated.timing(animatedValue, {
+          toValue: 0,
+          duration: duration / 3,
+          easing: Easing.out(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ]).start();
+      break;
+  }
+};
+
+// ─── Typewriter Text Animation ───
+
+export interface TypewriterState {
+  displayedText: string;
+  currentIndex: number;
+  isComplete: boolean;
+}
+
+export const shouldTriggerHaptic = (
+  index: number,
+  frequency: string
+): boolean => {
+  switch (frequency) {
+    case 'every':
+      return true;
+    case 'every-2':
+      return index % 2 === 0;
+    case 'every-3':
+      return index % 3 === 0;
+    case 'every-5':
+      return index % 5 === 0;
+    default:
+      return false;
+  }
+};

package/src/components/ElementRenderer.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useEffect, useRef } from 'react';
 import {
   View,
   Text,
@@ -11,9 +11,17 @@ import {
   ViewStyle,
   TextStyle,
   ImageStyle,
+  Animated,
 } from 'react-native';
 import { ElementNode, ElementStyle, ElementAction, Analytics, ConditionalDestination, ConditionalRoutes } from '../types';
 import { resolveTemplate, evaluateCondition } from '../variableUtils';
+import {
+  createEntranceAnimationValues,
+  startEntranceAnimation,
+  startInteractiveAnimation,
+  triggerHaptic,
+  shouldTriggerHaptic,
+} from '../animationUtils';
 import { LinearGradient } from 'expo-linear-gradient';
 import { Feather, MaterialIcons, MaterialCommunityIcons, Ionicons, FontAwesome } from '@expo/vector-icons';
 
@@ -35,6 +43,7 @@ interface ElementRendererProps {
   onDismiss?: () => void;
   variables?: Record<string, any>;
   onSetVariable?: (name: string, value: any) => void;
+  assets?: Array<{ name: string; type: string; data: string }>;
 }
 
 export const ElementRenderer: React.FC<ElementRendererProps> = ({
@@ -45,11 +54,31 @@ export const ElementRenderer: React.FC<ElementRendererProps> = ({
   onDismiss,
   variables = {},
   onSetVariable,
+  assets = [],
 }) => {
   // Track toggled element IDs for toggle actions
   const [toggledIds, setToggledIds] = useState<Set<string>>(new Set());
   // Track selection groups: group name → selected element ID
   const [groupSelections, setGroupSelections] = useState<Record<string, string>>({});
+  // Track text input values locally (uncontrolled)
+  const [inputValues, setInputValues] = useState<Record<string, string>>({});
+
+  // Helper function to resolve asset: URLs to actual data URLs
+  const resolveAssetUrl = (url: string): string => {
+    if (!url || !url.startsWith('asset:')) {
+      return url; // Return as-is if not an asset reference
+    }
+
+    const assetName = url.replace('asset:', '');
+    const asset = assets.find(a => a.name === assetName);
+
+    if (asset) {
+      return asset.data; // Return the base64 data URL
+    }
+
+    console.warn(`Asset not found: ${assetName}`);
+    return url; // Fallback to original URL
+  };
 
   const executeAction = useCallback(
     (action: ElementAction, element: ElementNode) => {
@@ -66,6 +95,12 @@ export const ElementRenderer: React.FC<ElementRendererProps> = ({
           if (action.variable !== undefined && onSetVariable) {
             onSetVariable(action.variable, action.value);
           }
+          // Also save all current text input values when any action is triggered
+          if (onSetVariable) {
+            Object.entries(inputValues).forEach(([key, value]) => {
+              onSetVariable(key, value);
+            });
+          }
           break;
         case 'toggle': {
           const group = action.group;
@@ -98,6 +133,12 @@ export const ElementRenderer: React.FC<ElementRendererProps> = ({
           break;
         }
         case 'navigate':
+          // Save all text input values before navigating
+          if (onSetVariable) {
+            Object.entries(inputValues).forEach(([key, value]) => {
+              onSetVariable(key, value);
+            });
+          }
           if (onNavigate && action.destination) {
             onNavigate(action.destination);
           }
@@ -115,7 +156,7 @@ export const ElementRenderer: React.FC<ElementRendererProps> = ({
           break;
       }
     },
-    [groupSelections, onNavigate, onDismiss, analytics, screenId, onSetVariable]
+    [groupSelections, onNavigate, onDismiss, analytics, screenId, onSetVariable, inputValues]
   );
 
   const handleAction = useCallback(
@@ -148,6 +189,9 @@ export const ElementRenderer: React.FC<ElementRendererProps> = ({
           groupSelections={groupSelections}
           onAction={handleAction}
           variables={variables}
+          inputValues={inputValues}
+          setInputValues={setInputValues}
+          resolveAssetUrl={resolveAssetUrl}
         />
       ))}
     </>
@@ -163,15 +207,39 @@ interface RenderNodeProps {
   onAction: (element: ElementNode) => void;
   variables: Record<string, any>;
   onSetVariable?: (name: string, value: any) => void;
+  inputValues: Record<string, string>;
+  setInputValues: React.Dispatch<React.SetStateAction<Record<string, string>>>;
+  staggerDelay?: number;  // For staggered entrance animations
+  resolveAssetUrl: (url: string) => string;  // Asset URL resolver
 }
 
-const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelections, onAction, variables, onSetVariable }) => {
+const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelections, onAction, variables, onSetVariable, inputValues, setInputValues, staggerDelay = 0, resolveAssetUrl }) => {
   // Variable-based conditions — hide element if condition is not met
   if (element.conditions?.show_if) {
     const shouldShow = evaluateCondition(element.conditions.show_if, variables);
     if (!shouldShow) return null;
   }
 
+  // ─── Animation State ───
+  const entranceValues = useRef(createEntranceAnimationValues()).current;
+  const interactiveValue = useRef(new Animated.Value(1)).current;
+  const [hasAnimated, setHasAnimated] = useState(false);
+
+  // Start entrance animation on mount
+  useEffect(() => {
+    if (element.entrance && element.entrance.type !== 'none' && !hasAnimated) {
+      startEntranceAnimation(element.entrance, entranceValues, staggerDelay);
+      setHasAnimated(true);
+    }
+  }, [element.entrance, hasAnimated, staggerDelay]);
+
+  // Start auto-triggered interactive animations
+  useEffect(() => {
+    if (element.interactive && element.interactive.trigger === 'load' && element.interactive.type !== 'none') {
+      startInteractiveAnimation(element.interactive, interactiveValue);
+    }
+  }, [element.interactive]);
+
   const style = convertStyle(element.style || {});
   const isToggled = toggledIds.has(element.id);
 
@@ -207,11 +275,19 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
     if (style.width) wrapperStyle.width = style.width;
     if (style.alignSelf) wrapperStyle.alignSelf = style.alignSelf;
 
+    const handlePress = () => {
+      // Trigger interactive animation if configured
+      if (element.interactive && element.interactive.trigger === 'tap' && element.interactive.type !== 'none') {
+        startInteractiveAnimation(element.interactive, interactiveValue);
+      }
+      onAction(element);
+    };
+
     return (
       <TouchableOpacity
         key={element.id}
         activeOpacity={0.7}
-        onPress={() => onAction(element)}
+        onPress={handlePress}
         style={wrapperStyle}
       >
         {content}
@@ -219,39 +295,103 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
     );
   };
 
-  const childProps = { toggledIds, groupSelections, onAction, variables, onSetVariable };
+  // Wrapper for entrance animations
+  const wrapWithEntranceAnimation = (content: React.ReactElement): React.ReactElement => {
+    if (!element.entrance || element.entrance.type === 'none') {
+      return content;
+    }
+
+    // Build animated style based on entrance type
+    const animatedStyle: any = {
+      opacity: entranceValues.opacity,
+    };
+
+    // Apply scale for scale animations
+    if (element.entrance.type === 'scaleIn') {
+      animatedStyle.transform = [{ scale: entranceValues.scale }];
+    }
+    // Apply translate for slide animations
+    else if (element.entrance.type === 'slideUp' || element.entrance.type === 'slideDown') {
+      animatedStyle.transform = [{ translateY: entranceValues.translateY }];
+    }
+    else if (element.entrance.type === 'slideLeft' || element.entrance.type === 'slideRight') {
+      animatedStyle.transform = [{ translateX: entranceValues.translateX }];
+    }
+
+    return <Animated.View style={animatedStyle}>{content}</Animated.View>;
+  };
+
+  // Wrapper for interactive animations
+  const wrapWithInteractiveAnimation = (content: React.ReactElement): React.ReactElement => {
+    if (!element.interactive || element.interactive.type === 'none') {
+      return content;
+    }
+
+    const animatedStyle: any = {};
+
+    switch (element.interactive.type) {
+      case 'scale':
+      case 'pulse':
+        animatedStyle.transform = [{ scale: interactiveValue }];
+        break;
+      case 'shake':
+        animatedStyle.transform = [{ translateX: interactiveValue }];
+        break;
+      case 'bounce':
+        animatedStyle.transform = [{ translateY: interactiveValue }];
+        break;
+    }
+
+    return <Animated.View style={animatedStyle}>{content}</Animated.View>;
+  };
+
+  const childProps = { toggledIds, groupSelections, onAction, variables, onSetVariable, inputValues, setInputValues, resolveAssetUrl };
 
   switch (element.type) {
     // ─── Containers ───
 
     case 'vstack': {
+      const stagger = element.entrance?.stagger || 0;
       const vstackContent = (
         <View style={[style, { flexDirection: 'column' }]}>
-          {element.children?.map((child) => (
-            <RenderNode key={child.id} element={child} {...childProps} />
+          {element.children?.map((child, index) => (
+            <RenderNode
+              key={child.id}
+              element={child}
+              {...childProps}
+              staggerDelay={stagger > 0 ? index * stagger : 0}
+            />
           ))}
         </View>
       );
-      return wrapWithAction(
+      const wrapped = wrapWithAction(
         element.style?.backgroundGradient
           ? wrapWithGradient(vstackContent, element.style, { ...style, flexDirection: 'column' })
           : vstackContent
       );
+      return wrapWithInteractiveAnimation(wrapWithEntranceAnimation(wrapped));
     }
 
     case 'hstack': {
+      const stagger = element.entrance?.stagger || 0;
       const hstackContent = (
         <View style={[style, { flexDirection: 'row' }]}>
-          {element.children?.map((child) => (
-            <RenderNode key={child.id} element={child} {...childProps} />
+          {element.children?.map((child, index) => (
+            <RenderNode
+              key={child.id}
+              element={child}
+              {...childProps}
+              staggerDelay={stagger > 0 ? index * stagger : 0}
+            />
           ))}
         </View>
       );
-      return wrapWithAction(
+      const wrapped = wrapWithAction(
         element.style?.backgroundGradient
           ? wrapWithGradient(hstackContent, element.style, { ...style, flexDirection: 'row' })
           : hstackContent
       );
+      return wrapWithInteractiveAnimation(wrapWithEntranceAnimation(wrapped));
     }
 
     case 'zstack': {
@@ -308,11 +448,75 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
 
     case 'text': {
       const resolvedText = resolveTemplate(element.props?.text || '', variables);
-      return (
+
+      // Typewriter animation support
+      const [displayedText, setDisplayedText] = useState('');
+      const [showCursor, setShowCursor] = useState(false);
+      const typewriterInterval = useRef<NodeJS.Timeout | null>(null);
+
+      useEffect(() => {
+        const textAnim = element.textAnimation;
+
+        if (textAnim && textAnim.type === 'typewriter') {
+          const speed = textAnim.speed || 20; // chars per second
+          const delay = textAnim.delay || 0;
+          const haptic = textAnim.haptic;
+          let currentIndex = 0;
+
+          // Show cursor if enabled
+          if (textAnim.cursor) {
+            setShowCursor(true);
+          }
+
+          // Start typewriter animation after delay
+          const timeoutId = setTimeout(() => {
+            typewriterInterval.current = setInterval(() => {
+              if (currentIndex >= resolvedText.length) {
+                if (typewriterInterval.current) {
+                  clearInterval(typewriterInterval.current);
+                }
+                // Hide cursor when done
+                if (textAnim.cursor) {
+                  setShowCursor(false);
+                }
+                return;
+              }
+
+              setDisplayedText(resolvedText.substring(0, currentIndex + 1));
+
+              // Trigger haptic if enabled
+              if (haptic && haptic.enabled && shouldTriggerHaptic(currentIndex, haptic.frequency)) {
+                triggerHaptic(haptic.type);
+              }
+
+              currentIndex++;
+            }, 1000 / speed);
+          }, delay);
+
+          return () => {
+            clearTimeout(timeoutId);
+            if (typewriterInterval.current) {
+              clearInterval(typewriterInterval.current);
+            }
+          };
+        } else {
+          // No typewriter - show full text immediately
+          setDisplayedText(resolvedText);
+        }
+      }, [resolvedText, element.textAnimation]);
+
+      const textContent = element.textAnimation?.type === 'typewriter' ? displayedText : resolvedText;
+
+      const textElement = (
         <Text style={style as TextStyle}>
-          {resolvedText}
+          {textContent}
+          {showCursor && (
+            <Text style={{ opacity: 0.5 }}>|</Text>
+          )}
         </Text>
       );
+
+      return wrapWithInteractiveAnimation(wrapWithEntranceAnimation(wrapWithAction(textElement)));
     }
 
     case 'icon': {
@@ -358,9 +562,10 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
 
     case 'image':
       if (element.props?.url) {
+        const resolvedUrl = resolveAssetUrl(element.props.url);
         return (
           <Image
-            source={{ uri: element.props.url }}
+            source={{ uri: resolvedUrl }}
             style={[style as ImageStyle, { resizeMode: 'cover' }]}
           />
         );
@@ -388,6 +593,11 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
 
     case 'video':
       // Video placeholder — actual implementation would use expo-av or react-native-video
+      // Resolve asset URL if present (for future implementation)
+      if (element.props?.url) {
+        const resolvedUrl = resolveAssetUrl(element.props.url);
+        // TODO: Implement actual video player with resolvedUrl
+      }
       return (
         <View
           style={[
@@ -410,6 +620,11 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
 
     case 'lottie':
       // Lottie placeholder — actual implementation would use lottie-react-native
+      // Resolve asset URL if present (for future implementation)
+      if (element.props?.url) {
+        const resolvedUrl = resolveAssetUrl(element.props.url);
+        // TODO: Implement actual Lottie player with resolvedUrl
+      }
       return (
         <View
           style={[
@@ -441,7 +656,8 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
 
       // Get the variable name - use props.variable if specified, otherwise use element.id
       const variableName = element.props?.variable || element.id;
-      const currentValue = variables[variableName] || '';
+      // Use local state value, or fall back to variables, or empty string
+      const currentValue = inputValues[variableName] ?? variables[variableName] ?? '';
 
       return (
         <TextInput
@@ -452,9 +668,8 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
           autoCapitalize={element.props?.type === 'email' ? 'none' : 'sentences'}
           value={currentValue}
           onChangeText={(text) => {
-            if (onSetVariable) {
-              onSetVariable(variableName, text);
-            }
+            // Save to local state only - don't trigger parent re-render
+            setInputValues(prev => ({ ...prev, [variableName]: text }));
           }}
         />
       );