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

package/src/components/Slider.tsx

@@ -1,112 +0,0 @@
-import React, { useRef, useState } from "react";
-import { View } from "react-native";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import { AtomicText } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-
-interface SliderProps {
-  label: string;
-  value: number;
-  min: number;
-  max: number;
-  step?: number;
-  onValueChange: (val: number) => void;
-  formatValue?: (val: number) => string;
-}
-
-export const Slider: React.FC<SliderProps> = ({
-  label,
-  value,
-  min,
-  max,
-  step = 0.05,
-  onValueChange,
-  formatValue,
-}) => {
-  const tokens = useAppDesignTokens();
-  const [trackWidth, setTrackWidth] = useState(200);
-  const trackWidthRef = useRef(200);
-  const startValueRef = useRef(value);
-  const valueRef = useRef(value);
-  valueRef.current = value;
-
-  const clamp = (v: number) => Math.max(min, Math.min(max, v));
-  const snap = (v: number) => parseFloat((Math.round(v / step) * step).toFixed(4));
-
-  const panGesture = Gesture.Pan()
-    .runOnJS(true)
-    .onStart(() => {
-      startValueRef.current = valueRef.current;
-    })
-    .onUpdate((e) => {
-      const ratio = e.translationX / trackWidthRef.current;
-      const delta = ratio * (max - min);
-      onValueChange(snap(clamp(startValueRef.current + delta)));
-    });
-
-  const percent = Math.max(0, Math.min(1, (value - min) / (max - min)));
-  const thumbOffset = percent * trackWidth - 12;
-  const displayValue = formatValue ? formatValue(value) : value.toFixed(1);
-
-  return (
-    <View style={{ gap: tokens.spacing.xs }}>
-      <View
-        style={{
-          flexDirection: "row",
-          justifyContent: "space-between",
-          alignItems: "center",
-        }}
-      >
-        <AtomicText type="labelMedium" color="textSecondary">
-          {label}
-        </AtomicText>
-        <AtomicText type="labelMedium" color="primary" fontWeight="bold">
-          {displayValue}
-        </AtomicText>
-      </View>
-      <GestureDetector gesture={panGesture}>
-        <View
-          style={{ height: 44, justifyContent: "center", paddingHorizontal: 12 }}
-          onLayout={(e) => {
-            const w = Math.max(1, e.nativeEvent.layout.width - 24);
-            setTrackWidth(w);
-            trackWidthRef.current = w;
-          }}
-        >
-          {/* Track background */}
-          <View
-            style={{
-              height: 4,
-              backgroundColor: tokens.colors.surfaceVariant,
-              borderRadius: 2,
-            }}
-          >
-            {/* Filled portion */}
-            <View
-              style={{
-                width: `${percent * 100}%`,
-                height: "100%",
-                backgroundColor: tokens.colors.primary,
-                borderRadius: 2,
-              }}
-            />
-          </View>
-          {/* Thumb */}
-          <View
-            style={{
-              position: "absolute",
-              left: thumbOffset + 12,
-              width: 24,
-              height: 24,
-              borderRadius: 12,
-              backgroundColor: tokens.colors.primary,
-              borderWidth: 2.5,
-              borderColor: tokens.colors.surface,
-              top: 10,
-            }}
-          />
-        </View>
-      </GestureDetector>
-    </View>
-  );
-};

package/src/components/StickerPicker.tsx

@@ -1,47 +0,0 @@
-import React, { useMemo } from "react";
-import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { DEFAULT_STICKERS } from "../constants";
-
-interface StickerPickerProps {
-  onSelectSticker: (sticker: string) => void;
-  stickers?: readonly string[];
-}
-
-export const StickerPicker: React.FC<StickerPickerProps> = ({
-  onSelectSticker,
-  stickers = DEFAULT_STICKERS,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const styles = useMemo(() => StyleSheet.create({
-    container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
-    grid: { flexDirection: "row", flexWrap: "wrap", gap: tokens.spacing.sm },
-    sticker: {
-      width: 50,
-      height: 50,
-      borderRadius: tokens.borders.radius.sm,
-      backgroundColor: tokens.colors.surfaceVariant,
-      alignItems: "center",
-      justifyContent: "center",
-    },
-  }), [tokens]);
-
-  return (
-    <View style={styles.container}>
-      <AtomicText type="headlineSmall">Stickers</AtomicText>
-      <ScrollView showsVerticalScrollIndicator={false}>
-        <View style={styles.grid}>
-          {stickers.map((s, i) => (
-            <TouchableOpacity key={`${s}-${i}`} style={styles.sticker} onPress={() => onSelectSticker(s)}>
-              <AtomicText style={{ fontSize: 32 }}>{s}</AtomicText>
-            </TouchableOpacity>
-          ))}
-        </View>
-      </ScrollView>
-    </View>
-  );
-};
-
-export default React.memo(StickerPicker);

package/src/components/TextEditorSheet.tsx

@@ -1,160 +0,0 @@
-import React, { useMemo } from "react";
-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 "./ColorPicker";
-import type { TextAlign } from "../types";
-
-interface TextEditorSheetProps {
-  value: string;
-  onChange: (text: string) => void;
-  onSave: () => void;
-  t: (key: string) => string;
-  color?: string;
-  onColorChange?: (color: string) => void;
-  textAlign?: TextAlign;
-  onTextAlignChange?: (align: TextAlign) => void;
-  isBold?: boolean;
-  onBoldChange?: (bold: boolean) => void;
-  isItalic?: boolean;
-  onItalicChange?: (italic: boolean) => void;
-}
-
-const ALIGN_OPTIONS: { value: TextAlign; icon: string }[] = [
-  { value: "left", icon: "«" },
-  { value: "center", icon: "≡" },
-  { value: "right", icon: "»" },
-];
-
-export const TextEditorSheet: React.FC<TextEditorSheetProps> = ({
-  value,
-  onChange,
-  onSave,
-  t,
-  color = "#FFFFFF",
-  onColorChange,
-  textAlign = "center",
-  onTextAlignChange,
-  isBold = false,
-  onBoldChange,
-  isItalic = false,
-  onItalicChange,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const styles = useMemo(() => StyleSheet.create({
-    container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
-    input: {
-      backgroundColor: tokens.colors.surfaceVariant,
-      borderRadius: tokens.borders.radius.md,
-      padding: tokens.spacing.md,
-      fontSize: 18,
-      color: tokens.colors.textPrimary,
-      textAlign: "center",
-      minHeight: 90,
-    },
-    row: {
-      flexDirection: "row",
-      alignItems: "center",
-      gap: tokens.spacing.sm,
-    },
-    styleBtn: {
-      width: 44,
-      height: 44,
-      borderRadius: tokens.borders.radius.sm,
-      borderWidth: 1.5,
-      borderColor: tokens.colors.border,
-      alignItems: "center",
-      justifyContent: "center",
-      backgroundColor: tokens.colors.surfaceVariant,
-    },
-    styleBtnActive: {
-      borderColor: tokens.colors.primary,
-      backgroundColor: tokens.colors.primary + "20",
-    },
-  }), [tokens]);
-
-  return (
-    <View style={styles.container}>
-      <AtomicText type="headlineSmall">{t("photo_editor.add_text") || "Edit Text"}</AtomicText>
-
-      <TextInput
-        value={value}
-        onChangeText={onChange}
-        placeholder={t("photo_editor.tap_to_edit") || "Enter text…"}
-        placeholderTextColor={tokens.colors.textSecondary}
-        style={styles.input}
-        multiline
-        autoFocus
-      />
-
-      {/* Style row: Bold, Italic, Alignment */}
-      <View style={styles.row}>
-        {onBoldChange && (
-          <TouchableOpacity
-            style={[styles.styleBtn, isBold && styles.styleBtnActive]}
-            onPress={() => onBoldChange(!isBold)}
-            accessibilityLabel="Bold"
-            accessibilityRole="button"
-            accessibilityState={{ selected: isBold }}
-          >
-            <AtomicText fontWeight="bold" color={isBold ? "primary" : "textSecondary"}>
-              B
-            </AtomicText>
-          </TouchableOpacity>
-        )}
-
-        {onItalicChange && (
-          <TouchableOpacity
-            style={[styles.styleBtn, isItalic && styles.styleBtnActive]}
-            onPress={() => onItalicChange(!isItalic)}
-            accessibilityLabel="Italic"
-            accessibilityRole="button"
-            accessibilityState={{ selected: isItalic }}
-          >
-            <AtomicText
-              color={isItalic ? "primary" : "textSecondary"}
-              style={{ fontStyle: "italic" }}
-            >
-              I
-            </AtomicText>
-          </TouchableOpacity>
-        )}
-
-        {onTextAlignChange && (
-          <View style={[styles.row, { marginLeft: tokens.spacing.sm }]}>
-            {ALIGN_OPTIONS.map(({ value: align, icon }) => (
-              <TouchableOpacity
-                key={align}
-                style={[styles.styleBtn, textAlign === align && styles.styleBtnActive]}
-                onPress={() => onTextAlignChange(align)}
-                accessibilityLabel={`Align ${align}`}
-                accessibilityRole="button"
-                accessibilityState={{ selected: textAlign === align }}
-              >
-                <AtomicText color={textAlign === align ? "primary" : "textSecondary"}>
-                  {icon}
-                </AtomicText>
-              </TouchableOpacity>
-            ))}
-          </View>
-        )}
-      </View>
-
-      {/* Color picker */}
-      {onColorChange && (
-        <ColorPicker
-          label="Text Color"
-          selectedColor={color}
-          onSelectColor={onColorChange}
-        />
-      )}
-
-      <AtomicButton variant="primary" onPress={onSave}>
-        {t("common.save") || "Save"}
-      </AtomicButton>
-    </View>
-  );
-};
-
-export default React.memo(TextEditorSheet);

package/src/core/HistoryManager.ts

@@ -1,53 +0,0 @@
-/**
- * History Manager for Undo/Redo functionality
- */
-
-export interface HistoryState<T> {
-  past: T[];
-  present: T;
-  future: T[];
-}
-
-export class HistoryManager<T> {
-  private readonly maxHistory = 20;
-
-  createInitialState(initialValue: T): HistoryState<T> {
-    return { past: [], present: initialValue, future: [] };
-  }
-
-  push(history: HistoryState<T>, newValue: T): HistoryState<T> {
-    return {
-      past: [...history.past.slice(-this.maxHistory + 1), history.present],
-      present: newValue,
-      future: [],
-    };
-  }
-
-  undo(history: HistoryState<T>): HistoryState<T> {
-    if (history.past.length === 0) return history;
-    const previous = history.past[history.past.length - 1];
-    return {
-      past: history.past.slice(0, -1),
-      present: previous,
-      future: [history.present, ...history.future],
-    };
-  }
-
-  redo(history: HistoryState<T>): HistoryState<T> {
-    if (history.future.length === 0) return history;
-    const next = history.future[0];
-    return {
-      past: [...history.past, history.present],
-      present: next,
-      future: history.future.slice(1),
-    };
-  }
-
-  canUndo(history: HistoryState<T>): boolean {
-    return history.past.length > 0;
-  }
-
-  canRedo(history: HistoryState<T>): boolean {
-    return history.future.length > 0;
-  }
-}

package/src/hooks/usePhotoEditor.ts

@@ -1,172 +0,0 @@
-import { useState, useCallback, useMemo } from "react";
-import { Layer, TextLayer, StickerLayer, ImageFilters, DEFAULT_IMAGE_FILTERS } from "../types";
-import { HistoryManager, HistoryState } from "../core/HistoryManager";
-
-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,
-  );
-  const [filters, setFilters] = useState<ImageFilters>(DEFAULT_IMAGE_FILTERS);
-
-  const layers = history.present;
-
-  const pushState = useCallback(
-    (newLayers: Layer[]): void => {
-      setHistory((prev) => historyManager.push(prev, newLayers));
-    },
-    [historyManager],
-  );
-
-  const addTextLayer = useCallback(
-    (
-      defaultColor = "#FFFFFF",
-      overrides: Partial<Omit<TextLayer, "id" | "type">> = {},
-    ) => {
-      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: defaultColor,
-        backgroundColor: "transparent",
-        textAlign: "center",
-        ...overrides,
-      };
-      pushState([...layers, newLayer]);
-      setActiveLayerId(id);
-      return id;
-    },
-    [layers, pushState],
-  );
-
-  const addStickerLayer = useCallback(
-    (uri: string) => {
-      const id = `sticker-${Date.now()}`;
-      const newLayer: StickerLayer = {
-        id,
-        type: "sticker",
-        uri,
-        x: 100,
-        y: 100,
-        rotation: 0,
-        scale: 1,
-        opacity: 1,
-        zIndex: layers.length,
-      };
-      pushState([...layers, newLayer]);
-      setActiveLayerId(id);
-      return id;
-    },
-    [layers, pushState],
-  );
-
-  const updateLayer = useCallback(
-    (id: string, updates: Partial<Layer>): void => {
-      const newLayers = layers.map((l) => {
-        if (l.id !== id) return l;
-        // Type-safe merge: cast to Layer since we're merging valid Partial<Layer> with existing Layer
-        return { ...l, ...updates } as Layer;
-      });
-      pushState(newLayers);
-    },
-    [layers, pushState],
-  );
-
-  const deleteLayer = useCallback(
-    (id: string): void => {
-      const newLayers = layers.filter((l) => l.id !== id);
-      pushState(newLayers);
-      if (activeLayerId === id) {
-        setActiveLayerId(newLayers[0]?.id ?? null);
-      }
-    },
-    [layers, activeLayerId, pushState],
-  );
-
-  const duplicateLayer = useCallback(
-    (id: string): string | null => {
-      const layer = layers.find((l) => l.id === id);
-      if (!layer) return null;
-      const newId = `${layer.type}-${Date.now()}`;
-      // Calculate the next zIndex to avoid conflicts
-      const maxZIndex = layers.length > 0 ? Math.max(...layers.map((l) => l.zIndex)) : -1;
-      const newLayer = { ...layer, id: newId, x: layer.x + 20, y: layer.y + 20, zIndex: maxZIndex + 1 };
-      pushState([...layers, newLayer]);
-      setActiveLayerId(newId);
-      return newId;
-    },
-    [layers, pushState],
-  );
-
-  const moveLayerUp = useCallback(
-    (id: string): void => {
-      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(
-    (): void => setHistory((prev) => historyManager.undo(prev)),
-    [historyManager],
-  );
-
-  const redo = useCallback(
-    (): void => setHistory((prev) => historyManager.redo(prev)),
-    [historyManager],
-  );
-
-  // Memoize return object to prevent infinite re-renders
-  const sortedLayers = useMemo(() => [...layers].sort((a, b) => a.zIndex - b.zIndex), [layers]);
-  const activeLayer = useMemo(() => layers.find((l) => l.id === activeLayerId), [layers, activeLayerId]);
-  const canUndo = useMemo(() => historyManager.canUndo(history), [history]);
-  const canRedo = useMemo(() => historyManager.canRedo(history), [history]);
-
-  return {
-    layers: sortedLayers,
-    activeLayerId,
-    activeLayer,
-    addTextLayer,
-    addStickerLayer,
-    updateLayer,
-    deleteLayer,
-    duplicateLayer,
-    moveLayerUp,
-    moveLayerDown,
-    selectLayer: setActiveLayerId,
-    undo,
-    redo,
-    canUndo,
-    canRedo,
-    filters,
-    updateFilters: setFilters,
-  };
-};

package/src/hooks/usePhotoEditorUI.ts

@@ -1,162 +0,0 @@
-import { useRef, useState, useCallback, useEffect } from "react";
-import { BottomSheetModalRef } from "@umituz/react-native-design-system/molecules";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { usePhotoEditor } from "./usePhotoEditor";
-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) => {
-  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 prevInitialCaptionRef = useRef<string | undefined>(undefined);
-
-  useEffect(() => {
-    // Only apply if initialCaption changed and is different from previous value
-    if (initialCaption && initialCaption !== prevInitialCaptionRef.current) {
-      prevInitialCaptionRef.current = initialCaption;
-      editor.addTextLayer(tokens.colors.textPrimary, { text: initialCaption });
-    }
-  }, [initialCaption, editor]);
-
-  const handleTextLayerTap = useCallback(
-    (layerId: string): void => {
-      editor.selectLayer(layerId);
-      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);
-        setEditingColor(textLayer.color ?? tokens.colors.textPrimary);
-        setEditingAlign(textLayer.textAlign ?? "center");
-        setEditingBold(textLayer.isBold ?? false);
-        setEditingItalic(textLayer.isItalic ?? false);
-        textEditorSheetRef.current?.present();
-      }
-    },
-    [editor, tokens.colors.textPrimary],
-  );
-
-  const handleSaveText = useCallback((): void => {
-    if (editor.activeLayerId) {
-      editor.updateLayer(editor.activeLayerId, {
-        text: editingText,
-        fontSize,
-        fontFamily: selectedFont,
-        color: editingColor,
-        textAlign: editingAlign,
-        isBold: editingBold,
-        isItalic: editingItalic,
-      });
-    }
-    textEditorSheetRef.current?.dismiss();
-  }, [
-    editor,
-    editingText,
-    fontSize,
-    selectedFont,
-    editingColor,
-    editingAlign,
-    editingBold,
-    editingItalic,
-  ]);
-
-  const handleSelectFilter = useCallback(
-    (option: FilterOption): void => {
-      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): void => {
-      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,
-    handleSelectFilter,
-    handleLayerTransform,
-    handleAddText: useCallback((): void => {
-      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();
-    }, [editor, fontSize, selectedFont, tokens.colors.textPrimary]),
-    handleSelectSticker: useCallback((uri: string): void => {
-      editor.addStickerLayer(uri);
-      stickerSheetRef.current?.dismiss();
-    }, [editor]),
-  };
-};