@umituz/react-native-mascot 1.0.4 → 1.0.7

package/src/presentation/hooks/useMascotState.ts

@@ -0,0 +1,213 @@
+/**
+ * useMascotState Hook
+ * State-based mascot hook with auto-transitions (OPTIMIZED)
+ * Inspired by AIStylistMascot implementation
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import type { MascotAnimationState, MascotSize } from '../../domain/types/AnimationStateTypes';
+import { DEFAULT_SIZE_CONFIG } from '../../domain/types/AnimationStateTypes';
+import { AnimationStateManager } from '../../application/services/AnimationStateManager';
+import { AnimationState } from '../../domain/value-objects/AnimationState';
+
+export interface UseMascotStateOptions {
+  initialState?: MascotAnimationState;
+  size?: MascotSize;
+  enableAutoTransition?: boolean;
+  onStateChange?: (from: MascotAnimationState, to: MascotAnimationState) => void;
+  onAnimationComplete?: (state: MascotAnimationState) => void;
+}
+
+export interface UseMascotStateReturn {
+  // State
+  state: MascotAnimationState;
+  size: number;
+  isLooping: boolean;
+  duration: number;
+  speed: number;
+
+  // Actions
+  setState: (state: MascotAnimationState) => void;
+  triggerSuccess: () => void;
+  triggerError: () => void;
+  startLoading: () => void;
+  stopLoading: (success?: boolean) => void;
+  reset: () => void;
+
+  // State queries
+  isIdle: () => boolean;
+  isLoading: () => boolean;
+  isSuccess: () => boolean;
+  isError: () => boolean;
+}
+
+/**
+ * Get size in pixels from size variant (memoized)
+ */
+function getSizePixels(size: MascotSize): number {
+  if (typeof size === 'number') {
+    return size;
+  }
+  return DEFAULT_SIZE_CONFIG[size];
+}
+
+export function useMascotState(options: UseMascotStateOptions = {}): UseMascotStateReturn {
+  const {
+    initialState = 'idle',
+    size: sizeVariant = 'medium',
+    enableAutoTransition = true,
+    onStateChange,
+    onAnimationComplete,
+  } = options;
+
+  const [state, setState] = useState<MascotAnimationState>(initialState);
+
+  // Memoize size to avoid recalculation
+  const size = useMemo(() => getSizePixels(sizeVariant), [sizeVariant]);
+
+  // Memoize animation state to avoid unnecessary recreations
+  const animationState = useMemo(
+    () => AnimationState.create(state),
+    [state]
+  );
+
+  // Stable refs for callbacks to prevent unnecessary re-renders
+  const onStateChangeRef = useRef(onStateChange);
+  const onAnimationCompleteRef = useRef(onAnimationComplete);
+
+  // Update refs without causing re-renders
+  useEffect(() => {
+    onStateChangeRef.current = onStateChange;
+    onAnimationCompleteRef.current = onAnimationComplete;
+  });
+
+  const stateManagerRef = useRef<AnimationStateManager | null>(null);
+  const cleanupTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+  // Initialize state manager (only once)
+  useEffect(() => {
+    const manager = new AnimationStateManager(initialState, {
+      enableAutoTransition,
+      onStateChange: (from, to) => {
+        setState(to);
+        onStateChangeRef.current?.(from, to);
+      },
+    });
+
+    stateManagerRef.current = manager;
+
+    return () => {
+      // Clear any pending cleanup timeout
+      const cleanupTimeout = cleanupTimeoutRef.current;
+      if (cleanupTimeout) {
+        clearTimeout(cleanupTimeout);
+        cleanupTimeoutRef.current = null;
+      }
+      // Destroy state manager and clear all timers
+      manager.destroy();
+    };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  // Optimized animation completion handler with proper cleanup
+  useEffect(() => {
+    if (!animationState.shouldLoop()) {
+      const duration = animationState.getDuration();
+
+      const timeout = setTimeout(() => {
+        onAnimationCompleteRef.current?.(state);
+      }, duration);
+
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+    return undefined;
+  }, [state, animationState]);
+
+  // Memoized callbacks to prevent unnecessary re-renders
+  const setStateCallback = useCallback((newState: MascotAnimationState) => {
+    const manager = stateManagerRef.current;
+    if (!manager) {
+      setState(newState);
+      onStateChangeRef.current?.(state, newState);
+      return;
+    }
+
+    try {
+      manager.transitionTo(newState);
+    } catch (error) {
+      console.warn('Invalid state transition:', error);
+      setState(newState);
+      onStateChangeRef.current?.(state, newState);
+    }
+  }, [state]);
+
+  const triggerSuccess = useCallback(() => {
+    const manager = stateManagerRef.current;
+    if (manager) {
+      manager.triggerSuccess();
+    } else {
+      setStateCallback('success');
+    }
+  }, [setStateCallback]);
+
+  const triggerError = useCallback(() => {
+    const manager = stateManagerRef.current;
+    if (manager) {
+      manager.triggerError();
+    } else {
+      setStateCallback('error');
+    }
+  }, [setStateCallback]);
+
+  const startLoading = useCallback(() => {
+    const manager = stateManagerRef.current;
+    if (manager) {
+      manager.startLoading();
+    } else {
+      setStateCallback('loading');
+    }
+  }, [setStateCallback]);
+
+  const stopLoading = useCallback((success = true) => {
+    const manager = stateManagerRef.current;
+    if (manager) {
+      manager.stopLoading(success);
+    } else {
+      setStateCallback(success ? 'success' : 'error');
+    }
+  }, [setStateCallback]);
+
+  const reset = useCallback(() => {
+    const manager = stateManagerRef.current;
+    if (manager) {
+      manager.reset();
+    } else {
+      setStateCallback('idle');
+    }
+  }, [setStateCallback]);
+
+  const isIdle = useCallback(() => state === 'idle', [state]);
+  const isLoading = useCallback(() => state === 'loading', [state]);
+  const isSuccess = useCallback(() => state === 'success', [state]);
+  const isError = useCallback(() => state === 'error', [state]);
+
+  return {
+    state,
+    size,
+    isLooping: animationState.shouldLoop(),
+    duration: animationState.getDuration(),
+    speed: animationState.getSpeed(),
+    setState: setStateCallback,
+    triggerSuccess,
+    triggerError,
+    startLoading,
+    stopLoading,
+    reset,
+    isIdle,
+    isLoading,
+    isSuccess,
+    isError,
+  };
+}

package/src/presentation.ts

@@ -0,0 +1,37 @@
+/**
+ * Presentation Layer Exports (60 lines)
+ * Components, hooks, and contexts
+ */
+
+// Presentation - Components
+export { MascotView } from './presentation/components/MascotView';
+export type { MascotViewProps } from './presentation/components/MascotView';
+
+export { LottieMascot } from './presentation/components/LottieMascot';
+export type { LottieMascotProps } from './presentation/components/LottieMascot';
+
+export { SVGMascot } from './presentation/components/SVGMascot';
+export type { SVGMascotProps } from './presentation/components/SVGMascot';
+
+// Presentation - Hooks
+export { useMascot } from './presentation/hooks/useMascot';
+export type {
+  UseMascotOptions,
+  UseMascotReturn,
+} from './presentation/hooks/useMascot';
+
+export { useMascotAnimation } from './presentation/hooks/useMascotAnimation';
+export type {
+  UseMascotAnimationOptions,
+  UseMascotAnimationReturn,
+} from './presentation/hooks/useMascotAnimation';
+
+export { useMascotState } from './presentation/hooks/useMascotState';
+export type {
+  UseMascotStateOptions,
+  UseMascotStateReturn,
+} from './presentation/hooks/useMascotState';
+
+// Presentation - Contexts
+export { MascotProvider, useMascotContext } from './presentation/contexts/MascotContext';
+export type { MascotProviderProps, MascotContextValue } from './presentation/contexts/MascotContext';

package/src/types.d.ts

@@ -0,0 +1,4 @@
+declare module '*.json' {
+  const value: unknown;
+  export default value;
+}

package/src/application/index.ts

@@ -1,8 +0,0 @@
-/**
- * Application Layer
- * Exports all application layer components
- */
-
-export * from './errors/MascotErrors';
-export * from './dto/MascotDTO';
-export * from './services/MascotService';

package/src/domain/value-objects/index.ts

@@ -1,9 +0,0 @@
-/**
- * Value Objects
- * Encapsulate domain logic and validation
- */
-
-export { Mood } from './Mood';
-export { EnergyLevel } from './EnergyLevel';
-export { FriendlinessLevel } from './FriendlinessLevel';
-export { PlayfulnessLevel } from './PlayfulnessLevel';