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

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@umituz/react-native-design-system",
-  "version": "2.6.111",
-  "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll and UUID utilities",
+  "version": "2.6.112",
+  "description": "Universal design system for React Native apps - Consolidated package with atoms, molecules, organisms, theme, typography, responsive, safe area, exception, infinite scroll, UUID and image utilities",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "exports": {
@@ -19,6 +19,7 @@
     "./responsive": "./src/responsive/index.ts",
     "./safe-area": "./src/safe-area/index.ts",
     "./device": "./src/device/index.ts",
+    "./image": "./src/image/index.ts",
     "./package.json": "./package.json"
   },
   "scripts": {
@@ -40,7 +41,8 @@
     "theme",
     "typography",
     "responsive",
-    "safe-area"
+    "safe-area",
+    "image"
   ],
   "author": "Ümit UZ <umit@umituz.com>",
   "license": "MIT",
@@ -64,6 +66,7 @@
     "expo-crypto": ">=13.0.0",
     "expo-device": ">=5.0.0",
     "expo-font": ">=12.0.0",
+    "expo-image": ">=3.0.0",
     "expo-sharing": ">=12.0.0",
     "react": ">=19.0.0",
     "react-native": ">=0.81.0",
@@ -113,6 +116,7 @@
     "expo-file-system": "^19.0.21",
     "expo-font": "~13.0.0",
     "expo-haptics": "~14.0.0",
+    "expo-image": "~3.0.11",
     "expo-localization": "~16.0.1",
     "expo-sharing": "~14.0.8",
     "react": "19.1.0",

package/src/atoms/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/atoms/index.ts

@@ -118,3 +118,6 @@ export { AtomicKeyboardAvoidingView, type AtomicKeyboardAvoidingViewProps } from
 
 // GlassView
 export { GlassView, type GlassViewProps } from './GlassView';
+
+// Image
+export { AtomicImage, type AtomicImageProps } from './image/AtomicImage';

package/src/exports/image.ts

@@ -0,0 +1,7 @@
+/**
+ * Image Exports
+ *
+ * Image utilities and components for React Native
+ */
+
+export * from '../image';

package/src/image/domain/entities/EditorTypes.ts

@@ -0,0 +1,23 @@
+/**
+ * Domain - Editor Types (Main Export)
+ *
+ * Central export point for all editor-related types
+ */
+
+// Tools
+export * from './editor/EditorToolTypes';
+
+// Elements
+export * from './editor/EditorElementTypes';
+
+// Layers & History
+export * from './editor/EditorLayerTypes';
+
+// State
+export * from './editor/EditorStateTypes';
+
+// Configuration
+export * from './editor/EditorConfigTypes';
+
+// Filters
+export * from './editor/EditorFilterTypes';

package/src/image/domain/entities/ImageConstants.ts

@@ -0,0 +1,38 @@
+/**
+ * Image Domain - Configuration Constants
+ */
+import { SaveFormat } from "./ImageTypes";
+
+export interface ImageConfiguration {
+    readonly maxWidth: number;
+    readonly maxHeight: number;
+    readonly defaultQuality: number;
+    readonly thumbnailSize: number;
+    readonly compressQuality: {
+        readonly low: number;
+        readonly medium: number;
+        readonly high: number;
+    };
+    readonly format: {
+        readonly jpeg: SaveFormat;
+        readonly png: SaveFormat;
+        readonly webp: SaveFormat;
+    };
+}
+
+export const IMAGE_CONSTANTS: ImageConfiguration = {
+    maxWidth: 2048,
+    maxHeight: 2048,
+    defaultQuality: 0.8,
+    thumbnailSize: 200,
+    compressQuality: {
+        low: 0.5,
+        medium: 0.7,
+        high: 0.9,
+    },
+    format: {
+        jpeg: 'jpeg' as SaveFormat,
+        png: 'png' as SaveFormat,
+        webp: 'webp' as SaveFormat,
+    },
+};

package/src/image/domain/entities/ImageFilterTypes.ts

@@ -0,0 +1,70 @@
+/**
+ * Image Domain - Filter Types
+ */
+
+export enum ImageFilterType {
+  BLUR = 'blur',
+  SHARPEN = 'sharpen',
+  BRIGHTNESS = 'brightness',
+  CONTRAST = 'contrast',
+  SATURATION = 'saturation',
+  SEPIA = 'sepia',
+  GRAYSCALE = 'grayscale',
+  VINTAGE = 'vintage',
+  VIGNETTE = 'vignette',
+}
+
+export interface ImageFilterOptions {
+  intensity?: number;
+  radius?: number;
+  amount?: number;
+}
+
+export interface ImageFilter {
+  type: ImageFilterType;
+  options?: ImageFilterOptions;
+}
+
+export interface ImageColorAdjustment {
+  brightness?: number;
+  contrast?: number;
+  saturation?: number;
+  hue?: number;
+}
+
+export interface ImageQualityMetrics {
+  sharpness: number;
+  brightness: number;
+  contrast: number;
+  colorfulness: number;
+  overallQuality: number;
+}
+
+export interface ImageColorPalette {
+  dominant: string[];
+  palette: Array<{
+    color: string;
+    percentage: number;
+    population: number;
+  }>;
+}
+
+export interface ImageMetadataExtended {
+  format: string;
+  size: number;
+  dimensions: { width: number; height: number };
+  colorSpace: string;
+  hasAlpha: boolean;
+  orientation: number;
+  dpi?: number;
+  creationDate?: Date;
+  modificationDate?: Date;
+  gps?: { latitude: number; longitude: number };
+  camera?: {
+    make?: string;
+    model?: string;
+    iso?: number;
+    flash?: boolean;
+    focalLength?: number;
+  };
+}

package/src/image/domain/entities/ImageTemplateTypes.ts

@@ -0,0 +1,18 @@
+/**
+ * Image Template Types
+ */
+
+export interface ImageTemplate {
+  id: string;
+  name: string;
+  url: string;
+}
+
+export interface MemeTemplateOptions {
+  templateKey: string;
+  topText?: string;
+  bottomText?: string;
+  style?: string; // e.g. 'black' for black text, or custom style
+  width?: number;
+  height?: number;
+}

package/src/image/domain/entities/ImageTypes.ts

@@ -0,0 +1,86 @@
+/**
+ * Image Domain - Core Type Definitions
+ */
+
+export enum ImageFormat {
+    JPEG = 'jpeg',
+    PNG = 'png',
+    WEBP = 'webp',
+}
+
+export type SaveFormat = 'jpeg' | 'png' | 'webp';
+
+export enum ImageOrientation {
+    PORTRAIT = 'portrait',
+    LANDSCAPE = 'landscape',
+    SQUARE = 'square',
+}
+
+export interface ImageDimensions {
+    width: number;
+    height: number;
+}
+
+export interface ImageCropArea {
+    originX: number;
+    originY: number;
+    width: number;
+    height: number;
+}
+
+export interface ImageFlipOptions {
+    vertical?: boolean;
+    horizontal?: boolean;
+}
+
+export interface ImageManipulateAction {
+    resize?: Partial<ImageDimensions>;
+    crop?: ImageCropArea;
+    rotate?: number;
+    flip?: ImageFlipOptions;
+}
+
+export interface ImageSaveOptions {
+    format?: SaveFormat;
+    compress?: number;
+    base64?: boolean;
+}
+
+export interface ImageManipulationResult {
+    uri: string;
+    width: number;
+    height: number;
+    base64?: string;
+}
+
+export interface ImageMetadata extends ImageDimensions {
+    uri: string;
+    format?: ImageFormat;
+    size?: number;
+    orientation?: ImageOrientation;
+}
+
+export interface ImageViewerItem {
+    uri: string;
+    title?: string;
+    description?: string;
+    width?: number;
+    height?: number;
+}
+
+export interface ImageGalleryOptions {
+    index?: number;
+    backgroundColor?: string;
+    swipeToCloseEnabled?: boolean;
+    doubleTapToZoomEnabled?: boolean;
+    onDismiss?: () => void;
+    onIndexChange?: (index: number) => void;
+}
+
+export interface ImageOperationResult {
+    success: boolean;
+    uri?: string;
+    error?: string;
+    width?: number;
+    height?: number;
+}

package/src/image/domain/entities/ValidationResult.ts

@@ -0,0 +1,15 @@
+/**
+ * Validation Result Interface
+ * Represents the outcome of a validation operation
+ */
+export interface ValidationResult {
+  /**
+   * Whether the validation passed
+   */
+  isValid: boolean;
+
+  /**
+   * Error message if validation failed
+   */
+  error?: string;
+}

package/src/image/domain/entities/editor/EditorConfigTypes.ts

@@ -0,0 +1,35 @@
+/**
+ * Domain - Editor Configuration Types
+ */
+
+export interface EditorOptions {
+  maxLayers?: number;
+  maxHistory?: number;
+  enableUndo?: boolean;
+  enableRedo?: boolean;
+  enableFilters?: boolean;
+  enableShapes?: boolean;
+  enableText?: boolean;
+  enableStickers?: boolean;
+  enableCrop?: boolean;
+  brushSizeRange?: [number, number];
+  strokeWidthRange?: [number, number];
+  fontSizeRange?: [number, number];
+  defaultColors?: string[];
+  stickerPacks?: string[];
+  customFonts?: string[];
+}
+
+export interface EditorExportOptions {
+  format: 'jpeg' | 'png' | 'webp';
+  quality: number;
+  backgroundColor?: string;
+  includeHiddenLayers?: boolean;
+  flattenLayers?: boolean;
+  maxSize?: number;
+}
+
+export interface EditorEvent {
+  type: 'toolChange' | 'layerAdd' | 'layerRemove' | 'layerUpdate' | 'selectionChange' | 'historyChange';
+  data: unknown;
+}

package/src/image/domain/entities/editor/EditorElementTypes.ts

@@ -0,0 +1,60 @@
+/**
+ * Domain - Editor Element Types
+ */
+
+import type { ShapeType } from './EditorToolTypes';
+
+export interface EditorPoint {
+  x: number;
+  y: number;
+}
+
+export interface EditorDimensions {
+  width: number;
+  height: number;
+}
+
+export interface EditorStroke {
+  points: EditorPoint[];
+  color: string;
+  size: number;
+  style: string;
+  opacity: number;
+}
+
+export interface EditorShape {
+  type: ShapeType;
+  startPoint: EditorPoint;
+  endPoint: EditorPoint;
+  color: string;
+  strokeWidth: number;
+  fillColor?: string;
+  opacity: number;
+  rotation?: number;
+}
+
+export interface EditorText {
+  id: string;
+  text: string;
+  position: EditorPoint;
+  fontSize: number;
+  fontFamily: string;
+  color: string;
+  backgroundColor?: string;
+  rotation: number;
+  opacity: number;
+  maxWidth?: number;
+  textAlign: 'left' | 'center' | 'right';
+  fontWeight: 'normal' | 'bold';
+  fontStyle: 'normal' | 'italic';
+}
+
+export interface EditorSticker {
+  id: string;
+  uri: string;
+  position: EditorPoint;
+  size: EditorDimensions;
+  rotation: number;
+  opacity: number;
+  scale: number;
+}

package/src/image/domain/entities/editor/EditorFilterTypes.ts

@@ -0,0 +1,9 @@
+/**
+ * Domain - Editor Filter Types
+ */
+
+export interface EditorFilter {
+  type: string;
+  intensity: number;
+  preview?: string;
+}

package/src/image/domain/entities/editor/EditorLayerTypes.ts

@@ -0,0 +1,34 @@
+/**
+ * Domain - Editor Layer Types
+ */
+
+import type { EditorStroke, EditorShape, EditorText, EditorSticker } from './EditorElementTypes';
+
+export interface EditorLayer {
+  id: string;
+  name: string;
+  visible: boolean;
+  opacity: number;
+  locked: boolean;
+  elements: Array<{
+    type: 'stroke' | 'shape' | 'text' | 'sticker';
+    data: EditorStroke | EditorShape | EditorText | EditorSticker;
+  }>;
+}
+
+export interface EditorHistory {
+  id: string;
+  timestamp: Date;
+  layers: EditorLayer[];
+  thumbnail?: string;
+}
+
+export interface EditorSelection {
+  bounds: {
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+  };
+  elements: string[];
+}

package/src/image/domain/entities/editor/EditorStateTypes.ts

@@ -0,0 +1,35 @@
+/**
+ * Domain - Editor State Types
+ */
+
+import type { EditorTool } from './EditorToolTypes';
+import type { EditorLayer } from './EditorLayerTypes';
+import type { EditorSelection } from './EditorLayerTypes';
+import type { EditorHistory } from './EditorLayerTypes';
+import type { EditorPoint, EditorDimensions } from './EditorElementTypes';
+import type { EditorFilter } from './EditorFilterTypes';
+
+export interface EditorCropArea {
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  aspectRatio?: number;
+}
+
+export interface EditorState {
+  originalUri: string;
+  currentUri?: string;
+  tool: EditorTool;
+  selectedLayer?: string;
+  layers: EditorLayer[];
+  history: EditorHistory[];
+  historyIndex: number;
+  selection?: EditorSelection;
+  cropArea?: EditorCropArea;
+  activeFilter?: EditorFilter;
+  isDirty: boolean;
+  dimensions: EditorDimensions;
+  zoom: number;
+  pan: EditorPoint;
+}

package/src/image/domain/entities/editor/EditorToolTypes.ts

@@ -0,0 +1,33 @@
+/**
+ * Domain - Editor Tool Types
+ */
+
+export enum EditorTool {
+  MOVE = 'move',
+  BRUSH = 'brush',
+  ERASER = 'eraser',
+  TEXT = 'text',
+  SHAPE = 'shape',
+  CROP = 'crop',
+  FILTER = 'filter',
+  STICKER = 'sticker',
+  SELECT = 'select',
+}
+
+export enum ShapeType {
+  RECTANGLE = 'rectangle',
+  CIRCLE = 'circle',
+  LINE = 'line',
+  ARROW = 'arrow',
+  TRIANGLE = 'triangle',
+  STAR = 'star',
+  HEART = 'heart',
+}
+
+export enum BrushStyle {
+  NORMAL = 'normal',
+  MARKER = 'marker',
+  SPRAY = 'spray',
+  PENCIL = 'pencil',
+  CALIGRAPHY = 'caligraphy',
+}

package/src/image/domain/utils/ImageUtils.ts

@@ -0,0 +1,103 @@
+/**
+ * Image Domain - Utility Functions
+ */
+import { ImageFormat, ImageOrientation, ImageDimensions, ImageCropArea } from "../entities/ImageTypes";
+import { IMAGE_CONSTANTS } from "../entities/ImageConstants";
+
+export class ImageUtils {
+    static getOrientation(width: number, height: number): ImageOrientation {
+        if (width > height) return ImageOrientation.LANDSCAPE;
+        if (height > width) return ImageOrientation.PORTRAIT;
+        return ImageOrientation.SQUARE;
+    }
+
+    static getAspectRatio(width: number, height: number): number {
+        return width / height;
+    }
+
+    static fitToSize(
+        width: number,
+        height: number,
+        maxWidth: number,
+        maxHeight: number
+    ): ImageDimensions {
+        const aspectRatio = ImageUtils.getAspectRatio(width, height);
+        let newWidth = width;
+        let newHeight = height;
+
+        if (width > maxWidth) {
+            newWidth = maxWidth;
+            newHeight = newWidth / aspectRatio;
+        }
+
+        if (newHeight > maxHeight) {
+            newHeight = maxHeight;
+            newWidth = newHeight * aspectRatio;
+        }
+
+        return {
+            width: Math.round(newWidth),
+            height: Math.round(newHeight),
+        };
+    }
+
+    static getThumbnailSize(
+        width: number,
+        height: number,
+        thumbnailSize: number = IMAGE_CONSTANTS.thumbnailSize
+    ): ImageDimensions {
+        return ImageUtils.fitToSize(width, height, thumbnailSize, thumbnailSize);
+    }
+
+    static isValidImageUri(uri: string): boolean {
+        if (!uri) return false;
+        return (
+            uri.startsWith('file://') ||
+            uri.startsWith('content://') ||
+            uri.startsWith('http://') ||
+            uri.startsWith('https://') ||
+            uri.startsWith('data:image/')
+        );
+    }
+
+    static getFormatFromUri(uri: string): ImageFormat | null {
+        const lowerUri = uri.toLowerCase();
+        if (lowerUri.includes('.jpg') || lowerUri.includes('.jpeg')) return ImageFormat.JPEG;
+        if (lowerUri.includes('.png')) return ImageFormat.PNG;
+        if (lowerUri.includes('.webp')) return ImageFormat.WEBP;
+        return null;
+    }
+
+    static getExtensionFromFormat(format: ImageFormat): string {
+        switch (format) {
+            case ImageFormat.JPEG: return 'jpg';
+            case ImageFormat.PNG: return 'png';
+            case ImageFormat.WEBP: return 'webp';
+            default: return 'jpg';
+        }
+    }
+
+    static getSquareCrop(width: number, height: number): ImageCropArea {
+        const size = Math.min(width, height);
+        const originX = (width - size) / 2;
+        const originY = (height - size) / 2;
+
+        return {
+            originX: Math.round(originX),
+            originY: Math.round(originY),
+            width: Math.round(size),
+            height: Math.round(size),
+        };
+    }
+
+    static formatFileSize(bytes: number): string {
+        if (bytes < 1024) return `${bytes} B`;
+        if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+        return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+    }
+
+    static needsCompression(bytes: number, maxSizeMB: number = 2): boolean {
+        const maxBytes = maxSizeMB * 1024 * 1024;
+        return bytes > maxBytes;
+    }
+}