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

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

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

@@ -0,0 +1,159 @@
+/**
+ * Text Editor Sheet Component
+ * Bottom sheet for editing text layers
+ */
+
+import React, { memo } from "react";
+import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText, AtomicButton } from "@umituz/react-native-design-system/atoms";
+import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
+import { ColorPicker } from "../ui/ColorPicker";
+import type { TextAlign } from "../../../domain/entities/Layer";
+
+interface TextEditorSheetProps {
+  value: string;
+  onChange: (text: string) => void;
+  onSave: () => void;
+  t: (key: string) => string;
+  color?: string;
+  onColorChange?: (color: string) => void;
+  textAlign?: TextAlign;
+  onTextAlignChange?: (align: TextAlign) => void;
+  isBold?: boolean;
+  onBoldChange?: (bold: boolean) => void;
+  isItalic?: boolean;
+  onItalicChange?: (italic: boolean) => void;
+}
+
+const ALIGN_OPTIONS: { value: TextAlign; icon: string }[] = [
+  { value: "left", icon: "«" },
+  { value: "center", icon: "≡" },
+  { value: "right", icon: "»" },
+];
+
+const StyleButton = memo<{ label: string; isActive: boolean; onPress: () => void; children: React.ReactNode }>(
+  ({ label, isActive, onPress, children }) => {
+    const tokens = useAppDesignTokens();
+
+    return (
+      <TouchableOpacity
+        style={{
+          width: 44,
+          height: 44,
+          borderRadius: tokens.borders.radius.sm,
+          borderWidth: 1.5,
+          borderColor: isActive ? tokens.colors.primary : tokens.colors.border,
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: isActive ? tokens.colors.primary + "20" : tokens.colors.surfaceVariant,
+        }}
+        onPress={onPress}
+        accessibilityLabel={label}
+        accessibilityRole="button"
+        accessibilityState={{ selected: isActive }}
+      >
+        {children}
+      </TouchableOpacity>
+    );
+  }
+);
+
+StyleButton.displayName = "StyleButton";
+
+export const TextEditorSheet = memo<TextEditorSheetProps>(({
+  value,
+  onChange,
+  onSave,
+  t,
+  color = "#FFFFFF",
+  onColorChange,
+  textAlign = "center",
+  onTextAlignChange,
+  isBold = false,
+  onBoldChange,
+  isItalic = false,
+  onItalicChange,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.container}>
+      <AtomicText type="headlineSmall">{t("photo_editor.add_text") || "Edit Text"}</AtomicText>
+
+      <TextInput
+        value={value}
+        onChangeText={onChange}
+        placeholder={t("photo_editor.tap_to_edit") || "Enter text…"}
+        placeholderTextColor={tokens.colors.textSecondary}
+        style={styles.input}
+        multiline
+        autoFocus
+      />
+
+      <View style={styles.row}>
+        {onBoldChange && (
+          <StyleButton label="Bold" isActive={isBold} onPress={() => onBoldChange(!isBold)}>
+            <AtomicText fontWeight="bold" color={isBold ? "primary" : "textSecondary"}>
+              B
+            </AtomicText>
+          </StyleButton>
+        )}
+
+        {onItalicChange && (
+          <StyleButton label="Italic" isActive={isItalic} onPress={() => onItalicChange(!isItalic)}>
+            <AtomicText color={isItalic ? "primary" : "textSecondary"} style={{ fontStyle: "italic" }}>
+              I
+            </AtomicText>
+          </StyleButton>
+        )}
+
+        {onTextAlignChange && (
+          <View style={[styles.row, { marginLeft: tokens.spacing.sm }]}>
+            {ALIGN_OPTIONS.map(({ value: align, icon }) => (
+              <StyleButton
+                key={align}
+                label={`Align ${align}`}
+                isActive={textAlign === align}
+                onPress={() => onTextAlignChange(align)}
+              >
+                <AtomicText color={textAlign === align ? "primary" : "textSecondary"}>{icon}</AtomicText>
+              </StyleButton>
+            ))}
+          </View>
+        )}
+      </View>
+
+      {onColorChange && (
+        <ColorPicker
+          label="Text Color"
+          selectedColor={color}
+          onSelectColor={onColorChange}
+        />
+      )}
+
+      <AtomicButton variant="primary" onPress={onSave}>
+        {t("common.save") || "Save"}
+      </AtomicButton>
+    </View>
+  );
+});
+
+TextEditorSheet.displayName = "TextEditorSheet";
+
+const styles = StyleSheet.create({
+  container: { padding: 16, gap: 16 },
+  input: {
+    backgroundColor: "#F5F5F5",
+    borderRadius: 8,
+    padding: 16,
+    fontSize: 18,
+    color: "#000",
+    textAlign: "center",
+    minHeight: 90,
+  },
+  row: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8,
+  },
+});

package/src/presentation/components/ui/ColorPicker.tsx

@@ -0,0 +1,78 @@
+/**
+ * Color Picker Component
+ * Grid of color options
+ */
+
+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_COLORS = [
+  "#FFFFFF", "#000000", "#888888", "#CCCCCC",
+  "#FF3B30", "#FF9500", "#FFCC00", "#FF2D55",
+  "#34C759", "#30B0C7", "#007AFF", "#5AC8FA",
+  "#5856D6", "#AF52DE", "#FF6B6B", "#FFD93D",
+  "#6BCB77", "#4D96FF", "#C77DFF", "#F72585",
+];
+
+interface ColorPickerProps {
+  label?: string;
+  selectedColor: string;
+  onSelectColor: (color: string) => void;
+  colors?: readonly string[];
+}
+
+export const ColorPicker = memo<ColorPickerProps>(({
+  label,
+  selectedColor,
+  onSelectColor,
+  colors = DEFAULT_COLORS,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  return (
+    <View style={styles.container}>
+      {label && (
+        <AtomicText type="labelMedium" color="textSecondary" style={{ marginBottom: tokens.spacing.sm }}>
+          {label}
+        </AtomicText>
+      )}
+      <View style={styles.grid}>
+        {colors.map((color) => (
+          <TouchableOpacity
+            key={color}
+            style={[
+              styles.color,
+              {
+                backgroundColor: color,
+                borderWidth: selectedColor === color ? 3 : 1,
+                borderColor: selectedColor === color ? tokens.colors.primary : "#E0E0E0",
+              },
+            ]}
+            onPress={() => onSelectColor(color)}
+            accessibilityLabel={`Color ${color}`}
+            accessibilityRole="button"
+            accessibilityState={{ selected: selectedColor === color }}
+          />
+        ))}
+      </View>
+    </View>
+  );
+});
+
+ColorPicker.displayName = "ColorPicker";
+
+const styles = StyleSheet.create({
+  container: { gap: 8 },
+  grid: {
+    flexDirection: "row",
+    flexWrap: "wrap",
+    gap: 12,
+  },
+  color: {
+    width: 36,
+    height: 36,
+    borderRadius: 18,
+  },
+});

package/src/presentation/components/ui/Slider.tsx

@@ -0,0 +1,116 @@
+/**
+ * Slider Component
+ * Custom slider for numeric values
+ */
+
+import React, { memo, useRef, useState } from "react";
+import { View } 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";
+
+interface SliderProps {
+  label: string;
+  value: number;
+  min: number;
+  max: number;
+  step?: number;
+  onValueChange: (val: number) => void;
+  formatValue?: (val: number) => string;
+}
+
+export const Slider = memo<SliderProps>(({
+  label,
+  value,
+  min,
+  max,
+  step = 0.05,
+  onValueChange,
+  formatValue,
+}) => {
+  const tokens = useAppDesignTokens();
+  const [trackWidth, setTrackWidth] = useState(200);
+  const trackWidthRef = useRef(200);
+  const startValueRef = useRef(value);
+  const valueRef = useRef(value);
+  valueRef.current = value;
+
+  const clamp = (v: number) => Math.max(min, Math.min(max, v));
+  const snap = (v: number) => parseFloat((Math.round(v / step) * step).toFixed(4));
+
+  const panGesture = Gesture.Pan()
+    .runOnJS(true)
+    .onStart(() => {
+      startValueRef.current = valueRef.current;
+    })
+    .onUpdate((e) => {
+      const ratio = e.translationX / trackWidthRef.current;
+      const delta = ratio * (max - min);
+      onValueChange(snap(clamp(startValueRef.current + delta)));
+    });
+
+  const percent = Math.max(0, Math.min(1, (value - min) / (max - min)));
+  const thumbOffset = percent * trackWidth - 12;
+  const displayValue = formatValue ? formatValue(value) : value.toFixed(1);
+
+  return (
+    <View style={{ gap: tokens.spacing.xs }}>
+      <View
+        style={{
+          flexDirection: "row",
+          justifyContent: "space-between",
+          alignItems: "center",
+        }}
+      >
+        <AtomicText type="labelMedium" color="textSecondary">
+          {label}
+        </AtomicText>
+        <AtomicText type="labelMedium" color="primary" fontWeight="bold">
+          {displayValue}
+        </AtomicText>
+      </View>
+      <GestureDetector gesture={panGesture}>
+        <View
+          style={{ height: 44, justifyContent: "center", paddingHorizontal: 12 }}
+          onLayout={(e) => {
+            const w = Math.max(1, e.nativeEvent.layout.width - 24);
+            setTrackWidth(w);
+            trackWidthRef.current = w;
+          }}
+        >
+          <View
+            style={{
+              height: 4,
+              backgroundColor: tokens.colors.surfaceVariant,
+              borderRadius: 2,
+            }}
+          >
+            <View
+              style={{
+                width: `${percent * 100}%`,
+                height: "100%",
+                backgroundColor: tokens.colors.primary,
+                borderRadius: 2,
+              }}
+            />
+          </View>
+          <View
+            style={{
+              position: "absolute",
+              left: thumbOffset + 12,
+              width: 24,
+              height: 24,
+              borderRadius: 12,
+              backgroundColor: tokens.colors.primary,
+              borderWidth: 2.5,
+              borderColor: tokens.colors.surface,
+              top: 10,
+            }}
+          />
+        </View>
+      </GestureDetector>
+    </View>
+  );
+});
+
+Slider.displayName = "Slider";