@umituz/react-native-design-system 2.3.14 → 2.3.16

package/src/molecules/animation/presentation/hooks/useTransformAnimation.ts

@@ -0,0 +1,57 @@
+/**
+ * useTransformAnimation Hook
+ *
+ * Hook for transform-based animations (spin, pulse, shake).
+ * Single Responsibility: Handle transform animations only.
+ */
+
+import { useCallback } from 'react';
+import {
+    useSharedValue,
+    withTiming,
+    withSequence,
+    withRepeat,
+    Easing,
+} from 'react-native-reanimated';
+
+/**
+ * Hook for transform-based animations
+ */
+export const useTransformAnimation = () => {
+    const translateX = useSharedValue(0);
+    const scale = useSharedValue(1);
+    const rotate = useSharedValue(0);
+
+    const shake = useCallback(() => {
+        translateX.value = withSequence(
+            withTiming(-10, { duration: 50 }),
+            withRepeat(withTiming(10, { duration: 50 }), 4, true),
+            withTiming(0, { duration: 50 })
+        );
+    }, [translateX]);
+
+    const pulse = useCallback((repeatCount = -1) => {
+        scale.value = withRepeat(
+            withSequence(withTiming(1.1, { duration: 500 }), withTiming(1, { duration: 500 })),
+            repeatCount,
+            false
+        );
+    }, [scale]);
+
+    const spin = useCallback((repeatCount = -1) => {
+        rotate.value = withRepeat(
+            withTiming(360, { duration: 1000, easing: Easing.linear }),
+            repeatCount,
+            false
+        );
+    }, [rotate]);
+
+    return {
+        shake,
+        pulse,
+        spin,
+        translateX,
+        scale,
+        rotate,
+    };
+};

package/src/molecules/animation/presentation/providers/AnimationThemeProvider.tsx

@@ -0,0 +1,62 @@
+/**
+ * Theme Provider for Animation Package
+ *
+ * React context provider for theme management.
+ * Allows consumers to customize animation appearance.
+ */
+
+import React, { createContext, useContext, useState, ReactNode } from 'react';
+import type { AnimationTheme, ThemeContext } from '../../domain/entities/Theme';
+import { DEFAULT_ANIMATION_THEME } from '../../domain/entities/Theme';
+
+const ThemeContext = createContext<ThemeContext | undefined>(undefined);
+
+export interface AnimationThemeProviderProps {
+  children: ReactNode;
+  theme?: Partial<AnimationTheme>;
+}
+
+/**
+ * Theme provider component
+ */
+export const AnimationThemeProvider: React.FC<AnimationThemeProviderProps> = ({
+  children,
+  theme: initialTheme,
+}) => {
+  const [theme, setTheme] = useState<AnimationTheme>(() => ({
+    ...DEFAULT_ANIMATION_THEME,
+    ...initialTheme,
+  }));
+
+  const updateTheme = (newTheme: Partial<AnimationTheme>) => {
+    setTheme(prev => ({ ...prev, ...newTheme }));
+  };
+
+  const contextValue: ThemeContext = {
+    theme,
+    setTheme: updateTheme,
+  };
+
+  return (
+    <ThemeContext.Provider value={contextValue}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+/**
+ * Hook to use theme
+ */
+export const useAnimationTheme = (): ThemeContext => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    if (__DEV__) {
+      console.warn('useAnimationTheme must be used within AnimationThemeProvider');
+    }
+    return {
+      theme: DEFAULT_ANIMATION_THEME,
+      setTheme: () => {},
+    };
+  }
+  return context;
+};

package/src/molecules/animation/presentation/providers/__tests__/AnimationThemeProvider.test.tsx

@@ -0,0 +1,165 @@
+/**
+ * AnimationThemeProvider Tests
+ *
+ * Unit tests for theme system functionality.
+ */
+
+import React from 'react';
+import { render, screen } from '@testing-library/react-native';
+import { AnimationThemeProvider, useAnimationTheme } from '../AnimationThemeProvider';
+import { DEFAULT_ANIMATION_THEME } from '../../../domain/entities/AnimationTheme';
+
+// Mock console.warn
+const originalWarn = console.warn;
+beforeEach(() => {
+  console.warn = jest.fn();
+});
+
+afterEach(() => {
+  console.warn = originalWarn;
+});
+
+describe('AnimationThemeProvider', () => {
+  it('should render children', () => {
+    const TestComponent = () => <div>Test Child</div>;
+    
+    render(
+      <AnimationThemeProvider>
+        <TestComponent />
+      </AnimationThemeProvider>
+    );
+
+    expect(screen.getByText('Test Child')).toBeTruthy();
+  });
+
+  it('should provide default theme when no custom theme provided', () => {
+    const TestComponent = () => {
+      const { theme } = useAnimationTheme();
+      return <div>{theme.colors.primary}</div>;
+    };
+
+    render(
+      <AnimationThemeProvider>
+        <TestComponent />
+      </AnimationThemeProvider>
+    );
+
+    expect(screen.getByText(DEFAULT_ANIMATION_THEME.colors.primary)).toBeTruthy();
+  });
+
+  it('should merge custom theme with default theme', () => {
+    const customTheme = {
+      colors: {
+        primary: '#custom-color',
+      },
+    };
+
+    const TestComponent = () => {
+      const { theme } = useAnimationTheme();
+      return <div>{theme.colors.primary}</div>;
+    };
+
+    render(
+      <AnimationThemeProvider theme={customTheme}>
+        <TestComponent />
+      </AnimationThemeProvider>
+    );
+
+    expect(screen.getByText('#custom-color')).toBeTruthy();
+  });
+
+  it('should preserve default values for non-overridden properties', () => {
+    const customTheme = {
+      colors: {
+        primary: '#custom-color',
+      },
+    };
+
+    const TestComponent = () => {
+      const { theme } = useAnimationTheme();
+      return <div>{theme.colors.secondary}</div>;
+    };
+
+    render(
+      <AnimationThemeProvider theme={customTheme}>
+        <TestComponent />
+      </AnimationThemeProvider>
+    );
+
+    expect(screen.getByText(DEFAULT_ANIMATION_THEME.colors.secondary)).toBeTruthy();
+  });
+
+  it('should allow theme updates', () => {
+    const TestComponent = () => {
+      const { theme, setTheme } = useAnimationTheme();
+      
+      React.useEffect(() => {
+        setTheme({ colors: { primary: '#updated-color' } });
+      }, [setTheme]);
+
+      return <div>{theme.colors.primary}</div>;
+    };
+
+    render(
+      <AnimationThemeProvider>
+        <TestComponent />
+      </AnimationThemeProvider>
+    );
+
+    expect(screen.getByText('#updated-color')).toBeTruthy();
+  });
+});
+
+describe('useAnimationTheme', () => {
+  it('should return theme and setTheme', () => {
+    const TestComponent = () => {
+      const { theme, setTheme } = useAnimationTheme();
+      
+      return (
+        <div>
+          <div testID="theme">{JSON.stringify(theme)}</div>
+          <div testID="set-theme">{typeof setTheme}</div>
+        </div>
+      );
+    };
+
+    render(
+      <AnimationThemeProvider>
+        <TestComponent />
+      </AnimationThemeProvider>
+    );
+
+    expect(screen.getByTestId('set-theme')).toHaveTextContent('function');
+    
+    const themeElement = screen.getByTestId('theme');
+    const theme = JSON.parse(themeElement.props.children);
+    expect(theme).toHaveProperty('colors');
+    expect(theme).toHaveProperty('spacing');
+    expect(theme).toHaveProperty('borderRadius');
+    expect(theme).toHaveProperty('opacity');
+  });
+
+  it('should warn when used outside provider', () => {
+    const TestComponent = () => {
+      const { theme } = useAnimationTheme();
+      return <div>{theme.colors.primary}</div>;
+    };
+
+    render(<TestComponent />);
+
+    expect(console.warn).toHaveBeenCalledWith(
+      'useAnimationTheme must be used within AnimationThemeProvider'
+    );
+  });
+
+  it('should return default theme when used outside provider', () => {
+    const TestComponent = () => {
+      const { theme } = useAnimationTheme();
+      return <div>{theme.colors.primary}</div>;
+    };
+
+    render(<TestComponent />);
+
+    expect(screen.getByText(DEFAULT_ANIMATION_THEME.colors.primary)).toBeTruthy();
+  });
+});

package/src/molecules/animation/types/global.d.ts

@@ -0,0 +1,97 @@
+/// <reference types="react" />
+/// <reference types="react-native" />
+
+declare module 'react-native-reanimated' {
+  import React from 'react';
+  import { ViewProps, ViewStyle } from 'react-native';
+
+  export interface WithTimingConfig {
+    duration?: number;
+    easing?: (value: number) => number;
+  }
+
+  export interface WithSpringConfig {
+    damping?: number;
+    stiffness?: number;
+    mass?: number;
+    overshootClamping?: boolean;
+    restDisplacementThreshold?: number;
+    restSpeedThreshold?: number;
+  }
+
+  export interface SharedValue<T> {
+    value: T;
+  }
+
+  export const Animated: {
+    View: React.ComponentType<any>;
+    Text: React.ComponentType<any>;
+    Image: React.ComponentType<any>;
+    ScrollView: React.ComponentType<any>;
+  };
+
+  export function useSharedValue<T>(initialValue: T): SharedValue<T>;
+  export function useAnimatedStyle<T>(styleFactory: () => T): T;
+  export function withTiming(toValue: any, config?: WithTimingConfig): any;
+  export function withSpring(toValue: any, config?: WithSpringConfig): any;
+  export function withSequence(...animations: any[]): any;
+  export function withRepeat(animation: any, count?: number, reverse?: boolean): any;
+  export function runOnUI<T>(fn: () => T): () => T;
+  export function runOnJS<T extends (...args: any[]) => any>(fn: T): T;
+  export function cancelAnimation(sharedValue: SharedValue<any>): void;
+  
+  export const Easing: {
+    linear: (t: number) => number;
+    ease: (t: number) => number;
+    easeIn: (t: number) => number;
+    easeOut: (t: number) => number;
+    easeInOut: (t: number) => number;
+    step0: (t: number) => number;
+    step1: (t: number) => number;
+    bezier: (x1: number, y1: number, x2: number, y2: number) => (t: number) => number;
+    cubic: (x1: number, y1: number, x2: number, y2: number) => (t: number) => number;
+    in: (easing: (t: number) => number) => (t: number) => number;
+    out: (easing: (t: number) => number) => (t: number) => number;
+    inOut: (easing: (t: number) => number) => (t: number) => number;
+  };
+}
+
+declare module 'react-native-gesture-handler' {
+  import React from 'react';
+  import { ViewStyle } from 'react-native';
+
+  export interface PanGestureHandlerProps {
+    onGestureEvent?: (event: any) => void;
+    onHandlerStateChange?: (event: any) => void;
+  }
+
+  export interface TapGestureHandlerProps {
+    onHandlerStateChange?: (event: any) => void;
+  }
+
+  export interface PinchGestureHandlerProps {
+    onGestureEvent?: (event: any) => void;
+    onHandlerStateChange?: (event: any) => void;
+  }
+
+  export interface LongPressGestureHandlerProps {
+    onHandlerStateChange?: (event: any) => void;
+  }
+
+  export const GestureDetector: React.FC<{
+    gesture: any;
+    children: React.ReactNode;
+  }>;
+
+  export const Gesture: {
+    Tap: () => any;
+    Pan: () => any;
+    Pinch: () => any;
+    LongPress: () => any;
+  };
+
+  export const PanGestureHandler: React.FC<PanGestureHandlerProps>;
+  export const TapGestureHandler: React.FC<TapGestureHandlerProps>;
+  export const PinchGestureHandler: React.FC<PinchGestureHandlerProps>;
+  export const LongPressGestureHandler: React.FC<LongPressGestureHandlerProps>;
+}

package/src/molecules/celebration/domain/entities/CelebrationConfig.ts

@@ -0,0 +1,17 @@
+/**
+ * Celebration Config Entity
+ * Single Responsibility: Define celebration configuration types
+ */
+
+export interface CelebrationAction {
+  label: string;
+  onPress: () => void;
+}
+
+export interface CelebrationConfig {
+  title: string;
+  message: string;
+  primaryAction?: CelebrationAction;
+  secondaryAction?: CelebrationAction;
+}
+

package/src/molecules/celebration/domain/entities/FireworksConfig.ts

@@ -0,0 +1,32 @@
+/**
+ * Fireworks Config Entity
+ * Single Responsibility: Define fireworks configuration types and constants
+ */
+
+import type { FireworksConfig as AnimationFireworksConfig } from "../../../animation";
+
+export interface ThemeColors {
+  primary?: string;
+  success?: string;
+  warning?: string;
+}
+
+export interface CelebrationFireworksConfig extends Omit<AnimationFireworksConfig, 'colors'> {
+  colors: string[];
+}
+
+export const DEFAULT_FIREWORKS_COLORS = [
+  "#FF6B6B",
+  "#4ECDC4",
+  "#FFE66D",
+  "#A8E6CF",
+  "#95E1D3",
+  "#F38181",
+  "#AA96DA",
+] as const;
+
+export const DEFAULT_FIREWORKS_CONFIG: Required<Pick<CelebrationFireworksConfig, "particleCount" | "duration">> = {
+  particleCount: 80,
+  duration: 2000,
+} as const;
+

package/src/molecules/celebration/index.ts

@@ -0,0 +1,93 @@
+/**
+ * @umituz/react-native-celebration - Public API
+ *
+ * Celebration animations and effects for React Native applications.
+ * Built on top of ../../../animation for consistent animations.
+ *
+ * Features:
+ * - Celebration modals with fireworks
+ * - Configurable animations
+ * - Theme integration
+ * - State management
+ *
+ * Usage:
+ * ```typescript
+ * import { useCelebrationState, CelebrationModal, Animated } from '@umituz/react-native-celebration';
+ *
+ * const MyCelebration = () => {
+ *   const { visible, show, hide, config } = useCelebrationState();
+ *
+ *   return (
+ *     <CelebrationModal
+ *       visible={visible}
+ *       config={config!}
+ *       onClose={hide}
+ *       themeColors={{ primary: '#007AFF', success: '#34C759' }}
+ *     />
+ *   );
+ * };
+ * ```
+ */
+
+
+
+// =============================================================================
+// DOMAIN LAYER - Entities
+// =============================================================================
+
+export type {
+  CelebrationConfig,
+  CelebrationAction,
+} from "./domain/entities/CelebrationConfig";
+
+export type {
+  ThemeColors,
+  CelebrationFireworksConfig,
+} from "./domain/entities/FireworksConfig";
+
+export {
+  DEFAULT_FIREWORKS_COLORS,
+  DEFAULT_FIREWORKS_CONFIG,
+} from "./domain/entities/FireworksConfig";
+
+// =============================================================================
+// INFRASTRUCTURE LAYER - Services
+// =============================================================================
+
+export { FireworksConfigService } from "./infrastructure/services/FireworksConfigService";
+
+
+
+// =============================================================================
+// PRESENTATION LAYER - Hooks
+// =============================================================================
+
+export { useCelebrationState } from "./presentation/hooks/useCelebrationState";
+export type { UseCelebrationStateReturn } from "./presentation/hooks/useCelebrationState";
+
+export { useCelebrationModalAnimation } from "./presentation/hooks/useCelebrationModalAnimation";
+export type { UseCelebrationModalAnimationReturn } from "./presentation/hooks/useCelebrationModalAnimation";
+
+
+
+// =============================================================================
+// PRESENTATION LAYER - Components
+// =============================================================================
+
+export { CelebrationModal } from "./presentation/components/CelebrationModal";
+export type { CelebrationModalProps } from "./presentation/components/CelebrationModal";
+
+export { CelebrationModalContent } from "./presentation/components/CelebrationModalContent";
+export type { CelebrationModalContentProps } from "./presentation/components/CelebrationModalContent";
+
+export { CelebrationFireworksOverlay } from "./presentation/components/CelebrationFireworksOverlay";
+export type { CelebrationFireworksOverlayProps } from "./presentation/components/CelebrationFireworksOverlay";
+
+// =============================================================================
+// PRESENTATION LAYER - Styles
+// =============================================================================
+
+export { createCelebrationModalStyles } from "./presentation/styles/CelebrationModalStyles";
+
+
+

package/src/molecules/celebration/infrastructure/services/FireworksConfigService.ts

@@ -0,0 +1,49 @@
+/**
+ * Fireworks Config Service
+ * Single Responsibility: Build fireworks configuration from theme colors
+ */
+
+import type {
+  ThemeColors,
+  CelebrationFireworksConfig,
+} from "../../domain/entities/FireworksConfig";
+import {
+  DEFAULT_FIREWORKS_COLORS,
+  DEFAULT_FIREWORKS_CONFIG,
+} from "../../domain/entities/FireworksConfig";
+
+export class FireworksConfigService {
+  /**
+   * Build fireworks configuration with theme colors
+   * Gracefully handles missing theme colors
+   */
+  static build(
+    themeColors?: ThemeColors,
+    customConfig?: Partial<CelebrationFireworksConfig>,
+  ): CelebrationFireworksConfig {
+    const colors: string[] = [];
+
+    // Add theme colors if available
+    if (themeColors?.primary) {
+      colors.push(themeColors.primary);
+    }
+    if (themeColors?.success) {
+      colors.push(themeColors.success);
+    }
+    if (themeColors?.warning) {
+      colors.push(themeColors.warning);
+    }
+
+    // Add default colors
+    colors.push(...DEFAULT_FIREWORKS_COLORS);
+
+    return {
+      particleCount: customConfig?.particleCount ?? DEFAULT_FIREWORKS_CONFIG.particleCount,
+      duration: customConfig?.duration ?? DEFAULT_FIREWORKS_CONFIG.duration,
+      colors: customConfig?.colors ?? colors,
+      particleSize: customConfig?.particleSize,
+      spread: customConfig?.spread,
+    };
+  }
+}
+

package/src/molecules/celebration/presentation/components/CelebrationFireworksOverlay.tsx

@@ -0,0 +1,33 @@
+/**
+ * Celebration Fireworks Overlay
+ * Renders fireworks effect as an overlay
+ */
+
+import React from "react";
+import { View, StyleSheet } from "react-native";
+import { Fireworks } from "../../../animation";
+import type { FireworksConfig } from "../../../animation";
+
+export interface CelebrationFireworksOverlayProps {
+    visible: boolean;
+    config: FireworksConfig;
+}
+
+export const CelebrationFireworksOverlay: React.FC<CelebrationFireworksOverlayProps> = ({
+    visible,
+    config,
+}) => {
+    if (!visible) return null;
+
+    return (
+        <View style={StyleSheet.absoluteFill} pointerEvents="none">
+            <Fireworks
+                autoTrigger
+                triggerX={0.5}
+                triggerY={0.5}
+                {...config}
+                style={StyleSheet.absoluteFill}
+            />
+        </View>
+    );
+};

package/src/molecules/celebration/presentation/components/CelebrationModal.tsx

@@ -0,0 +1,78 @@
+/**
+ * Celebration Modal Component
+ * Displays celebration modal with animations using BaseModal
+ */
+
+import React from "react";
+import { Animated } from "../../../animation";
+import { BaseModal } from "../../../BaseModal";
+import { useCelebrationModalAnimation } from "../hooks/useCelebrationModalAnimation";
+import { FireworksConfigService } from "../../infrastructure/services/FireworksConfigService";
+import { CelebrationModalContent } from "./CelebrationModalContent";
+import { CelebrationFireworksOverlay } from "./CelebrationFireworksOverlay";
+import type { CelebrationConfig } from "../../domain/entities/CelebrationConfig";
+import type { ThemeColors } from "../../domain/entities/FireworksConfig";
+import type {
+  ModalAnimationConfig,
+  IconAnimationConfig,
+} from "../../../animation";
+
+export interface CelebrationModalProps {
+  visible: boolean;
+  config: CelebrationConfig;
+  onClose: () => void;
+  themeColors?: ThemeColors;
+  fireworksConfig?: Partial<import("../../../animation").FireworksConfig>;
+  animationConfig?: {
+    modal?: ModalAnimationConfig;
+    icon?: IconAnimationConfig;
+  };
+  renderContent?: (props: {
+    config: CelebrationConfig;
+    onClose: () => void;
+    iconStyle: ReturnType<typeof useCelebrationModalAnimation>["iconStyle"];
+    modalStyle: ReturnType<typeof useCelebrationModalAnimation>["modalStyle"];
+  }) => React.ReactNode;
+}
+
+export const CelebrationModal: React.FC<CelebrationModalProps> = ({
+  visible,
+  config,
+  onClose,
+  themeColors,
+  fireworksConfig,
+  animationConfig,
+  renderContent,
+}) => {
+  const { isReady, iconStyle, modalStyle } =
+    useCelebrationModalAnimation(visible, animationConfig);
+
+  const fireworks = FireworksConfigService.build(themeColors, fireworksConfig);
+
+  return (
+    <>
+      <CelebrationFireworksOverlay visible={visible} config={fireworks} />
+
+      <BaseModal
+        visible={visible && isReady}
+        onClose={onClose}
+        dismissOnBackdrop={true}
+        testID="celebration-modal"
+      >
+        <Animated.View style={modalStyle}>
+          {renderContent ? (
+            renderContent({ config, onClose, iconStyle, modalStyle })
+          ) : themeColors ? (
+            <CelebrationModalContent
+              config={config}
+              onClose={onClose}
+              themeColors={themeColors}
+              iconStyle={iconStyle}
+              modalStyle={modalStyle}
+            />
+          ) : null}
+        </Animated.View>
+      </BaseModal>
+    </>
+  );
+};