@umituz/react-native-design-system 1.3.6 → 1.4.0

package/lib/presentation/loading/presentation/hooks/useLoading.js

@@ -1,49 +0,0 @@
-/**
- * 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';
-// =============================================================================
-// HOOK IMPLEMENTATION
-// =============================================================================
-export const useLoading = (initialConfig) => {
-    const [isLoading, setIsLoading] = useState(initialConfig?.isLoading ?? false);
-    const [message, setMessage] = useState(initialConfig?.message);
-    const [icon, setIcon] = useState(initialConfig?.icon);
-    /**
-     * Start loading with optional message and icon
-     */
-    const startLoading = useCallback((msg, ico) => {
-        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;
-//# sourceMappingURL=useLoading.js.map

package/lib/presentation/loading/presentation/hooks/useLoading.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useLoading.js","sourceRoot":"","sources":["../../../../../src/presentation/loading/presentation/hooks/useLoading.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,OAAO,CAAC;AAiD9C,gFAAgF;AAChF,sBAAsB;AACtB,gFAAgF;AAEhF,MAAM,CAAC,MAAM,UAAU,GAAG,CAAC,aAA6B,EAAoB,EAAE;IAC5E,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,aAAa,EAAE,SAAS,IAAI,KAAK,CAAC,CAAC;IAC9E,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAqB,aAAa,EAAE,OAAO,CAAC,CAAC;IACnF,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAqB,aAAa,EAAE,IAAI,CAAC,CAAC;IAE1E;;OAEG;IACH,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,GAAY,EAAE,GAAY,EAAE,EAAE;QAC9D,YAAY,CAAC,IAAI,CAAC,CAAC;QACnB,IAAI,GAAG,KAAK,SAAS;YAAE,UAAU,CAAC,GAAG,CAAC,CAAC;QACvC,IAAI,GAAG,KAAK,SAAS;YAAE,OAAO,CAAC,GAAG,CAAC,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP;;OAEG;IACH,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,YAAY,CAAC,KAAK,CAAC,CAAC;QACpB,UAAU,CAAC,SAAS,CAAC,CAAC;IACxB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO;QACL,SAAS;QACT,OAAO;QACP,IAAI;QACJ,YAAY;QACZ,WAAW;QACX,UAAU;QACV,OAAO;KACR,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/src/presentation/loading/index.ts

@@ -1,40 +0,0 @@
-/**
- * Loading Domain - Public API
- *
- * Domain-Driven Design (DDD) Architecture
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * This is the SINGLE SOURCE OF TRUTH for the Loading domain.
- * ALL imports from this domain MUST go through this file.
- *
- * Architecture:
- * - presentation/components: UI components (LoadingState, LoadingSpinner)
- * - presentation/hooks: React hooks (useLoading)
- *
- * Usage:
- *   import { LoadingState, LoadingSpinner, useLoading } from '@domains/design-system';
- */
-
-// =============================================================================
-// PRESENTATION LAYER - Components
-// =============================================================================
-
-export { LoadingState } from './presentation/components/LoadingState';
-export type { LoadingStateProps, LoadingStateSize } from './presentation/components/LoadingState';
-
-export { LoadingSpinner } from './presentation/components/LoadingSpinner';
-export type {
-  LoadingSpinnerProps,
-  LoadingSpinnerSize,
-  LoadingSpinnerColor,
-} from './presentation/components/LoadingSpinner';
-
-// =============================================================================
-// PRESENTATION LAYER - Hooks
-// =============================================================================
-
-export { useLoading } from './presentation/hooks/useLoading';
-export type {
-  LoadingConfig,
-  UseLoadingReturn,
-} from './presentation/hooks/useLoading';

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

@@ -1,116 +0,0 @@
-/**
- * LoadingSpinner - Theme-Aware Activity Indicator
- *
- * Refactored from AtomicLoadingSpinner - now part of Loading domain
- * Uses central useAppDesignTokens() hook for automatic theme switching
- * Theme: {{THEME_NAME}} ({{CATEGORY}} category)
- *
- * Features:
- * - ✅ AUTOMATIC theme switching via useAppDesignTokens()
- * - ✅ Multiple size variants (small, medium, large)
- * - ✅ Dynamic color customization
- * - ✅ Overlay support
- * - ✅ Message display
- */
-
-import React from 'react';
-import { View, ActivityIndicator, ViewStyle } from 'react-native';
-import { useAppDesignTokens } from '../../../hooks/useAppDesignTokens';
-import { withAlpha } from '../../../tokens/AppDesignTokens';
-import { AtomicText } from '../../../atoms/AtomicText';
-
-// =============================================================================
-// TYPE DEFINITIONS
-// =============================================================================
-
-export type LoadingSpinnerSize = 'small' | 'medium' | 'large';
-export type LoadingSpinnerColor = 'primary' | 'secondary' | 'white';
-
-export interface LoadingSpinnerProps {
-  size?: LoadingSpinnerSize;
-  color?: LoadingSpinnerColor;
-  message?: string;
-  overlay?: boolean;
-  style?: ViewStyle;
-}
-
-// =============================================================================
-// SIZE VARIANTS
-// =============================================================================
-
-const sizeVariants: Record<LoadingSpinnerSize, 'small' | 'large'> = {
-  small: 'small',
-  medium: 'large',
-  large: 'large',
-};
-
-// =============================================================================
-// COMPONENT IMPLEMENTATION
-// =============================================================================
-
-export const LoadingSpinner: React.FC<LoadingSpinnerProps> = ({
-  size = 'medium',
-  color = 'primary',
-  message,
-  overlay = false,
-  style,
-}) => {
-  // ✅ DYNAMIC tokens from central hook
-  const tokens = useAppDesignTokens();
-
-  const spinnerSize = sizeVariants[size];
-
-  /**
-   * Get spinner color from dynamic theme
-   * ✅ Automatically updates when theme changes
-   */
-  const getSpinnerColor = (): string => {
-    switch (color) {
-      case 'primary':
-        return tokens.colors.primary;
-      case 'secondary':
-        return tokens.colors.secondary;
-      case 'white':
-        return tokens.colors.textInverse;
-      default:
-        return tokens.colors.primary;
-    }
-  };
-
-  const spinnerColor = getSpinnerColor();
-
-  const containerStyle: ViewStyle = overlay
-    ? {
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
-        backgroundColor: withAlpha(tokens.colors.black, 0.5),
-        justifyContent: 'center',
-        alignItems: 'center',
-        zIndex: 9999,
-      }
-    : {
-        justifyContent: 'center',
-        alignItems: 'center',
-        padding: tokens.spacing.lg,
-      };
-
-  return (
-    <View style={[containerStyle, style]}>
-      <ActivityIndicator size={spinnerSize} color={spinnerColor} />
-      {message && (
-        <AtomicText
-          type="bodyMedium"
-          color={overlay ? 'inverse' : 'primary'}
-          style={{ marginTop: tokens.spacing.md, textAlign: 'center' }}
-        >
-          {message}
-        </AtomicText>
-      )}
-    </View>
-  );
-};
-
-export default LoadingSpinner;

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

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

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