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

package/src/presentation/components/EditorCanvas.tsx

@@ -0,0 +1,90 @@
+/**
+ * Editor Canvas Component
+ * Renders the image and all layers
+ */
+
+import React, { memo } from "react";
+import { View, StyleSheet } from "react-native";
+import { Image } from "expo-image";
+import { DraggableLayer } from "./DraggableLayer";
+import { Layer } from "../../domain/entities/Layer";
+import type { FilterValues } from "../../domain/entities/Filters";
+
+interface EditorCanvasProps {
+  imageUrl: string;
+  layers: Layer[];
+  activeLayerId: string | null;
+  filters: FilterValues;
+  onLayerTap: (layerId: string) => void;
+  onLayerTransform: (layerId: string, transform: { x: number; y: number; scale: number; rotation: number }) => void;
+  style?: any;
+}
+
+export const EditorCanvas = memo<EditorCanvasProps>(({
+  imageUrl,
+  layers,
+  activeLayerId,
+  filters,
+  onLayerTap,
+  onLayerTransform,
+  style,
+}) => {
+  const brightnessOverlay = createBrightnessOverlay(filters.brightness);
+
+  return (
+    <View style={[styles.canvas, style]}>
+      <Image
+        source={{ uri: imageUrl }}
+        style={styles.canvasImage}
+        contentFit="cover"
+      />
+
+      {brightnessOverlay && (
+        <View
+          style={[
+            StyleSheet.absoluteFill,
+            {
+              backgroundColor: brightnessOverlay.color,
+              opacity: brightnessOverlay.opacity,
+            },
+          ]}
+          pointerEvents="none"
+        />
+      )}
+
+      {layers.map((layer) => (
+        <DraggableLayer
+          key={layer.id}
+          layer={layer}
+          isSelected={activeLayerId === layer.id}
+          onPress={() => onLayerTap(layer.id)}
+          onTransformEnd={(transform) => onLayerTransform(layer.id, transform)}
+        />
+      ))}
+    </View>
+  );
+});
+
+EditorCanvas.displayName = "EditorCanvas";
+
+function createBrightnessOverlay(brightness: number = 1) {
+  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;
+}
+
+const styles = StyleSheet.create({
+  canvas: {
+    position: "relative",
+    width: "100%",
+    aspectRatio: 1,
+  },
+  canvasImage: {
+    width: "100%",
+    height: "100%",
+  },
+});

package/src/presentation/components/EditorToolbar.tsx

@@ -0,0 +1,192 @@
+/**
+ * Editor Toolbar Component
+ * Main toolbar with action buttons
+ */
+
+import React, { memo } from "react";
+import { View, TouchableOpacity, ScrollView } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+
+interface ToolButtonProps {
+  icon: string;
+  label: string;
+  onPress: () => void;
+  isActive?: boolean;
+  disabled?: boolean;
+  isPrimary?: boolean;
+}
+
+const ToolButton = memo<ToolButtonProps>(({ icon, label, onPress, isActive, disabled, isPrimary }) => {
+  const tokens = useAppDesignTokens();
+
+  if (isPrimary) {
+    return (
+      <TouchableOpacity
+        style={{
+          width: 56,
+          height: 56,
+          borderRadius: 28,
+          backgroundColor: tokens.colors.primary,
+          alignItems: "center",
+          justifyContent: "center",
+          elevation: 4,
+          shadowColor: "#000",
+          shadowOffset: { width: 0, height: 2 },
+          shadowOpacity: 0.25,
+          shadowRadius: 4,
+        }}
+        onPress={onPress}
+        accessibilityLabel={label}
+        accessibilityRole="button"
+      >
+        <AtomicIcon name={icon as "sparkles"} size="lg" customColor={tokens.colors.onPrimary} />
+      </TouchableOpacity>
+    );
+  }
+
+  return (
+    <TouchableOpacity
+      style={{
+        alignItems: "center",
+        gap: tokens.spacing.xs,
+        opacity: disabled ? 0.5 : 1,
+      }}
+      onPress={onPress}
+      disabled={disabled}
+      accessibilityLabel={label}
+      accessibilityRole="button"
+      accessibilityState={{ selected: isActive, disabled }}
+    >
+      <AtomicIcon
+        name={icon as "edit"}
+        size="md"
+        color={disabled ? "textSecondary" : isActive ? "primary" : "textSecondary"}
+      />
+      <AtomicText
+        type="labelSmall"
+        color={disabled ? "textSecondary" : isActive ? "primary" : "textSecondary"}
+      >
+        {label}
+      </AtomicText>
+    </TouchableOpacity>
+  );
+});
+
+ToolButton.displayName = "ToolButton";
+
+export interface EditorToolbarProps {
+  onAddText: () => void;
+  onAddSticker?: () => void;
+  onOpenFilters?: () => void;
+  onOpenAdjustments?: () => void;
+  onOpenLayers: () => void;
+  onAIMagic?: () => void;
+  onUndo?: () => void;
+  onRedo?: () => void;
+  canUndo?: boolean;
+  canRedo?: boolean;
+  t: (key: string) => string;
+}
+
+export const EditorToolbar = memo<EditorToolbarProps>(({
+  onAddText,
+  onAddSticker,
+  onOpenFilters,
+  onOpenAdjustments,
+  onOpenLayers,
+  onAIMagic,
+  onUndo,
+  onRedo,
+  canUndo = false,
+  canRedo = false,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        paddingVertical: tokens.spacing.md,
+        paddingHorizontal: tokens.spacing.sm,
+        backgroundColor: tokens.colors.surface,
+        borderTopWidth: 1,
+        borderTopColor: tokens.colors.border,
+        gap: tokens.spacing.sm,
+      }}
+    >
+      <ScrollView horizontal showsHorizontalScrollIndicator={false} style={{ flex: 1 }}>
+        <View style={{ flexDirection: "row", alignItems: "center", gap: tokens.spacing.md }}>
+          {onUndo && (
+            <ToolButton
+              icon="arrow-back"
+              label={t("photo_editor.undo") || "Undo"}
+              onPress={onUndo}
+              disabled={!canUndo}
+            />
+          )}
+
+          <ToolButton
+            icon="edit"
+            label={t("photo_editor.text") || "Text"}
+            onPress={onAddText}
+          />
+
+          {onAddSticker && (
+            <ToolButton
+              icon="sparkles"
+              label={t("photo_editor.sticker") || "Sticker"}
+              onPress={onAddSticker}
+            />
+          )}
+
+          {onOpenAdjustments && (
+            <ToolButton
+              icon="flash"
+              label={t("photo_editor.adjust") || "Adjust"}
+              onPress={onOpenAdjustments}
+            />
+          )}
+
+          {onOpenFilters && (
+            <ToolButton
+              icon="brush"
+              label={t("photo_editor.filters") || "Filters"}
+              onPress={onOpenFilters}
+            />
+          )}
+
+          <ToolButton
+            icon="copy"
+            label={t("photo_editor.layers") || "Layers"}
+            onPress={onOpenLayers}
+          />
+
+          {onRedo && (
+            <ToolButton
+              icon="chevron-forward"
+              label={t("photo_editor.redo") || "Redo"}
+              onPress={onRedo}
+              disabled={!canRedo}
+            />
+          )}
+        </View>
+      </ScrollView>
+
+      {onAIMagic && (
+        <View style={{ marginLeft: tokens.spacing.sm }}>
+          <ToolButton
+            icon="sparkles"
+            label="AI"
+            onPress={onAIMagic}
+            isPrimary
+          />
+        </View>
+      )}
+    </View>
+  );
+});
+
+EditorToolbar.displayName = "EditorToolbar";

package/src/presentation/components/FontControls.tsx

@@ -0,0 +1,99 @@
+/**
+ * Font Controls Component
+ * Font family and size controls
+ */
+
+import React, { memo } from "react";
+import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { Slider } from "./ui/Slider";
+
+const DEFAULT_FONTS = [
+  "System",
+  "Impact",
+  "Comic",
+  "Serif",
+  "Retro",
+];
+
+interface FontControlsProps {
+  fontSize: number;
+  selectedFont: string;
+  fonts?: readonly string[];
+  onFontSizeChange: (size: number) => void;
+  onFontSelect: (font: string) => void;
+  style?: any;
+}
+
+export const FontControls = memo<FontControlsProps>(({
+  fontSize,
+  selectedFont,
+  fonts = DEFAULT_FONTS,
+  onFontSizeChange,
+  onFontSelect,
+  style,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={[styles.container, style]}>
+      <Slider
+        label="Font Size"
+        value={fontSize}
+        min={12}
+        max={120}
+        step={1}
+        onValueChange={onFontSizeChange}
+        formatValue={(v) => `${Math.round(v)}px`}
+      />
+
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        style={{ marginTop: tokens.spacing.sm }}
+        contentContainerStyle={{ gap: tokens.spacing.sm, paddingHorizontal: tokens.spacing.sm }}
+      >
+        {fonts.map((font) => (
+          <TouchableOpacity
+            key={font}
+            style={[
+              styles.fontButton,
+              {
+                backgroundColor: tokens.colors.surfaceVariant,
+                borderWidth: selectedFont === font ? 2 : 1,
+                borderColor: selectedFont === font ? tokens.colors.primary : tokens.colors.border,
+              },
+            ]}
+            onPress={() => onFontSelect(font)}
+            accessibilityLabel={`Font ${font}`}
+            accessibilityRole="button"
+            accessibilityState={{ selected: selectedFont === font }}
+          >
+            <AtomicText
+              style={{
+                fontFamily: font === "System" ? undefined : font,
+                color: selectedFont === font ? tokens.colors.primary : tokens.colors.textPrimary,
+              }}
+            >
+              {font}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  );
+});
+
+FontControls.displayName = "FontControls";
+
+const styles = StyleSheet.create({
+  container: { gap: 8 },
+  fontButton: {
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    borderRadius: 8,
+    minWidth: 80,
+    alignItems: "center",
+  },
+});

package/src/presentation/components/sheets/AIMagicSheet.tsx

@@ -0,0 +1,99 @@
+/**
+ * AI Magic Sheet Component
+ * Bottom sheet for AI-powered features
+ */
+
+import React, { memo, useState } from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText, AtomicButton } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+
+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" },
+];
+
+interface AIMagicSheetProps {
+  onGenerateCaption: (style: string) => Promise<string> | void;
+}
+
+export const AIMagicSheet = memo<AIMagicSheetProps>(({ onGenerateCaption }) => {
+  const tokens = useAppDesignTokens();
+  const [selectedStyle, setSelectedStyle] = useState<string>("viral");
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleGenerate = async () => {
+    setIsLoading(true);
+    try {
+      await onGenerateCaption(selectedStyle);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <AtomicText type="headlineSmall">AI Magic ✨</AtomicText>
+      <AtomicText type="bodyMedium" color="textSecondary">
+        Let AI create the perfect caption for your photo
+      </AtomicText>
+
+      <View style={styles.grid}>
+        {AI_STYLES.map((style) => (
+          <TouchableOpacity
+            key={style.id}
+            style={[
+              styles.styleCard,
+              {
+                backgroundColor: tokens.colors.surfaceVariant,
+                borderWidth: selectedStyle === style.id ? 2 : 1,
+                borderColor: selectedStyle === style.id ? tokens.colors.primary : tokens.colors.border,
+              },
+            ]}
+            onPress={() => setSelectedStyle(style.id)}
+            accessibilityLabel={style.label}
+            accessibilityRole="button"
+            accessibilityState={{ selected: selectedStyle === style.id }}
+          >
+            <AtomicText type="labelLarge" fontWeight="bold">
+              {style.label}
+            </AtomicText>
+            <AtomicText type="labelSmall" color="textSecondary">
+              {style.desc}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </View>
+
+      <AtomicButton
+        variant="primary"
+        onPress={handleGenerate}
+        disabled={isLoading}
+      >
+        {isLoading ? "Generating..." : "Generate Caption"}
+      </AtomicButton>
+    </View>
+  );
+});
+
+AIMagicSheet.displayName = "AIMagicSheet";
+
+const styles = StyleSheet.create({
+  container: { padding: 16, gap: 16 },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+  },
+  styleCard: {
+    flex: 1,
+    minWidth: "45%",
+    padding: 12,
+    borderRadius: 8,
+    gap: 4,
+  },
+});

package/src/presentation/components/sheets/AdjustmentsSheet.tsx

@@ -0,0 +1,113 @@
+/**
+ * Adjustments Sheet Component
+ * Bottom sheet for manual filter adjustments
+ */
+
+import React, { memo } 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 "../ui/Slider";
+import { DEFAULT_FILTERS } from "../../../domain/entities/Filters";
+
+interface AdjustmentsSheetProps {
+  filters: Record<string, number>;
+  onFiltersChange: (filters: Record<string, number>) => void;
+}
+
+export const AdjustmentsSheet = memo<AdjustmentsSheetProps>(({
+  filters,
+  onFiltersChange,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const update = (key: string, val: number) => {
+    onFiltersChange({ ...filters, [key]: val });
+  };
+
+  const handleReset = () => onFiltersChange(DEFAULT_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 ?? 1}
+        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 ?? 1}
+        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 ?? 1}
+        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 ?? 0}
+        min={0}
+        max={1}
+        step={0.05}
+        onValueChange={(v) => update("sepia", v)}
+        formatValue={(v) => `${Math.round(v * 100)}%`}
+      />
+    </View>
+  );
+});
+
+AdjustmentsSheet.displayName = "AdjustmentsSheet";