@umituz/react-native-photo-editor 1.0.10 → 1.0.12

package/src/components/EditorToolbar.tsx

@@ -1,12 +1,16 @@
 import React from "react";
 import { View, TouchableOpacity } from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
+import { 
+  AtomicText, 
+  AtomicIcon, 
+  useAppDesignTokens 
+} from "@umituz/react-native-design-system";
 
 interface EditorToolbarProps {
   onAddText: () => void;
-  onAddSticker: () => void;
-  onAIMagic?: () => void; // Optional AI integration
-  onOpenFilters: () => void;
+  onAddSticker?: () => void;
+  onAIMagic?: () => void;
+  onOpenFilters?: () => void;
   onOpenLayers: () => void;
   styles: Record<string, object>;
   t: (key: string) => string;
@@ -21,34 +25,56 @@ export const EditorToolbar: React.FC<EditorToolbarProps> = ({
   styles,
   t,
 }) => {
+  const tokens = useAppDesignTokens();
+
+  const ToolButton = ({ 
+    icon, 
+    label, 
+    onPress, 
+    isActive 
+  }: { 
+    icon: string; 
+    label: string; 
+    onPress: () => void; 
+    isActive?: boolean;
+  }) => (
+    <TouchableOpacity
+      style={[styles.toolButton, isActive && styles.toolButtonActive]}
+      onPress={onPress}
+    >
+      <AtomicIcon 
+        name={icon} 
+        size="md" 
+        color={isActive ? "primary" : "textSecondary"} 
+      />
+      <AtomicText 
+        type="labelSmall" 
+        color={isActive ? "primary" : "textSecondary"}
+      >
+        {label}
+      </AtomicText>
+    </TouchableOpacity>
+  );
+
   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>
+      <ToolButton icon="text" label="Text" onPress={onAddText} />
+      
+      {onAddSticker && (
+        <ToolButton icon="happy" label={t("editor.sticker")} onPress={onAddSticker} />
+      )}
+      
       {onAIMagic && (
         <TouchableOpacity style={styles.aiMagicButton} onPress={onAIMagic}>
-          <AtomicIcon name="sparkles" size="lg" customColor="#fff" />
+          <AtomicIcon name="sparkles" size="lg" customColor={tokens.colors.onPrimary} />
         </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>
+
+      {onOpenFilters && (
+        <ToolButton icon="color-filter" label={t("editor.filters")} onPress={onOpenFilters} />
+      )}
+      
+      <ToolButton icon="layers" label="Layers" onPress={onOpenLayers} />
     </View>
   );
 };

package/src/components/FilterPicker.tsx

@@ -1,18 +1,7 @@
 import React from "react";
 import { View, TouchableOpacity, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
-import { DEFAULT_FILTERS, type FilterType } from "../constants";
-
-interface FilterOption {
-  id: FilterType;
-  name: string;
-  icon: string;
-  value: number;
-}
+import { AtomicText, AtomicIcon, useAppDesignTokens } from "@umituz/react-native-design-system";
+import { DEFAULT_FILTERS, type FilterOption } from "../constants";
 
 interface FilterPickerProps {
   selectedFilter: string;
@@ -28,65 +17,44 @@ export const FilterPicker: React.FC<FilterPickerProps> = ({
   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,
-    },
+    container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
+    grid: { flexDirection: "row", flexWrap: "wrap", gap: tokens.spacing.sm },
     filter: {
-      width: 80,
-      height: 80,
-      borderRadius: 12,
+      width: 75,
+      height: 75,
+      borderRadius: tokens.borders.radius.md,
       backgroundColor: tokens.colors.surfaceVariant,
       alignItems: "center",
       justifyContent: "center",
       borderWidth: 2,
       borderColor: "transparent",
     },
-    filterActive: {
+    active: {
       borderColor: tokens.colors.primary,
-      backgroundColor: tokens.colors.primaryContainer,
-    },
-    filterName: {
-      marginTop: 4,
-      fontSize: 12,
-      color: tokens.colors.textSecondary,
+      backgroundColor: tokens.colors.primary + "10",
     },
-    filterNameActive: { color: tokens.colors.primary },
   });
 
   return (
     <View style={styles.container}>
-      <AtomicText style={styles.title}>Filters</AtomicText>
+      <AtomicText type="headlineSmall">Filters</AtomicText>
       <View style={styles.grid}>
-        {filters.map((filter) => (
+        {filters.map((f) => (
           <TouchableOpacity
-            key={filter.id}
-            style={[
-              styles.filter,
-              selectedFilter === filter.id && styles.filterActive,
-            ]}
-            onPress={() => onSelectFilter(filter.id, filter.value)}
+            key={f.id}
+            style={[styles.filter, selectedFilter === f.id && styles.active]}
+            onPress={() => onSelectFilter(f.id, f.value)}
           >
             <AtomicIcon
-              name={filter.icon as "close-circle" | "color-palette" | "contrast" | "time" | "sunny" | "snow"}
+              name={f.icon as "close-circle" | "color-palette" | "contrast" | "time" | "sunny" | "snow"}
               size="lg"
-              color={selectedFilter === filter.id ? "primary" : "textSecondary"}
+              color={selectedFilter === f.id ? "primary" : "textSecondary"}
             />
             <AtomicText
-              style={[
-                styles.filterName,
-                selectedFilter === filter.id && styles.filterNameActive,
-              ]}
+              type="labelSmall"
+              color={selectedFilter === f.id ? "primary" : "textSecondary"}
             >
-              {filter.name}
+              {f.name}
             </AtomicText>
           </TouchableOpacity>
         ))}

package/src/components/FontControls.tsx

@@ -1,6 +1,6 @@
 import React from "react";
-import { View, ScrollView, TouchableOpacity } from "react-native";
-import { AtomicText, AtomicIcon } from "@umituz/react-native-design-system";
+import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
+import { AtomicText, AtomicIcon, useAppDesignTokens } from "@umituz/react-native-design-system";
 
 interface FontControlsProps {
   fontSize: number;
@@ -17,65 +17,62 @@ export const FontControls: React.FC<FontControlsProps> = ({
   fonts,
   onFontSizeChange,
   onFontSelect,
-  styles,
+  styles: externalStyles,
 }) => {
+  const tokens = useAppDesignTokens();
+  
+  const styles = StyleSheet.create({
+    btn: {
+      padding: tokens.spacing.sm,
+      backgroundColor: tokens.colors.surface,
+      borderRadius: tokens.borders.radius.sm,
+      borderWidth: 1,
+      borderColor: tokens.colors.border,
+      minWidth: 44,
+      alignItems: "center",
+    }
+  });
+
   return (
-    <View style={styles.controlsPanel}>
-      <View style={styles.sliderRow}>
-        <View style={styles.sliderLabel}>
+    <View style={externalStyles.controlsPanel}>
+      <View style={externalStyles.sliderRow}>
+        <View style={externalStyles.sliderLabel}>
           <AtomicIcon name="text" size="sm" color="textSecondary" />
-          <AtomicText style={styles.sliderLabelText}>Text Size</AtomicText>
+          <AtomicText type="labelMedium" color="textSecondary">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}%` },
-          ]}
-        />
+        <AtomicText fontWeight="bold" color="primary">{fontSize}px</AtomicText>
       </View>
-      <View style={{ flexDirection: "row", gap: 8, marginBottom: 16 }}>
-        <TouchableOpacity
-          onPress={() => onFontSizeChange(fontSize - 4)}
-          style={styles.fontChip}
-        >
-          <AtomicText style={styles.fontChipText}>-</AtomicText>
+
+      <View style={{ flexDirection: "row", gap: tokens.spacing.sm, marginBottom: tokens.spacing.md }}>
+        <TouchableOpacity onPress={() => onFontSizeChange(fontSize - 4)} style={styles.btn}>
+          <AtomicText fontWeight="bold">-</AtomicText>
         </TouchableOpacity>
-        <TouchableOpacity
-          onPress={() => onFontSizeChange(fontSize + 4)}
-          style={styles.fontChip}
-        >
-          <AtomicText style={styles.fontChipText}>+</AtomicText>
+        <TouchableOpacity onPress={() => onFontSizeChange(fontSize + 4)} style={styles.btn}>
+          <AtomicText fontWeight="bold">+</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,
-              ]}
+      <AtomicText type="labelMedium" color="textSecondary" style={{ marginBottom: tokens.spacing.xs }}>
+        Font Style
+      </AtomicText>
+      <ScrollView horizontal showsHorizontalScrollIndicator={false}>
+        <View style={externalStyles.fontRow}>
+          {fonts.map((font) => (
+            <TouchableOpacity
+              key={font}
+              style={[externalStyles.fontChip, selectedFont === font && externalStyles.fontChipActive]}
+              onPress={() => onFontSelect(font)}
             >
-              {font}
-            </AtomicText>
-          </TouchableOpacity>
-        ))}
+              <AtomicText
+                fontWeight="bold"
+                color={selectedFont === font ? "onPrimary" : "textSecondary"}
+                style={{ fontFamily: font }}
+              >
+                {font}
+              </AtomicText>
+            </TouchableOpacity>
+          ))}
+        </View>
       </ScrollView>
     </View>
   );

package/src/components/LayerManager.tsx

@@ -1,10 +1,6 @@
 import React from "react";
 import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  AtomicIcon,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
+import { AtomicText, AtomicIcon, useAppDesignTokens } from "@umituz/react-native-design-system";
 import { Layer, TextLayer } from "../types";
 
 interface LayerManagerProps {
@@ -25,58 +21,37 @@ export const LayerManager: React.FC<LayerManagerProps> = ({
   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: {
+    container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
+    item: {
       flexDirection: "row",
       alignItems: "center",
-      padding: 12,
+      padding: tokens.spacing.md,
       backgroundColor: tokens.colors.surfaceVariant,
-      borderRadius: 12,
-      marginBottom: 8,
+      borderRadius: tokens.borders.radius.md,
+      marginBottom: tokens.spacing.xs,
       borderWidth: 2,
       borderColor: "transparent",
     },
-    layerItemActive: {
+    active: {
       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",
+      backgroundColor: tokens.colors.primary + "10",
     },
-    deleteButton: { padding: 8 },
+    info: { flex: 1, marginLeft: tokens.spacing.sm },
   });
 
   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) => (
+      <AtomicText type="headlineSmall">Layers</AtomicText>
+      <ScrollView showsVerticalScrollIndicator={false}>
+        {layers.length === 0 ? (
+          <AtomicText color="textSecondary" style={{ textAlign: "center", padding: tokens.spacing.xl }}>
+            No layers yet
+          </AtomicText>
+        ) : (
+          layers.map((layer) => (
             <TouchableOpacity
               key={layer.id}
-              style={[
-                styles.layerItem,
-                activeLayerId === layer.id && styles.layerItemActive,
-              ]}
+              style={[styles.item, activeLayerId === layer.id && styles.active]}
               onPress={() => onSelectLayer(layer.id)}
             >
               <AtomicIcon
@@ -84,28 +59,21 @@ export const LayerManager: React.FC<LayerManagerProps> = ({
                 size="md"
                 color={activeLayerId === layer.id ? "primary" : "textSecondary"}
               />
-              <View style={styles.layerInfo}>
-                <AtomicText style={styles.layerType}>
-                  {layer.type === "text" ? "Text" : "Sticker"}
+              <View style={styles.info}>
+                <AtomicText type="labelSmall" color="textSecondary">
+                  {layer.type.toUpperCase()}
                 </AtomicText>
-                <AtomicText style={styles.layerText} numberOfLines={1}>
-                  {layer.type === "text"
-                    ? (layer as TextLayer).text || t("editor.untitled")
-                    : "Emoji"}
+                <AtomicText fontWeight="bold" numberOfLines={1}>
+                  {layer.type === "text" ? (layer as TextLayer).text || t("editor.untitled") : "Sticker"}
                 </AtomicText>
               </View>
-              {layers.length > 1 && (
-                <TouchableOpacity
-                  style={styles.deleteButton}
-                  onPress={() => onDeleteLayer(layer.id)}
-                >
-                  <AtomicIcon name="trash" size="sm" color="error" />
-                </TouchableOpacity>
-              )}
+              <TouchableOpacity onPress={() => onDeleteLayer(layer.id)} style={{ padding: tokens.spacing.xs }}>
+                <AtomicIcon name="trash" size="sm" color="error" />
+              </TouchableOpacity>
             </TouchableOpacity>
-          ))}
-        </ScrollView>
-      )}
+          ))
+        )}
+      </ScrollView>
     </View>
   );
 };

package/src/components/StickerPicker.tsx

@@ -1,9 +1,6 @@
 import React from "react";
 import { View, ScrollView, TouchableOpacity, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
+import { AtomicText, useAppDesignTokens } from "@umituz/react-native-design-system";
 import { DEFAULT_STICKERS } from "../constants";
 
 interface StickerPickerProps {
@@ -18,41 +15,26 @@ export const StickerPicker: React.FC<StickerPickerProps> = ({
   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,
-    },
+    container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
+    grid: { flexDirection: "row", flexWrap: "wrap", gap: tokens.spacing.sm },
     sticker: {
-      width: 56,
-      height: 56,
-      borderRadius: 12,
+      width: 50,
+      height: 50,
+      borderRadius: tokens.borders.radius.sm,
       backgroundColor: tokens.colors.surfaceVariant,
       alignItems: "center",
       justifyContent: "center",
     },
-    stickerText: { fontSize: 32 },
   });
 
   return (
     <View style={styles.container}>
-      <AtomicText style={styles.title}>Emoji</AtomicText>
+      <AtomicText type="headlineSmall">Stickers</AtomicText>
       <ScrollView showsVerticalScrollIndicator={false}>
         <View style={styles.grid}>
-          {stickers.map((sticker, index) => (
-            <TouchableOpacity
-              key={sticker || index}
-              style={styles.sticker}
-              onPress={() => onSelectSticker(sticker)}
-            >
-              <AtomicText style={styles.stickerText}>{sticker}</AtomicText>
+          {stickers.map((s, i) => (
+            <TouchableOpacity key={`${s}-${i}`} style={styles.sticker} onPress={() => onSelectSticker(s)}>
+              <AtomicText style={{ fontSize: 32 }}>{s}</AtomicText>
             </TouchableOpacity>
           ))}
         </View>

package/src/components/TextEditorSheet.tsx

@@ -1,9 +1,6 @@
 import React from "react";
-import { View, TextInput, TouchableOpacity, StyleSheet } from "react-native";
-import {
-  AtomicText,
-  useAppDesignTokens,
-} from "@umituz/react-native-design-system";
+import { View, TextInput, StyleSheet } from "react-native";
+import { AtomicText, useAppDesignTokens, AtomicButton } from "@umituz/react-native-design-system";
 
 interface TextEditorSheetProps {
   value: string;
@@ -21,29 +18,22 @@ export const TextEditorSheet: React.FC<TextEditorSheetProps> = ({
   const tokens = useAppDesignTokens();
 
   const styles = StyleSheet.create({
-    container: { padding: 16 },
-    title: { fontSize: 18, fontWeight: "bold", marginBottom: 16 },
+    container: { padding: tokens.spacing.md, gap: tokens.spacing.md },
     input: {
       backgroundColor: tokens.colors.surfaceVariant,
-      borderRadius: 12,
-      padding: 16,
+      borderRadius: tokens.borders.radius.md,
+      padding: tokens.spacing.md,
       fontSize: 18,
       color: tokens.colors.textPrimary,
-      marginBottom: 16,
       textAlign: "center",
+      minHeight: 120,
     },
-    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>
+      <AtomicText type="headlineSmall">{t("editor.add_text")}</AtomicText>
+      
       <TextInput
         value={value}
         onChangeText={onChange}
@@ -53,11 +43,10 @@ export const TextEditorSheet: React.FC<TextEditorSheetProps> = ({
         multiline
         autoFocus
       />
-      <TouchableOpacity onPress={onSave} style={styles.saveButton}>
-        <AtomicText style={styles.saveButtonText}>
-          {t("common.save")}
-        </AtomicText>
-      </TouchableOpacity>
+
+      <AtomicButton variant="primary" onPress={onSave}>
+        {t("common.save")}
+      </AtomicButton>
     </View>
   );
 };

package/src/constants.ts

@@ -42,6 +42,13 @@ export const DEFAULT_STICKERS = [
 
 export type FilterType = "none" | "sepia" | "grayscale" | "vintage" | "warm" | "cool";
 
+export interface FilterOption {
+  id: FilterType;
+  name: string;
+  icon: string;
+  value: number;
+}
+
 export const DEFAULT_FILTERS = [
   { id: "none" as FilterType, name: "None", icon: "close-circle", value: 0 },
   { id: "sepia" as FilterType, name: "Sepia", icon: "color-palette", value: 0.5 },

package/src/core/HistoryManager.ts

@@ -72,4 +72,4 @@ export class HistoryManager<T> {
   }
 }
 
-export const historyManager = new HistoryManager();
+