@umituz/react-native-design-system 2.6.48 → 2.6.50

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

@@ -1,57 +0,0 @@
-/**
- * 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

@@ -1,60 +0,0 @@
-/**
- * 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) {
-    // Return default theme if used outside provider
-    return {
-      theme: DEFAULT_ANIMATION_THEME,
-      setTheme: () => {},
-    };
-  }
-  return context;
-};

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

@@ -1,165 +0,0 @@
-/**
- * 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/celebration/domain/entities/CelebrationConfig.ts

@@ -1,17 +0,0 @@
-/**
- * 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

@@ -1,32 +0,0 @@
-/**
- * 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

@@ -1,93 +0,0 @@
-/**
- * @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

@@ -1,49 +0,0 @@
-/**
- * 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

@@ -1,33 +0,0 @@
-/**
- * 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

@@ -1,81 +0,0 @@
-/**
- * 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;
-}
-
-// Access View through Animated namespace with type assertion for reanimated v3 compatibility
-const AnimatedView = (Animated as unknown as { View: React.ComponentType<{ style?: unknown; children?: React.ReactNode }> }).View;
-
-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"
-      >
-        <AnimatedView style={modalStyle}>
-          {renderContent ? (
-            renderContent({ config, onClose, iconStyle, modalStyle })
-          ) : themeColors ? (
-            <CelebrationModalContent
-              config={config}
-              onClose={onClose}
-              themeColors={themeColors}
-              iconStyle={iconStyle}
-              modalStyle={modalStyle}
-            />
-          ) : null}
-        </AnimatedView>
-      </BaseModal>
-    </>
-  );
-};

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

@@ -1,88 +0,0 @@
-import React from "react";
-import { View } from "react-native";
-import { Animated } from "../../../animation";
-import { useAppDesignTokens } from "../../../../theme";
-import { AtomicButton, AtomicText, AtomicIcon } from "../../../../atoms";
-import type { CelebrationConfig } from "../../domain/entities/CelebrationConfig";
-import type { ThemeColors } from "../../domain/entities/FireworksConfig";
-import type { useCelebrationModalAnimation } from "../hooks/useCelebrationModalAnimation";
-import { createCelebrationModalStyles } from "../styles/CelebrationModalStyles";
-
-// Access View through Animated namespace with type assertion for reanimated v3 compatibility
-const AnimatedView = (Animated as unknown as { View: React.ComponentType<{ style?: unknown; children?: React.ReactNode }> }).View;
-
-export interface CelebrationModalContentProps {
-    config: CelebrationConfig;
-    onClose: () => void;
-    themeColors?: ThemeColors;
-    iconStyle: ReturnType<typeof useCelebrationModalAnimation>["iconStyle"];
-    modalStyle: ReturnType<typeof useCelebrationModalAnimation>["modalStyle"];
-}
-
-export const CelebrationModalContent: React.FC<CelebrationModalContentProps> = ({
-    config,
-    onClose,
-    themeColors,
-    iconStyle,
-    modalStyle,
-}) => {
-    const tokens = useAppDesignTokens();
-    const styles = createCelebrationModalStyles();
-
-    const successColor = themeColors?.success || tokens.colors.success;
-    const primaryColor = themeColors?.primary || tokens.colors.primary;
-
-    return (
-        <AnimatedView
-            style={[
-                styles.modal,
-                modalStyle,
-                {
-                    backgroundColor: tokens.colors.surface,
-                    borderColor: tokens.colors.surfaceVariant,
-                },
-            ]}
-        >
-            <AnimatedView style={[styles.iconContainer, iconStyle]}>
-                <View style={[styles.iconCircle, { backgroundColor: successColor }]}>
-                    <AtomicIcon name="checkmark" size="xl" color="onPrimary" />
-                </View>
-            </AnimatedView>
-
-            <AtomicText type="headlineSmall" style={[styles.title, { color: tokens.colors.onSurface }]}>
-                {config.title}
-            </AtomicText>
-
-            <AtomicText type="bodyLarge" style={[styles.message, { color: tokens.colors.onSurface }]}>
-                {config.message}
-            </AtomicText>
-
-            <View style={styles.actions}>
-                {config.primaryAction && (
-                    <AtomicButton
-                        title={config.primaryAction.label}
-                        onPress={() => {
-                            config.primaryAction?.onPress();
-                            onClose();
-                        }}
-                        variant="primary"
-                        style={{ backgroundColor: primaryColor }}
-                        fullWidth
-                    />
-                )}
-
-                {config.secondaryAction && (
-                    <AtomicButton
-                        title={config.secondaryAction.label}
-                        onPress={() => {
-                            config.secondaryAction?.onPress();
-                            onClose();
-                        }}
-                        variant="secondary"
-                        fullWidth
-                    />
-                )}
-            </View>
-        </AnimatedView>
-    );
-};