@umituz/react-native-photo-editor 1.0.10 → 1.0.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umituz/react-native-photo-editor",
-  "version": "1.0.10",
+  "version": "1.0.12",
   "description": "A powerful, generic photo editor for React Native",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/PhotoEditor.tsx

@@ -13,10 +13,11 @@ import {
 import { EditorCanvas } from "./components/EditorCanvas";
 import { EditorToolbar } from "./components/EditorToolbar";
 import { FontControls } from "./components/FontControls";
-import { StickerPicker } from "./components/StickerPicker";
-import { FilterPicker } from "./components/FilterPicker";
 import { LayerManager } from "./components/LayerManager";
 import { TextEditorSheet } from "./components/TextEditorSheet";
+import { StickerPicker } from "./components/StickerPicker";
+import { FilterPicker } from "./components/FilterPicker";
+import { AIMagicSheet } from "./components/AIMagicSheet";
 import { createEditorStyles } from "./styles";
 import { usePhotoEditorUI } from "./hooks/usePhotoEditorUI";
 import { Layer } from "./types";
@@ -38,7 +39,6 @@ export interface PhotoEditorProps {
   initialCaption?: string;
   t: (key: string) => string;
   fonts?: readonly string[];
-  stickers?: readonly string[];
   showAI?: boolean;
 }
 
@@ -51,124 +51,42 @@ export const PhotoEditor: React.FC<PhotoEditorProps> = ({
   initialCaption,
   t,
   fonts = DEFAULT_FONTS,
-  stickers,
-  showAI = false,
+  showAI = true,
 }) => {
   const tokens = useAppDesignTokens();
   const insets = useSafeAreaInsets();
   const styles = useMemo(() => createEditorStyles(tokens, insets), [tokens, insets]);
+  const ui = usePhotoEditorUI(initialCaption, tokens);
 
-  const {
-    // Refs
-    textEditorSheetRef,
-    stickerSheetRef,
-    filterSheetRef,
-    layerSheetRef,
-    // State
-    selectedFont,
-    setSelectedFont,
-    fontSize,
-    setFontSize,
-    editingText,
-    setEditingText,
-    selectedFilter,
-    // Domain State
-    layers,
-    activeLayerId,
-    // Actions
-    updateLayer,
-    deleteLayer,
-    selectLayer,
-    addTextLayer,
-    handleAddText,
-    handleTextLayerTap,
-    handleSaveText,
-    handleSelectFilter,
-    handleSelectSticker,
-  } = usePhotoEditorUI(initialCaption, tokens);
+  const actions: EditorActions = useMemo(() => ({
+    addTextLayer: ui.addTextLayer,
+    updateLayer: ui.updateLayer,
+    getLayers: () => ui.layers,
+    getActiveLayerId: () => ui.activeLayerId,
+  }), [ui.addTextLayer, ui.updateLayer, ui.layers, ui.activeLayerId]);
 
   return (
     <SafeBottomSheetModalProvider>
       <View style={styles.container}>
         <View style={styles.header}>
-          <TouchableOpacity style={styles.headerButton} onPress={onClose}>
-            <AtomicIcon name="close" size="md" color="textPrimary" />
-          </TouchableOpacity>
-          <AtomicText style={styles.headerTitle}>{title}</AtomicText>
-          <TouchableOpacity style={styles.postButton} onPress={() => onSave?.(imageUri)}>
-            <AtomicText style={styles.postButtonText}>{t("preview.share") || "Share"}</AtomicText>
-          </TouchableOpacity>
+          <TouchableOpacity onPress={onClose}><AtomicIcon name="close" size="md" color="textPrimary" /></TouchableOpacity>
+          <AtomicText type="headlineSmall" style={styles.headerTitle}>{title}</AtomicText>
+          <TouchableOpacity onPress={() => onSave?.(imageUri)}><AtomicText fontWeight="bold" color="primary">{t("common.save")}</AtomicText></TouchableOpacity>
         </View>
 
-        <ScrollView
-          contentContainerStyle={styles.scrollContent}
-          showsVerticalScrollIndicator={false}
-        >
-          <EditorCanvas
-            imageUrl={imageUri}
-            layers={layers}
-            activeLayerId={activeLayerId}
-            onLayerTap={handleTextLayerTap}
-            onLayerMove={(id, x, y) => updateLayer(id, { x, y })}
-            styles={styles}
-          />
-          {typeof customTools === "function"
-            ? customTools({
-                addTextLayer,
-                updateLayer,
-                getLayers: () => layers,
-                getActiveLayerId: () => activeLayerId,
-              })
-            : customTools}
-          <FontControls
-            fontSize={fontSize}
-            selectedFont={selectedFont}
-            fonts={fonts}
-            onFontSizeChange={(s) => setFontSize(Math.max(12, Math.min(96, s)))}
-            onFontSelect={setSelectedFont}
-            styles={styles}
-          />
+        <ScrollView contentContainerStyle={styles.scrollContent}>
+          <EditorCanvas imageUrl={imageUri} layers={ui.layers} activeLayerId={ui.activeLayerId} onLayerTap={ui.handleTextLayerTap} onLayerMove={(id, x, y) => ui.updateLayer(id, { x, y })} styles={styles} />
+          {typeof customTools === "function" ? customTools(actions) : customTools}
+          <FontControls fontSize={ui.fontSize} selectedFont={ui.selectedFont} fonts={fonts} onFontSizeChange={ui.setFontSize} onFontSelect={ui.setSelectedFont} styles={styles} />
         </ScrollView>
 
-        <EditorToolbar
-          onAddText={handleAddText}
-          onAddSticker={() => stickerSheetRef.current?.present()}
-          onOpenFilters={() => filterSheetRef.current?.present()}
-          onOpenLayers={() => layerSheetRef.current?.present()}
-          onAIMagic={showAI ? undefined : undefined}
-          styles={styles}
-          t={t}
-        />
-
-        <BottomSheetModal ref={textEditorSheetRef} snapPoints={["40%"]}>
-          <TextEditorSheet
-            value={editingText}
-            onChange={setEditingText}
-            onSave={handleSaveText}
-            t={t}
-          />
-        </BottomSheetModal>
-
-        <BottomSheetModal ref={stickerSheetRef} snapPoints={["50%"]}>
-          <StickerPicker stickers={stickers} onSelectSticker={handleSelectSticker} />
-        </BottomSheetModal>
-
-        <BottomSheetModal ref={filterSheetRef} snapPoints={["40%"]}>
-          <FilterPicker selectedFilter={selectedFilter} onSelectFilter={handleSelectFilter} />
-        </BottomSheetModal>
+        <EditorToolbar onAddText={ui.handleAddText} onAddSticker={() => ui.stickerSheetRef.current?.present()} onOpenFilters={() => ui.filterSheetRef.current?.present()} onOpenLayers={() => ui.layerSheetRef.current?.present()} onAIMagic={showAI ? () => ui.aiSheetRef.current?.present() : undefined} styles={styles} t={t} />
 
-        <BottomSheetModal ref={layerSheetRef} snapPoints={["50%"]}>
-          <LayerManager
-            layers={layers}
-            activeLayerId={activeLayerId}
-            onSelectLayer={(id) => {
-              selectLayer(id);
-              layerSheetRef.current?.dismiss();
-            }}
-            onDeleteLayer={deleteLayer}
-            t={t}
-          />
-        </BottomSheetModal>
+        <BottomSheetModal ref={ui.textEditorSheetRef} snapPoints={["40%"]}><TextEditorSheet value={ui.editingText} onChange={ui.setEditingText} onSave={ui.handleSaveText} t={t} /></BottomSheetModal>
+        <BottomSheetModal ref={ui.stickerSheetRef} snapPoints={["50%"]}><StickerPicker onSelectSticker={ui.handleSelectSticker} /></BottomSheetModal>
+        <BottomSheetModal ref={ui.filterSheetRef} snapPoints={["40%"]}><FilterPicker selectedFilter={ui.selectedFilter} onSelectFilter={ui.handleSelectFilter} /></BottomSheetModal>
+        <BottomSheetModal ref={ui.layerSheetRef} snapPoints={["50%"]}><LayerManager layers={ui.layers} activeLayerId={ui.activeLayerId} onSelectLayer={ui.selectLayer} onDeleteLayer={ui.deleteLayer} t={t} /></BottomSheetModal>
+        <BottomSheetModal ref={ui.aiSheetRef} snapPoints={["60%"]}><AIMagicSheet onGenerateCaption={(_s) => { ui.aiSheetRef.current?.dismiss(); /* AI trigger */ }} /></BottomSheetModal>
       </View>
     </SafeBottomSheetModalProvider>
   );

package/src/components/AIMagicSheet.tsx

@@ -1,21 +1,10 @@
 import React, { useState } from "react";
-import {
-  View,
-  ScrollView,
-  TouchableOpacity,
-  StyleSheet,
-  ActivityIndicator,
-} from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
+import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText, AtomicIcon, useAppDesignTokens, AtomicButton } from "@umituz/react-native-design-system";
 
 interface AIMagicSheetProps {
   onGenerateCaption: (style: string) => void;
   isLoading?: boolean;
-  _t: (key: string) => string;
 }
 
 const AI_STYLES = [
@@ -30,145 +19,65 @@ const AI_STYLES = [
 export const AIMagicSheet: React.FC<AIMagicSheetProps> = ({
   onGenerateCaption,
   isLoading = false,
-  _t,
 }) => {
   const tokens = useAppDesignTokens();
-  const [selectedStyle, setSelectedStyle] = useState<string | null>(null);
+  const [selected, setSelected] = useState<string | null>(null);
 
   const styles = StyleSheet.create({
-    container: { padding: 16 },
-    header: {
+    container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
+    header: { flexDirection: "row", alignItems: "center", gap: tokens.spacing.sm },
+    grid: { gap: tokens.spacing.sm },
+    card: {
       flexDirection: "row",
       alignItems: "center",
-      gap: 8,
-      marginBottom: 16,
-    },
-    title: {
-      fontSize: 18,
-      fontWeight: "bold",
-      color: tokens.colors.textPrimary,
-    },
-    subtitle: {
-      fontSize: 14,
-      color: tokens.colors.textSecondary,
-      marginBottom: 16,
-    },
-    grid: { gap: 12 },
-    styleCard: {
-      flexDirection: "row",
-      alignItems: "center",
-      padding: 16,
+      padding: tokens.spacing.md,
       backgroundColor: tokens.colors.surfaceVariant,
-      borderRadius: 16,
+      borderRadius: tokens.borders.radius.md,
       borderWidth: 2,
       borderColor: "transparent",
     },
-    styleCardActive: {
+    cardActive: {
       borderColor: tokens.colors.primary,
-      backgroundColor: tokens.colors.primaryContainer,
-    },
-    styleInfo: { flex: 1, marginLeft: 12 },
-    styleLabel: {
-      fontSize: 16,
-      fontWeight: "bold",
-      color: tokens.colors.textPrimary,
-    },
-    styleLabelActive: { color: tokens.colors.primary },
-    styleDesc: {
-      fontSize: 12,
-      color: tokens.colors.textSecondary,
-      marginTop: 2,
-    },
-    generateButton: {
-      backgroundColor: tokens.colors.primary,
-      borderRadius: 999,
-      padding: 16,
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "center",
-      gap: 8,
-      marginTop: 16,
-    },
-    generateButtonDisabled: { opacity: 0.5 },
-    generateButtonText: {
-      color: tokens.colors.onPrimary,
-      fontWeight: "bold",
-      fontSize: 16,
+      backgroundColor: tokens.colors.primary + "10",
     },
+    info: { flex: 1, marginLeft: tokens.spacing.sm },
   });
 
-  const handleGenerate = () => {
-    if (selectedStyle) {
-      onGenerateCaption(selectedStyle);
-    }
-  };
-
   return (
     <View style={styles.container}>
       <View style={styles.header}>
         <AtomicIcon name="sparkles" size="md" color="primary" />
-        <AtomicText style={styles.title}>AI Caption Magic</AtomicText>
+        <AtomicText type="headlineSmall">AI Caption Magic</AtomicText>
       </View>
-      <AtomicText style={styles.subtitle}>
-        Choose a style and let AI create the perfect caption
-      </AtomicText>
-
       <ScrollView showsVerticalScrollIndicator={false}>
         <View style={styles.grid}>
           {AI_STYLES.map((style) => (
             <TouchableOpacity
               key={style.id}
-              style={[
-                styles.styleCard,
-                selectedStyle === style.id && styles.styleCardActive,
-              ]}
-              onPress={() => setSelectedStyle(style.id)}
+              style={[styles.card, selected === style.id && styles.cardActive]}
+              onPress={() => setSelected(style.id)}
             >
-              <AtomicText style={{ fontSize: 28 }}>
-                {style.label.split(" ")[0]}
-              </AtomicText>
-              <View style={styles.styleInfo}>
-                <AtomicText
-                  style={[
-                    styles.styleLabel,
-                    selectedStyle === style.id && styles.styleLabelActive,
-                  ]}
-                >
+              <AtomicText style={{ fontSize: 24 }}>{style.label.split(" ")[0]}</AtomicText>
+              <View style={styles.info}>
+                <AtomicText fontWeight="bold" color={selected === style.id ? "primary" : "textPrimary"}>
                   {style.label.split(" ").slice(1).join(" ")}
                 </AtomicText>
-                <AtomicText style={styles.styleDesc}>{style.desc}</AtomicText>
+                <AtomicText type="labelSmall" color="textSecondary">{style.desc}</AtomicText>
               </View>
-              {selectedStyle === style.id && (
-                <AtomicIcon name="checkmark-circle" size="md" color="primary" />
-              )}
+              {selected === style.id && <AtomicIcon name="checkmark-circle" size="md" color="primary" />}
             </TouchableOpacity>
           ))}
         </View>
       </ScrollView>
-
-      <TouchableOpacity
-        style={[
-          styles.generateButton,
-          !selectedStyle && styles.generateButtonDisabled,
-        ]}
-        onPress={handleGenerate}
-        disabled={!selectedStyle || isLoading}
+      <AtomicButton
+        variant="primary"
+        disabled={!selected || isLoading}
+        onPress={() => selected && onGenerateCaption(selected)}
+        loading={isLoading}
+        icon="sparkles"
       >
-        {isLoading ? (
-          <ActivityIndicator color={tokens.colors.onPrimary} />
-        ) : (
-          <>
-            <AtomicIcon
-              name="sparkles"
-              size="sm"
-              customColor={tokens.colors.onPrimary}
-            />
-            <AtomicText style={styles.generateButtonText}>
-              Generate Caption
-            </AtomicText>
-          </>
-        )}
-      </TouchableOpacity>
+        Generate Caption
+      </AtomicButton>
     </View>
   );
 };

package/src/components/DraggableSticker.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleSheet, View } from "react-native";
+import { View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
   useAnimatedStyle,
@@ -15,34 +15,31 @@ interface DraggableStickerProps {
   uri: string;
   initialX: number;
   initialY: number;
-  rotation?: number;
-  scale?: number;
-  opacity?: number;
   onDragEnd: (x: number, y: number) => void;
   onPress: () => void;
   isSelected?: boolean;
+  rotation?: number;
+  scale?: number;
+  opacity?: number;
 }
 
 export const DraggableSticker: React.FC<DraggableStickerProps> = ({
   uri,
   initialX,
   initialY,
-  rotation = 0,
-  scale = 1,
-  opacity = 1,
   onDragEnd,
   onPress,
   isSelected,
+  rotation = 0,
+  scale = 1,
+  opacity = 1,
 }) => {
   const tokens = useAppDesignTokens();
   const translateX = useSharedValue(initialX);
   const translateY = useSharedValue(initialY);
-  const offset = useSharedValue({ x: 0, y: 0 });
+  const offset = useSharedValue({ x: initialX, y: initialY });
 
-  const isEmoji = uri.length <= 4 && !uri.startsWith("http");
-
-  const drag = Gesture.Pan()
-    .minDistance(5)
+  const panGesture = Gesture.Pan()
     .onStart(() => {
       offset.value = { x: translateX.value, y: translateY.value };
     })
@@ -54,45 +51,39 @@ export const DraggableSticker: React.FC<DraggableStickerProps> = ({
       runOnJS(onDragEnd)(translateX.value, translateY.value);
     });
 
-  const tap = Gesture.Tap()
-    .maxDistance(5)
-    .onEnd(() => {
-      runOnJS(onPress)();
-    });
-
-  const gesture = Gesture.Exclusive(drag, tap);
+  const tapGesture = Gesture.Tap().onEnd(() => {
+    runOnJS(onPress)();
+  });
 
   const animatedStyle = useAnimatedStyle(() => ({
     transform: [
       { translateX: translateX.value },
       { translateY: translateY.value },
       { rotate: `${rotation}deg` },
-      { scale: scale },
+      { scale },
     ],
-    opacity: opacity,
+    opacity,
     zIndex: isSelected ? 100 : 50,
   }));
 
-  const styles = StyleSheet.create({
-    container: { position: "absolute", left: 0, top: 0 },
-    emojiContainer: {
-      padding: 4,
-      borderRadius: 8,
-      borderWidth: isSelected ? 2 : 0,
-      borderColor: tokens.colors.primary,
-      borderStyle: "dashed",
-      backgroundColor: isSelected
-        ? tokens.colors.primary + "20"
-        : "transparent",
-    },
-    emoji: { fontSize: 64 },
-  });
+  const isEmoji = uri.length <= 4 && !uri.startsWith("http");
 
   return (
-    <GestureDetector gesture={gesture}>
-      <Animated.View style={[styles.container, animatedStyle]}>
-        <View style={styles.emojiContainer}>
-          {isEmoji ? <AtomicText style={styles.emoji}>{uri}</AtomicText> : null}
+    <GestureDetector gesture={Gesture.Exclusive(panGesture, tapGesture)}>
+      <Animated.View style={[animatedStyle, { position: "absolute" }]}>
+        <View
+          style={{
+            padding: tokens.spacing.xs,
+            borderRadius: tokens.borders.radius.sm,
+            borderWidth: isSelected ? 2 : 0,
+            borderColor: tokens.colors.primary,
+            borderStyle: "dashed",
+            backgroundColor: isSelected ? tokens.colors.primary + "10" : "transparent",
+          }}
+        >
+          {isEmoji ? (
+            <AtomicText style={{ fontSize: 48 }}>{uri}</AtomicText>
+          ) : null}
         </View>
       </Animated.View>
     </GestureDetector>

package/src/components/DraggableText.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import { StyleSheet, View } from "react-native";
+import { View } from "react-native";
 import { Gesture, GestureDetector } from "react-native-gesture-handler";
 import Animated, {
   useAnimatedStyle,
@@ -10,25 +10,24 @@ import {
   AtomicText,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system";
-import { TextAlign } from "../types";
 
 interface DraggableTextProps {
   text: string;
   color: string;
   fontSize?: number;
   fontFamily?: string;
-  textAlign?: TextAlign;
+  initialX: number;
+  initialY: number;
+  onDragEnd: (x: number, y: number) => void;
+  onPress: () => void;
+  isSelected?: boolean;
   rotation?: number;
   scale?: number;
   opacity?: number;
+  textAlign?: "center" | "left" | "right";
   backgroundColor?: string;
   _strokeColor?: string;
   _strokeWidth?: number;
-  initialX: number;
-  initialY: number;
-  onDragEnd: (x: number, y: number) => void;
-  onPress: () => void;
-  isSelected?: boolean;
 }
 
 export const DraggableText: React.FC<DraggableTextProps> = ({
@@ -36,26 +35,23 @@ export const DraggableText: React.FC<DraggableTextProps> = ({
   color,
   fontSize = 24,
   fontFamily = "System",
-  textAlign = "center",
-  rotation = 0,
-  scale = 1,
-  opacity = 1,
-  backgroundColor = "transparent",
-  _strokeColor,
-  _strokeWidth = 2,
   initialX,
   initialY,
   onDragEnd,
   onPress,
   isSelected,
+  rotation = 0,
+  scale = 1,
+  opacity = 1,
+  textAlign = "center",
+  backgroundColor = "transparent",
 }) => {
   const tokens = useAppDesignTokens();
   const translateX = useSharedValue(initialX);
   const translateY = useSharedValue(initialY);
-  const offset = useSharedValue({ x: 0, y: 0 });
+  const offset = useSharedValue({ x: initialX, y: initialY });
 
-  const drag = Gesture.Pan()
-    .minDistance(5)
+  const panGesture = Gesture.Pan()
     .onStart(() => {
       offset.value = { x: translateX.value, y: translateY.value };
     })
@@ -67,77 +63,47 @@ export const DraggableText: React.FC<DraggableTextProps> = ({
       runOnJS(onDragEnd)(translateX.value, translateY.value);
     });
 
-  const tap = Gesture.Tap()
-    .maxDistance(5)
-    .onEnd(() => {
-      runOnJS(onPress)();
-    });
-
-  const gesture = Gesture.Exclusive(drag, tap);
-
-  const animatedStyle = useAnimatedStyle(() => {
-    return {
-      transform: [
-        { translateX: translateX.value },
-        { translateY: translateY.value },
-        { rotate: `${rotation}deg` },
-        { scale: scale },
-      ],
-      opacity: opacity,
-      zIndex: isSelected ? 100 : 10,
-    };
+  const tapGesture = Gesture.Tap().onEnd(() => {
+    runOnJS(onPress)();
   });
 
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: translateX.value },
+      { translateY: translateY.value },
+      { rotate: `${rotation}deg` },
+      { scale },
+    ],
+    opacity,
+    zIndex: isSelected ? 100 : 10,
+  }));
+
   return (
-    <GestureDetector gesture={gesture}>
-      <Animated.View
-        style={[
-          styles.container,
-          animatedStyle,
-          { position: "absolute", left: 0, top: 0 },
-        ]}
-      >
+    <GestureDetector gesture={Gesture.Exclusive(panGesture, tapGesture)}>
+      <Animated.View style={[animatedStyle, { position: "absolute" }]}>
         <View
-          style={[
-            {
-              backgroundColor: backgroundColor,
-              paddingHorizontal: 8,
-              paddingVertical: 4,
-              borderRadius: 4,
-            },
-            isSelected && {
-              borderWidth: 2,
-              borderColor: tokens.colors.primary,
-              borderStyle: "dashed",
-              backgroundColor:
-                backgroundColor === "transparent"
-                  ? `${tokens.colors.primary}10`
-                  : backgroundColor,
-            },
-          ]}
+          style={{
+            padding: tokens.spacing.xs,
+            borderRadius: tokens.borders.radius.sm,
+            borderWidth: isSelected ? 2 : 0,
+            borderColor: tokens.colors.primary,
+            borderStyle: "dashed",
+            backgroundColor: isSelected ? tokens.colors.primary + "10" : backgroundColor,
+          }}
         >
           <AtomicText
+            fontWeight="900"
             style={{
-              fontSize: fontSize,
-              fontFamily: fontFamily,
-              fontWeight: "900",
-              textAlign: textAlign,
-              textTransform: "uppercase",
-              color: color,
-              minWidth: text ? undefined : 100,
-              minHeight: text ? undefined : 40,
+              fontSize,
+              fontFamily,
+              color,
+              textAlign,
             }}
           >
-            {text}
+            {text || "TAP TO EDIT"}
           </AtomicText>
         </View>
       </Animated.View>
     </GestureDetector>
   );
 };
-
-const styles = StyleSheet.create({
-  container: {
-    zIndex: 10,
-  },
-});