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

package/src/molecules/swipe-actions/domain/entities/SwipeAction.ts

@@ -0,0 +1,194 @@
+/**
+ * Swipe Actions Domain - Entity Layer
+ *
+ * Core swipe action types and configurations.
+ * Defines pre-built action types, colors, icons, and utilities.
+ *
+ * @domain swipe-actions
+ * @layer domain/entities
+ */
+
+import type { IconName } from '../../../../index';
+
+/**
+ * Pre-built swipe action types
+ */
+export type SwipeActionType =
+  | 'delete'
+  | 'archive'
+  | 'edit'
+  | 'share'
+  | 'favorite'
+  | 'more'
+  | 'custom';
+
+/**
+ * Swipe action configuration
+ */
+export interface SwipeActionConfig {
+  /** Action type */
+  type: SwipeActionType;
+  /** Action label (optional, defaults from type) */
+  label?: string;
+  /** Icon name (optional, defaults from type) */
+  icon?: IconName;
+  /** Custom color (optional, defaults from type) */
+  color?: string;
+  /** Action handler */
+  onPress: () => void | Promise<void>;
+  /** Enable haptic feedback (default: true) */
+  enableHaptics?: boolean;
+}
+
+/**
+ * Swipe direction
+ */
+export type SwipeDirection = 'left' | 'right';
+
+/**
+ * Swipeable item configuration
+ */
+export interface SwipeableConfig {
+  /** Actions revealed when swiping right (left side) */
+  leftActions?: SwipeActionConfig[];
+  /** Actions revealed when swiping left (right side) */
+  rightActions?: SwipeActionConfig[];
+  /** Swipe threshold in points (default: 80) */
+  threshold?: number;
+  /** Disable overshoot animation (default: true) */
+  disableOvershoot?: boolean;
+  /** Friction value (default: 2) */
+  friction?: number;
+}
+
+/**
+ * Pre-built action type configurations
+ */
+export const ACTION_PRESETS: Record<Exclude<SwipeActionType, 'custom'>, {
+  label: string;
+  icon: IconName;
+  colorKey: 'error' | 'success' | 'primary' | 'secondary' | 'warning' | 'textSecondary';
+  hapticsIntensity: 'Light' | 'Medium' | 'Heavy';
+}> = {
+  delete: {
+    label: 'Delete',
+    icon: 'Trash2',
+    colorKey: 'error',
+    hapticsIntensity: 'Heavy',
+  },
+  archive: {
+    label: 'Archive',
+    icon: 'Archive',
+    colorKey: 'success',
+    hapticsIntensity: 'Medium',
+  },
+  edit: {
+    label: 'Edit',
+    icon: 'Pencil',
+    colorKey: 'primary',
+    hapticsIntensity: 'Light',
+  },
+  share: {
+    label: 'Share',
+    icon: 'Share2',
+    colorKey: 'secondary',
+    hapticsIntensity: 'Light',
+  },
+  favorite: {
+    label: 'Favorite',
+    icon: 'Heart',
+    colorKey: 'warning',
+    hapticsIntensity: 'Light',
+  },
+  more: {
+    label: 'More',
+    icon: 'MoveHorizontal',
+    colorKey: 'textSecondary',
+    hapticsIntensity: 'Light',
+  },
+};
+
+/**
+ * Default swipe configuration
+ */
+export const DEFAULT_SWIPE_CONFIG: Required<Omit<SwipeableConfig, 'leftActions' | 'rightActions'>> = {
+  threshold: 80,
+  disableOvershoot: true,
+  friction: 2,
+};
+
+/**
+ * Swipe action utility functions
+ */
+export class SwipeActionUtils {
+  /**
+   * Gets preset configuration for action type
+   */
+  static getPreset(type: SwipeActionType) {
+    if (type === 'custom') {
+      return null;
+    }
+    return ACTION_PRESETS[type];
+  }
+
+  /**
+   * Validates swipe action configuration
+   */
+  static validateAction(action: SwipeActionConfig): boolean {
+    // Must have onPress handler
+    if (!action.onPress || typeof action.onPress !== 'function') {
+      return false;
+    }
+
+    // Custom actions must have label, icon, and color
+    if (action.type === 'custom') {
+      return !!(action.label && action.icon && action.color);
+    }
+
+    return true;
+  }
+
+  /**
+   * Gets action display label
+   */
+  static getLabel(action: SwipeActionConfig): string {
+    if (action.label) {
+      return action.label;
+    }
+
+    const preset = this.getPreset(action.type);
+    return preset?.label || 'Action';
+  }
+
+  /**
+   * Gets action icon name
+   */
+  static getIcon(action: SwipeActionConfig): IconName {
+    if (action.icon) {
+      return action.icon;
+    }
+
+    const preset = this.getPreset(action.type);
+    return preset?.icon || 'MoveHorizontal';
+  }
+
+  /**
+   * Gets action color key for theme
+   */
+  static getColorKey(action: SwipeActionConfig): string | null {
+    if (action.color) {
+      return null; // Use custom color
+    }
+
+    const preset = this.getPreset(action.type);
+    return preset?.colorKey || null;
+  }
+
+  /**
+   * Gets haptics intensity for action
+   */
+  static getHapticsIntensity(action: SwipeActionConfig): 'Light' | 'Medium' | 'Heavy' {
+    const preset = this.getPreset(action.type);
+    return preset?.hapticsIntensity || 'Light';
+  }
+}

package/src/molecules/swipe-actions/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Swipe Actions Domain - Barrel Export
+ */
+
+export * from './domain/entities/SwipeAction';
+export * from './presentation/components/SwipeActionButton';

package/src/molecules/swipe-actions/presentation/components/SwipeActionButton.tsx

@@ -0,0 +1,131 @@
+/**
+ * Swipe Actions Domain - SwipeActionButton Component
+ *
+ * Individual swipe action button with icon and label.
+ * Rendered inside SwipeableItem when swiping.
+ *
+ * @domain swipe-actions
+ * @layer presentation/components
+ */
+
+import React from 'react';
+import { StyleSheet, TouchableOpacity, View, type StyleProp, type ViewStyle } from 'react-native';
+import { AtomicText, AtomicIcon } from '../../../../index';
+import { useAppDesignTokens } from '../../../../index';
+import { HapticService } from '@umituz/react-native-haptics';
+import type { SwipeActionConfig } from '../../domain/entities/SwipeAction';
+import { SwipeActionUtils } from '../../domain/entities/SwipeAction';
+
+/**
+ * SwipeActionButton component props
+ */
+export interface SwipeActionButtonProps {
+  /** Action configuration */
+  action: SwipeActionConfig;
+  /** Action position (index) */
+  position: number;
+  /** Total actions count */
+  totalActions: number;
+  /** Swipe direction */
+  direction: 'left' | 'right';
+  /** Custom container style */
+  style?: StyleProp<ViewStyle>;
+}
+
+/**
+ * SwipeActionButton Component
+ *
+ * Displays an individual swipe action with icon and label.
+ * Animates based on swipe progress.
+ *
+ * USAGE:
+ * ```typescript
+ * // Used internally by SwipeableItem
+ * <SwipeActionButton
+ *   action={deleteAction}
+ *   progress={progressValue}
+ *   drag={dragValue}
+ *   position={0}
+ *   totalActions={1}
+ *   direction="right"
+ * />
+ * ```
+ */
+export const SwipeActionButton: React.FC<SwipeActionButtonProps> = ({
+  action,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  // Get action properties
+  const label = SwipeActionUtils.getLabel(action);
+  const iconName = SwipeActionUtils.getIcon(action);
+  const colorKey = SwipeActionUtils.getColorKey(action);
+  const customColor = action.color;
+  const enableHaptics = action.enableHaptics !== false;
+
+  // Get background color from theme or custom
+  const backgroundColor = customColor || (colorKey ? (tokens.colors[colorKey as keyof typeof tokens.colors] as string) : tokens.colors.primary);
+
+  const handlePress = async () => {
+    // Trigger haptic feedback
+    if (enableHaptics) {
+      const intensity = SwipeActionUtils.getHapticsIntensity(action);
+      if (intensity === 'Light') {
+        await HapticService.impact('Light');
+      } else if (intensity === 'Medium') {
+        await HapticService.impact('Medium');
+      } else {
+        await HapticService.impact('Heavy');
+      }
+    }
+
+    // Execute action
+    await action.onPress();
+  };
+
+  return (
+    <TouchableOpacity
+      style={[
+        styles.container,
+        {
+          backgroundColor,
+          paddingHorizontal: tokens.spacing.lg,
+          minWidth: 80,
+          justifyContent: 'center',
+          alignItems: 'center',
+        },
+        style,
+      ]}
+      onPress={handlePress}
+      activeOpacity={0.7}
+    >
+      <View style={styles.content}>
+        <AtomicIcon
+          name={iconName}
+          size="md"
+          customColor="#FFFFFF"
+        />
+        <AtomicText
+          type="bodySmall"
+          style={[styles.label, { color: '#FFFFFF' }]}
+        >
+          {label}
+        </AtomicText>
+      </View>
+    </TouchableOpacity>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: '100%',
+  },
+  content: {
+    alignItems: 'center',
+    gap: 4,
+  },
+  label: {
+    textAlign: 'center',
+  },
+});

package/src/theme/hooks/useResponsiveDesignTokens.ts

@@ -24,7 +24,7 @@ import { useResponsive } from '../../responsive/useResponsive';
  *
  * @example
  * ```typescript
- * import { useResponsiveDesignTokens } from '@umituz/react-native-design-system';
+ * import { useResponsiveDesignTokens } from '../../index';
  *
  * const MyComponent = () => {
  *   const tokens = useResponsiveDesignTokens();

package/src/utilities/clipboard/ClipboardUtils.ts

@@ -0,0 +1,71 @@
+/**
+ * Clipboard Utilities
+ * 
+ * Simple wrapper around expo-clipboard for copy/paste functionality
+ * 
+ * Usage:
+ * ```typescript
+ * import { ClipboardUtils } from '@umituz/react-native-design-system';
+ * 
+ * // Copy text
+ * await ClipboardUtils.copyToClipboard('Hello World');
+ * 
+ * // Paste text
+ * const text = await ClipboardUtils.getFromClipboard();
+ * 
+ * // Check if clipboard has content
+ * const hasContent = await ClipboardUtils.hasContent();
+ * ```
+ */
+
+import * as Clipboard from 'expo-clipboard';
+
+export class ClipboardUtils {
+    /**
+     * Copy text to clipboard
+     */
+    static async copyToClipboard(text: string): Promise<void> {
+        try {
+            await Clipboard.setStringAsync(text);
+        } catch (error) {
+            console.error('[ClipboardUtils] Failed to copy to clipboard:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Get text from clipboard
+     */
+    static async getFromClipboard(): Promise<string> {
+        try {
+            return await Clipboard.getStringAsync();
+        } catch (error) {
+            console.error('[ClipboardUtils] Failed to get from clipboard:', error);
+            throw error;
+        }
+    }
+
+    /**
+     * Check if clipboard has content
+     */
+    static async hasContent(): Promise<boolean> {
+        try {
+            return await Clipboard.hasStringAsync();
+        } catch (error) {
+            console.error('[ClipboardUtils] Failed to check clipboard:', error);
+            return false;
+        }
+    }
+
+    /**
+     * Clear clipboard
+     */
+    static async clear(): Promise<void> {
+        try {
+            await Clipboard.setStringAsync('');
+        } catch (error) {
+            console.error('[ClipboardUtils] Failed to clear clipboard:', error);
+            throw error;
+        }
+    }
+}

package/src/utilities/clipboard/index.ts

@@ -0,0 +1,5 @@
+/**
+ * Clipboard - Public API
+ */
+
+export { ClipboardUtils } from './ClipboardUtils';

package/src/utilities/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Utilities - Public API
+ */
+
+export * from './clipboard';
+export * from './sharing';

package/src/utilities/sharing/domain/entities/Share.ts

@@ -0,0 +1,210 @@
+/**
+ * Sharing Domain - Core Entities
+ *
+ * This file defines core types and interfaces for sharing functionality.
+ * Handles system share sheet using expo-sharing.
+ *
+ * @domain sharing
+ * @layer domain/entities
+ */
+
+/**
+ * Share options for sharing content
+ */
+export interface ShareOptions {
+  /**
+   * Dialog title (Android only)
+   */
+  dialogTitle?: string;
+
+  /**
+   * MIME type of the file being shared
+   */
+  mimeType?: string;
+
+  /**
+   * UTI (Uniform Type Identifier) for the file (iOS only)
+   */
+  UTI?: string;
+}
+
+/**
+ * Share result
+ */
+export interface ShareResult {
+  success: boolean;
+  error?: string;
+}
+
+/**
+ * Common MIME types for sharing
+ */
+export const MIME_TYPES = {
+  // Images
+  IMAGE_JPEG: 'image/jpeg',
+  IMAGE_PNG: 'image/png',
+  IMAGE_GIF: 'image/gif',
+  IMAGE_WEBP: 'image/webp',
+
+  // Videos
+  VIDEO_MP4: 'video/mp4',
+  VIDEO_QUICKTIME: 'video/quicktime',
+  VIDEO_AVI: 'video/avi',
+
+  // Audio
+  AUDIO_MP3: 'audio/mpeg',
+  AUDIO_WAV: 'audio/wav',
+  AUDIO_AAC: 'audio/aac',
+
+  // Documents
+  PDF: 'application/pdf',
+  TEXT: 'text/plain',
+  JSON: 'application/json',
+  ZIP: 'application/zip',
+
+  // Generic
+  OCTET_STREAM: 'application/octet-stream',
+} as const;
+
+/**
+ * iOS UTI (Uniform Type Identifiers)
+ */
+export const UTI_TYPES = {
+  // Images
+  IMAGE: 'public.image',
+  JPEG: 'public.jpeg',
+  PNG: 'public.png',
+
+  // Videos
+  VIDEO: 'public.video',
+  MOVIE: 'public.movie',
+
+  // Audio
+  AUDIO: 'public.audio',
+  MP3: 'public.mp3',
+
+  // Documents
+  PDF: 'com.adobe.pdf',
+  TEXT: 'public.text',
+  JSON: 'public.json',
+
+  // Generic
+  DATA: 'public.data',
+  CONTENT: 'public.content',
+} as const;
+
+/**
+ * Sharing constants
+ */
+export const SHARING_CONSTANTS = {
+  DEFAULT_DIALOG_TITLE: 'Share',
+  DEFAULT_MIME_TYPE: MIME_TYPES.OCTET_STREAM,
+} as const;
+
+/**
+ * Sharing utilities
+ */
+export class SharingUtils {
+  /**
+   * Get MIME type from file extension
+   */
+  static getMimeTypeFromExtension(filename: string): string {
+    const extension = filename.split('.').pop()?.toLowerCase();
+
+    switch (extension) {
+      // Images
+      case 'jpg':
+      case 'jpeg':
+        return MIME_TYPES.IMAGE_JPEG;
+      case 'png':
+        return MIME_TYPES.IMAGE_PNG;
+      case 'gif':
+        return MIME_TYPES.IMAGE_GIF;
+      case 'webp':
+        return MIME_TYPES.IMAGE_WEBP;
+
+      // Videos
+      case 'mp4':
+        return MIME_TYPES.VIDEO_MP4;
+      case 'mov':
+        return MIME_TYPES.VIDEO_QUICKTIME;
+      case 'avi':
+        return MIME_TYPES.VIDEO_AVI;
+
+      // Audio
+      case 'mp3':
+        return MIME_TYPES.AUDIO_MP3;
+      case 'wav':
+        return MIME_TYPES.AUDIO_WAV;
+      case 'aac':
+        return MIME_TYPES.AUDIO_AAC;
+
+      // Documents
+      case 'pdf':
+        return MIME_TYPES.PDF;
+      case 'txt':
+        return MIME_TYPES.TEXT;
+      case 'json':
+        return MIME_TYPES.JSON;
+      case 'zip':
+        return MIME_TYPES.ZIP;
+
+      default:
+        return MIME_TYPES.OCTET_STREAM;
+    }
+  }
+
+  /**
+   * Get UTI from file extension (iOS)
+   */
+  static getUTIFromExtension(filename: string): string {
+    const extension = filename.split('.').pop()?.toLowerCase();
+
+    switch (extension) {
+      // Images
+      case 'jpg':
+      case 'jpeg':
+        return UTI_TYPES.JPEG;
+      case 'png':
+        return UTI_TYPES.PNG;
+      case 'gif':
+      case 'webp':
+        return UTI_TYPES.IMAGE;
+
+      // Videos
+      case 'mp4':
+      case 'mov':
+      case 'avi':
+        return UTI_TYPES.VIDEO;
+
+      // Audio
+      case 'mp3':
+        return UTI_TYPES.MP3;
+      case 'wav':
+      case 'aac':
+        return UTI_TYPES.AUDIO;
+
+      // Documents
+      case 'pdf':
+        return UTI_TYPES.PDF;
+      case 'txt':
+        return UTI_TYPES.TEXT;
+      case 'json':
+        return UTI_TYPES.JSON;
+
+      default:
+        return UTI_TYPES.DATA;
+    }
+  }
+
+  /**
+   * Prepare share options from filename
+   */
+  static prepareShareOptions(filename: string, dialogTitle?: string): ShareOptions {
+    return {
+      dialogTitle: dialogTitle || SHARING_CONSTANTS.DEFAULT_DIALOG_TITLE,
+      mimeType: SharingUtils.getMimeTypeFromExtension(filename),
+      UTI: SharingUtils.getUTIFromExtension(filename),
+    };
+  }
+}