@umituz/react-native-design-system 2.6.111 → 2.6.113

package/src/image/infrastructure/utils/validation/mime-type-validator.ts

@@ -0,0 +1,101 @@
+/**
+ * MIME Type Validator
+ * Single Responsibility: Validate MIME types
+ */
+
+import type { ValidationResult } from '../../../domain/entities/ValidationResult';
+import {
+  SUPPORTED_IMAGE_MIME_TYPES,
+  EXTENSION_TO_MIME_TYPE,
+} from './mime-types.constants';
+
+/**
+ * Get file extension from URI
+ */
+export function getFileExtension(uri: string): string | null {
+  const match = uri.match(/\.([a-z0-9]+)(?:\?|$)/i);
+  return match ? match[1].toLowerCase() : null;
+}
+
+/**
+ * Get MIME type from file extension
+ */
+export function getMimeTypeFromExtension(uri: string): string | null {
+  const extension = getFileExtension(uri);
+  if (!extension) {
+    return null;
+  }
+  return EXTENSION_TO_MIME_TYPE[extension] || null;
+}
+
+/**
+ * Get MIME type from data URL
+ */
+export function getMimeTypeFromDataUrl(dataUrl: string): string | null {
+  const match = dataUrl.match(/^data:([^;]+);/);
+  return match ? match[1] : null;
+}
+
+/**
+ * Validate MIME type is supported image type
+ */
+export function validateImageMimeType(
+  mimeType: string,
+  fieldName: string = 'File'
+): ValidationResult {
+  if (!mimeType) {
+    return { isValid: false, error: `${fieldName} MIME type is required` };
+  }
+
+  if (!SUPPORTED_IMAGE_MIME_TYPES.includes(mimeType as any)) {
+    return {
+      isValid: false,
+      error: `${fieldName} must be an image (JPEG, PNG, WEBP, or GIF)`,
+    };
+  }
+
+  return { isValid: true };
+}
+
+/**
+ * Validate file extension is supported image type
+ */
+export function validateImageExtension(
+  uri: string,
+  fieldName: string = 'File'
+): ValidationResult {
+  const mimeType = getMimeTypeFromExtension(uri);
+  if (!mimeType) {
+    return {
+      isValid: false,
+      error: `${fieldName} must have a valid image extension (jpg, jpeg, png, webp, gif)`,
+    };
+  }
+
+  return validateImageMimeType(mimeType, fieldName);
+}
+
+/**
+ * Validate data URL is image type
+ */
+export function validateImageDataUrl(
+  dataUrl: string,
+  fieldName: string = 'File'
+): ValidationResult {
+  if (!dataUrl || !dataUrl.startsWith('data:')) {
+    return {
+      isValid: false,
+      error: `${fieldName} must be a valid data URL`,
+    };
+  }
+
+  const mimeType = getMimeTypeFromDataUrl(dataUrl);
+  if (!mimeType) {
+    return {
+      isValid: false,
+      error: `${fieldName} must have a valid MIME type`,
+    };
+  }
+
+  return validateImageMimeType(mimeType, fieldName);
+}

package/src/image/infrastructure/utils/validation/mime-types.constants.ts

@@ -0,0 +1,41 @@
+/**
+ * MIME Type Constants
+ * Single Responsibility: Define supported MIME types for validation
+ */
+
+/**
+ * Supported image MIME types
+ */
+export const IMAGE_MIME_TYPES = {
+  JPEG: 'image/jpeg',
+  JPG: 'image/jpeg',
+  PNG: 'image/png',
+  WEBP: 'image/webp',
+  GIF: 'image/gif',
+} as const;
+
+/**
+ * All supported image MIME types as array
+ */
+export const SUPPORTED_IMAGE_MIME_TYPES = Object.values(IMAGE_MIME_TYPES);
+
+/**
+ * File extension to MIME type mapping
+ */
+export const EXTENSION_TO_MIME_TYPE: Record<string, string> = {
+  jpg: IMAGE_MIME_TYPES.JPEG,
+  jpeg: IMAGE_MIME_TYPES.JPEG,
+  png: IMAGE_MIME_TYPES.PNG,
+  webp: IMAGE_MIME_TYPES.WEBP,
+  gif: IMAGE_MIME_TYPES.GIF,
+};
+
+/**
+ * MIME type to file extension mapping
+ */
+export const MIME_TYPE_TO_EXTENSION: Record<string, string> = {
+  [IMAGE_MIME_TYPES.JPEG]: 'jpg',
+  [IMAGE_MIME_TYPES.PNG]: 'png',
+  [IMAGE_MIME_TYPES.WEBP]: 'webp',
+  [IMAGE_MIME_TYPES.GIF]: 'gif',
+};

package/src/image/presentation/components/GalleryHeader.tsx

@@ -0,0 +1,126 @@
+/**
+ * Presentation - Gallery Header Component
+ * 
+ * High-performance, premium header for the Image Gallery.
+ * Uses design system tokens and handles safe areas.
+ */
+
+import React from 'react';
+import { View, TouchableOpacity, StyleSheet } from 'react-native';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { useAppDesignTokens } from '@umituz/react-native-design-system';
+import { AtomicText } from '@umituz/react-native-design-system';
+
+interface GalleryHeaderProps {
+    onEdit?: () => void;
+    onClose: () => void;
+    title?: string;
+}
+
+export function GalleryHeader({ onEdit, onClose, title }: GalleryHeaderProps) {
+    const insets = useSafeAreaInsets();
+    const tokens = useAppDesignTokens();
+
+    return (
+        <View style={[
+            styles.container,
+            {
+                paddingTop: Math.max(insets.top, 24),
+                backgroundColor: 'rgba(0, 0, 0, 0.4)'
+            }
+        ]}>
+            <View style={styles.leftSection}>
+                {onEdit ? (
+                    <TouchableOpacity
+                        style={[styles.actionButton, { backgroundColor: 'rgba(255, 255, 255, 0.15)' }]}
+                        onPress={onEdit}
+                        activeOpacity={0.7}
+                    >
+                        <AtomicText style={styles.buttonText}>Edit</AtomicText>
+                    </TouchableOpacity>
+                ) : (
+                    <View style={styles.spacer} />
+                )}
+            </View>
+
+            <View style={styles.centerSection}>
+                {title ? (
+                    <AtomicText type="bodyMedium" style={styles.titleText}>
+                        {title}
+                    </AtomicText>
+                ) : null}
+            </View>
+
+            <View style={styles.rightSection}>
+                <TouchableOpacity
+                    style={[styles.closeButton, { backgroundColor: 'rgba(0, 0, 0, 0.4)' }]}
+                    onPress={onClose}
+                    activeOpacity={0.7}
+                    hitSlop={{ top: 20, bottom: 20, left: 20, right: 20 }}
+                >
+                    <AtomicText style={styles.closeIcon}>✕</AtomicText>
+                </TouchableOpacity>
+            </View>
+        </View>
+    );
+}
+
+const styles = StyleSheet.create({
+    container: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        right: 0,
+        paddingHorizontal: 20,
+        paddingBottom: 16,
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        zIndex: 1000,
+    },
+    leftSection: {
+        flex: 1,
+        alignItems: 'flex-start',
+    },
+    centerSection: {
+        flex: 2,
+        alignItems: 'center',
+    },
+    rightSection: {
+        flex: 1,
+        alignItems: 'flex-end',
+    },
+    spacer: {
+        width: 44,
+        height: 44,
+    },
+    actionButton: {
+        paddingVertical: 8,
+        paddingHorizontal: 16,
+        borderRadius: 20,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    closeButton: {
+        width: 50,
+        height: 50,
+        borderRadius: 25,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    buttonText: {
+        fontSize: 14,
+        color: '#FFFFFF',
+        fontWeight: 'bold',
+    },
+    closeIcon: {
+        fontSize: 28,
+        color: '#FFFFFF',
+        fontWeight: '300',
+    },
+    titleText: {
+        color: '#FFFFFF',
+        fontWeight: '600',
+        textAlign: 'center',
+    },
+});

package/src/image/presentation/components/ImageGallery.tsx

@@ -0,0 +1,138 @@
+/**
+ * Presentation - Image Gallery Component
+ * 
+ * High-performance, premium image gallery using expo-image.
+ * Replaces slow standard image components for instant loading.
+ */
+
+import React, { useCallback, useMemo, useState, useEffect } from 'react';
+import { Modal, View, StyleSheet, FlatList, Dimensions, TouchableOpacity } from 'react-native';
+import { Image } from 'expo-image';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import type { ImageViewerItem, ImageGalleryOptions } from '../../domain/entities/ImageTypes';
+import { GalleryHeader } from './GalleryHeader';
+
+const { width: SCREEN_WIDTH, height: SCREEN_HEIGHT } = Dimensions.get('window');
+
+export interface ImageGalleryProps extends ImageGalleryOptions {
+    images: ImageViewerItem[];
+    visible: boolean;
+    onDismiss: () => void;
+    index?: number;
+    onImageChange?: (uri: string, index: number) => void | Promise<void>;
+    enableEditing?: boolean;
+    title?: string;
+}
+
+export const ImageGallery: React.FC<ImageGalleryProps> = ({
+    images,
+    visible,
+    onDismiss,
+    index = 0,
+    backgroundColor = '#000000',
+    onIndexChange,
+    onImageChange,
+    enableEditing = false,
+    title,
+}) => {
+    const insets = useSafeAreaInsets();
+    const [currentIndex, setCurrentIndex] = useState(index);
+
+    useEffect(() => {
+        if (visible) setCurrentIndex(index);
+    }, [visible, index]);
+
+    const handleEdit = useCallback(async () => {
+        const currentImage = images[currentIndex];
+        if (!currentImage || !onImageChange) return;
+        await onImageChange(currentImage.uri, currentIndex);
+    }, [images, currentIndex, onImageChange]);
+
+    const handleScroll = useCallback((event: any) => {
+        const nextIndex = Math.round(event.nativeEvent.contentOffset.x / SCREEN_WIDTH);
+        if (nextIndex !== currentIndex) {
+            setCurrentIndex(nextIndex);
+            onIndexChange?.(nextIndex);
+        }
+    }, [currentIndex, onIndexChange]);
+
+    const renderItem = useCallback(({ item }: { item: ImageViewerItem }) => (
+        <View style={styles.imageWrapper}>
+            <Image
+                source={{ uri: item.uri }}
+                style={styles.fullImage}
+                contentFit="contain"
+                transition={200}
+                cachePolicy="memory-disk"
+            />
+        </View>
+    ), []);
+
+    if (!visible && !currentIndex) return null;
+
+    return (
+        <Modal
+            visible={visible}
+            transparent
+            animationType="fade"
+            onRequestClose={onDismiss}
+            statusBarTranslucent
+        >
+            <View style={[styles.container, { backgroundColor }]}>
+                <GalleryHeader
+                    onClose={onDismiss}
+                    onEdit={enableEditing ? handleEdit : undefined}
+                    title={title || `${currentIndex + 1} / ${images.length}`}
+                />
+
+                <FlatList
+                    data={images}
+                    renderItem={renderItem}
+                    horizontal
+                    pagingEnabled
+                    showsHorizontalScrollIndicator={false}
+                    initialScrollIndex={index}
+                    getItemLayout={(_, i) => ({
+                        length: SCREEN_WIDTH,
+                        offset: SCREEN_WIDTH * i,
+                        index: i,
+                    })}
+                    onScroll={handleScroll}
+                    scrollEventThrottle={16}
+                    keyExtractor={(item, i) => `${item.uri}-${i}`}
+                    style={styles.list}
+                />
+
+                <View style={[styles.footer, { paddingBottom: Math.max(insets.bottom, 20) }]}>
+                    {/* Potential for thumbnail strip or captions in future */}
+                </View>
+            </View>
+        </Modal>
+    );
+};
+
+const styles = StyleSheet.create({
+    container: {
+        flex: 1,
+    },
+    list: {
+        flex: 1,
+    },
+    imageWrapper: {
+        width: SCREEN_WIDTH,
+        height: SCREEN_HEIGHT,
+        justifyContent: 'center',
+        alignItems: 'center',
+    },
+    fullImage: {
+        width: '100%',
+        height: '100%',
+    },
+    footer: {
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        alignItems: 'center',
+    }
+});

package/src/image/presentation/components/editor/FilterPickerSheet.tsx

@@ -0,0 +1,75 @@
+/**
+ * Presentation - Filter Picker Sheet
+ */
+
+import React, { forwardRef } from 'react';
+import { View, TouchableOpacity, ScrollView } from 'react-native';
+import { 
+  BottomSheetModal, 
+  AtomicText, 
+  AtomicIcon,
+  useAppDesignTokens, 
+  BottomSheetModalRef 
+} from '@umituz/react-native-design-system';
+import { FilterProcessor, type FilterPreset } from '../../../infrastructure/utils/FilterProcessor';
+
+export interface FilterPickerSheetProps {
+  onSelectFilter: (filterId: string) => void;
+  onDismiss: () => void;
+  activeFilterId?: string;
+  snapPoints?: string[];
+  title?: string;
+}
+
+export const FilterPickerSheet = forwardRef<BottomSheetModalRef, FilterPickerSheetProps>(
+  ({ onSelectFilter, onDismiss, activeFilterId, snapPoints = ['50%'], title = 'Filters' }, ref) => {
+    const tokens = useAppDesignTokens();
+    const presets = FilterProcessor.getPresets();
+
+    return (
+      <BottomSheetModal ref={ref} snapPoints={snapPoints} onDismiss={onDismiss}>
+        <View style={{ padding: tokens.spacing.lg, flex: 1 }}>
+          <AtomicText style={{ ...tokens.typography.headingSmall, marginBottom: tokens.spacing.md }}>
+            {title}
+          </AtomicText>
+
+          <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+            <View style={{ flexDirection: 'row', gap: tokens.spacing.md }}>
+              {presets.map((preset: FilterPreset) => (
+                <TouchableOpacity
+                  key={preset.id}
+                  onPress={() => onSelectFilter(preset.id)}
+                  style={{
+                    width: 100,
+                    height: 120,
+                    backgroundColor: activeFilterId === preset.id ? tokens.colors.primaryContainer : tokens.colors.surfaceVariant,
+                    borderRadius: tokens.radius.lg,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    borderWidth: 2,
+                    borderColor: activeFilterId === preset.id ? tokens.colors.primary : 'transparent',
+                  }}
+                >
+                  <AtomicIcon 
+                    name="color-filter" 
+                    size={32} 
+                    color={activeFilterId === preset.id ? 'primary' : 'secondary'} 
+                  />
+                  <AtomicText style={{ 
+                    ...tokens.typography.labelSmall, 
+                    marginTop: tokens.spacing.sm,
+                    color: activeFilterId === preset.id ? tokens.colors.primary : tokens.colors.textSecondary
+                  }}>
+                    {preset.name}
+                  </AtomicText>
+                </TouchableOpacity>
+              ))}
+            </View>
+          </ScrollView>
+        </View>
+      </BottomSheetModal>
+    );
+  }
+);
+
+FilterPickerSheet.displayName = 'FilterPickerSheet';

package/src/image/presentation/components/editor/StickerPickerSheet.tsx

@@ -0,0 +1,62 @@
+/**
+ * Presentation - Sticker Picker Sheet
+ */
+
+import React, { forwardRef } from 'react';
+import { View, TouchableOpacity, ScrollView, Image, Dimensions } from 'react-native';
+import { 
+  BottomSheetModal, 
+  AtomicText, 
+  useAppDesignTokens, 
+  BottomSheetModalRef 
+} from '@umituz/react-native-design-system';
+
+const { width: SCREEN_WIDTH } = Dimensions.get('window');
+
+export interface StickerPickerSheetProps {
+  stickers: string[];
+  onSelectSticker: (uri: string) => void;
+  onDismiss: () => void;
+  title?: string;
+  snapPoints?: string[];
+}
+
+export const StickerPickerSheet = forwardRef<BottomSheetModalRef, StickerPickerSheetProps>(
+  ({ stickers, onSelectSticker, onDismiss, title = 'Select Sticker', snapPoints = ['60%'] }, ref) => {
+    const tokens = useAppDesignTokens();
+
+    return (
+      <BottomSheetModal ref={ref} snapPoints={snapPoints} onDismiss={onDismiss}>
+        <View style={{ padding: tokens.spacing.lg, flex: 1 }}>
+          <AtomicText style={{ ...tokens.typography.headingSmall, marginBottom: tokens.spacing.md }}>
+            {title}
+          </AtomicText>
+
+          <ScrollView showsVerticalScrollIndicator={false}>
+            <View style={{ flexDirection: 'row', flexWrap: 'wrap', gap: tokens.spacing.md }}>
+              {stickers.map((uri, index) => (
+                <TouchableOpacity
+                  key={index}
+                  onPress={() => onSelectSticker(uri)}
+                  style={{
+                    width: (SCREEN_WIDTH - 64) / 3,
+                    aspectRatio: 1,
+                    backgroundColor: tokens.colors.surfaceVariant,
+                    borderRadius: tokens.radius.md,
+                    padding: tokens.spacing.sm,
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                  }}
+                >
+                  <Image source={{ uri }} style={{ width: '100%', height: '100%' }} resizeMode="contain" />
+                </TouchableOpacity>
+              ))}
+            </View>
+          </ScrollView>
+        </View>
+      </BottomSheetModal>
+    );
+  }
+);
+
+StickerPickerSheet.displayName = 'StickerPickerSheet';

package/src/image/presentation/components/editor/TextEditorSheet.tsx

@@ -0,0 +1,98 @@
+/**
+ * Presentation - Text Editor Sheet
+ */
+
+import React, { forwardRef, useState } from 'react';
+import { View, TouchableOpacity, ScrollView } from 'react-native';
+import { 
+  BottomSheetModal, 
+  AtomicText, 
+  AtomicIcon, 
+  useAppDesignTokens, 
+  BottomSheetModalRef 
+} from '@umituz/react-native-design-system';
+import { TextContentTab, TextStyleTab, TextTransformTab } from './TextEditorTabs';
+
+export interface TextEditorSheetProps {
+  text: string;
+  onTextChange: (text: string) => void;
+  color: string;
+  onColorChange: (color: string) => void;
+  fontSize: number;
+  onFontSizeChange: (size: number) => void;
+  fontFamily: string;
+  onFontFamilyChange: (font: string) => void;
+  scale: number;
+  onScaleChange: (scale: number) => void;
+  rotation: number;
+  onRotationChange: (rotation: number) => void;
+  opacity: number;
+  onOpacityChange: (opacity: number) => void;
+  onDelete?: () => void;
+  onDismiss: () => void;
+  snapPoints?: string[];
+  t: (key: string) => string;
+}
+
+export const TextEditorSheet = forwardRef<BottomSheetModalRef, TextEditorSheetProps>((props, ref) => {
+  const tokens = useAppDesignTokens();
+  const [activeTab, setActiveTab] = useState<'content' | 'style' | 'transform'>('content');
+  const { onDismiss, snapPoints = ['75%'], t } = props;
+
+  const tabs = [
+    { id: 'content', label: 'Text', icon: 'text' },
+    { id: 'style', label: 'Style', icon: 'color-palette' },
+    { id: 'transform', label: 'Edit', icon: 'options' },
+  ];
+
+  return (
+    <BottomSheetModal ref={ref} snapPoints={snapPoints} onDismiss={onDismiss}>
+      <View style={{ padding: tokens.spacing.lg, flex: 1 }}>
+        <View style={{ flexDirection: 'row', gap: tokens.spacing.md, marginBottom: tokens.spacing.lg }}>
+          {tabs.map(tab => (
+            <TouchableOpacity
+              key={tab.id}
+              onPress={() => setActiveTab(tab.id as any)}
+              style={{
+                flex: 1, alignItems: 'center', paddingVertical: tokens.spacing.sm,
+                borderBottomWidth: 3, borderBottomColor: activeTab === tab.id ? tokens.colors.primary : 'transparent'
+              }}
+            >
+              <AtomicIcon name={tab.icon as any} size={20} color={activeTab === tab.id ? 'primary' : 'secondary'} />
+              <AtomicText style={{ 
+                ...tokens.typography.labelSmall, 
+                color: activeTab === tab.id ? tokens.colors.primary : tokens.colors.textSecondary,
+                marginTop: 4
+              }}>
+                {tab.label}
+              </AtomicText>
+            </TouchableOpacity>
+          ))}
+        </View>
+
+        <ScrollView showsVerticalScrollIndicator={false} contentContainerStyle={{ paddingBottom: 60 }}>
+          {activeTab === 'content' && <TextContentTab text={props.text} onTextChange={props.onTextChange} t={t} />}
+          {activeTab === 'style' && (
+            <TextStyleTab 
+              fontSize={props.fontSize} setFontSize={props.onFontSizeChange}
+              color={props.color} setColor={props.onColorChange}
+              fontFamily={props.fontFamily} setFontFamily={props.onFontFamilyChange}
+              t={t}
+            />
+          )}
+          {activeTab === 'transform' && (
+            <TextTransformTab 
+              scale={props.scale} setScale={props.onScaleChange}
+              rotation={props.rotation} setRotation={props.onRotationChange}
+              opacity={props.opacity} setOpacity={props.onOpacityChange}
+              onDelete={props.onDelete}
+              t={t}
+            />
+          )}
+        </ScrollView>
+      </View>
+    </BottomSheetModal>
+  );
+});
+
+TextEditorSheet.displayName = 'TextEditorSheet';