npm - @umituz/react-native-photo-editor - Versions diffs - 1.0.9 → 1.0.11 - Mend

@umituz/react-native-photo-editor 1.0.9 → 1.0.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (16) hide show

package/package.json +1 -1
package/src/PhotoEditor.tsx +24 -106
package/src/components/AIMagicSheet.tsx +28 -119
package/src/components/DraggableSticker.tsx +30 -39
package/src/components/DraggableText.tsx +43 -77
package/src/components/EditorToolbar.tsx +52 -26
package/src/components/FilterPicker.tsx +19 -51
package/src/components/FontControls.tsx +48 -51
package/src/components/LayerManager.tsx +29 -61
package/src/components/StickerPicker.tsx +10 -28
package/src/components/TextEditorSheet.tsx +12 -23
package/src/constants.ts +7 -0
package/src/core/HistoryManager.ts +1 -1
package/src/hooks/usePhotoEditor.ts +25 -80
package/src/hooks/usePhotoEditorUI.ts +29 -74
package/src/styles.ts +26 -106

package/src/components/EditorToolbar.tsx CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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 CHANGED Viewed

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