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

package/ARCHITECTURE.md

@@ -1,104 +0,0 @@
-# Architecture - Photo Editor DDD Design
-
-## Overview
-
-This photo editor is built using **Domain-Driven Design (DDD)** principles, ensuring maintainability, testability, and scalability. Every file is kept under 150 lines for clarity.
-
-## Layer Structure
-
-```
-src/
-├── domain/                    # Business logic (pure TypeScript)
-│   ├── entities/
-│   │   ├── Layer.ts          # Layer entities (TextLayer, StickerLayer)
-│   │   ├── Transform.ts      # Transform value object
-│   │   └── Filters.ts        # Filters value object
-│   └── services/
-│       ├── LayerService.ts   # Layer business logic
-│       └── HistoryService.ts # Undo/redo service
-│
-├── infrastructure/            # External concerns
-│   ├── gesture/
-│   │   ├── useTransformGesture.ts  # Reusable gesture hook
-│   │   └── types.ts          # Gesture types
-│   └── history/
-│       └── HistoryManager.ts # Legacy wrapper
-│
-├── application/               # Application logic
-│   ├── stores/
-│   │   └── EditorStore.ts    # Zustand state store
-│   └── hooks/
-│       ├── useEditor.ts      # Main editor hook
-│       └── useEditorUI.ts    # UI-specific hook
-│
-└── presentation/              # UI components
-    └── components/
-        ├── DraggableLayer.tsx    # Unified draggable (replaces Text + Sticker)
-        ├── EditorCanvas.tsx
-        ├── EditorToolbar.tsx
-        ├── FontControls.tsx
-        ├── ui/
-        │   ├── ColorPicker.tsx
-        │   └── Slider.tsx
-        └── sheets/
-            ├── TextEditorSheet.tsx
-            ├── FilterSheet.tsx
-            ├── AdjustmentsSheet.tsx
-            ├── LayerManager.tsx
-            ├── StickerPicker.tsx
-            └── AIMagicSheet.tsx
-```
-
-## Key Improvements
-
-### 1. Eliminated Code Duplication (~180 lines)
-- **Before**: `DraggableText.tsx` (182 lines) and `DraggableSticker.tsx` (162 lines) - duplicate gesture logic
-- **After**: `DraggableLayer.tsx` (110 lines) + `useTransformGesture.ts` (130 lines) - reusable gesture hook
-
-### 2. Domain Entities
-- Rich domain models with business logic
-- Type-safe layer operations
-- Value objects for Transform and Filters
-
-### 3. Separated Concerns
-- **Domain**: Pure business logic, no framework dependencies
-- **Infrastructure**: React Native, gesture handlers
-- **Application**: State management, orchestration
-- **Presentation**: UI components only
-
-### 4. State Management
-- Zustand store for global editor state
-- History service for undo/redo
-- Clean separation between domain and UI state
-
-## Usage
-
-```tsx
-import { PhotoEditor } from "@umituz/react-native-photo-editor";
-
-<PhotoEditor
-  imageUri={imageUri}
-  onSave={(uri, layers, filters) => console.log({ uri, layers, filters })}
-  onClose={() => navigation.goBack()}
-  t={(key) => i18n.t(key)}
-/>
-```
-
-## Testing
-
-Each layer can be tested independently:
-- Domain: Pure functions, easy to unit test
-- Infrastructure: Gesture hooks with test utils
-- Application: Store with test environment
-- Presentation: React component testing
-
-## Migration from Old Architecture
-
-The old files have been preserved for backward compatibility:
-- Old hooks: `src/hooks/`
-- Old components: `src/components/`
-
-New code should use:
-- `useEditor()` instead of `usePhotoEditor()`
-- `useEditorUI()` instead of `usePhotoEditorUI()`
-- Components from `src/presentation/components/`

package/MIGRATION.md

@@ -1,100 +0,0 @@
-# Migration Guide - Old to New Architecture
-
-## What Changed?
-
-### Before
-```
-src/
-├── hooks/
-│   ├── usePhotoEditor.ts       # 173 lines - mixed concerns
-│   └── usePhotoEditorUI.ts     # 163 lines - UI + business logic
-├── components/
-│   ├── DraggableText.tsx       # 182 lines - gesture + UI
-│   ├── DraggableSticker.tsx    # 162 lines - DUPLICATE of above
-│   └── ...
-├── core/
-│   └── HistoryManager.ts       # Generic, reusable
-└── types.ts                    # Simple type definitions
-```
-
-### After
-```
-src/
-├── domain/                     # Pure business logic
-│   ├── entities/              # Rich domain models
-│   └── services/              # Business operations
-├── infrastructure/             # External systems
-│   ├── gesture/               # Reusable gestures
-│   └── history/
-├── application/                # Orchestration
-│   ├── stores/                # State management
-│   └── hooks/                 # Clean hooks
-└── presentation/               # UI only
-    └── components/
-```
-
-## API Changes
-
-### Hooks
-
-**Old:**
-```tsx
-import { usePhotoEditor } from "./hooks/usePhotoEditor";
-import { usePhotoEditorUI } from "./hooks/usePhotoEditorUI";
-
-const editor = usePhotoEditor([]);
-const ui = usePhotoEditorUI();
-```
-
-**New:**
-```tsx
-import { useEditor } from "./application/hooks/useEditor";
-import { useEditorUI } from "./application/hooks/useEditorUI";
-
-const editor = useEditor();
-const ui = useEditorUI();
-```
-
-### Components
-
-**Old:**
-```tsx
-import DraggableText from "./components/DraggableText";
-import DraggableSticker from "./components/DraggableSticker";
-```
-
-**New:**
-```tsx
-import { DraggableLayer } from "./presentation/components/DraggableLayer";
-```
-
-### Types
-
-**Old:**
-```tsx
-import type { Layer, TextLayer, ImageFilters } from "./types";
-```
-
-**New:**
-```tsx
-import type { Layer, TextLayer, FilterValues } from "./domain/entities/Layer";
-import { FiltersVO } from "./domain/entities/Filters";
-```
-
-## Benefits
-
-1. **180 lines less code** - Removed duplication between DraggableText and DraggableSticker
-2. **Clear separation** - Business logic separate from UI
-3. **Testable** - Each layer can be tested independently
-4. **Maintainable** - Files under 150 lines each
-5. **Scalable** - Easy to add new features
-
-## Backward Compatibility
-
-The old API is still exported. Your existing code will continue to work.
-
-To migrate gradually:
-1. Start using `useEditor()` in new features
-2. Replace `DraggableText` + `DraggableSticker` with `DraggableLayer`
-3. Update imports to new paths
-4. Remove old imports when ready

package/src/components/AIMagicSheet.tsx

@@ -1,107 +0,0 @@
-import React, { useState, useMemo } from "react";
-import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicText, AtomicIcon, AtomicButton } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { DEFAULT_AI_STYLES } from "../constants";
-
-interface AIMagicSheetProps {
-  /**
-   * Called with the selected style ID. Should return a generated caption string.
-   * If undefined, the AI button is disabled.
-   */
-  onGenerateCaption?: (style: string) => Promise<string> | void;
-  isLoading?: boolean;
-}
-
-export const AIMagicSheet: React.FC<AIMagicSheetProps> = ({
-  onGenerateCaption,
-  isLoading = false,
-}) => {
-  const tokens = useAppDesignTokens();
-  const [selected, setSelected] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  const styles = useMemo(() => StyleSheet.create({
-    container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
-    header: { flexDirection: "row", alignItems: "center", gap: tokens.spacing.sm },
-    grid: { gap: tokens.spacing.sm },
-    card: {
-      flexDirection: "row",
-      alignItems: "center",
-      padding: tokens.spacing.md,
-      backgroundColor: tokens.colors.surfaceVariant,
-      borderRadius: tokens.borders.radius.md,
-      borderWidth: 2,
-      borderColor: "transparent",
-    },
-    cardActive: {
-      borderColor: tokens.colors.primary,
-      backgroundColor: tokens.colors.primary + "10",
-    },
-    info: { flex: 1, marginLeft: tokens.spacing.sm },
-  }), [tokens]);
-
-  const handleGenerate = async () => {
-    if (!selected || !onGenerateCaption) return;
-    setLoading(true);
-    try {
-      await onGenerateCaption(selected);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const isGenerating = isLoading || loading;
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.header}>
-        <AtomicIcon name="sparkles" size="md" color="primary" />
-        <AtomicText type="headlineSmall">AI Caption Magic</AtomicText>
-      </View>
-      <ScrollView showsVerticalScrollIndicator={false}>
-        <View style={styles.grid}>
-          {DEFAULT_AI_STYLES.map((style) => {
-            const isActive = selected === style.id;
-            const [emoji, ...words] = style.label.split(" ");
-            return (
-              <TouchableOpacity
-                key={style.id}
-                style={[styles.card, isActive && styles.cardActive]}
-                onPress={() => setSelected(style.id)}
-                accessibilityLabel={style.label}
-                accessibilityRole="button"
-                accessibilityState={{ selected: isActive }}
-              >
-                <AtomicText style={{ fontSize: 24 }}>{emoji}</AtomicText>
-                <View style={styles.info}>
-                  <AtomicText
-                    fontWeight="bold"
-                    color={isActive ? "primary" : "textPrimary"}
-                  >
-                    {words.join(" ")}
-                  </AtomicText>
-                  <AtomicText type="labelSmall" color="textSecondary">
-                    {style.desc}
-                  </AtomicText>
-                </View>
-                {isActive && (
-                  <AtomicIcon name="checkmark-circle" size="md" color="primary" />
-                )}
-              </TouchableOpacity>
-            );
-          })}
-        </View>
-      </ScrollView>
-      <AtomicButton
-        variant="primary"
-        disabled={!selected || !onGenerateCaption || isGenerating}
-        onPress={handleGenerate}
-        loading={isGenerating}
-        icon="sparkles"
-      >
-        Generate Caption
-      </AtomicButton>
-    </View>
-  );
-};

package/src/components/AdjustmentsSheet.tsx

@@ -1,108 +0,0 @@
-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";
-import { Slider } from "./Slider";
-import { ImageFilters, DEFAULT_IMAGE_FILTERS } from "../types";
-
-interface AdjustmentsSheetProps {
-  filters: ImageFilters;
-  onFiltersChange: (filters: ImageFilters) => void;
-}
-
-export const AdjustmentsSheet: React.FC<AdjustmentsSheetProps> = ({
-  filters,
-  onFiltersChange,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const update = (key: keyof ImageFilters, val: number) => {
-    onFiltersChange({ ...filters, [key]: val });
-  };
-
-  const handleReset = () => onFiltersChange(DEFAULT_IMAGE_FILTERS);
-
-  return (
-    <View style={{ padding: tokens.spacing.md, gap: tokens.spacing.lg }}>
-      <View
-        style={{
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-between",
-        }}
-      >
-        <View style={{ flexDirection: "row", alignItems: "center", gap: tokens.spacing.sm }}>
-          <AtomicIcon name="brush" size="md" color="primary" />
-          <AtomicText type="headlineSmall">Adjustments</AtomicText>
-        </View>
-        <TouchableOpacity
-          onPress={handleReset}
-          accessibilityLabel="Reset adjustments"
-          accessibilityRole="button"
-          style={{
-            paddingHorizontal: tokens.spacing.md,
-            paddingVertical: tokens.spacing.xs,
-            backgroundColor: tokens.colors.surfaceVariant,
-            borderRadius: tokens.borders.radius.sm,
-          }}
-        >
-          <AtomicText type="labelSmall" color="textSecondary">
-            Reset
-          </AtomicText>
-        </TouchableOpacity>
-      </View>
-
-      <Slider
-        label="Brightness"
-        value={filters.brightness}
-        min={0.5}
-        max={2}
-        step={0.05}
-        onValueChange={(v) => update("brightness", v)}
-        formatValue={(v) => `${Math.round((v - 1) * 100) >= 0 ? "+" : ""}${Math.round((v - 1) * 100)}%`}
-      />
-
-      <Slider
-        label="Contrast"
-        value={filters.contrast}
-        min={0.5}
-        max={2}
-        step={0.05}
-        onValueChange={(v) => update("contrast", v)}
-        formatValue={(v) => `${Math.round((v - 1) * 100) >= 0 ? "+" : ""}${Math.round((v - 1) * 100)}%`}
-      />
-
-      <Slider
-        label="Saturation"
-        value={filters.saturation}
-        min={0}
-        max={2}
-        step={0.05}
-        onValueChange={(v) => update("saturation", v)}
-        formatValue={(v) => `${Math.round((v - 1) * 100) >= 0 ? "+" : ""}${Math.round((v - 1) * 100)}%`}
-      />
-
-      <Slider
-        label="Hue Rotate"
-        value={filters.hueRotate ?? 0}
-        min={0}
-        max={360}
-        step={1}
-        onValueChange={(v) => update("hueRotate", v)}
-        formatValue={(v) => `${Math.round(v)}°`}
-      />
-
-      <Slider
-        label="Sepia"
-        value={filters.sepia}
-        min={0}
-        max={1}
-        step={0.05}
-        onValueChange={(v) => update("sepia", v)}
-        formatValue={(v) => `${Math.round(v * 100)}%`}
-      />
-    </View>
-  );
-};
-
-export default React.memo(AdjustmentsSheet);

package/src/components/ColorPicker.tsx

@@ -1,77 +0,0 @@
-import React from "react";
-import { View, TouchableOpacity } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { DEFAULT_TEXT_COLORS } from "../constants";
-
-interface ColorPickerProps {
-  selectedColor: string;
-  onSelectColor: (color: string) => void;
-  label?: string;
-  colors?: readonly string[];
-}
-
-export const ColorPicker: React.FC<ColorPickerProps> = ({
-  selectedColor,
-  onSelectColor,
-  label,
-  colors = DEFAULT_TEXT_COLORS,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={{ gap: tokens.spacing.xs }}>
-      {label && (
-        <AtomicText type="labelMedium" color="textSecondary">
-          {label}
-        </AtomicText>
-      )}
-      <View
-        style={{
-          flexDirection: "row",
-          flexWrap: "wrap",
-          gap: tokens.spacing.xs,
-        }}
-      >
-        {colors.map((color) => {
-          const isSelected = selectedColor === color;
-          return (
-            <TouchableOpacity
-              key={color}
-              onPress={() => onSelectColor(color)}
-              accessibilityLabel={`Color ${color}`}
-              accessibilityRole="button"
-              accessibilityState={{ selected: isSelected }}
-              style={{
-                width: 34,
-                height: 34,
-                borderRadius: 17,
-                backgroundColor: color,
-                borderWidth: isSelected ? 3 : 1.5,
-                borderColor: isSelected
-                  ? tokens.colors.primary
-                  : tokens.colors.border,
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              {isSelected && (
-                <View
-                  style={{
-                    width: 10,
-                    height: 10,
-                    borderRadius: 5,
-                    backgroundColor:
-                      color === "#FFFFFF" ? "#000000" : "#FFFFFF",
-                  }}
-                />
-              )}
-            </TouchableOpacity>
-          );
-        })}
-      </View>
-    </View>
-  );
-};
-
-export default React.memo(ColorPicker);

package/src/components/DraggableSticker.tsx

@@ -1,161 +0,0 @@
-import React, { useState, useRef, useCallback, useEffect } from "react";
-import { View, StyleSheet } from "react-native";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import { Image } from "expo-image";
-import { AtomicText } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import type { LayerTransform } from "./DraggableText";
-
-interface DraggableStickerProps {
-  uri: string;
-  initialX: number;
-  initialY: number;
-  rotation?: number;
-  scale?: number;
-  opacity?: number;
-  onTransformEnd: (transform: LayerTransform) => void;
-  onPress: () => void;
-  isSelected?: boolean;
-}
-
-const isEmojiString = (str: string) =>
-  str.length <= 4 && !/^https?:\/\//i.test(str) && !str.startsWith("/");
-
-export const DraggableSticker: React.FC<DraggableStickerProps> = ({
-  uri,
-  initialX,
-  initialY,
-  rotation: rotationProp = 0,
-  scale: scaleProp = 1,
-  opacity = 1,
-  onTransformEnd,
-  onPress,
-  isSelected,
-}) => {
-  const tokens = useAppDesignTokens();
-  const [position, setPosition] = useState({ x: initialX, y: initialY });
-  const [scale, setScale] = useState(scaleProp);
-  const [rotation, setRotation] = useState(rotationProp);
-
-  // Sync when props change (e.g., undo/redo)
-  useEffect(() => { setPosition({ x: initialX, y: initialY }); }, [initialX, initialY]);
-  useEffect(() => { setScale(scaleProp); }, [scaleProp]);
-  useEffect(() => { setRotation(rotationProp); }, [rotationProp]);
-
-  const positionRef = useRef(position);
-  positionRef.current = position;
-  const scaleRef = useRef(scale);
-  scaleRef.current = scale;
-  const rotationRef = useRef(rotation);
-  rotationRef.current = rotation;
-  const onTransformEndRef = useRef(onTransformEnd);
-  onTransformEndRef.current = onTransformEnd;
-  const onPressRef = useRef(onPress);
-  onPressRef.current = onPress;
-
-  const offsetRef = useRef({ x: initialX, y: initialY });
-  const scaleStartRef = useRef(scaleProp);
-  const rotationStartRef = useRef(rotationProp);
-
-  const emitTransform = useCallback(() => {
-    onTransformEndRef.current({
-      x: positionRef.current.x,
-      y: positionRef.current.y,
-      scale: scaleRef.current,
-      rotation: rotationRef.current,
-    });
-  }, []);
-
-  const panGesture = Gesture.Pan()
-    .runOnJS(true)
-    .averageTouches(true)
-    .onStart(() => {
-      offsetRef.current = { x: positionRef.current.x, y: positionRef.current.y };
-    })
-    .onUpdate((e) => {
-      setPosition({
-        x: offsetRef.current.x + e.translationX,
-        y: offsetRef.current.y + e.translationY,
-      });
-    })
-    .onEnd(emitTransform);
-
-  const pinchGesture = Gesture.Pinch()
-    .runOnJS(true)
-    .onStart(() => {
-      scaleStartRef.current = scaleRef.current;
-    })
-    .onUpdate((e) => {
-      setScale(Math.max(0.2, Math.min(6, scaleStartRef.current * e.scale)));
-    })
-    .onEnd(emitTransform);
-
-  const rotationGesture = Gesture.Rotation()
-    .runOnJS(true)
-    .onStart(() => {
-      rotationStartRef.current = rotationRef.current;
-    })
-    .onUpdate((e) => {
-      setRotation(rotationStartRef.current + (e.rotation * 180) / Math.PI);
-    })
-    .onEnd(emitTransform);
-
-  const tapGesture = Gesture.Tap()
-    .runOnJS(true)
-    .onEnd(() => onPressRef.current());
-
-  const composed = Gesture.Exclusive(
-    Gesture.Simultaneous(panGesture, pinchGesture, rotationGesture),
-    tapGesture,
-  );
-
-  const isEmoji = isEmojiString(uri);
-
-  return (
-    <GestureDetector gesture={composed}>
-      <View
-        accessibilityLabel={isEmoji ? `Sticker ${uri}` : "Image sticker"}
-        accessibilityRole="button"
-        style={[
-          styles.container,
-          {
-            transform: [
-              { translateX: position.x },
-              { translateY: position.y },
-              { rotate: `${rotation}deg` },
-              { scale },
-            ],
-            opacity,
-            zIndex: isSelected ? 100 : 50,
-          },
-        ]}
-      >
-        <View
-          style={{
-            padding: tokens.spacing.xs,
-            borderRadius: tokens.borders.radius.sm,
-            borderWidth: isSelected ? 2 : 0,
-            borderColor: tokens.colors.primary,
-            borderStyle: "dashed",
-            backgroundColor: isSelected ? tokens.colors.primary + "10" : "transparent",
-          }}
-        >
-          {isEmoji ? (
-            <AtomicText style={{ fontSize: 48 }}>{uri}</AtomicText>
-          ) : (
-            <Image
-              source={{ uri }}
-              style={{ width: 80, height: 80 }}
-              contentFit="contain"
-              accessibilityIgnoresInvertColors
-            />
-          )}
-        </View>
-      </View>
-    </GestureDetector>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: { position: "absolute" },
-});