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

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

@@ -0,0 +1,90 @@
+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";
+
+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 (
+        <Animated.View
+            style={[
+                styles.modal,
+                modalStyle,
+                {
+                    backgroundColor: tokens.colors.surface,
+                    borderColor: tokens.colors.surfaceVariant,
+                    shadowColor: tokens.colors.onSurface,
+                    shadowOffset: { width: 0, height: 8 },
+                    shadowOpacity: 0.15,
+                    shadowRadius: 24,
+                    elevation: 8,
+                },
+            ]}
+        >
+            <Animated.View style={[styles.iconContainer, iconStyle]}>
+                <View style={[styles.iconCircle, { backgroundColor: successColor }]}>
+                    <AtomicIcon name="checkmark" size="xl" color="onPrimary" />
+                </View>
+            </Animated.View>
+
+            <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>
+        </Animated.View>
+    );
+};

package/src/molecules/celebration/presentation/hooks/useCelebrationModalAnimation.ts

@@ -0,0 +1,49 @@
+/**
+ * useCelebrationModalAnimation Hook
+ * Single Responsibility: Compose all celebration modal animations
+ * Uses ../../../animation directly
+ */
+
+import {
+  useModalAnimations,
+  useIconAnimations,
+  type ModalAnimationConfig,
+  type IconAnimationConfig,
+} from "../../../animation";
+
+export interface UseCelebrationModalAnimationReturn {
+  isReady: boolean;
+  overlayStyle: ReturnType<typeof useModalAnimations>["overlayStyle"];
+  modalStyle: ReturnType<typeof useModalAnimations>["modalStyle"];
+  iconStyle: ReturnType<typeof useIconAnimations>["iconStyle"];
+}
+
+/**
+ * Hook for managing all celebration modal animations
+ */
+export function useCelebrationModalAnimation(
+  visible: boolean,
+  animationConfig?: {
+    modal?: ModalAnimationConfig;
+    icon?: IconAnimationConfig;
+  },
+): UseCelebrationModalAnimationReturn {
+  const { isReady, overlayStyle, modalStyle } = useModalAnimations(
+    visible,
+    animationConfig?.modal,
+  );
+
+  const { iconStyle } = useIconAnimations(
+    visible,
+    isReady,
+    animationConfig?.icon,
+  );
+
+  return {
+    isReady,
+    overlayStyle,
+    modalStyle,
+    iconStyle,
+  };
+}
+

package/src/molecules/celebration/presentation/hooks/useCelebrationState.ts

@@ -0,0 +1,45 @@
+/**
+ * useCelebrationState Hook
+ * Single Responsibility: Manage celebration modal state
+ */
+
+import { useState, useCallback } from "react";
+import type { CelebrationConfig } from "../../domain/entities/CelebrationConfig";
+
+export interface UseCelebrationStateReturn {
+  visible: boolean;
+  config: CelebrationConfig | null;
+  show: (config: CelebrationConfig) => void;
+  hide: () => void;
+}
+
+const ANIMATION_CLEANUP_DELAY = 300;
+
+/**
+ * Hook for managing celebration modal state
+ */
+export function useCelebrationState(): UseCelebrationStateReturn {
+  const [visible, setVisible] = useState(false);
+  const [config, setConfig] = useState<CelebrationConfig | null>(null);
+
+  const show = useCallback((celebrationConfig: CelebrationConfig) => {
+    setConfig(celebrationConfig);
+    setVisible(true);
+  }, []);
+
+  const hide = useCallback(() => {
+    setVisible(false);
+    // Clear config after animation completes
+    setTimeout(() => {
+      setConfig(null);
+    }, ANIMATION_CLEANUP_DELAY);
+  }, []);
+
+  return {
+    visible,
+    config: config || null,
+    show,
+    hide,
+  };
+}
+

package/src/molecules/celebration/presentation/styles/CelebrationModalStyles.ts

@@ -0,0 +1,65 @@
+import { StyleSheet } from "react-native";
+import { useAppDesignTokens } from "../../../../theme";
+
+export const createCelebrationModalStyles = () => {
+    const tokens = useAppDesignTokens();
+
+    return StyleSheet.create({
+        overlay: {
+            flex: 1,
+            justifyContent: "center",
+            alignItems: "center",
+            padding: tokens.spacing.lg || 20,
+        },
+        modal: {
+            width: "100%",
+            maxWidth: 400,
+            borderRadius: tokens.borders.radius.xl || 20,
+            padding: tokens.spacing.xl || 28,
+            borderWidth: 1,
+            alignItems: "center",
+        },
+        iconContainer: {
+            marginBottom: tokens.spacing.xl || 24,
+        },
+        iconCircle: {
+            width: 80,
+            height: 80,
+            borderRadius: 40,
+            alignItems: "center",
+            justifyContent: "center",
+        },
+        iconText: {
+            fontSize: 40,
+            color: "#FFFFFF",
+            fontWeight: "bold",
+        },
+        title: {
+            fontSize: (tokens.typography.headlineSmall as any).fontSize || 22,
+            fontWeight: "700",
+            marginBottom: tokens.spacing.xs || 8,
+            textAlign: "center",
+        },
+        message: {
+            fontSize: (tokens.typography.bodyLarge as any).fontSize || 15,
+            marginBottom: tokens.spacing.xl || 24,
+            textAlign: "center",
+            lineHeight: 22,
+        },
+        actions: {
+            width: "100%",
+            gap: tokens.spacing.md || 12,
+        },
+        button: {
+            width: "100%",
+            paddingVertical: 14,
+            paddingHorizontal: 24,
+            borderRadius: tokens.borders.radius.lg || 12,
+            alignItems: "center",
+        },
+        buttonText: {
+            fontSize: 16,
+            fontWeight: "600",
+        },
+    });
+};

package/src/molecules/countdown/components/Countdown.tsx

@@ -0,0 +1,128 @@
+import React, { useMemo } from 'react';
+import { View, StyleSheet } from 'react-native';
+import { useAppDesignTokens } from '../../../theme';
+import { useCountdown } from '../hooks/useCountdown';
+import { CountdownHeader } from './CountdownHeader';
+import { TimeUnit } from './TimeUnit';
+import type { CountdownTarget, CountdownDisplayConfig } from '../types/CountdownTypes';
+import type { IconName } from '../../../atoms/AtomicIcon';
+
+export interface CountdownProps {
+    target: CountdownTarget;
+    alternateTargets?: CountdownTarget[];
+    displayConfig?: CountdownDisplayConfig;
+    interval?: number;
+    onExpire?: () => void;
+    onTargetChange?: (target: CountdownTarget) => void;
+    formatLabel?: (unit: 'days' | 'hours' | 'minutes' | 'seconds', value: number) => string;
+}
+
+export const Countdown: React.FC<CountdownProps> = ({
+    target,
+    alternateTargets = [],
+    displayConfig = {},
+    interval = 1000,
+    onExpire,
+    onTargetChange,
+    formatLabel,
+}) => {
+    const tokens = useAppDesignTokens();
+    const {
+        showIcon = true,
+        showLabel = true,
+        showToggle = alternateTargets.length > 0,
+        layout = 'grid',
+        size = 'medium',
+    } = displayConfig;
+
+    const [currentTargetIndex, setCurrentTargetIndex] = React.useState(0);
+    const allTargets = useMemo(
+        () => [target, ...alternateTargets],
+        [target, alternateTargets]
+    );
+    const currentTarget = allTargets[currentTargetIndex];
+
+    const { timeRemaining } = useCountdown(currentTarget, {
+        interval,
+        onExpire,
+    });
+
+    const handleToggle = () => {
+        const nextIndex = (currentTargetIndex + 1) % allTargets.length;
+        setCurrentTargetIndex(nextIndex);
+        if (onTargetChange) {
+            onTargetChange(allTargets[nextIndex]);
+        }
+    };
+
+    const defaultFormatLabel = (unit: 'days' | 'hours' | 'minutes' | 'seconds', value: number) => {
+        const labels = {
+            days: 'DAYS',
+            hours: 'HOURS',
+            minutes: 'MINUTES',
+            seconds: 'SECONDS',
+        };
+        return labels[unit];
+    };
+
+    const labelFormatter = formatLabel || defaultFormatLabel;
+
+    const timeUnits = useMemo(() => {
+        const units = [];
+
+        if (timeRemaining.days > 0) {
+            units.push({
+                value: timeRemaining.days,
+                label: labelFormatter('days', timeRemaining.days)
+            });
+        }
+        units.push({
+            value: timeRemaining.hours,
+            label: labelFormatter('hours', timeRemaining.hours)
+        });
+        units.push({
+            value: timeRemaining.minutes,
+            label: labelFormatter('minutes', timeRemaining.minutes)
+        });
+        units.push({
+            value: timeRemaining.seconds,
+            label: labelFormatter('seconds', timeRemaining.seconds)
+        });
+
+        return units;
+    }, [timeRemaining, labelFormatter]);
+
+    return (
+        <View style={styles.container}>
+            {showLabel && (
+                <CountdownHeader
+                    title={currentTarget.label || 'Countdown'}
+                    icon={currentTarget.icon as IconName}
+                    showToggle={showToggle}
+                    onToggle={handleToggle}
+                />
+            )}
+
+            <View style={[styles.grid, { gap: tokens.spacing.sm }]}>
+                {timeUnits.map((unit, index) => (
+                    <TimeUnit
+                        key={index}
+                        value={unit.value}
+                        label={unit.label}
+                        size={size}
+                    />
+                ))}
+            </View>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        width: '100%',
+    },
+    grid: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
+});

package/src/molecules/countdown/components/CountdownHeader.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import { AtomicText, AtomicIcon } from '../../../atoms';
+import { useAppDesignTokens } from '../../../theme';
+import type { IconName } from '../../../atoms/AtomicIcon';
+
+export interface CountdownHeaderProps {
+    title: string;
+    icon?: IconName;
+    iconColor?: string;
+    showToggle?: boolean;
+    onToggle?: () => void;
+}
+
+export const CountdownHeader: React.FC<CountdownHeaderProps> = ({
+    title,
+    icon,
+    iconColor = 'primary',
+    showToggle = false,
+    onToggle,
+}) => {
+    const tokens = useAppDesignTokens();
+
+    return (
+        <View style={[styles.container, { marginBottom: tokens.spacing.md }]}>
+            <View style={[styles.titleRow, { gap: tokens.spacing.sm }]}>
+                {icon && (
+                    <AtomicIcon
+                        name={icon}
+                        size="sm"
+                        color={iconColor as any}
+                    />
+                )}
+                <AtomicText
+                    type="titleMedium"
+                    color="onSurface"
+                    style={styles.title}
+                >
+                    {title}
+                </AtomicText>
+            </View>
+
+            {showToggle && onToggle && (
+                <TouchableOpacity
+                    style={[
+                        styles.toggleButton,
+                        {
+                            backgroundColor: tokens.colors.surfaceSecondary,
+                            width: 36,
+                            height: 36,
+                            borderRadius: 18,
+                        },
+                    ]}
+                    onPress={onToggle}
+                >
+                    <AtomicIcon
+                        name="swap-horizontal"
+                        size="sm"
+                        color="onSurface"
+                    />
+                </TouchableOpacity>
+            )}
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    titleRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    title: {
+        fontWeight: '700',
+    },
+    toggleButton: {
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+});

package/src/molecules/countdown/components/TimeUnit.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { AtomicText } from '../../../atoms';
+import { useAppDesignTokens } from '../../../theme';
+
+export interface TimeUnitProps {
+    value: number;
+    label: string;
+    size?: 'small' | 'medium' | 'large';
+}
+
+export const TimeUnit: React.FC<TimeUnitProps> = ({
+    value,
+    label,
+    size = 'medium',
+}) => {
+    const tokens = useAppDesignTokens();
+
+    const sizeConfig = {
+        small: { fontSize: 24, padding: tokens.spacing.sm, minHeight: 70 },
+        medium: { fontSize: 32, padding: tokens.spacing.md, minHeight: 90 },
+        large: { fontSize: 40, padding: tokens.spacing.lg, minHeight: 110 },
+    };
+
+    const config = sizeConfig[size];
+
+    return (
+        <View
+            style={[
+                styles.container,
+                {
+                    backgroundColor: tokens.colors.surfaceSecondary,
+                    borderRadius: tokens.borders.radius.lg,
+                    paddingVertical: config.padding,
+                    minHeight: config.minHeight,
+                },
+            ]}
+        >
+            <AtomicText
+                type="displaySmall"
+                color="onSurface"
+                style={[styles.value, { fontSize: config.fontSize }]}
+            >
+                {String(value).padStart(2, '0')}
+            </AtomicText>
+            <AtomicText
+                type="labelSmall"
+                color="onSurface"
+                style={styles.label}
+            >
+                {label}
+            </AtomicText>
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    value: {
+        fontWeight: '700',
+        lineHeight: 38,
+    },
+    label: {
+        fontWeight: '600',
+        marginTop: 2,
+        letterSpacing: 1,
+        textTransform: 'uppercase',
+    },
+});

package/src/molecules/countdown/hooks/useCountdown.ts

@@ -0,0 +1,107 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+import type { TimeRemaining, CountdownTarget } from '../types/CountdownTypes';
+import { calculateTimeRemaining } from '../utils/TimeCalculator';
+
+export interface UseCountdownOptions {
+    interval?: number;
+    autoStart?: boolean;
+    onExpire?: () => void;
+    onTick?: (timeRemaining: TimeRemaining) => void;
+}
+
+export interface UseCountdownReturn {
+    timeRemaining: TimeRemaining;
+    isActive: boolean;
+    isExpired: boolean;
+    start: () => void;
+    stop: () => void;
+    reset: () => void;
+    setTarget: (target: CountdownTarget) => void;
+}
+
+export function useCountdown(
+    initialTarget: CountdownTarget | null,
+    options: UseCountdownOptions = {}
+): UseCountdownReturn {
+    const {
+        interval = 1000,
+        autoStart = true,
+        onExpire,
+        onTick,
+    } = options;
+
+    const [target, setTargetState] = useState<CountdownTarget | null>(initialTarget);
+    const [isActive, setIsActive] = useState(autoStart);
+    const [timeRemaining, setTimeRemaining] = useState<TimeRemaining>(() =>
+        target ? calculateTimeRemaining(target.date) : {
+            days: 0,
+            hours: 0,
+            minutes: 0,
+            seconds: 0,
+            totalSeconds: 0,
+            isExpired: true,
+        }
+    );
+
+    const expiredRef = useRef(false);
+
+    const updateTime = useCallback(() => {
+        if (!target) return;
+
+        const remaining = calculateTimeRemaining(target.date);
+        setTimeRemaining(remaining);
+
+        if (onTick) {
+            onTick(remaining);
+        }
+
+        if (remaining.isExpired && !expiredRef.current) {
+            expiredRef.current = true;
+            setIsActive(false);
+            if (onExpire) {
+                onExpire();
+            }
+        }
+    }, [target, onTick, onExpire]);
+
+    useEffect(() => {
+        if (!isActive || !target) return;
+
+        updateTime();
+        const intervalId = setInterval(updateTime, interval);
+
+        return () => clearInterval(intervalId);
+    }, [isActive, target, interval, updateTime]);
+
+    const start = useCallback(() => {
+        setIsActive(true);
+    }, []);
+
+    const stop = useCallback(() => {
+        setIsActive(false);
+    }, []);
+
+    const reset = useCallback(() => {
+        expiredRef.current = false;
+        setIsActive(autoStart);
+        if (target) {
+            updateTime();
+        }
+    }, [autoStart, target, updateTime]);
+
+    const setTarget = useCallback((newTarget: CountdownTarget) => {
+        setTargetState(newTarget);
+        expiredRef.current = false;
+        setIsActive(autoStart);
+    }, [autoStart]);
+
+    return {
+        timeRemaining,
+        isActive,
+        isExpired: timeRemaining.isExpired,
+        start,
+        stop,
+        reset,
+        setTarget,
+    };
+}

package/src/molecules/countdown/index.ts

@@ -0,0 +1,25 @@
+export { Countdown } from './components/Countdown';
+export type { CountdownProps } from './components/Countdown';
+
+export { TimeUnit } from './components/TimeUnit';
+export type { TimeUnitProps } from './components/TimeUnit';
+
+export { CountdownHeader } from './components/CountdownHeader';
+export type { CountdownHeaderProps } from './components/CountdownHeader';
+
+export { useCountdown } from './hooks/useCountdown';
+export type { UseCountdownOptions, UseCountdownReturn } from './hooks/useCountdown';
+
+export {
+    calculateTimeRemaining,
+    padNumber,
+    getNextDayStart,
+    getNextYearStart,
+} from './utils/TimeCalculator';
+
+export type {
+    TimeRemaining,
+    CountdownTarget,
+    CountdownFormatOptions,
+    CountdownDisplayConfig,
+} from './types/CountdownTypes';

package/src/molecules/countdown/types/CountdownTypes.ts

@@ -0,0 +1,31 @@
+export interface TimeRemaining {
+    days: number;
+    hours: number;
+    minutes: number;
+    seconds: number;
+    totalSeconds: number;
+    isExpired: boolean;
+}
+
+export interface CountdownTarget {
+    date: Date | string;
+    label?: string;
+    icon?: string;
+}
+
+export interface CountdownFormatOptions {
+    showDays?: boolean;
+    showHours?: boolean;
+    showMinutes?: boolean;
+    showSeconds?: boolean;
+    showZeros?: boolean;
+    separator?: string;
+}
+
+export interface CountdownDisplayConfig {
+    showIcon?: boolean;
+    showLabel?: boolean;
+    showToggle?: boolean;
+    layout?: 'grid' | 'inline' | 'compact';
+    size?: 'small' | 'medium' | 'large';
+}