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

package/src/components/AIMagicSheet.tsx

@@ -1,107 +0,0 @@
-import React, { useState, useMemo } from "react";
-import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicText, AtomicIcon, AtomicButton } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { DEFAULT_AI_STYLES } from "../constants";
-
-interface AIMagicSheetProps {
-  /**
-   * Called with the selected style ID. Should return a generated caption string.
-   * If undefined, the AI button is disabled.
-   */
-  onGenerateCaption?: (style: string) => Promise<string> | void;
-  isLoading?: boolean;
-}
-
-export const AIMagicSheet: React.FC<AIMagicSheetProps> = ({
-  onGenerateCaption,
-  isLoading = false,
-}) => {
-  const tokens = useAppDesignTokens();
-  const [selected, setSelected] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);
-
-  const styles = useMemo(() => StyleSheet.create({
-    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",
-      padding: tokens.spacing.md,
-      backgroundColor: tokens.colors.surfaceVariant,
-      borderRadius: tokens.borders.radius.md,
-      borderWidth: 2,
-      borderColor: "transparent",
-    },
-    cardActive: {
-      borderColor: tokens.colors.primary,
-      backgroundColor: tokens.colors.primary + "10",
-    },
-    info: { flex: 1, marginLeft: tokens.spacing.sm },
-  }), [tokens]);
-
-  const handleGenerate = async () => {
-    if (!selected || !onGenerateCaption) return;
-    setLoading(true);
-    try {
-      await onGenerateCaption(selected);
-    } finally {
-      setLoading(false);
-    }
-  };
-
-  const isGenerating = isLoading || loading;
-
-  return (
-    <View style={styles.container}>
-      <View style={styles.header}>
-        <AtomicIcon name="sparkles" size="md" color="primary" />
-        <AtomicText type="headlineSmall">AI Caption Magic</AtomicText>
-      </View>
-      <ScrollView showsVerticalScrollIndicator={false}>
-        <View style={styles.grid}>
-          {DEFAULT_AI_STYLES.map((style) => {
-            const isActive = selected === style.id;
-            const [emoji, ...words] = style.label.split(" ");
-            return (
-              <TouchableOpacity
-                key={style.id}
-                style={[styles.card, isActive && styles.cardActive]}
-                onPress={() => setSelected(style.id)}
-                accessibilityLabel={style.label}
-                accessibilityRole="button"
-                accessibilityState={{ selected: isActive }}
-              >
-                <AtomicText style={{ fontSize: 24 }}>{emoji}</AtomicText>
-                <View style={styles.info}>
-                  <AtomicText
-                    fontWeight="bold"
-                    color={isActive ? "primary" : "textPrimary"}
-                  >
-                    {words.join(" ")}
-                  </AtomicText>
-                  <AtomicText type="labelSmall" color="textSecondary">
-                    {style.desc}
-                  </AtomicText>
-                </View>
-                {isActive && (
-                  <AtomicIcon name="checkmark-circle" size="md" color="primary" />
-                )}
-              </TouchableOpacity>
-            );
-          })}
-        </View>
-      </ScrollView>
-      <AtomicButton
-        variant="primary"
-        disabled={!selected || !onGenerateCaption || isGenerating}
-        onPress={handleGenerate}
-        loading={isGenerating}
-        icon="sparkles"
-      >
-        Generate Caption
-      </AtomicButton>
-    </View>
-  );
-};

package/src/components/AdjustmentsSheet.tsx

@@ -1,108 +0,0 @@
-import React from "react";
-import { View, TouchableOpacity } from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { Slider } from "./Slider";
-import { ImageFilters, DEFAULT_IMAGE_FILTERS } from "../types";
-
-interface AdjustmentsSheetProps {
-  filters: ImageFilters;
-  onFiltersChange: (filters: ImageFilters) => void;
-}
-
-export const AdjustmentsSheet: React.FC<AdjustmentsSheetProps> = ({
-  filters,
-  onFiltersChange,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const update = (key: keyof ImageFilters, val: number) => {
-    onFiltersChange({ ...filters, [key]: val });
-  };
-
-  const handleReset = () => onFiltersChange(DEFAULT_IMAGE_FILTERS);
-
-  return (
-    <View style={{ padding: tokens.spacing.md, gap: tokens.spacing.lg }}>
-      <View
-        style={{
-          flexDirection: "row",
-          alignItems: "center",
-          justifyContent: "space-between",
-        }}
-      >
-        <View style={{ flexDirection: "row", alignItems: "center", gap: tokens.spacing.sm }}>
-          <AtomicIcon name="brush" size="md" color="primary" />
-          <AtomicText type="headlineSmall">Adjustments</AtomicText>
-        </View>
-        <TouchableOpacity
-          onPress={handleReset}
-          accessibilityLabel="Reset adjustments"
-          accessibilityRole="button"
-          style={{
-            paddingHorizontal: tokens.spacing.md,
-            paddingVertical: tokens.spacing.xs,
-            backgroundColor: tokens.colors.surfaceVariant,
-            borderRadius: tokens.borders.radius.sm,
-          }}
-        >
-          <AtomicText type="labelSmall" color="textSecondary">
-            Reset
-          </AtomicText>
-        </TouchableOpacity>
-      </View>
-
-      <Slider
-        label="Brightness"
-        value={filters.brightness}
-        min={0.5}
-        max={2}
-        step={0.05}
-        onValueChange={(v) => update("brightness", v)}
-        formatValue={(v) => `${Math.round((v - 1) * 100) >= 0 ? "+" : ""}${Math.round((v - 1) * 100)}%`}
-      />
-
-      <Slider
-        label="Contrast"
-        value={filters.contrast}
-        min={0.5}
-        max={2}
-        step={0.05}
-        onValueChange={(v) => update("contrast", v)}
-        formatValue={(v) => `${Math.round((v - 1) * 100) >= 0 ? "+" : ""}${Math.round((v - 1) * 100)}%`}
-      />
-
-      <Slider
-        label="Saturation"
-        value={filters.saturation}
-        min={0}
-        max={2}
-        step={0.05}
-        onValueChange={(v) => update("saturation", v)}
-        formatValue={(v) => `${Math.round((v - 1) * 100) >= 0 ? "+" : ""}${Math.round((v - 1) * 100)}%`}
-      />
-
-      <Slider
-        label="Hue Rotate"
-        value={filters.hueRotate ?? 0}
-        min={0}
-        max={360}
-        step={1}
-        onValueChange={(v) => update("hueRotate", v)}
-        formatValue={(v) => `${Math.round(v)}°`}
-      />
-
-      <Slider
-        label="Sepia"
-        value={filters.sepia}
-        min={0}
-        max={1}
-        step={0.05}
-        onValueChange={(v) => update("sepia", v)}
-        formatValue={(v) => `${Math.round(v * 100)}%`}
-      />
-    </View>
-  );
-};
-
-export default React.memo(AdjustmentsSheet);

package/src/components/ColorPicker.tsx

@@ -1,77 +0,0 @@
-import React from "react";
-import { View, TouchableOpacity } from "react-native";
-import { AtomicText } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { DEFAULT_TEXT_COLORS } from "../constants";
-
-interface ColorPickerProps {
-  selectedColor: string;
-  onSelectColor: (color: string) => void;
-  label?: string;
-  colors?: readonly string[];
-}
-
-export const ColorPicker: React.FC<ColorPickerProps> = ({
-  selectedColor,
-  onSelectColor,
-  label,
-  colors = DEFAULT_TEXT_COLORS,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  return (
-    <View style={{ gap: tokens.spacing.xs }}>
-      {label && (
-        <AtomicText type="labelMedium" color="textSecondary">
-          {label}
-        </AtomicText>
-      )}
-      <View
-        style={{
-          flexDirection: "row",
-          flexWrap: "wrap",
-          gap: tokens.spacing.xs,
-        }}
-      >
-        {colors.map((color) => {
-          const isSelected = selectedColor === color;
-          return (
-            <TouchableOpacity
-              key={color}
-              onPress={() => onSelectColor(color)}
-              accessibilityLabel={`Color ${color}`}
-              accessibilityRole="button"
-              accessibilityState={{ selected: isSelected }}
-              style={{
-                width: 34,
-                height: 34,
-                borderRadius: 17,
-                backgroundColor: color,
-                borderWidth: isSelected ? 3 : 1.5,
-                borderColor: isSelected
-                  ? tokens.colors.primary
-                  : tokens.colors.border,
-                alignItems: "center",
-                justifyContent: "center",
-              }}
-            >
-              {isSelected && (
-                <View
-                  style={{
-                    width: 10,
-                    height: 10,
-                    borderRadius: 5,
-                    backgroundColor:
-                      color === "#FFFFFF" ? "#000000" : "#FFFFFF",
-                  }}
-                />
-              )}
-            </TouchableOpacity>
-          );
-        })}
-      </View>
-    </View>
-  );
-};
-
-export default React.memo(ColorPicker);

package/src/components/DraggableSticker.tsx

@@ -1,161 +0,0 @@
-import React, { useState, useRef, useCallback, useEffect } from "react";
-import { View, StyleSheet } from "react-native";
-import { Gesture, GestureDetector } from "react-native-gesture-handler";
-import { Image } from "expo-image";
-import { AtomicText } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import type { LayerTransform } from "./DraggableText";
-
-interface DraggableStickerProps {
-  uri: string;
-  initialX: number;
-  initialY: number;
-  rotation?: number;
-  scale?: number;
-  opacity?: number;
-  onTransformEnd: (transform: LayerTransform) => void;
-  onPress: () => void;
-  isSelected?: boolean;
-}
-
-const isEmojiString = (str: string) =>
-  str.length <= 4 && !/^https?:\/\//i.test(str) && !str.startsWith("/");
-
-export const DraggableSticker: React.FC<DraggableStickerProps> = ({
-  uri,
-  initialX,
-  initialY,
-  rotation: rotationProp = 0,
-  scale: scaleProp = 1,
-  opacity = 1,
-  onTransformEnd,
-  onPress,
-  isSelected,
-}) => {
-  const tokens = useAppDesignTokens();
-  const [position, setPosition] = useState({ x: initialX, y: initialY });
-  const [scale, setScale] = useState(scaleProp);
-  const [rotation, setRotation] = useState(rotationProp);
-
-  // Sync when props change (e.g., undo/redo)
-  useEffect(() => { setPosition({ x: initialX, y: initialY }); }, [initialX, initialY]);
-  useEffect(() => { setScale(scaleProp); }, [scaleProp]);
-  useEffect(() => { setRotation(rotationProp); }, [rotationProp]);
-
-  const positionRef = useRef(position);
-  positionRef.current = position;
-  const scaleRef = useRef(scale);
-  scaleRef.current = scale;
-  const rotationRef = useRef(rotation);
-  rotationRef.current = rotation;
-  const onTransformEndRef = useRef(onTransformEnd);
-  onTransformEndRef.current = onTransformEnd;
-  const onPressRef = useRef(onPress);
-  onPressRef.current = onPress;
-
-  const offsetRef = useRef({ x: initialX, y: initialY });
-  const scaleStartRef = useRef(scaleProp);
-  const rotationStartRef = useRef(rotationProp);
-
-  const emitTransform = useCallback(() => {
-    onTransformEndRef.current({
-      x: positionRef.current.x,
-      y: positionRef.current.y,
-      scale: scaleRef.current,
-      rotation: rotationRef.current,
-    });
-  }, []);
-
-  const panGesture = Gesture.Pan()
-    .runOnJS(true)
-    .averageTouches(true)
-    .onStart(() => {
-      offsetRef.current = { x: positionRef.current.x, y: positionRef.current.y };
-    })
-    .onUpdate((e) => {
-      setPosition({
-        x: offsetRef.current.x + e.translationX,
-        y: offsetRef.current.y + e.translationY,
-      });
-    })
-    .onEnd(emitTransform);
-
-  const pinchGesture = Gesture.Pinch()
-    .runOnJS(true)
-    .onStart(() => {
-      scaleStartRef.current = scaleRef.current;
-    })
-    .onUpdate((e) => {
-      setScale(Math.max(0.2, Math.min(6, scaleStartRef.current * e.scale)));
-    })
-    .onEnd(emitTransform);
-
-  const rotationGesture = Gesture.Rotation()
-    .runOnJS(true)
-    .onStart(() => {
-      rotationStartRef.current = rotationRef.current;
-    })
-    .onUpdate((e) => {
-      setRotation(rotationStartRef.current + (e.rotation * 180) / Math.PI);
-    })
-    .onEnd(emitTransform);
-
-  const tapGesture = Gesture.Tap()
-    .runOnJS(true)
-    .onEnd(() => onPressRef.current());
-
-  const composed = Gesture.Exclusive(
-    Gesture.Simultaneous(panGesture, pinchGesture, rotationGesture),
-    tapGesture,
-  );
-
-  const isEmoji = isEmojiString(uri);
-
-  return (
-    <GestureDetector gesture={composed}>
-      <View
-        accessibilityLabel={isEmoji ? `Sticker ${uri}` : "Image sticker"}
-        accessibilityRole="button"
-        style={[
-          styles.container,
-          {
-            transform: [
-              { translateX: position.x },
-              { translateY: position.y },
-              { rotate: `${rotation}deg` },
-              { scale },
-            ],
-            opacity,
-            zIndex: isSelected ? 100 : 50,
-          },
-        ]}
-      >
-        <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>
-          ) : (
-            <Image
-              source={{ uri }}
-              style={{ width: 80, height: 80 }}
-              contentFit="contain"
-              accessibilityIgnoresInvertColors
-            />
-          )}
-        </View>
-      </View>
-    </GestureDetector>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: { position: "absolute" },
-});

package/src/components/DraggableText.tsx

@@ -1,181 +0,0 @@
-import React, { useState, useRef, useCallback, useEffect } from "react";
-import { View, StyleSheet } 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";
-
-export interface LayerTransform {
-  x: number;
-  y: number;
-  scale: number;
-  rotation: number;
-}
-
-interface DraggableTextProps {
-  text: string;
-  color: string;
-  fontSize?: number;
-  fontFamily?: string;
-  initialX: number;
-  initialY: number;
-  rotation?: number;
-  scale?: number;
-  opacity?: number;
-  textAlign?: "center" | "left" | "right";
-  backgroundColor?: string;
-  isBold?: boolean;
-  isItalic?: boolean;
-  onTransformEnd: (transform: LayerTransform) => void;
-  onPress: () => void;
-  isSelected?: boolean;
-}
-
-export const DraggableText: React.FC<DraggableTextProps> = ({
-  text,
-  color,
-  fontSize = 24,
-  fontFamily = "System",
-  initialX,
-  initialY,
-  rotation: rotationProp = 0,
-  scale: scaleProp = 1,
-  opacity = 1,
-  textAlign = "center",
-  backgroundColor = "transparent",
-  isBold = false,
-  isItalic = false,
-  onTransformEnd,
-  onPress,
-  isSelected,
-}) => {
-  const tokens = useAppDesignTokens();
-  const [position, setPosition] = useState({ x: initialX, y: initialY });
-  const [scale, setScale] = useState(scaleProp);
-  const [rotation, setRotation] = useState(rotationProp); // degrees
-
-  // Sync when props change (e.g., undo/redo)
-  useEffect(() => { setPosition({ x: initialX, y: initialY }); }, [initialX, initialY]);
-  useEffect(() => { setScale(scaleProp); }, [scaleProp]);
-  useEffect(() => { setRotation(rotationProp); }, [rotationProp]);
-
-  // Refs for gesture callbacks to avoid stale closures
-  const positionRef = useRef(position);
-  positionRef.current = position;
-  const scaleRef = useRef(scale);
-  scaleRef.current = scale;
-  const rotationRef = useRef(rotation);
-  rotationRef.current = rotation;
-  const onTransformEndRef = useRef(onTransformEnd);
-  onTransformEndRef.current = onTransformEnd;
-  const onPressRef = useRef(onPress);
-  onPressRef.current = onPress;
-
-  // Start-of-gesture saved values
-  const offsetRef = useRef({ x: initialX, y: initialY });
-  const scaleStartRef = useRef(scale);
-  const rotationStartRef = useRef(rotation); // degrees
-
-  const emitTransform = useCallback(() => {
-    onTransformEndRef.current({
-      x: positionRef.current.x,
-      y: positionRef.current.y,
-      scale: scaleRef.current,
-      rotation: rotationRef.current,
-    });
-  }, []);
-
-  const panGesture = Gesture.Pan()
-    .runOnJS(true)
-    .averageTouches(true)
-    .onStart(() => {
-      offsetRef.current = { x: positionRef.current.x, y: positionRef.current.y };
-    })
-    .onUpdate((e) => {
-      setPosition({
-        x: offsetRef.current.x + e.translationX,
-        y: offsetRef.current.y + e.translationY,
-      });
-    })
-    .onEnd(emitTransform);
-
-  const pinchGesture = Gesture.Pinch()
-    .runOnJS(true)
-    .onStart(() => {
-      scaleStartRef.current = scaleRef.current;
-    })
-    .onUpdate((e) => {
-      setScale(Math.max(0.2, Math.min(6, scaleStartRef.current * e.scale)));
-    })
-    .onEnd(emitTransform);
-
-  const rotationGesture = Gesture.Rotation()
-    .runOnJS(true)
-    .onStart(() => {
-      rotationStartRef.current = rotationRef.current;
-    })
-    .onUpdate((e) => {
-      setRotation(rotationStartRef.current + (e.rotation * 180) / Math.PI);
-    })
-    .onEnd(emitTransform);
-
-  const tapGesture = Gesture.Tap()
-    .runOnJS(true)
-    .onEnd(() => onPressRef.current());
-
-  const composed = Gesture.Exclusive(
-    Gesture.Simultaneous(panGesture, pinchGesture, rotationGesture),
-    tapGesture,
-  );
-
-  return (
-    <GestureDetector gesture={composed}>
-      <View
-        accessibilityLabel={text || "Text layer"}
-        accessibilityRole="button"
-        style={[
-          styles.container,
-          {
-            transform: [
-              { translateX: position.x },
-              { translateY: position.y },
-              { rotate: `${rotation}deg` },
-              { scale },
-            ],
-            opacity,
-            zIndex: isSelected ? 100 : 10,
-          },
-        ]}
-      >
-        <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"
-              : backgroundColor,
-          }}
-        >
-          <AtomicText
-            style={{
-              fontSize,
-              fontFamily: fontFamily === "System" ? undefined : fontFamily,
-              color,
-              textAlign,
-              fontWeight: isBold ? "900" : "normal",
-              fontStyle: isItalic ? "italic" : "normal",
-            }}
-          >
-            {text || "TAP TO EDIT"}
-          </AtomicText>
-        </View>
-      </View>
-    </GestureDetector>
-  );
-};
-
-const styles = StyleSheet.create({
-  container: { position: "absolute" },
-});