@umituz/react-native-photo-editor 1.0.1

package/src/hooks/usePhotoEditor.ts

@@ -0,0 +1,165 @@
+import { useState, useCallback, useMemo } from "react";
+import { Layer, TextLayer, ImageFilters } from "../types";
+import { HistoryManager } from "../core/HistoryManager";
+
+const DEFAULT_FILTERS: ImageFilters = {
+  brightness: 1,
+  contrast: 1,
+  saturation: 1,
+  sepia: 0,
+  grayscale: 0,
+};
+
+const historyManager = new HistoryManager<Layer[]>();
+
+import { DesignTokens } from "@umituz/react-native-design-system";
+
+export const usePhotoEditor = (initialLayers: Layer[] = []) => {
+  const [history, setHistory] = useState(() =>
+    historyManager.createInitialState(initialLayers),
+  );
+  const [activeLayerId, setActiveLayerId] = useState<string | null>(
+    initialLayers[0]?.id || null,
+  );
+  const [filters, setFilters] = useState<ImageFilters>(DEFAULT_FILTERS);
+
+  const layers = history.present;
+
+  const canUndo = historyManager.canUndo(history);
+  const canRedo = historyManager.canRedo(history);
+
+  const pushState = useCallback((newLayers: Layer[]) => {
+    setHistory((prev) => historyManager.push(prev, newLayers));
+  }, []);
+
+  const addTextLayer = useCallback(
+    (defaultTokens: DesignTokens) => {
+      const id = `text-${Date.now()}`;
+      const newLayer: TextLayer = {
+        id,
+        type: "text",
+        text: "",
+        x: 50,
+        y: 50,
+        rotation: 0,
+        scale: 1,
+        opacity: 1,
+        zIndex: layers.length,
+        fontSize: 32,
+        fontFamily: "System",
+        color: defaultTokens.colors.onPrimary,
+        backgroundColor: "transparent",
+        textAlign: "center",
+        strokeWidth: 2,
+        strokeColor: defaultTokens.colors.onBackground,
+      };
+
+      const newLayers: Layer[] = [...layers, newLayer];
+      pushState(newLayers);
+      setActiveLayerId(newLayer.id);
+      return id;
+    },
+    [layers, pushState],
+  );
+
+  const addStickerLayer = useCallback(
+    (uri: string) => {
+      const id = `sticker-${Date.now()}`;
+      const newLayer: Layer = {
+        id,
+        type: "sticker",
+        uri: uri,
+        x: 100,
+        y: 100,
+        rotation: 0,
+        scale: 1,
+        opacity: 1,
+        zIndex: layers.length,
+      };
+
+      const newLayers: Layer[] = [...layers, newLayer];
+      pushState(newLayers);
+      setActiveLayerId(newLayer.id);
+      return id;
+    },
+    [layers, pushState],
+  );
+
+  const updateLayer = useCallback(
+    (id: string, updates: Partial<Layer>, silent = false) => {
+      const newLayers: Layer[] = layers.map((layer) =>
+        layer.id === id ? ({ ...layer, ...updates } as Layer) : layer,
+      );
+      if (silent) {
+        // Just update state without pushing to history (hacky but works for init)
+        setHistory((prev) => ({ ...prev, present: newLayers }));
+      } else {
+        pushState(newLayers);
+      }
+    },
+    [layers, pushState],
+  );
+
+  const deleteLayer = useCallback(
+    (id: string) => {
+      if (layers.length <= 1) return;
+      const newLayers = layers.filter((layer) => layer.id !== id);
+      pushState(newLayers);
+      if (activeLayerId === id) {
+        setActiveLayerId(newLayers[0]?.id || null);
+      }
+    },
+    [layers, activeLayerId, pushState],
+  );
+
+  const undo = useCallback(() => {
+    setHistory((prev) => historyManager.undo(prev));
+  }, []);
+
+  const redo = useCallback(() => {
+    setHistory((prev) => historyManager.redo(prev));
+  }, []);
+
+  const selectLayer = useCallback((id: string) => {
+    setActiveLayerId(id);
+  }, []);
+
+  const bringToFront = useCallback(
+    (id: string) => {
+      const maxZ = Math.max(...layers.map((l) => l.zIndex), 0);
+      updateLayer(id, { zIndex: maxZ + 1 });
+    },
+    [layers, updateLayer],
+  );
+
+  const captureImage = useCallback(
+    async (_viewRef: unknown, backgroundUrl: string) => {
+      return backgroundUrl;
+    },
+    [],
+  );
+
+  const activeLayer = useMemo(
+    () => layers.find((l) => l.id === activeLayerId),
+    [layers, activeLayerId],
+  );
+
+  return {
+    layers: [...layers].sort((a, b) => a.zIndex - b.zIndex),
+    activeLayer,
+    activeLayerId,
+    addTextLayer,
+    addStickerLayer,
+    updateLayer,
+    deleteLayer,
+    selectLayer,
+    undo,
+    redo,
+    canUndo,
+    canRedo,
+    bringToFront,
+    filters,
+    updateFilters: setFilters,
+    captureImage,
+  };
+};

package/src/hooks/usePhotoEditorUI.ts

@@ -0,0 +1,126 @@
+import { useRef, useState, useCallback, useEffect } from "react";
+import { BottomSheetModalRef, DesignTokens } from "@umituz/react-native-design-system";
+import { usePhotoEditor } from "./usePhotoEditor";
+
+export const usePhotoEditorUI = (
+  initialCaption: string | undefined,
+  tokens: DesignTokens,
+) => {
+  const textEditorSheetRef = useRef<BottomSheetModalRef>(null);
+  const stickerSheetRef = useRef<BottomSheetModalRef>(null);
+  const filterSheetRef = useRef<BottomSheetModalRef>(null);
+  const layerSheetRef = useRef<BottomSheetModalRef>(null);
+
+  const [selectedFont, setSelectedFont] = useState<string>("Impact");
+  const [fontSize, setFontSize] = useState(48);
+  const [editingText, setEditingText] = useState("");
+  const [selectedFilter, setSelectedFilter] = useState("none");
+
+  const {
+    layers,
+    activeLayerId,
+    addTextLayer,
+    addStickerLayer,
+    updateLayer,
+    deleteLayer,
+    selectLayer,
+    updateFilters,
+    filters,
+  } = usePhotoEditor([]);
+
+  // Handle initial caption
+  useEffect(() => {
+    if (initialCaption) {
+      const id = addTextLayer(tokens);
+      setTimeout(() => {
+        updateLayer(id, { text: initialCaption } as any, true);
+      }, 0);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleAddText = useCallback(() => {
+    addTextLayer(tokens);
+    setTimeout(() => textEditorSheetRef.current?.present(), 100);
+  }, [addTextLayer, tokens]);
+
+  const handleTextLayerTap = useCallback(
+    (layerId: string) => {
+      selectLayer(layerId);
+      const layer = layers.find((l) => l.id === layerId);
+      if (layer?.type === "text") {
+        setEditingText((layer as any).text || "");
+        setFontSize((layer as any).fontSize || 48);
+        textEditorSheetRef.current?.present();
+      }
+    },
+    [selectLayer, layers],
+  );
+
+  const handleSaveText = useCallback(() => {
+    if (activeLayerId) {
+      updateLayer(activeLayerId, {
+        text: editingText,
+        fontSize,
+        fontFamily: selectedFont,
+      } as any);
+    }
+    textEditorSheetRef.current?.dismiss();
+  }, [activeLayerId, editingText, fontSize, selectedFont, updateLayer]);
+
+  const handleSelectFilter = useCallback(
+    (filterId: string, value: number) => {
+      setSelectedFilter(filterId);
+      const base = {
+        brightness: 1,
+        contrast: 1,
+        saturation: 1,
+        sepia: 0,
+        grayscale: 0,
+      };
+      if (filterId === "sepia") updateFilters({ ...base, sepia: value });
+      else if (filterId === "grayscale")
+        updateFilters({ ...base, grayscale: value });
+      else updateFilters(base);
+    },
+    [updateFilters],
+  );
+
+  const handleSelectSticker = useCallback(
+    (sticker: string) => {
+      addStickerLayer(sticker);
+      stickerSheetRef.current?.dismiss();
+    },
+    [addStickerLayer],
+  );
+
+  return {
+    // Refs
+    textEditorSheetRef,
+    stickerSheetRef,
+    filterSheetRef,
+    layerSheetRef,
+    // State
+    selectedFont,
+    setSelectedFont,
+    fontSize,
+    setFontSize,
+    editingText,
+    setEditingText,
+    selectedFilter,
+    // Domain State
+    layers,
+    activeLayerId,
+    filters,
+    // Domain Actions
+    updateLayer,
+    deleteLayer,
+    selectLayer,
+    // UI Actions
+    handleAddText,
+    handleTextLayerTap,
+    handleSaveText,
+    handleSelectFilter,
+    handleSelectSticker,
+  };
+};

package/src/index.ts

@@ -0,0 +1,11 @@
+export * from "./types";
+export * from "./hooks/usePhotoEditor";
+export * from "./core/HistoryManager";
+export * from "./components/EditorCanvas";
+export * from "./components/LayerManager";
+export * from "./components/FontControls";
+export * from "./components/FilterPicker";
+export * from "./components/DraggableText";
+export * from "./components/DraggableSticker";
+export * from "./components/AIMagicSheet";
+export * from "./PhotoEditor";

package/src/styles.ts

@@ -0,0 +1,160 @@
+import { StyleSheet } from "react-native";
+import { DesignTokens } from "@umituz/react-native-design-system";
+import { EdgeInsets } from "react-native-safe-area-context";
+
+export const createEditorStyles = (tokens: DesignTokens, insets: EdgeInsets) =>
+  StyleSheet.create({
+    container: { flex: 1, backgroundColor: tokens.colors.background },
+    header: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      paddingHorizontal: tokens.spacing.md,
+      paddingTop: insets.top + tokens.spacing.sm,
+      paddingBottom: tokens.spacing.sm,
+    },
+    headerButton: {
+      width: 48,
+      height: 48,
+      borderRadius: 24,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    headerTitle: {
+      fontSize: 18,
+      fontWeight: "bold",
+      color: tokens.colors.textPrimary,
+    },
+    postButton: {
+      backgroundColor: tokens.colors.primary,
+      paddingHorizontal: 20,
+      paddingVertical: 10,
+      borderRadius: 999,
+    },
+    postButtonText: {
+      color: tokens.colors.onPrimary,
+      fontWeight: "bold",
+      fontSize: 14,
+    },
+    scrollContent: { paddingHorizontal: tokens.spacing.md, paddingBottom: 120 },
+    canvas: {
+      width: "100%",
+      aspectRatio: 4 / 5,
+      borderRadius: 16,
+      overflow: "hidden",
+      backgroundColor: tokens.colors.surfaceVariant,
+      marginTop: tokens.spacing.sm,
+    },
+    canvasImage: { width: "100%", height: "100%" },
+    // Slider & Controls
+    controlsPanel: {
+      marginTop: tokens.spacing.md,
+      backgroundColor: tokens.colors.surfaceVariant + "80", // Opacity handled by token if possible, else hex
+      borderRadius: 16,
+      padding: tokens.spacing.md,
+      borderWidth: 1,
+      borderColor: tokens.colors.border,
+    },
+    sliderRow: {
+      flexDirection: "row",
+      alignItems: "center",
+      justifyContent: "space-between",
+      marginBottom: tokens.spacing.sm,
+    },
+    sliderLabel: {
+      flexDirection: "row",
+      alignItems: "center",
+      gap: tokens.spacing.xs,
+    },
+    sliderLabelText: { fontSize: 14, color: tokens.colors.textSecondary },
+    sliderValue: {
+      fontSize: 14,
+      fontWeight: "bold",
+      color: tokens.colors.primary,
+    },
+    sliderTrack: {
+      height: 6,
+      backgroundColor: tokens.colors.border,
+      borderRadius: 3,
+      marginBottom: tokens.spacing.lg,
+    },
+    sliderFill: {
+      height: "100%",
+      width: "65%",
+      backgroundColor: tokens.colors.primary,
+      borderRadius: 3,
+    },
+    fontLabel: {
+      fontSize: 14,
+      color: tokens.colors.textSecondary,
+      marginBottom: tokens.spacing.sm,
+    },
+    fontRow: { flexDirection: "row", gap: tokens.spacing.sm },
+    fontChip: {
+      paddingHorizontal: tokens.spacing.md,
+      paddingVertical: tokens.spacing.sm,
+      backgroundColor: tokens.colors.surfaceVariant,
+      borderRadius: 8,
+      borderWidth: 1,
+      borderColor: tokens.colors.border,
+    },
+    fontChipActive: {
+      backgroundColor: tokens.colors.primary,
+      borderColor: tokens.colors.primary,
+    },
+    fontChipText: {
+      fontWeight: "bold",
+      fontSize: 14,
+      color: tokens.colors.textSecondary,
+    },
+    fontChipTextActive: { color: tokens.colors.onPrimary },
+    // Bottom Toolbar
+    bottomToolbar: {
+      position: "absolute",
+      bottom: insets.bottom + tokens.spacing.md,
+      left: "5%",
+      right: "5%",
+      backgroundColor: tokens.colors.surfaceVariant,
+      borderRadius: 999,
+      padding: tokens.spacing.sm,
+      flexDirection: "row",
+      justifyContent: "space-around",
+      alignItems: "center",
+      borderWidth: 1,
+      borderColor: tokens.colors.border,
+      shadowColor: "#000",
+      shadowOffset: {
+        width: 0,
+        height: 2,
+      },
+      shadowOpacity: 0.1,
+      shadowRadius: 3.84,
+      elevation: 5,
+    },
+    toolButton: {
+      alignItems: "center",
+      justifyContent: "center",
+      width: 56,
+      height: 56,
+      borderRadius: 28,
+    },
+    toolButtonActive: { backgroundColor: tokens.colors.primary + "20" },
+    toolLabel: {
+      fontSize: 10,
+      fontWeight: "500",
+      color: tokens.colors.textSecondary,
+      marginTop: 2,
+    },
+    toolLabelActive: { color: tokens.colors.primary },
+    aiMagicButton: {
+      width: 64,
+      height: 64,
+      borderRadius: 32,
+      backgroundColor: tokens.colors.primary,
+      alignItems: "center",
+      justifyContent: "center",
+      marginTop: -32,
+      borderWidth: 4,
+      borderColor: tokens.colors.background,
+    },
+  });

package/src/types.ts

@@ -0,0 +1,50 @@
+/**
+ * Editor Domain Types
+ */
+
+export type TextAlign = "left" | "center" | "right";
+
+export interface ImageFilters {
+  brightness: number;
+  contrast: number;
+  saturation: number;
+  sepia: number;
+  grayscale: number;
+}
+
+export interface BaseLayer {
+  id: string;
+  x: number;
+  y: number;
+  rotation: number;
+  scale: number;
+  opacity: number;
+  zIndex: number;
+  type: "text" | "sticker" | "image";
+}
+
+export interface TextLayer extends BaseLayer {
+  type: "text";
+  text: string;
+  fontSize: number;
+  fontFamily: string;
+  color: string;
+  backgroundColor: string;
+  textAlign: TextAlign;
+  strokeColor?: string;
+  strokeWidth?: number;
+}
+
+export interface StickerLayer extends BaseLayer {
+  type: "sticker";
+  uri: string;
+}
+
+export type Layer = TextLayer | StickerLayer;
+
+export interface EditorState {
+  layers: Layer[];
+  activeLayerId: string | null;
+  canvasSize: { width: number; height: number };
+  filters: ImageFilters;
+}