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

package/src/components/LayerManager.tsx

@@ -1,164 +0,0 @@
-import React, { useMemo } from "react";
-import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system/atoms";
-import { useAppDesignTokens } from "@umituz/react-native-design-system/theme";
-import { Layer, TextLayer } from "../types";
-
-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: React.FC<LayerManagerProps> = ({
-  layers,
-  activeLayerId,
-  onSelectLayer,
-  onDeleteLayer,
-  onDuplicateLayer,
-  onMoveLayerUp,
-  onMoveLayerDown,
-  t,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const styles = useMemo(() => StyleSheet.create({
-    container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
-    item: {
-      flexDirection: "row",
-      alignItems: "center",
-      padding: tokens.spacing.sm,
-      backgroundColor: tokens.colors.surfaceVariant,
-      borderRadius: tokens.borders.radius.md,
-      marginBottom: tokens.spacing.xs,
-      borderWidth: 2,
-      borderColor: "transparent",
-    },
-    active: {
-      borderColor: tokens.colors.primary,
-      backgroundColor: tokens.colors.primary + "10",
-    },
-    info: { flex: 1, marginLeft: tokens.spacing.sm },
-    actions: {
-      flexDirection: "row",
-      alignItems: "center",
-      gap: tokens.spacing.xs,
-    },
-    actionBtn: {
-      padding: tokens.spacing.xs,
-      borderRadius: tokens.borders.radius.sm,
-    },
-  }), [tokens]);
-
-  const sortedLayers = [...layers].reverse(); // top layer first in list
-
-  return (
-    <View style={styles.container}>
-      <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 =
-              layer.type === "text"
-                ? (layer as TextLayer).text || t("photo_editor.untitled") || "Untitled"
-                : "Sticker";
-            const isTop = idx === 0;
-            const isBottom = idx === sortedLayers.length - 1;
-
-            return (
-              <TouchableOpacity
-                key={layer.id}
-                style={[styles.item, isActive && styles.active]}
-                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={styles.info}>
-                  <AtomicText type="labelSmall" color="textSecondary">
-                    {layer.type.toUpperCase()}
-                  </AtomicText>
-                  <AtomicText fontWeight="bold" numberOfLines={1}>
-                    {label}
-                  </AtomicText>
-                </View>
-
-                <View style={styles.actions}>
-                  {onMoveLayerUp && (
-                    <TouchableOpacity
-                      style={styles.actionBtn}
-                      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={styles.actionBtn}
-                      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={styles.actionBtn}
-                      onPress={() => onDuplicateLayer(layer.id)}
-                      accessibilityLabel={`Duplicate ${label}`}
-                      accessibilityRole="button"
-                    >
-                      <AtomicIcon name="copy" size="sm" color="textSecondary" />
-                    </TouchableOpacity>
-                  )}
-
-                  <TouchableOpacity
-                    style={styles.actionBtn}
-                    onPress={() => onDeleteLayer(layer.id)}
-                    accessibilityLabel={`Delete ${label}`}
-                    accessibilityRole="button"
-                  >
-                    <AtomicIcon name="trash-outline" size="sm" color="error" />
-                  </TouchableOpacity>
-                </View>
-              </TouchableOpacity>
-            );
-          })
-        )}
-      </ScrollView>
-    </View>
-  );
-};

package/src/components/Slider.tsx

@@ -1,112 +0,0 @@
-import React, { 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: React.FC<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;
-          }}
-        >
-          {/* Track background */}
-          <View
-            style={{
-              height: 4,
-              backgroundColor: tokens.colors.surfaceVariant,
-              borderRadius: 2,
-            }}
-          >
-            {/* Filled portion */}
-            <View
-              style={{
-                width: `${percent * 100}%`,
-                height: "100%",
-                backgroundColor: tokens.colors.primary,
-                borderRadius: 2,
-              }}
-            />
-          </View>
-          {/* Thumb */}
-          <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>
-  );
-};

package/src/components/StickerPicker.tsx

@@ -1,47 +0,0 @@
-import React, { useMemo } 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 { DEFAULT_STICKERS } from "../constants";
-
-interface StickerPickerProps {
-  onSelectSticker: (sticker: string) => void;
-  stickers?: readonly string[];
-}
-
-export const StickerPicker: React.FC<StickerPickerProps> = ({
-  onSelectSticker,
-  stickers = DEFAULT_STICKERS,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const styles = useMemo(() => StyleSheet.create({
-    container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
-    grid: { flexDirection: "row", flexWrap: "wrap", gap: tokens.spacing.sm },
-    sticker: {
-      width: 50,
-      height: 50,
-      borderRadius: tokens.borders.radius.sm,
-      backgroundColor: tokens.colors.surfaceVariant,
-      alignItems: "center",
-      justifyContent: "center",
-    },
-  }), [tokens]);
-
-  return (
-    <View style={styles.container}>
-      <AtomicText type="headlineSmall">Stickers</AtomicText>
-      <ScrollView showsVerticalScrollIndicator={false}>
-        <View style={styles.grid}>
-          {stickers.map((s, i) => (
-            <TouchableOpacity key={`${s}-${i}`} style={styles.sticker} onPress={() => onSelectSticker(s)}>
-              <AtomicText style={{ fontSize: 32 }}>{s}</AtomicText>
-            </TouchableOpacity>
-          ))}
-        </View>
-      </ScrollView>
-    </View>
-  );
-};
-
-export default React.memo(StickerPicker);

package/src/components/TextEditorSheet.tsx

@@ -1,160 +0,0 @@
-import React, { useMemo } 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 "./ColorPicker";
-import type { TextAlign } from "../types";
-
-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: "»" },
-];
-
-export const TextEditorSheet: React.FC<TextEditorSheetProps> = ({
-  value,
-  onChange,
-  onSave,
-  t,
-  color = "#FFFFFF",
-  onColorChange,
-  textAlign = "center",
-  onTextAlignChange,
-  isBold = false,
-  onBoldChange,
-  isItalic = false,
-  onItalicChange,
-}) => {
-  const tokens = useAppDesignTokens();
-
-  const styles = useMemo(() => StyleSheet.create({
-    container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
-    input: {
-      backgroundColor: tokens.colors.surfaceVariant,
-      borderRadius: tokens.borders.radius.md,
-      padding: tokens.spacing.md,
-      fontSize: 18,
-      color: tokens.colors.textPrimary,
-      textAlign: "center",
-      minHeight: 90,
-    },
-    row: {
-      flexDirection: "row",
-      alignItems: "center",
-      gap: tokens.spacing.sm,
-    },
-    styleBtn: {
-      width: 44,
-      height: 44,
-      borderRadius: tokens.borders.radius.sm,
-      borderWidth: 1.5,
-      borderColor: tokens.colors.border,
-      alignItems: "center",
-      justifyContent: "center",
-      backgroundColor: tokens.colors.surfaceVariant,
-    },
-    styleBtnActive: {
-      borderColor: tokens.colors.primary,
-      backgroundColor: tokens.colors.primary + "20",
-    },
-  }), [tokens]);
-
-  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
-      />
-
-      {/* Style row: Bold, Italic, Alignment */}
-      <View style={styles.row}>
-        {onBoldChange && (
-          <TouchableOpacity
-            style={[styles.styleBtn, isBold && styles.styleBtnActive]}
-            onPress={() => onBoldChange(!isBold)}
-            accessibilityLabel="Bold"
-            accessibilityRole="button"
-            accessibilityState={{ selected: isBold }}
-          >
-            <AtomicText fontWeight="bold" color={isBold ? "primary" : "textSecondary"}>
-              B
-            </AtomicText>
-          </TouchableOpacity>
-        )}
-
-        {onItalicChange && (
-          <TouchableOpacity
-            style={[styles.styleBtn, isItalic && styles.styleBtnActive]}
-            onPress={() => onItalicChange(!isItalic)}
-            accessibilityLabel="Italic"
-            accessibilityRole="button"
-            accessibilityState={{ selected: isItalic }}
-          >
-            <AtomicText
-              color={isItalic ? "primary" : "textSecondary"}
-              style={{ fontStyle: "italic" }}
-            >
-              I
-            </AtomicText>
-          </TouchableOpacity>
-        )}
-
-        {onTextAlignChange && (
-          <View style={[styles.row, { marginLeft: tokens.spacing.sm }]}>
-            {ALIGN_OPTIONS.map(({ value: align, icon }) => (
-              <TouchableOpacity
-                key={align}
-                style={[styles.styleBtn, textAlign === align && styles.styleBtnActive]}
-                onPress={() => onTextAlignChange(align)}
-                accessibilityLabel={`Align ${align}`}
-                accessibilityRole="button"
-                accessibilityState={{ selected: textAlign === align }}
-              >
-                <AtomicText color={textAlign === align ? "primary" : "textSecondary"}>
-                  {icon}
-                </AtomicText>
-              </TouchableOpacity>
-            ))}
-          </View>
-        )}
-      </View>
-
-      {/* Color picker */}
-      {onColorChange && (
-        <ColorPicker
-          label="Text Color"
-          selectedColor={color}
-          onSelectColor={onColorChange}
-        />
-      )}
-
-      <AtomicButton variant="primary" onPress={onSave}>
-        {t("common.save") || "Save"}
-      </AtomicButton>
-    </View>
-  );
-};
-
-export default React.memo(TextEditorSheet);

package/src/core/HistoryManager.ts

@@ -1,53 +0,0 @@
-/**
- * History Manager for Undo/Redo functionality
- */
-
-export interface HistoryState<T> {
-  past: T[];
-  present: T;
-  future: T[];
-}
-
-export class HistoryManager<T> {
-  private readonly maxHistory = 20;
-
-  createInitialState(initialValue: T): HistoryState<T> {
-    return { past: [], present: initialValue, future: [] };
-  }
-
-  push(history: HistoryState<T>, newValue: T): HistoryState<T> {
-    return {
-      past: [...history.past.slice(-this.maxHistory + 1), history.present],
-      present: newValue,
-      future: [],
-    };
-  }
-
-  undo(history: HistoryState<T>): HistoryState<T> {
-    if (history.past.length === 0) return history;
-    const previous = history.past[history.past.length - 1];
-    return {
-      past: history.past.slice(0, -1),
-      present: previous,
-      future: [history.present, ...history.future],
-    };
-  }
-
-  redo(history: HistoryState<T>): HistoryState<T> {
-    if (history.future.length === 0) return history;
-    const next = history.future[0];
-    return {
-      past: [...history.past, history.present],
-      present: next,
-      future: history.future.slice(1),
-    };
-  }
-
-  canUndo(history: HistoryState<T>): boolean {
-    return history.past.length > 0;
-  }
-
-  canRedo(history: HistoryState<T>): boolean {
-    return history.future.length > 0;
-  }
-}