@umituz/react-native-mascot 1.0.3 → 1.0.7

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

@@ -1,135 +1,52 @@
 /**
- * Mascot Context
- * Provides mascot state and functionality to components
+ * MascotContext
+ * Thin wrapper that provides MascotService to components
  */
 
-import React, { createContext, useContext, useState, useCallback, useRef } from 'react';
-import { Mascot } from '../../domain/entities/Mascot';
-import type { MascotConfig, MascotMood } from '../../domain/types/MascotTypes';
-import { MascotFactory } from '../../infrastructure/managers/MascotFactory';
-import { AnimationController } from '../../infrastructure/controllers/AnimationController';
-import type { AnimationOptions } from '../../domain/interfaces/IAnimationController';
+import React, { createContext, useContext, ReactNode } from 'react';
+import type { Mascot } from '../../domain/entities/Mascot';
+import type { MascotConfig } from '../../domain/types/MascotTypes';
+import type { MascotService, MascotTemplate } from '../../application/services/MascotService';
+import { DIContainer } from '../../infrastructure/di/Container';
 
 export interface MascotContextValue {
   mascot: Mascot | null;
   isPlaying: boolean;
   currentAnimation: string | null;
-  initializeMascot: (config: MascotConfig) => void;
-  initializeFromTemplate: (template: string, customizations?: Partial<MascotConfig>) => void;
-  setMood: (mood: MascotMood) => void;
-  playAnimation: (animationId: string, options?: AnimationOptions) => Promise<void>;
-  stopAnimation: () => void;
-  updateAppearance: (appearance: Partial<MascotConfig['appearance']>) => void;
-  setVisible: (visible: boolean) => void;
+  service: MascotService;
 }
 
 const MascotContext = createContext<MascotContextValue | undefined>(undefined);
 
-export interface MascotProviderProps extends React.PropsWithChildren {
+export interface MascotProviderProps {
+  children: ReactNode;
   initialConfig?: MascotConfig;
-  template?: string;
+  template?: MascotTemplate;
 }
 
 export const MascotProvider: React.FC<MascotProviderProps> = ({
   children,
-  initialConfig: _initialConfig,
-  template: _template,
-}) => {
-  const [mascot, setMascot] = useState<Mascot | null>(null);
-  const [isPlaying, setIsPlaying] = useState(false);
-  const [currentAnimation, setCurrentAnimation] = useState<string | null>(null);
-  const animationControllerRef = useRef<AnimationController | null>(null);
-
-  const initializeMascot = useCallback((config: MascotConfig) => {
-    const newMascot = new Mascot(config);
-    setMascot(newMascot);
-    if (!animationControllerRef.current) {
-      animationControllerRef.current = new AnimationController();
-    }
-  }, []);
-
-  const initializeFromTemplate = useCallback((
-    templateName: string,
-    customizations?: Partial<MascotConfig>
-  ) => {
-    const template = templateName as 'friendly-bot' | 'cute-pet' | 'wise-owl' | 'pixel-hero';
-    const newMascot = MascotFactory.createFromTemplate(template, customizations);
-    setMascot(newMascot);
-    if (!animationControllerRef.current) {
-      animationControllerRef.current = new AnimationController();
-    }
-  }, []);
-
-  const setMood = useCallback((mood: MascotMood) => {
-    setMascot((prev) => {
-      if (!prev) return null;
-      prev.setMood(mood);
-      return prev.clone();
-    });
-  }, []);
-
-  const playAnimation = useCallback(async (animationId: string, options?: AnimationOptions) => {
-    if (!mascot || !animationControllerRef.current) return;
-
-    const animation = mascot.getAnimation(animationId);
-    if (!animation) {
-      console.warn(`Animation ${animationId} not found`);
-      return;
-    }
-
-    setIsPlaying(true);
-    setCurrentAnimation(animationId);
-
-    if (animationControllerRef.current) {
-      await animationControllerRef.current.play(animation, options);
-    }
-
-    setIsPlaying(false);
-    setCurrentAnimation(null);
-  }, [mascot]);
-
-  const stopAnimation = useCallback(() => {
-    if (animationControllerRef.current) {
-      animationControllerRef.current.stop();
-    }
-    setIsPlaying(false);
-    setCurrentAnimation(null);
-  }, []);
-
-  const updateAppearance = useCallback((appearance: Partial<MascotConfig['appearance']>) => {
-    setMascot((prev) => {
-      if (!prev) return null;
-      prev.updateAppearance(appearance);
-      return prev.clone();
-    });
-  }, []);
-
-  const setVisible = useCallback((visible: boolean) => {
-    setMascot((prev) => {
-      if (!prev) return null;
-      prev.setVisible(visible);
-      return prev.clone();
-    });
-  }, []);
+  initialConfig,
+  template,
+}: MascotProviderProps) => {
+  const container = DIContainer.getInstance();
+  const service = container.getMascotService();
+
+  // Auto-initialize if config or template provided
+  if (initialConfig) {
+    service.initialize(initialConfig);
+  } else if (template) {
+    service.fromTemplate(template);
+  }
 
   const value: MascotContextValue = {
-    mascot,
-    isPlaying,
-    currentAnimation,
-    initializeMascot,
-    initializeFromTemplate,
-    setMood,
-    playAnimation,
-    stopAnimation,
-    updateAppearance,
-    setVisible,
+    mascot: service.mascot,
+    isPlaying: service.isPlaying,
+    currentAnimation: service.currentAnimation,
+    service,
   };
 
-  return (
-    <MascotContext.Provider value={value}>
-      {children}
-    </MascotContext.Provider>
-  );
+  return <MascotContext.Provider value={value}>{children}</MascotContext.Provider>;
 };
 
 export const useMascotContext = (): MascotContextValue => {