@umituz/react-native-design-system 2.6.110 → 2.6.112

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

@@ -0,0 +1,111 @@
+/**
+ * Presentation - Text Editor Tabs
+ */
+
+import React from 'react';
+import { View, TextInput, ScrollView, TouchableOpacity } from 'react-native';
+import Slider from '@react-native-community/slider';
+import { AtomicText, AtomicIcon, useAppDesignTokens } from '@umituz/react-native-design-system';
+
+interface TabProps {
+  t: (key: string) => string;
+}
+
+export const TextContentTab: React.FC<TabProps & { text: string; onTextChange: (t: string) => void }> = ({ text, onTextChange, t }) => {
+  const tokens = useAppDesignTokens();
+  return (
+    <View style={{ gap: tokens.spacing.lg }}>
+      <TextInput
+        value={text}
+        onChangeText={onTextChange}
+        placeholder={t('editor.text_placeholder')}
+        style={{
+          ...tokens.typography.bodyLarge,
+          borderWidth: 1,
+          borderColor: tokens.colors.border,
+          borderRadius: tokens.radius.md,
+          padding: tokens.spacing.md,
+          minHeight: 120,
+          textAlignVertical: 'top',
+        }}
+        multiline
+      />
+    </View>
+  );
+};
+
+export const TextStyleTab: React.FC<TabProps & { 
+  fontSize: number; setFontSize: (s: number) => void;
+  color: string; setColor: (c: string) => void;
+  fontFamily: string; setFontFamily: (f: string) => void;
+}> = ({ fontSize, setFontSize, color, setColor, fontFamily, setFontFamily, t }) => {
+  const tokens = useAppDesignTokens();
+  const colors = ['#FFFFFF', '#000000', '#FF0000', '#FFFF00', '#0000FF', '#00FF00', '#FF00FF', '#FFA500'];
+  const fonts = ['System', 'serif', 'sans-serif', 'monospace'];
+
+  return (
+    <View style={{ gap: tokens.spacing.xl }}>
+      <View>
+        <AtomicText style={{ ...tokens.typography.labelMedium, marginBottom: tokens.spacing.sm }}>Font</AtomicText>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: tokens.spacing.sm }}>
+          {fonts.map(f => (
+            <TouchableOpacity key={f} onPress={() => setFontFamily(f)} style={{
+              paddingHorizontal: tokens.spacing.md, paddingVertical: tokens.spacing.xs, borderRadius: tokens.radius.full,
+              borderWidth: 1, borderColor: fontFamily === f ? tokens.colors.primary : tokens.colors.border,
+              backgroundColor: fontFamily === f ? tokens.colors.primaryContainer : tokens.colors.surface
+            }}>
+              <AtomicText style={{ fontFamily: f }}>{f}</AtomicText>
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      </View>
+
+      <View>
+        <AtomicText style={{ ...tokens.typography.labelMedium, marginBottom: tokens.spacing.sm }}>Color</AtomicText>
+        <ScrollView horizontal showsHorizontalScrollIndicator={false} contentContainerStyle={{ gap: tokens.spacing.sm }}>
+          {colors.map(c => (
+            <TouchableOpacity key={c} onPress={() => setColor(c)} style={{
+              width: 40, height: 40, borderRadius: 20, backgroundColor: c,
+              borderWidth: color === c ? 3 : 1, borderColor: tokens.colors.primary
+            }} />
+          ))}
+        </ScrollView>
+      </View>
+
+      <View>
+        <AtomicText style={{ ...tokens.typography.labelMedium, marginBottom: tokens.spacing.xs }}>Size: {fontSize}px</AtomicText>
+        <Slider value={fontSize} onValueChange={setFontSize} minimumValue={12} maximumValue={100} step={1} minimumTrackTintColor={tokens.colors.primary} />
+      </View>
+    </View>
+  );
+};
+
+export const TextTransformTab: React.FC<TabProps & {
+  scale: number; setScale: (s: number) => void;
+  rotation: number; setRotation: (r: number) => void;
+  opacity: number; setOpacity: (o: number) => void;
+  onDelete?: () => void;
+}> = ({ scale, setScale, rotation, setRotation, opacity, setOpacity, onDelete, t }) => {
+  const tokens = useAppDesignTokens();
+  return (
+    <View style={{ gap: tokens.spacing.xl }}>
+      <View>
+        <AtomicText style={{ ...tokens.typography.labelMedium, marginBottom: tokens.spacing.xs }}>Scale: {scale.toFixed(2)}x</AtomicText>
+        <Slider value={scale} onValueChange={setScale} minimumValue={0.2} maximumValue={3} step={0.1} minimumTrackTintColor={tokens.colors.primary} />
+      </View>
+      <View>
+        <AtomicText style={{ ...tokens.typography.labelMedium, marginBottom: tokens.spacing.xs }}>Rotation: {Math.round(rotation)}°</AtomicText>
+        <Slider value={rotation} onValueChange={setRotation} minimumValue={0} maximumValue={360} step={1} minimumTrackTintColor={tokens.colors.primary} />
+      </View>
+      {onDelete && (
+        <TouchableOpacity onPress={onDelete} style={{
+          flexDirection: 'row', alignItems: 'center', justifyContent: 'center', gap: tokens.spacing.sm,
+          padding: tokens.spacing.md, borderRadius: tokens.radius.md, borderWidth: 1, borderColor: tokens.colors.error
+        }}>
+          <AtomicIcon name="trash" size={20} color="error" />
+          <AtomicText style={{ ...tokens.typography.labelMedium, color: tokens.colors.error }}>Delete Layer</AtomicText>
+        </TouchableOpacity>
+      )}
+    </View>
+  );
+};

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

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Image as ExpoImage, ImageProps as ExpoImageProps } from 'expo-image';
+import { StyleSheet, ViewStyle } from 'react-native';
+
+export type AtomicImageProps = ExpoImageProps & {
+  rounded?: boolean;
+};
+
+export const AtomicImage: React.FC<AtomicImageProps> = ({
+  style,
+  rounded,
+  contentFit = 'cover',
+  transition = 300,
+  ...props
+}) => {
+
+  
+  return (
+    <ExpoImage
+      style={[
+        style,
+        rounded && { borderRadius: 9999 }
+      ]}
+      contentFit={contentFit}
+      transition={transition}
+      {...props}
+    />
+  );
+};

package/src/image/presentation/hooks/useImage.ts

@@ -0,0 +1,39 @@
+/**
+ * Presentation - Image Hook
+ * 
+ * Aggregator hook combining transformation and conversion capabilities
+ */
+
+import { useImageTransform } from './useImageTransform';
+import { useImageConversion } from './useImageConversion';
+import { useImageBatch } from './useImageBatch';
+import { useImageEnhance } from './useImageEnhance';
+import { useImageMetadata } from './useImageMetadata';
+
+export const useImage = () => {
+  const transform = useImageTransform();
+  const conversion = useImageConversion();
+  const batch = useImageBatch();
+  const enhance = useImageEnhance();
+  const metadata = useImageMetadata();
+
+  return {
+    ...transform,
+    ...conversion,
+    ...batch,
+    ...enhance,
+    ...metadata,
+    isProcessing:
+      transform.isTransforming ||
+      conversion.isConverting ||
+      batch.isBatchProcessing ||
+      enhance.isEnhancing ||
+      metadata.isExtracting,
+    error:
+      transform.transformError ||
+      conversion.conversionError ||
+      batch.batchError ||
+      enhance.enhancementError ||
+      metadata.metadataError,
+  };
+};

package/src/image/presentation/hooks/useImageBatch.ts

@@ -0,0 +1,28 @@
+/**
+ * Presentation - Image Batch Hook
+ */
+
+import { useCallback } from 'react';
+import { useImageOperation } from './useImageOperation';
+import { ImageBatchService, type BatchOperation, type BatchProcessingOptions } from '../../infrastructure/services/ImageBatchService';
+
+export const useImageBatch = () => {
+    const { isProcessing, error, execute } = useImageOperation();
+
+    const processBatch = useCallback((operations: BatchOperation[], options?: BatchProcessingOptions) =>
+        execute(() => ImageBatchService.processBatch(operations, options), 'Failed to process batch'), [execute]);
+
+    const resizeBatch = useCallback((uris: string[], width?: number, height?: number, options?: BatchProcessingOptions & { saveOptions?: any }) =>
+        execute(() => ImageBatchService.resizeBatch(uris, width, height, options), 'Failed to resize batch'), [execute]);
+
+    const compressBatch = useCallback((uris: string[], quality?: number, options?: BatchProcessingOptions) =>
+        execute(() => ImageBatchService.compressBatch(uris, quality, options), 'Failed to compress batch'), [execute]);
+
+    return {
+        processBatch,
+        resizeBatch,
+        compressBatch,
+        isBatchProcessing: isProcessing,
+        batchError: error,
+    };
+};

package/src/image/presentation/hooks/useImageConversion.ts

@@ -0,0 +1,29 @@
+/**
+ * Presentation - Image Conversion Hook
+ */
+import { useCallback } from 'react';
+import { useImageOperation } from './useImageOperation';
+import { ImageConversionService } from '../../infrastructure/services/ImageConversionService';
+import { ImageStorageService } from '../../infrastructure/services/ImageStorageService';
+import type { ImageSaveOptions, SaveFormat } from '../../domain/entities/ImageTypes';
+
+export const useImageConversion = () => {
+    const { isProcessing, error, execute } = useImageOperation();
+
+    const compress = useCallback((uri: string, quality?: number) =>
+        execute(() => ImageConversionService.compress(uri, quality), 'Failed to compress'), [execute]);
+
+    const convertFormat = useCallback((uri: string, format: SaveFormat, quality?: number) =>
+        execute(() => ImageConversionService.convertFormat(uri, format, quality), 'Failed to convert format'), [execute]);
+
+    const createThumbnail = useCallback((uri: string, size?: number, options?: ImageSaveOptions) =>
+        execute(() => ImageConversionService.createThumbnail(uri, size, options), 'Failed to create thumbnail'), [execute]);
+
+    const saveImage = useCallback((uri: string, filename?: string) =>
+        execute(() => ImageStorageService.saveImage(uri, filename), 'Failed to save image'), [execute]);
+
+    return {
+        compress, convertFormat, createThumbnail, saveImage,
+        isConverting: isProcessing, conversionError: error,
+    };
+};

package/src/image/presentation/hooks/useImageEnhance.ts

@@ -0,0 +1,32 @@
+/**
+ * Presentation - Image Enhance Hook
+ */
+
+import { useCallback } from 'react';
+import { useImageOperation } from './useImageOperation';
+import { ImageEnhanceService, type AutoEnhancementOptions } from '../../infrastructure/services/ImageEnhanceService';
+
+export const useImageEnhance = () => {
+    const { isProcessing, error, execute } = useImageOperation();
+
+    const autoEnhance = useCallback((uri: string, options?: AutoEnhancementOptions) =>
+        execute(() => ImageEnhanceService.autoEnhance(uri, options), 'Failed to auto enhance'), [execute]);
+
+    const enhancePortrait = useCallback((uri: string) =>
+        execute(() => ImageEnhanceService.enhancePortrait(uri), 'Failed to enhance portrait'), [execute]);
+
+    const enhanceLandscape = useCallback((uri: string) =>
+        execute(() => ImageEnhanceService.enhanceLandscape(uri), 'Failed to enhance landscape'), [execute]);
+
+    const analyzeImage = useCallback((uri: string) =>
+        execute(() => ImageEnhanceService.analyzeImage(uri), 'Failed to analyze image'), [execute]);
+
+    return {
+        autoEnhance,
+        enhancePortrait,
+        enhanceLandscape,
+        analyzeImage,
+        isEnhancing: isProcessing,
+        enhancementError: error,
+    };
+};

package/src/image/presentation/hooks/useImageGallery.ts

@@ -0,0 +1,90 @@
+/**
+ * Presentation - Image Gallery Hook
+ */
+
+import { useState, useCallback, useMemo } from 'react';
+import { ImageViewerService } from '../../infrastructure/services/ImageViewerService';
+import type {
+  ImageViewerItem,
+  ImageGalleryOptions,
+} from '../../domain/entities/ImageTypes';
+
+export interface UseImageGalleryReturn {
+  visible: boolean;
+  currentIndex: number;
+  images: ImageViewerItem[];
+  open: (images: ImageViewerItem[] | string[], startIndex?: number, options?: ImageGalleryOptions) => void;
+  close: () => void;
+  setIndex: (index: number) => void;
+  options: ImageGalleryOptions;
+}
+
+export const useImageGallery = (
+  defaultOptions?: ImageGalleryOptions
+): UseImageGalleryReturn => {
+  const [visible, setVisible] = useState(false);
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [images, setImages] = useState<ImageViewerItem[]>([]);
+  const [galleryOptions, setGalleryOptions] = useState<ImageGalleryOptions>(
+    defaultOptions || ImageViewerService.getDefaultOptions()
+  );
+
+  const open = useCallback(
+    (
+      imageData: ImageViewerItem[] | string[],
+      startIndex: number = 0,
+      options?: ImageGalleryOptions
+    ) => {
+      const preparedImages =
+        typeof imageData[0] === 'string'
+          ? ImageViewerService.prepareImages(imageData as string[])
+          : ImageViewerService.prepareImagesWithMetadata(imageData as ImageViewerItem[]);
+
+      setImages(preparedImages);
+      setCurrentIndex(options?.index ?? startIndex);
+
+      if (options) {
+        setGalleryOptions({
+          ...galleryOptions,
+          ...options,
+        });
+      }
+
+      setVisible(true);
+    },
+    [galleryOptions]
+  );
+
+  const close = useCallback(() => {
+    setVisible(false);
+
+    if (galleryOptions.onDismiss) {
+      galleryOptions.onDismiss();
+    }
+  }, [galleryOptions]);
+
+  const setIndex = useCallback((index: number) => {
+    setCurrentIndex(index);
+
+    if (galleryOptions.onIndexChange) {
+      galleryOptions.onIndexChange(index);
+    }
+  }, [galleryOptions]);
+
+  const options = useMemo(() => ({
+    backgroundColor: galleryOptions.backgroundColor || '#000000',
+    swipeToCloseEnabled: galleryOptions.swipeToCloseEnabled ?? true,
+    doubleTapToZoomEnabled: galleryOptions.doubleTapToZoomEnabled ?? true,
+  }), [galleryOptions]);
+
+  return {
+    visible,
+    currentIndex,
+    images,
+    open,
+    close,
+    setIndex,
+    options,
+  };
+};
+

package/src/image/presentation/hooks/useImageMetadata.ts

@@ -0,0 +1,28 @@
+/**
+ * Presentation - Image Metadata Hook
+ */
+
+import { useCallback } from 'react';
+import { useImageOperation } from './useImageOperation';
+import { ImageMetadataService, type ImageMetadataExtractionOptions } from '../../infrastructure/services/ImageMetadataService';
+
+export const useImageMetadata = () => {
+    const { isProcessing, error, execute } = useImageOperation();
+
+    const extractMetadata = useCallback((uri: string, options?: ImageMetadataExtractionOptions) =>
+        execute(() => ImageMetadataService.extractMetadata(uri, options), 'Failed to extract metadata'), [execute]);
+
+    const getBasicInfo = useCallback((uri: string) =>
+        execute(() => ImageMetadataService.getBasicInfo(uri), 'Failed to get basic info'), [execute]);
+
+    const hasMetadata = useCallback((uri: string) =>
+        execute(() => ImageMetadataService.hasMetadata(uri), 'Failed to check metadata'), [execute]);
+
+    return {
+        extractMetadata,
+        getBasicInfo,
+        hasMetadata,
+        isExtracting: isProcessing,
+        metadataError: error,
+    };
+};

package/src/image/presentation/hooks/useImageOperation.ts

@@ -0,0 +1,37 @@
+/**
+ * Presentation - Image Operation Hook
+ * 
+ * Generic state management for async image operations
+ */
+
+import { useState, useCallback } from 'react';
+import { ImageError } from '../../infrastructure/utils/ImageErrorHandler';
+
+export const useImageOperation = () => {
+    const [isProcessing, setIsProcessing] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    const execute = useCallback(async <T>(
+        operation: () => Promise<T>,
+        errorMessage: string
+    ): Promise<T | null> => {
+        setIsProcessing(true);
+        setError(null);
+        
+        try {
+            const result = await operation();
+            return result;
+        } catch (err) {
+            if (err instanceof ImageError) {
+                setError(err.message);
+            } else {
+                setError(err instanceof Error ? err.message : errorMessage);
+            }
+            return null;
+        } finally {
+            setIsProcessing(false);
+        }
+    }, []);
+
+    return { isProcessing, error, execute };
+};

package/src/image/presentation/hooks/useImageTransform.ts

@@ -0,0 +1,42 @@
+/**
+ * Presentation - Image Transform Hook
+ */
+import { useCallback } from 'react';
+import { useImageOperation } from './useImageOperation';
+import { ImageTransformService } from '../../infrastructure/services/ImageTransformService';
+import type {
+    ImageManipulateAction,
+    ImageSaveOptions,
+    ImageCropArea,
+    ImageFlipOptions,
+} from '../../domain/entities/ImageTypes';
+
+export const useImageTransform = () => {
+    const { isProcessing, error, execute } = useImageOperation();
+
+    const resize = useCallback((uri: string, width?: number, height?: number, options?: ImageSaveOptions) =>
+        execute(() => ImageTransformService.resize(uri, width, height, options), 'Failed to resize'), [execute]);
+
+    const crop = useCallback((uri: string, cropArea: ImageCropArea, options?: ImageSaveOptions) =>
+        execute(() => ImageTransformService.crop(uri, cropArea, options), 'Failed to crop'), [execute]);
+
+    const rotate = useCallback((uri: string, degrees: number, options?: ImageSaveOptions) =>
+        execute(() => ImageTransformService.rotate(uri, degrees, options), 'Failed to rotate'), [execute]);
+
+    const flip = useCallback((uri: string, flipParams: ImageFlipOptions, options?: ImageSaveOptions) =>
+        execute(() => ImageTransformService.flip(uri, flipParams, options), 'Failed to flip'), [execute]);
+
+    const manipulate = useCallback((uri: string, action: ImageManipulateAction, options?: ImageSaveOptions) =>
+        execute(() => ImageTransformService.manipulate(uri, action, options), 'Failed to manipulate'), [execute]);
+
+    const resizeToFit = useCallback((uri: string, maxWidth: number, maxHeight: number, options?: ImageSaveOptions) =>
+        execute(() => ImageTransformService.resizeToFit(uri, maxWidth, maxHeight, options), 'Failed to resize to fit'), [execute]);
+
+    const cropToSquare = useCallback((uri: string, width: number, height: number, options?: ImageSaveOptions) =>
+        execute(() => ImageTransformService.cropToSquare(uri, width, height, options), 'Failed to crop square'), [execute]);
+
+    return {
+        resize, crop, rotate, flip, manipulate, resizeToFit, cropToSquare,
+        isTransforming: isProcessing, transformError: error,
+    };
+};

package/src/index.ts

@@ -62,6 +62,21 @@ export * from './exports/safe-area';
 // =============================================================================
 export * from './exports/exception';
 
+// =============================================================================
+// INFINITE SCROLL EXPORTS
+// =============================================================================
+export * from './exports/infinite-scroll';
+
+// =============================================================================
+// UUID EXPORTS
+// =============================================================================
+export * from './exports/uuid';
+
+// =============================================================================
+// IMAGE EXPORTS
+// =============================================================================
+export * from './exports/image';
+
 // =============================================================================
 // VARIANT UTILITIES
 // =============================================================================

package/src/infinite-scroll/domain/interfaces/infinite-scroll-list-props.ts

@@ -0,0 +1,67 @@
+/**
+ * Infinite Scroll List Props Interface
+ *
+ * Domain interface for component props
+ * Follows SOLID, DRY, KISS principles
+ */
+
+import type React from "react";
+import type { InfiniteScrollConfig } from "../types/infinite-scroll-config";
+
+export interface InfiniteScrollListProps<T> {
+  /**
+   * Configuration for infinite scroll
+   */
+  config: InfiniteScrollConfig<T>;
+
+  /**
+   * Render function for each item
+   */
+  renderItem: (item: T, index: number) => React.ReactElement;
+
+  /**
+   * Optional: Custom loading component
+   */
+  loadingComponent?: React.ReactElement;
+
+  /**
+   * Optional: Custom loading more component
+   */
+  loadingMoreComponent?: React.ReactElement;
+
+  /**
+   * Optional: Custom empty component
+   */
+  emptyComponent?: React.ReactElement;
+
+  /**
+   * Optional: Custom error component
+   */
+  errorComponent?: (error: string, retry: () => void) => React.ReactElement;
+
+  /**
+   * Optional: List header component
+   */
+  ListHeaderComponent?: React.ReactElement;
+
+  /**
+   * Optional: List footer component
+   */
+  ListFooterComponent?: React.ReactElement;
+
+  /**
+   * Optional: Additional FlatList props
+   */
+  flatListProps?: Omit<
+    React.ComponentProps<typeof import("react-native").FlatList<T>>,
+    | "data"
+    | "renderItem"
+    | "keyExtractor"
+    | "onEndReached"
+    | "onEndReachedThreshold"
+    | "onRefresh"
+    | "refreshing"
+    | "ListHeaderComponent"
+    | "ListFooterComponent"
+  >;
+}

package/src/infinite-scroll/domain/types/infinite-scroll-config.ts

@@ -0,0 +1,108 @@
+/**
+ * Infinite Scroll Configuration Types
+ *
+ * Domain types for infinite scroll configuration
+ * Follows SOLID, DRY, KISS principles
+ */
+
+/**
+ * Paginated result for cursor-based pagination
+ */
+export interface PaginatedResult<T> {
+  items: T[];
+  nextCursor: string | null;
+  hasMore: boolean;
+}
+
+/**
+ * Base configuration shared by all pagination modes
+ */
+interface BaseConfig<T> {
+  /**
+   * Total number of items available (optional, for progress tracking)
+   */
+  totalItems?: number;
+
+  /**
+   * Number of items to load per page
+   * Default: 20
+   */
+  pageSize?: number;
+
+  /**
+   * Number of items from the end to trigger loading more
+   * Default: 5 (loads more when 5 items from bottom)
+   */
+  threshold?: number;
+
+  /**
+   * Enable automatic loading when threshold is reached
+   * Default: true
+   */
+  autoLoad?: boolean;
+
+  /**
+   * Optional: Function to get unique key for each item
+   * If not provided, uses array index
+   * @param item - Item to get key for
+   * @param index - Item index
+   * @returns Unique key string
+   */
+  getItemKey?: (item: T, index: number) => string;
+}
+
+/**
+ * Page-based pagination configuration (default, backward compatible)
+ */
+export interface PageBasedConfig<T> extends BaseConfig<T> {
+  /**
+   * Initial page number (0-indexed)
+   * Default: 0
+   */
+  initialPage?: number;
+
+  /**
+   * Function to fetch data for a specific page
+   * @param page - Page number (0-indexed)
+   * @param pageSize - Number of items per page
+   * @returns Promise resolving to array of items
+   */
+  fetchData: (page: number, pageSize: number) => Promise<T[]>;
+
+  /**
+   * Optional: Function to check if there are more items
+   * If not provided, checks if last page has fewer items than pageSize
+   * @param lastPage - Last fetched page of items
+   * @param allPages - All fetched pages
+   * @returns true if there are more items to load
+   */
+  hasMore?: (lastPage: T[], allPages: T[][]) => boolean;
+}
+
+/**
+ * Cursor-based pagination configuration (new, for Firestore)
+ */
+export interface CursorBasedConfig<T> extends BaseConfig<T> {
+  /**
+   * Discriminator for cursor-based mode
+   */
+  paginationMode: "cursor";
+
+  /**
+   * Function to fetch data using cursor
+   * @param cursor - Cursor for next page (undefined for first page)
+   * @param pageSize - Number of items per page
+   * @returns Promise resolving to paginated result with cursor
+   */
+  fetchCursor: (
+    cursor: string | undefined,
+    pageSize: number,
+  ) => Promise<PaginatedResult<T>>;
+}
+
+/**
+ * Infinite scroll configuration (discriminated union)
+ */
+export type InfiniteScrollConfig<T> =
+  | PageBasedConfig<T>
+  | CursorBasedConfig<T>;