@umituz/react-native-photo-editor 1.0.1

package/src/components/EditorToolbar.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { View, TouchableOpacity } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
+
+interface EditorToolbarProps {
+  onAddText: () => void;
+  onAddSticker: () => void;
+  onAIMagic?: () => void; // Optional AI integration
+  onOpenFilters: () => void;
+  onOpenLayers: () => void;
+  styles: Record<string, object>;
+  t: (key: string) => string;
+}
+
+export const EditorToolbar: React.FC<EditorToolbarProps> = ({
+  onAddText,
+  onAddSticker,
+  onAIMagic,
+  onOpenFilters,
+  onOpenLayers,
+  styles,
+  t,
+}) => {
+  return (
+    <View style={styles.bottomToolbar}>
+      <TouchableOpacity
+        style={[styles.toolButton, styles.toolButtonActive]}
+        onPress={onAddText}
+      >
+        <AtomicIcon name="text" size="md" color="primary" />
+        <AtomicText style={[styles.toolLabel, styles.toolLabelActive]}>
+          Text
+        </AtomicText>
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.toolButton} onPress={onAddSticker}>
+        <AtomicIcon name="happy" size="md" color="textSecondary" />
+        <AtomicText style={styles.toolLabel}>{t("editor.sticker")}</AtomicText>
+      </TouchableOpacity>
+      {onAIMagic && (
+        <TouchableOpacity style={styles.aiMagicButton} onPress={onAIMagic}>
+          <AtomicIcon name="sparkles" size="lg" customColor="#fff" />
+        </TouchableOpacity>
+      )}
+      <TouchableOpacity style={styles.toolButton} onPress={onOpenFilters}>
+        <AtomicIcon name="color-filter" size="md" color="textSecondary" />
+        <AtomicText style={styles.toolLabel}>{t("editor.filters")}</AtomicText>
+      </TouchableOpacity>
+      <TouchableOpacity style={styles.toolButton} onPress={onOpenLayers}>
+        <AtomicIcon name="layers" size="md" color="textSecondary" />
+        <AtomicText style={styles.toolLabel}>Layer</AtomicText>
+      </TouchableOpacity>
+    </View>
+  );
+};

package/src/components/FilterPicker.tsx

@@ -0,0 +1,102 @@
+import React from "react";
+import { View, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+interface FilterOption {
+  id: string;
+  name: string;
+  icon: string;
+  value: number;
+}
+
+const FILTERS: FilterOption[] = [
+  { id: "none", name: "None", icon: "close-circle", value: 0 },
+  { id: "sepia", name: "Sepia", icon: "color-palette", value: 0.5 },
+  { id: "grayscale", name: "B&W", icon: "contrast", value: 1 },
+  { id: "vintage", name: "Vintage", icon: "time", value: 0.7 },
+  { id: "warm", name: "Warm", icon: "sunny", value: 0.3 },
+  { id: "cool", name: "Cool", icon: "snow", value: 0.3 },
+];
+
+interface FilterPickerProps {
+  selectedFilter: string;
+  onSelectFilter: (filterId: string, value: number) => void;
+}
+
+export const FilterPicker: React.FC<FilterPickerProps> = ({
+  selectedFilter,
+  onSelectFilter,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = StyleSheet.create({
+    container: { padding: 16 },
+    title: {
+      fontSize: 18,
+      fontWeight: "bold",
+      color: tokens.colors.textPrimary,
+      marginBottom: 16,
+    },
+    grid: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: 12,
+    },
+    filter: {
+      width: 80,
+      height: 80,
+      borderRadius: 12,
+      backgroundColor: tokens.colors.surfaceVariant,
+      alignItems: "center",
+      justifyContent: "center",
+      borderWidth: 2,
+      borderColor: "transparent",
+    },
+    filterActive: {
+      borderColor: tokens.colors.primary,
+      backgroundColor: tokens.colors.primaryContainer,
+    },
+    filterName: {
+      marginTop: 4,
+      fontSize: 12,
+      color: tokens.colors.textSecondary,
+    },
+    filterNameActive: { color: tokens.colors.primary },
+  });
+
+  return (
+    <View style={styles.container}>
+      <AtomicText style={styles.title}>Filters</AtomicText>
+      <View style={styles.grid}>
+        {FILTERS.map((filter) => (
+          <TouchableOpacity
+            key={filter.id}
+            style={[
+              styles.filter,
+              selectedFilter === filter.id && styles.filterActive,
+            ]}
+            onPress={() => onSelectFilter(filter.id, filter.value)}
+          >
+            <AtomicIcon
+              name={filter.icon as any}
+              size="lg"
+              color={selectedFilter === filter.id ? "primary" : "textSecondary"}
+            />
+            <AtomicText
+              style={[
+                styles.filterName,
+                selectedFilter === filter.id && styles.filterNameActive,
+              ]}
+            >
+              {filter.name}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </View>
+    </View>
+  );
+};

package/src/components/FontControls.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { View, ScrollView, TouchableOpacity } from "react-native";
+import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
+
+interface FontControlsProps {
+  fontSize: number;
+  selectedFont: string;
+  fonts: readonly string[];
+  onFontSizeChange: (size: number) => void;
+  onFontSelect: (font: string) => void;
+  styles: Record<string, object>;
+}
+
+export const FontControls: React.FC<FontControlsProps> = ({
+  fontSize,
+  selectedFont,
+  fonts,
+  onFontSizeChange,
+  onFontSelect,
+  styles,
+}) => {
+  return (
+    <View style={styles.controlsPanel}>
+      <View style={styles.sliderRow}>
+        <View style={styles.sliderLabel}>
+          <AtomicIcon name="text" size="sm" color="textSecondary" />
+          <AtomicText style={styles.sliderLabelText}>Text Size</AtomicText>
+        </View>
+        <AtomicText style={styles.sliderValue}>{fontSize}px</AtomicText>
+      </View>
+      <View style={styles.sliderTrack}>
+        <View
+          style={[
+            styles.sliderFill,
+            { width: `${((fontSize - 12) / 84) * 100}%` },
+          ]}
+        />
+      </View>
+      <View style={{ flexDirection: "row", gap: 8, marginBottom: 16 }}>
+        <TouchableOpacity
+          onPress={() => onFontSizeChange(fontSize - 4)}
+          style={styles.fontChip}
+        >
+          <AtomicText style={styles.fontChipText}>-</AtomicText>
+        </TouchableOpacity>
+        <TouchableOpacity
+          onPress={() => onFontSizeChange(fontSize + 4)}
+          style={styles.fontChip}
+        >
+          <AtomicText style={styles.fontChipText}>+</AtomicText>
+        </TouchableOpacity>
+      </View>
+
+      <AtomicText style={styles.fontLabel}>Font Style</AtomicText>
+      <ScrollView
+        horizontal
+        showsHorizontalScrollIndicator={false}
+        contentContainerStyle={styles.fontRow}
+      >
+        {fonts.map((font) => (
+          <TouchableOpacity
+            key={font}
+            style={[
+              styles.fontChip,
+              selectedFont === font && styles.fontChipActive,
+            ]}
+            onPress={() => onFontSelect(font)}
+          >
+            <AtomicText
+              style={[
+                styles.fontChipText,
+                selectedFont === font && styles.fontChipTextActive,
+              ]}
+            >
+              {font}
+            </AtomicText>
+          </TouchableOpacity>
+        ))}
+      </ScrollView>
+    </View>
+  );
+};

package/src/components/LayerManager.tsx

@@ -0,0 +1,111 @@
+import React from "react";
+import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  AtomicIcon,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+import { Layer, TextLayer } from "../types";
+
+interface LayerManagerProps {
+  layers: Layer[];
+  activeLayerId: string | null;
+  onSelectLayer: (id: string) => void;
+  onDeleteLayer: (id: string) => void;
+  t: (key: string) => string;
+}
+
+export const LayerManager: React.FC<LayerManagerProps> = ({
+  layers,
+  activeLayerId,
+  onSelectLayer,
+  onDeleteLayer,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = StyleSheet.create({
+    container: { padding: 16 },
+    title: {
+      fontSize: 18,
+      fontWeight: "bold",
+      color: tokens.colors.textPrimary,
+      marginBottom: 16,
+    },
+    emptyText: {
+      color: tokens.colors.textSecondary,
+      textAlign: "center",
+      padding: 24,
+    },
+    layerItem: {
+      flexDirection: "row",
+      alignItems: "center",
+      padding: 12,
+      backgroundColor: tokens.colors.surfaceVariant,
+      borderRadius: 12,
+      marginBottom: 8,
+      borderWidth: 2,
+      borderColor: "transparent",
+    },
+    layerItemActive: {
+      borderColor: tokens.colors.primary,
+      backgroundColor: tokens.colors.primaryContainer,
+    },
+    layerInfo: { flex: 1, marginLeft: 12 },
+    layerType: { fontSize: 12, color: tokens.colors.textSecondary },
+    layerText: {
+      fontSize: 14,
+      color: tokens.colors.textPrimary,
+      fontWeight: "500",
+    },
+    deleteButton: { padding: 8 },
+  });
+
+  return (
+    <View style={styles.container}>
+      <AtomicText style={styles.title}>Layers</AtomicText>
+      {layers.length === 0 ? (
+        <AtomicText style={styles.emptyText}>
+          No layers yet. Add text or stickers!
+        </AtomicText>
+      ) : (
+        <ScrollView showsVerticalScrollIndicator={false}>
+          {layers.map((layer) => (
+            <TouchableOpacity
+              key={layer.id}
+              style={[
+                styles.layerItem,
+                activeLayerId === layer.id && styles.layerItemActive,
+              ]}
+              onPress={() => onSelectLayer(layer.id)}
+            >
+              <AtomicIcon
+                name={layer.type === "text" ? "text" : "happy"}
+                size="md"
+                color={activeLayerId === layer.id ? "primary" : "textSecondary"}
+              />
+              <View style={styles.layerInfo}>
+                <AtomicText style={styles.layerType}>
+                  {layer.type === "text" ? "Text" : "Sticker"}
+                </AtomicText>
+                <AtomicText style={styles.layerText} numberOfLines={1}>
+                  {layer.type === "text"
+                    ? (layer as TextLayer).text || t("editor.untitled")
+                    : "Emoji"}
+                </AtomicText>
+              </View>
+              {layers.length > 1 && (
+                <TouchableOpacity
+                  style={styles.deleteButton}
+                  onPress={() => onDeleteLayer(layer.id)}
+                >
+                  <AtomicIcon name="trash" size="sm" color="error" />
+                </TouchableOpacity>
+              )}
+            </TouchableOpacity>
+          ))}
+        </ScrollView>
+      )}
+    </View>
+  );
+};

package/src/components/StickerPicker.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+const STICKERS = [
+  "😀",
+  "😂",
+  "🤣",
+  "😍",
+  "🥰",
+  "😎",
+  "🤯",
+  "🥳",
+  "😤",
+  "💀",
+  "🔥",
+  "❤️",
+  "💯",
+  "✨",
+  "🎉",
+  "🤡",
+  "👀",
+  "🙌",
+  "👏",
+  "💪",
+  "🤝",
+  "🙈",
+  "🐶",
+  "🐱",
+  "🦊",
+  "🐸",
+  "🌟",
+  "⭐",
+  "🌈",
+  "☀️",
+  "🌙",
+  "💫",
+];
+
+interface StickerPickerProps {
+  onSelectSticker: (sticker: string) => void;
+}
+
+export const StickerPicker: React.FC<StickerPickerProps> = ({
+  onSelectSticker,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = StyleSheet.create({
+    container: { padding: 16 },
+    title: {
+      fontSize: 18,
+      fontWeight: "bold",
+      color: tokens.colors.textPrimary,
+      marginBottom: 16,
+    },
+    grid: {
+      flexDirection: "row",
+      flexWrap: "wrap",
+      gap: 12,
+    },
+    sticker: {
+      width: 56,
+      height: 56,
+      borderRadius: 12,
+      backgroundColor: tokens.colors.surfaceVariant,
+      alignItems: "center",
+      justifyContent: "center",
+    },
+    stickerText: { fontSize: 32 },
+  });
+
+  return (
+    <View style={styles.container}>
+      <AtomicText style={styles.title}>Emoji</AtomicText>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        <View style={styles.grid}>
+          {STICKERS.map((sticker, index) => (
+            <TouchableOpacity
+              key={index}
+              style={styles.sticker}
+              onPress={() => onSelectSticker(sticker)}
+            >
+              <AtomicText style={styles.stickerText}>{sticker}</AtomicText>
+            </TouchableOpacity>
+          ))}
+        </View>
+      </ScrollView>
+    </View>
+  );
+};

package/src/components/TextEditorSheet.tsx

@@ -0,0 +1,63 @@
+import React from "react";
+import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
+import {
+  AtomicText,
+  useAppDesignTokens,
+} from "@umituz/react-native-design-system";
+
+interface TextEditorSheetProps {
+  value: string;
+  onChange: (text: string) => void;
+  onSave: () => void;
+  t: (key: string) => string;
+}
+
+export const TextEditorSheet: React.FC<TextEditorSheetProps> = ({
+  value,
+  onChange,
+  onSave,
+  t,
+}) => {
+  const tokens = useAppDesignTokens();
+
+  const styles = StyleSheet.create({
+    container: { padding: 16 },
+    title: { fontSize: 18, fontWeight: "bold", marginBottom: 16 },
+    input: {
+      backgroundColor: tokens.colors.surfaceVariant,
+      borderRadius: 12,
+      padding: 16,
+      fontSize: 18,
+      color: tokens.colors.textPrimary,
+      marginBottom: 16,
+      textAlign: "center",
+    },
+    saveButton: {
+      backgroundColor: tokens.colors.primary,
+      borderRadius: 999,
+      padding: 16,
+      alignItems: "center",
+    },
+    saveButtonText: { color: tokens.colors.onPrimary, fontWeight: "bold" },
+  });
+
+  return (
+    <View style={styles.container}>
+      <AtomicText style={styles.title}>{t("editor.add_text")}</AtomicText>
+      <TextInput
+        value={value}
+        onChangeText={onChange}
+        placeholder={t("editor.tap_to_edit")}
+        placeholderTextColor={tokens.colors.textSecondary}
+        style={styles.input}
+        multiline
+        autoFocus
+      />
+      <TouchableOpacity onPress={onSave} style={styles.saveButton}>
+        <AtomicText style={styles.saveButtonText}>
+          {t("common.save")}
+        </AtomicText>
+      </TouchableOpacity>
+    </View>
+  );
+};

package/src/core/HistoryManager.ts

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