@umituz/react-native-photo-editor 2.0.21 → 2.0.23

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";

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

@@ -0,0 +1,128 @@
+/**
+ * Filter Sheet Component
+ * Bottom sheet for selecting preset filters
+ */
+
+import React, { memo } from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+
+export interface FilterOption {
+  id: string;
+  name: string;
+  icon: string;
+  filters: Record<string, number>;
+}
+
+interface FilterSheetProps {
+  selectedFilter: string;
+  onSelectFilter: (option: FilterOption) => void;
+  filters?: FilterOption[];
+}
+
+const DEFAULT_FILTERS: FilterOption[] = [
+  {
+    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 },
+  },
+];
+
+export const FilterSheet = memo<FilterSheetProps>(({
+  selectedFilter,
+  onSelectFilter,
+  filters = DEFAULT_FILTERS,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.container}>
+      <AtomicText type="headlineSmall">Filters</AtomicText>
+      <View style={styles.grid}>
+        {filters.map((f) => {
+          const isActive = selectedFilter === f.id;
+          return (
+            <TouchableOpacity
+              key={f.id}
+              style={[
+                styles.filter,
+                {
+                  backgroundColor: tokens.colors.surfaceVariant,
+                  borderColor: isActive ? tokens.colors.primary : "transparent",
+                },
+              ]}
+              onPress={() => onSelectFilter(f)}
+              accessibilityLabel={f.name}
+              accessibilityRole="button"
+              accessibilityState={{ selected: isActive }}
+            >
+              <AtomicIcon
+                name={f.icon as "close"}
+                size="lg"
+                color={isActive ? "primary" : "textSecondary"}
+              />
+              <AtomicText
+                type="labelSmall"
+                color={isActive ? "primary" : "textSecondary"}
+              >
+                {f.name}
+              </AtomicText>
+            </TouchableOpacity>
+          );
+        })}
+      </View>
+    </View>
+  );
+});
+
+FilterSheet.displayName = "FilterSheet";
+
+const styles = StyleSheet.create({
+  container: { padding: 16, gap: 16 },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+  },
+  filter: {
+    width: 75,
+    height: 75,
+    borderRadius: 8,
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: 2,
+    gap: 4,
+  },
+});

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

@@ -0,0 +1,151 @@
+/**
+ * Layer Manager Sheet Component
+ * Bottom sheet for managing layers
+ */
+
+import React, { memo } from "react";
+import { View, ScrollView, TouchableOpacity } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { Layer, isTextLayer } from "../../../domain/entities/Layer";
+
+interface LayerManagerProps {
+  layers: Layer[];
+  activeLayerId: string | null;
+  onSelectLayer: (id: string) => void;
+  onDeleteLayer: (id: string) => void;
+  onDuplicateLayer?: (id: string) => void;
+  onMoveLayerUp?: (id: string) => void;
+  onMoveLayerDown?: (id: string) => void;
+  t: (key: string) => string;
+}
+
+export const LayerManager = memo<LayerManagerProps>(({
+  layers,
+  activeLayerId,
+  onSelectLayer,
+  onDeleteLayer,
+  onDuplicateLayer,
+  onMoveLayerUp,
+  onMoveLayerDown,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+  const sortedLayers = [...layers].reverse();
+
+  return (
+    <View style={{ padding: tokens.spacing.md, gap: tokens.spacing.md }}>
+      <AtomicText type="headlineSmall">Layers</AtomicText>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        {sortedLayers.length === 0 ? (
+          <AtomicText
+            color="textSecondary"
+            style={{ textAlign: "center", padding: tokens.spacing.xl }}
+          >
+            No layers yet
+          </AtomicText>
+        ) : (
+          sortedLayers.map((layer, idx) => {
+            const isActive = activeLayerId === layer.id;
+            const label = isTextLayer(layer)
+              ? layer.text || t("photo_editor.untitled") || "Untitled"
+              : "Sticker";
+            const isTop = idx === 0;
+            const isBottom = idx === sortedLayers.length - 1;
+
+            return (
+              <TouchableOpacity
+                key={layer.id}
+                style={{
+                  flexDirection: "row",
+                  alignItems: "center",
+                  padding: tokens.spacing.sm,
+                  backgroundColor: tokens.colors.surfaceVariant,
+                  borderRadius: tokens.borders.radius.md,
+                  marginBottom: tokens.spacing.xs,
+                  borderWidth: 2,
+                  borderColor: isActive ? tokens.colors.primary : "transparent",
+                  backgroundColor: isActive ? tokens.colors.primary + "10" : tokens.colors.surfaceVariant,
+                }}
+                onPress={() => onSelectLayer(layer.id)}
+                accessibilityLabel={`${layer.type} layer: ${label}`}
+                accessibilityRole="button"
+                accessibilityState={{ selected: isActive }}
+              >
+                <AtomicIcon
+                  name={layer.type === "text" ? "edit" : "image"}
+                  size="sm"
+                  color={isActive ? "primary" : "textSecondary"}
+                />
+                <View style={{ flex: 1, marginLeft: tokens.spacing.sm }}>
+                  <AtomicText type="labelSmall" color="textSecondary">
+                    {layer.type.toUpperCase()}
+                  </AtomicText>
+                  <AtomicText fontWeight="bold" numberOfLines={1}>
+                    {label}
+                  </AtomicText>
+                </View>
+
+                <View style={{ flexDirection: "row", alignItems: "center", gap: tokens.spacing.xs }}>
+                  {onMoveLayerUp && (
+                    <TouchableOpacity
+                      style={{ padding: tokens.spacing.xs, borderRadius: tokens.borders.radius.sm }}
+                      onPress={() => onMoveLayerUp(layer.id)}
+                      disabled={isTop}
+                      accessibilityLabel="Move layer up"
+                      accessibilityRole="button"
+                    >
+                      <AtomicIcon
+                        name="chevron-forward"
+                        size="sm"
+                        color={isTop ? "textSecondary" : "textPrimary"}
+                      />
+                    </TouchableOpacity>
+                  )}
+
+                  {onMoveLayerDown && (
+                    <TouchableOpacity
+                      style={{ padding: tokens.spacing.xs, borderRadius: tokens.borders.radius.sm }}
+                      onPress={() => onMoveLayerDown(layer.id)}
+                      disabled={isBottom}
+                      accessibilityLabel="Move layer down"
+                      accessibilityRole="button"
+                    >
+                      <AtomicIcon
+                        name="chevron-back"
+                        size="sm"
+                        color={isBottom ? "textSecondary" : "textPrimary"}
+                      />
+                    </TouchableOpacity>
+                  )}
+
+                  {onDuplicateLayer && (
+                    <TouchableOpacity
+                      style={{ padding: tokens.spacing.xs, borderRadius: tokens.borders.radius.sm }}
+                      onPress={() => onDuplicateLayer(layer.id)}
+                      accessibilityLabel={`Duplicate ${label}`}
+                      accessibilityRole="button"
+                    >
+                      <AtomicIcon name="copy" size="sm" color="textSecondary" />
+                    </TouchableOpacity>
+                  )}
+
+                  <TouchableOpacity
+                    style={{ padding: tokens.spacing.xs, borderRadius: tokens.borders.radius.sm }}
+                    onPress={() => onDeleteLayer(layer.id)}
+                    accessibilityLabel={`Delete ${label}`}
+                    accessibilityRole="button"
+                  >
+                    <AtomicIcon name="trash-outline" size="sm" color="error" />
+                  </TouchableOpacity>
+                </View>
+              </TouchableOpacity>
+            );
+          })
+        )}
+      </ScrollView>
+    </View>
+  );
+});
+
+LayerManager.displayName = "LayerManager";

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

@@ -0,0 +1,67 @@
+/**
+ * Sticker Picker Sheet Component
+ * Bottom sheet for selecting stickers
+ */
+
+import React, { memo } from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+
+const DEFAULT_STICKERS = [
+  "😀", "😂", "🤣", "😍", "🥰", "😎", "🤯", "🥳", "😤", "💀",
+  "🔥", "❤️", "💯", "✨", "🎉", "🤡", "👀", "🙌", "👏", "💪",
+  "🤝", "🙈", "🐶", "🐱", "🦊", "🐸", "🌟", "⭐", "🌈", "☀️",
+  "🌙", "💫",
+];
+
+interface StickerPickerProps {
+  onSelectSticker: (sticker: string) => void;
+  stickers?: readonly string[];
+}
+
+export const StickerPicker = memo<StickerPickerProps>(({
+  onSelectSticker,
+  stickers = DEFAULT_STICKERS,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.container}>
+      <AtomicText type="headlineSmall" style={{ marginBottom: tokens.spacing.md }}>
+        Stickers
+      </AtomicText>
+      <View style={styles.grid}>
+        {stickers.map((sticker) => (
+          <TouchableOpacity
+            key={sticker}
+            style={{
+              width: 60,
+              height: 60,
+              borderRadius: tokens.borders.radius.md,
+              backgroundColor: tokens.colors.surfaceVariant,
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+            onPress={() => onSelectSticker(sticker)}
+            accessibilityLabel={`Sticker ${sticker}`}
+            accessibilityRole="button"
+          >
+            <AtomicText style={{ fontSize: 36 }}>{sticker}</AtomicText>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+});
+
+StickerPicker.displayName = "StickerPicker";
+
+const styles = StyleSheet.create({
+  container: { padding: 16, gap: 16 },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+  },
+});