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

package/src/molecules/countdown/utils/TimeCalculator.ts

@@ -0,0 +1,46 @@
+import type { TimeRemaining } from '../types/CountdownTypes';
+
+export function calculateTimeRemaining(targetDate: Date | string): TimeRemaining {
+    const now = new Date().getTime();
+    const target = typeof targetDate === 'string'
+        ? new Date(targetDate).getTime()
+        : targetDate.getTime();
+
+    const difference = Math.max(0, target - now);
+    const totalSeconds = Math.floor(difference / 1000);
+
+    const days = Math.floor(totalSeconds / (24 * 3600));
+    const hours = Math.floor((totalSeconds % (24 * 3600)) / 3600);
+    const minutes = Math.floor((totalSeconds % 3600) / 60);
+    const seconds = totalSeconds % 60;
+
+    return {
+        days,
+        hours,
+        minutes,
+        seconds,
+        totalSeconds,
+        isExpired: totalSeconds <= 0,
+    };
+}
+
+export function padNumber(num: number): string {
+    return String(num).padStart(2, '0');
+}
+
+export function getNextDayStart(date?: Date): Date {
+    const baseDate = date || new Date();
+    const nextDay = new Date(baseDate);
+    nextDay.setDate(nextDay.getDate() + 1);
+    nextDay.setHours(0, 0, 0, 0);
+    return nextDay;
+}
+
+export function getNextYearStart(date?: Date): Date {
+    const baseDate = date || new Date();
+    const nextYear = new Date(baseDate);
+    nextYear.setFullYear(nextYear.getFullYear() + 1);
+    nextYear.setMonth(0, 1);
+    nextYear.setHours(0, 0, 0, 0);
+    return nextYear;
+}

package/src/molecules/emoji/domain/entities/Emoji.ts

@@ -0,0 +1,129 @@
+/**
+ * Emoji Domain Entities
+ *
+ * Core emoji types and interfaces for emoji picker functionality
+ *
+ * Features:
+ * - Emoji selection with picker UI
+ * - Emoji object with metadata (emoji string, name, slug, unicode)
+ * - Category-based organization
+ * - Search functionality
+ * - Recent emojis tracking
+ *
+ * Dependencies:
+ * - rn-emoji-keyboard (emoji picker UI library)
+ */
+
+/**
+ * Emoji object returned by the picker
+ * Conforms to rn-emoji-keyboard EmojiType structure
+ */
+export interface EmojiObject {
+  /** The actual emoji character (e.g., "😀") */
+  emoji: string;
+
+  /** Human-readable name (e.g., "Grinning Face") */
+  name: string;
+
+  /** URL-friendly slug (e.g., "grinning_face") */
+  slug: string;
+
+  /** Unicode codepoint (e.g., "1F600") */
+  unicode_version: string;
+
+  /** Emoji category (e.g., "smileys_emotion") */
+  category?: string;
+}
+
+/**
+ * Emoji picker configuration
+ */
+export interface EmojiPickerConfig {
+  /** Whether to show category tabs */
+  enableCategoryTabs?: boolean;
+
+  /** Whether to enable search */
+  enableSearch?: boolean;
+
+  /** Whether to show recently used emojis */
+  enableRecentlyUsed?: boolean;
+
+  /** Custom category order */
+  categoryOrder?: string[];
+
+  /** Translation object for labels */
+  translation?: {
+    search: string;
+    categories: Record<string, string>;
+  };
+}
+
+/**
+ * Emoji selection callback type
+ */
+export type EmojiSelectCallback = (emojiObject: EmojiObject) => void;
+
+/**
+ * Emoji picker categories
+ * Based on Unicode emoji categories
+ */
+export enum EmojiCategory {
+  SMILEYS_EMOTION = 'smileys_emotion',
+  PEOPLE_BODY = 'people_body',
+  ANIMALS_NATURE = 'animals_nature',
+  FOOD_DRINK = 'food_drink',
+  TRAVEL_PLACES = 'travel_places',
+  ACTIVITIES = 'activities',
+  OBJECTS = 'objects',
+  SYMBOLS = 'symbols',
+  FLAGS = 'flags',
+}
+
+/**
+ * Emoji picker state
+ */
+export interface EmojiPickerState {
+  /** Whether picker is currently open */
+  isOpen: boolean;
+
+  /** Currently selected emoji (null if none selected) */
+  selectedEmoji: string | null;
+}
+
+/**
+ * Emoji validation utilities
+ */
+export const EmojiUtils = {
+  /**
+   * Check if a string contains valid emoji
+   * @param text - Text to validate
+   * @returns True if contains emoji
+   */
+  isEmoji: (text: string): boolean => {
+    if (!text || text.length === 0) {
+      return false;
+    }
+    // Basic emoji regex (covers most common emojis)
+    const emojiRegex = /[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u;
+    return emojiRegex.test(text);
+  },
+
+  /**
+   * Extract first emoji from text
+   * @param text - Text containing emoji
+   * @returns First emoji or empty string
+   */
+  extractFirstEmoji: (text: string): string => {
+    const match = text.match(/[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/u);
+    return match ? match[0] : '';
+  },
+
+  /**
+   * Get emoji length (handles multi-byte emojis correctly)
+   * @param emoji - Emoji string
+   * @returns Actual character count
+   */
+  getEmojiLength: (emoji: string): number => {
+    return Array.from(emoji).length;
+  },
+} as const;

package/src/molecules/emoji/index.ts

@@ -0,0 +1,177 @@
+/**
+ * Emoji Domain - Barrel Export
+ *
+ * Global infrastructure domain for emoji selection and display
+ *
+ * Features:
+ * - Universal emoji picker component
+ * - Category-based emoji selection (smileys, animals, food, etc.)
+ * - Search functionality
+ * - Recently used emojis tracking
+ * - React hook for state management
+ * - Theme-aware styling
+ * - Validation utilities
+ *
+ * Dependencies:
+ * - rn-emoji-keyboard (emoji picker UI library)
+ *
+ * USAGE:
+ * ```typescript
+ * // Method 1: Using hook (recommended)
+ * import { useEmojiPicker, EmojiPicker } from '@umituz/react-native-emoji';
+ *
+ * const MyComponent = () => {
+ *   const {
+ *     isOpen,
+ *     selectedEmoji,
+ *     openPicker,
+ *     closePicker,
+ *     handleEmojiSelect,
+ *   } = useEmojiPicker();
+ *
+ *   return (
+ *     <View>
+ *       <TouchableOpacity onPress={openPicker}>
+ *         <Text style={{ fontSize: 32 }}>
+ *           {selectedEmoji || 'Select Emoji'}
+ *         </Text>
+ *       </TouchableOpacity>
+ *
+ *       <EmojiPicker
+ *         open={isOpen}
+ *         onClose={closePicker}
+ *         onEmojiSelected={handleEmojiSelect}
+ *       />
+ *     </View>
+ *   );
+ * };
+ *
+ * // Method 2: Manual state management
+ * import { EmojiPicker, type EmojiObject } from '@umituz/react-native-emoji';
+ *
+ * const MyComponent = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *   const [emoji, setEmoji] = useState('');
+ *
+ *   const handleSelect = (emojiObject: EmojiObject) => {
+ *     setEmoji(emojiObject.emoji);
+ *     setIsOpen(false);
+ *   };
+ *
+ *   return (
+ *     <View>
+ *       <TouchableOpacity onPress={() => setIsOpen(true)}>
+ *         <Text>{emoji || 'Select'}</Text>
+ *       </TouchableOpacity>
+ *
+ *       <EmojiPicker
+ *         open={isOpen}
+ *         onClose={() => setIsOpen(false)}
+ *         onEmojiSelected={handleSelect}
+ *       />
+ *     </View>
+ *   );
+ * };
+ *
+ * // Validation utilities
+ * import { EmojiUtils } from '@umituz/react-native-emoji';
+ *
+ * const isValid = EmojiUtils.isEmoji('😀'); // true
+ * const first = EmojiUtils.extractFirstEmoji('Hello 😀 World 🌍'); // '😀'
+ * const length = EmojiUtils.getEmojiLength('👨‍👩‍👧‍👦'); // 1 (handles multi-byte)
+ * ```
+ *
+ * REAL-WORLD EXAMPLE (Category Creation):
+ * ```typescript
+ * import { useEmojiPicker, EmojiPicker } from '@umituz/react-native-emoji';
+ * import { AtomicInput, AtomicText } from '@umituz/react-native-design-system';
+ *
+ * const AddCategoryScreen = () => {
+ *   const [name, setName] = useState('');
+ *   const {
+ *     selectedEmoji,
+ *     isOpen,
+ *     openPicker,
+ *     closePicker,
+ *     handleEmojiSelect,
+ *   } = useEmojiPicker();
+ *
+ *   const handleSubmit = () => {
+ *     if (!name.trim() || !selectedEmoji) {
+ *       alert('Please fill all fields');
+ *       return;
+ *     }
+ *
+ *     // Save category with emoji
+ *     saveCategory({ name, emoji: selectedEmoji });
+ *   };
+ *
+ *   return (
+ *     <View>
+ *       <AtomicInput
+ *         label="Category Name"
+ *         value={name}
+ *         onChangeText={setName}
+ *       />
+ *
+ *       <TouchableOpacity onPress={openPicker}>
+ *         <Text style={{ fontSize: 32, textAlign: 'center' }}>
+ *           {selectedEmoji || 'Tap to select emoji'}
+ *         </Text>
+ *       </TouchableOpacity>
+ *
+ *       <AtomicButton onPress={handleSubmit}>
+ *         Create Category
+ *       </AtomicButton>
+ *
+ *       <EmojiPicker
+ *         open={isOpen}
+ *         onClose={closePicker}
+ *         onEmojiSelected={handleEmojiSelect}
+ *       />
+ *     </View>
+ *   );
+ * };
+ * ```
+ *
+ * EMOJI CATEGORIES:
+ * - 😀 Smileys & Emotion
+ * - 👨 People & Body
+ * - 🐶 Animals & Nature
+ * - 🍔 Food & Drink
+ * - ✈️ Travel & Places
+ * - ⚽ Activities
+ * - 💡 Objects
+ * - ❤️ Symbols
+ * - 🏁 Flags
+ *
+ * FEATURES:
+ * - 3600+ emojis across 9 categories
+ * - Full Unicode 15.0 support
+ * - Search by name or keywords
+ * - Recently used tracking (persisted)
+ * - Category change animations
+ * - Smooth scrolling and gestures
+ * - Theme-aware (light/dark mode)
+ * - Localization support
+ */
+
+// Domain Entities
+export type {
+  EmojiObject,
+  EmojiPickerConfig,
+  EmojiSelectCallback,
+  EmojiPickerState,
+} from './domain/entities/Emoji';
+export { EmojiCategory, EmojiUtils } from './domain/entities/Emoji';
+
+// Presentation Components
+export { EmojiPicker } from './presentation/components/EmojiPicker';
+export type { EmojiPickerProps } from './presentation/components/EmojiPicker';
+
+// Presentation Hooks
+export { useEmojiPicker } from './presentation/hooks/useEmojiPicker';
+export type {
+  UseEmojiPickerOptions,
+  UseEmojiPickerReturn,
+} from './presentation/hooks/useEmojiPicker';

package/src/molecules/emoji/presentation/components/EmojiPicker.tsx

@@ -0,0 +1,102 @@
+/**
+ * EmojiPicker Component
+ *
+ * Universal emoji picker component wrapping rn-emoji-keyboard
+ * Provides a clean, factory-standard interface for emoji selection
+ *
+ * Features:
+ * - Category-based emoji selection
+ * - Search functionality
+ * - Recently used emojis
+ * - Theme-aware styling
+ * - Localization support
+ *
+ * Dependencies:
+ * - rn-emoji-keyboard (emoji picker UI library)
+ *
+ * USAGE:
+ * ```typescript
+ * import { EmojiPicker } from '@umituz/react-native-emoji';
+ *
+ * const MyComponent = () => {
+ *   const [isOpen, setIsOpen] = useState(false);
+ *   const [emoji, setEmoji] = useState('');
+ *
+ *   const handleEmojiSelect = (emojiObject: EmojiObject) => {
+ *     setEmoji(emojiObject.emoji);
+ *     setIsOpen(false);
+ *   };
+ *
+ *   return (
+ *     <>
+ *       <TouchableOpacity onPress={() => setIsOpen(true)}>
+ *         <Text>{emoji || 'Select Emoji'}</Text>
+ *       </TouchableOpacity>
+ *
+ *       <EmojiPicker
+ *         open={isOpen}
+ *         onClose={() => setIsOpen(false)}
+ *         onEmojiSelected={handleEmojiSelect}
+ *       />
+ *     </>
+ *   );
+ * };
+ * ```
+ */
+
+import React from 'react';
+import RNEmojiKeyboard, { EmojiType } from 'rn-emoji-keyboard';
+import type { EmojiObject, EmojiPickerConfig } from '../../domain/entities/Emoji';
+
+export interface EmojiPickerProps {
+  /** Whether the picker is currently open */
+  open: boolean;
+
+  /** Callback when picker is closed */
+  onClose: () => void;
+
+  /** Callback when an emoji is selected */
+  onEmojiSelected: (emojiObject: EmojiObject) => void;
+
+  /** Optional configuration */
+  config?: EmojiPickerConfig;
+}
+
+/**
+ * Universal emoji picker component
+ * Wraps rn-emoji-keyboard with factory-standard interface
+ */
+export const EmojiPicker: React.FC<EmojiPickerProps> = ({
+  open,
+  onClose,
+  onEmojiSelected,
+  config,
+}) => {
+  const handleEmojiSelect = (emojiObject: EmojiType) => {
+    // Map rn-emoji-keyboard EmojiType to our EmojiObject interface
+    const mappedEmoji: EmojiObject = {
+      emoji: emojiObject.emoji,
+      name: emojiObject.name,
+      slug: emojiObject.slug,
+      unicode_version: emojiObject.unicode_version,
+    };
+
+    onEmojiSelected(mappedEmoji);
+  };
+
+  return (
+    <RNEmojiKeyboard
+      onEmojiSelected={handleEmojiSelect}
+      open={open}
+      onClose={onClose}
+      enableCategoryChangeAnimation={true}
+      enableSearchAnimation={true}
+      categoryPosition="top"
+      enableRecentlyUsed={config?.enableRecentlyUsed ?? true}
+      enableSearchBar={config?.enableSearch ?? true}
+      enableCategoryChangeGesture={config?.enableCategoryTabs ?? true}
+      categoryOrder={config?.categoryOrder as any}
+      translation={config?.translation as any}
+    />
+  );
+};

package/src/molecules/emoji/presentation/hooks/useEmojiPicker.ts

@@ -0,0 +1,171 @@
+/**
+ * useEmojiPicker Hook
+ *
+ * React hook for emoji picker state management
+ * Provides a clean, declarative API for emoji selection
+ *
+ * Features:
+ * - Open/close state management
+ * - Selected emoji tracking
+ * - Clear/reset functionality
+ * - Simple, reusable hook pattern
+ *
+ * USAGE:
+ * ```typescript
+ * import { useEmojiPicker, EmojiPicker } from '@umituz/react-native-emoji';
+ *
+ * const MyComponent = () => {
+ *   const {
+ *     isOpen,
+ *     selectedEmoji,
+ *     openPicker,
+ *     closePicker,
+ *     handleEmojiSelect,
+ *     clearEmoji,
+ *   } = useEmojiPicker();
+ *
+ *   return (
+ *     <View>
+ *       <TouchableOpacity onPress={openPicker}>
+ *         <Text>{selectedEmoji || 'Select Emoji'}</Text>
+ *       </TouchableOpacity>
+ *
+ *       <EmojiPicker
+ *         open={isOpen}
+ *         onClose={closePicker}
+ *         onEmojiSelected={handleEmojiSelect}
+ *       />
+ *     </View>
+ *   );
+ * };
+ * ```
+ */
+
+import { useState, useCallback } from 'react';
+import type { EmojiObject } from '../../domain/entities/Emoji';
+
+export interface UseEmojiPickerOptions {
+  /** Initial emoji value */
+  initialEmoji?: string;
+
+  /** Callback when emoji is selected */
+  onEmojiChange?: (emoji: string) => void;
+
+  /** Whether to auto-close picker after selection */
+  autoClose?: boolean;
+}
+
+export interface UseEmojiPickerReturn {
+  /** Whether the picker is currently open */
+  isOpen: boolean;
+
+  /** Currently selected emoji (null if none) */
+  selectedEmoji: string | null;
+
+  /** Open the emoji picker */
+  openPicker: () => void;
+
+  /** Close the emoji picker */
+  closePicker: () => void;
+
+  /** Toggle picker open/closed */
+  togglePicker: () => void;
+
+  /** Handle emoji selection (use as onEmojiSelected callback) */
+  handleEmojiSelect: (emojiObject: EmojiObject) => void;
+
+  /** Clear the currently selected emoji */
+  clearEmoji: () => void;
+
+  /** Set emoji directly (without opening picker) */
+  setEmoji: (emoji: string) => void;
+}
+
+/**
+ * Hook for emoji picker state management
+ */
+export const useEmojiPicker = (
+  options?: UseEmojiPickerOptions
+): UseEmojiPickerReturn => {
+  const { initialEmoji, onEmojiChange, autoClose = true } = options || {};
+
+  const [isOpen, setIsOpen] = useState(false);
+  const [selectedEmoji, setSelectedEmoji] = useState<string | null>(
+    initialEmoji || null
+  );
+
+  /**
+   * Open the emoji picker
+   */
+  const openPicker = useCallback(() => {
+    setIsOpen(true);
+  }, []);
+
+  /**
+   * Close the emoji picker
+   */
+  const closePicker = useCallback(() => {
+    setIsOpen(false);
+  }, []);
+
+  /**
+   * Toggle picker open/closed
+   */
+  const togglePicker = useCallback(() => {
+    setIsOpen((prev) => !prev);
+  }, []);
+
+  /**
+   * Handle emoji selection
+   */
+  const handleEmojiSelect = useCallback(
+    (emojiObject: EmojiObject) => {
+      setSelectedEmoji(emojiObject.emoji);
+
+      // Call onChange callback if provided
+      if (onEmojiChange) {
+        onEmojiChange(emojiObject.emoji);
+      }
+
+      // Auto-close picker if enabled
+      if (autoClose) {
+        setIsOpen(false);
+      }
+    },
+    [onEmojiChange, autoClose]
+  );
+
+  /**
+   * Clear the currently selected emoji
+   */
+  const clearEmoji = useCallback(() => {
+    setSelectedEmoji(null);
+    if (onEmojiChange) {
+      onEmojiChange('');
+    }
+  }, [onEmojiChange]);
+
+  /**
+   * Set emoji directly
+   */
+  const setEmoji = useCallback(
+    (emoji: string) => {
+      setSelectedEmoji(emoji);
+      if (onEmojiChange) {
+        onEmojiChange(emoji);
+      }
+    },
+    [onEmojiChange]
+  );
+
+  return {
+    isOpen,
+    selectedEmoji,
+    openPicker,
+    closePicker,
+    togglePicker,
+    handleEmojiSelect,
+    clearEmoji,
+    setEmoji,
+  };
+};

package/src/molecules/index.ts

@@ -29,3 +29,27 @@ export { List, type ListProps } from './List';
 
 // Alerts
 export * from './alerts';
+
+// Calendar
+export * from './calendar';
+
+// Swipe Actions
+export * from './swipe-actions';
+
+// Navigation
+export * from './navigation';
+
+// Celebration
+export * from './celebration';
+
+// Animation
+export * from './animation';
+
+// Long Press Menu
+export * from './long-press-menu';
+
+// Emoji
+export * from './emoji';
+
+// Countdown
+export * from './countdown';

package/src/molecules/long-press-menu/domain/entities/MenuAction.ts

@@ -0,0 +1,37 @@
+import type { IconName } from '../../../../atoms';
+
+/**
+ * Menu action entity
+ * Represents a single action in the long press menu
+ */
+export interface MenuAction {
+  /** Unique identifier for the action */
+  id: string;
+
+  /** Icon name from ../../../atoms (Lucide icons) */
+  icon: IconName;
+
+  /** Display label for the action */
+  label: string;
+
+  /** Destructive action (uses error color) */
+  destructive?: boolean;
+
+  /** Disabled state (greyed out, not pressable) */
+  disabled?: boolean;
+}
+
+/**
+ * Predefined menu action types for common use cases
+ */
+export const MenuActionType = {
+  EDIT: 'edit',
+  DELETE: 'delete',
+  SHARE: 'share',
+  COPY: 'copy',
+  ARCHIVE: 'archive',
+  FAVORITE: 'favorite',
+  MORE: 'more',
+} as const;
+
+export type MenuActionTypeValue = typeof MenuActionType[keyof typeof MenuActionType];

package/src/molecules/long-press-menu/index.ts

@@ -0,0 +1,16 @@
+/**
+ * @umituz/react-native-long-press-menu - Public API
+ * 
+ * Context menus with long press for React Native
+ * Features:
+ * - iOS/Android-style menus
+ * - Haptic feedback
+ * - Smooth animations
+ * - Customizable actions
+ */
+
+// Domain - Entities
+export type { MenuAction, MenuActionTypeValue } from './domain/entities/MenuAction';
+export { MenuActionType } from './domain/entities/MenuAction';
+
+// Note: Add more exports as needed when implementation files are found