@umituz/react-native-design-system 2.3.13 → 2.3.15

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/calendar/domain/entities/CalendarDay.entity.ts

@@ -0,0 +1,115 @@
+/**
+ * CalendarDay Entity
+ *
+ * Represents a single day in a calendar view with its properties and associated events.
+ *
+ * Design Philosophy:
+ * - Timezone-aware (uses timezone domain for date calculations)
+ * - Event-agnostic (works with any CalendarEvent type)
+ * - View-ready (contains all display state)
+ * - Immutable (never mutate, create new instances)
+ */
+
+import type { CalendarEvent } from './CalendarEvent.entity';
+
+export interface CalendarDay {
+  /**
+   * The date this calendar day represents
+   */
+  date: Date;
+
+  /**
+   * Whether this day belongs to the currently displayed month
+   * Used to gray out days from prev/next months in calendar grid
+   */
+  isCurrentMonth: boolean;
+
+  /**
+   * Whether this day is today (timezone-aware via timezone domain)
+   */
+  isToday: boolean;
+
+  /**
+   * Whether this day is currently selected by the user
+   */
+  isSelected: boolean;
+
+  /**
+   * Events scheduled for this day
+   * @default []
+   */
+  events: CalendarEvent[];
+
+  /**
+   * Whether this day is disabled/non-selectable
+   * @example Past dates, dates outside valid range
+   * @default false
+   */
+  isDisabled?: boolean;
+
+  /**
+   * Whether this day is a weekend (Saturday or Sunday)
+   * Useful for styling weekend days differently
+   */
+  isWeekend?: boolean;
+}
+
+/**
+ * Calendar Month Configuration
+ *
+ * Represents a full month view with all necessary display information
+ */
+export interface CalendarMonth {
+  /**
+   * Year of the month
+   */
+  year: number;
+
+  /**
+   * Month (0-indexed: 0 = January, 11 = December)
+   */
+  month: number;
+
+  /**
+   * All days to display in the calendar grid (usually 42 days = 6 weeks)
+   * Includes days from previous and next months to fill the grid
+   */
+  days: CalendarDay[];
+
+  /**
+   * First day of the month
+   */
+  firstDay: Date;
+
+  /**
+   * Last day of the month
+   */
+  lastDay: Date;
+
+  /**
+   * Total number of days in this month
+   */
+  daysInMonth: number;
+}
+
+/**
+ * Week View Configuration
+ *
+ * Represents a week view with 7 days
+ */
+export interface CalendarWeek {
+  /**
+   * Start date of the week (usually Sunday)
+   */
+  startDate: Date;
+
+  /**
+   * End date of the week (usually Saturday)
+   */
+  endDate: Date;
+
+  /**
+   * All 7 days in the week
+   */
+  days: CalendarDay[];
+}

package/src/molecules/calendar/domain/entities/CalendarEvent.entity.ts

@@ -0,0 +1,202 @@
+/**
+ * CalendarEvent Entity
+ *
+ * Generic calendar event that can represent:
+ * - Workouts (fitness apps)
+ * - Habits (habit tracking apps)
+ * - Tasks (productivity apps)
+ * - Appointments (scheduling apps)
+ * - Any other time-based event
+ *
+ * Design Philosophy:
+ * - Generic and reusable across all app types
+ * - Extensible via metadata field
+ * - Simple core properties
+ * - App-specific data in metadata
+ */
+
+export interface CalendarEvent {
+  /**
+   * Unique identifier for the event
+   */
+  id: string;
+
+  /**
+   * Event title/name
+   * @example "Morning Workout", "Team Meeting", "Water plants"
+   */
+  title: string;
+
+  /**
+   * Event date in YYYY-MM-DD format (timezone-aware via timezone domain)
+   * @example "2024-10-30"
+   */
+  date: string;
+
+  /**
+   * Optional event time in HH:mm format
+   * @example "09:30", "14:00"
+   */
+  time?: string;
+
+  /**
+   * Optional event color for visual distinction
+   * Uses design token color names or hex values
+   * @example "primary", "success", "#FF5733"
+   */
+  color?: string;
+
+  /**
+   * Whether the event has been completed/checked off
+   * @default false
+   */
+  isCompleted?: boolean;
+
+  /**
+   * Optional duration in minutes
+   * @example 30, 60, 90
+   */
+  duration?: number;
+
+  /**
+   * Optional event description/notes
+   */
+  description?: string;
+
+  /**
+   * Optional location for the event
+   */
+  location?: string;
+
+  /**
+   * Reminders/alarms (minutes before event)
+   * @example [15, 30] → 15 mins and 30 mins before
+   */
+  reminders?: number[];
+
+  /**
+   * System calendar sync (expo-calendar integration)
+   */
+  systemCalendar?: {
+    /**
+     * System calendar ID where event is synced
+     */
+    calendarId: string;
+
+    /**
+     * System event ID from device calendar
+     */
+    eventId: string;
+
+    /**
+     * Last sync timestamp
+     */
+    lastSyncedAt: Date;
+  };
+
+  /**
+   * App-specific metadata
+   * Use this for domain-specific properties
+   * @example
+   * // Workout app:
+   * metadata: { workoutTemplateId: "abc123", exercises: [...] }
+   *
+   * // Habit app:
+   * metadata: { habitId: "xyz789", streak: 5 }
+   */
+  metadata?: unknown;
+
+  /**
+   * Recurring event configuration
+   */
+  recurring?: {
+    /**
+     * Recurrence pattern
+     */
+    pattern: 'daily' | 'weekly' | 'monthly' | 'custom';
+
+    /**
+     * Interval for recurrence
+     * @example pattern: 'weekly', interval: 2 → every 2 weeks
+     */
+    interval?: number;
+
+    /**
+     * Days of week for weekly recurrence (0 = Sunday, 6 = Saturday)
+     * @example [1, 3, 5] → Monday, Wednesday, Friday
+     */
+    daysOfWeek?: number[];
+
+    /**
+     * End date for recurrence (YYYY-MM-DD)
+     */
+    endDate?: string;
+  };
+
+  /**
+   * Creation timestamp
+   */
+  createdAt: Date;
+
+  /**
+   * Last update timestamp
+   */
+  updatedAt: Date;
+}
+
+/**
+ * Request object for creating a new calendar event
+ */
+export interface CreateCalendarEventRequest {
+  title: string;
+  date: string;
+  time?: string;
+  color?: string;
+  duration?: number;
+  description?: string;
+  location?: string;
+  reminders?: number[];
+  metadata?: unknown;
+  recurring?: CalendarEvent['recurring'];
+  syncToSystemCalendar?: boolean; // Auto-sync to device calendar
+}
+
+/**
+ * Request object for updating an existing calendar event
+ */
+export interface UpdateCalendarEventRequest {
+  id: string;
+  title?: string;
+  date?: string;
+  time?: string;
+  color?: string;
+  isCompleted?: boolean;
+  duration?: number;
+  description?: string;
+  location?: string;
+  reminders?: number[];
+  metadata?: unknown;
+  recurring?: CalendarEvent['recurring'];
+  systemCalendar?: CalendarEvent['systemCalendar'];
+}
+
+/**
+ * System calendar list item
+ */
+export interface SystemCalendar {
+  id: string;
+  title: string;
+  color: string;
+  source: string;
+  isPrimary: boolean;
+  allowsModifications: boolean;
+}
+
+/**
+ * Calendar permission result
+ */
+export interface CalendarPermissionResult {
+  granted: boolean;
+  canAskAgain: boolean;
+  status: string;
+}