@umituz/react-native-mascot 1.0.4 → 1.0.8

package/src/presentation/components/MascotView.tsx

@@ -1,17 +1,14 @@
 /**
- * MascotView Component
- * Main component for rendering mascots
+ * MascotView Component (OPTIMIZED - 100 lines)
+ * Main container with memoization
  */
 
-import React, { useRef, useEffect, useState } from 'react';
-import { View, StyleSheet, Animated, TouchableOpacity, ViewStyle } from 'react-native';
-import LottieView from 'lottie-react-native';
-import type { AnimationObject } from 'lottie-react-native';
-import { Svg } from 'react-native-svg';
+import React, { memo, useMemo, useEffect, useCallback } from 'react';
+import { StyleSheet, Animated, TouchableOpacity, ViewStyle } from 'react-native';
 import type { Mascot } from '../../domain/entities/Mascot';
 import type { MascotAnimation } from '../../domain/types/MascotTypes';
-
-type LottieAnimationSource = string | AnimationObject | { uri: string };
+import { LottieMascot } from './LottieMascot';
+import { SVGMascot } from './SVGMascot';
 
 export interface MascotViewProps {
   mascot: Mascot | null;
@@ -25,7 +22,17 @@ export interface MascotViewProps {
   resizeMode?: 'cover' | 'contain' | 'center';
 }
 
-export const MascotView: React.FC<MascotViewProps> = ({
+function arePropsEqual(prevProps: MascotViewProps, nextProps: MascotViewProps): boolean {
+  return (
+    prevProps.mascot === nextProps.mascot &&
+    prevProps.animation === nextProps.animation &&
+    prevProps.size === nextProps.size &&
+    prevProps.onPress === nextProps.onPress &&
+    prevProps.onLongPress === nextProps.onLongPress
+  );
+}
+
+const MascotViewComponent: React.FC<MascotViewProps> = ({
   mascot,
   animation,
   size = 200,
@@ -36,65 +43,39 @@ export const MascotView: React.FC<MascotViewProps> = ({
   onAnimationFinish,
   resizeMode = 'contain',
 }) => {
-  const [opacity] = useState(new Animated.Value(0));
-  const [scale] = useState(new Animated.Value(0));
+  // Create animated values once
+  const animatedValues = useMemo(
+    () => ({
+      opacity: new Animated.Value(0),
+      scale: new Animated.Value(0),
+    }),
+    []
+  );
+
+  const { opacity, scale } = animatedValues;
 
+  // Animation
   useEffect(() => {
     if (mascot?.state.isVisible) {
       Animated.parallel([
-        Animated.timing(opacity, {
-          toValue: 1,
-          duration: 300,
-          useNativeDriver: true,
-        }),
-        Animated.spring(scale, {
-          toValue: 1,
-          friction: 8,
-          tension: 40,
-          useNativeDriver: true,
-        }),
+        Animated.timing(opacity, { toValue: 1, duration: 300, useNativeDriver: true }),
+        Animated.spring(scale, { toValue: 1, friction: 8, tension: 40, useNativeDriver: true }),
       ]).start();
     } else {
-      Animated.timing(opacity, {
-        toValue: 0,
-        duration: 200,
-        useNativeDriver: true,
-      }).start();
+      Animated.timing(opacity, { toValue: 0, duration: 200, useNativeDriver: true }).start();
     }
   }, [mascot?.state.isVisible, opacity, scale]);
 
-  const handlePress = () => {
-    if (mascot?.touchEnabled && onPress) {
-      onPress();
-    }
-  };
-
-  const handleLongPress = () => {
-    if (mascot?.touchEnabled && onLongPress) {
-      onLongPress();
-    }
-  };
-
-  if (!mascot || !mascot.state.isVisible) {
-    return null;
-  }
+  // Memoized styles and handlers
+  const animatedStyle = useMemo(() => ({ opacity, transform: [{ scale }] }), [opacity, scale]);
+  const containerStyle = useMemo(() => [styles.container, { width: size, height: size }, style], [size, style]);
+  const handlePress = useCallback(() => mascot?.touchEnabled && onPress?.(), [mascot?.touchEnabled, onPress]);
+  const handleLongPress = useCallback(() => mascot?.touchEnabled && onLongPress?.(), [mascot?.touchEnabled, onLongPress]);
 
-  const animatedStyle = {
-    opacity,
-    transform: [{ scale }],
-  };
-
-  const containerStyle = [
-    styles.container,
-    { width: size, height: size },
-    style,
-  ];
+  if (!mascot || !mascot.state.isVisible) return null;
 
   return (
-    <Animated.View
-      style={animatedStyle}
-      testID={testID}
-    >
+    <Animated.View style={animatedStyle} testID={testID}>
       <TouchableOpacity
         style={containerStyle}
         onPress={handlePress}
@@ -103,194 +84,22 @@ export const MascotView: React.FC<MascotViewProps> = ({
         activeOpacity={0.8}
       >
         {mascot.type === 'lottie' ? (
-          <LottieMascot
-            mascot={mascot}
-            animation={animation}
-            resizeMode={resizeMode}
-            onAnimationFinish={onAnimationFinish}
-          />
+          <LottieMascot mascot={mascot} animation={animation} resizeMode={resizeMode} onAnimationFinish={onAnimationFinish} />
         ) : (
-          <SVGMascot
-            mascot={mascot}
-            size={size}
-          />
+          <SVGMascot mascot={mascot} size={size} />
         )}
       </TouchableOpacity>
     </Animated.View>
   );
 };
 
-// Lottie Mascot Component
-interface LottieMascotProps {
-  mascot: Mascot;
-  animation?: MascotAnimation | null;
-  resizeMode?: 'cover' | 'contain' | 'center';
-  onAnimationFinish?: () => void;
-}
+MascotViewComponent.displayName = 'MascotView';
 
-const LottieMascot: React.FC<LottieMascotProps> = ({
-  mascot,
-  animation,
-  resizeMode = 'contain',
-  onAnimationFinish,
-}) => {
-  const lottieRef = useRef<LottieView>(null);
-
-  useEffect(() => {
-    if (animation && lottieRef.current) {
-      lottieRef.current.play();
-    }
-  }, [animation]);
-
-  const source = animation?.source || mascot.animations.find((a) => a.type === 'idle')?.source;
-
-  if (!source) {
-    return <FallbackMascot mascot={mascot} />;
-  }
-
-  return (
-    <LottieView
-      ref={lottieRef}
-      source={source as LottieAnimationSource}
-      style={styles.lottie}
-      resizeMode={resizeMode}
-      autoPlay={animation?.autoplay}
-      loop={animation?.loop}
-      onAnimationFinish={onAnimationFinish}
-    />
-  );
-};
-
-// SVG Mascot Component
-interface SVGMascotProps {
-  mascot: Mascot;
-  size: number;
-}
-
-const SVGMascot: React.FC<SVGMascotProps> = ({ mascot, size }) => {
-  const { appearance } = mascot;
-
-  return (
-    <Svg width={size} height={size} viewBox="0 0 100 100">
-      {/* Base shape */}
-      <circle
-        cx="50"
-        cy="50"
-        r="40"
-        fill={appearance.baseColor}
-      />
-      {/* Accent */}
-      <circle
-        cx="50"
-        cy="50"
-        r="35"
-        fill={appearance.accentColor}
-        opacity="0.3"
-      />
-      {/* Face */}
-      <circle cx="35" cy="40" r="5" fill="#000" />
-      <circle cx="65" cy="40" r="5" fill="#000" />
-      {/* Mouth based on mood */}
-      <MoodMood mood={mascot.personality.mood} />
-    </Svg>
-  );
-};
-
-// Mood-based mouth
-interface MoodMoodProps {
-  mood: string;
-}
-
-const MoodMood: React.FC<MoodMoodProps> = ({ mood }) => {
-  switch (mood) {
-    case 'happy':
-    case 'excited':
-      return (
-        <path
-          d="M 35 60 Q 50 75 65 60"
-          stroke="#000"
-          strokeWidth="3"
-          fill="none"
-        />
-      );
-    case 'sad':
-    case 'angry':
-      return (
-        <path
-          d="M 35 70 Q 50 55 65 70"
-          stroke="#000"
-          strokeWidth="3"
-          fill="none"
-        />
-      );
-    case 'surprised':
-      return (
-        <circle
-          cx="50"
-          cy="65"
-          r="8"
-          fill="#000"
-        />
-      );
-    case 'thinking':
-      return (
-        <path
-          d="M 40 65 L 60 65"
-          stroke="#000"
-          strokeWidth="3"
-          fill="none"
-        />
-      );
-    default:
-      return (
-        <path
-          d="M 40 65 L 60 65"
-          stroke="#000"
-          strokeWidth="3"
-          fill="none"
-        />
-      );
-  }
-};
-
-// Fallback Mascot
-interface FallbackMascotProps {
-  mascot: Mascot;
-}
-
-const FallbackMascot: React.FC<FallbackMascotProps> = ({ mascot }) => {
-  const { appearance } = mascot;
-
-  return (
-    <View style={[styles.fallback, { backgroundColor: appearance.baseColor }]}>
-      <View style={[styles.eye, { left: '30%' }]} />
-      <View style={[styles.eye, { right: '30%' }]} />
-    </View>
-  );
-};
+export const MascotView = memo(MascotViewComponent, arePropsEqual);
 
 const styles = StyleSheet.create({
   container: {
     justifyContent: 'center',
     alignItems: 'center',
   },
-  lottie: {
-    width: '100%',
-    height: '100%',
-  },
-  fallback: {
-    width: '100%',
-    height: '100%',
-    borderRadius: 100,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  eye: {
-    position: 'absolute',
-    width: 10,
-    height: 10,
-    backgroundColor: '#000',
-    borderRadius: 5,
-    top: '40%',
-  },
 });

package/src/presentation/components/SVGMascot.tsx

@@ -0,0 +1,61 @@
+/**
+ * SVG Mascot Component (70 lines)
+ * SVG-specific rendering with mood-based expressions
+ */
+
+import React, { memo } from 'react';
+import { Svg } from 'react-native-svg';
+import type { Mascot } from '../../domain/entities/Mascot';
+
+export interface SVGMascotProps {
+  mascot: Mascot;
+  size: number;
+}
+
+const SVGMascotComponent = memo<SVGMascotProps>(({ mascot, size }) => {
+  const { appearance } = mascot;
+
+  return (
+    <Svg width={size} height={size} viewBox="0 0 100 100">
+      {/* Base */}
+      <circle cx="50" cy="50" r="40" fill={appearance.baseColor} />
+      {/* Accent */}
+      <circle cx="50" cy="50" r="35" fill={appearance.accentColor} opacity="0.3" />
+      {/* Eyes */}
+      <circle cx="35" cy="40" r="5" fill="#000" />
+      <circle cx="65" cy="40" r="5" fill="#000" />
+      {/* Mouth based on mood */}
+      <MoodMood mood={mascot.personality.mood} />
+    </Svg>
+  );
+});
+
+SVGMascotComponent.displayName = 'SVGMascot';
+
+export const SVGMascot = SVGMascotComponent;
+
+// Mood-based mouth component
+interface MoodMoodProps {
+  mood: string;
+}
+
+const MoodMoodComponent = memo<MoodMoodProps>(({ mood }) => {
+  switch (mood) {
+    case 'happy':
+    case 'excited':
+      return <path d="M 35 60 Q 50 75 65 60" stroke="#000" strokeWidth="3" fill="none" />;
+    case 'sad':
+    case 'angry':
+      return <path d="M 35 70 Q 50 55 65 70" stroke="#000" strokeWidth="3" fill="none" />;
+    case 'surprised':
+      return <circle cx="50" cy="65" r="8" fill="#000" />;
+    case 'thinking':
+      return <path d="M 40 65 L 60 65" stroke="#000" strokeWidth="3" fill="none" />;
+    default:
+      return <path d="M 40 65 L 60 65" stroke="#000" strokeWidth="3" fill="none" />;
+  }
+});
+
+MoodMoodComponent.displayName = 'MoodMood';
+
+const MoodMood = memo(MoodMoodComponent);

package/src/presentation/contexts/MascotContext.tsx

@@ -5,8 +5,7 @@
 
 import React, { createContext, useContext, ReactNode } from 'react';
 import type { Mascot } from '../../domain/entities/Mascot';
-import type { MascotConfig, MascotMood } from '../../domain/types/MascotTypes';
-import type { AnimationOptions } from '../../domain/interfaces/IAnimationController';
+import type { MascotConfig } from '../../domain/types/MascotTypes';
 import type { MascotService, MascotTemplate } from '../../application/services/MascotService';
 import { DIContainer } from '../../infrastructure/di/Container';
 
@@ -29,7 +28,7 @@ export const MascotProvider: React.FC<MascotProviderProps> = ({
   children,
   initialConfig,
   template,
-}) => {
+}: MascotProviderProps) => {
   const container = DIContainer.getInstance();
   const service = container.getMascotService();
 

package/src/presentation/hooks/useMascot.ts

@@ -64,27 +64,32 @@ export function useMascot(options: UseMascotOptions = {}): UseMascotReturn {
 
   const serviceRef = useRef<MascotService | null>(null);
 
-  // ✅ Initialize service once
-  if (!serviceRef.current) {
-    const container = DIContainer.getInstance();
-    serviceRef.current = container.getMascotService();
+  // ✅ Initialize service once and subscribe to changes
+  useEffect(() => {
+    if (serviceRef.current == null) {
+      const container = DIContainer.getInstance();
+      const service = container.getMascotService();
+      serviceRef.current = service;
 
-    // Subscribe to service changes
-    serviceRef.current.subscribe(() => {
-      const service = serviceRef.current!;
-      setState({
-        mascot: service.mascot,
-        isReady: service.isReady,
-        isPlaying: service.isPlaying,
-        currentAnimation: service.currentAnimation,
+      // Subscribe to service changes
+      const unsubscribe = service.subscribe(() => {
+        setState({
+          mascot: service.mascot,
+          isReady: service.isReady,
+          isPlaying: service.isPlaying,
+          currentAnimation: service.currentAnimation,
+        });
       });
-    });
-  }
 
-  const service = serviceRef.current;
+      return unsubscribe;
+    }
+    return undefined;
+  }, []);
 
   // ✅ Auto-initialize
   useEffect(() => {
+    const service = serviceRef.current;
+    if (!service) return;
     if (autoInitialize && initialConfig) {
       service.initialize(initialConfig);
     } else if (autoInitialize && initialTemplate) {
@@ -95,35 +100,109 @@ export function useMascot(options: UseMascotOptions = {}): UseMascotReturn {
   // ✅ All methods delegate to service - NO business logic!
   return {
     ...state,
-    initialize: useCallback((config: MascotConfig) => service.initialize(config), [service]),
+    initialize: useCallback((config: MascotConfig) => {
+      const service = serviceRef.current;
+      if (!service) throw new Error('Service not initialized');
+      return service.initialize(config);
+    }, []),
     fromTemplate: useCallback(
-      (template: MascotTemplate, customizations?: Partial<MascotConfig>) =>
-        service.fromTemplate(template, customizations),
-      [service]
+      (template: MascotTemplate, customizations?: Partial<MascotConfig>) => {
+        const service = serviceRef.current;
+        if (!service) throw new Error('Service not initialized');
+        return service.fromTemplate(template, customizations);
+      },
+      []
     ),
-    setMood: useCallback((mood: MascotMood) => service.setMood(mood), [service]),
-    setEnergy: useCallback((energy: number) => service.setEnergy(energy), [service]),
-    setFriendliness: useCallback((friendliness: number) => service.setFriendliness(friendliness), [service]),
-    setPlayfulness: useCallback((playfulness: number) => service.setPlayfulness(playfulness), [service]),
-    cheerUp: useCallback(() => service.cheerUp(), [service]),
-    boostEnergy: useCallback((amount: number) => service.boostEnergy(amount), [service]),
+    setMood: useCallback((mood: MascotMood) => {
+      const service = serviceRef.current;
+      if (!service) throw new Error('Service not initialized');
+      service.setMood(mood);
+    }, []),
+    setEnergy: useCallback((energy: number) => {
+      const service = serviceRef.current;
+      if (!service) throw new Error('Service not initialized');
+      service.setEnergy(energy);
+    }, []),
+    setFriendliness: useCallback((friendliness: number) => {
+      const service = serviceRef.current;
+      if (!service) throw new Error('Service not initialized');
+      service.setFriendliness(friendliness);
+    }, []),
+    setPlayfulness: useCallback((playfulness: number) => {
+      const service = serviceRef.current;
+      if (!service) throw new Error('Service not initialized');
+      service.setPlayfulness(playfulness);
+    }, []),
+    cheerUp: useCallback(() => {
+      const service = serviceRef.current;
+      if (!service) throw new Error('Service not initialized');
+      service.cheerUp();
+    }, []),
+    boostEnergy: useCallback((amount: number) => {
+      const service = serviceRef.current;
+      if (!service) throw new Error('Service not initialized');
+      service.boostEnergy(amount);
+    }, []),
     playAnimation: useCallback(
-      (animationId: string, opts?: AnimationOptions) => service.playAnimation(animationId, opts),
-      [service]
+      (animationId: string, opts?: AnimationOptions) => {
+        const service = serviceRef.current;
+        if (!service) throw new Error('Service not initialized');
+        return service.playAnimation(animationId, opts);
+      },
+      []
     ),
-    stopAnimation: useCallback(() => service.stopAnimation(), [service]),
-    pauseAnimation: useCallback(() => service.pauseAnimation(), [service]),
-    resumeAnimation: useCallback(() => service.resumeAnimation(), [service]),
-    updateAppearance: useCallback((appearance: Partial<MascotAppearance>) => service.updateAppearance(appearance), [service]),
-    setBaseColor: useCallback((color: string) => service.setBaseColor(color), [service]),
-    setAccentColor: useCallback((color: string) => service.setAccentColor(color), [service]),
+    stopAnimation: useCallback(() => {
+      const service = serviceRef.current;
+      if (!service) throw new Error('Service not initialized');
+      service.stopAnimation();
+    }, []),
+    pauseAnimation: useCallback(() => {
+      const service = serviceRef.current;
+      if (!service) throw new Error('Service not initialized');
+      service.pauseAnimation();
+    }, []),
+    resumeAnimation: useCallback(() => {
+      const service = serviceRef.current;
+      if (!service) throw new Error('Service not initialized');
+      service.resumeAnimation();
+    }, []),
+    updateAppearance: useCallback((appearance: Partial<MascotAppearance>) => {
+      const service = serviceRef.current;
+      if (!service) throw new Error('Service not initialized');
+      service.updateAppearance(appearance);
+    }, []),
+    setBaseColor: useCallback((color: string) => {
+      const service = serviceRef.current;
+      if (!service) throw new Error('Service not initialized');
+      service.setBaseColor(color);
+    }, []),
+    setAccentColor: useCallback((color: string) => {
+      const service = serviceRef.current;
+      if (!service) throw new Error('Service not initialized');
+      service.setAccentColor(color);
+    }, []),
     addAccessory: useCallback(
-      (accessory: { id: string; type: string; color?: string; position?: { x: number; y: number } }) =>
-        service.addAccessory(accessory),
-      [service]
+      (accessory: { id: string; type: string; color?: string; position?: { x: number; y: number } }) => {
+        const service = serviceRef.current;
+        if (!service) throw new Error('Service not initialized');
+        service.addAccessory(accessory);
+      },
+      []
     ),
-    removeAccessory: useCallback((accessoryId: string) => service.removeAccessory(accessoryId), [service]),
-    setVisible: useCallback((visible: boolean) => service.setVisible(visible), [service]),
-    setPosition: useCallback((position: { x: number; y: number }) => service.setPosition(position), [service]),
+    removeAccessory: useCallback((accessoryId: string) => {
+      const service = serviceRef.current;
+      if (!service) throw new Error('Service not initialized');
+      service.removeAccessory(accessoryId);
+    }, []),
+    setVisible: useCallback((visible: boolean) => {
+      const service = serviceRef.current;
+      if (!service) throw new Error('Service not initialized');
+      service.setVisible(visible);
+    }, []),
+    setPosition: useCallback((position: { x: number; y: number }) => {
+      const service = serviceRef.current;
+      if (!service) throw new Error('Service not initialized');
+      service.setPosition(position);
+    }, []),
   };
 }

package/src/presentation/hooks/useMascotAnimation.ts

@@ -4,15 +4,10 @@
  */
 
 import { useCallback, useState } from 'react';
-import type { Mascot } from '../../domain/entities/Mascot';
 import type { AnimationSpeed, AnimationOptions } from '../../domain/types/MascotTypes';
-import type { MascotService } from '../../application/services/MascotService';
 import { DIContainer } from '../../infrastructure/di/Container';
 
 export interface UseMascotAnimationOptions {
-  mascot?: Mascot | null;
-  autoplay?: boolean;
-  queue?: boolean;
   speed?: AnimationSpeed;
 }
 
@@ -44,7 +39,7 @@ const SPEED_MULTIPLIERS: Record<AnimationSpeed, number> = {
 export function useMascotAnimation(
   options: UseMascotAnimationOptions = {}
 ): UseMascotAnimationReturn {
-  const { mascot, speed = 'normal' } = options;
+  const { speed = 'normal' } = options;
   const [queue, setQueue] = useState<string[]>([]);
 
   const container = DIContainer.getInstance();
@@ -74,18 +69,17 @@ export function useMascotAnimation(
     service.stopAnimation();
   }, [service]);
 
-  const setSpeed = useCallback(() => {
-    // Speed is handled via options in play()
-    console.warn('setSpeed: Use play() with speed option instead');
+  const setSpeed = useCallback((_speed: number) => {
+    // Speed is handled via options in play() - this method is kept for API compatibility
+    // but does nothing as speed should be passed to play() directly
   }, []);
 
-  const setProgress = useCallback(() => {
-    // Progress tracking would need AnimationController reference
-    console.warn('setProgress: Not implemented in service layer yet');
+  const setProgress = useCallback((_progress: number) => {
+    // Progress tracking not yet implemented - would need AnimationController reference
   }, []);
 
   const queueAnimation = useCallback((animationId: string) => {
-    setQueue((prev) => [...prev, animationId]);
+    setQueue((prev: string[]) => [...prev, animationId]);
   }, []);
 
   const clearQueue = useCallback(() => {
@@ -104,10 +98,10 @@ export function useMascotAnimation(
   const processQueue = useCallback(async () => {
     while (queue.length > 0) {
       const nextAnimation = queue[0];
-      setQueue((prev) => prev.slice(1));
+      setQueue((prev: string[]) => prev.slice(1));
       await play(nextAnimation);
     }
-  }, [queue, play]);
+  }, [play, queue]);
 
   return {
     isPlaying: service.isPlaying,