exodeui-react-native 1.0.0 → 1.0.2

package/index.js

@@ -0,0 +1 @@
+export * from './src/index';

package/package.json

@@ -1,14 +1,16 @@
 {
   "name": "exodeui-react-native",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "React Native runtime for ExodeUI animations",
-  "main": "src/index.tsx",
+  "main": "index.js",
   "files": [
     "src",
+    "index.js",
     "README.md"
   ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "vitest run",
+    "test:watch": "vitest"
   },
   "keywords": [
     "react-native",
@@ -24,9 +26,10 @@
   },
   "devDependencies": {
     "@shopify/react-native-skia": "^2.4.14",
-    "@types/matter-js": "^0.20.2"
-  },
-  "dependencies": {
-    "matter-js": "^0.20.0"
+    "@types/matter-js": "^0.20.2",
+    "@types/node": "^25.0.9",
+    "jsdom": "^27.4.0",
+    "typescript": "^5.0.0",
+    "vitest": "^4.0.17"
   }
 }

package/src/ExodeUIView.tsx

@@ -1,32 +1,42 @@
-import React, { useRef, useEffect, useState, useImperativeHandle, forwardRef } from 'react';
-import { View, StyleSheet, TouchableWithoutFeedback, LayoutChangeEvent, Platform } from 'react-native';
+import React, { useRef, useEffect, useState, forwardRef, useImperativeHandle } from 'react';
+import { View, StyleSheet, LayoutChangeEvent, ViewStyle, PanResponder, PanResponderInstance, GestureResponderEvent, Image } from 'react-native';
 import { Canvas, Skia, Picture, SkPicture } from '@shopify/react-native-skia';
 import { ExodeUIEngine } from './engine';
-import { Artboard, Fit, Alignment } from './types';
+import { Artboard, Fit, Alignment, ComponentEvent } from './types';
 
 export interface ExodeUIViewProps {
   artboard?: Artboard;
-  style?: any;
+  src?: string;
+  style?: ViewStyle;
   autoPlay?: boolean;
   fit?: Fit;
   alignment?: Alignment;
-  onReady?: (engine: ExodeUIEngine) => void;
+  onReady?: (engine: any) => void; // Changed type to any as per instruction
   onTrigger?: (triggerName: string, animationName: string) => void;
   onInputUpdate?: (nameOrId: string, value: any) => void;
+  onComponentChange?: (event: ComponentEvent) => void; // Added
+  onToggle?: (name: string, checked: boolean) => void; // Changed value to checked
+  onInputChange?: (name: string, text: string) => void; // Changed value to text
+  onInputFocus?: (name: string) => void;
+  onInputBlur?: (name: string) => void;
 }
 
 export const ExodeUIView = forwardRef<any, ExodeUIViewProps>(
-  ({ artboard, style, autoPlay = true, fit = 'Contain', alignment = 'Center', onReady, onTrigger, onInputUpdate }, ref) => {
+  ({ artboard, src, style, autoPlay = true, fit = 'Contain', alignment = 'Center', onReady, onTrigger, onInputUpdate, onInputFocus, onInputBlur, onToggle, onInputChange, onComponentChange }, ref) => {
     
     const engineRef = useRef<ExodeUIEngine>(new ExodeUIEngine());
     const [picture, setPicture] = useState<SkPicture | null>(null);
     const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
     const lastTimeRef = useRef<number>(0);
     const rafRef = useRef<number | undefined>(undefined);
+    const dimsRef = useRef(dimensions);
+
+    useEffect(() => {
+        dimsRef.current = dimensions;
+    }, [dimensions]);
 
     useImperativeHandle(ref, () => ({
         getEngine: () => engineRef.current,
-        // Expose other methods if needed
     }));
 
     useEffect(() => {
@@ -34,26 +44,78 @@ export const ExodeUIView = forwardRef<any, ExodeUIViewProps>(
     }, [fit, alignment]);
 
     useEffect(() => {
-        if (onTrigger) {
-            engineRef.current.setTriggerCallback(onTrigger);
-        }
+        if (onTrigger) engineRef.current.setTriggerCallback(onTrigger);
     }, [onTrigger]);
 
     useEffect(() => {
-        if (onInputUpdate) {
-            engineRef.current.setInputUpdateCallback(onInputUpdate);
-        }
+        if (onInputUpdate) engineRef.current.setInputUpdateCallback(onInputUpdate);
     }, [onInputUpdate]);
 
     useEffect(() => {
-        if (artboard) {
-            engineRef.current.load(artboard);
-            if (onReady) onReady(engineRef.current);
-        }
-    }, [artboard]);
+        if (onInputFocus) engineRef.current.setInputFocusCallback(onInputFocus);
+    }, [onInputFocus]);
+
+    useEffect(() => {
+        if (onInputBlur) engineRef.current.setInputBlurCallback(onInputBlur);
+    }, [onInputBlur]);
+
+    // New useEffect hooks for additional callbacks
+    useEffect(() => {
+        if (onToggle) engineRef.current.setToggleCallback(onToggle);
+    }, [onToggle]);
+
+    useEffect(() => {
+        if (onInputChange) engineRef.current.setInputChangeCallback(onInputChange);
+    }, [onInputChange]);
+
+    useEffect(() => {
+        if (onComponentChange) engineRef.current.setComponentChangeCallback(onComponentChange);
+    }, [onComponentChange]);
+
+    // Load Artboard
+    useEffect(() => {
+        const loadArtboard = async () => {
+            let data = artboard;
+            
+            // Handle numeric asset IDs (from require)
+            if (typeof data === 'number') {
+                const source = Image.resolveAssetSource(data);
+                if (source && source.uri) {
+                    try {
+                        const response = await fetch(source.uri);
+                        data = await response.json() as Artboard;
+                    } catch (e) {
+                        console.error('[ExodeUIView] Failed to fetch artboard from asset ID:', data, e);
+                        return;
+                    }
+                }
+            }
+
+            if (!data && src) {
+                try {
+                    const response = await fetch(src);
+                    data = await response.json() as Artboard;
+                } catch (e) {
+                    console.error('[ExodeUIView] Failed to fetch artboard from src:', src, e);
+                    return;
+                }
+            }
+
+            if (data) {
+                console.log('[ExodeUIView] ✅ Successfully loaded artboard:', data.name || 'Untitled', 'Objects:', data.objects?.length);
+                engineRef.current.load(data);
+                if (onReady) onReady(engineRef.current);
+            } else {
+                console.warn('[ExodeUIView] ❌ No artboard data found to load');
+            }
+        };
+
+        loadArtboard();
+    }, [artboard, src, onReady]); // Added onReady to dependencies
 
     const onLayout = (event: LayoutChangeEvent) => {
         const { width, height } = event.nativeEvent.layout;
+        console.log(`[ExodeUIView] Layout: ${width}x${height}`);
         setDimensions({ width, height });
     };
 
@@ -61,6 +123,11 @@ export const ExodeUIView = forwardRef<any, ExodeUIViewProps>(
         const loop = (timestamp: number) => {
             if (lastTimeRef.current === 0) lastTimeRef.current = timestamp;
             const dt = (timestamp - lastTimeRef.current) / 1000;
+            if (dt > 1) { // Cap dt to avoid large jumps if tab backgrounded
+                lastTimeRef.current = timestamp;
+                rafRef.current = requestAnimationFrame(loop);
+                return;
+            }
             lastTimeRef.current = timestamp;
 
             const engine = engineRef.current;
@@ -87,22 +154,49 @@ export const ExodeUIView = forwardRef<any, ExodeUIViewProps>(
         return () => {
             if (rafRef.current) cancelAnimationFrame(rafRef.current);
         };
-    }, [autoPlay, dimensions]); // depend on dimensions to restart loop/recording? Actually loop uses ref values ideally but dimensions state update triggers re-render anyway.
-
-    const handleTouch = (e: any) => {
-        const { locationX, locationY } = e.nativeEvent;
-        engineRef.current.handlePointerInput('click', locationX, locationY, dimensions.width, dimensions.height);
-    };
+    }, [autoPlay, dimensions]);
+
+    const panResponder = useRef(
+        PanResponder.create({
+            onStartShouldSetPanResponder: () => true,
+            onStartShouldSetPanResponderCapture: () => true,
+            onMoveShouldSetPanResponder: () => true,
+            onMoveShouldSetPanResponderCapture: () => true,
+            onPanResponderGrant: (e) => {
+                const { locationX, locationY } = e.nativeEvent;
+                console.log(`[ExodeUIView] PanResponder Grant: ${locationX.toFixed(1)}, ${locationY.toFixed(1)}`);
+                engineRef.current.handlePointerInput('PointerDown', locationX, locationY, dimsRef.current.width, dimsRef.current.height);
+            },
+            onPanResponderMove: (e) => {
+                const { locationX, locationY } = e.nativeEvent;
+                engineRef.current.handlePointerInput('PointerMove', locationX, locationY, dimsRef.current.width, dimsRef.current.height);
+            },
+            onPanResponderRelease: (e) => {
+                const { locationX, locationY } = e.nativeEvent;
+                console.log(`[ExodeUIView] PanResponder Release: ${locationX.toFixed(1)}, ${locationY.toFixed(1)}`);
+                engineRef.current.handlePointerInput('click', locationX, locationY, dimsRef.current.width, dimsRef.current.height);
+                engineRef.current.handlePointerInput('PointerUp', locationX, locationY, dimsRef.current.width, dimsRef.current.height);
+            },
+            onPanResponderTerminate: (e) => {
+                const { locationX, locationY } = e.nativeEvent;
+                engineRef.current.handlePointerInput('PointerUp', locationX, locationY, dimsRef.current.width, dimsRef.current.height);
+            },
+            onShouldBlockNativeResponder: () => true,
+            onPanResponderTerminationRequest: () => false,
+        })
+    ).current;
 
     return (
-        <View style={[styles.container, style]} onLayout={onLayout}>
-             <TouchableWithoutFeedback onPress={handleTouch}>
-                <View style={StyleSheet.absoluteFill}>
-                     <Canvas style={{ flex: 1 }}>
-                         {picture && <Picture picture={picture} />}
-                     </Canvas>
-                </View>
-             </TouchableWithoutFeedback>
+        <View 
+            style={[styles.container, style]} 
+            onLayout={onLayout}
+            {...panResponder.panHandlers}
+        >
+             <View style={StyleSheet.absoluteFill} pointerEvents="none">
+                  <Canvas style={{ flex: 1 }}>
+                      {picture && <Picture picture={picture} />}
+                  </Canvas>
+             </View>
         </View>
     );
   }
@@ -111,5 +205,6 @@ export const ExodeUIView = forwardRef<any, ExodeUIViewProps>(
 const styles = StyleSheet.create({
     container: {
         overflow: 'hidden',
+        backgroundColor: '#0F0F1A', // Match playground background
     }
 });

package/src/__tests__/engine.test.ts

@@ -0,0 +1,299 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { ExodeUIEngine } from '../engine';
+import { Artboard, ConditionOp } from '../types';
+
+// Mock Skia since it requires native bindings
+vi.mock('@shopify/react-native-skia', () => ({
+    Skia: {
+        Color: vi.fn((color: string) => color),
+        Path: {
+            Make: vi.fn(() => ({
+                addRect: vi.fn(),
+                addRRect: vi.fn(),
+                addOval: vi.fn(),
+                moveTo: vi.fn(),
+                lineTo: vi.fn(),
+                close: vi.fn(),
+            })),
+        },
+        RRectXY: vi.fn((rect, rx, ry) => ({ rect, rx, ry })),
+        Paint: vi.fn(() => ({
+            setStyle: vi.fn(),
+            setColor: vi.fn(),
+            setAntiAlias: vi.fn(),
+        })),
+    },
+    PaintStyle: {
+        Fill: 'fill',
+        Stroke: 'stroke',
+    },
+}));
+
+// Mock Matter.js
+vi.mock('matter-js', () => ({
+    default: {
+        Engine: {
+            create: vi.fn(() => ({
+                gravity: { x: 0, y: 1 },
+                world: {},
+            })),
+            update: vi.fn(),
+        },
+        Bodies: {
+            rectangle: vi.fn((x, y, w, h, options) => ({
+                position: { x, y },
+                angle: options?.angle || 0,
+                isStatic: options?.isStatic || false,
+            })),
+            circle: vi.fn((x, y, r, options) => ({
+                position: { x, y },
+                angle: options?.angle || 0,
+                isStatic: options?.isStatic || false,
+            })),
+        },
+        World: {
+            add: vi.fn(),
+        },
+        Body: {
+            setPosition: vi.fn(),
+            setAngle: vi.fn(),
+        },
+    },
+}));
+
+const mockArtboard: Artboard = {
+    name: 'Test Artboard',
+    width: 1000,
+    height: 1000,
+    backgroundColor: '#ffffff',
+    objects: [
+        {
+            type: 'Shape',
+            id: 'obj1',
+            name: 'Rectangle',
+            transform: { x: 0, y: 0, rotation: 0, scale_x: 1, scale_y: 1 },
+            geometry: { type: 'Rectangle', width: 100, height: 100 },
+            style: { fill: { type: 'Solid', color: '#ff0000', opacity: 1 } }
+        }
+    ],
+    animations: [
+        {
+            id: 'anim1',
+            name: 'Rotate',
+            duration: 1,
+            tracks: [
+                {
+                    object_id: 'obj1',
+                    property: 'rotation',
+                    keyframes: [
+                        { time: 0, value: 0, easing: 'Linear' },
+                        { time: 1, value: 360, easing: 'Linear' }
+                    ]
+                }
+            ]
+        }
+    ],
+    stateMachine: {
+        inputs: [
+            { id: 'in1', name: 'isRotating', value: { type: 'Boolean', value: false } }
+        ],
+        layers: [
+            {
+                name: 'Base Layer',
+                entryStateId: 'state1',
+                states: [
+                    {
+                        id: 'state1',
+                        name: 'Idle',
+                        x: 0, y: 0,
+                        transitions: [
+                            {
+                                id: 't1',
+                                targetStateId: 'state2',
+                                duration: 0,
+                                conditions: [
+                                    { inputId: 'in1', op: ConditionOp.IsTrue }
+                                ]
+                            }
+                        ]
+                    },
+                    {
+                        id: 'state2',
+                        name: 'Rotating',
+                        x: 100, y: 0,
+                        animationId: 'anim1',
+                        transitions: [
+                             {
+                                id: 't2',
+                                targetStateId: 'state1',
+                                duration: 0,
+                                conditions: [
+                                    { inputId: 'in1', op: ConditionOp.IsFalse }
+                                ]
+                            }
+                        ]
+                    }
+                ]
+            }
+        ]
+    }
+};
+
+describe('ExodeUIEngine (React Native)', () => {
+    let engine: ExodeUIEngine;
+
+    beforeEach(() => {
+        engine = new ExodeUIEngine();
+        engine.load(mockArtboard);
+    });
+
+    it('should initialize with the entry state', () => {
+        expect(engine.getActiveStateIds()).toContain('state1');
+    });
+
+    it('should transition to state2 when input is set to true', () => {
+        engine.setInputBool('isRotating', true);
+        expect(engine.getActiveStateIds()).toContain('state2');
+    });
+
+    it('should transition back to state1 when input is set to false', () => {
+        engine.setInputBool('isRotating', true);
+        expect(engine.getActiveStateIds()).toContain('state2');
+        
+        engine.setInputBool('isRotating', false);
+        expect(engine.getActiveStateIds()).toContain('state1');
+    });
+
+    it('should apply animation correctly after time advancement', () => {
+        engine.setInputBool('isRotating', true); // Enter rotating state
+        
+        // Advance time by 0.5s (half of duration)
+        engine.advance(0.5);
+        
+        const state = engine.getObjectState('obj1');
+        // Rotation goes from 0 to 360 over 1s, so at 0.5s it should be 180
+        expect(state.rotation).toBe(180);
+        
+        // Advance to the end
+        engine.advance(0.5);
+        expect(engine.getObjectState('obj1').rotation).toBe(360);
+    });
+
+    it('should handle numeric inputs and conditions', () => {
+        const artboardWithNumber: Artboard = {
+            ...mockArtboard,
+            stateMachine: {
+                inputs: [
+                    { id: 'num1', name: 'powerLevel', value: { type: 'Number', value: 0 } }
+                ],
+                layers: [
+                    {
+                        name: 'Base Layer',
+                        entryStateId: 'state1',
+                        states: [
+                            {
+                                id: 'state1',
+                                name: 'Low',
+                                x: 0, y: 0,
+                                transitions: [
+                                    {
+                                        id: 't1',
+                                        targetStateId: 'state2',
+                                        duration: 0,
+                                        conditions: [
+                                            { inputId: 'num1', op: ConditionOp.GreaterThan, value: 50 }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                id: 'state2',
+                                name: 'High',
+                                x: 100, y: 0,
+                                transitions: []
+                            }
+                        ]
+                    }
+                ]
+            }
+        };
+
+        engine.load(artboardWithNumber);
+        expect(engine.getActiveStateIds()).toContain('state1');
+
+        engine.setInputNumber('powerLevel', 100);
+        expect(engine.getActiveStateIds()).toContain('state2');
+    });
+
+    it('should handle color interpolation', () => {
+        const artboardWithColor: Artboard = {
+            ...mockArtboard,
+            animations: [
+                {
+                    id: 'colorAnim',
+                    name: 'ColorChange',
+                    duration: 1,
+                    tracks: [
+                        {
+                            object_id: 'obj1',
+                            property: 'style.fill.color',
+                            keyframes: [
+                                { time: 0, value: '#ff0000', easing: 'Linear' },
+                                { time: 1, value: '#0000ff', easing: 'Linear' }
+                            ]
+                        }
+                    ]
+                }
+            ],
+            stateMachine: {
+                inputs: [
+                    { id: 'in1', name: 'animate', value: { type: 'Boolean', value: false } }
+                ],
+                layers: [
+                    {
+                        name: 'Base Layer',
+                        entryStateId: 'state1',
+                        states: [
+                            {
+                                id: 'state1',
+                                name: 'Idle',
+                                x: 0, y: 0,
+                                transitions: [
+                                    {
+                                        id: 't1',
+                                        targetStateId: 'state2',
+                                        duration: 0,
+                                        conditions: [
+                                            { inputId: 'in1', op: ConditionOp.IsTrue }
+                                        ]
+                                    }
+                                ]
+                            },
+                            {
+                                id: 'state2',
+                                name: 'Animating',
+                                x: 100, y: 0,
+                                animationId: 'colorAnim',
+                                transitions: []
+                            }
+                        ]
+                    }
+                ]
+            }
+        };
+
+        engine.load(artboardWithColor);
+        engine.setInputBool('animate', true);
+        
+        // At t=0, color should be red
+        const initialState = engine.getObjectState('obj1');
+        expect(initialState.style.fill.color).toBe('#ff0000');
+
+        // Advance to 0.5s (halfway)
+        engine.advance(0.5);
+        const halfwayState = engine.getObjectState('obj1');
+        // #ff0000 (255,0,0) -> #0000ff (0,0,255)
+        // Halfway is (128, 0, 128) -> #800080
+        expect(halfwayState.style.fill.color).toBe('#800080');
+    });
+});