@umituz/react-native-loading 1.0.0

package/src/domain/entities/Loading.ts

@@ -0,0 +1,295 @@
+/**
+ * Loading Domain - Entity Definitions
+ *
+ * Core types and interfaces for loading states and animations.
+ * Provides consistent loading UX across all apps.
+ *
+ * @domain loading
+ * @layer domain/entities
+ */
+
+/**
+ * Loading animation type
+ */
+export type LoadingType = 'pulse' | 'spinner' | 'dots' | 'skeleton';
+
+/**
+ * Loading size preset
+ */
+export type LoadingSize = 'small' | 'medium' | 'large';
+
+/**
+ * Skeleton loader pattern
+ */
+export type SkeletonPattern = 'list' | 'card' | 'profile' | 'text' | 'custom';
+
+/**
+ * Loading configuration
+ */
+export interface LoadingConfig {
+  /** Animation type */
+  type: LoadingType;
+  /** Size preset */
+  size: LoadingSize;
+  /** Loading emoji (customizable per app) */
+  emoji?: string;
+  /** Loading message */
+  message?: string;
+  /** Full screen mode */
+  fullScreen?: boolean;
+}
+
+/**
+ * Size configuration for each preset
+ */
+export interface SizeConfig {
+  emojiSize: number;
+  showMessage: boolean;
+  spacing: number;
+}
+
+/**
+ * Skeleton loader configuration
+ */
+export interface SkeletonConfig {
+  width?: number | string;
+  height?: number;
+  borderRadius?: number;
+  marginBottom?: number;
+}
+
+/**
+ * Animation timing configuration
+ */
+export interface AnimationConfig {
+  duration: number;
+  toValue: number;
+  easing?: 'linear' | 'ease' | 'easeIn' | 'easeOut' | 'easeInOut';
+}
+
+/**
+ * Size configurations for loading states
+ */
+export const SIZE_CONFIGS: Record<LoadingSize, SizeConfig> = {
+  small: {
+    emojiSize: 32,
+    showMessage: false,
+    spacing: 8,
+  },
+  medium: {
+    emojiSize: 48,
+    showMessage: true,
+    spacing: 12,
+  },
+  large: {
+    emojiSize: 64,
+    showMessage: true,
+    spacing: 16,
+  },
+};
+
+/**
+ * App-specific emoji presets
+ * Apps can override the default emoji based on their theme
+ */
+export const LOADING_EMOJIS = {
+  meditation: '🧘',
+  fitness: '💪',
+  workout: '🏋️',
+  running: '🏃',
+  cycling: '🚴',
+  yoga: '🧘‍♀️',
+  health: '🏥',
+  nutrition: '🥗',
+  productivity: '⏳',
+  education: '📚',
+  reading: '📖',
+  music: '🎵',
+  art: '🎨',
+  travel: '✈️',
+  finance: '💰',
+  shopping: '🛍️',
+  cooking: '👨‍🍳',
+  gaming: '🎮',
+  default: '⌛',
+} as const;
+
+/**
+ * Animation configurations
+ */
+export const ANIMATION_CONFIGS = {
+  pulse: {
+    duration: 1000,
+    toValue: 1.15,
+    easing: 'easeInOut' as const,
+  },
+  spinner: {
+    duration: 1000,
+    toValue: 360,
+    easing: 'linear' as const,
+  },
+  dots: {
+    duration: 500,
+    toValue: 1,
+    easing: 'easeInOut' as const,
+  },
+  skeleton: {
+    duration: 1200,
+    toValue: 1,
+    easing: 'linear' as const,
+  },
+} as const;
+
+/**
+ * Skeleton pattern configurations
+ */
+export const SKELETON_PATTERNS: Record<SkeletonPattern, SkeletonConfig[]> = {
+  list: [
+    { width: '100%', height: 60, borderRadius: 8, marginBottom: 12 },
+  ],
+  card: [
+    { width: '100%', height: 200, borderRadius: 12, marginBottom: 16 },
+    { width: '80%', height: 20, borderRadius: 4, marginBottom: 8 },
+    { width: '60%', height: 16, borderRadius: 4, marginBottom: 0 },
+  ],
+  profile: [
+    { width: 80, height: 80, borderRadius: 40, marginBottom: 16 },
+    { width: '60%', height: 24, borderRadius: 4, marginBottom: 8 },
+    { width: '40%', height: 16, borderRadius: 4, marginBottom: 0 },
+  ],
+  text: [
+    { width: '100%', height: 16, borderRadius: 4, marginBottom: 8 },
+    { width: '90%', height: 16, borderRadius: 4, marginBottom: 8 },
+    { width: '95%', height: 16, borderRadius: 4, marginBottom: 0 },
+  ],
+  custom: [],
+};
+
+/**
+ * Loading utility class
+ */
+export class LoadingUtils {
+  /**
+   * Get emoji for app category
+   */
+  static getEmojiForCategory(category: string): string {
+    const normalizedCategory = category.toLowerCase();
+
+    if (normalizedCategory.includes('meditation') || normalizedCategory.includes('mindfulness')) {
+      return LOADING_EMOJIS.meditation;
+    }
+    if (normalizedCategory.includes('fitness') || normalizedCategory.includes('gym')) {
+      return LOADING_EMOJIS.fitness;
+    }
+    if (normalizedCategory.includes('workout')) {
+      return LOADING_EMOJIS.workout;
+    }
+    if (normalizedCategory.includes('running') || normalizedCategory.includes('run')) {
+      return LOADING_EMOJIS.running;
+    }
+    if (normalizedCategory.includes('cycling') || normalizedCategory.includes('bike')) {
+      return LOADING_EMOJIS.cycling;
+    }
+    if (normalizedCategory.includes('yoga')) {
+      return LOADING_EMOJIS.yoga;
+    }
+    if (normalizedCategory.includes('health') || normalizedCategory.includes('medical')) {
+      return LOADING_EMOJIS.health;
+    }
+    if (normalizedCategory.includes('nutrition') || normalizedCategory.includes('diet')) {
+      return LOADING_EMOJIS.nutrition;
+    }
+    if (normalizedCategory.includes('productivity') || normalizedCategory.includes('task')) {
+      return LOADING_EMOJIS.productivity;
+    }
+    if (normalizedCategory.includes('education') || normalizedCategory.includes('learn')) {
+      return LOADING_EMOJIS.education;
+    }
+    if (normalizedCategory.includes('reading') || normalizedCategory.includes('book')) {
+      return LOADING_EMOJIS.reading;
+    }
+    if (normalizedCategory.includes('music') || normalizedCategory.includes('audio')) {
+      return LOADING_EMOJIS.music;
+    }
+    if (normalizedCategory.includes('art') || normalizedCategory.includes('creative')) {
+      return LOADING_EMOJIS.art;
+    }
+    if (normalizedCategory.includes('travel') || normalizedCategory.includes('trip')) {
+      return LOADING_EMOJIS.travel;
+    }
+    if (normalizedCategory.includes('finance') || normalizedCategory.includes('money')) {
+      return LOADING_EMOJIS.finance;
+    }
+    if (normalizedCategory.includes('shopping') || normalizedCategory.includes('shop')) {
+      return LOADING_EMOJIS.shopping;
+    }
+    if (normalizedCategory.includes('cooking') || normalizedCategory.includes('recipe')) {
+      return LOADING_EMOJIS.cooking;
+    }
+    if (normalizedCategory.includes('gaming') || normalizedCategory.includes('game')) {
+      return LOADING_EMOJIS.gaming;
+    }
+
+    return LOADING_EMOJIS.default;
+  }
+
+  /**
+   * Get default loading config
+   */
+  static getDefaultConfig(overrides?: Partial<LoadingConfig>): LoadingConfig {
+    return {
+      type: 'pulse',
+      size: 'large',
+      emoji: LOADING_EMOJIS.default,
+      fullScreen: false,
+      ...overrides,
+    };
+  }
+
+  /**
+   * Get size config
+   */
+  static getSizeConfig(size: LoadingSize): SizeConfig {
+    return SIZE_CONFIGS[size];
+  }
+
+  /**
+   * Get animation config
+   */
+  static getAnimationConfig(type: LoadingType): AnimationConfig {
+    return ANIMATION_CONFIGS[type];
+  }
+
+  /**
+   * Get skeleton pattern
+   */
+  static getSkeletonPattern(pattern: SkeletonPattern): SkeletonConfig[] {
+    return SKELETON_PATTERNS[pattern];
+  }
+
+  /**
+   * Validate loading config
+   */
+  static validateConfig(config: Partial<LoadingConfig>): LoadingConfig {
+    return {
+      type: config.type || 'pulse',
+      size: config.size || 'large',
+      emoji: config.emoji || LOADING_EMOJIS.default,
+      message: config.message,
+      fullScreen: config.fullScreen ?? false,
+    };
+  }
+}
+
+/**
+ * Loading constants
+ */
+export const LOADING_CONSTANTS = {
+  DEFAULT_TYPE: 'pulse' as LoadingType,
+  DEFAULT_SIZE: 'large' as LoadingSize,
+  DEFAULT_EMOJI: LOADING_EMOJIS.default,
+  BREATHING_CYCLE_DURATION: 2000, // 2 seconds (inhale + exhale)
+  SPINNER_ROTATION_DURATION: 1000, // 1 second
+  DOTS_WAVE_DURATION: 1500, // 1.5 seconds
+  SKELETON_SHIMMER_DURATION: 1200, // 1.2 seconds
+} as const;

package/src/index.ts

@@ -0,0 +1,117 @@
+/**
+ * Loading Domain - Barrel Export
+ *
+ * Public API for the loading domain.
+ * Provides consistent loading states and animations across all apps.
+ *
+ * Features:
+ * - Breathing animation loading state (meditation-inspired)
+ * - Skeleton loaders with shimmer effect
+ * - Loading state management hooks
+ * - App-specific emoji presets
+ * - Configurable sizes and patterns
+ *
+ * Usage:
+ * ```tsx
+ * import {
+ *   LoadingState,
+ *   SkeletonLoader,
+ *   useLoading,
+ *   LOADING_EMOJIS,
+ * } from '@umituz/react-native-loading';
+ *
+ * // Basic loading state
+ * const MyScreen = () => {
+ *   const { isLoading, startLoading, stopLoading } = useLoading();
+ *
+ *   return (
+ *     <View>
+ *       {isLoading ? (
+ *         <LoadingState message="Loading..." />
+ *       ) : (
+ *         <Content />
+ *       )}
+ *     </View>
+ *   );
+ * };
+ *
+ * // Skeleton loader for lists
+ * const ListScreen = () => {
+ *   const [data, setData] = useState([]);
+ *   const { isLoading } = useLoading();
+ *
+ *   return (
+ *     <View>
+ *       {isLoading ? (
+ *         <SkeletonLoader pattern="list" count={5} />
+ *       ) : (
+ *         <FlatList data={data} ... />
+ *       )}
+ *     </View>
+ *   );
+ * };
+ *
+ * // With async wrapper
+ * const DataScreen = () => {
+ *   const { isLoading, loadingMessage, withLoading } = useLoading();
+ *
+ *   const loadData = () => withLoading(
+ *     fetchData(),
+ *     'Loading data...'
+ *   );
+ *
+ *   return (
+ *     <View>
+ *       {isLoading && <LoadingState message={loadingMessage} />}
+ *       <Button onPress={loadData}>Load</Button>
+ *     </View>
+ *   );
+ * };
+ *
+ * // Custom emoji per app
+ * const FitnessLoadingScreen = () => (
+ *   <LoadingState
+ *     emoji={LOADING_EMOJIS.fitness}
+ *     message="Loading workouts..."
+ *   />
+ * );
+ * ```
+ */
+
+// Domain Entities
+export type {
+  LoadingType,
+  LoadingSize,
+  SkeletonPattern,
+  LoadingConfig,
+  SizeConfig,
+  SkeletonConfig,
+  AnimationConfig,
+} from './domain/entities/Loading';
+
+export {
+  SIZE_CONFIGS,
+  LOADING_EMOJIS,
+  ANIMATION_CONFIGS,
+  SKELETON_PATTERNS,
+  LoadingUtils,
+  LOADING_CONSTANTS,
+} from './domain/entities/Loading';
+
+// Presentation Components
+export {
+  LoadingState,
+  type LoadingStateProps,
+} from './presentation/components/LoadingState';
+
+export {
+  SkeletonLoader,
+  type SkeletonLoaderProps,
+} from './presentation/components/SkeletonLoader';
+
+// Presentation Hooks
+export {
+  useLoading,
+  useSimpleLoading,
+  type UseLoadingReturn,
+} from './presentation/hooks/useLoading';

package/src/presentation/components/LoadingState.tsx

@@ -0,0 +1,161 @@
+/**
+ * Loading Domain - LoadingState Component
+ *
+ * Universal loading component with breathing animation.
+ * Provides consistent, calm loading UX across all apps.
+ *
+ * Adapted from meditation_timer app's LoadingState component.
+ *
+ * @domain loading
+ * @layer presentation/components
+ */
+
+import React, { useEffect, useRef } from 'react';
+import { View, StyleSheet, Animated, Easing, type StyleProp, type ViewStyle, type TextStyle } from 'react-native';
+import { useAppDesignTokens, AtomicText } from '@umituz/react-native-design-system';
+import type { LoadingSize } from '../../domain/entities/Loading';
+import {
+  SIZE_CONFIGS,
+  LOADING_EMOJIS,
+  LOADING_CONSTANTS,
+} from '../../domain/entities/Loading';
+
+/**
+ * LoadingState component props
+ */
+export interface LoadingStateProps {
+  /** Loading emoji - default: ⌛ (customizable per app) */
+  emoji?: string;
+  /** Loading message (optional) */
+  message?: string;
+  /** Size: small (inline), medium (section), large (full screen) */
+  size?: LoadingSize;
+  /** Full screen layout vs inline */
+  fullScreen?: boolean;
+  /** Custom container style */
+  style?: StyleProp<ViewStyle>;
+  /** Custom message style */
+  messageStyle?: StyleProp<TextStyle>;
+}
+
+/**
+ * LoadingState Component
+ *
+ * Universal loading indicator with breathing animation.
+ * Creates a calm, mindful loading experience.
+ *
+ * USAGE:
+ * ```typescript
+ * // Basic usage
+ * <LoadingState />
+ *
+ * // With message
+ * <LoadingState message="Loading data..." size="medium" />
+ *
+ * // Full screen
+ * <LoadingState fullScreen message="Please wait..." />
+ *
+ * // Custom emoji (per app theme)
+ * <LoadingState emoji="🧘" message="Loading meditations..." />
+ *
+ * // Inline loading
+ * <LoadingState size="small" />
+ * ```
+ */
+export const LoadingState: React.FC<LoadingStateProps> = ({
+  emoji = LOADING_EMOJIS.default,
+  message,
+  size = 'large',
+  fullScreen = false,
+  style,
+  messageStyle,
+}) => {
+  const tokens = useAppDesignTokens();
+  const config = SIZE_CONFIGS[size];
+
+  // Animated value for emoji pulse (breathing effect)
+  const scaleAnim = useRef(new Animated.Value(1)).current;
+
+  useEffect(() => {
+    // Meditation breathing animation: 2 second cycle (inhale/exhale)
+    const breathingAnimation = Animated.loop(
+      Animated.sequence([
+        // Inhale - expand
+        Animated.timing(scaleAnim, {
+          toValue: 1.15,
+          duration: 1000,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+        // Exhale - contract
+        Animated.timing(scaleAnim, {
+          toValue: 1,
+          duration: 1000,
+          easing: Easing.inOut(Easing.ease),
+          useNativeDriver: true,
+        }),
+      ])
+    );
+
+    breathingAnimation.start();
+
+    return () => {
+      breathingAnimation.stop();
+    };
+  }, [scaleAnim]);
+
+  return (
+    <View
+      style={[
+        styles.container,
+        fullScreen && styles.fullScreen,
+        { gap: config.spacing },
+        style,
+      ]}
+    >
+      {/* Animated Emoji with breathing pulse */}
+      <Animated.Text
+        style={[
+          styles.emoji,
+          {
+            fontSize: config.emojiSize,
+            transform: [{ scale: scaleAnim }],
+          },
+        ]}
+      >
+        {emoji}
+      </Animated.Text>
+
+      {/* Optional Loading Message */}
+      {config.showMessage && message && (
+        <AtomicText
+          type="bodySmall"
+          color="secondary"
+          style={[styles.message, messageStyle]}
+        >
+          {message}
+        </AtomicText>
+      )}
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    alignItems: 'center',
+    paddingVertical: 20,
+  },
+  fullScreen: {
+    flex: 1,
+    paddingVertical: 60,
+  },
+  emoji: {
+    fontFamily: 'System', // Emoji font
+  },
+  message: {
+    textAlign: 'center',
+    opacity: 0.7,
+    paddingHorizontal: 32,
+  },
+});