@umituz/react-native-photo-editor 1.1.2 → 2.0.1

package/src/constants.ts

@@ -3,60 +3,78 @@
  * These can be overridden via props
  */
 
-export const DEFAULT_FONTS = ["Impact", "Comic", "Serif", "Retro"] as const;
+import type { ImageFilters } from "./types";
 
-export const DEFAULT_STICKERS = [
-  "😀",
-  "😂",
-  "🤣",
-  "😍",
-  "🥰",
-  "😎",
-  "🤯",
-  "🥳",
-  "😤",
-  "💀",
-  "🔥",
-  "❤️",
-  "💯",
-  "✨",
-  "🎉",
-  "🤡",
-  "👀",
-  "🙌",
-  "👏",
-  "💪",
-  "🤝",
-  "🙈",
-  "🐶",
-  "🐱",
-  "🦊",
-  "🐸",
-  "🌟",
-  "⭐",
-  "🌈",
-  "☀️",
-  "🌙",
-  "💫",
+export const DEFAULT_TEXT_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 type FilterType = "none" | "sepia" | "grayscale" | "vintage" | "warm" | "cool";
+export const DEFAULT_STICKERS = [
+  "😀", "😂", "🤣", "😍", "🥰", "😎", "🤯", "🥳", "😤", "💀",
+  "🔥", "❤️", "💯", "✨", "🎉", "🤡", "👀", "🙌", "👏", "💪",
+  "🤝", "🙈", "🐶", "🐱", "🦊", "🐸", "🌟", "⭐", "🌈", "☀️",
+  "🌙", "💫",
+] as const;
 
 export interface FilterOption {
-  id: FilterType;
+  id: string;
   name: string;
+  /** Valid AtomicIcon name */
   icon: string;
-  value: number;
+  /** Partial ImageFilters applied when this filter is selected */
+  filters: Partial<ImageFilters>;
 }
 
-export const DEFAULT_FILTERS = [
-  { id: "none" as FilterType, name: "None", icon: "close-circle", value: 0 },
-  { id: "sepia" as FilterType, name: "Sepia", icon: "color-palette", value: 0.5 },
-  { id: "grayscale" as FilterType, name: "B&W", icon: "contrast", value: 1 },
-  { id: "vintage" as FilterType, name: "Vintage", icon: "time", value: 0.7 },
-  { id: "warm" as FilterType, name: "Warm", icon: "sunny", value: 0.3 },
-  { id: "cool" as FilterType, name: "Cool", icon: "snow", value: 0.3 },
-] as const;
+export const DEFAULT_FILTERS: FilterOption[] = [
+  {
+    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 },
+  },
+];
 
 export const DEFAULT_AI_STYLES = [
   { id: "viral", label: "✨ Viral", desc: "Catchy & shareable" },

package/src/core/HistoryManager.ts

@@ -9,57 +9,37 @@ export interface HistoryState<T> {
 }
 
 export class HistoryManager<T> {
-  private maxHistory = 20;
+  private readonly maxHistory = 20;
 
   createInitialState(initialValue: T): HistoryState<T> {
-    return {
-      past: [],
-      present: initialValue,
-      future: [],
-    };
+    return { past: [], present: initialValue, future: [] };
   }
 
   push(history: HistoryState<T>, newValue: T): HistoryState<T> {
-    const { past, present } = history;
-
     return {
-      past: [...past.slice(-this.maxHistory + 1), present],
+      past: [...history.past.slice(-this.maxHistory + 1), history.present],
       present: newValue,
       future: [],
     };
   }
 
   undo(history: HistoryState<T>): HistoryState<T> {
-    const { past, present, future } = history;
-
-    if (past.length === 0) {
-      return history;
-    }
-
-    const previous = past[past.length - 1];
-    const newPast = past.slice(0, past.length - 1);
-
+    if (history.past.length === 0) return history;
+    const previous = history.past[history.past.length - 1];
     return {
-      past: newPast,
+      past: history.past.slice(0, -1),
       present: previous,
-      future: [present, ...future],
+      future: [history.present, ...history.future],
     };
   }
 
   redo(history: HistoryState<T>): HistoryState<T> {
-    const { past, present, future } = history;
-
-    if (future.length === 0) {
-      return history;
-    }
-
-    const next = future[0];
-    const newFuture = future.slice(1);
-
+    if (history.future.length === 0) return history;
+    const next = history.future[0];
     return {
-      past: [...past, present],
+      past: [...history.past, history.present],
       present: next,
-      future: newFuture,
+      future: history.future.slice(1),
     };
   }
 
@@ -71,5 +51,3 @@ export class HistoryManager<T> {
     return history.future.length > 0;
   }
 }
-
-

package/src/hooks/useImagePicker.ts

@@ -0,0 +1,69 @@
+import { useState } from "react";
+import * as ImagePicker from "expo-image-picker";
+
+export interface ImagePickerResult {
+  uri: string;
+  width: number;
+  height: number;
+}
+
+export interface UseImagePickerReturn {
+  pickFromGallery: (options?: ImagePicker.ImagePickerOptions) => Promise<ImagePickerResult | null>;
+  takePhoto: (options?: ImagePicker.ImagePickerOptions) => Promise<ImagePickerResult | null>;
+  loading: boolean;
+}
+
+export const useImagePicker = (): UseImagePickerReturn => {
+  const [loading, setLoading] = useState(false);
+
+  const pickFromGallery = async (
+    options?: ImagePicker.ImagePickerOptions,
+  ): Promise<ImagePickerResult | null> => {
+    setLoading(true);
+    try {
+      const { status } = await ImagePicker.requestMediaLibraryPermissionsAsync();
+      if (status !== "granted") return null;
+
+      const result = await ImagePicker.launchImageLibraryAsync({
+        mediaTypes: ["images"],
+        allowsEditing: false,
+        quality: 1,
+        ...options,
+      });
+
+      if (result.canceled || result.assets.length === 0) return null;
+      const asset = result.assets[0];
+      return { uri: asset.uri, width: asset.width, height: asset.height };
+    } catch {
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const takePhoto = async (
+    options?: ImagePicker.ImagePickerOptions,
+  ): Promise<ImagePickerResult | null> => {
+    setLoading(true);
+    try {
+      const { status } = await ImagePicker.requestCameraPermissionsAsync();
+      if (status !== "granted") return null;
+
+      const result = await ImagePicker.launchCameraAsync({
+        mediaTypes: ["images"],
+        quality: 1,
+        ...options,
+      });
+
+      if (result.canceled || result.assets.length === 0) return null;
+      const asset = result.assets[0];
+      return { uri: asset.uri, width: asset.width, height: asset.height };
+    } catch {
+      return null;
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return { pickFromGallery, takePhoto, loading };
+};

package/src/hooks/usePhotoEditor.ts

@@ -1,34 +1,31 @@
 import { useState, useCallback, useMemo } from "react";
-import { DesignTokens } from "@umituz/react-native-design-system";
-import { Layer, TextLayer, StickerLayer, ImageFilters } from "../types";
+import { Layer, TextLayer, StickerLayer, ImageFilters, DEFAULT_IMAGE_FILTERS } from "../types";
 import { HistoryManager, HistoryState } from "../core/HistoryManager";
 
-const DEFAULT_FILTERS: ImageFilters = {
-  brightness: 1,
-  contrast: 1,
-  saturation: 1,
-  sepia: 0,
-  grayscale: 0,
-};
-
 export const usePhotoEditor = (initialLayers: Layer[] = []) => {
   const historyManager = useMemo(() => new HistoryManager<Layer[]>(), []);
   const [history, setHistory] = useState<HistoryState<Layer[]>>(() =>
     historyManager.createInitialState(initialLayers),
   );
   const [activeLayerId, setActiveLayerId] = useState<string | null>(
-    initialLayers[0]?.id || null,
+    initialLayers[0]?.id ?? null,
   );
-  const [filters, setFilters] = useState<ImageFilters>(DEFAULT_FILTERS);
+  const [filters, setFilters] = useState<ImageFilters>(DEFAULT_IMAGE_FILTERS);
 
   const layers = history.present;
 
-  const pushState = useCallback((newLayers: Layer[]) => {
-    setHistory((prev) => historyManager.push(prev, newLayers));
-  }, [historyManager]);
+  const pushState = useCallback(
+    (newLayers: Layer[]) => {
+      setHistory((prev) => historyManager.push(prev, newLayers));
+    },
+    [historyManager],
+  );
 
   const addTextLayer = useCallback(
-    (tokens: DesignTokens) => {
+    (
+      defaultColor = "#FFFFFF",
+      overrides: Partial<Omit<TextLayer, "id" | "type">> = {},
+    ) => {
       const id = `text-${Date.now()}`;
       const newLayer: TextLayer = {
         id,
@@ -42,9 +39,10 @@ export const usePhotoEditor = (initialLayers: Layer[] = []) => {
         zIndex: layers.length,
         fontSize: 32,
         fontFamily: "System",
-        color: tokens.colors.textPrimary,
+        color: defaultColor,
         backgroundColor: "transparent",
         textAlign: "center",
+        ...overrides,
       };
       pushState([...layers, newLayer]);
       setActiveLayerId(id);
@@ -76,7 +74,9 @@ export const usePhotoEditor = (initialLayers: Layer[] = []) => {
 
   const updateLayer = useCallback(
     (id: string, updates: Partial<Layer>) => {
-      const newLayers = layers.map((l) => (l.id === id ? { ...l, ...updates } : l) as Layer);
+      const newLayers = layers.map(
+        (l) => (l.id === id ? ({ ...l, ...updates } as Layer) : l),
+      );
       pushState(newLayers);
     },
     [layers, pushState],
@@ -86,11 +86,60 @@ export const usePhotoEditor = (initialLayers: Layer[] = []) => {
     (id: string) => {
       const newLayers = layers.filter((l) => l.id !== id);
       pushState(newLayers);
-      if (activeLayerId === id) setActiveLayerId(newLayers[0]?.id || null);
+      if (activeLayerId === id) {
+        setActiveLayerId(newLayers[0]?.id ?? null);
+      }
     },
     [layers, activeLayerId, pushState],
   );
 
+  const duplicateLayer = useCallback(
+    (id: string) => {
+      const layer = layers.find((l) => l.id === id);
+      if (!layer) return null;
+      const newId = `${layer.type}-${Date.now()}`;
+      const newLayer = { ...layer, id: newId, x: layer.x + 20, y: layer.y + 20, zIndex: layers.length };
+      pushState([...layers, newLayer]);
+      setActiveLayerId(newId);
+      return newId;
+    },
+    [layers, pushState],
+  );
+
+  const moveLayerUp = useCallback(
+    (id: string) => {
+      const sorted = [...layers].sort((a, b) => a.zIndex - b.zIndex);
+      const idx = sorted.findIndex((l) => l.id === id);
+      if (idx >= sorted.length - 1) return;
+      const reordered = [...sorted];
+      [reordered[idx], reordered[idx + 1]] = [reordered[idx + 1], reordered[idx]];
+      pushState(reordered.map((l, i) => ({ ...l, zIndex: i })));
+    },
+    [layers, pushState],
+  );
+
+  const moveLayerDown = useCallback(
+    (id: string) => {
+      const sorted = [...layers].sort((a, b) => a.zIndex - b.zIndex);
+      const idx = sorted.findIndex((l) => l.id === id);
+      if (idx <= 0) return;
+      const reordered = [...sorted];
+      [reordered[idx], reordered[idx - 1]] = [reordered[idx - 1], reordered[idx]];
+      pushState(reordered.map((l, i) => ({ ...l, zIndex: i })));
+    },
+    [layers, pushState],
+  );
+
+  const undo = useCallback(
+    () => setHistory((prev) => historyManager.undo(prev)),
+    [historyManager],
+  );
+
+  const redo = useCallback(
+    () => setHistory((prev) => historyManager.redo(prev)),
+    [historyManager],
+  );
+
   return {
     layers: [...layers].sort((a, b) => a.zIndex - b.zIndex),
     activeLayerId,
@@ -99,9 +148,12 @@ export const usePhotoEditor = (initialLayers: Layer[] = []) => {
     addStickerLayer,
     updateLayer,
     deleteLayer,
+    duplicateLayer,
+    moveLayerUp,
+    moveLayerDown,
     selectLayer: setActiveLayerId,
-    undo: useCallback(() => setHistory(historyManager.undo), [historyManager]),
-    redo: useCallback(() => setHistory(historyManager.redo), [historyManager]),
+    undo,
+    redo,
     canUndo: historyManager.canUndo(history),
     canRedo: historyManager.canRedo(history),
     filters,

package/src/hooks/usePhotoEditorUI.ts

@@ -1,31 +1,47 @@
 import { useRef, useState, useCallback, useEffect } from "react";
-import { BottomSheetModalRef, DesignTokens } from "@umituz/react-native-design-system";
+import { BottomSheetModalRef } from "@umituz/react-native-design-system/molecules";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
 import { usePhotoEditor } from "./usePhotoEditor";
-import { TextLayer } from "../types";
+import { TextLayer, DEFAULT_IMAGE_FILTERS, ImageFilters, TextAlign } from "../types";
+import type { FilterOption } from "../constants";
+import type { LayerTransform } from "../components/DraggableText";
 
-export const usePhotoEditorUI = (
-  initialCaption: string | undefined,
-  tokens: DesignTokens,
-) => {
+export const usePhotoEditorUI = (initialCaption?: string) => {
+  const tokens = useAppDesignTokens();
+
+  // Bottom sheet refs
   const textEditorSheetRef = useRef<BottomSheetModalRef>(null);
   const stickerSheetRef = useRef<BottomSheetModalRef>(null);
   const filterSheetRef = useRef<BottomSheetModalRef>(null);
+  const adjustmentsSheetRef = useRef<BottomSheetModalRef>(null);
   const layerSheetRef = useRef<BottomSheetModalRef>(null);
   const aiSheetRef = useRef<BottomSheetModalRef>(null);
 
+  // Global text/font state
   const [selectedFont, setSelectedFont] = useState<string>("System");
   const [fontSize, setFontSize] = useState(48);
+
+  // Per-layer text editing state (populated when sheet opens)
   const [editingText, setEditingText] = useState("");
+  const [editingColor, setEditingColor] = useState<string>(tokens.colors.textPrimary);
+  const [editingAlign, setEditingAlign] = useState<TextAlign>("center");
+  const [editingBold, setEditingBold] = useState(false);
+  const [editingItalic, setEditingItalic] = useState(false);
+
+  // Filter state
   const [selectedFilter, setSelectedFilter] = useState("none");
 
   const editor = usePhotoEditor([]);
 
+  // Apply initial caption once on mount — single history entry
+  const initialCaptionApplied = useRef(false);
   useEffect(() => {
-    if (initialCaption) {
-      const id = editor.addTextLayer(tokens);
-      editor.updateLayer(id, { text: initialCaption });
+    if (initialCaption && !initialCaptionApplied.current) {
+      initialCaptionApplied.current = true;
+      editor.addTextLayer(tokens.colors.textPrimary, { text: initialCaption });
     }
-  }, [initialCaption]);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
 
   const handleTextLayerTap = useCallback(
     (layerId: string) => {
@@ -33,12 +49,16 @@ export const usePhotoEditorUI = (
       const layer = editor.layers.find((l) => l.id === layerId);
       if (layer?.type === "text") {
         const textLayer = layer as TextLayer;
-        setEditingText(textLayer.text || "");
-        setFontSize(textLayer.fontSize || 48);
+        setEditingText(textLayer.text ?? "");
+        setFontSize(textLayer.fontSize ?? 48);
+        setEditingColor(textLayer.color ?? tokens.colors.textPrimary);
+        setEditingAlign(textLayer.textAlign ?? "center");
+        setEditingBold(textLayer.isBold ?? false);
+        setEditingItalic(textLayer.isItalic ?? false);
         textEditorSheetRef.current?.present();
       }
     },
-    [editor],
+    [editor, tokens.colors.textPrimary],
   );
 
   const handleSaveText = useCallback(() => {
@@ -47,39 +67,97 @@ export const usePhotoEditorUI = (
         text: editingText,
         fontSize,
         fontFamily: selectedFont,
+        color: editingColor,
+        textAlign: editingAlign,
+        isBold: editingBold,
+        isItalic: editingItalic,
       });
     }
     textEditorSheetRef.current?.dismiss();
-  }, [editor.activeLayerId, editingText, fontSize, selectedFont, editor.updateLayer]);
+  }, [
+    editor,
+    editingText,
+    fontSize,
+    selectedFont,
+    editingColor,
+    editingAlign,
+    editingBold,
+    editingItalic,
+  ]);
+
+  const handleSelectFilter = useCallback(
+    (option: FilterOption) => {
+      setSelectedFilter(option.id);
+      const newFilters: ImageFilters = { ...DEFAULT_IMAGE_FILTERS, ...option.filters };
+      editor.updateFilters(newFilters);
+      filterSheetRef.current?.dismiss();
+    },
+    [editor],
+  );
+
+  const handleLayerTransform = useCallback(
+    (layerId: string, transform: LayerTransform) => {
+      editor.updateLayer(layerId, {
+        x: transform.x,
+        y: transform.y,
+        scale: transform.scale,
+        rotation: transform.rotation,
+      });
+    },
+    [editor],
+  );
 
   return {
     ...editor,
+    // Sheet refs
     textEditorSheetRef,
     stickerSheetRef,
     filterSheetRef,
+    adjustmentsSheetRef,
     layerSheetRef,
     aiSheetRef,
+    // Font/size
     selectedFont,
     setSelectedFont,
     fontSize,
     setFontSize,
+    // Text editing
     editingText,
     setEditingText,
+    editingColor,
+    setEditingColor,
+    editingAlign,
+    setEditingAlign,
+    editingBold,
+    setEditingBold,
+    editingItalic,
+    setEditingItalic,
+    // Filter
     selectedFilter,
+    // Handlers
     handleTextLayerTap,
     handleSaveText,
-    handleAddText: () => {
-      editor.addTextLayer(tokens);
+    handleSelectFilter,
+    handleLayerTransform,
+    handleAddText: useCallback(() => {
+      const color = tokens.colors.textPrimary;
+      setEditingText("");
+      setEditingColor(color);
+      setEditingAlign("center");
+      setEditingBold(false);
+      setEditingItalic(false);
+      // Create layer with the currently active font settings so canvas preview matches sheet
+      editor.addTextLayer(color, {
+        fontSize,
+        fontFamily: selectedFont,
+      });
       textEditorSheetRef.current?.present();
-    },
-    handleSelectSticker: (s: string) => {
-      editor.addStickerLayer(s);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editor, fontSize, selectedFont, tokens.colors.textPrimary]),
+    handleSelectSticker: useCallback((uri: string) => {
+      editor.addStickerLayer(uri);
       stickerSheetRef.current?.dismiss();
-    },
-    handleSelectFilter: (id: string, val: number) => {
-      setSelectedFilter(id);
-      editor.updateFilters({ ...editor.filters, [id]: val });
-      filterSheetRef.current?.dismiss();
-    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [editor]),
   };
 };

package/src/index.ts

@@ -1,6 +1,9 @@
 export * from "./types";
 export * from "./constants";
 export * from "./hooks/usePhotoEditor";
+export * from "./hooks/usePhotoEditorUI";
+export * from "./hooks/useImagePicker";
+export * from "./utils/mediaUtils";
 export * from "./core/HistoryManager";
 export * from "./components/EditorCanvas";
 export * from "./components/LayerManager";
@@ -9,4 +12,9 @@ export * from "./components/FilterPicker";
 export * from "./components/DraggableText";
 export * from "./components/DraggableSticker";
 export * from "./components/AIMagicSheet";
+export * from "./components/TextEditorSheet";
+export * from "./components/StickerPicker";
+export * from "./components/EditorToolbar";
+export * from "./components/ColorPicker";
+export * from "./components/AdjustmentsSheet";
 export * from "./PhotoEditor";

package/src/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from "react-native";
-import { DesignTokens } from "@umituz/react-native-design-system";
+import { DesignTokens } from "@umituz/react-native-design-system/theme";
 import { EdgeInsets } from "react-native-safe-area-context";
 
 export const createEditorStyles = (tokens: DesignTokens, insets: EdgeInsets) =>
@@ -18,8 +18,8 @@ export const createEditorStyles = (tokens: DesignTokens, insets: EdgeInsets) =>
       flex: 1,
       textAlign: "center",
     },
-    scrollContent: { 
-      paddingHorizontal: tokens.spacing.md, 
+    scrollContent: {
+      paddingHorizontal: tokens.spacing.md,
       paddingBottom: 120,
       gap: tokens.spacing.lg,
     },
@@ -37,8 +37,18 @@ export const createEditorStyles = (tokens: DesignTokens, insets: EdgeInsets) =>
       borderRadius: tokens.borders.radius.md,
       gap: tokens.spacing.md,
     },
-    fontRow: { 
-      flexDirection: "row", 
+    sliderRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+    },
+    sliderLabel: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: tokens.spacing.xs,
+    },
+    fontRow: {
+      flexDirection: "row",
       gap: tokens.spacing.sm,
       flexWrap: "wrap",
     },
@@ -74,7 +84,15 @@ export const createEditorStyles = (tokens: DesignTokens, insets: EdgeInsets) =>
       padding: tokens.spacing.sm,
       borderRadius: 999,
     },
-    toolButtonActive: { 
+    toolButtonActive: {
       backgroundColor: tokens.colors.primary + "20",
     },
+    aiMagicButton: {
+      width: 48,
+      height: 48,
+      borderRadius: 24,
+      backgroundColor: tokens.colors.primary,
+      alignItems: "center",
+      justifyContent: "center",
+    },
   });