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

package/src/components/TextEditorSheet.tsx

@@ -1,23 +1,48 @@
-import React from "react";
-import { View, TextInput, StyleSheet } from "react-native";
-import { AtomicText, useAppDesignTokens, AtomicButton } from "@umituz/react-native-design-system";
+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 = StyleSheet.create({
+  const styles = useMemo(() => StyleSheet.create({
     container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
     input: {
       backgroundColor: tokens.colors.surfaceVariant,
@@ -26,26 +51,107 @@ export const TextEditorSheet: React.FC<TextEditorSheetProps> = ({
       fontSize: 18,
       color: tokens.colors.textPrimary,
       textAlign: "center",
-      minHeight: 120,
+      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("editor.add_text")}</AtomicText>
-      
+      <AtomicText type="headlineSmall">{t("editor.add_text") || "Edit Text"}</AtomicText>
+
       <TextInput
         value={value}
         onChangeText={onChange}
-        placeholder={t("editor.tap_to_edit")}
+        placeholder={t("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")}
+        {t("common.save") || "Save"}
       </AtomicButton>
     </View>
   );

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, useCallback } 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 = useCallback(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 = useCallback(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,