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

package/src/hooks/usePhotoEditorUI.ts

@@ -1,31 +1,46 @@
 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]);
+  }, []);
 
   const handleTextLayerTap = useCallback(
     (layerId: string) => {
@@ -33,12 +48,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 +66,95 @@ 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);
+    }, [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();
-    }
+    }, [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",
+    },
   });

package/src/types.ts

@@ -10,8 +10,17 @@ export interface ImageFilters {
   saturation: number;
   sepia: number;
   grayscale: number;
+  hueRotate?: number; // 0-360 degrees
 }
 
+export const DEFAULT_IMAGE_FILTERS: ImageFilters = {
+  brightness: 1,
+  contrast: 1,
+  saturation: 1,
+  sepia: 0,
+  grayscale: 0,
+};
+
 export interface BaseLayer {
   id: string;
   x: number;
@@ -20,7 +29,7 @@ export interface BaseLayer {
   scale: number;
   opacity: number;
   zIndex: number;
-  type: "text" | "sticker" | "image";
+  type: "text" | "sticker";
 }
 
 export interface TextLayer extends BaseLayer {
@@ -31,6 +40,8 @@ export interface TextLayer extends BaseLayer {
   color: string;
   backgroundColor: string;
   textAlign: TextAlign;
+  isBold?: boolean;
+  isItalic?: boolean;
   strokeColor?: string;
   strokeWidth?: number;
 }

package/src/utils/mediaUtils.ts

@@ -0,0 +1,69 @@
+import * as MediaLibrary from "expo-media-library";
+import { File, Paths } from "expo-file-system";
+import { Share } from "react-native";
+
+export interface SaveResult {
+  success: boolean;
+  uri?: string;
+  error?: string;
+}
+
+/**
+ * Save an image URI to the device's media library (Camera Roll / Photos).
+ * Requests permission if not already granted.
+ */
+export const saveToMediaLibrary = async (uri: string): Promise<SaveResult> => {
+  try {
+    const { status } = await MediaLibrary.requestPermissionsAsync();
+    if (status !== "granted") {
+      return { success: false, error: "Media library permission denied" };
+    }
+    const asset = await MediaLibrary.createAssetAsync(uri);
+    return { success: true, uri: asset.uri };
+  } catch (error) {
+    return { success: false, error: String(error) };
+  }
+};
+
+/**
+ * Copy an image to the app's cache directory and return the local URI.
+ * Useful for temporary storage before sharing.
+ */
+export const copyToCacheDirectory = async (uri: string): Promise<string> => {
+  const fileName = `photo_editor_${Date.now()}.jpg`;
+  const destFile = new File(Paths.cache, fileName);
+  const srcFile = new File(uri);
+  srcFile.copy(destFile);
+  return destFile.uri;
+};
+
+/**
+ * Share an image using the native share sheet.
+ * @param uri - local file URI of the image
+ * @param message - optional text message to share alongside the image
+ */
+export const shareImage = async (
+  uri: string,
+  message?: string,
+): Promise<void> => {
+  await Share.share({
+    url: uri,
+    message: message ?? "",
+    title: message,
+  });
+};
+
+/**
+ * Delete a local file in the app's cache directory.
+ * Safe to call — will not throw even if the file doesn't exist.
+ */
+export const deleteLocalFile = async (uri: string): Promise<void> => {
+  try {
+    const file = new File(uri);
+    if (file.exists) {
+      file.delete();
+    }
+  } catch {
+    // silent — best-effort cleanup
+  }
+};

package/tsconfig.json

@@ -8,7 +8,7 @@
     "allowSyntheticDefaultImports": true,
     "strict": true,
     "forceConsistentCasingInFileNames": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,