@umituz/react-native-photo-editor 2.0.23 → 2.0.25

package/src/presentation/components/DraggableLayer.tsx

@@ -5,13 +5,13 @@
  */
 
 import React, { memo } from "react";
-import { View, StyleSheet, TouchableOpacity } from "react-native";
+import { View, StyleSheet } from "react-native";
 import { GestureDetector } from "react-native-gesture-handler";
 import { Image } from "expo-image";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens, type DesignTokens } from "@umituz/react-native-design-system/theme";
 import { useTransformGesture } from "../../infrastructure/gesture/useTransformGesture";
-import { Layer, isTextLayer, isStickerLayer } from "../../domain/entities/Layer";
+import type { Layer } from "../entities/Layer.entity".entity";
 
 interface DraggableLayerProps {
   layer: Layer;
@@ -30,15 +30,15 @@ export const DraggableLayer = memo<DraggableLayerProps>(({
   onTransformEnd,
 }) => {
   const tokens = useAppDesignTokens();
-  const { state, gestures } = useTransformGesture(layer, {
-    onTransformEnd,
-    onPress,
-  });
+  const { state, gestures } = useTransformGesture(
+    { x: layer.x, y: layer.y, scale: layer.scale, rotation: layer.rotation },
+    { onTransformEnd, onPress }
+  );
 
   return (
     <GestureDetector gesture={gestures.composed}>
       <View
-        accessibilityLabel={isTextLayer(layer) ? layer.text || "Text layer" : "Sticker layer"}
+        accessibilityLabel={layer.isText() ? layer.text || "Text layer" : "Sticker layer"}
         accessibilityRole="button"
         style={[
           styles.container,
@@ -63,12 +63,12 @@ export const DraggableLayer = memo<DraggableLayerProps>(({
             borderStyle: "dashed",
             backgroundColor: isSelected
               ? tokens.colors.primary + "10"
-              : isTextLayer(layer)
+              : layer.isText()
                 ? layer.backgroundColor
                 : "transparent",
           }}
         >
-          {isTextLayer(layer) ? (
+          {layer.isText() ? (
             <AtomicText
               style={{
                 fontSize: layer.fontSize,
@@ -81,7 +81,7 @@ export const DraggableLayer = memo<DraggableLayerProps>(({
             >
               {layer.text || "TAP TO EDIT"}
             </AtomicText>
-          ) : isStickerLayer(layer) ? (
+          ) : layer.isSticker() ? (
             renderStickerContent(layer.uri, tokens)
           ) : null}
         </View>
@@ -92,7 +92,7 @@ export const DraggableLayer = memo<DraggableLayerProps>(({
 
 DraggableLayer.displayName = "DraggableLayer";
 
-function renderStickerContent(uri: string, tokens: any) {
+function renderStickerContent(uri: string, _tokens: DesignTokens) {
   const isEmoji = isEmojiString(uri);
 
   if (isEmoji) {

package/src/presentation/components/EditorCanvas.tsx

@@ -4,20 +4,20 @@
  */
 
 import React, { memo } from "react";
-import { View, StyleSheet } from "react-native";
+import { View, StyleSheet, type ViewStyle } from "react-native";
 import { Image } from "expo-image";
 import { DraggableLayer } from "./DraggableLayer";
-import { Layer } from "../../domain/entities/Layer";
-import type { FilterValues } from "../../domain/entities/Filters";
+import type { Layer } from "../entities/Layer.entity".entity";
+import type { FilterSettings } from "../../domain/value-objects/FilterSettings.vo";
 
 interface EditorCanvasProps {
   imageUrl: string;
   layers: Layer[];
   activeLayerId: string | null;
-  filters: FilterValues;
+  filters: FilterSettings;
   onLayerTap: (layerId: string) => void;
   onLayerTransform: (layerId: string, transform: { x: number; y: number; scale: number; rotation: number }) => void;
-  style?: any;
+  style?: ViewStyle;
 }
 
 export const EditorCanvas = memo<EditorCanvasProps>(({

package/src/presentation/components/EditorContent.tsx

@@ -0,0 +1,72 @@
+/**
+ * Editor Content Component
+ * Scrollable content area with canvas and tools
+ */
+
+import React from "react";
+import { ScrollView } from "react-native";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { EditorCanvas } from "./EditorCanvas";
+import { FontControls } from "./FontControls";
+import type { Layer } from "../entities/Layer.entity".entity";
+import type { FilterSettings } from "../../domain/value-objects/FilterSettings.vo";
+import type { EditorUIState } from "../../application/hooks/useEditorUI";
+
+interface EditorContentProps {
+  imageUrl: string;
+  layers: Layer[];
+  filters: FilterSettings;
+  activeLayerId: string | null;
+  selectedFont: string;
+  fontSize: number;
+  fonts: readonly string[];
+  customTools?: React.ReactNode | ((ui: EditorUIState) => React.ReactNode);
+  ui: EditorUIState;
+  onFontSizeChange: (size: number) => void;
+  onFontSelect: (font: string) => void;
+}
+
+export function EditorContent({
+  imageUrl,
+  layers,
+  filters,
+  activeLayerId,
+  selectedFont,
+  fontSize,
+  fonts,
+  customTools,
+  ui,
+  onFontSizeChange,
+  onFontSelect,
+}: EditorContentProps) {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <ScrollView
+      contentContainerStyle={{
+        padding: tokens.spacing.md,
+        gap: tokens.spacing.md,
+      }}
+    >
+      <EditorCanvas
+        imageUrl={imageUrl}
+        layers={layers}
+        activeLayerId={activeLayerId}
+        filters={filters}
+        onLayerTap={ui.handleTextLayerTap}
+        onLayerTransform={ui.handleLayerTransform}
+      />
+
+      {typeof customTools === "function" ? customTools(ui) : customTools}
+
+      <FontControls
+        fontSize={fontSize}
+        selectedFont={selectedFont}
+        fonts={fonts}
+        onFontSizeChange={onFontSizeChange}
+        onFontSelect={onFontSelect}
+      />
+    </ScrollView>
+  );
+}
+

package/src/presentation/components/EditorHeader.tsx

@@ -0,0 +1,48 @@
+/**
+ * Editor Header Component
+ * Header with close, title, and save buttons
+ */
+
+import React from "react";
+import { View, TouchableOpacity } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+
+interface EditorHeaderProps {
+  title: string;
+  saveLabel: string;
+  onClose: () => void;
+  onSave: () => void;
+}
+
+export function EditorHeader({ title, saveLabel, onClose, onSave }: EditorHeaderProps) {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingHorizontal: tokens.spacing.md,
+        paddingVertical: tokens.spacing.sm,
+        borderBottomWidth: 1,
+        borderBottomColor: tokens.colors.border,
+      }}
+    >
+      <TouchableOpacity onPress={onClose} accessibilityLabel="Close editor" accessibilityRole="button">
+        <AtomicIcon name="close" size="md" color="textPrimary" />
+      </TouchableOpacity>
+
+      <AtomicText type="headlineSmall" style={{ flex: 1, textAlign: "center" as const }}>
+        {title}
+      </AtomicText>
+
+      <TouchableOpacity onPress={onSave} accessibilityLabel="Save" accessibilityRole="button">
+        <AtomicText fontWeight="bold" color="primary">
+          {saveLabel}
+        </AtomicText>
+      </TouchableOpacity>
+    </View>
+  );
+}

package/src/presentation/components/EditorSheets.tsx

@@ -0,0 +1,85 @@
+/**
+ * Editor Sheets Component
+ * All bottom sheets for the editor
+ */
+
+import React from "react";
+import { BottomSheetModal } from "@umituz/react-native-design-system/molecules";
+import { TextEditorSheet } from "./sheets/TextEditorSheet";
+import { StickerPicker } from "./sheets/StickerPicker";
+import { FilterSheet } from "./sheets/FilterSheet";
+import { AdjustmentsSheet } from "./sheets/AdjustmentsSheet";
+import { LayerManager } from "./sheets/LayerManager";
+import { AIMagicSheet } from "./sheets/AIMagicSheet";
+import type { FilterOption } from "./sheets/FilterSheet";
+import type { FilterSettings } from "../../domain/value-objects/FilterSettings.vo";
+import type { EditorUIState } from "../../application/hooks/useEditorUI";
+
+interface EditorSheetsProps {
+  ui: EditorUIState;
+  filters: FilterSettings;
+  t: (key: string) => string;
+  onAICaption?: (style: string) => Promise<string> | void;
+}
+
+export function EditorSheets({ ui, filters, t, onAICaption }: EditorSheetsProps) {
+  return (
+    <>
+      <BottomSheetModal ref={ui.textEditorSheetRef} snapPoints={["55%"]}>
+        <TextEditorSheet
+          value={ui.editingText}
+          onChange={ui.setEditingText}
+          onSave={ui.handleSaveText}
+          t={t}
+          color={ui.editingColor}
+          onColorChange={ui.setEditingColor}
+          textAlign={ui.editingAlign}
+          onTextAlignChange={ui.setEditingAlign}
+          isBold={ui.editingBold}
+          onBoldChange={ui.setEditingBold}
+          isItalic={ui.editingItalic}
+          onItalicChange={ui.setEditingItalic}
+        />
+      </BottomSheetModal>
+
+      <BottomSheetModal ref={ui.stickerSheetRef} snapPoints={["50%"]}>
+        <StickerPicker onSelectSticker={ui.handleSelectSticker} />
+      </BottomSheetModal>
+
+      <BottomSheetModal ref={ui.filterSheetRef} snapPoints={["40%"]}>
+        <FilterSheet
+          selectedFilter={ui.selectedFilter}
+          onSelectFilter={(option: FilterOption) => {
+            ui.setSelectedFilter(option.id);
+            ui.updateFilters(option.filters);
+            ui.filterSheetRef.current?.dismiss();
+          }}
+        />
+      </BottomSheetModal>
+
+      <BottomSheetModal ref={ui.adjustmentsSheetRef} snapPoints={["55%"]}>
+        <AdjustmentsSheet filters={filters} onFiltersChange={ui.updateFilters} />
+      </BottomSheetModal>
+
+      <BottomSheetModal ref={ui.layerSheetRef} snapPoints={["55%"]}>
+        <LayerManager
+          layers={ui.layers}
+          activeLayerId={ui.activeLayerId}
+          onSelectLayer={ui.selectLayer}
+          onDeleteLayer={ui.deleteLayer}
+          onDuplicateLayer={ui.duplicateLayer}
+          onMoveLayerUp={ui.moveLayerUp}
+          onMoveLayerDown={ui.moveLayerDown}
+          t={t}
+        />
+      </BottomSheetModal>
+
+      {onAICaption && (
+        <BottomSheetModal ref={ui.aiSheetRef} snapPoints={["60%"]}>
+          <AIMagicSheet onGenerateCaption={onAICaption} />
+        </BottomSheetModal>
+      )}
+    </>
+  );
+}
+

package/src/presentation/components/FontControls.tsx

@@ -4,7 +4,7 @@
  */
 
 import React, { memo } from "react";
-import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import { View, ScrollView, TouchableOpacity, StyleSheet, type ViewStyle } from "react-native";
 import { AtomicText } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { Slider } from "./ui/Slider";
@@ -23,7 +23,7 @@ interface FontControlsProps {
   fonts?: readonly string[];
   onFontSizeChange: (size: number) => void;
   onFontSelect: (font: string) => void;
-  style?: any;
+  style?: ViewStyle;
 }
 
 export const FontControls = memo<FontControlsProps>(({

package/src/presentation/components/sheets/AdjustmentsSheet.tsx

@@ -8,11 +8,11 @@ import { View, TouchableOpacity } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { Slider } from "../ui/Slider";
-import { DEFAULT_FILTERS } from "../../../domain/entities/Filters";
+import { DEFAULT_FILTERS, type FilterValues } from "../../../domain/entities/Filters";
 
 interface AdjustmentsSheetProps {
-  filters: Record<string, number>;
-  onFiltersChange: (filters: Record<string, number>) => void;
+  filters: FilterValues;
+  onFiltersChange: (filters: FilterValues) => void;
 }
 
 export const AdjustmentsSheet = memo<AdjustmentsSheetProps>(({
@@ -21,7 +21,7 @@ export const AdjustmentsSheet = memo<AdjustmentsSheetProps>(({
 }) => {
   const tokens = useAppDesignTokens();
 
-  const update = (key: string, val: number) => {
+  const update = (key: keyof FilterValues, val: number) => {
     onFiltersChange({ ...filters, [key]: val });
   };
 

package/src/presentation/components/sheets/FilterSheet.tsx

@@ -21,7 +21,7 @@ interface FilterSheetProps {
   filters?: FilterOption[];
 }
 
-const DEFAULT_FILTERS: FilterOption[] = [
+export const DEFAULT_FILTERS: FilterOption[] = [
   {
     id: "none",
     name: "None",

package/src/presentation/components/sheets/LayerManager.tsx

@@ -7,7 +7,7 @@ import React, { memo } from "react";
 import { View, ScrollView, TouchableOpacity } from "react-native";
 import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { Layer, isTextLayer } from "../../../domain/entities/Layer";
+import { Layer } from "../entities/Layer.entity"";
 
 interface LayerManagerProps {
   layers: Layer[];
@@ -47,7 +47,7 @@ export const LayerManager = memo<LayerManagerProps>(({
         ) : (
           sortedLayers.map((layer, idx) => {
             const isActive = activeLayerId === layer.id;
-            const label = isTextLayer(layer)
+            const label = layer.isText()
               ? layer.text || t("photo_editor.untitled") || "Untitled"
               : "Sticker";
             const isTop = idx === 0;
@@ -60,12 +60,11 @@ export const LayerManager = memo<LayerManagerProps>(({
                   flexDirection: "row",
                   alignItems: "center",
                   padding: tokens.spacing.sm,
-                  backgroundColor: tokens.colors.surfaceVariant,
+                  backgroundColor: isActive ? tokens.colors.primary + "10" : tokens.colors.surfaceVariant,
                   borderRadius: tokens.borders.radius.md,
                   marginBottom: tokens.spacing.xs,
                   borderWidth: 2,
                   borderColor: isActive ? tokens.colors.primary : "transparent",
-                  backgroundColor: isActive ? tokens.colors.primary + "10" : tokens.colors.surfaceVariant,
                 }}
                 onPress={() => onSelectLayer(layer.id)}
                 accessibilityLabel={`${layer.type} layer: ${label}`}

package/src/presentation/components/sheets/TextEditorSheet.tsx

@@ -8,7 +8,7 @@ import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
 import { AtomicText, AtomicButton } from "@umituz/react-native-design-system/atoms";
 import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { ColorPicker } from "../ui/ColorPicker";
-import type { TextAlign } from "../../../domain/entities/Layer";
+import type { TextAlign } from "../entities/Layer.entity"";
 
 interface TextEditorSheetProps {
   value: string;

package/src/types.ts

@@ -1,25 +1,15 @@
 /**
- * Legacy Types (for backward compatibility)
- *
- * @deprecated Use types from src/domain/entities/ instead
+ * Central Type Exports
+ * Re-exports domain types for convenience
  */
 
-export type { TextAlign } from "./domain/entities/Layer";
-export type { Layer, TextLayer, StickerLayer } from "./domain/entities/Layer";
+export type { TextAlign } from "../entities/Layer.entity"";
+export type { Layer, TextLayer, StickerLayer, TextLayerData, StickerLayerData } from "../entities/Layer.entity"";
 export type { Transform } from "./domain/entities/Transform";
-export type { FilterValues as ImageFilters, DEFAULT_FILTERS as DEFAULT_IMAGE_FILTERS } from "./domain/entities/Filters";
+export type { FilterValues as ImageFilters } from "./domain/entities/Filters";
 
 // Re-export type guards
-export { isTextLayer, isStickerLayer } from "./domain/entities/Layer";
+export { isTextLayer, isStickerLayer } from "../entities/Layer.entity"";
 
-// Legacy type alias
-export interface TextLayerData extends TextLayer {}
-export interface StickerLayerData extends StickerLayer {}
-
-// Legacy EditorState (kept for compatibility)
-export interface EditorState {
-  layers: Layer[];
-  activeLayerId: string | null;
-  canvasSize: { width: number; height: number };
-  filters: ImageFilters;
-}
+// Re-export DEFAULT_FILTERS as value (not type)
+export { DEFAULT_FILTERS as DEFAULT_IMAGE_FILTERS } from "./domain/entities/Filters";

package/src/utils/constants.ts

@@ -0,0 +1,84 @@
+/**
+ * Constants Utility
+ * Shared constants for the editor
+ */
+
+export const DEFAULT_COLORS = [
+  "#FFFFFF", "#000000", "#888888", "#CCCCCC",
+  "#FF3B30", "#FF9500", "#FFCC00", "#FF2D55",
+  "#34C759", "#30B0C7", "#007AFF", "#5AC8FA",
+  "#5856D6", "#AF52DE", "#FF6B6B", "#FFD93D",
+  "#6BCB77", "#4D96FF", "#C77DFF", "#F72585",
+] as const;
+
+export const DEFAULT_FONTS = [
+  "System",
+  "Impact",
+  "Comic",
+  "Serif",
+  "Retro",
+] as const;
+
+export const DEFAULT_STICKERS = [
+  "😀", "😂", "🤣", "😍", "🥰", "😎", "🤯", "🥳", "😤", "💀",
+  "🔥", "❤️", "💯", "✨", "🎉", "🤡", "👀", "🙌", "👏", "💪",
+  "🤝", "🙈", "🐶", "🐱", "🦊", "🐸", "🌟", "⭐", "🌈", "☀️",
+  "🌙", "💫",
+] as const;
+
+export const AI_STYLES = [
+  { id: "viral", label: "✨ Viral", desc: "Catchy & shareable" },
+  { id: "funny", label: "😂 Funny", desc: "Humor that connects" },
+  { id: "savage", label: "🔥 Savage", desc: "Bold & edgy" },
+  { id: "wholesome", label: "💕 Wholesome", desc: "Warm & positive" },
+  { id: "sarcastic", label: "😏 Sarcastic", desc: "Witty & ironic" },
+  { id: "relatable", label: "🎯 Relatable", desc: "Everyone gets it" },
+] as const;
+
+export const FILTER_PRESETS = [
+  {
+    id: "none",
+    name: "None",
+    icon: "close",
+    filters: { brightness: 1, contrast: 1, saturation: 1, sepia: 0, grayscale: 0 },
+  },
+  {
+    id: "sepia",
+    name: "Sepia",
+    icon: "brush",
+    filters: { sepia: 0.7, saturation: 0.8 },
+  },
+  {
+    id: "grayscale",
+    name: "B&W",
+    icon: "swap-horizontal",
+    filters: { grayscale: 1, saturation: 0 },
+  },
+  {
+    id: "vintage",
+    name: "Vintage",
+    icon: "flash",
+    filters: { sepia: 0.3, contrast: 1.1, brightness: 0.9 },
+  },
+  {
+    id: "warm",
+    name: "Warm",
+    icon: "sparkles",
+    filters: { brightness: 1.05, saturation: 1.2 },
+  },
+  {
+    id: "cool",
+    name: "Cool",
+    icon: "image",
+    filters: { contrast: 1.05, brightness: 1.02, saturation: 0.85 },
+  },
+] as const;
+
+export const SLIDER_CONFIGS = {
+  brightness: { min: 0.5, max: 2, step: 0.05, default: 1 },
+  contrast: { min: 0.5, max: 2, step: 0.05, default: 1 },
+  saturation: { min: 0, max: 2, step: 0.05, default: 1 },
+  hueRotate: { min: 0, max: 360, step: 1, default: 0 },
+  sepia: { min: 0, max: 1, step: 0.05, default: 0 },
+  grayscale: { min: 0, max: 1, step: 0.05, default: 0 },
+} as const;

package/src/utils/formatters.ts

@@ -0,0 +1,29 @@
+/**
+ * Formatters Utility
+ * Value formatting for UI display
+ */
+
+export function formatPercentage(value: number): string {
+  const rounded = (value - 1) * 100;
+  return `${rounded >= 0 ? "+" : ""}${Math.round(rounded)}%`;
+}
+
+export function formatDegrees(value: number): string {
+  return `${Math.round(value)}°`;
+}
+
+export function formatSliderValue(
+  value: number,
+  type: "percentage" | "degrees" | "integer" = "percentage"
+): string {
+  switch (type) {
+    case "percentage":
+      return formatPercentage(value);
+    case "degrees":
+      return formatDegrees(value);
+    case "integer":
+      return Math.round(value).toString();
+    default:
+      return value.toString();
+  }
+}

package/src/utils/helpers.ts

@@ -0,0 +1,51 @@
+/**
+ * Helpers Utility
+ * Common helper functions
+ */
+
+import type { FilterData } from "../domain/value-objects/FilterSettings.vo";
+
+export function createBrightnessOverlay(brightness: number): {
+  color: string;
+  opacity: number;
+} | null {
+  if (brightness < 1) {
+    return { color: "black", opacity: Math.min(0.6, 1 - brightness) };
+  }
+  if (brightness > 1) {
+    return { color: "white", opacity: Math.min(0.4, brightness - 1) };
+  }
+  return null;
+}
+
+export function mergeFilters(
+  base: FilterData,
+  updates: Partial<FilterData>
+): FilterData {
+  return {
+    ...base,
+    ...updates,
+  };
+}
+
+export function generateId(prefix: string): string {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+export function sortByZIndex<T extends { zIndex: number }>(
+  items: T[]
+): T[] {
+  return [...items].sort((a, b) => a.zIndex - b.zIndex);
+}
+
+export function getNextZIndex(items: { zIndex: number }[]): number {
+  return items.length > 0 ? Math.max(...items.map((item) => item.zIndex)) + 1 : 0;
+}
+
+export function capitalizeFirst(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+export function truncateText(text: string, maxLength: number): string {
+  return text.length > maxLength ? text.slice(0, maxLength) + "..." : text;
+}

package/src/utils/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Utils Export
+ * Central export for all utility functions
+ */
+
+export * from "./formatters";
+export * from "./validators";
+export * from "./constants";
+export * from "./helpers";

package/src/utils/validators.ts

@@ -0,0 +1,38 @@
+/**
+ * Validators Utility
+ * Input validation for editor operations
+ */
+
+export function isValidColor(color: string): boolean {
+  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);
+}
+
+export function isValidUrl(url: string): boolean {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function isEmojiString(str: string): boolean {
+  return (
+    str.length <= 4 &&
+    !/^https?:\/\//i.test(str) &&
+    !str.startsWith("/") &&
+    /^[\p{Emoji}\p{Emoji_Component}]+$/u.test(str)
+  );
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function validateFontSize(size: number): number {
+  return clamp(size, 8, 120);
+}
+
+export function validateOpacity(opacity: number): number {
+  return clamp(opacity, 0, 1);
+}