@umituz/react-native-photo-editor 1.0.1

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@umituz/react-native-photo-editor",
+  "version": "1.0.1",
+  "description": "A powerful, generic photo editor for React Native",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "lint": "eslint .",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "react-native",
+    "photo-editor",
+    "image-editor"
+  ],
+  "author": "UmitUZ",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "@umituz/react-native-design-system": "*"
+  },
+  "dependencies": {
+    "expo-image-picker": "*",
+    "expo-media-library": "*",
+    "expo-file-system": "*",
+    "expo-image": "*"
+  }
+}

package/src/PhotoEditor.tsx

@@ -0,0 +1,153 @@
+import React, { useMemo } from "react";
+import { View, ScrollView, TouchableOpacity } from "react-native";
+import {
+  useAppDesignTokens,
+  AtomicText,
+  AtomicIcon,
+  BottomSheetModal,
+  SafeBottomSheetModalProvider,
+  useSafeAreaInsets,
+} from "@umituz/react-native-design-system";
+
+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 { createEditorStyles } from "./styles";
+import { usePhotoEditorUI } from "./hooks/usePhotoEditorUI";
+
+export interface PhotoEditorProps {
+  imageUri: string;
+  onSave?: (uri: string) => void;
+  onClose: () => void;
+  title?: string;
+  onShare?: () => void;
+  customTools?: React.ReactNode;
+  initialCaption?: string;
+  t: (key: string) => string;
+}
+
+const FONTS = ["Impact", "Comic", "Serif", "Retro"] as const;
+
+export const PhotoEditor: React.FC<PhotoEditorProps> = ({
+  imageUri,
+  onSave,
+  onClose,
+  title = "Photo Editor",
+  customTools,
+  initialCaption,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+  const insets = useSafeAreaInsets();
+  const styles = useMemo(() => createEditorStyles(tokens, insets), [tokens, insets]);
+
+  const {
+    // Refs
+    textEditorSheetRef,
+    stickerSheetRef,
+    filterSheetRef,
+    layerSheetRef,
+    // State
+    selectedFont,
+    setSelectedFont,
+    fontSize,
+    setFontSize,
+    editingText,
+    setEditingText,
+    selectedFilter,
+    // Domain State
+    layers,
+    activeLayerId,
+    // Actions
+    updateLayer,
+    deleteLayer,
+    selectLayer,
+    handleAddText,
+    handleTextLayerTap,
+    handleSaveText,
+    handleSelectFilter,
+    handleSelectSticker,
+  } = usePhotoEditorUI(initialCaption, tokens);
+
+  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>
+        </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}
+          />
+          {customTools}
+          <FontControls
+            fontSize={fontSize}
+            selectedFont={selectedFont}
+            fonts={FONTS}
+            onFontSizeChange={(s) => setFontSize(Math.max(12, Math.min(96, s)))}
+            onFontSelect={setSelectedFont}
+            styles={styles}
+          />
+        </ScrollView>
+
+        <EditorToolbar
+          onAddText={handleAddText}
+          onAddSticker={() => stickerSheetRef.current?.present()}
+          onOpenFilters={() => filterSheetRef.current?.present()}
+          onOpenLayers={() => layerSheetRef.current?.present()}
+          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 onSelectSticker={handleSelectSticker} />
+        </BottomSheetModal>
+
+        <BottomSheetModal ref={filterSheetRef} snapPoints={["40%"]}>
+          <FilterPicker selectedFilter={selectedFilter} onSelectFilter={handleSelectFilter} />
+        </BottomSheetModal>
+
+        <BottomSheetModal ref={layerSheetRef} snapPoints={["50%"]}>
+          <LayerManager
+            layers={layers}
+            activeLayerId={activeLayerId}
+            onSelectLayer={(id) => {
+              selectLayer(id);
+              layerSheetRef.current?.dismiss();
+            }}
+            onDeleteLayer={deleteLayer}
+            t={t}
+          />
+        </BottomSheetModal>
+      </View>
+    </SafeBottomSheetModalProvider>
+  );
+};

package/src/components/AIMagicSheet.tsx

@@ -0,0 +1,174 @@
+import React, { useState } from "react";
+import {
+  View,
+  ScrollView,
+  TouchableOpacity,
+  StyleSheet,
+  ActivityIndicator,
+} from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+interface AIMagicSheetProps {
+  onGenerateCaption: (style: string) => void;
+  isLoading?: boolean;
+  t: (key: string) => string;
+}
+
+const AI_STYLES = [
+  { id: "viral", label: "✨ Viral", desc: "Catchy & shareable" },
+  { id: "funny", label: "😂 Funny", desc: "Humor that connects" },
+  { id: "savage", label: "🔥 Savage", desc: "Bold & edgy" },
+  { id: "wholesome", label: "💕 Wholesome", desc: "Warm & positive" },
+  { id: "sarcastic", label: "😏 Sarcastic", desc: "Witty & ironic" },
+  { id: "relatable", label: "🎯 Relatable", desc: "Everyone gets it" },
+];
+
+export const AIMagicSheet: React.FC<AIMagicSheetProps> = ({
+  onGenerateCaption,
+  isLoading = false,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+  const [selectedStyle, setSelectedStyle] = useState<string | null>(null);
+
+  const styles = StyleSheet.create({
+    container: { padding: 16 },
+    header: {
+      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,
+      backgroundColor: tokens.colors.surfaceVariant,
+      borderRadius: 16,
+      borderWidth: 2,
+      borderColor: "transparent",
+    },
+    styleCardActive: {
+      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,
+    },
+  });
+
+  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>
+      </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)}
+            >
+              <AtomicText style={{ fontSize: 28 }}>
+                {style.label.split(" ")[0]}
+              </AtomicText>
+              <View style={styles.styleInfo}>
+                <AtomicText
+                  style={[
+                    styles.styleLabel,
+                    selectedStyle === style.id && styles.styleLabelActive,
+                  ]}
+                >
+                  {style.label.split(" ").slice(1).join(" ")}
+                </AtomicText>
+                <AtomicText style={styles.styleDesc}>{style.desc}</AtomicText>
+              </View>
+              {selectedStyle === 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}
+      >
+        {isLoading ? (
+          <ActivityIndicator color={tokens.colors.onPrimary} />
+        ) : (
+          <>
+            <AtomicIcon
+              name="sparkles"
+              size="sm"
+              customColor={tokens.colors.onPrimary}
+            />
+            <AtomicText style={styles.generateButtonText}>
+              Generate Caption
+            </AtomicText>
+          </>
+        )}
+      </TouchableOpacity>
+    </View>
+  );
+};

package/src/components/DraggableSticker.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+import { StyleSheet, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  runOnJS,
+} from "react-native-reanimated";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+interface DraggableStickerProps {
+  uri: string;
+  initialX: number;
+  initialY: number;
+  rotation?: number;
+  scale?: number;
+  opacity?: number;
+  onDragEnd: (x: number, y: number) => void;
+  onPress: () => void;
+  isSelected?: boolean;
+}
+
+export const DraggableSticker: React.FC<DraggableStickerProps> = ({
+  uri,
+  initialX,
+  initialY,
+  rotation = 0,
+  scale = 1,
+  opacity = 1,
+  onDragEnd,
+  onPress,
+  isSelected,
+}) => {
+  const tokens = useAppDesignTokens();
+  const translateX = useSharedValue(initialX);
+  const translateY = useSharedValue(initialY);
+  const offset = useSharedValue({ x: 0, y: 0 });
+
+  const isEmoji = uri.length <= 4 && !uri.startsWith("http");
+
+  const drag = Gesture.Pan()
+    .minDistance(5)
+    .onStart(() => {
+      offset.value = { x: translateX.value, y: translateY.value };
+    })
+    .onUpdate((event) => {
+      translateX.value = offset.value.x + event.translationX;
+      translateY.value = offset.value.y + event.translationY;
+    })
+    .onEnd(() => {
+      runOnJS(onDragEnd)(translateX.value, translateY.value);
+    });
+
+  const tap = Gesture.Tap()
+    .maxDistance(5)
+    .onEnd(() => {
+      runOnJS(onPress)();
+    });
+
+  const gesture = Gesture.Exclusive(drag, tap);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      { translateX: translateX.value },
+      { translateY: translateY.value },
+      { rotate: `${rotation}deg` },
+      { scale: scale },
+    ],
+    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 },
+  });
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View style={[styles.container, animatedStyle]}>
+        <View style={styles.emojiContainer}>
+          {isEmoji ? <AtomicText style={styles.emoji}>{uri}</AtomicText> : null}
+        </View>
+      </Animated.View>
+    </GestureDetector>
+  );
+};

package/src/components/DraggableText.tsx

@@ -0,0 +1,143 @@
+import React, { useMemo } from "react";
+import { StyleSheet, View } from "react-native";
+import { Gesture, GestureDetector } from "react-native-gesture-handler";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  runOnJS,
+} from "react-native-reanimated";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { TextAlign } from "../../domain/Editor.types";
+
+interface DraggableTextProps {
+  text: string;
+  color: string;
+  fontSize?: number;
+  fontFamily?: string;
+  textAlign?: TextAlign;
+  rotation?: number;
+  scale?: number;
+  opacity?: number;
+  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> = ({
+  text,
+  color,
+  fontSize = 24,
+  fontFamily = "System",
+  textAlign = "center",
+  rotation = 0,
+  scale = 1,
+  opacity = 1,
+  backgroundColor = "transparent",
+  strokeColor,
+  strokeWidth = 2,
+  initialX,
+  initialY,
+  onDragEnd,
+  onPress,
+  isSelected,
+}) => {
+  const tokens = useAppDesignTokens();
+  const translateX = useSharedValue(initialX);
+  const translateY = useSharedValue(initialY);
+  const offset = useSharedValue({ x: 0, y: 0 });
+
+  const drag = Gesture.Pan()
+    .minDistance(5)
+    .onStart(() => {
+      offset.value = { x: translateX.value, y: translateY.value };
+    })
+    .onUpdate((event) => {
+      translateX.value = offset.value.x + event.translationX;
+      translateY.value = offset.value.y + event.translationY;
+    })
+    .onEnd(() => {
+      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,
+    };
+  });
+
+  return (
+    <GestureDetector gesture={gesture}>
+      <Animated.View
+        style={[
+          styles.container,
+          animatedStyle,
+          { position: "absolute", left: 0, top: 0 },
+        ]}
+      >
+        <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,
+            },
+          ]}
+        >
+          <AtomicText
+            style={{
+              fontSize: fontSize,
+              fontFamily: fontFamily,
+              fontWeight: "900",
+              textAlign: textAlign,
+              textTransform: "uppercase",
+              color: color,
+              minWidth: text ? undefined : 100,
+              minHeight: text ? undefined : 40,
+            }}
+          >
+            {text}
+          </AtomicText>
+        </View>
+      </Animated.View>
+    </GestureDetector>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    zIndex: 10,
+  },
+});

package/src/components/EditorCanvas.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import { View } from "react-native";
+import { Image } from "expo-image";
+import { DraggableText } from "./DraggableText";
+import { DraggableSticker } from "./DraggableSticker";
+import { Layer, TextLayer, StickerLayer } from "../types";
+
+interface EditorCanvasProps {
+  imageUrl: string;
+  layers: Layer[];
+  activeLayerId: string | null;
+  onLayerTap: (layerId: string) => void;
+  onLayerMove: (layerId: string, x: number, y: number) => void;
+  styles: {
+    canvas: object;
+    canvasImage: object;
+  };
+}
+
+export const EditorCanvas: React.FC<EditorCanvasProps> = ({
+  imageUrl,
+  layers,
+  activeLayerId,
+  onLayerTap,
+  onLayerMove,
+  styles,
+}) => {
+  return (
+    <View style={styles.canvas}>
+      <Image
+        source={{ uri: imageUrl }}
+        style={styles.canvasImage}
+        contentFit="cover"
+      />
+      {layers.map((layer) => {
+        if (layer.type === "text") {
+          const textLayer = layer as TextLayer;
+          return (
+            <DraggableText
+              key={layer.id}
+              text={textLayer.text || "Tap to edit"}
+              color={textLayer.color}
+              fontSize={textLayer.fontSize}
+              fontFamily={textLayer.fontFamily}
+              textAlign={textLayer.textAlign}
+              rotation={textLayer.rotation}
+              scale={textLayer.scale}
+              opacity={textLayer.opacity}
+              backgroundColor={textLayer.backgroundColor}
+              strokeColor={textLayer.strokeColor}
+              strokeWidth={textLayer.strokeWidth}
+              initialX={textLayer.x}
+              initialY={textLayer.y}
+              onDragEnd={(x, y) => onLayerMove(layer.id, x, y)}
+              onPress={() => onLayerTap(layer.id)}
+              isSelected={activeLayerId === layer.id}
+            />
+          );
+        } else if (layer.type === "sticker") {
+          const stickerLayer = layer as StickerLayer;
+          return (
+            <DraggableSticker
+              key={layer.id}
+              uri={stickerLayer.uri}
+              initialX={stickerLayer.x}
+              initialY={stickerLayer.y}
+              rotation={stickerLayer.rotation}
+              scale={stickerLayer.scale}
+              opacity={stickerLayer.opacity}
+              onDragEnd={(x, y) => onLayerMove(layer.id, x, y)}
+              onPress={() => onLayerTap(layer.id)}
+              isSelected={activeLayerId === layer.id}
+            />
+          );
+        }
+        return null;
+      })}
+    </View>
+  );
+};