noboarding 1.0.3-beta → 1.0.7

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' }]}
           />
         );
@@ -386,8 +591,32 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
         </View>
       );
 
-    case 'video':
-      // Video placeholder — actual implementation would use expo-av or react-native-video
+    case 'video': {
+      const videoUrl = element.props?.url ? resolveAssetUrl(element.props.url) : null;
+      let VideoComponent: any = null;
+      try {
+        const expoAv = require('expo-av');
+        VideoComponent = expoAv.Video;
+      } catch {}
+
+      if (VideoComponent && videoUrl) {
+        const resizeMode = element.props?.resizeMode || 'contain';
+        return (
+          <View style={[style, { backgroundColor: (style as ViewStyle).backgroundColor || '#1a1a1a', overflow: 'hidden' }]}>
+            <VideoComponent
+              source={{ uri: videoUrl }}
+              style={{ width: '100%', height: '100%' }}
+              resizeMode={resizeMode}
+              shouldPlay={element.props?.autoPlay !== false}
+              isLooping={element.props?.loop !== false}
+              isMuted={element.props?.muted !== false}
+              useNativeControls={false}
+            />
+          </View>
+        );
+      }
+
+      // Fallback when expo-av is unavailable or no URL
       return (
         <View
           style={[
@@ -407,9 +636,44 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
           )}
         </View>
       );
+    }
+
+    case 'lottie': {
+      const lottieUrl = element.props?.url ? resolveAssetUrl(element.props.url) : null;
+      let LottieView: any = null;
+      try {
+        LottieView = require('lottie-react-native').default;
+      } catch {}
+
+      if (LottieView && lottieUrl) {
+        // Decode base64 data URLs to get the Lottie JSON object
+        let lottieSource: any;
+        if (lottieUrl.startsWith('data:application/json;base64,')) {
+          try {
+            const base64Data = lottieUrl.replace('data:application/json;base64,', '');
+            const jsonString = atob(base64Data);
+            lottieSource = JSON.parse(jsonString);
+          } catch {
+            lottieSource = { uri: lottieUrl };
+          }
+        } else {
+          lottieSource = { uri: lottieUrl };
+        }
 
-    case 'lottie':
-      // Lottie placeholder — actual implementation would use lottie-react-native
+        return (
+          <View style={[style, { backgroundColor: (style as ViewStyle).backgroundColor || '#f8f8ff', overflow: 'hidden' }]}>
+            <LottieView
+              source={lottieSource}
+              style={{ width: '100%', height: '100%' }}
+              autoPlay={element.props?.autoPlay !== false}
+              loop={element.props?.loop !== false}
+              speed={element.props?.speed || 1}
+            />
+          </View>
+        );
+      }
+
+      // Fallback when lottie-react-native is unavailable or no URL
       return (
         <View
           style={[
@@ -429,6 +693,7 @@ const RenderNode: React.FC<RenderNodeProps> = ({ element, toggledIds, groupSelec
           )}
         </View>
       );
+    }
 
     case 'input': {
       // Only apply default border if borderWidth is not explicitly defined (including 0)
@@ -441,7 +706,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 +718,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 }));
           }}
         />
       );

package/src/types.ts

@@ -14,6 +14,8 @@ export interface ScreenConfig {
   custom_component_name?: string;
   // Dashboard visibility control — if true, screen is hidden from onboarding flow
   hidden?: boolean;
+  // Screen transition animation (OTA updateable)
+  transition?: ScreenTransition;
 }
 
 // ─── Element Tree Types (matches dashboard primitives) ───
@@ -45,6 +47,54 @@ export interface ElementNode {
   actions?: ElementAction[];       // multi-action support (runs all in sequence)
   visibleWhen?: { group: string; hasSelection: boolean };
   conditions?: ElementConditions;  // variable-based show/hide
+  // Animation configurations (OTA updateable)
+  entrance?: EntranceAnimation;
+  interactive?: InteractiveAnimation;
+  textAnimation?: TextAnimation;
+}
+
+// ─── Animation Types (OTA Updateable) ───
+
+export type EntranceAnimationType = 'fadeIn' | 'slideUp' | 'slideDown' | 'slideLeft' | 'slideRight' | 'scaleIn' | 'none';
+export type InteractiveAnimationType = 'scale' | 'pulse' | 'shake' | 'bounce' | 'none';
+export type HapticType = 'light' | 'medium' | 'heavy' | 'success' | 'warning' | 'error';
+export type HapticFrequency = 'every' | 'every-2' | 'every-3' | 'every-5';
+
+export interface EntranceAnimation {
+  type: EntranceAnimationType;
+  duration?: number;      // milliseconds (default: 400)
+  delay?: number;         // delay before starting (default: 0)
+  stagger?: number;       // for lists: delay between each child (default: 0)
+  easing?: 'linear' | 'ease-in' | 'ease-out' | 'ease-in-out' | 'spring';
+}
+
+export interface InteractiveAnimation {
+  type: InteractiveAnimationType;
+  trigger?: 'tap' | 'load';  // when to trigger (default: 'tap')
+  duration?: number;         // milliseconds (default: 200)
+  intensity?: number;        // scale/shake intensity 0-1 (default: 0.95 for scale, 10 for shake)
+  repeat?: boolean;          // repeat continuously (default: false)
+  haptic?: boolean;          // trigger haptic on animation (default: false)
+  hapticType?: HapticType;   // type of haptic feedback
+}
+
+export interface TextAnimation {
+  type: 'typewriter' | 'none';
+  speed?: number;            // characters per second (default: 20)
+  delay?: number;            // delay before starting (default: 0)
+  cursor?: boolean;          // show blinking cursor (default: false)
+  haptic?: {
+    enabled: boolean;
+    type: HapticType;
+    frequency: HapticFrequency;
+  };
+}
+
+export interface ScreenTransition {
+  type: 'push' | 'modal' | 'fade' | 'slide' | 'none';
+  direction?: 'left' | 'right' | 'up' | 'down';
+  duration?: number;    // milliseconds (default: 300)
+  easing?: 'linear' | 'ease-in-out' | 'spring';
 }
 
 // ─── Condition & Variable Types ───
@@ -160,6 +210,7 @@ export interface ElementStyle {
 export interface OnboardingConfig {
   version: string;
   screens: ScreenConfig[];
+  assets?: Array<{ name: string; type: string; data: string }>;
 }
 
 // Experiment/A/B test variant