@umituz/react-native-design-system 1.0.0

package/src/presentation/loading/presentation/components/LoadingState.tsx

@@ -0,0 +1,200 @@
+/**
+ * LoadingState - Dynamic Icon-Based Loading Component
+ *
+ * Universal loading component with configurable emoji/icon support
+ * Inspired by meditation_timer's breathing animation pattern
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Features:
+ * - ✅ Dynamic emoji/icon per screen (🏠 Home, ⚙️ Settings, 💪 Workout, etc.)
+ * - ✅ Breathing animation effect (scale 1 → 1.15 → 1)
+ * - ✅ Size variants (small, medium, large)
+ * - ✅ Full screen or inline modes
+ * - ✅ Optional loading message
+ * - ✅ Theme-aware styling
+ */
+
+import React, { useRef, useEffect, useMemo } from 'react';
+import {
+  View,
+  StyleSheet,
+  Animated,
+  Easing,
+} from 'react-native';
+import { useAppDesignTokens } from '../../../hooks/useAppDesignTokens';
+import { STATIC_TOKENS } from '../../../tokens/AppDesignTokens';
+import { AtomicText } from '../../../atoms/AtomicText';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+export type LoadingStateSize = 'small' | 'medium' | 'large';
+
+export interface LoadingStateProps {
+  /**
+   * Emoji/icon to display (changes per screen context)
+   * Examples: 🏠 Home, ⚙️ Settings, 💪 Workout, 🧘 Meditation, 📊 Analytics
+   */
+  icon?: string;
+
+  /**
+   * Optional loading message
+   */
+  message?: string;
+
+  /**
+   * Size variant
+   */
+  size?: LoadingStateSize;
+
+  /**
+   * Full screen overlay mode
+   */
+  fullScreen?: boolean;
+}
+
+// =============================================================================
+// SIZE CONFIGURATION
+// =============================================================================
+
+interface SizeConfig {
+  iconSize: number;
+  showMessage: boolean;
+  containerPadding: number;
+}
+
+const SIZE_CONFIG: Record<LoadingStateSize, SizeConfig> = {
+  small: {
+    iconSize: 32,
+    showMessage: false,
+    containerPadding: 16,
+  },
+  medium: {
+    iconSize: 48,
+    showMessage: true,
+    containerPadding: 24,
+  },
+  large: {
+    iconSize: 64,
+    showMessage: true,
+    containerPadding: 32,
+  },
+};
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+export const LoadingState: React.FC<LoadingStateProps> = ({
+  icon = '⏳', // Default hourglass icon
+  message,
+  size = 'large',
+  fullScreen = false,
+}) => {
+  // ✅ Dynamic theme tokens
+  const tokens = useAppDesignTokens();
+
+  // Animation ref for breathing effect
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+
+  // Size configuration
+  const config = SIZE_CONFIG[size];
+
+  /**
+   * Breathing Animation Effect
+   * Smoothly scales icon from 1 → 1.15 → 1 in continuous loop
+   * Creates calming, natural breathing sensation
+   */
+  useEffect(() => {
+    const breathingAnimation = Animated.loop(
+      Animated.sequence([
+        // Expand (inhale)
+        Animated.timing(scaleAnim, {
+          toValue: 1.15,
+          duration: tokens.animations.slowest,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        // Contract (exhale)
+        Animated.timing(scaleAnim, {
+          toValue: 1,
+          duration: tokens.animations.slowest,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ])
+    );
+
+    breathingAnimation.start();
+
+    return () => {
+      breathingAnimation.stop();
+    };
+  }, [scaleAnim]);
+
+  // Dynamic styles based on theme
+  const styles = useMemo(() => getStyles(tokens, config, fullScreen), [tokens, config, fullScreen]);
+
+  return (
+    <View style={styles.container}>
+      {/* Animated Icon/Emoji */}
+      <Animated.Text
+        style={[
+          styles.icon,
+          {
+            fontSize: config.iconSize,
+            transform: [{ scale: scaleAnim }],
+          },
+        ]}
+      >
+        {icon}
+      </Animated.Text>
+
+      {/* Optional Loading Message */}
+      {config.showMessage && message && (
+        <AtomicText
+          type="bodyMedium"
+          style={styles.message}
+        >
+          {message}
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+// =============================================================================
+// STYLES
+// =============================================================================
+
+const getStyles = (
+  tokens: ReturnType<typeof useAppDesignTokens>,
+  config: SizeConfig,
+  fullScreen: boolean
+) => StyleSheet.create({
+  container: {
+    ...(fullScreen ? {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      backgroundColor: tokens.colors.backgroundPrimary,
+    } : {
+      justifyContent: 'center',
+      alignItems: 'center',
+      padding: config.containerPadding,
+    }),
+  },
+  icon: {
+    textAlign: 'center',
+    marginBottom: tokens.spacing.md,
+  },
+  message: {
+    color: tokens.colors.textSecondary,
+    textAlign: 'center',
+    marginTop: tokens.spacing.sm,
+    maxWidth: 300,
+  },
+});
+
+export default LoadingState;

package/src/presentation/loading/presentation/hooks/useLoading.ts

@@ -0,0 +1,100 @@
+/**
+ * useLoading - Loading State Management Hook
+ *
+ * Centralized hook for managing loading states across the application
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Features:
+ * - ✅ Simple boolean loading state
+ * - ✅ Message management
+ * - ✅ Icon configuration per context
+ * - ✅ Type-safe loading control
+ */
+
+import { useState, useCallback } from 'react';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+export interface LoadingConfig {
+  isLoading: boolean;
+  message?: string;
+  icon?: string;
+}
+
+export interface UseLoadingReturn {
+  /**
+   * Current loading state
+   */
+  isLoading: boolean;
+
+  /**
+   * Current loading message
+   */
+  message: string | undefined;
+
+  /**
+   * Current loading icon
+   */
+  icon: string | undefined;
+
+  /**
+   * Start loading with optional message and icon
+   */
+  startLoading: (message?: string, icon?: string) => void;
+
+  /**
+   * Stop loading and clear message
+   */
+  stopLoading: () => void;
+
+  /**
+   * Update loading message without affecting state
+   */
+  setMessage: (message: string | undefined) => void;
+
+  /**
+   * Update loading icon without affecting state
+   */
+  setIcon: (icon: string | undefined) => void;
+}
+
+// =============================================================================
+// HOOK IMPLEMENTATION
+// =============================================================================
+
+export const useLoading = (initialConfig?: LoadingConfig): UseLoadingReturn => {
+  const [isLoading, setIsLoading] = useState(initialConfig?.isLoading ?? false);
+  const [message, setMessage] = useState<string | undefined>(initialConfig?.message);
+  const [icon, setIcon] = useState<string | undefined>(initialConfig?.icon);
+
+  /**
+   * Start loading with optional message and icon
+   */
+  const startLoading = useCallback((msg?: string, ico?: string) => {
+    setIsLoading(true);
+    if (msg !== undefined) setMessage(msg);
+    if (ico !== undefined) setIcon(ico);
+  }, []);
+
+  /**
+   * Stop loading and clear message
+   */
+  const stopLoading = useCallback(() => {
+    setIsLoading(false);
+    setMessage(undefined);
+  }, []);
+
+  return {
+    isLoading,
+    message,
+    icon,
+    startLoading,
+    stopLoading,
+    setMessage,
+    setIcon,
+  };
+};
+
+export default useLoading;

package/src/presentation/molecules/AtomicConfirmationModal.tsx

@@ -0,0 +1,263 @@
+/**
+ * AtomicConfirmationModal - Universal Confirmation Dialog
+ *
+ * A reusable confirmation modal for destructive and important actions.
+ * Follows Material Design 3 dialog patterns and accessibility guidelines.
+ *
+ * Features:
+ * - Multiple variants (default, destructive, warning, success)
+ * - Configurable text and icons
+ * - Backdrop dismissal
+ * - Full keyboard and screen reader support
+ * - Theme-aware styling
+ *
+ * @example
+ * ```tsx
+ * // Destructive confirmation (delete)
+ * <AtomicConfirmationModal
+ *   visible={showDeleteModal}
+ *   variant="destructive"
+ *   title="Delete Item?"
+ *   message="This action cannot be undone. All data will be permanently deleted."
+ *   confirmText="Delete"
+ *   cancelText="Cancel"
+ *   onConfirm={handleDelete}
+ *   onCancel={() => setShowDeleteModal(false)}
+ * />
+ *
+ * // Generic confirmation
+ * <AtomicConfirmationModal
+ *   visible={showConfirmModal}
+ *   variant="default"
+ *   title="Confirm Action"
+ *   message="Are you sure you want to proceed?"
+ *   onConfirm={handleConfirm}
+ *   onCancel={() => setShowConfirmModal(false)}
+ * />
+ * ```
+ */
+
+import React from 'react';
+import { View, Modal, TouchableOpacity } from 'react-native';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+import { useLocalization } from '@domains/localization';
+import { AtomicText } from '../atoms/AtomicText';
+import { AtomicButton } from '../atoms/AtomicButton';
+import { AtomicIcon } from '../atoms/AtomicIcon';
+import {
+  AtomicConfirmationModalProps,
+  ConfirmationModalVariant,
+} from './confirmation-modal/types';
+import {
+  getVariantConfig,
+  getModalOverlayStyle,
+  getBackdropStyle,
+  getModalContainerStyle,
+  getIconContainerStyle,
+  getTitleContainerStyle,
+  getMessageContainerStyle,
+  getButtonContainerStyle,
+  getButtonStyle,
+} from './confirmation-modal/styles/confirmationModalStyles';
+
+export type { AtomicConfirmationModalProps };
+export type { ConfirmationModalVariant };
+
+export const AtomicConfirmationModal: React.FC<AtomicConfirmationModalProps> = ({
+  visible,
+  title,
+  message,
+  variant = 'default',
+  confirmText,
+  cancelText,
+  icon,
+  onConfirm,
+  onCancel,
+  showBackdrop = true,
+  backdropDismissible = true,
+  style,
+  testID = 'atomic-confirmation-modal',
+}) => {
+  const tokens = useAppDesignTokens();
+  const { t } = useLocalization();
+
+  // Get variant-specific configuration (icon and color only)
+  const variantConfig = getVariantConfig(variant, tokens);
+
+  // Get locale-aware default text based on variant
+  const getDefaultConfirmText = (): string => {
+    switch (variant) {
+      case 'destructive':
+        return t('general.delete');
+      case 'warning':
+        return t('general.continue');
+      case 'success':
+      case 'default':
+      default:
+        return t('general.confirm');
+    }
+  };
+
+  // Determine final text values
+  const finalConfirmText = confirmText || getDefaultConfirmText();
+  const finalCancelText = cancelText || t('general.cancel');
+
+  // Determine final icon
+  const finalIcon = icon || variantConfig.icon;
+
+  // Handle backdrop press
+  const handleBackdropPress = () => {
+    if (backdropDismissible) {
+      onCancel();
+    }
+  };
+
+  return (
+    <Modal
+      visible={visible}
+      transparent
+      animationType="fade"
+      onRequestClose={onCancel}
+      statusBarTranslucent
+      testID={testID}
+    >
+      <View style={getModalOverlayStyle(tokens)}>
+        {/* Backdrop - Tap to dismiss if enabled */}
+        {showBackdrop && (
+          <TouchableOpacity
+            style={getBackdropStyle()}
+            activeOpacity={1}
+            onPress={handleBackdropPress}
+            testID={`${testID}-backdrop`}
+          />
+        )}
+
+        {/* Modal Container */}
+        <View style={[getModalContainerStyle(tokens), style]}>
+          {/* Icon */}
+          <View style={getIconContainerStyle(tokens)}>
+            <AtomicIcon
+              name={finalIcon}
+              size="xl"
+              color={variantConfig.iconColor}
+              testID={`${testID}-icon`}
+            />
+          </View>
+
+          {/* Title */}
+          <View style={getTitleContainerStyle(tokens)}>
+            <AtomicText
+              type="titleLarge"
+              style={{
+                color: tokens.colors.textPrimary,
+                textAlign: 'center',
+                fontWeight: tokens.typography.bold,
+              }}
+              testID={`${testID}-title`}
+            >
+              {title}
+            </AtomicText>
+          </View>
+
+          {/* Message */}
+          <View style={getMessageContainerStyle(tokens)}>
+            <AtomicText
+              type="bodyMedium"
+              style={{
+                color: tokens.colors.textSecondary,
+                textAlign: 'center',
+                lineHeight: tokens.typography.bodyMedium.lineHeight,
+              }}
+              testID={`${testID}-message`}
+            >
+              {message}
+            </AtomicText>
+          </View>
+
+          {/* Action Buttons */}
+          <View style={getButtonContainerStyle(tokens)}>
+            {/* Cancel Button */}
+            <AtomicButton
+              variant="outline"
+              size="md"
+              onPress={onCancel}
+              style={getButtonStyle()}
+              testID={`${testID}-cancel-button`}
+            >
+              {finalCancelText}
+            </AtomicButton>
+
+            {/* Confirm Button */}
+            <AtomicButton
+              variant={variant === 'destructive' ? 'primary' : 'primary'}
+              size="md"
+              onPress={onConfirm}
+              style={[
+                getButtonStyle(),
+                ...(variant === 'destructive' ? [{ backgroundColor: tokens.colors.error }] : []),
+                ...(variant === 'warning' ? [{ backgroundColor: tokens.colors.warning }] : []),
+                ...(variant === 'success' ? [{ backgroundColor: tokens.colors.success }] : []),
+              ]}
+              testID={`${testID}-confirm-button`}
+            >
+              {finalConfirmText}
+            </AtomicButton>
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+};
+
+/**
+ * Hook for managing confirmation modal state
+ *
+ * @example
+ * ```tsx
+ * const { showConfirmation, confirmationProps } = useConfirmationModal({
+ *   title: 'Delete Item?',
+ *   message: 'This cannot be undone',
+ *   variant: 'destructive',
+ *   onConfirm: handleDelete,
+ * });
+ *
+ * // In JSX
+ * <AtomicConfirmationModal {...confirmationProps} />
+ * <Button onPress={showConfirmation}>Delete</Button>
+ * ```
+ */
+export const useConfirmationModal = (config: {
+  title: string;
+  message: string;
+  variant?: ConfirmationModalVariant;
+  confirmText?: string;
+  cancelText?: string;
+  onConfirm: () => void;
+}) => {
+  const [visible, setVisible] = React.useState(false);
+
+  const showConfirmation = () => setVisible(true);
+  const hideConfirmation = () => setVisible(false);
+
+  const handleConfirm = () => {
+    config.onConfirm();
+    hideConfirmation();
+  };
+
+  const confirmationProps: AtomicConfirmationModalProps = {
+    visible,
+    title: config.title,
+    message: config.message,
+    variant: config.variant || 'default',
+    confirmText: config.confirmText,
+    cancelText: config.cancelText,
+    onConfirm: handleConfirm,
+    onCancel: hideConfirmation,
+  };
+
+  return {
+    showConfirmation,
+    hideConfirmation,
+    confirmationProps,
+  };
+};

package/src/presentation/molecules/EmptyState.tsx

@@ -0,0 +1,130 @@
+/**
+ * EmptyState Molecule - Universal Empty State Display
+ *
+ * Displays icon, title, and subtitle for empty data scenarios
+ * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
+ *
+ * Atomic Design Level: MOLECULE
+ * Composition: Icon + AtomicText + Layout
+ *
+ * Usage:
+ * - Empty lists
+ * - Empty grids
+ * - No search results
+ * - No data states
+ */
+
+import React from 'react';
+import { View, StyleSheet, ViewStyle, TextStyle } from 'react-native';
+import { AtomicText, AtomicIcon } from '../atoms';
+import { useAppDesignTokens } from '../hooks/useAppDesignTokens';
+
+// =============================================================================
+// TYPE DEFINITIONS
+// =============================================================================
+
+export interface EmptyStateProps {
+  /** Material icon name */
+  icon: string;
+  /** Icon size (default: xl) */
+  iconSize?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+  /** Main heading text */
+  title: string;
+  /** Descriptive subtitle text */
+  subtitle?: string;
+  /** Custom icon color (default: textTertiary) */
+  iconColor?: string;
+  /** Custom title color (default: textPrimary) */
+  titleColor?: string;
+  /** Custom subtitle color (default: textSecondary) */
+  subtitleColor?: string;
+  /** Container style override */
+  style?: ViewStyle;
+  /** Title style override */
+  titleStyle?: TextStyle;
+  /** Subtitle style override */
+  subtitleStyle?: TextStyle;
+}
+
+// =============================================================================
+// COMPONENT IMPLEMENTATION
+// =============================================================================
+
+export const EmptyState: React.FC<EmptyStateProps> = ({
+  icon,
+  iconSize = 'xl',
+  title,
+  subtitle,
+  iconColor,
+  titleColor,
+  subtitleColor,
+  style,
+  titleStyle,
+  subtitleStyle,
+}) => {
+  const tokens = useAppDesignTokens();
+  const styles = getStyles(tokens);
+
+  return (
+    <View style={[styles.container, style]}>
+      <AtomicIcon
+        name={icon}
+        size={iconSize}
+        customColor={iconColor || tokens.colors.textSecondary}
+      />
+      <AtomicText
+        type="headlineMedium"
+        color={titleColor || tokens.colors.textPrimary}
+        style={StyleSheet.flatten([
+          styles.title,
+          titleStyle,
+        ])}
+      >
+        {title}
+      </AtomicText>
+      {subtitle && (
+        <AtomicText
+          type="bodyMedium"
+          color={subtitleColor || tokens.colors.textSecondary}
+          style={StyleSheet.flatten([
+            styles.subtitle,
+            subtitleStyle,
+          ])}
+        >
+          {subtitle}
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+// =============================================================================
+// STYLES
+// =============================================================================
+
+const getStyles = (tokens: ReturnType<typeof useAppDesignTokens>) =>
+  StyleSheet.create({
+    container: {
+      flex: 1,
+      justifyContent: 'center',
+      alignItems: 'center',
+      paddingVertical: tokens.spacing.xl,
+      paddingHorizontal: tokens.spacing.lg,
+    },
+    title: {
+      fontSize: tokens.typography.headingMedium.fontSize,
+      fontWeight: tokens.typography.headingMedium.fontWeight,
+      marginTop: tokens.spacing.md,
+      textAlign: 'center',
+    },
+    subtitle: {
+      fontSize: tokens.typography.bodySmall.fontSize,
+      marginTop: tokens.spacing.xs,
+      textAlign: 'center',
+    },
+  });
+
+// =============================================================================
+// EXPORTS
+// =============================================================================
+