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

package/src/utils/constants.ts

@@ -0,0 +1,84 @@
+/**
+ * Constants Utility
+ * Shared constants for the editor
+ */
+
+export const DEFAULT_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 const DEFAULT_STICKERS = [
+  "😀", "😂", "🤣", "😍", "🥰", "😎", "🤯", "🥳", "😤", "💀",
+  "🔥", "❤️", "💯", "✨", "🎉", "🤡", "👀", "🙌", "👏", "💪",
+  "🤝", "🙈", "🐶", "🐱", "🦊", "🐸", "🌟", "⭐", "🌈", "☀️",
+  "🌙", "💫",
+] as const;
+
+export 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" },
+] as const;
+
+export const FILTER_PRESETS = [
+  {
+    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 },
+  },
+] as const;
+
+export const SLIDER_CONFIGS = {
+  brightness: { min: 0.5, max: 2, step: 0.05, default: 1 },
+  contrast: { min: 0.5, max: 2, step: 0.05, default: 1 },
+  saturation: { min: 0, max: 2, step: 0.05, default: 1 },
+  hueRotate: { min: 0, max: 360, step: 1, default: 0 },
+  sepia: { min: 0, max: 1, step: 0.05, default: 0 },
+  grayscale: { min: 0, max: 1, step: 0.05, default: 0 },
+} as const;

package/src/utils/formatters.ts

@@ -0,0 +1,29 @@
+/**
+ * Formatters Utility
+ * Value formatting for UI display
+ */
+
+export function formatPercentage(value: number): string {
+  const rounded = (value - 1) * 100;
+  return `${rounded >= 0 ? "+" : ""}${Math.round(rounded)}%`;
+}
+
+export function formatDegrees(value: number): string {
+  return `${Math.round(value)}°`;
+}
+
+export function formatSliderValue(
+  value: number,
+  type: "percentage" | "degrees" | "integer" = "percentage"
+): string {
+  switch (type) {
+    case "percentage":
+      return formatPercentage(value);
+    case "degrees":
+      return formatDegrees(value);
+    case "integer":
+      return Math.round(value).toString();
+    default:
+      return value.toString();
+  }
+}

package/src/utils/helpers.ts

@@ -0,0 +1,51 @@
+/**
+ * Helpers Utility
+ * Common helper functions
+ */
+
+import type { FilterData } from "../domain/value-objects/FilterSettings.vo";
+
+export function createBrightnessOverlay(brightness: number): {
+  color: string;
+  opacity: number;
+} | null {
+  if (brightness < 1) {
+    return { color: "black", opacity: Math.min(0.6, 1 - brightness) };
+  }
+  if (brightness > 1) {
+    return { color: "white", opacity: Math.min(0.4, brightness - 1) };
+  }
+  return null;
+}
+
+export function mergeFilters(
+  base: FilterData,
+  updates: Partial<FilterData>
+): FilterData {
+  return {
+    ...base,
+    ...updates,
+  };
+}
+
+export function generateId(prefix: string): string {
+  return `${prefix}-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+}
+
+export function sortByZIndex<T extends { zIndex: number }>(
+  items: T[]
+): T[] {
+  return [...items].sort((a, b) => a.zIndex - b.zIndex);
+}
+
+export function getNextZIndex(items: { zIndex: number }[]): number {
+  return items.length > 0 ? Math.max(...items.map((item) => item.zIndex)) + 1 : 0;
+}
+
+export function capitalizeFirst(str: string): string {
+  return str.charAt(0).toUpperCase() + str.slice(1);
+}
+
+export function truncateText(text: string, maxLength: number): string {
+  return text.length > maxLength ? text.slice(0, maxLength) + "..." : text;
+}

package/src/utils/index.ts

@@ -0,0 +1,9 @@
+/**
+ * Utils Export
+ * Central export for all utility functions
+ */
+
+export * from "./formatters";
+export * from "./validators";
+export * from "./constants";
+export * from "./helpers";

package/src/utils/validators.ts

@@ -0,0 +1,38 @@
+/**
+ * Validators Utility
+ * Input validation for editor operations
+ */
+
+export function isValidColor(color: string): boolean {
+  return /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/.test(color);
+}
+
+export function isValidUrl(url: string): boolean {
+  try {
+    new URL(url);
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+export function isEmojiString(str: string): boolean {
+  return (
+    str.length <= 4 &&
+    !/^https?:\/\//i.test(str) &&
+    !str.startsWith("/") &&
+    /^[\p{Emoji}\p{Emoji_Component}]+$/u.test(str)
+  );
+}
+
+export function clamp(value: number, min: number, max: number): number {
+  return Math.min(Math.max(value, min), max);
+}
+
+export function validateFontSize(size: number): number {
+  return clamp(size, 8, 120);
+}
+
+export function validateOpacity(opacity: number): number {
+  return clamp(opacity, 0, 1);
+}

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" },
-});